Intro to Webflow 101

This course is the ultimate place to learn the fundamentals of web design and development. In this course, you’ll learn how to create a fully responsive (and accessible) website homepage with a navbar, cards, a form, and so much more, all in Webflow. And, at the end, you’ll have the skills to develop your own beautiful and impactful sites.

Learn web development superpowers, build your own site along the way, and share your progress on social media with #Webflow101). Then get certified — take our Webflow 101 certification exam. Let’s get started!

‍

What if there was a single course that covered everything web design and development? A course that literally taught the entirety of software engineering? Something that goes in depth in Ruby and Django, nodeJS, and Microsoft FrontPage...

‍

[Grimur] This is not (that course.)

[McGuire] That’s not this course. Slightly alternate angle.

‍

This course is an intro to the fundamentals of web design and development. What that means is we’ll cover 90% of what you need to know to get started developing your own sites.

‍

Apple. Google. Netflix. Stripe. Berkshire Hathaway.

‍

What do four of these sites have in common? They’re extraordinary examples of modern design and development.

‍

And while we’ll be using Webflow as our visual development environment, the vast majority of what we’re covering is the same fundamentals (same CSS properties) used by developers at all these companies.

‍

Because of that, what we’re covering in this course is transferable. In fact, we’re going to spend the first part of this course outside of Webflow — where we’ll look into and actually mess with many of these brands.

‍

And when we do get to Webflow, we’ll go through every step of the process — building each part of our site. At the end, we’ll have a full landing page for a new SaaS company called "Calendar". It’s like a normal calendar...

‍

[Sara] But the app accounts for quantum flux, distortions in gravity, time travel...

‍

Grimur: Does it really account for time travel?

‍

Sara: It absolutely does.

‍

[Grímur] Does it really account for time travel?

‍

[Sara] It absolutely does.

‍

[McGuire] Put simply, if your goal is to learn how the web is built — and then you want to use that knowledge to build and even change the web yourself? This is where to begin.

‍

So, in reality, if this course is the fundamentals of web development, should we really call it "Webflow 101"?

‍

[McGuire] No.

‍

[Grímur] Yes.

‍

[Grímur] We did call sheets... brand deals...

‍

[McGuire] Really...

‍

[Grímur] We made merch...

‍

(Sara laughing)

‍

[McGuire] What is that?

‍

[Grímur] It already says "Webflow 101".

‍

[McGuire] Is this supposed to be you?

‍

[Grímur] Technically, it could be any good-looking...

‍

[Sara] It’s totally Grímur.

‍

[Grímur] Adonnes...

‍

[Sara] The face...

‍

[Grímur] ...a Viking.

‍

[Sara] The hair...

‍

[Grímur] ...Very attractive.

‍

[Sara] Same outfit...

‍

[Grímur] ...Nordic god.

‍

[McGuire] That’s a Grimur plushie.

‍

[Grímur] It’s totally a Grimur plushie.

‍

[McGuire] Then let’s get started with Webflow 101.

Read the full article

Download assets

Clone this project

Read the full article

Intro to the box model

Learn about the box model and how it shapes web design.

The web — all of it — is built on the box model. Every single thing you see, all the content, the structure — it’s secretly made up of boxes. And all those rectangles? Those boxes? They’re just stacking on top of each other, or sitting next to each other based on properties we set. That is it.

The web is built upon boxes of content.

And there are three fundamentals (three important things) we need to know about the box model.

The first one we just covered: everything can be expressed in boxes. That’s one part down.

The second thing is that, by default, those boxes? Behave like a text document (things start at the top-left, and they can even wrap when they hit the edge).

Now. WHY is the web this way? There’s a reason. If you think of something in a fixed, kind of static size, like a slideshow, it might look great on a laptop. But down on a phone? Not so great.

But unlike this, content on the web can reflow and the box model lets us clearly define how these things respond (how they wrap; how they reflow) based on the space available. This is why the web — all of it — is built on the box model. Part two: things on the web (those boxes) respond just like a text document.

And the third thing? Is this. All this content? All these boxes? You can control them. They’re sized (all these boxes are sized) based on the content inside. But we can always set our own dimensions and add our own spacing. For dimensions, that’s adding properties for width, and that’s adding properties for height. For spacing, on any box, we can add space inside the box (we can add padding). And we can add margin, which is space outside the box — the space between boxes.

So what’s the point with this third bullet: our third section here? Boxes of content are in no way fixed. You have full control over all of it. Now we showed some of the basic things that make up the size and the spacing of these boxes, but that’s only the beginning.

Because once you realize all this stuff on the web is just boxes — and once you realize you can control it based on properties you can set? You can change or you can build almost anything.

So, let’s quickly recap. The elements of the web are expressed in boxes. They flow on the page just like a text document. And we can add properties to these boxes to build out some of the most impactful designs and layouts out there.

This is just the beginning. So let’s dig deeper into the content that makes up these boxes: and we’ll do that in Intro to HTML.

[Grimur] If you’re watching this on Webflow University, thank you so much. We really, really appreciate it. But if you’re watching on YouTube, thank you for watching there too and thank you for subscribing. And actually when you subscribe, my confidence goes out of this roof.

You know, the Twitter following just goes vroom vroom.

Rises up.

So good.

So keep subscribing, keep watching and we really, really appreciate it.

Read the full article

Download assets

Clone this project

Read the full article

Intro to HTML

Learn about HTML, CSS, and how Webflow generates this code while you design.

We’re going to take away all the styles in this lesson, and focus just on the HTML (the content on the page).

HTML is just the basic structure (the boxes of content on the page). Yes, there are nuances we’ll cover down the road, but in this lesson, we’re going to cover five things: we’ll see what happens when we strip away styling and look at just the HTML, we’ll show examples of what kinds of HTML elements we can build with, we’ll show how you can you go in and inspect real-world sites, we’ll delete Google, and finally, we’ll change the prices on Apple.com.

Let’s start with the first part.

Here’s the Airpods site, but if we turn off all the styles? If we turn off our CSS? We see just the content. CSS back on? Now it’s styled again. By the way, we’ll get to CSS in the next lesson.

But for now, here’s Nike. Turn off the styles? Now it’s just the HTML. Turn them back on? You get the idea.

Craigslist. Here’s a post for a thing. Styling’s turned on, and again with — well, we had two good examples.

For a third, here’s another Apple site. Styles turned on, styles turned off. Again what we’re showing here is just the HTML. When we add the CSS? That’s where we control all our style and layout.

That’s part one. Part 2? Let’s look at what HTML IS. That last example? If we were to look at the code, we can see that all the kinds of elements that make UP the content. A heading? That’s an HTML element. A paragraph? That’s an element. A button is an element. An image is an element. Even divs — divs are just boxes that can group other elements together — those are elements, too. So is hydrogen.

At its most basic level, HTML is just a bunch of different types of tags which you can use to build a page. And each of these tags are used to define the type of content. You don’t have to memorize all of these. But the concept is critical: each of these types of HTML elements? Are the different kinds of building blocks you can use to build your page.

That’s two parts down. Let’s go in and inspect. This is magic. Here’s Google.com in a web browser (we’re using Chrome here, but you can do this in any modern browser — we’ll include how in the description). And at any time, we can right click on any part of the page and inspect.

Now. Most of what we see here doesn’t matter right now. To the left is our HTML (our content) and to the right is our CSS (our styling and layout). We’re only focused on the content here (the HTML).

And as we hover over, we’re just hovering over some of these things, all we’ll do is take a look at what happens.

What you’re seeing? Is the box model. And each of those boxes? Is just a different HTML element. We can keep hovering, or we can even expand HTML elements to see that many of these elements have other elements inside. All of it is our HTML: the elements on the page. Inspecting lets us see that.

And for the fourth part — the best part — when we inspect? We can change any of it. Let’s delete Google. Seriously. At any point, we can hover over and try to find the Google logo. Don’t worry — we’re not going to break anything. Except once we find the box that looks like it contains Google. We can see it’s highlighted here, let’s click that element in the code. And let’s press delete.

We just deleted Google.

If at any point we refresh this page? If we go up and refresh? It’s back to the place we started. (When you’re inspecting, you’re doing that locally — only on your computer, and only temporarily — that’s why you don’t have to worry about breaking anything.)

Finally, let’s change Apple’s prices. We’re on a page here: Mac Studio. Let’s right click on the price, and we’ll go down and do the same thing: inspect. Again, don’t worry about all the other code; we’re just looking for the price. And if we double click? Let’s try highlighting and just changing that price. Once we make that change? It’s now, of course...four dollars. (Which is a savings.)

And that’s it. Again, it’s helpful to think of HTML as JUST the content on the page. It’s made up of different types of elements (different HTML tags) that serve as building blocks. On any site, you can go in and inspect to see what kinds of elements make up that page. And if we want to, we can start to mess with it. We can delete stuff, we can change stuff (by the way we can even reorder stuff). But that’s the basic power — a quick overview of HTML. Up next we are going to breathe life into it to talk about what happens when you style HTML...using CSS.

[Grimur] If you're watching this on YouTube, please subscribe and like and subscribe and like again. Ahh, Because I get a lot of coffee when you subscribe, so it's good for me. But if you are on Webflow University, you can track your progress throughout the course, which is brilliant. You can see how much percentage you have finished throughout the course.

I, of course, or me, or however you say it, I have 100% all the time. Locked in. Yeah. And subscribe on YouTube and finish the course on Webflow University as soon as you can. It's good. It's actually great. It's fantastic.

Read the full article

Download assets

Clone this project

Read the full article

Intro to CSS

Let’s explore CSS — how you can style all your content. We’ll walk through the kinds of styles you can add to HTML elements to create a beautiful site, and some best practices for styling web content, using selectors and classes.

If HTML is all the boxes of content and the basic structure of the page, CSS is how we define styling and layout. And it’s an industry standard, because it lets us keep things even and consistent across a site.

‍

In this lesson, we’ll cover the kinds of properties you can control, we’ll show how this works on the web using Slack’s marketing site — we’ll cover selectors, then we’ll use the MacBook Pro page to cover a specific kind of selector: and that’s classes.

‍

Let’s start with properties. Starting with the main idea: CSS. Nobody knows what that stands for, but it still powers most of what you see on the web.

‍

Two things: first, it stands for cascading style sheets, but second, most importantly, it lets us set these kinds of properties on pretty much anything.

‍

There’s the standard stuff, like color (that’s a style property) and font and border and background image. Fine. But there are CSS properties for spacing. And layout. And 3D perspective. Animated transitions on hover. How far up the monitor hovers.

‍

The only point to take away here is that there are properties for almost everything that let you control style and layout.

‍

That’s CSS properties. What about selectors? Starting with…why do we use the word selectors? Here’s Slack’s marketing site (this is their product features), and if we scroll down, let’s look at this heading. Let’s do the same thing we did in HTML — we’ll right click, and inspect.

‍

What is our goal here? If the content to the left is our HTML, then the styles — everything on the right — is our CSS.

‍

So, if we hover over this box, we can see the heading — this is an H2 — a second-level heading. We can see it says “Work more easily with everyone.”

‍

But because that node (that element) is selected, we can see the CSS. We can see the styles here. Let’s focus on just this H2 right here — the one that has font-family and a bunch of other properties. The H2? That’s the selector. A selector essentially says “select ALL H2s and apply this styling (all the stuff between the braces).” That’s it. So H2 is the selector.

‍

So if we change the style? If we take the font-family and change it to Comic Sans MS? We just updated that style.

‍

But here’s why CSS is powerful. If we scroll down? This is Comic Sans as well. And if we scroll farther? We can see ALL H2s were affected. (That CSS made the styling match, even though each heading has different content.)

‍

That’s what a selector does: it lets you specify what things on the page to select, and it lets you define the styles on ALL of them at once. (We could do the same for paragraphs, links, tons of stuff — we can use different selectors to select and style different elements.)

‍

But that’s selectors. What about our final topic: classes? Because what we showed on Slack was affecting all elements of a specific type: all those H2s.

‍

With classes though, let’s look at Apple’s MacBook Pro page — right at this table here. Notice how these links (the buy links) don’t look like this link (the compare all whatever). Apple didn’t want to style all links on the page, just these four. And they can do that because they’re using…classes.

‍

Let’s go in and inspect one of them. And when we do? When we go in and inspect. Let’s go over look at this part of our CSS, where it says button. And let's change some stuff. Let’s change the border radius; we can see the links are rounded, but let’s change the radius to 0 pixels. What happens? The links now have a sharp edge. Not just one; all four. And we can even click to the right and add our own CSS: let’s add a transform, where we rotate — let’s actually leave it just like that because the change is very obvious — kind of a head tilt. We could make it more dramatic though — the control here is, of course, entirely up to you.

‍

But what happened? And more importantly, why wasn’t the link above affected?

‍

The answer is: there’s a special kind of selector this time: of course, that’s a class. That’s actually what the dot at the front of it indicates. And the reason it’s affecting just these links and not that link above is because each of these links specifies that their class is “button.” And that’s why they’re so powerful. Classes let us target any elements that have that class applied.

‍

So. Let’s recap. We covered that there are a ton of CSS properties for almost everything. We showed using Slack that selectors let us select any kind of thing — in that case, H2s, and they let you apply whatever styling you want. And of course, on Apple.com, we saw that classes are a special kind of selector which will add your styling to any elements that have that class applied.

‍

This, of course, is just the start of CSS — and it only gets better from here. As you dig in more and more to mixing and matching styles, and going deeper with the power of selectors, you’ll get into how these things fit together and that’s where the cascading comes in. But that’s a high-level overview of CSS.

‍

[Grimur] Nothing beats it. An empty coffee cup. You’ve gotta subscribe and like so I get coffee.

‍

Read the full article

Download assets

Clone this project

Read the full article

Intro to Webflow

Learn your way around the Webflow Designer.

Read the full article

Download assets

Clone this project

Read the full article

Learn how to design and develop a full CMS-driven website for a client.

Read the full article

Download assets

Clone this project

Read the full article

Recent updates to the Webflow Designer

We've made some recent changes to the Webflow Designer since launching this course so wanted to share those with you.

Read the full article

Download assets

Clone this project

Read the full article

Site build: Hero

Now that you have a solid understanding of the box model, HTML, CSS, and the Webflow Designer, let’s start building! Here we’ll walk through a hero section build (typically the top section of a website homepage) and, along the way, we’ll explore flexbox, CSS styling, and how to add and style visual assets.

[McGuire] In this lesson, we're going to build our

very first layout in Webflow. It'll go from looking like this to looking like this.

‍

Now, that's not the only time we'll use the magic of post-production.

‍

Jamie and Lauren are on hand to ensure that editing can solve for times where certain people might go on and on in one incredibly...

‍

We’ll first load all our assets. We’ll add our content. We'll use flexbox. We'll style a button using custom CSS. And finally, we'll add a product shot of the app itself, a calendar that compensates for changes in space and time, especially as these relate to gravity.

‍

[Sara] Gravity.

‍

[McGuire] Speaking of gravity. Sara, welcome.

‍

[Sara] Hi.

‍

[McGuire] Hello.

‍

[Sara] Hello.

‍

[McGuire] How are you today?

‍

[Sara] Very good, very good. I am excited about this Gravity app. Uh, how does that work, really?

‍

[McGuire] No idea.

‍

[Sara] Let's get into it

‍

[McGuire] Let's get into Webflow.

‍

So let's drag in this folder into view and we'll just highlight these items and drag them right in.

‍

[Sara] Nice!

‍

[McGuire] Thank you. That was, it's pretty low effort, but thank you, nonetheless

‍

That's assets. Let's move into content. So for the content of our site, there's a lot of stuff we'll be adding on this page over time. And the primary way we're gonna organize all of it is Sections.

‍

Sections in a web page are like chapters in a book, and sections generally stack vertically. So we're gonna add a section as the first thing we add to the page. We'll just drag in section right here, and you'll see this pattern a lot. We have the add panel, and this is where you grab all of your nodes, all your elements, your HTML. So if the section is the first part, we got three things to put in that section.

‍

So let's grab our heading, drag that in.

‍

[Sara] Paragraph.

‍

[McGuire] Paragraph. You got it. We'll drag in that paragraph

‍

[Sara] And then a button.

‍

[McGuire] And then a button. It's good teamwork.

‍

[Sara] Yeah.

‍

[McGuire] That's content. Let's move into flexbox. Now, flexbox is the first major superpower we're about to unlock. We're gonna use a container, and the first thing to notice before we add the container is that everything here, especially the paragraph, notice how the paragraph goes all the way from the left side of the page to the right side of the page. It's spanning the full width. This is normal. This is what happens by default. A container will help us constrict that width.

‍

