Build a 3D Site Without Code with Framer - Crash Course

3-hour course for beginners on designing a multi-page site with 3D assets, animations, adaptive layouts and CMS

Imagine being able to create a fully functional site from a design tool without writing a single line of code. Framer offers the power of CSS layouts and animations with the familiar and quick editing capabilities of Figma. You can deploy and iterate almost instantly without having to wait for builds and you have essential features like search engine optimizations and a content management system.

0:00 Intro to Framer
4:06 3D Animation and Text Styles
15:50 Stacks and Adaptive Layout
32:46 Components and Interactions
48:17 Top Bar Menu Animation
01:06:32 Scroll Parallax
01:29:05 Appear Animation
01:45:52 Overlay and Forms
02:03:40 Pages and Breakpoints
02:19:55 CMS and Content

#webdesign #uidesign #nocode

[latiolaisgradnigo]

I purchased the Flux Academy Framer Masterclass and your tutorial was wayyy more valuable..and also free I might add.

[uxcenterd]

Best and most valuable free course i've ever seen on the internet.
Thank you so much for your effort,
One of the things I appreciated most about the video was the focus on practical, real-world examples. The instructor showed how to apply the concepts being taught to actual web design projects, which really helped me to understand how to use the techniques in a practical setting.

[viceduv]

I think this is the best crash course I've found on YouTube.

[prashantgotad]

Best and most valuable free course I've ever seen on the internet. Thank you so much for this amazingly helpful content.

[leticiamatos]

This tutorial is amazing! As a Brazilian, I'm still improving my English, and there are few content creators on Framer in Brazil with this teaching style. Moreover, you speak at a slower pace, which is great for me as it allows me to better follow the tutorial. Thnks 😊

[Tehnget]

Whoever made this video, I really want to express my deepest gratitude😊. Thanks to you, I can smoothly and understand how to create prototypes in Framer, and thank you as well for providing the assets for us to learn.😉

[jswanson]

This is a fantastic tutorial! As a new Framer user I've run into several problems that you've actually help solve and I'm only 30 minutes in. I can't wait to see what else I learn. Thank you for creating this and sharing.

[paschaltakes]

I was about learning Webflow... Well I just found a better option 😇

[bySterling]

Amazing tutorial and site design! I’m a WordPress expert but this looks like a much cleaner foundation to build with

[bardiabgh]

IDK what to say but i just wanted to say thank you for sharing such valuable lessons.

[Digital-Unicorn]

Thank you so much Framer and design code... I've been a wordpress developer but was never happy, So i have been keep jumping to various CMS's and framer is the real

[Stiiched]

So informative. Fact packed!
Easy explanations, if you don’t understand everything at first, give it some time, it will be referenced later. Watch this. I’m super pumped to get started on my new site!!

[tristancollera]

Thank you for the crash course! I know where to build my portfolio now.

[pauld]

This is the most calming voice I ever heard!

[runebr]

We need tutorials on building backgrounds like yours!

[frameraddict]

Thank you for this "All in one place answers" video

[kennedymcnoble]

I have watched many videos about Framer and you're the best so far.

[chidorirasenganz]

This video convinced me to go all in on Framer 🙌 I

[onurazorqs]

Amazing, BUT what makes the site unique are the 3D images and the background I WANT to know how to create them! ❤

[Micheal_Muane]

Hi @Designcodeteam I would like to express my gratitude to you and your esteemed team for creating this amazing tutorial. However, it is incumbent upon me to bring to your attention that certain revisions are required, as numerous components and features have either been removed or relocated to alternative sections.