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

194,635
0
Published 2022-08-30
3-hour course for beginners on designing a multi-page site with 3D assets, animations, adaptive layouts and CMS
Sponsored by www.framer.com/?utm_source=designcode&utm_medium=y…

Final site: soft-buttons-231170.framer.app/
Template: framer.com/projects/new?duplicate=jVScTJ0E7HJdoU7F…
Assets: www.dropbox.com/scl/fo/pw9eq6mzdm75etdw1v248/h?dl=…
Text content: designcode.io/framer-3d-site

Spline URL #1: my.spline.design/framercopy-bd9e7275da55ebaf7252e8…
Spline URL #2: my.spline.design/daccord-49093ae84c00862e2451c9531…

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

All Comments (21)
  • I purchased the Flux Academy Framer Masterclass and your tutorial was wayyy more valuable..and also free I might add.
  • @Markthecheeto
    new subscriber here. just came across Framer and fell in love with it. I'm new to web design and development and believe Framer can make my life much easier. thanks for this tutorial.
  • @paschaltakes
    I was about learning Webflow... Well I just found a better option 😇
  • @Prod.NickMill
    Very well done, thank you for this amazing content and detailed explanations. Much appreciated!!
  • @jswanson859
    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.
  • @Teh4nget
    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.😉
  • @pauld8632
    This is the most calming voice I ever heard!
  • @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.
  • yours is perfect. These are going to takes loads of ti off the learning process.
  • @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!!
  • @guapshonen
    Thanks for this. I wish you all the best ❤
  • @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 deal,.......
  • @bardiabgh
    IDK what to say but i just wanted to say thank you for sharing such valuable lessons.