So if we go to the add panel, let's grab a container and drag it right inside.

‍

We're actually putting that inside the section.

So our hierarchy now is inside our page body we have a section, and now inside that section, we have a container. Let's put these three things inside that container and notice what happens. As we drag in the heading...

‍

[Sara] It contains the stuff.

‍

[McGuire] Yes, it contains the stuff. That's absolutely it. So, now everything is a reasonable distance and everything is constricted. That's adding a container. Let's turn on flexbox. And to demonstrate this, with our container selected, let's set a height. Just for right now okay, maybe 650 pixels, press return and notice how nothing really happened to the heading. In fact, the size of the box, we can see with the container selected, the size of that box did get 650 pixels tall. But in order to move things around and really align and justify stuff inside the container, we're going to turn on flexbox.

‍

So with the container selected, let's go over and set flex - we're just setting our display to flex.

‍

[Sara] Ooh, woohoo.

‍

[McGuire] That's the right reaction.

‍

[McGuire] It got hideous, and there's a reason for that. By default, when we turn on flex, the direction is horizontal. That's okay. It's not what we want here. Instead we wanna switch it to vertical. And then once we do that, we've unlocked the ability to align and justify however we want. Now, why is that a superpower? Well, instead of manually positioning everything, we've selected the parent element, this container is of course the parent element to its children. You can see the heading, paragraph, and button

are inside the container. So all we've had to do is tell the container to align and justify the child elements.

‍

Of course, if we add something else, if we add another button inside, it'll stack vertically as well, because we've told it to stack. We've told the container to stack vertically and to align those children. These two buttons look ridiculous. Let's delete one.

‍

Now, it might not be the most impressive thing,

but we just built our first layout in Webflow

‍

and we used the very same principles that are used by developers at Apple and Google and Stripe. We did that in Webflow, and if you really wanna follow along and you wanna see what that code looks like that we output, we can just go to the help icon here and open CSS preview. And you can see we have our CSS. We've just set the display to flex. The height is 650. We've set the flex direction, justified, and aligned.

‍

We can look at this and see that our code that's being output is exactly what we declared visually.

‍

So that's flexbox. Let's move on to the button. And we have the button here. In fact, at any time, of course, we can change this content. We can double click and change “A calendar for space travel"

‍

[Sara] “Space travel”.

‍

[McGuire] And we can go into the paragraph, double click, and we're going to paste this in from our clipboard.

‍

For the button, we want it to say “Join the wait list..." This is a long call-to-action

‍

[Sara] “...for early access”

‍

[McGuire] “...Early access”.

‍

[Sara] Exactly.

‍

[McGuire] “...exactly.”

‍

[McGuire] All right, that's our button. Now what we're gonna do in the button is create some style changes to make it look a little more modern, a little more exciting, a little more engaging. And the first one we'll do is set the width to 50 pixels. When we do the button is now 50 pixels.

‍

[Sara] Um, let's remove that.

‍

[McGuire] Let's remove that.

So with the button selected, we can style it however we want. Few things to change here. If our HTML, of course, is everything we see in the add panel, then as we saw when we affected the container earlier, everything to the right here in the style panel, that's our CSS. The properties we can add to any of our HTML elements.

‍

So with this button selected, if we wanna just change the background color, we can just scroll down in our style panel and change the background color. Let's change this to sort of a uh,

‍

[Sara] Like a dark purple.

‍

[McGuire] A dark purple.

‍

[Sara] Perfect.

‍

[McGuire] And if we wanna reuse this color throughout the project, we might want to save this as a brand color. We can just go and add a swatch. We can call it Brand color or whatever you want. And we'll press create. When we do, we've now saved this swatch, and that's really, really helpful if we're gonna use, reuse this color to keep things consistent.

‍

So that's changing the background color. Let's change some other stuff. Maybe round the radius to

‍

[Sara] Three pixels.

‍

[McGuire] Three Pixels?

‍

[Sara] Yeah

‍

[McGuire] Let's do three pixels. Why not four?

‍

[Sara] Three is perfect.

‍

[McGuire] Okay, three is perfect. And we can add, you know, a lot of styling. One thing to note that we didn't do yet, and that's okay, is we actually haven't set our font.

We haven't set our typography yet. Now with CSS, there's lots of options here. Now we can change these things one by one.

‍

We can go up to typography and change this button

to Georgia or Great Vibes. We can do everything one by one - that's one way to do it.

‍

But a more efficient way to do typography is this. We can select something like the body.

‍

We'll go all the way up and select the page body. And if we make a change here, notice how that change is inherited by the child elements. Because each of these things, of course, is a child of the body – all of the typography changes we make here are going to apply to them.

‍

For us. Let's add a third party font. We'll go down to our list from Google Fonts, and we'll do DM Sans and we'll load Regular, Italic, 500...

‍

[Sara] 500.

‍

[McGuire] 500 italic.

‍

[Sara] 700.

‍

[McGuire] 700, 700 italic. We'll press add font, and that's it. We can go up and close this tab. And once we're back in the designer, let's refresh.

While this is loading, it's an excellent time to...

‍

[Sara] It’s done! It’s done.

‍

[McGuire] Okay, let's go back into Webflow. With the body selected, we can now go down to typography and see that we can see DM Sans, and of course that it's applying, that font change is applying, to all of the children elements. So we can click that. Does that mean it overrides or blasts away more specific changes? No, we could always select this heading and change it to something else. We can always override these things. We're not gonna do that for right now. Instead, we just made the change on the parent and it's affected all of its children.

‍

So let's look at the button and see what else we can change. First, let's go from that default, that default weight, that 400 or here's 500. Let's go to bold and what else do you wanna change on this? Maybe the padding, the space inside.

‍

[Sara] Yeah.

‍

[McGuire] Now with padding, you can just click and drag these spacing controls, and you can see it adds padding on the left.

‍

And notice how holding Option or Alt will affect both sides at once.

So we'll do 30 on the left and right, and we can just do the same thing.

‍

Hold down Option or Alt and do 15 on the top and bottom.

‍

Now, there's something really important to note here. When we started styling this button, you'll notice up top here it says button.

‍

That's not an accident. In fact, it's a class. When we styled the button, a new class was created.

‍

By default, it was automatically named Button but if we want something more clever, we could rename it.

‍

Let's maybe call this class Major button. But when we styled the button, a class was automatically created. And that class stores all of this styling information: the padding, the font weight, everything we styled. But here's why all of this is so important.

If we were to copy and paste this button, notice two things. One, there's two buttons, but two, the second button brought that class along. So now we have two buttons that have the Major button class applied.

‍

So even if we change the content, let's make it say “Hello, Sara!”

‍

[Sara] Hello!

‍

[McGuire] No, it's just the button title.

‍

[Sara] Okay.

‍

[McGuire] With either of these selected, if we make a change on one of them, like if we change the padding, notice how it's affecting both of them.

‍

Again, classes and all selectors in CSS, they apply to every single thing, every element that's being selected. In this case, what's happening, as you see this selector up here, it's selecting anything that has the class of Major button, and it's applying the styling to it, so it keeps things neat and consistent, even if the content is different.

‍

But we don't need that button right now because she's right here.

‍

We can press delete and with the first Major button selected, let's finish our styling. Let's scroll down. What do we wanna change here? Maybe add a box shadow.

‍

[Sara] Yes.

[McGuire] And we can make it more of a modern shadow, sort of a 180 degrees, huge distance. Let's hold down Option and click and drag here. So we can move this down.

‍

Maybe decrease the size a little bit and increase the blur dramatically.

‍

Again, just holding down Option so we can click and drag. We can always do this, but in the field, we have a lot of control over where we're going, so maybe a big lift like that.

‍

[Sara] Ooh! I like that.

‍

[McGuire] And color, same brand color?

‍

[Sara] Yeah.

‍

[McGuire] Let's move that distance back from 39 to what? 15. Is that okay?

‍

[Sara] 20.

‍

[McGuire] 20. All right!

‍

So we did more than we said we’d do. Yes, this section is titled button, but we actually styled the button and we added typographic changes.

‍

We added that font and applied it to the body, so it affected everything else.

‍

That's four parts down. Let's talk about the app image. Starting with, let's drag in the actual app image. So we'll go to our assets panel. This is where all the assets were loaded when we dragged them in. And let's grab the actual app, Calendar app, and we'll drag it under the button. We're dragging it in the container, and when we do, it looks okay.

‍

We can make some changes to this image. We could maybe add some rounding. Maybe we could do...

‍

[Sara] Three pixels.

‍

[McGuire] Three pixels.

‍

[Sara] Yep.

‍

[McGuire] And we could add a box shadow on this too. We could say box shadow, set that brand color again,

‍

[Sara] Perfect!

‍

[McGuire] Increase the blur dramatically. Maybe decrease the size since it's pretty dramatic. What do you think about that?

‍

[Sara] Yeah, more blur.

‍

[McGuire] More blur. Okay. How much?

‍

[Sara] That's perfect.

‍

[McGuire] One, 117?

‍

[Sara] Yeah.

‍

[McGuire] All right.

‍

[Sara] It's a little bit tight between the button and uh, the image.

‍

[McGuire] Absolutely. We can add some margin. So if padding is the space inside of something, we've covered that margin is the space outside - between that element and other elements. So we could, we could just drag on margin on the top, then we can add some margin. How much looks right? Tell me when

‍

[Sara] (Laughing)

‍

[McGuire] Still haven't said anything. This is like when you're at Olive Garden and they're adding parmesan cheese.

‍

[Sara] A little bit less.

‍

[McGuire] A little bit less?

‍

[Sara] The content is disappearing.

‍

[McGuire] Just say when.

‍

[Sara] Like 80.

‍

[McGuire] Let's do 80. The great thing about this is we're just adjusting visually.

‍

We can take a look and if it doesn't look great, we can just adjust it again. Nothing here is destructive, we can just make that change. Something else to notice. The container, we gave it that fixed height before, again, it was 650 pixels. So with the container selected, we could actually remove properties. Yes, over here we can add a bunch of style properties, but to remove it or to reset that property, let's click the blue label. Click the blue label and reset.

‍

Now, what happened? What's determining the size of the container? Well, it's now being determined by the content inside. Because we haven't overridden, we haven't specified a height we could add more content. And when we do, notice how the container just gets taller. When we remove that content, it gets shorter. The box is sized by the content inside. That's the default.

‍

So what happens next? Well, we could take a look at the spacing, for instance, of the paragraph right here. Things are a little tight. Let's go ahead and fix that. With our paragraph selected, let’s create a class. Go up here to the selector field and click in and we'll type Hero paragraph. Press return and we've now created that class. Let's push off the bottom by adding some margin on the bottom. We'll pick a number we think Sara would like. 46, no 47. But it's also a good opportunity with the section selected to add some padding there. So what will this do? Let's add padding on the top and bottom, holding down Option or Alt. We're just giving it some breathing room inside our section. We'll do 50 on the, maybe 60 on the top and bottom.

‍

Now, at no point are we setting an explicit height. Again, the height is being controlled by the content inside. How does that look?

‍

[Sara] Yeah, yeah, it looks great.

‍

[McGuire] Let's center that paragraph. Let's select the hero paragraph and we'll set the alignment to center. Let's make the heading a little bit bigger. With the heading selected. Let's create a class called Big Heading. And of course, we can go down and increase the size and the line height on this heading. You know, we could even this out.

‍

[Sara] Yeah.

‍

[McGuire] We'll do a design review later so we can make this a little better later, but maybe reduce that margin a bit on the paragraph.

‍

[Sara] Awesome.

‍

[McGuire] All right! And that is it. We added all our assets to our site. We put all our content together. We used flexbox, our first superpower to control all the elements inside a container. We styled a button that has a design that rivals the likes of Apple.com, and we added an image of an entirely real, but not at all real, app that helps all of us navigate the intricacies of space and time.

[Sara] And time.

‍

[McGuire] That's right. Speaking of which, let's move into the next lesson on Navigation.

‍

[Grimur] I’m going to do something bold. Basses. We want to see your hero section design. Whether you’re just getting started — changing a word or two — or you're building a whole new site. Cellos. We’ll take some of our favorites and literally change our hero section on Webflow University. Piano. And we’ll add a link (this is for real) — we’ll link to your LinkedIn for a day. So, share your hero on Twitter using #webflow101.

‍

Read the full article

Download assets

Clone this project

Read the full article

Site build: Navigation

Let’s build a website navigation bar together. We’ll start with Webflow’s navbar element, edit the content, style the nav links, and create a call-to-action button with a combo class.

[Sara] What's going on?

‍

[McGuire] Whoosh! Whoosh!

‍

[McGuire] It’s a really engaging way to start the lesson.

‍

[Sara] Eh? Sure! But like, let's get to it.

‍

[McGuire] Whoosh! Whoosh! That's one lesson down so far. This is lesson two!

‍

(Sara laughing)

‍

[McGuire] And this’ll go really quick, surely. We’ll add our navigation to the page. We'll work through the content. We'll style our nav links, and we're covering a new kind of selector in this lesson called a combo class.

‍

Let's start with the navbar. Starting with not having a navbar.

‍

[Sara] Let’s drag in a navbar.

‍

[McGuire] Let’s drag in a navbar. So from our add panel, just like we've done before, we'll find the navbar. Now we'll scroll down, we'll go through all the types of things we can add. And of course, we're looking for navbar. Let's click and drag. There's a few ways to place this. We can click and drag somewhere in the canvas, but we’ll use the Navigator up here to place it right inside the body, right up top. And when we do, we have a navbar

‍

[Sara] A navbar!

‍

[McGuire] That's it. That's one part down. Let's move into content. Of course, content is going to involve - what? - four different things here. We're going to add…

‍

[Sara] Let's start with logo.

‍

[McGuire] Logo! So we'll go to the assets panel and we'll find Calendar or SpaceX

‍

[Sara] Eh, Calendar. It’s for a calendar app in space.

‍

[McGuire] Click and Drag Calendar inside. That's one of the four things. Over here, let's double click and edit “Features”. And double click...

‍

[Sara] Request a demo…

‍

[McGuire] “Request a demo”. You're like 5 seconds ahead of me. This is good.

‍

[Sara] And “Sign up for the waitlist”.

‍

[McGuire] “Sign up for the waitlist”

‍

[Sara] Perfect.

‍

[McGuire] “Perfect”.

‍

That is our content. Let's move into styling. So this is for our nav links. So for our nav links - right now, if we change the styles on any one of them, let's scroll down and maybe we want to change lets see… the font weight. We'll go to bold. Now we bolded this one. Why are the other two nav links not bold? Well, that's because we haven't added the same class.

‍

Again, as we know, when we make a style change over here, it'll automatically create a class for us. So let's go over to “Request a demo”, and let's add that class. We'll type nav and we can just click and add nav link and you can see it's now bold too. We’ll add another one over here, nav link. Now they're all bold.

‍

This means changes to any one of them will affect all. So if we hold down Option or Alt and drag size, we can see it's affecting all three of them. Let's undo, put it back to the way we want.

Now, most of the time we want these things to be consistent, but in this case we want this background - the “Sign up for the waitlist perfect” - this background, to be our brand color. What happens with just this one selected? If we go into color and change it to our brand color? Well, it affects all three. That's not what we want. We only want this one to be different. So let's hit undo and this is where we get into combo classes.

‍

So what is a combo class? A combo class lets us say hey, we created nav link - we know we have that class - let's create something more specific on top of the nav link. So what do we do? To the right of nav link we're just going to click in this space right here and we're going to type to create a new combo class, which is why it says “Type to create a new combo class”.

‍

Let's call this…

‍

[Sara] CTA!

‍

[McGuire] CTA - call to action. So what did that do? It took all of the properties from nav link. They're still there and it's created a blank slate or a new slate, a new level to build on. So with this CTA selected, we can go in and change the color and it just affects this one. We can go in and change the color of the typography and it just affects this one. What's happening? It's taking all the base styles - all the styling we have in nav link - and it's just layering on top of that the changes that we're creating, or the new additions we're creating in CTA.

‍

So what else do we want to change?

‍

[Sara] Let's add some space above the nav links.

‍

[McGuire] Okay, so with any of these nav links selected, notice how if we just change the spacing on this one, it just affects that. That's because we're styling nav link CTA, that combo class. So a better idea is, select either of these, the ones that just have nav link and watch what happens. If we make a change on one of them…if we decrease the padding…notice how it's affecting all three of them. Let's get this to what, ten, nine, eight…

‍

[Sara] Ten! And the margin, top, bottom - ten.

‍

[McGuire] All right. And so margins - some space outside. So what's happening here?

‍

[Sara] That looks good.

‍

