0
1
00:00:00,180 --> 00:00:03,780
When the first web page ever went live in 1991,
1

2
00:00:03,780 --> 00:00:06,210
this is how it looked like. It's still live,
2

3
00:00:06,210 --> 00:00:12,360
if you want to check it out. This first web page was made by the inventor of World Wide Web, Tim Berners-Lee.
3

4
00:00:12,360 --> 00:00:17,120
In CERN which is a Nuclear Research Laboratory in Switzerland.
4

5
00:00:17,130 --> 00:00:20,190
Surprisingly not really related to computers.
5

6
00:00:20,250 --> 00:00:21,320
I've actually been to CERN.
6

7
00:00:21,330 --> 00:00:26,070
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

8
00:00:26,130 --> 00:00:33,170
was created by Tim Berners-Lee. And the room is completely unassuming.
8

9
00:00:33,170 --> 00:00:40,200
You wouldn't really think that anything creative came out of it. It just looks like a regular chemistry
9

10
00:00:40,200 --> 00:00:43,510
or like a physics lab of a regular high school.
10

11
00:00:43,590 --> 00:00:49,380
And I was told this story: apparently when Tim submitted his paper about World Wide Web,
11

12
00:00:49,500 --> 00:00:56,280
his supervisor who wrote down on the paper, when he was reviewing saying "Vague, but interesting". I'm
12

13
00:00:56,280 --> 00:01:02,370
sure at the time none of them had any idea what the websites and the Internet would end up looking
13

14
00:01:02,730 --> 00:01:08,970
today. The very first web page was made using HTML and until today it's still what every website is
14

15
00:01:08,970 --> 00:01:09,630
made off.
15

16
00:01:09,630 --> 00:01:13,700
As we learn Webflow, we'll actually need to learn how HTML and CSS work.
16

17
00:01:13,770 --> 00:01:18,380
We're not going to learn how to code, but we will learn the logic behind. Because everything in Webflow
17

18
00:01:18,390 --> 00:01:24,240
is sort of based on that logic. HTML is simply the content of the web page, like a headline, paragraph of text,
18

19
00:01:24,240 --> 00:01:29,910
or image. And each piece of this content has a label to it, which tells the browser if this is
19

20
00:01:29,910 --> 00:01:33,150
a headline, a paragraph, a link or something else.
20

21
00:01:33,150 --> 00:01:35,850
They call this a Tag. HTML on its own
21

22
00:01:35,880 --> 00:01:37,050
it's not very pretty.
22

23
00:01:37,050 --> 00:01:38,800
It has a vertical layout.
23

24
00:01:38,880 --> 00:01:41,410
Everything is stacked one after another.
24

25
00:01:41,430 --> 00:01:45,600
You can't really overlap elements, or create grids and column layouts.
25

26
00:01:45,630 --> 00:01:51,650
It's sort of like a text document. Where all the content flows in a vertical direction one after the other.
26

27
00:01:51,720 --> 00:01:54,090
Web design back then didn't really exist.
27

28
00:01:54,090 --> 00:02:00,900
There was not much designing involved. But then came CSS and Web sites started to have a whole different
28

29
00:02:00,900 --> 00:02:01,470
look.
29

30
00:02:01,470 --> 00:02:03,480
CSS is the style of the website.
30

31
00:02:03,480 --> 00:02:09,270
It's where we define how each of those HTML elements should look like. What size they should be, what
31

32
00:02:09,270 --> 00:02:15,060
font, what color. How they should be laid out on the page, if they should have any hover interactions
32

33
00:02:15,090 --> 00:02:18,950
and so on. A web page with just HTML looks like a skeleton.
33

34
00:02:19,050 --> 00:02:25,050
And after applying CSS to it, it's like an entire person. In Webflow we add HTML elements from the Elements
34

35
00:02:25,050 --> 00:02:25,410
Panel.
35

36
00:02:37,050 --> 00:02:42,280
And if we take a look at the Code export, we will see that 2 HTML elements have been added
36

37
00:02:42,280 --> 00:02:46,960
there too. H1 tag for the headline and P tag for the paragraph.
37

38
00:02:46,960 --> 00:02:49,630
These are default, unstyled HTML elements.
38

39
00:02:49,630 --> 00:02:52,960
If you check the CSS tab, you'll see it's empty.
39

40
00:02:52,960 --> 00:03:03,870
We haven't added any style to our elements yet. The style is added from the right on the Styles panel.
40

41
00:03:03,920 --> 00:03:08,870
We haven't written any code,  or written any CSS ourselves. But Webflow has done this for us.
41

42
00:03:08,870 --> 00:03:12,180
Now CSS tab has some style information in it.
42

43
00:03:12,170 --> 00:03:19,640
It's basically an instruction that says: "If an element has a name heading, make it red color and 58 pixels 
43

44
00:03:19,640 --> 00:03:19,960
big".
44

45
00:03:20,060 --> 00:03:20,810
That simple.
45

46
00:03:20,810 --> 00:03:23,090
This is the incredible power of Webflow.
46

47
00:03:23,090 --> 00:03:26,300
We're building our website completely from scratch.
47

48
00:03:26,330 --> 00:03:28,580
No stupid templates and ugly themes.
48

49
00:03:28,580 --> 00:03:34,190
We have the full control over building a completely unique website and we don't have to code any of it.
49

50
00:03:34,190 --> 00:03:36,580
Webflow writes the code for us.