When the first web page ever went live in 1991, 1
this is how it looked like. It's still live, 2
if you want to check it out. This first web page was made by the inventor of World Wide Web, Tim Berners-Lee. 3
In CERN which is a Nuclear Research Laboratory in Switzerland. 4
Surprisingly not really related to computers. 5
I've actually been to CERN. 6
I was on this business trip from my job at a time and I was taken to this exact room where the World Wide Web 7
was created by Tim Berners-Lee. And the room is completely unassuming. 8
You wouldn't really think that anything creative came out of it. It just looks like a regular chemistry 9
or like a physics lab of a regular high school. 10
And I was told this story: apparently when Tim submitted his paper about World Wide Web, 11
his supervisor who wrote down on the paper, when he was reviewing saying "Vague, but interesting". I'm 12
sure at the time none of them had any idea what the websites and the Internet would end up looking 13
today. The very first web page was made using HTML and until today it's still what every website is 14
made off. 15
As we learn Webflow, we'll actually need to learn how HTML and CSS work. 16
We're not going to learn how to code, but we will learn the logic behind. Because everything in Webflow 17
is sort of based on that logic. HTML is simply the content of the web page, like a headline, paragraph of text, 18
or image. And each piece of this content has a label to it, which tells the browser if this is 19
a headline, a paragraph, a link or something else. 20
They call this a Tag. HTML on its own 21
it's not very pretty. 22
It has a vertical layout. 23
Everything is stacked one after another. 24
You can't really overlap elements, or create grids and column layouts. 25
It's sort of like a text document. Where all the content flows in a vertical direction one after the other. 26
Web design back then didn't really exist. 27
There was not much designing involved. But then came CSS and Web sites started to have a whole different 28
look. 29
CSS is the style of the website. 30
It's where we define how each of those HTML elements should look like. What size they should be, what 31
font, what color. How they should be laid out on the page, if they should have any hover interactions 32
and so on. A web page with just HTML looks like a skeleton. 33
And after applying CSS to it, it's like an entire person. In Webflow we add HTML elements from the Elements 34
Panel. 35
And if we take a look at the Code export, we will see that 2 HTML elements have been added 36
there too. H1 tag for the headline and P tag for the paragraph. 37
These are default, unstyled HTML elements. 38
If you check the CSS tab, you'll see it's empty. 39
We haven't added any style to our elements yet. The style is added from the right on the Styles panel. 40
We haven't written any code, or written any CSS ourselves. But Webflow has done this for us. 41
Now CSS tab has some style information in it. 42
It's basically an instruction that says: "If an element has a name heading, make it red color and 58 pixels 43
big". 44
That simple. 45
This is the incredible power of Webflow. 46
We're building our website completely from scratch. 47
No stupid templates and ugly themes. 48
We have the full control over building a completely unique website and we don't have to code any of it. 49
Webflow writes the code for us.