[McGuire] It does. It looks great. It's because, the numbers you just said. But if we go over notice how with either of these nav links selected the changes we make - so if we increase the size - it's still affecting the combo class.

‍

Now, why did the changes to padding and margin, why did they affect this CTA? Why did that happen? Well, again, the CTA is built on the nav link style, so when we change the nav link, that base style, those changes are affecting this one as well. So if we were to change the font, it's affecting all three. Again, a combo class only builds on that style. You can still change nav link and you can override, you can create more specific properties on a combo class. So if we're doing that, we might as well go over to Calendar here and do the same thing. We should add some space on the top. Let's go to margin and give it, let's say twelve, thirteen, fourteen…

‍

[Sara] Fourteen.

‍

[McGuire] Fourteen. Fourteen pixels, and that looks okay. Notice how by default if we have two things named Image. So this is a class, this one we styled this created a class called Image. This one also created Image 2, it's a different style. We can name this, we can just say Logo. That's fine and be a little more specific with our class names. Now, one other thing to notice before we wrap up here, if we select the navbar - so we can see our navbar selected over here - we can change the background color to not gray and instead make it something. What do you think? Like a purple color? Or maybe a pink?

‍

[Sara] I think white.

‍

[McGuire] A fuchsia? You said white.

‍

[Sara] White is fine here.

‍

[McGuire] Okay, We can do white. One more thing - look at this. nav link CTA. Let's create that rounding radius.

‍

[Sara] Three.

‍

[McGuire] Four!

‍

[Sara] No, three pixels.

‍

[McGuire] Three pixels. And that's it. We added our navbar. We configured our content. We styled our nav links. We added a combo class to make sure our primary CTA, our call-to-action, is standing out. And of course we balanced everything with our logo before changing the background color from a light gray color to a white color.

‍

Up next, we're going to take it to a whole new level with CSS grid.

‍

[Grimur] Share you navbar progress using #webflow101 on Twitter. Not only will we share our favorites on social, but we’ll also share our favorites on social.

‍

Read the full article

Download assets

Clone this project

Read the full article

Site build: Logos

With Cascading Style Sheets (CSS), you can use the CSS grid layout to create a responsive section that displays notable logos on your site. This section often displays logos of companies that trust your product.

[Sara] It's floating. You see?

‍

[McGuire] Riveting. We're making huge progress in this course so far. We have our navigation now. We have our hero section from the first lesson. And in this lesson we'll add our structure and content and we'll use CSS grid to create this logo section.

‍

So let's start with the structure. So we have our page. And in the navigator, sometimes things, especially as they're expanded, can get a little messy. It looks a little visually overwhelming at times. That's okay. Let's just collapse.

‍

And if we go to our Add panel, we can grab a section. And for us, we're just gonna drag it right at the bottom underneath our first section, underneath our hero section. And we already have a class for Section. Remember, we styled this section. We added some padding before. Let's make sure we're applying the same thing to our new section. So we'll just click in the selector field, start typing, and we see Section. Let's apply that. And you see the same 60 pixels was brought along with it.

‍

So what else do we have in our structure?

‍

[Sara] Container?

‍

[McGuire] Well, container. That's absolutely right. Let's drag in a container and that'll keep everything neatly bound in the section. So we have our section. Inside the section, we have our container.

‍

Now there's one more piece, one more piece to the puzzle. And that is a div block. Now, why a div block? Why aren't we using something like phosphorus? That would be the wrong element. But the reason we're using a div block is because in just a moment, we're gonna turn it into a grid. We're using a div block to hold and wrap other elements.

‍

So with our div block, we're gonna do something special. We're gonna call this logo holder. So with our div block selected, we're just gonna add Logo holder.

‍

And that's it. That's our structure. Now we're ready for our content. So in this case, it's our logos. So let's go over to assets. And let's see what we have. We have Avenue 5. Let's drag in Avenue 5. Let's certainly drag in SpaceX. Drag in United Federation of Planets, we have ESA. This is the European Space Administration. Is that right, Marc?

‍

[Marc off-camera] Agency.

‍

[McGuire] European Space Agency. We have, what is this one? Space.com. And NASA.

‍

[Sara] NASA

‍

[McGuire] What is NASA?

‍

[Sara] It's, it's right here.

‍

[McGuire] National Aeronautic, er Aeronautic, National Aeronautics and Space Administration?

‍

National Aeronautics and Space Administration. Nailed it.

‍

All right. So with our Logo holder selected, this is where we're gonna use CSS grid. So we showed flexbox before. Flexbox, when we turn that on. We know that we can align and justify content based on properties we set. We can use different options here. And you know what? That might work for us. We might get the look we want right out of the box like this. That's okay. That's a good thing.

‍

The problem is when we go down, and we'll do this later when we get to responsiveness, but as the viewport narrows, we get to Tablet, we get to Mobile landscape. Notice how everything starts to overflow. Now there are different things we can do in flexbox that will solve for this, but we thought this was a good opportunity to demonstrate CSS grid.

‍

So with our logo holder selected, we can just switch its display to grid and just like that, there's a different interface that pops up and we can see that it doesn't actually look that good right away, at least. And that's because by default it's two columns and two rows. We don't need that layout. And you can even see it's auto generating an extra row because there's six items here. So all we have to do is increase the number of columns...

[Sara] And adding more columns.

[McGuire] Yeah, six, six columns. And we don't need that second row. So let's delete that second row. And if we escape out, or if we just press done, we can see our layout. It's getting there. It's not perfect yet. And...

[Sara] Let’s center them a little bit more.

[McGuire] That's absolutely right. We can just like flexbox, we can align in our grid like this and we can put it to the right. We want it in the middle. And this is gonna set us up for success later because when we go into, let's say mobile portrait, we can turn this into, instead of a six by one, six column by one row, we could set it to a three column by two row grid. So we're not gonna do that now. We're getting to responsiveness later. But that is our logo holder. Now, is that everything?

‍

[Sara] No!

‍

[McGuire] No, that's absolutely right. Why?

‍

[Sara] We do need something that is descriptive to what these labels, logos are.

[McGuire] Couldn't agree more. Let's add a text block and let's put it above the logo holder and we'll say,

[Sara] Trusted by...

[McGuire] "Trusted by"..."Trusted".

"Trusted buy"... Can't type. "By" colon. There we go. And if we want to, we can say "trusted". And we can configure this. We can increase the size.

‍

[Sara] Let’s do 20.

‍

[McGuire] You want 20? Okay. But that's the basic implementation of CSS Grid. We added our structure, we configured our content, and we played around with our grid controls to get these logos looking however...

[Sara] Exactly how it is right now.

[McGuire] That is exactly how it looks. So up next, we're going to use CSS Grid this time to create full-blown feature cards, and we'll do it in record time.

‍

[Grimur] Hey, it's Grímur again. I just wanted to drop in and tell you you're doing such a good job. Just keep it… keep going. Honestly, you know, that's. That's all it matters. Just keep it up. Just wanted to pop in and say, You're doing great.

Read the full article

Download assets

Clone this project

Read the full article

Site build: Cards

Websites often include card layouts to visually display different product features or pricing plans. Here we’ll build a CSS grid-based card design to display a feature image, heading, and paragraph, then style those using selectors and classes. And, along the way, learn about the Webflow Style Manager which gives you total control over managing classes and tags on your site.

[McGuire] That's three parts of our site down so far. It's important to note when we say parts of our site down, we're not talking about the site actually being down, except technically it is because we haven't published it yet.

‍

We're going to build this grid-based card section. We'll build out our structure. We'll build the actual cards. We'll style everything and…

‍

[Sara] Everything?

‍

[McGuire] Literally everything. And we're going to cover how to use selectors to style things like headings without needing classes. Let's jump right in to the first part, which of course is the structure. So here we are on the site we've already built. Let's add another section. We'll just collapse this section. Again, our previous section was all these logos. Let's add another section and we'll put that, we'll drag it below this section.

‍

Alright, in selector, we're going to add our Section class and what do we wanna do for our structure? So there's a few different things. Well, one, we're going to need a heading. So let's drag in a heading. This will be an H2. And of course we'll want to add this content real quick. We'll double click to edit, and we'll make the text say…

‍

[Sara] Features...

‍

[McGuire] Features...

‍

[Sara] ...for every need.

‍

[McGuire] ...for every need. Slightly faster than I was saying it. So if that's our heading, there's two more structural components we need here. The first, of course, is a container to keep everything neatly bound towards the center. So let's drag in a container. Let's get that heading in the container. But one more thing to add to the container, that's our primary structure for these cards, and that is a grid.

‍

There's a few ways to add a grid. Of course, we could go up and add just a div. When we drag a div into the container, we can simply go to grid click, and now it's a grid. It's a two column, but in our design, we're gonna do a three column. Does that matter right now? No. We could always change this. Uh, let's hit plus for three columns though, and then press done. And that's our main structure, A section container, a heading, an H2, and a grid.

‍

Let's start building out the cards in our grid. But before we do a few things to note, there's a few ways to go about doing this. We could design our card outside of the grid, but just so we can keep everything neat and organized. We're going to design within the context of this grid. So here's how a grid works. We can add anything inside of a grid. So we can just click and drag any elements we want inside our grid, any element we want for our features.

‍

Let's say we have this one and let's say we make it an H3, and we can just leave it heading, or we can just call it the first one, which is Daily digest.

‍

[Sara] Daily digest.

‍

[McGuire] We could, let's do command E to save some time, and we'll do a paragraph. We know we're gonna need an image. Command E. And notice how as we do each of these things, it's loading each element into the next available cell. That's how grids behave by default. These cells aren't like cells in Google Sheets or Microsoft Excel. Those kinds of spreadsheets are destructive. In other words, if you delete a row or you delete a column in any of those apps, the content gets deleted too. But with CSS grid, when you're adding items, the cells act as guides. Each cell can hold one element at a time. So what do we do to group multiple elements? Well, of course we can use a div.

‍

So let's add a div. Same thing here. Command E, we'll just type div, press return. And now we have a div. So we can position all of these things inside the div. And there's a few ways to do that. We could use the navigator. Just drag something like the image into the div. Let's check that. We have the image inside of the div. That's right.

‍

Or we can just click and drag. But notice what happens sometimes when we're clicking and dragging. These things don't necessarily go inside each other. We're not actually nesting here. So if we want to nest, and we notice that everything's being pushed around, we can just hold down Command on Mac or Control on PC, and we can drag

‍

[Sara] Drag it in.

‍

[McGuire] Yeah, drag it right into that div block. Let's demonstrate that again, we'll hold down, with the Daily Digest selected, this heading selected. Let's hold down Command or Control on Windows and drag it right in. So...

‍

[Sara] Perfect.

‍

[McGuire] What do we have? Image. Thank you very much. Image, heading, and paragraph. That's the primary structure of our cards. Let's move into styling. So we want this to look right, right now it doesn't look right. Let's first go to our image and replace it with one of our first images. So this will be daily digest. Press that and close out.

‍

[Sara] Let's give it a class.

‍

[McGuire] Give it a class. All right, an image. So the reason we're gonna add a class now is because as we're making multiple cards, we want the ability to style these things a little bit later. So it's a great note, Sara. Let's go and add a class. Let's call this Feature image.

‍

[Sara] Image.

‍

[McGuire] Image. That's it. Uh, we'll do the same thing on the div. Basically the cell itself that's holding the other things we can call this...

‍

[Sara] "Card".

‍

[McGuire] "Card". That sounds great. Is that Card? Yeah that’s Card.

‍

[Sara] Creative.

‍

[McGuire] What did you say?

‍

[Sara] Creative.

‍

[McGuire] Well, you said it and that is exactly what it is!

‍

[Sara] Yeah.

‍

[McGuire] So now that we have one of those, we could copy and paste once, twice, three times, four, five. So we have six total, and we could just replace the content. We could do that. But right now, let's work on styling. Because we just created that, as you said, creatively named "Card".

‍

[Sara] "Card".

‍

[McGuire] "Card". Because we did that, we can hold down shift and adjust padding on all four sides at once. That's one way to do this. We could do that, but because we have a grid, we can also adjust the grid gap. So let's edit grid. Take a look at that gap. And this is essentially the space between, and we can unlock this. And of course, just like we did up here with these logos, we could adjust the space between the columns and the space between the rows. For this, let's do something even, what do you say, 30 on all sides.

‍

[Sara] 30 is great.

‍

[McGuire] 30. Let's do 30. 30 pixels. That looks good for now. So what's left? Well, first off, there are six different features, but they don't say Daily digest for all of them. We actually have to update our content. So while we're going through the styling, we might be taking a look at this sort of like lorem ipsum text, which you can actually see. There's lorem ipsum text, we have placeholder text. We wanna make sure we replace that with the actual content. We're going to do the whole thing, but we're gonna use the magic of post-production to speed this up. But that is it. That's the content. So a few more things to change.

‍

With our div selected. So this is really important. With our div selected, this card, we can make some other style changes. For instance, we can say all of that text right now is left aligned. If we want, we can just align center. And because we know we can actually go in really specifically here and say this paragraph, with this paragraph selected, where is it getting its information? Where is it getting this styling? How does it know to center? Because we just set it on that div, right? We set it on the card. If we click our paragraph and we wanna know where is that align coming from? Well, we can click at any time on any of these amber indicators. So click align and we'll see that value is actually being inherited. That text value is being inherited from Card.

‍

And that's the magic of inheritance on the web. We can make changes on parent elements, especially text-based changes on parent elements. And they'll pass all the way down to their child elements. Can we override them? Yes. If we wanted, on this paragraph, to make it right aligned, we can do that. However, now the label's blue. That's because we've made a change on this paragraph. On this particular paragraph. It automatically created a class. We don't want that. It's hideous. We can always go in and see, if we reset, it will now inherit the value from card again. But for us, we just wanna delete that class. So it's now, there's no specific information. It's inheriting that text style from the card.

‍

And we created that Paragraph class by styling that right there for the demo. We can always go into our style manager and clean up any unused classes. So we click that. It says “The following styles are not associated with any page elements. Paragraph. Are you sure..." you can read the whole thing here.

‍

[Sara] Remove.

‍

[McGuire] Remove. Let's remove it. Yes. We've now reduced some of that CSS. All right, couple more things here on styling the feature image rounded edges, assuming something...

‍

[Sara] Three pixels.

‍

[McGuire] 14 pixels.

‍

[Sara] Nope.

‍

[McGuire] Three pixels.

‍

[Sara] Yeah, actually looks pretty good, but it's three here.

‍

[McGuire] That's three pixels.

‍

[Sara] So the heading is a little bit tight to the grid. We could add space...

‍

[McGuire] Oh, that's right over here. We could add some bottom margin on that. Or if you want your grid, let's call this, by the way, let's rename this

‍

[Sara] Feature grid.

‍

[McGuire] Feature grid. And you're thinking what? Add top margin?

‍

[Sara] Yeah.

‍

[McGuire] Push it off. What do you think? 60 pixels? A hundred pixels?

‍

[Sara] No, a hundred’s too much. 60 is perfect.

‍

[McGuire] So it's a hundred too much. So you wanna go negative? You wanna go negative what?

‍

(Sara laughing)

‍

[Sara] Let's do 60 here.

‍

[McGuire] 60. All right. 60 pixels.

‍

[Sara] Perfect.

‍

[McGuire] And then center the heading?

‍

[Sara] Yeah. Let's do it.

‍

[McGuire] Let's just center the heading.

‍

[Sara] We can also name it "Feature heading".

[McGuire] Okay, we'll call it "Feature heading" or just "Feature heading". And by the way, all we did there is rename that class. It didn't create another class. It's just keeping organized.

‍

But that's styling our cards. And this is a really good moment to transition from styling into our H3 selector, starting with what is a selector? Now, we covered this when we went through CSS on Slack’s marketing page — where we used a selector — in that case all H2 headings — we selected those H2s and made everything Comic Sans. But a selector, of course, is anything that's up here. A selector is selecting elements of a certain type, whether they have a class applied or they’re a certain kind of element. And it's applying the styles in the style panel to those things. So how does that work with something like H3’s? Well, with any of these H3’s selected, notice how we did add a class called featured image or feature image on all of these. We created it on one, we copied and pasted. That means a change on any one of these. Like a width of 20 pixels will apply to all of them. Maybe...

‍

[Sara] It is tiny.

‍

[McGuire] Little tiny? So maybe 30 pixels?

‍

[Sara] No.

‍

[McGuire] ...will apply to all of them. Fortunately, we have an undo button. Let's undo. What we didn't do is apply a class to these headings. Fortunately, we can style all H3,s, really, all H3’s, H2’s, H1’s, images, links, whatever. We can style all of these things at once.

‍

