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

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:

----------
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:

----------
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

#framer #webdesign #nocode

[lekwapemamyala]

One thing about me... when I come across invaluable videos such as this one, I throw them straight into my play list... then subscribe and hit the bell icon.❤😊

[JadanDuffin]

I'm almost half way through this and man, I am really enjoying the pacing and the clarity at which you are teaching. Great job man! I hope you continue with these awesome tutorials! Thank you so much for sharing this level of quality FOR FREE! I dont have to spend $600 bucks to learn the basics, you really are a shining star of what its like to be a giver of knowledge.

[artcgix]

Wow! This is one of the best Framer tutorials by far! Pretty complete, well-paced, and explained perfectly! Thank you so much for giving us this for free! Hopefully Framer supports you even further so you can go into detail with more tutorials specially CMS and custom coding for those of us that come from design background with absolutely no idea of coding... LOVED this! Also, thank you so much for giving us a tutorial with a full-screen! I think there is a trend of people making tutorials (even Framer does this) with the useless desktop background taking up some important realstate of the screen, so thank you so much for making it trully feull-screen! Best 4 hours spent in learning! Thank you!

[endgamefond]

It's amazing that education are free on YouTube

[Tanguylecoutre]

Wtf!! This timing couldn't be better. I just finished watching your other 2hrs tutorial and it was AMAZING!

[haxydraws]

After completing four hours of this learning gem, I feel accomplished. It took me over a week to go through the tutorial, and it was truly beneficial in enhancing my Framer journey. A big shout out to Designcode for putting so much effort into creating these excellent tutorials. Looking forward to seeing more of this quality content.

[AyberkKole]

This is the best Framer course on the Youtube. Well structured, easy to follow and pack with invaluable information. Thank you so much for your effort!

[mr.chinaski]

Awesome content - there are lots of short Framer clips about specific tasks, but this one is a whole new level of knowledge.

[lautbrecher]

one of the best tutorial/courses I've watched in general!!! great length, depth, story arc and so on. Just awesome

[jtisaks]

Can’t wait to finish this video. Thank you was waiting for this 👏

[eba-rave]

Thank you for this awesome course and for explaining step by step! 🤩

[chiaza]

Nearly done with the course and this is one of the most amazing courses I've ever seen. I love the video style (how it was edited, the zooming in and out etc) and the tutor does a pretty good job with pacing and explaining. Great work guys. Thanks.

[petermckinnon]

About time, a brilliant tutorial on Framer, concentrating on the editor & the tools being used and not flickering back & forth to the presenter like the crappy Framer Tutorials on their web A big thank you. I don't normally like & subscribe but you have my vote....

[firuzaaliyeva]

I am in love what I have created! Thanks a lot for explaining step by step :)

[officialmelon]

Just upgraded my workspace into Basic! This Tutorial really inspired me and help me get into framer! Thank you so much!

[painf]

I learn a lot from watching this one. Thanks! I tried Framer today.

[isabellasimi]

Omg !! This is amazing ! Thank you, you made my day 🙌🏻

[jc-izlp]

Exactly what I was looking for! Bought the Framer & Figma design system and absolutely love it

[VivekKumarSahu]

Loved it. Covered almost every aspect of FRAMER. Thanks for the buttery smooth 4hrs + long video.❤

[Tankturtle]

I got heaven in the world of web designing and website making after seeing the god level video 🤯. A lot of huge respect brooo. I have no words to pay you heartful❤ respect.
Keep up your crearivity. 👍👍