In this program, you’ll learn the basic things you need to be able to build any website on Framer. It’s the basic infrastructure program. The goal is to take the lessons in bits enough to understand the rudiments before advancing to the next learning phase.

<aside> 💡 It’s important to note that there’ll be tasks that are too easy, and you feel like you’re ready to go to the next one, well… in my experience, that’s where the issue lies, learning in bits helps you learn and assimilate, too much learning clusters the mind and limits the information you can hold.

</aside>

The best way to learn fast and get results for this program is to prepare your Figma design file before starting, rather than using the same design shared in these videos.

I have prepared a Figma file for you just in case you don't have one

https://www.figma.com/file/HEAdnIfGNjrwp2xHPDi8qJ/Figma-to-Framer?type=design&node-id=2%3A149&mode=design&t=6hKePa8C8GtE8f6h-1

Day 1

1. Introduction to framer, Framer fundamentals -

The priority for Day 1 is to understand the most simple definition of Framer, what is Framer, how it works, and to what extent can you use Framer.

https://www.youtube.com/watch?v=IvYLLeS5-Ko&list=PL9p5auxyrweOM5GPfmkmA5v5vq-Kpmapd&index=1&pp=iAQB

https://www.youtube.com/watch?v=Xg5rXS-ULNs&list=PL9p5auxyrweOM5GPfmkmA5v5vq-Kpmapd&index=2&pp=iAQB

1. The framer Canvas and all that fits - Positioning, Sizing and Layout

https://www.youtube.com/watch?v=CsOIIEmaKlc&list=PL9p5auxyrweOM5GPfmkmA5v5vq-Kpmapd&index=3&pp=iAQB

<aside> 💡 Please note that the goal of day 1 is to understand Framer fundamentals, just in case you have questions - feel free to tag me on Twitter https://twitter.com/ozenua_

If you finish this task early enough, feel free to refresh and restart, or attempt to play around Framer to make sure you have explored all you can.

</aside>

Day 2

1. Create your first Hero section on Framer - same video (we’d most likely create a stand-alone video for this)

Positioning, Sizing and Layout — Framer Fundamentals

Day 3

1. Component and Variables - Buttons and Navigation

https://www.youtube.com/watch?v=40sB9x4M9hQ&list=PL9p5auxyrweOM5GPfmkmA5v5vq-Kpmapd&index=6

https://www.youtube.com/watch?v=2jJkUuWhv70

Day 4

Building custom cards

https://www.youtube.com/watch?v=cWlrFV5ANuU&list=PL9p5auxyrweOM5GPfmkmA5v5vq-Kpmapd&index=7&t=37s&pp=iAQB

Navigation element/components

https://www.youtube.com/watch?v=tfidygrK4UU

Accordion dropdown

https://www.youtube.com/watch?v=sN-yqF4dVrU

Day 5

Building testimonial section

https://www.youtube.com/watch?v=VWkJEhFYNnA&list=PL9p5auxyrweOM5GPfmkmA5v5vq-Kpmapd&index=8&pp=iAQB

Day 6

Building a carousel - Horizontal

https://www.youtube.com/watch?v=ao_TnSvXz94

https://www.youtube.com/watch?v=nS_9yAABLwc

Vertical Carousels (optional)

https://www.youtube.com/watch?v=wnyXgi8akKc

Day 7

Adding a footer element on Framer

https://www.youtube.com/watch?v=7_YViSOK3no&list=PL9p5auxyrweOM5GPfmkmA5v5vq-Kpmapd&index=9

Day 8

Responsiveness - Breakpoints

https://www.youtube.com/watch?v=CCQtdj3Y1ck&list=PL9p5auxyrweOM5GPfmkmA5v5vq-Kpmapd&index=10&pp=iAQB

Day 9

Animation and Effects

https://www.youtube.com/watch?v=vy34dSrFt5Y&list=PL9p5auxyrweOM5GPfmkmA5v5vq-Kpmapd&index=11&pp=iAQB

Day 10

Publishing your website

https://www.youtube.com/watch?v=NhZDs6HNr70&list=PL9p5auxyrweOM5GPfmkmA5v5vq-Kpmapd&index=12&pp=iAQB

https://www.youtube.com/watch?v=2sY0EWaSzNQ&list=PL9p5auxyrweOM5GPfmkmA5v5vq-Kpmapd&index=13&pp=iAQB

<aside> 💡 Today marks the end of the 10-day program, at this point, you should have your functional framer website and that’s lovely.

</aside>

So, are you a Framer dev now? Technically, I’d not say so, one attempt isn’t enough, here’s where you start honing your skill and not stop at one. There’s also a lot more to learn that should still be categorized as basics.

Thanks for joining the train to be better.