With the Heading 3 selected. Let's go up to selector. And instead of clicking to type a new class or to add an existing class, let's go down to HTML Tag. So this is a selector for All H3 Headings. Here's how it works. First, let's click All H3 Headings.

‍

[Sara] Done.

‍

[McGuire] We, yes, it is done. We are now editing all H3’s on the page. All H3’s on the site, actually. So how does that work? Well, let's do something wild. Let's make the color pink. So we're gonna make it a pink. And that means if we grab, even if we don't style it, or even if it's not in this grid, if we grab the Heading 3 and put it somewhere else, maybe up here. And we change it to H3, it is now pulling in those styles, without applying a class.

‍

Now what you don't see is Stacy off screen, quite literally on the production monitor. Absolutely losing her mind with happiness right now, because we've made this pink. Unfortunately, we're gonna have to change it back because it doesn't match the rest of the design.

‍

[Sara] I'm sorry, Stacy.

‍

[McGuire] So let's delete Heading, and we'll go back to our H3. Any of these we can select. And again, it's not a class, but we will go in All H3 Headings and we'll remove that.Let's go to color and let's reset that color.

‍

And what we might wanna do here is maybe make it a little bit smaller, just so there's that clear visual hierarchy between the H2, which is a little bit larger. Maybe what 21 pixels?

‍

[Sara] 21 looks good.

‍

[McGuire] Okay. And we can also reduce, right now it's 10 pixels at the bottom. We could say something like five pixels. Just make it a little tighter so it's really clear that this heading is related to that paragraph.

‍

[Sara] That looks awesome.

‍

[McGuire] So that's it.

‍

[Sara] Yeah, that's it.

‍

[McGuire] That's it.

‍

[Sara] Perfect.

‍

[McGuire] We built this entire section. Six cards using the magical properties of CSS grid. We built the structure. We built the cards themselves. We styled everything. And of course, we modified - just a moment ago - we modified all H3’s using the all H3’s heading tag.

‍

We have just two more things to build after this, the form, and of course, the footer. So let's jump into the form next.

‍

[Grimur] Piano. Now that we’ve gone through this card design, show us your card design. Violins. Whether you’re following along here or you’ve built your own card design, we want to see it. Harp. We’re gonna take our favorite card designs, and we’ll give you an expenses-paid trip to Webflow’s headquarters here in San Francisco, where you can work alongside our producers and designers. Cellos and basses. So use #webflow101 and share your card design on Twitter.

Read the full article

Download assets

Clone this project

Read the full article

Site build: Form

Forms are one of the web’s most powerful and ubiquitous tools. With forms, site visitors can sign up for newsletters, register to an event, request demos, submit feedback, and so much more. In this lesson, we structure and style a form, configure the form’s success and error states, and create an engaging form call-to-action.

[McGuire] We're moving right along. So far, we can see we've built our navbar, our hero section, our logos, those cards we just made. And of course now it's time to build what could be argued is the most important...

‍

[Sara] The form.

‍

[McGuire] Spoilers, it's the most important part of any site. The call to action, the form itself.

‍

When someone lands on this page, we want them signing up. What do we want them to sign up for?

‍

[Sara] Calendar App.

‍

[McGuire] Calendar App. That's right.

‍

[Sara] In space.

‍

[McGuire] In… in space.

‍

[Sara] Yeah.

‍

[McGuire] Or wherever they are. So we're gonna break this into structure, into content, then the form structure itself - getting into specifics. We'll do styling and we'll cover combo classes again this time on the button in the form. Oh. And finally we'll cover the success and error states. What happens when someone successfully completes the form? And of course, what happens when someone, once again, unplugs the router.

‍

Let's get right into it. Let's start with structure. Of course, we're getting used to this by now. We're gonna add some of our basics. So we'll collapse this section. We're looking at our high level structure right now. Let's go in and drag in a section for the form. Just drop that right at the bottom under the other sections. Let's collapse these and take a look.

‍

We need a few more things. Let's put in a container. We'll use Command-E. quick find, just type container. Okay, well that's the primary structure. There's some other stuff though. One more thing we want inside that container, we'll do Command-E again. We're gonna add a form. So we'll just press return. And we have a couple options here. Of course, we want form block. We'll just press return. And now we have a form, by the way. That's our basic structure.

‍

Let's move into content. Now for the content, we're gonna do one more structural thing, but we'll only do that after we demonstrate two pieces of the content. So rather than talk about it, let's go in and just add that heading. So we'll add a heading on the top. This will be an H2. It's going to say…

‍

[Sara]“Request…”

‍

[McGuire] “Request a demo.”

‍

[Sara] “...a demo.”

‍

[McGuire] That's right. And we'll add one more thing. We'll add a paragraph. And let's say “Experience the future of space travel. And see for yourself, how it can revolutionize…”

‍

[Sara] “...your space travel planning”

‍

[McGuire] “...planning.” So here's the thing. We said we'd come back to another structural component. That of course can be a div. So for example, right here, if we see this is going a little long, it's kind of going from left to right. It's a wider paragraph here. If we wanna constrict that, there's a few ways to do it. We could add a new class that constricts the maximum width and say no more than 300 pixels, and it'll just kind of keep it narrow. But what if we change this H2? Or what if this ends up going a little bit longer as well? Maybe we're gonna change. We're gonna change the size of it to something like that. Who knows? In other words, what if we wanna wrap both the heading and a paragraph with this div to keep everything neatly organized without having to style everything one by one? Well, we can do that. We can just add a div. So command E, we'll just grab a div, press return, and we'll drag the heading and the paragraph into that div. Now we still have that 300 pixel max on the paragraph. Let's get rid of that. Cause that's not what we're going to use.

‍

Let's go in, remove class. And again, to keep things neat and organized, let's go over here, clean up and remove the unused classes. Because what we're going to do here is set the styling on the div. So, with our div block selected, let's call this what “Form wrapper”. “Form heading wrapper”

‍

[Sara] “Form content wrapper”

‍

[McGuire] “Form content...

‍

[Sara] Way too many words.

‍

[McGuire] Way too many words. “Form content wrapper.”

‍

[Sara] Perfect.

‍

[McGuire] It's still a little wordy. We can set a max width on this of 300 pixels. And when we do, and we can always adjust that, notice how it's actually wrapping around everything. It's wrapping around the H2 and it's wrapping around the paragraph. So we'll keep everything neatly organized inside that container. So everything's to the left and everything is, let's see, 300 pixels?

‍

[Sara] Yep.

‍

[McGuire] That's okay for now.

‍

[Sara] That works.

‍

[McGuire] Let's move into the next part. That was content. Let's move into form structure. So by default, the form is gonna come with two different fields. Each will have a field label. Let's take a look at the anatomy here. Let's close that. So this is our form. Let's look at what's inside, field label, text field, field label, text field, four different things. And of course, a submit button. We want to add one more field. So how do we do that? We can copy and paste, or we can hold down Option or Alt and just click and drag on the field label. So we've made a copy of it. Same thing on a text field. Click and drag with Option or Alt held down. And we'll create a duplicate underneath.

‍

And now we have three different fields. So this one says Email Address twice. Let's change this to Company. And maybe this is a, let's go into the little gear icon here, and we'll take a look at these settings. Well, first, let's call the name Company plain. So we can choose our type here, but plain is fine. And let's make this not required. So if someone doesn't have a company, they don't have to enter it if they don't want to. All right, let's escape.

‍

But the key here is that we want the structure. Again, we know it's gonna go from looking like this to looking like this. We want that sort of horizontal design. So how do we do that? Well, let's actually take a look at the wrong way to do it, or what would happen if we try to do that now/ Let's, first off, this is the the form content wrapper. Let's make sure that's outta the form. Let's put that in the container. And it didn't look different. But the reason we're doing that is because we wanna change some stuff on this form itself. So what do we wanna change? We don't want these things vertical. We want them horizontal. And now we know how to do that because we're going to unlock the power.

‍

[Sara] of flex.

‍

[McGuire] Of CSS grid.

‍

[Sara] No.

‍

[McGuire] No, it's flexbox.

‍

[Sara] Let's flex.

‍

[McGuire] We're gonna press flex. And when we do, it's kind of what we want, but not really. The reason is it is just as we're telling it to do. It's taking everything, all the children of the form, everything inside this form. And it's kind of stacking them horizontally. If we did vertical and stacking them vertically, horizontal, vertical, horizontal, vertical, back to horizontal. Now it's horizontal.

‍

[McGuire] There wasn't really a demo there, it was just clicking a lot of buttons. But if we want these things to still be horizontal, but we want each of these to be grouped together. So the field label and the text field, we can group them together. We know how to do that. It's a div.

‍

Let's go in and add a div and we'll just drop that div, let's just say anywhere in here. And we'll add two of these to this first div. So we'll add the field label and the text field to the div. And with that div selected, let's call it...

‍

[Sara] Field wrapper.

‍

[McGuire] Field wrapper. And we'll do the same for the others. Let's go in select form and we'll press Command-E, type div and of course we want to add the same class. We'll call it Field wrapper, press return. And of course we'll add one more. Another div. We can go ahead and put that right next to the other stuff. We're just dropping it inside the form. So let's do the same thing here. Let's make sure we're adding Field wrapper and we'll start doing our work.

‍

Let's put the field label in this first one, that text field and that field wrapper. And the same thing one more time over here. And over here, we're just nesting these things inside that div. And of course, we want this div, we want this last field wrapper to actually come before the submit button. So we'll flip that order. So that's it. Design complete.

‍

[Sara] No, it's not [laugh].

‍

[McGuire] No, it's not. But that's why we're moving from form structure to styling.

‍

So how do we fix this? Let's take a look at the anatomy. Again. We know we have this field wrapper, that we just created this to wrap around each of these pairs, each of these field label plus text field combos. So we know we have that. And of course we have the submit button. So when we want, in CSS, when we wanna make a change, we of course select, we start with the parent element. We added flex on this. We know what's happening there. We could justify, we could align these things however we want. There are lots of options we have here. But we actually want the children elements, in fact, these three children elements, these field wrappers, we want them to take up the full width, the full space available.

‍

So at the top of the style panel, if we scroll up to the top of the style panel, we see flex child. These are settings we can apply to the children of a parent element when that parent element is flexed. Put way more simply, these are things inside of a parent. That's flexbox. We can change the children properties. So let's grow if possible. And notice how, let's do that again. It expands. It'll take up the space if possible. When would it not be possible? Well, let's show an example. Let's take this form and say it's a width of 500 pixels.

There's not much room. So if we select again and we say, let's grow if possible, it's not gonna do anything. There's not enough space. So undo. Not 500 pixels. Instead grow if possible. And it will take up that full space.

‍

When we get to responsiveness later, this will be really helpful for setting maximum constraints on everything. So it's even and matched across all different devices. But there is something we want to do on the parent. Let's select form and let's add a little bit of space.

‍

[Sara] A gap.

‍

[McGuire] A gap, that's right. Let's add some space between these columns. Just holding down Option or Alt and dragging. Notice as we do that it’s adding space between those divs. It's adding space in between each of those elements. So 30 pixels, that was accidental, but it works

‍

[Sara] Perfect.

‍

[McGuire]

Of course, the next obvious thing is the button. So let's select our button. And we already have a class for this. We don't have to reinvent the wheel each and every time. We can go in and with that button selected, let's go to the selector field and type. This is Major button? Major button.

[Sara] Is that what we named it? [laugh]

[McGuire]

That is. Marc says that’s what we named it. That's what we named it? Major button.

[Sara] [laugh]

[McGuire] What? Why did we call it Major button?

[Sara] I don't know. I don't, I can't recall that that was what we named it, but...

[McGuire] Okay, well, major button. Fortunately we can rename these things. We just call it Button. That's fine. So we don't have like a basic button. So this is our basic button, but that's not what's relevant. What's relevant here is we want it to look right in the form. So we wanna style this button a little differently. We know how to do that. We're gonna use a combo class. So we're going to click to the right of the class that says Button. So with the button selected, we're gonna click to the right of where it says button or the artist formally known as Major button. We're gonna click to the right here and we'll type Form. So now we have Button, but it's a specific modification of Button called Form. Let's go in here and make a couple changes. First off our color, let's go for a light.

‍

[Sara] Light pink.

‍

[McGuire] Light pink? You want pink?

‍

[Sara] Purple. No, purple.

[McGuire] Oh, light purple. Something like this.

‍

[Sara] Yeah.

‍

[McGuire] Okay. And then we can go for the color. It’s going to need to be something like, let's go to the brand color.

‍

[Sara] Let’s see. Yeah.

‍

[McGuire] How's that?

[Sara] Perfect. You can also see it's AAA.

[McGuire] It's what?

‍

[Sara] AAA.

‍

[McGuire] Oh, triple. It has triple-A contrast ratio. This is a really important way to look at the contrast between foreground and background elements. So if we turn that on, we can just hit the eye right there. We can see that if we go up here, we're losing, the contrast ratio is going down. It's a little less legible. You can see it's failing miserably. So let's switch it back to the brand color. And that has a triple-A contrast ratio. That's good for now. What about the position? Do you want it a little bit lower?

[Sara] Um, no. I think the height, it's a little bit tall right now. So let's decrease the padding.

[McGuire] Okay, so we can decrease the padding.

[Sara] Yes. Let's do like nine pixels. Top and bottom.

‍

[McGuire] Right, but it's not gonna matter. Because nothing’s changing.

‍

[Sara] Are you sure?

[McGuire] Yes.

‍

[Sara] Huh?

‍

[McGuire] The reason is we have to set properties on the parent. So this is what happens when we're debugging CSS and we're doing it in real time. This is good. So let's select the parent. Let's see form. And we can see by default, the alignment of these things is going to stretch. That's why the button, even though we don't have padding set on it, that's why it's taking up that full height. So what do we do? We can just align to the end. Now it's too small.

‍

[Sara] [Laughs]

‍

[McGuire] It's okay, this is not a good button, it's gonna work. We're gonna make this work. So we could add padding back on the button. So with the button, selected. Button form, we could add, you know, nine or 10 pixels. Do nine pixels, top and bottom on the padding.

‍

And also notice these field labels or these field wrappers, there's some space underneath. What's going on there? Well, we can take a look at our text field and say we see 10 pixels of margin. Sometimes when we click something, if we're not okay with the spacing, we can click that thing and see what's happening. Text field, well, there's 10 pixels of margin added by default. Let's zero that out.

‍

And by doing that, we've created a class called text field. Let's just quickly apply that to each of these. So we say text field and text field. So now they're all linked by their styling. And now we can see the alignment on the bottom is matched. The alignment on all these things is even and matched. So let's grab our section, let's add that section class so we have that padding. So we can take a look at the entire thing, which is missing one detail. Sara, what

[Sara] Are we missing?

[McGuire] The rounding on the text field.

[Sara] Three.

[McGuire] Pixels. Tex. Three pixels. All right, let's do that. Text field rounding. Three pixels. Three pixels. Let's consistent. It's time to move into our last section. Success

[Sara] And...

[McGuire] Error. And error. That's right. So this is our form. We can actually take a look. So with the form selected, let's select our form block. With our form block selected, we can see that in fact, we can go to preview mode. And from preview, we can type in

[Sara] Stacy.

[McGuire] No, we can use Grimur for this greener webflow.com company Webflow. And of course, we could submit, we see what it looks like to type in into these fields. Let's go out. But we can also do something else with this form block selected, let's go over to element settings up here.

See what happens when we change the state. Right now, we're in the normal state to success or error. Success is when the form has been successfully submitted, and this is what it will show. Thank you. Your submission has been received. Maybe that's a little wordy. Thanks. Stay tuned.

‍

We can change the content. We know we can do that. We can add something new if we want. But for right now, let's make the success message look a little better. So with the success message block, with this block selected, let's go in and change the color. Let's just say white for right now, or just transparent for right now. Whoa, that's red transparent for right now. And we'll go in and maybe adjust the padding. So there's a little more space. This is okay. Maybe the color can be minty green color with a much larger radius. How's that look?

[Sara] No. It's horrible. All right, let's, let's match with a three pixel at least.

[McGuire] Okay, three pixels. Let's change this to something a little lighter. That's fine. Okay, good for now. It's okay. It's okay. We'll come back to it in design review. Let's go to the form block and change that. Last state, which is a state.

‍

What happens when something doesn't go well, something went wrong. Well, let's select our error message, and we can actually pull in, if we go to the style panel, we can actually pull in success. So we know we have that success message. Maybe we can rename it message and we can just set it to center.

‍

