Master No-Code Web Design with Framer - 4-hour Free Course

In this 4-hour free course, you'll learn to create beautiful, modern interfaces. Sponsored by https://framer.com

Start with dark mode and glass designs, then move from Figma to Framer, using stack and grid layouts for responsive websites. Add animations, scroll effects and custom components.

- Final site:
https://significant-nature-656376.fra...

- Figma template: https://www.figma.com/community/file/...

- Framer Remix: https://framer.com/projects/new?dupli...

- Watch on DesignCode with full content: https://designcode.io/framer-web-desi...

----------
GETTING STARTED

This course is perfect for beginners! No need for prior coding or web design experience. We'll guide you through everything step by step, starting from the basics. However, a little familiarity with computers and understanding the basics of HTML and CSS will be helpful.

Here's how to begin:

- View the final site to get inspired and see what you'll be able to create by the end of this course: https://significant-nature-656376.fra...

- Sign up at Framer to join the community and start designing: https://www.framer.com.

- Get the Remix link to dive into the design file with ease: https://framer.com/projects/new?dupli....

- Download the Figma file to start with ready-made designs: https://www.dropbox.com/scl/fi/r6914i....

Or skip ahead using the Framer template: https://framer.com/projects/new?dupli....

- Framer Desktop App: Enhance your designing workflow by downloading the app or work directly in your browser: https://www.framer.com/downloads/.

- Framer Academy: A treasure trove of documentation at your fingertips. Visit the Framer Academy: https://www.framer.com/academy/topics....

- Learn Framer UI: Master the basics of Framer's user interface here: https://www.framer.com/features/desig....

----------
ABOUT FRAMER

Framer is your go-to web design tool for crafting stunning, interactive websites with ease. Designed for a smooth transition for Figma users, it boasts a comprehensive Figma plugin for quick layout imports. With a wealth of preset templates, components, dynamic effects, and even AI-powered tools, Framer is both powerful and accessible, regardless of your experience level.

Dive in and start creating! This course will open up a whole new world of web design possibilities for you. Let's make something amazing together.

0:00:00 Intro to Course
0:03:07 Getting Started
0:07:08 Create your first layout
0:20:55 Framer AI
0:28:21 Basic Layout
0:43:47 Animated Text
1:02:03 Figma to Framer
1:15:16 Adaptive Layout
1:27:22 Breakpoints
1:41:19 Components
1:52:15 Effects
2:03:33 Scroll Speed
2:18:51 Scroll Variants
2:31:04 Copy Components
2:41:04 Grid Layouts
2:52:28 Icon Animation
3:03:31 Code Components
3:15:42 Property Controls
3:25:05 Code Overrides
3:38:25 CMS
3:52:49 Search and Conclusion

----------
FOLLOW MY JOURNEY

Twitter:   / mengto  
Instagram:   / mengto  
TikTok:   / mengto.design  

#framer #webdesign #nocode