Web Structure

Web Structure

New

Intro to HTML & CSS

Intro to HTML & CSS

New

3:38

HTML Structure

HTML Structure

New

1:55

The Box Model

The Box Model

New

1:54

Responsive Design

Responsive Design

New

Intro to Responsive Design

Intro to Responsive Design

New

2:21

CSS Layout

CSS Layout

New

Intro to Web Layout

Intro to Web Layout

New

2:27

Intro to Flexbox

Intro to Flexbox

New

2:27

Grid layouts overview

Grid layouts overview

New

4:18

Width & Height Units

Width & Height Units

New

3:59

Positioning Overview

Positioning Overview

New

1:48

Intro to 3D

Intro to 3D

New

2:25

Images & Colors

Images & Colors

New

Image Resolution

Image Resolution

New

3:28

Image File Types (GIF, PNG, SVG, JPEG)

Image File Types (GIF, PNG, SVG, JPEG)

New

2:22

Color values (HEX, RGBA, color names)

Color values (HEX, RGBA, color names)

New

3:22

Dynamic Content

Dynamic Content

New

Intro to Dynamic Content

Intro to Dynamic Content

New

1:36

SEO

SEO

New

Intro to Paid vs. Organic Search

Intro to Paid vs. Organic Search

New

1:34

Intro to 301 Redirects

Intro to 301 Redirects

New

2:39

new course
CSS grid landing page tutorial (36min)

Lesson info

Lesson info

If you're new to web design, it's vital that you understand the differences between HTML and CSS and how they work together to present web content (HTML) and control how it's displayed in browsers (CSS). In this video, you'll gain that understanding, plus learn to use native browser tools to inspect and make changes to websites, and learn how Webflow can help you produce professional websites without mastering code.

Explore this project

Want to dig into the project featured in this video and see how everything is put together? We've included the full project we used when making this lesson, and we've shared the link right under this very paragraph.

View and clone this projectDownload lesson assets
Clone this projectDownload project assets

Transcript

When you visit a webpage, when you’re looking at the actual content? What you see on the screen is your browser making decisions based on what's in your code. And what happens to all this code? Well, the browser uses it to render the webpage. It uses this information to display what everyone ends up seeing when they load up the page.

And sometimes the best way to get a feel for this type of interaction is to start from a website you already know. Most browsers will let you go in and inspect the code for yourself. And when you change that code? When you go in and make a change? The content in your browser changes as well. It’s enormously fun to test that relationship between the code and the rendered content, but of course, when you refresh, all your hard work goes away, because you're only making the change locally. You’re only changing it in your browser.

A MacBook Pro, a Surface Studio, an iPhone, an Atari 2600, an iPad.....What do four of these have in common? They use this type of code to render web content. And so does every modern computing device.

And with this type of code, there are two primary components that we're going to start with: HTML & CSS.

HTML is generally used for content: it tells the browser what’s on the page. Headings, paragraphs, links, images — you name it. And back in the day, we used to style all this content by hand — all sorts of simple things, like if we wanted to change our font family, or color, or size — we used to style it inline — inside the HTML.

And if we wanted other elements to look like that—if we wanted something else to have those same properties, we'd have to copy that code again. And again. And again. And you want to make a change or add something else? Well now you have to go through each inline style by hand...not very efficient.

Enter CSS: the greatest invention in the history of the world, except for any invention that might be better. Like the wheel. CSS takes all that styling information — colors and borders and size, positioning, typography, so much more — it moves all that info into a separate style sheet. That way, any of those elements in our HTML? They can call that information — elements can reference those styles…any time. Make a change to that style? It affects any element that’s using that style.

So you have your HTML: everything dealing with content…and, you have CSS, which we can use to style that content.

And the relationship between HTML & CSS is that simple.

And back in the early days of the web, we only had to know the most basic tags and attributes, because that’s all the web was back then. Time went by, and the internet really started growing up. Devices changed, and the way we interacted with the web became more personal.

And as all that happened, it became necessary to retool. As the possibilities increased for what we could build as designers and developers, so did the complexity of everything we had to manage behind the scenes.

Now what does this have to do with Webflow? And why all this talk about…HTML & CSS? And why are we covering them? Well, because HTML & CSS serve as the primary foundation. This is the starting point from which we can build anything.

What we're covering is a way to move a lot faster and more efficiently. By visually creating and manipulating this content, we can directly interact with our HTML and CSS and everything else. And even if we’re proficient in all these areas, we’re not having to spend so much of our time. Instead of sketching and outputting prototypes, and going through step, after step, after step in the development process, we’re outputting production-ready code. So you can take even the craziest ideas and make them a reality.