So what does that mean? Well, we first off, don't want the same color on both. That's okay. But what does that mean? It means that when we're in our form, so if we select that form block again, we can see success and error, have a similar formatting. Maybe that's okay, maybe it's not. But the point is maybe in error we want to inherit those styles. So with message selected, we're just in the error state. We can say message, and we'll create a combo class for this one called Error. Error. Let's go in and just change that color to

kind of a red. But that's it.

‍

We made a full call to action. We built out our structure, we changed the text. That's the content. We structured the form, we styled it using Flexbox in an urban facial mask, which we left on for 10 minutes. While we prepared the rest of our routine, we styled our button using a combo class. And finally, we looked at success and error messages. Up next, we have one more section on our site to build, or more properly, we have one more section to build on our site. So let's jump into that in the next lesson where we'll build a footer.

‍

[Grimur] The call to action really is a critical part of any site (certainly any landing page). Share your form designs using #webflow101 on Tweeter, and we’ll literally feature our favorites in a major upcoming production called “Forms.” It sounds like a joke, but the last time we made a video called “Building a Web Form” it got a quarter of a million billion trillion views.

Read the full article

Download assets

Clone this project

Read the full article

Site build: Footer

A footer is the bottom section of your website homepage where you typically add your company’s logo, social links, navigation links, and copyright information. In this lesson, we’ll optimize our site’s navigation — and social media promotion — by building a fully responsive footer section.

[McGuire] Footer.

[Sara] Footer. The word sounds more strange the more you say it.

[McGuire] That's accurate. It's also where we can link out to provide more context, navigation, information, all of it. We'll break this lesson down into four sections: structure, content, styling, and finally, we'll adjust the alignment on our container using a combo class.

Let's start with structure. We're getting really good at this. Let's collapse what we have, and let's add a section. Now we can place a section anywhere. The footer traditionally goes on the bottom, so that's our section. Let's add, of course, our selector. Let's go ahead and add that class, which is section.

[Sara] Section.

[McGuire] Of course, inside that section, we're getting good at this too, let's command+E for quick find, and let's put a container inside, and that's our primary structure.

Let's switch from structure to content. Few things inside here. First, let's add a logo. So we'll go to our assets, and we'll grab our calendar logo. Strike that right inside. The default size is okay, but depending on the logo we're using, we might want to add a class to that to control it. Let's go and add a selector. Let's call it footer logo. Let's say the width should be 110 pixels, so that's fine. We can always change this later.

So what else do we want in the footer? Well, we want some links. Let's put some links. Command+E for quick find. Let's do text link. And because we'll be using multiple, let's add a class. Let's call this footer link so we can style it later. And we'll want to place all of these links. Let's actually create a div just to wrap these. So let's create a div. We'll call it footer link block, and can drag one of these text links inside. The reason is now we can hit command+C, command+V and just copy a bunch of them. Let's say, we'll call it, let's do YouTube. We can do that. Let's do ...

[Sara] LinkedIn.

[McGuire] ... LinkedIn.

[Sara] Twitter.

[McGuire] Let's do Twitter. Let's do Facebook, Instagram ...

[Sara] ... and ummm Dribbble.

[McGuire] Were you actually struggling to remember that, or were you, for dramatic effect, were you ...

[Sara] A dramatic effect.

[McGuire] Dramatic effect?

[Sara] Yeah.

[McGuire] That's good. It's dramatic. Three Bs in Dribbble?

[Sara] Yeah.

[McGuire] Okay, so we have all of those.

[Sara] No.

[McGuire] No.

[Sara] It's two, right?

[McGuire] In Dribbble, it's three.

[Sara] Is it three?

[McGuire] It's like awwwards.com, there's three Ws. Dribbble is three Bs, right?

[Sara] Okay. Yeah, you're right.

[McGuire] Were you asking that question because you were curious or was it dramatic effect?

[Sara] Maybe dramatic effect.

[McGuire] Dramatic effect. Okay, so we have all of these. That's it. That's the footer.

[Sara] Not really.

[McGuire] Not really. There's more to do. There's one more piece of content before we move into styling, and that of course is our copyright. Command+E one more time, and let's make sure. Let's close this. Let's make sure we're in our container. So command+E, and we'll type text block [inaudible 00:02:40] a text block for this. It drops right in the container. So in the container, three things: logo, footer link block, and, of course, text block. Let's call this copyright option G. On Windows, this can be control+alt+C, and we'll do 2040 calendar all rights reserved. That's it for structure and content.

Let's move into styling, starting with these footer links because they don't look great as is. Let's see. First off, two things. With any link that we don't want looking like this, let's turn off that text decoration. By default, it's an underline. Let's turn it to none. The color by default is pulling in that blue color. We can set it to whatever we want, probably a bold red.

[Sara]

Maybe a dark gray.

[McGuire]

Maybe a dark gray. And of course, one more change we can make. Right now, it's a little cluttered. We could take that footer link block, the thing that's holding all of these and make some changes on that. So we could turn on flexbox. And by default, horizontal is fine. That's the direction we want to use, but we can add some space in between our columns. So just holding down option or alt, we're going to get some space, maybe 20 pixels.

[Sara]

That looks good.

[McGuire]

We can justify our content to the center. That looks pretty good. We can also use this div, this footer link block to add some top and bottom margin. Just add some space outside of it between that and other things, maybe 15 or 20 pixels there too.

But how do we center everything else? There's a lot of ways to do this. Let's move on from styling to container, because this is where we're going to get into our combo class, but we're going to do a bonus. We're going to make sure everything in this site is even and matched and consistent. So there's one thing that's unlike other things, and that's this container. We created a class by styling it way back in the hero section. Let's actually call this hero container. It's just for this one because there's some special properties, some flexbox settings applied to this. But let's just demonstrate by setting the maximum width on this to 1100 pixels. When we do, of course, it only affects that container. It's the only one we applied that class to. We created that now hero container class.

But what about this? There's a container up here. Let's add a new class called container. This is just the container in our nav bar. We're going to create a class called container. Maximum width, let's set it to 1100 pixels as well. What we'll do with this container is really keep it simple. It's only going to be a max width of 1100 pixels. So if we go over here to our, let's select that container inside this section. Let's select container here as the class.

‍

Same thing down here in this kind of feature grid section. We'll select that container, go over to selector, and add container, keeping these even and matched. Same thing in the form. Let's select container. And of course, same thing in the footer. Select the container. Select container. When we do, that maximum width we can see is affecting all instances of container. The only one it's not is the hero, and the hero has some special settings applied to it.

‍

But for our container in the footer, we want to do some special stuff down here. So with container selected, with this container selected, we know we have the container class, let's create a combo class called footer. We're going to add some special stuff on this. So there's a couple ways to do this. We could just set flex and we could go to vertical and we could go to center. That's one way to get everything centered. Let's undo a couple times and take a look at what other options we have. So we undid flex. It's back to where it was. We could also just select the alignment, the text alignment. That will align all that content that way. It's really up to you. That's the thing about CSS and HTML, sometimes there's eight different ways to do the same thing, and that's good. We have options depending on the styles we're looking for, depending on the content we have. In this case, maybe remove that alignment and use flexbox. It's a little more versatile for down the road if we're wanting to stack multiple things next to each other that might have different properties applied.

Okay, one more bonus thing, because this will be a pain if we're making adjustments on the container and it works on everything except for the hero section. Let's go to that hero, because remember, we only added really this set of flex controls to it. Let's remove hero container. Let's put back on our container so it's now matching the same container as everything else. Let's use the same technique there. Let's go and say ...

‍

[Sara]

You can actually use the footer there.

[McGuire]

Hero? What?

[Sara]

You can use the [inaudible 00:06:53].

[McGuire]

That's absolutely right. Actually, this is a great way of doing this in real time, which is ... Sara just said we could use the footer there because it has the properties we need. It has those flex properties. Of course, the missing one, it might be ... No, that's it. That's absolutely it. So we could use that. Just rename this to centered. So now we have container centered on the hero container and the container at the bottom.

Of course, if we select any of our containers that don't have that combo class, that are just container, we can change their styles, just the container class. So if we increase the max width to maybe 1200 pixels, we can see it's matched on all the containers, including the container in the hero section. We decrease it once, it decreases the container on all of these for us back to 1100 pixels. And That is all for the footer.

Simple design. We did our structure, we added our content, we styled it, and, of course, we adjusted that container using a combo class, which we later renamed container centered. So it's even and matched not only in the hero, but throughout everything.

And up next, we're going into one of the most powerful tools we have, which is using breakpoints to turn this full design into something that responds perfectly on different displays.

‍

[Grimur]

It’s called a footer because it’s at the foot (at the bottom) of the site. Down near my feet, I got something special. Pizzicato strings. Another iteration of the Grimur Webflow 101 plushie. Here’s the thing, these are a limited-edition run. And this year, every month, we’ll be picking our favorite footer designs shared using #webflow101 on Twitter. Not only will the winners get a plushie of this devilishly handsome Nordic firecracker, this guy, but we’ll be using our vast reach to share your footer designs with the world, right? I love him.

Read the full article

Download assets

Clone this project

Read the full article

Site build: Responsiveness

Responsive design is what helps your website content reflow and reposition on all devices — desktop, tablet, mobile landscape, mobile portrait, and the Game Boy Color. Responsiveness is arguably one of the most critical parts of website design and, in this lesson, we’ll fine-tune our site design to reflow perfectly for devices of all sizes.

[McGuire] This is it. We're going to take this full site, this one pager, and make the whole thing responsive. The reason we're doing this is while it looks okay on this display in this recording setup, we want to make sure it responds beautifully on all kinds of devices. Desktop, tablet, mobile landscape, mobile portrait, and of course, Game Boy Color. Let's start on desktop. Now, a lot of people ignore desktop. It's what we design in by default.

‍

But the problem is it might look fine in this view-port size, which is 1466, but if we click and grab on the edge right here and resize, we want to see how does it respond as things get more narrow. So a good example of doing this is going throughout the page, grabbing the edge, and resizing, seeing how it responds fluidly. So one immediate thing to notice is these things go right up to the edges. So one thing we can do is with our container selected, remember we created this class we're using everywhere, we can say we can add a certain amount of padding. So if we want to add, let's say 20 pixels on both sides, just holding option or alt, we can add 20 pixels of padding on both sides. What does that do? It creates a little bit of breathing room between the edge-

‍

[Sara] And the content.

‍

[McGuire] And the content. That's right. Now, this is 30 pixels in between each of these. We could on desktops say, take our container. Any of these containers selected, we could take our container and say, "Well, on desktop we can do 30." That might work.

‍

[Sara] 30 looks good

‍

[McGuire] So it's even across all of them. Everything else. Maybe this is a little wide, the hero paragraph, we could just set a maximum width there. We could say 700 pixels. That's okay. That might look a little bit better. Okay. How does the rest of desktop look? Let's see how grabbing the edge. Everything looks pretty good on desktop. Let's move on to tablet. So on tablet, things are going to get a little bit tighter. First off, the sections may have a little too much. By default, they have 60. Let's maybe drop that to...

‍

[Sara] 40?

‍

[McGuire ] 40. So we're just holding down option or alt decreasing both at once. So that's 40. Maybe the big heading can be reduced and …

‍

[Sara] Center aligned?

‍

[McGuire] Center aligned, and decrease the size a little bit.

‍

[Sara] Yeah.

‍

[McGuire] Okay. 44 pixels. So what just happened? We just changed a couple of things. We changed the padding on the section and we changed this big heading. Does that mean it changed everywhere? Well, let's go back to desktop. Desktop is still at 61 and the section is still, the padding is still at 60. Now why didn't it change on desktop?

Changes that we make on tablet, those will pass down. Those changes will pass down to lower breakpoints to smaller breakpoints, but they won't go back up and pass all the way back up to desktop. Let's keep looking on tablet.

‍

[Sara] So I noticed something happened to the nav bar. It now has a hamburger.

‍

[McGuire] That's a fantastic point. So this menu button was not visible here. In fact, we had these three right here features, these nav links, request a demo. If we go to tablet, by default, we've switched to a menu button. So how do we do that? Well, let's select, let's collapse everything for a second.

With our nav bar selected, let's go to element settings and see what happened. By default, the menu icon is going to show up on tablet. So that's where it starts. And of course it'll happen on mobile. Maybe on tablet, we still want to list it. We can just switch over to mobile. It'll still show these here. And then on mobile, it'll change. Or maybe we want to switch it to desktop. Let's pull all the way back to desktop. And now we have the nav menu on desktop. For us, let's switch just back to tablet so that we have that nav menu.

Now what's inside? Let's click that menu button and under navbar our settings where it says menu, let's hit show. And this is what it'll show when we open the menu button. So another way to demonstrate that, let's go into preview. So we're in tablet. Press this. That's what we will show by default. How do we style it? Well, we just showed how to get into it. Let's go to show, and now we can style. Starting with the nav menu itself. Let's go back over to the style panel and let's make the background. Let's say, what a white color?

‍

[Sara] White. Yep.

‍

[McGuire] Do you want to add any shadow or is it fine just solid white?

‍

[Sara] Solid white.

‍

[McGuire] Solid white. Okay. And the nav links they may work as is. Maybe that rounding on the edge looks a little weird when it's bumped up to the edge here. Maybe we can just remove that radius down to zero.

‍

So remember, with combo classes, they're a more specific class. So if we were to just center align with this one, it'll only affect everything that has navlink and CTA. So let's undo and select just a navlink and we'll center align. So it's center aligned.

‍

Let's do the same on the menu button, lunch style that as well. Make the menu hamburger icon, white background, and we'll just change the font color. This is how we can change that menu icon. We'll just change it to black.

‍

Now, at any time, we can go back into our element settings here, into our element settings panel. And with our menu button or our nav bar selected, we can toggle show or hide. And of course, that's going to show or hide our dropdown menu. But let's hit escape real quick to deselect everything, because we can also go and preview our nav bar to see what's going to happen when we press that button and we can see, press the button, it opens up. Press the button again, it closes. Press the button, opens up, press the button, you get the idea. Let's check the rest of tablet. So, so far the hero's looking okay, the trusted by is looking okay. Six across still works here. If we wanted some more space, we could add it, but that looks okay. Maybe this is three across. Looks fine on tablet. If we've decreased the size of this big heading, maybe on our feature heading, we want to decrease that a little bit. But you know, that actually may be okay. Down here.

‍

[Sara] Let's change the gap to 10 pixels

‍

[McGuire] Ok. On the form?

‍

[Sara] Yeah.

‍

[McGuire] So to do that, let's go up and take a look at our gap settings and we'll change to 10 pixels.

‍

[Sara] Sounds good.

‍

[McGuire] And that might be it for tablet. Looking good on tablet. Again, not just checking how it looks when we switch to tablet, but checking the fluidity and adjusting. And you can see down here there will be different previews for different types of devices that show up. So these will help you lock in. You can see at the bottom, it'll help you lock in to different device sizes, but that of course is tablet. Let's go over to mobile landscape and let's take a look. So in mobile, we might want to decrease that section padding even more as there's very limited real estate in a mobile landscape screen. So let's go down to 10, maybe 20 pixels.

‍

[Sara] Yeah, 20 looks good.

‍

[McGuire] And then the heading, notice two things. It's not just the size, it's also that height, that line height. So we might want to decrease that line height as well. Decrease that heading size. How's that look?

‍

[Sara] Looks good.

‍

[McGuire] Okay. And we can always test that fluidity on mobile landscape as well. So one more thing to note. If we look up here, the brand block on mobile landscape by default has 10 pixels of padding. Let's go into that 10 pixels and set it to zero. Of course, if we go to mobile portrait, it still says zero pixels. That's good. Okay, what about the vertical alignment here? Maybe on the logo itself, we had 14 pixels before. It'll look better at about 17 pixels. We can eyeball that and see the rest. So we're looking good here. Trusted by looks fine on this one. We might want to wrap that on mobile portrait.

Maybe trusted by is a little large. Decrease a little bit. Features for every need. We're kind of getting to that spot where it looks almost as big as the H1. Let's change this to what? 25. You can always eyeball it option or alt and adjust. 24, 25 looks okay. Decrease that line height as well. And then of course, we're going to need some love on this section here. So a couple of things we could do. One, we can go into edit our grid and where we have three columns on tablet, maybe we only want two columns here. And maybe we want to decrease that column distance to, let's see,

20 pixels, 15 pixels, 20 looks okay.

‍

[Sara] Yeah, let's do 20

‍

[McGuire] As we adjust. This looks okay, looks good.

‍

Maybe on the heading three, remember we didn't add a class to this. We can just edit the tag and say we want H3s on mobile landscape. Go in to edit all H3s. Maybe those should be-

‍

[Sara] 18.

‍

[McGuire] 18, yeah, 18. And decrease that line height as well.

‍

