You made it! You’ve gained a ton of web design and development superpowers — and guess what? You can keep learning! Visit our videos and documentation on Webflow University to gain new knowledge and skills. And show the world your new superpowers by taking the Webflow 101 certification exam. What are you waiting for? Take the exam here: https://university.webflow.com/certification-exams
00:00 — Introduction 00:08 — Recap of intro lessons 00:22 — Recap of site build: hero lesson 00:34 — Recap of site build: navigation lesson 00:45 — Recap of site build: logos lesson 00:52 — Recap of site build: cards lesson 01:15 — Recap of site build: form lesson 01:23 — Recap of site build: footer lesson 01:26 — Recap of site build: responsiveness lesson 01:43 — Recap of site build: interactions lesson 02:19 — Recap of site build: design review & accessibility lesson 02:32 — Recap of site build: publishing the site lesson 02:37 — Recap of final thoughts & certification lesson 02:42 — Webflow 101 certification 03:32 — Webflow University 03:55 — Outro
Note: We’re transitioning to a new UI, and are in the process of updating our Webflow University content.
[McGuire] This is it.
Webflow 101 — let’s do the important thing here and review what we’ve covered.
We covered how the web is made up entirely
of boxes of content.
That content is our HTML.
And the styling and the layout of that content we can control with CSS.
Then we went into Webflow.
We created our first classes to keep style and layout consistent… building our hero section with flexbox.
And there, we covered that we can set properties on parent elements like a Container which using flexbox, can control children elements.
Then we built out our navigation — and covered how we can build on top of classes with combo classes — these are more specific classes that stack on top, and build on the styling in the base class.
Then we covered CSS grid — our next superpower — and we used it to build out our logos section and cards for each feature of the Calendar app.
And the takeaway here is that grids are guides — and the content inside a grid takes up the next available cell. That’s the default.
If we want multiple things in a cell? Like the stuff inside each of these cards? We can wrap those things in a div. We do this to group things together and the div becomes the cell. Just like these cards.
We also added what most people would consider the most important part of a site: the call to action (our form).
Of course, we built out our footer with links that pretty much go nowhere and we made our site responsive — where we covered that changes cascade downward from larger devices to smaller devices, but not the other way around. We covered this on desktop, tablet, mobile landscape, mobile portrait, and the Marauder's Map from Harry Potter and the Prisoner of Azkaban.
Then we built out our interactions and animations, starting, in fact, with a simple hover animation between None and the Hover state.
[Sara] It’s...
[McGuire] What’s up?
[Sara] Um...
[Sara] Grímur.
[McGuire] Oh, he’s … is he?
[Sara] Oh he’s rotating
[McGuire] It’s the, It’s the… uhh... It’s the button.
[Sara] Yeah, horizontal
[McGuire] The button. No, it doesn’t rotate horizontally, it’s
rotating clockwise about
[McGuire] You can tell with the 2,449 degrees. It's...
[Sara] Yeah…
[Sara] Grímur, are you okay?
[McGuire] Grímur?
[McGuire] But after this hover transition, we did a timed animation which is triggered by the page loading.
Then of course we did our full review, where we checked not fourteen, but fifteen…
[Sara] Fifteen.
[McGuire] That’s right, 15 things–
[Sara] Actually 16.
[McGuire] 16 things that improved the design and, the accessibility, and the SEO for the Calendar app site.
Then we connected to a custom dot com, and published the site for the world to see.
Then, of course, we spent some time together…talking about what we did.
So where do we go from here? There’s two places to talk about.
First, there’s taking the knowledge (the skills we’ve built here) and getting the free, Official Webflow 101 Certification.
Is it the easiest exam in the world to pass? No.
Does it separate those who’ve been actively learning from those who’ve been primarily focused on content from Disney+?
[Grímur] Sorry, I didn’t hear you — I was watching The Mandalorian.
[McGuire] But the most important thing
[Sara] Sorry, Grímur, is that…
[Grímur] Honestly, I’m kinda in the zone…
[McGuire] Oh my god
[Sara] Is that a Disney…?
[Grímur] You bet it is.
[McGuire] It’s another uh... plushie
[Sara] Disney... Prince... Grímur?
[McGuire] Grímur, are you trying — what... what are doing?
[McGuire] Grímur… hey Grímur, what are you doing?
[Sara] Grímur, What is it saying?
[McGuire] Grímur, don’t trust him... don’t trust him…
[McGuire] Don’t trust a single thing, put him down.
[Sara] Ok, so what is he telling you?
[McGuire] He’s probably telling him about the Webflow 101 Certification.
The first step to becoming a Webflow visual developer.
And if that’s the first place we want to talk about, the second is Webflow University itself.
Webflow 101 is JUST the start.
We have entire courses from topics like dynamic data using the powerful Webflow CMS, to advanced interactions and animations. How to to build a mind-blowingly engaging portfolio, freelance web design, and an entire landing page generator course for Ryan Reynolds.
These are the building blocks.And as you go deeper with them and explore even more of the things you can do on the web?
You’re unlocking the same kinds of development superpowers used by the top developers in the world... to create some of the BEST, the most effective sites out there.
But that is just the beginning: An introduction to Webflow and an overview of the principles and the controls that bring these developer superpowers to everyone.
[Grimur] Hey, everyone, it's Grimur. I have nothing else to say. than, I thank you. We just really, really appreciate you watching our videos and going to Webflow University and learning and we're just super thankful. Yeah, that's it.