[Sara] Looks good.

‍

[McGuire] Looking pretty good. So just adjust that.

Looks good. Let's go down here.

‍

That H2 is looking a little bit large. Again, we have feature heading here with 25 pixels. Let's go down to this.

‍

In fact, what we could do, we could say all H2 headings are going to be 25 pixels by default. And what that's going to do is because this is also an H2, we could just remove that size, we could remove it, and it still stays 25 pixels. Why? Because it's coming from all H2 headings. We can always set properties like that. Paragraph. This is a little tight down here.

‍

[Sara] Yeah.

‍

[McGuire] So maybe for the form, quick fix we could just switch it to vertical and we're done. That's it.

‍

[Sara] That looks horrible.

‍

[McGuire] It does look horrible. That's true. A couple of things we could change here. One, let's stretch. So it's everything is by default taking up full width. And the second thing we could do is nothing, because it looks pretty good. No, the button should have a little more margin on the top. Let's go maybe 10. How's that look?

‍

[Sara] Looks good.

‍

[McGuire] All right. And the footer still looking pretty good. Let's see what happens when it gets really narrow. It's getting tight, but it's not bad. We could say the link block here. We could just decrease that column gap a little bit to like 16 pixels. Okay. And we'll do a design review later. We might have missed stuff. That's okay. We'll get that later. But that's mobile landscape. Let's go to our final break point. And over in mobile portrait, we can see it's getting a little tight, especially in the hero section. So let's start there. First off, big heading might make sense to make this even smaller. Maybe 32, decrease that line height as well. And on the section, we still have 20. Maybe in this point we need 10. Center align, you think, the button?

‍

[Sara] Yeah.

‍

[McGuire] Okay. Center align the content. How's that look?

‍

[Sara] It looks better. We could also decrease the size here.

‍

[McGuire] Decrease the size of this. The thing to note on container is we always have that what? 30 pixels. Maybe starting back here on mobile landscape and we'll make sure container and not container centered is selected. Select container. Maybe decrease to what? 20. Little…yeah, little less. And that looks okay. Of course that passed down here. You're saying decrease the size of the button?

‍

[Sara] No, it actually looks good now.

‍

[McGuire] Okay. Here's what it looks like when it gets a lot tighter.

‍

[Sara] Yeah, it's a little bit tight.

‍

[McGuire] Let's maybe decrease the padding to 10 and the padding on the left and right to 20. That's only going to matter... that'll only be apparent when we're getting a little more narrow. How's that look?

‍

[Sara] Yep, it looks better.

‍

[McGuire] Okay. So app icon looks okay. These are getting somewhat small.

‍

[Sara] A little bit small.

‍

[McGuire] So maybe instead of we could do logo holder, edit that and delete three of these columns. So we kind of have a three by two set up in terms of columns and rows. It's a little tight. So if we go in, this is that section. It is a little tight, so maybe 10 was too much there. Maybe back to 20. And that's okay. We could add a little more if those are getting a little large. We also could add a little more in that grid, A little more of a column gap there. Maybe 30 by 30. We can adjust this later. Perfect it. Okay. Features for every need. This H2, there's a lot of space. So that feature grid, we put 60. In fact, let's go back to mobile landscape. We can decrease that a little bit. Let's decrease to what, 30?

‍

[Sara] Yeah.

‍

[McGuire] And then go back to mobile portrait. How does that look? That looks okay. Maybe... Is two across too tight here?

‍

[Sara] Yeah, definitely.

‍

[McGuire] So in the feature grid, let's go in and edit, delete one column, boom. Now it's set up in one column. So we can go through all of our features, including daily digest, AI assistant. And here's a really important note. We've talked about styles, but what about content? With AI assistant, let's do capital A for assistant. And what happens? Does that only capitalize the A on mobile portrait? No. If we go back up to even desktop, it's capitalized.

‍

And that's a really important note. Content – changes to content will affect all break points. It'll affect desktop, tablet, mobile landscape, mobile portrait. It'll affect all of them. So if we delete something, like this heading, it doesn't just delete it on desktop, it deletes it everywhere. Undo. If we delete something on mobile portrait, it doesn't just delete it on mobile portrait, it deletes it everywhere. Undo again.

‍

So styling passes down in that one direction we talked about before, but changes to content and structure will affect all break points, all content.

‍

Let's keep going down and adjust and check fluidity here. Request a demo. Okay, so a couple of things. The most obvious one is this footer link block. It's getting a little tight so we could here, just turn on wrap and that'll wrap to the next line, these links. We could also affect uncheck here and we can decrease our row distance. Let's make sure.

‍

One thing to note, these text links, they might be clickable on desktop, but on tablet, when you're using a crude instrument like a fingertip, to touch this, you really need a better tap target size. So let's actually increase the padding on the top, so that we're increasing that tap target. So now there's a clickable or touchable tappable region that's a little easier to access for something like a fingertip. And that'll pass down of course, here on mobile landscape. Let's make sure that still works. It does. And mobile portrait.

‍

Now we see what's going on and we can decrease again on that footer link block. Let's decrease that row height a little bit. So now we're just relying on the padding as that clickable thing. Everything is responsive regardless of that width. We can go really narrow and we can go really wide and test what it'll look like on different types of devices. But that's mobile portrait.

‍

So if we want, we can always roll through all these changes. So we can go to preview mode right over here and we can click and drag on the boundary and adjust through all of our break points, so we can really see how fluid and responsive the whole thing is.

‍

We tested and we adjusted of course on desktop. We did the same on tablet, mobile landscape, mobile portrait, and of course Post-it mini.

‍

Up next, we'll go deep on this page to design interactions and animations.

‍

[Grimur] A lot of people don’t know the secret. Not only does a responsive design ensure things look great on all devices. Oh no. Responsive design gives... you... power!

‍

Whether you’re customizing the one we did here, or it’s your own design, upload a video of your responsive site to Twitter using #webflow101. We’ll pick our favorite responsive sites and fly you out to our annual conference where you’ll meet designers, developers, and Webflow engineers.

Read the full article

Download assets

Clone this project

Read the full article

Site build: Interactions

In this lesson, we make our site more dynamic and engaging with interactions. With Webflow, you can create awesome interactions — here we’ll show you how to create a button hover interaction using states, and a page load interaction using the Webflow Interactions panel.

[McGuire] Interactions. We'll cover two major things here. We'll cover basic hover animations. We'll actually do this with CSS and then we'll go into Webflow Interactions to build a page load animation that won't only turn heads, but it'll turn minds.

Sara, what does that mean to you?

‍

[Sara] Yeah, I was just going to ask you the same.

‍

[McGuire] Great. So how does, how does…

‍

[Sara] All right.

‍

[McGuire] Let's start with button. So here's a button with the button selected. We can always style things. We know we can do this. We can change the padding. We can change the padding here. We can do a lot of stuff like that. Undo, because it was better before. But with this button selected, let's go over to the right and we can go in to change what happens on hover.

‍

So what happens on hover? Right now? Nothing special, but we can change that. So if we wanna change the color so it gets maybe brighter on hover, we can do that. And because we're editing in the hover state, we can preview, let's just escape out real quick. We can preview what it'll look like when you hover over. That's okay. Let's go back into hover because there's a better type of design we can use for this so we're not necessarily changing the background color. Let's reset that and instead, let's mess with the box shadow.

‍

[Sara] Sounds good.

‍

[McGuire] Increase the distance.

‍

[Sara] Yeah, a little bit.

‍

[McGuire] Like that. And maybe the blur.

‍

[Sara] Yeah, the distance is a little bit too much. Yes.

‍

[McGuire] Okay.

‍

[Sara] Let's do 40.

‍

[McGuire] Okay. So you wanna round this to 40 and then much more on the blur.

‍

[Sara] Uh, a little bit more. Yeah. That's it.

‍

[McGuire] Okay. So what happens now?

Click out. We can see kind of an effect. It's okay, not great. Let's add a transition. So what a transition does, is it interpolates between two points, right? So we have None. That's what we're editing right now. And we have Hover. Point one is None. Point two is Hover. So let's go back to None. If we go down to the bottom, we can add a transition. What kind of transition? Well, the type is Opacity by default. We don't wanna change Opacity because we haven't changed Opacity. So there would be nothing that happens. But if we change Opacity to Box Shadow, now if we hit escape, we can see it's animating that Box Shadow. Maybe it's a bit dramatic right now.

Let's slow it down. What do you think is a good number here?

‍

[Sara] Like 400.

‍

[McGuire] 400. And that'll take four tenths of a second. So if we simplify that fraction, it'll take two fifths of a second. But if we hover over, we can see over 400 milliseconds going in and hovering out. We can see that animation play out.

‍

But it's CSS, we've applied not only this styling to this button, but we've applied it somewhere else too. We applied the button class to this button. Even though it's a combo class, it's going to take those base styles, including the shadows and that transition. So when we hover over here, we'll see that same effect. We won't see it up here because remember, this is just a modified version of these nav links. We just created a CTA version of this nav link. But on anything that uses the class button, we can see this effect. Now we could take it a lot farther than this.

‍

We could of course add something else. So if we go to Hover, let's see what happens if we add another change here. Let's do a transform. So 2D and 3D transforms. We hit the plus, it opens this up. We can move left and right, can move up and down, we can move in and out. You don't see that right away because we don't have perspective set up. But let's actually switch. It'll reject these values when we switch over to rotate. And let's just rotate about the z-axis. So we could just have it do that. So on hover, we're flipping it. You can see it's not just flipping the text itself, it's flipping the entire box, including its shadow. So we're doing that. It's not enough. Let's go in again with the button selected. Hover. Let's go to rotate. Instead of 180 degrees, let's continue to rotate until… Sara, just say when.

‍

[Sara] Is this what you mean by like turning minds?

‍

[McGuire] Sure. So we'll just keep going. It’s 2449. Looks pretty good. So what'll happen, we hover over, it’s kind of glitching. So what's happening there? The reason it's glitching is because the boundary of that box has changed, right? As it rotates, you're no longer hovering over the spot that you were over before. So it'll glitch, but that's not the only point. It doesn't look. It physically doesn't look like, what was it, 2,449? Yeah. 2449. It doesn't look like that.

So we need to add a second transition. So with transition selected, we had 400 millisecond box shadow. We're gonna add another one. This time for transforms. And now if we hover over, it's a little abrupt, but you can see it's going that full 2,449, maybe 200 is a little fast. Maybe we wanna slow it down to something like 2000 or even 20,000 or 20 seconds.

What'll that look like? So we can go to preview and hover over and see that over 20 seconds, we're having that rotation apply.

We could, if we want by default, if we don't like that type of transform, we could say instead of ease, we can go into, you know, ease out. We can pick any of these. We can even design our own easing curves. So make it really dramatic here. In fact, maybe the progress should be really quick at first and it'll smooth out over time. That looks good. So hover over. So.

‍

[Sara] Yeah…

‍

[McGuire] It's looking pretty good. So the last part of it will take how long?

‍

[Sara] A long time.

‍

[McGuire] Almost 20. It'll actually take 20 seconds, exactly. And if we hover out, we're getting that same effect.

‍

[Sara] (Laughing) This is it?

‍

[McGuire] Yeah, this is the design

‍

[Sara] Okay. Okay. Sure.

‍

[McGuire] That's animating a button. Let's move into a page load animation. So a page load animation essentially says when the page loads play this animation. So we have to define that animation property. So what we can do is we can switch over to interactions. Two types of triggers.

‍

Essentially, an Element trigger is applied on the element. So it would be clicking an element affecting that element in some way. But a Page trigger is something that applies on the page. So a good example would be while the mouse is moving in the viewport, or while the page, while your page is scrolling, or like we're gonna use Page load. So when the page loads, we'll click that. When the page starts loading, we can do whatever. And when the page finishes loading, we can do whatever. This is helpful down the road. If you want a page loader animation or something like that.

‍

For us, when the page starts loading, we wanna start right away with this animation. So when the page starts loading, we wanna perform an action. What kind of action? We want an animation. So start an animation. We have none yet. We haven't created an animation. So we're gonna create our first animation. We'll call it "Our first animation".

‍

[Sara] Creative.

‍

[McGuire] Thank you.

‍

[Sara] Yeah.

‍

[McGuire] So we can do anything here. For example, maybe we want the heading to be selected. So on our first animation, when the page loads, we want the heading to maybe move. That's okay. So maybe we want the heading to move to the right a little bit. Just demonstrating here.

‍

What happens when the page loads now? The heading moves to the right. So we're gonna make this a lot better.

‍

The move was just an example. What we can actually do, let's zero that out, is say we actually want, when the page loads, we want this to start a little lower. So let's say 40 pixels down. Is 40, okay?

‍

[Sara] Yep.

‍

[McGuire] Yeah. 40 down.

‍

And instead of moving down 40, because if we hit play now when we load the page, it'll just kind of move randomly down. Not very good. Instead, what if we make this our initial state? So our initial state is that it's 40 pixels down. So let's check that. Now it's our initial state. That means we need one more keyframe. One more action. So let's do that. So up here, let's add another keyframe down here. We're gonna move. And instead of moving down 40, you're doing something else. Let's press 0. Let's type 0 here in the Y axis, our vertical axis and press return. So let's look at our points again. This point, it's saying our initial state, when the page loads be 40 pixels down, and then here be zero.

‍

So if we hit play now? It moves into its final position. That's okay. There's some things that could be better. First off, it's linear. Let's put some ease on that. Let's do Ease In Out.

‍

[McGuire] And now hit play.

‍

[Sara] Quart.

‍

[McGuire] You want quad?

‍

[Sara] Yeah.

‍

[McGuire] Ease In Out quad?

‍

[Sara] Quart.

‍

[McGuire] You gotta pick one. Quad? Quart? What do you want?

‍

[Sara] With a T.

‍

[McGuire] In Out. Oh, quart.

‍

[Sara] Yeah.

‍

[McGuire] Okay. In Out Quart.

‍

[Sara] That was what I said.

‍

[McGuire] Okay, so play. Ooh, that's… You sure?

‍

[Sara] Yeah.

‍

[McGuire] All right, let's do it.

Over how many seconds? One?

‍

[Sara] Yeah.

‍

[McGuire] Okay, here we go. Play. All right. Looking good.

[Sara] Yeah.

‍

[McGuire] Let's do more. Let's say in our initial state. So to the left here, we want to add opacity. So initially we want the opacity to be zero. So if we hit play now…

‍

[Sara] It's zero.

‍

[McGuire] It's zero. That's because we need that second point.

So to the left of our point here, this point where we moved everything to zero, let's add

‍

opacity. Let's make that instead of 0, let's drag that all the way up to 100. And now we're animating it in. Again. We can select two things at once. Just hold down shift, select both of these and we could switch. What'd you say In Out Quart?

‍

[Sara] Yep.

‍

[McGuire] Okay. And one second. We can apply settings on both of them at once. Now if we hit play, it'll match. But we're just getting started because we can make this so much better. So, oh. Oh, there we go. Okay, so there's a few things here. So we know we have the heading and that's what we've moved so far, but we wanna do a lot more, right? We have the hero paragraph, we have this amazing button, we have this image.

‍

There's a lot we want to do here. So what can we do to make this go a little bit faster? So instead of styling each and everything one by one we could just say, all of these we wanna add. Let's say on this one, we wanna add something that affects opacity and we want to affect something that moves. We want to do the same here, opacity and move. And we want to do the same on the button. We want opacity and move.

‍

[Sara] Yes.

‍

[McGuire] And down here we want opacity and move. Finally, on the image we want you guessed it, opacity and move. And of course down here, opacity and move. So what we're just doing is creating those keyframes. And now we can select all of these at once. For instance, just holding down command or control on windows, we just select all of our moves at once and we can apply the same properties to all of them.

‍

We can say they're all gonna be 40 pixels by default and we can do the same thing with opacity. We can say all the ones, we’re just holding down command, select all of these and set the opacity to 0%. That's where we wanna start. And then down here we can affect the same. We can say we know we want all of the options with opacity to be selected and we want them to be at a 100%. So we just type a 100%. And we can do the same thing with moves. Select each of our moves and we'll set it to 0 pixels.

‍

Now it shows 0 pixels right now, but we want to make sure it's adding that property. So we'll type 0 and press return. Or just to be safe, we could just hit up, go up to five and down to 0. So we make sure we're resetting all of those at once just to make sure it catches.

‍

So the final thing we wanna do with any one of these selected, we'll select all of them like that. We know we want to change that Ease In Out Quart over one second. Or we can do five seconds for right now. We can hit play. We see all of those elements over five seconds. Ease In Out.Quart. Again, one was better, so make it one second. I can see 'em all play at once. Now, one thing to note while it still looks good over one second, notice how the button looks a little bit different. That could be because we kept that legacy brilliant style we created before. Let's make sure we're removing that transform. And frankly, let's go into our hover and make sure we're, we're removing that massive 3D transform.

‍

And let's go back in. Into our page load. Our first animation. Let's hit play again. And it's even and matched.

Looks pretty good. Now what if we wanna break these things up? What if we don't want all these things happening at once? This'll be really straightforward. Maybe we wanna start with the big heading. So we could just take, let's take big heading out of this for a second. Let's just take it out. We're just gonna drag this out and we'll take both of the, it doesn't matter because they haven't at the same time. We'll take both of them out. Let's do the same thing for that paragraph hold down shift. We're gonna drag it out. So it's its own chunk. Same thing with the button. Let's take that out, let's put that underneath and then image. Let's just move that to the end. So what'll happen now if we hit play? If we hit play, it'll sequence these things. They all have the same initial starting point, but it'll sequence these things in order.

‍

So let's take a look at what happens. Press play over one second. We get the heading, the paragraph, the button and the image. We're getting there. So for these, let's select all six of these. And let's actually say instead of having them sequenced like this, let's drag them right back in. So they all occur at this time, but let's just add a delay in each of them. So again, if we hit play right now, they all work. But what if we want these two to be delayed by let's say…

‍

[Sara] 0.2.

‍

[McGuire] 0.2? Okay. And then we want the button delayed by 0.4, and then we want the hero paragraph, or the image delayed by 0.6. Now it'll sequence in order. Like that. And if we want to increase the time a little bit, maybe 1.5, and we think that the In Out Quart looks ridiculous, we can change it to just Ease In Out. Hit play.

‍

[Sara] That looks great.

‍

[McGuire] Maybe there's a compromise. We can compromise on something like In Out Quad. Hit play. Looks smooth. One more thing we might wanna do is something on the Navbar. So, we can have its initial state. So up here, let's add its initial opacity, might be 0. We could just say when the page starts loading, we could just change that opacity to a hundred. We know this In Out Quad, then we could just say over 1.5 seconds. If we hit play now. It fades in. Looks pretty good.

‍

And that is it. We created our button, our animated transition, which definitely turned heads and minds. We created a page load animation where the trigger is the page loading and the animation is what happens on the screen. But of course, we have only one more core lesson to go after this. We'll review the full site and we'll examine the design. We'll also take a look at accessibility, all of this before publishing our site for the world to see.

‍

[Grimur] The power of interactions isn’t limited to the web. In this top-secret Webflow feature, you can add buttons to a site that trigger continuity changes in actual videos. Lighting. Set design. Even my clothes. And remember, please subscribe! I need more coffee.

Read the full article

Download assets

Clone this project

Read the full article

Site build: Design review & accessibility

In this lesson, we review the design and accessibility of our site, and tune it to make sure it’s fully accessible — so all site visitors, including those who are Blind, low vision, visually disabled, Deaf, hard of hearing, or who have cognitive, learning, or mobility disabilities, can use our site.

[McGuire] We've made it to the design review. When we started all of this, which felt like 15 minutes ago but in reality we filmed it on an entirely different day, we've gone from our site looking like this to… what it's going to look like at the end of this lesson. Let's jump right into that list.

‍

[Sara] All right. Let's put hover on the nav links.

‍

[McGuire] Okay, nav link selected.

‍

[Sara] Yep. We go to the hover state.

‍

[McGuire] Hover state. So we're, by default, in none. We'll go to hover.

‍

[Sara] Yes. We actually want to uppen the opacity a little bit.

‍

[McGuire] "Uppen the opacity a little bit", we can do that. On the typography?

‍

[Sara] Yes.

‍

[McGuire] So the opacity is-

‍

[Sara] Actually lower it.

‍

[McGuire] Okay. Okay. We got it. We can't uppen it, we've got to-

‍

[Sara] Yes. That's great.

‍

[McGuire] There it is. 75?

‍

[Sara] Uh, Yeah, that looks about right.

‍

[McGuire] Okay. Looks good.

‍

[Sara] Okay.

‍

[McGuire] So that's a hover effect. Do you want to transition or for right now, do you want just hard cuts?

‍

[Sara] Hard cuts. But what about the CTA?

‍

[McGuire] So CTA we'll need to do separately.

‍

[Sara] Yeah, let's put one here too.

‍

[McGuire] Hover?

‍

[Sara] Yeah, on hover and let's change the background to black.

‍

[McGuire] Black. Okay.

‍

[Sara] Solid black.

‍

[McGuire] Got it.

‍

[Sara] First one done. All right, so these links are not going anywhere. So we need a destination for these links.

‍

[McGuire] All right. Number two, link.

‍

[Sara] Destination.

‍

[McGuire] Destinations. Okay. So, features needs to take us to-

‍

[Sara] The feature.

‍

[McGuire] Features. So the way we can do this, this is pretty straightforward. If we want to assign an ID to a section, so if we want, when we click features up on the top, if we want this to take us down to this section all we have to do is click that section and add an ID. So let's go over to element settings, we'll add an ID and we'll call it...

‍

[Sara] Features.

‍

[McGuire] Features. That's it. And when we do that, we can now go up, click features and have it – in the Element settings panel – we can have it take us to another spot on this page. Of course, we could go to another URL. We can go to another page on our site but here, we're going to go to a section on this page. We're going to go down, and now we see features.

‍

[Sara] Features. Perfect.

‍

[McGuire] And so if we go to preview and we press features,

‍

it of course takes us down to features. So, that's the first one. Second one, request a demo.

‍

[Sara] Yes.

‍

[McGuire] Assuming we want to go down here?

‍

[Sara] Yes.

‍

[McGuire] All right so we'll click this section. We'll call it "CTA". Go up to the top, request a demo, and that'll take us page section to CTA. Now you might notice, you'll see a couple other items here like "email form" and what that's doing is it will let us link to that form. The reason we want to choose the section, the reason we want to go to that CTA section we just defined is, if this was a longer page we don't want it taking us to that element - that specific element, that form block itself. We want it taking us to the top of that section. So we have that white space on top, that padding on the top, inside the section. So those are those two. We also have Sign up for the wait list perfect. Instead of to that same spot on the page, we can have it, let's say, take it to an email. Let's email grimur@webflow.com. Subject: regarding…

‍

[Sara] Space.

‍

[McGuire] Space. Or did you mean regarding, and then literally a space.

‍

[Sara] Yeah, let's just leave it with a space and go on.

‍

[McGuire] Grímur's going to be so confused. Grímur's email address is grimur@webflow.com so feel free to send this subject, or just click this link directly.

‍

[Sara] All right.

‍

[McGuire] All right. Let's continue.

‍

[Sara] That is everything for number two. Let's go to number three.

‍

[McGuire] Cross that off the list.

‍

[Sara] So in the links, speaking of links, we do have perfect and then under here we have "exactly" in the copy. Let's remove that.

‍

[McGuire] So you want to just remove [McGuire] Sign up for the waitlist.

‍

[Sara] Yes.

‍

[McGuire] And Hero, what do you want to do here?

‍

[Sara] Remove "exactly".

‍

[McGuire] All right, we'll remove "exactly". So now it's a little drier but it says, sign up for the waitlist and join the waitlist for early access. By the way, what does this button do?

‍

[Sara] That's actually going down to the form too.

‍

[McGuire] All right, so let's do that. To the section we know we're going to go down to the CTA. And so now if we click over here into preview, we can click either this, request a demo or join the waitlist for early access. Are you sure? These both say waitlist.

‍

[Sara] No, that should go too.

‍

[McGuire] We should have this one email Grímur too. So that's it. So we'll have grimur@webflow.com.

And Regarding: space.

‍

[Sara] Space.

‍

[McGuire] That's it. All right.

‍

[Sara] Perfect. Done. Number four.

‍

[McGuire] That's three.

‍

[Sara] We're going to change the size of the H1 here on the hero section.

‍

[McGuire] All right. What do you want to do with this? We're changing the size.

‍

[Sara] We want to increase the size. Let's do 80, so you can actually see the different lines.

‍

[McGuire] Yeah, totally. 80.

‍

[Sara] One.

‍

[McGuire] 81. Oh, that was … that was impressive.

‍

[Sara] Great. There we go. Yeah.

‍

[McGuire] Okay. So 81, we're looking at a line height of 65, which is a little tight, especially if we had like a J, you could see that intersection so a "caljendar". If we remove that though, we can actually adjust the height. You want to do unitless?

‍

So we could use one hyphen, and what unitless will do, it'll scale. So now whenever it's 81, the line height will be 81. If we set it to something like 50, the line height will be 50. You'll see that line height scales proportionally as we adjust the size. So you were at 81?

‍

[Sara] Yeah.

‍

[McGuire] Is that where you want to land finally or you want to go?

‍

[Sara] No, 70.

‍

[McGuire] 70. You want to set the alignment to center?

‍

[Sara] Yes, exactly.

‍

[McGuire] All right. We'll do that.

‍

[Sara] Perfect.

‍

[McGuire] Line height one, looking good. All right. Cross that off.

‍

[Sara] All right. Number four done.

Let's do number five. So you can see that everything on this page is actually not pure black.

‍

[McGuire] No, it's actually a white background. In fact, if we go to the body, we can see the color.

‍

[Sara] No, the text element.

‍

[McGuire] The text elements. That's right. It's like a dark gray. It looks like 333.

‍

[Sara] 333.

‍

[McGuire] That's right.

‍

[Sara] Let's do it pure black.

‍

[McGuire] All right. So with the body selected, so the body element - again, because of text inheritance, we can make sweeping changes on the body and we can always override those but with the body element selected, let's change the default color to what'd you say, red?

‍

[Sara] No.

‍

[McGuire] The reason we're switching to red though is just to demonstrate that these changes... It's not the obvious thing when you switch from 333 to black. So just switching to red for a second, we can see, because of text inheritance, unless we've set a more specific color on specific text elements, they will inherit those changes. So we can see that that's affecting the heading. We can see it's affecting the paragraph, these headings. So you want to change that to a pure black color.

‍

[Sara] Yes.

‍

[McGuire] All right.

‍

[Sara] Let's move on to number six.

‍

[McGuire] All right, number six.

‍

[Sara] We want to have the larger paragraph here. We want to increase the size.

‍

[McGuire] So the hero paragraph, by default, it's inheriting from the body. So if we go to the body, we can see 14 pixels and if we go to hero paragraph, it's also 14. In fact, if we click that amber indicator, we could see that value is coming from Body all pages. Two things to note, we can absolutely change this. So we want to do something like 20 or 22.

‍

[Sara] Or 16.

‍

[McGuire] 16. But something to note, it's still 20. 20 pixels line height from Body all pages.

So we could do what we did in the previous one and use that line height example. So with body selected, let's change our line height to 1.2, 1.4 for paragraphs, 1.4 unitless. And now we don't have to set that manually so when we change our size on anything like this, it'll take that 1.4 into account. So you said 16?

‍

[Sara] Perfect.

‍

[McGuire] All right.

‍

[Sara] All right, number six, done. Let's move on to number seven.

‍

[McGuire] Number seven.

‍

[Sara] And we actually need to scroll down this page.

‍

[McGuire] All right.

‍

[Sara] So, I want to center the trusted by.

‍

[McGuire] All right. Do you want to get rid of that colon?

‍

[Sara] Yeah, let's do that.

‍

[McGuire] Let's do it.

‍

[Sara] Perfect. Number seven done. Let's go on to number eight.

‍

[McGuire] This is incredible progress.

‍

[Sara] If we look at these logo, these are not really balanced. So we want to have a-

‍

[McGuire] You're saying optical balance of them.

‍

[Sara] Add an optical balance, exactly.

‍

[McGuire] All right, United Federation of Planets over here. ESA over here. Maybe Space and Avenue 5 can be here.

‍

[Sara] Mhmm. Yeah

‍

[McGuire] How's that feel?

[Sara] Much more balanced.

‍

[McGuire] Okay. That's eight.

What about number nine?

‍

[Sara] Let's scroll down to the form because the success and error message did not look great.

‍

[McGuire] All right, we'll go down to the form. In fact, we can collapse all of these so we can just see our sections cleanly. Go in here, go into the container.

‍

With our form blocks selected we'll go over to element settings and you're talking success.

‍

[Sara] Exactly.

‍

[McGuire] And error state. So these look pretty good.

What do you want to change?

‍

[Sara] It's a little bit blocky.

‍

[McGuire] Blocky?

‍

[Sara] So let's decrease the padding top and bottom.

‍

[McGuire] Decrease padding.

‍

[Sara] Yes.

‍

[McGuire] Uhh…how about 13?

‍

[Sara] Sure. Let's go to error state.

‍

[McGuire] All right. With our form block selected, we'll go over to the error state.

‍

[Sara] Looks pretty good. That's it for desktop, let's go to tablet.

‍

[McGuire] All right, tablet.

‍

[Sara] Yes, and scroll up to the logo section.

‍

[McGuire] Logo section in tablet.

‍

[Sara] Yes. It's a little bit tight here, so I actually want to have it on two rows.

‍

[McGuire] Okay. We'll go into edit that grid. So again, we can go in right here to edit that grid. Or with the logo holder selected, we can go into edit grid and we can delete three columns, any three columns, and it'll make it a three column, but two row layout. How's that look?

‍

[Sara] Yeah, looks good.

‍

[McGuire] All right.

‍

[Sara] That's it for number 10. Let's do 11. So go to the card section.

‍

[McGuire] Okay. What do you want in the card section?

‍

[Sara] I want the gap of the grid to be the same as the form.

‍

[McGuire] That's really intense, the way you said that, but it's a really good note. So let's go in and...

‍

[Sara] Let's do it.

‍

[McGuire] Change the gap to make it so the form

has a gap of 10.

‍

[Sara] 10.

‍

[McGuire] So you want this grid. So we'll go to edit this grid, the feature grid, to also have a gap of 10.

‍

[Sara] It looks good.

‍

[McGuire] All right.

‍

[Sara] All right, that's 11.

‍

[McGuire] What's 12?

‍

[Sara] Scroll up again.

‍

[McGuire] Scroll up where?

‍

[Sara] To the navbar.

‍

[McGuire] Navbar, what do we got?

‍

[Sara] So you can see that the spacing on the left and right side here is inconsistent.

‍

[McGuire] That's right.

‍

[Sara] So we want to even that out.

‍

[McGuire] So there's a couple things going on here. Number one, calendar does not look vertically aligned within this. So, even in desktop, let's take a look at what's going on.

‍

So 14, we can increase that to maybe 15.

See if that's a little more centered. And we'll go into tablet now and make sure... you're saying the left and right aren't aligned.

‍

[Sara] Yes.

‍

[McGuire] So, optically you're saying the right point of the icon is...

‍

So the distance from – let's hit escape here – the distance from the edge of the viewport to this part of the logo...

‍

[Sara] Exactly.

‍

[McGuire] is far less than the distance between this edge of the viewport and this icon right here. So, this space on the left is, let's see, 30. This space on the right is also 30, but we have this menu button. So with the menu button selected, we could just subtract how much?

‍

[Sara] Let's subtract 18.

‍

[McGuire] So we're kind of undoing that margin.

[Sara] Yeah.

‍

[McGuire] But, if we look even with this right here, we see this extra few.

‍

[Sara] Yeah, let's do 19. Yeah, you're right.

‍

[McGuire] So minus 21.

‍

[Sara] Sure.

[McGuire] You said 19. Can we compromise?

‍

[Sara] Let's do 20.

‍

[McGuire] Okay, so…minus 20.

‍

[Sara] That's it for 12. Let's go to mobile. Scroll down to the form.

‍

[McGuire] Form.

‍

[Sara] Yes. And you can see the submit button is a little bit tight to the form.

‍

[McGuire] Got it.

‍

[Sara] So we need to increase this margin there.

‍

[McGuire] To what? 20?

‍

[Sara] Yep... 21.

‍

[McGuire] 21. I think 23 so let's compromise at 22.

‍

[Sara] All right. That's 13. Let's go to 14.

‍

[McGuire] 14. Let's do it.

‍

[Sara] Okay. We're actually going to go into accessibility now. We're going to put alt text on all the images.

‍

[McGuire] Now, there's a few ways to add alt text to images. So, for example, with this image selected, if we click this image, we go to the element settings here, we can go in and choose in our alt text a custom description. We can say...

‍

[Sara] "Calendar".

‍

[McGuire] "Calendar app interface, showing time travel details". And so we can have a custom description for alt text. But the other way we can do this, and this is really helpful, especially if we're using things like the logo multiple times, not just on a page, but in a site, we can go over to our assets panel, and we can take a look at things like the logo. So if we go to the calendar logo, we can press the settings button right here. And when we change it on the asset, if we say Calendar or Calendar logo, when we change that, it now affects all instances of that asset. So, if we were to go in and look at the alt text now on this logo, or if we were to do it on this logo, they would both have the same alt text.

‍

Now, before we add the others, why are we adding alt text?

Why is it important?

‍

Well, it's not just important for search engine optimization, which it is, so that search engines can pick up content that might be in an image or pick up the meaning of that image. But it's also really important for anyone who's using or navigating through the web or this site using something like a screen reader. So it's really important because if you're using a screen reader and you come across something like this, it won't know the content of this image. So anything that has meaning, whether it's a logo showing an endorsement or a trusted by, if it's any meaningful content on the page, it needs to have alt text if it's stored in an image. Now we're going to speed through this in post so you don't have to sit through us typing out each of the descriptions manually, but we're writing meaningful descriptions for each of the image assets.

‍

[Sara] All right, so that's 14. Let's clean up the classes and go to number 15.

‍

[McGuire] So, we'll clean up classes so we'll go to our style manager and we'll clean up our unused classes, we'll hit remove. And then you said clean up classes and go to 15?

‍

[Sara] All right. 15 done.

‍

[McGuire] What is 15?

‍

[Sara] No, 15 done. Let's go to 16.

‍

[McGuire] That's it? This is great progress.

‍

[Sara] So that's SEO and open graph.

‍

[McGuire] So assuming page settings is going to encapsulate most of this.

‍

[Sara] Yes.

‍

[McGuire] In our Pages panel, we can go to pages and we can go to our one static page here, this of course, is our homepage. We can go to the settings for this page. So the page name internally here is Home, that's fine. There are a few things to change, especially in terms of how this will show up in a search engine. So we'll go to the title tag and say, “Calendar: The app... The one app you need to rule time and space”. And the meta description, of course we can steal for right now let's save this let's save our changes there. We can steal the hero paragraph just for this example. We can always change this later. But back into the page settings, let's paste that into our meta description. Now, why is this important?

‍

Why is SEO important, and what does SEO stand for? Of course, it's "search engine optimization". But the really important reason we want to fill this out is we want to display what our preference is to search engines.

‍

So our preference to search engines is to display: "Calendar: The one app you need to rule time and space”. And this meta description, this description underneath. Now we can optimize this later, but this is a good starting point. That leads us, of course, to our open graph settings. "Open graph" or OG image, OG title, these let us define what's going to happen when you paste and share this on a lot of social platforms like Facebook, like Twitter. So we can write unique titles for this. We could write, "Hello Sara".

‍

[Sara] Hi.

‍

[McGuire] Yes.

‍

[Sara] Yeah.

‍

[McGuire] Or we can say same as SEO tag, which we can do to save some time right now. But keep in mind if we don't want that duplicated, we want something unique for a social share, we can uncheck “same as” and write our own custom descriptions. But that is of course, our SEO settings and our open graph settings for this page so we hit save.

‍

[Sara] It looks a little bit dry.

‍

[McGuire] What looked a little dry?

‍

[Sara] Ahhh, just open graph

‍

[McGuire] You're thinking OG image.

‍

[Sara] Yeah. Mm-hmm.

‍

[McGuire] Let's go in and grab.

Let's say we want to use our app image right here.

‍

[Sara] Exactly.

‍

[McGuire] We can actually go in and this little link icon, let's copy the little link icon to the clipboard. We'll close out and we can go back into pages, go back into settings, and we can paste where it says Open graph, image URL.

‍

[Sara] Paste.

‍

[McGuire] Paste. Now this will be shared on social. All right, let's save our changes.

‍

[Sara] All right.

‍

[McGuire] What do we have next?

‍

[Sara] Nothing. That's it.

‍

[McGuire] That is it. How many things did we address?

‍

[Sara] 16.

‍

[McGuire] Doesn't matter because our site is ready to go.

‍

Up next, we're going to publish our site for the world to see. But before that, we'll cut to black, but keep the audio rolling.

‍

[Sara] Why would we do that?

‍

[McGuire] Do what?

‍

[Sara] This. Cut to black and keep the audio.

‍

[McGuire] This is way more engaging than the stuff we were doing before.

‍

[Sara] You're probably right.

‍

[Grímur] I am so grateful because you watching these videos or taking our courses or reading our documentation on Webflow University and just interacting with us is just such a privilege for me.

‍

And I’m so grateful for being a part of a team that is enabled to deliver this – this content – this education to you so you can make the most out of it.

‍

And I'm just super, super thankful to be a part of it. So continue to do your best and we’ll continue to do our best.

‍

Read the full article

Download assets

Clone this project

Read the full article

Site build: Publishing the site

We’ve created our site, so let’s get it live online! In this lesson, we’ll connect our site to a custom domain, set a default domain, and publish our site to the web for the world to see (and we might publish a couple more times, too).

[McGuire] In this lesson, we're going to connect to a custom dot com. So we can publish our site on the web. We'll break this down into three parts. We'll add our custom domain, we'll choose our default version of that domain, and of course, we'll publish for the world to see. Let's jump right in.

Previously we had 15…

‍

[Sara] 16

‍

[McGuire] 16 steps? So this is a lot less.

‍

[Sara] Three.

‍

[McGuire] Three. What..what is that in percentage?

‍

[Sara] Uh, 81.25.

‍

[McGuire] That is exactly

‍

[Sara] Yeah.

‍

[McGuire] Correct. This is 81.25% fewer steps than the previous lesson.

‍

[Sara] Perfect. Let's do it.

‍

[McGuire] Let's jump right into part one, and of course that's going to be connecting our custom domain. So from our project, this is the project we just design reviewed. Let's go in

up to our project, our site settings here. And from here, let's go over to publishing and we're going to add our dot com. Now, we've already purchased our dot com on GoDaddy.

‍

Of course, there are tons of different registrars. You may already have a domain, you may need to purchase a new domain. We have all those options. And of course we have specific guides for so much of this on Webflow University, so check that out, if you want specific step-by-step instructions for your domain registrar. For us, we're gonna go the easy route and we're going to add a custom domain that we already purchased from GoDaddy.

And that is getcalendarapp.com.

‍

[Sara] app.com

‍

[McGuire] dot com. That's it. And when we press add domain, we will see we have the option to single click with GoDaddy. We'll use that option, and of course we'll press connect. And that's it. So immediately that was successfully connected, but immediately we get a notification saying, subdomain indexing disabled. What does that mean? What is basically saying? And we can just press, okay and dismiss this for now because this is usually 99.999% of the time the behavior we want.

‍

But just to cover specifically what this means, if we go to edit our SEO settings for this site, we can see that this switch is turned on. Disable webflow subdomain indexing, it's switched on. So what this means is there are two versions of our site. If we think about it, we have the webflow.io, our staging domain that we have by default, we can still use that, but the second version is our dot com. We'll actually combine these in just a moment, but the second version will be our dot com, our custom domain. What this is saying is we're going to disable, we're going to tell search engines to ignore the webflow.io version, the subdomain, the webflow.io subdomain version. The reason we're doing that is we don't want the search results showing up twice. We don't want two conflicting search results. So we're gonna leave that on and go back to publishing.

‍

That's step one. Let's move to step two. Set default. This will be the shortest step in history. Let's go and set the www version to

‍

[Sara] As the default.

‍

[McGuire] As the default. That's right. Now what this does is it says, if someone goes to get calendarapp.com or www.getcalendarapp.com, it'll take them to the www version. It'll route all traffic to the www version. That's part two.

‍

Let's move to the final step, which is publish. So up here in publish. We can get here from the dashboard where we are right now. We can get here, of course, from the Webflow designer as well, but we wanna make sure our new domain is checked, the get calendarapp.com domain. We'll check that and we can publish to both. We can publish to just one. for now we'll just publish to both and we'll press publish to selected domains.

‍

[Sara] It's done.

‍

[McGuire] Okay, so we're gonna check get calendar app.com.

‍

[Sara] Perfect.

‍

[McGuire] We'll just press open a new window, and that is our published site. Let's test it out. Let's scroll through. Features for every need. Daily Digest. AI Assistant. Checker. Time Zoner. Request…

‍

[Sara] Is there a reason why you're more excited about this now than when you actually wrote it?

‍

[McGuire] Because it's live and the world can see it getcalendarapp.com. It seems like we're actually pitching a totally fictional app right now, but it's,

‍

[Sara] Yeah. That's what we do. We need to do a marketing moment.

‍

[McGuire] Okay, let's have our marketing moment.

‍

[Sara] (Laughs) It looks good.

‍

[McGuire] It looks great. So we can, of course, at any time, we can go back to the Webflow Designer. We can go back to the Designer and we can make changes. So for instance, let's say this is a little tight here. We want to add some more margin on the bottom. Let's say 20 here and 20 there. That's fine. Maybe a little more. 25. Just make a change like this. At any time, we can go up and publish to our domains, and when we do, we can swap back over to the other tab and hit refresh and it animated. But you could see those changes are live. Let's prove it a little bit differently. Let's change the big heading to a different color. Let's make it solid.

‍

[Sara] Blue.

‍

[McGuire] All right, let's do blue. This is really not a good look, but let's do it anyway. We'll press publish to selected domains to publish our site, and back to the other tab. Refresh. Let's see if it's blue.

It's blue, just like that single click.

[Sara] So it looks like you had an issue on your page there when you were clicking publishing.

‍

[McGuire] Let's go back. One issue to improve on this page. Let's click it. Then we go over to the audit panel. Ooh, we're missing alt text. What are we missing? Alt text, AI assistant. We must have missed this.

‍

[Sara] Yeah.

‍

[McGuire] Let's go back. The text is using the alt text from the asset. Find the alt text in the asset panel and add descriptive copy. Or mark it as decorative. That's good.

‍

Let's press find it for me. And looks like when we were moving very quickly, we didn't type it in. So we're going to type. Calendar app showing AI assistant feature with a sync point and time shift.

‍

[Sara] Perfect.

‍

[McGuire] Of course, this is much more meaningful when the app is real. But that is it. Up next, we're going to talk next steps and recap what we've learned together. This is critical. But before we do, let's quickly recap what we just did here. We added our custom domain. We set our default domain to the www version, and then of course, we published for the world to see. Then we made, wait a second. Hold on. The heading is still blue. We need to go back and change this real quick. Let's close everything out. Go back to the top. Let's revert that change going from blue. Let's actually just remove, reset that property, publish again. Hopefully for the last time in this lesson. But that is connecting a custom domain to Webflow.

‍

[Grímur] Share your site. Whether you’re building a landing page, a portfolio, or even a full-blown marketing site you built for your business or a client’s business, we want to see it. Share on Twitter using #webflow101 and we’ll be sharing our favorite sites on social.

Read the full article

Download assets

Clone this project

Read the full article

Final thoughts & certification

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?

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

Read the full article

Download assets

Clone this project

Read the full article

Additional layout learning

Read the full article

Download assets

Clone this project

Read the full article

Quick Stack

Use the Quick Stack element to structure content on your site.

The Quick Stack element in Webflow is one of the fastest and the most powerful ways to build the same kind of production-grade layouts you see from top developers all over the world.

It takes most of the power from CSS grid and from flexbox, and it exposes that power in a direct, visual interface.

In this lesson, we’re gonna talk about the anatomy of a Quick Stack element (how it works), then we’ll add stuff inside so we can build a layout, and then we’ll dig into a really important consideration: when should we use CSS grid or flexbox versus when should we use Quick Stack.

And let’s start there with an intro to Quick Stack. In fact, you can find Quick Stack right in the Add panel, and when you add it to your canvas – there’s a few things to notice.

First, you have presets. When you first add a Quick Stack element, you can apply presets to give you a headstart.

Second and maybe most obvious, is that it sort of looks like a grid. And that’s the secret: that’s all it is by default. But notice how regardless of how many rows or columns we have, a Quick Stack element comes pre-populated with divs already inside, these are the cells. And these cells? They’re just divs set to flex.

So is Quick Stack a top-secret element with proprietary whatever that threatens the very fabric of the internet? No. It’s just a grid filled with divs set to flex. But here's why that’s important.

Whatever you’re doing with Quick Stack, whether you’re using a preset, adding or removing columns, the cells automatically take care of themselves. You don’t have to manually manage the cells. And that takes us to Part 2: adding stuff to a Quick Stack.

At any time, we can drag stuff; we can add whatever we want right inside these cells. No more spinning up a div or a link block or whatever just to group stuff in a cell. And that’s the big point: because you’re not having to manually manage divs, you can do stuff like merge these cells to create essentially whatever layout you want.

And that leads us to Part 3: creating essentially whatever layout you want. Also known as flexbox vs. grid vs. Quick Stack.

So flexbox, put simply, is great for building powerful, one-dimensional layouts. And this is used ALL over the web, and it essentially works like this: you set the display property of a parent element, you set its display to flex. And by doing that, you can now align and justify the children of that flex parent however you want. You can tell that parent element to wrap child elements just like you’d do with maybe a tags layout, and, if you want to break the rules of the parent, you can always apply more properties - this time on a child of the parent. And that way you can get them to override or break those rules.

But that’s flexbox. Then why do we have CSS grid? Grid is generally great for building two-dimensional layouts. If you can draw a grid around it or through it, chances are, it’s pretty straightforward to build it as a grid. In CSS grid, the columns and the rows: these 2 are guides. When you add elements inside a grid, the elements take up the next available cell. But those cells are just guides; there’s not actually anything there, this is different from what we showed in Quick Stack.

In fact, if you do a sort of pros and cons list for grid, the pros are that these guides give you a ton of flexibility for auto layouts, where you want things automatically taking up the next cell. And also for manual layouts, things like overlapping content. And since Grid, just like flex,

since grid is a display property, you can apply it — you can apply grid to things like Collection lists for dynamic data. The cons are you have to manually add divs whenever you want to group content together in a cell, and most layouts need to be built from scratch.

So that’s flexbox and grid – two industry-standard display properties in CSS. Now for Quick Stack. And even though Quick Stack is combining the power of flexbox and grid into one thing, it’s not a display property; it’s an element made up of other elements. And that’s the key to why this is a big shortcut. Most layouts call for this type of setup.

Apple does this all the time. The parent element here is a grid, and each of these “cells”? They’re divs set to flex. That’s exactly what Quick Stack preconfigures by default.

So when experimenting with Quick Stack, chances are, you’ll see a pretty dramatic increase in the speed with which you can develop layouts.

So when you look at all these layouts here, they may look like a great candidate for flex, which by the way they are. These might look like a great candidate for grid, which they are. But a lot of these can also be built faster with Quick Stack.

And if you’re looking for a best practice, it helps to start most of these 2-dimensional layouts with Quick Stack. You can always build a lot of these 1-dimensional layouts using flex; you can even use the V flex and H flex layout elements which are just divs that already have that direction set.

But when you’re looking to push the boundaries a bit further, or if you have a specialized layout that requires something like CSS grid? That’s when to dig deep there.

Put simply: all these options? You can often build the same thing many different ways and that’s a huge advantage to learning visual development or code. But by unlocking some of these shortcuts, particularly in Quick Stack, you’re much better equipped to build production-grade layouts faster and more efficiently than ever before.

But that’s an overview of Quick Stack in Webflow.

Read the full article

Download assets

Clone this project

Read the full article

V Flex and H Flex

Use the V Flex and H Flex elements for more efficient layout design.

Read the full article

Download assets

Clone this project

Read the full article

Webflow 101

Start off the year with a 21-day portfolio challenge

Summary

Course progress

The challenge

Ready to get certified?

How do I compete?

The challenge

Check out the new Figma to Webflow plugin

Ready to get certified?

Ready to get certified?

Course outline

Related courses

Freelance web design boot camp

21-day design portfolio course

Figma to Webflow

Landing page generator for Ryan Reynolds

Webflow 101

Intro to Webflow 101

Intro to the box model

Intro to HTML

Intro to CSS

Intro to Webflow

Recent updates to the Webflow Designer

Site build: Hero

Site build: Navigation

Site build: Logos

Site build: Cards

Site build: Form

Site build: Footer

Site build: Responsiveness

Site build: Interactions

Site build: Design review & accessibility

Site build: Publishing the site

Final thoughts & certification

Additional layout learning

Quick Stack

V Flex and H Flex

Requirements

Related courses

Freelance web design boot camp

Ultimate web design course

Moving your business online

Web elements

Didn’t find what you’re looking for?

Discuss your build

Give us feedback!

Contact support

Community forum

Contact support

There's more coming

Product

Company

Learn & Get help

Social