Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,180 --> 00:00:03,780
When the first web page ever went live in 1991,
2
00:00:03,780 --> 00:00:06,210
this is how it looked like. It's still live,
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.
4
00:00:12,360 --> 00:00:17,120
In CERN which is a Nuclear Research Laboratory in Switzerland.
5
00:00:17,130 --> 00:00:20,190
Surprisingly not really related to computers.
6
00:00:20,250 --> 00:00:21,320
I've actually been to CERN.
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
8
00:00:26,130 --> 00:00:33,170
was created by Tim Berners-Lee. And the room is completely unassuming.
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
10
00:00:40,200 --> 00:00:43,510
or like a physics lab of a regular high school.
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,
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
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
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
15
00:01:08,970 --> 00:01:09,630
made off.
16
00:01:09,630 --> 00:01:13,700
As we learn Webflow, we'll actually need to learn how HTML and CSS work.
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
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,
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
20
00:01:29,910 --> 00:01:33,150
a headline, a paragraph, a link or something else.
21
00:01:33,150 --> 00:01:35,850
They call this a Tag. HTML on its own
22
00:01:35,880 --> 00:01:37,050
it's not very pretty.
23
00:01:37,050 --> 00:01:38,800
It has a vertical layout.
24
00:01:38,880 --> 00:01:41,410
Everything is stacked one after another.
25
00:01:41,430 --> 00:01:45,600
You can't really overlap elements, or create grids and column layouts.
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.
27
00:01:51,720 --> 00:01:54,090
Web design back then didn't really exist.
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
29
00:02:00,900 --> 00:02:01,470
look.
30
00:02:01,470 --> 00:02:03,480
CSS is the style of the website.
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
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
33
00:02:15,090 --> 00:02:18,950
and so on. A web page with just HTML looks like a skeleton.
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
35
00:02:25,050 --> 00:02:25,410
Panel.
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
37
00:02:42,280 --> 00:02:46,960
there too. H1 tag for the headline and P tag for the paragraph.
38
00:02:46,960 --> 00:02:49,630
These are default, unstyled HTML elements.
39
00:02:49,630 --> 00:02:52,960
If you check the CSS tab, you'll see it's empty.
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.
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.
42
00:03:08,870 --> 00:03:12,180
Now CSS tab has some style information in it.
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
44
00:03:19,640 --> 00:03:19,960
big".
45
00:03:20,060 --> 00:03:20,810
That simple.
46
00:03:20,810 --> 00:03:23,090
This is the incredible power of Webflow.
47
00:03:23,090 --> 00:03:26,300
We're building our website completely from scratch.
48
00:03:26,330 --> 00:03:28,580
No stupid templates and ugly themes.
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.
50
00:03:34,190 --> 00:03:36,580
Webflow writes the code for us.
5152
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.
Afrikaans
Albanian
Amharic
Armenian
Azerbaijani
Basque
Belarusian
Bengali
Bosnian
Bulgarian
Catalan
Cebuano
Chichewa
Chinese (Simplified)
Chinese (Traditional)
Corsican
Croatian
Czech
Danish
Dutch
English
Esperanto
Estonian
Finnish
French
Frisian
Galician
Georgian
German
Greek
Gujarati
Haitian Creole
Hawaiian
Hungarian
Icelandic
Indonesian
Irish
Italian
Japanese
Kazakh
Khmer
Korean
Kurdish (Kurmanji)
Kyrgyz
Lao
Latvian
Lithuanian
Luxembourgish
Macedonian
Malagasy
Malay
Maltese
Maori
Mongolian
Myanmar (Burmese)
Nepali
Norwegian
Pashto
Polish
Portuguese
Romanian
Russian
Samoan
Serbian
Sesotho
Shona
Sinhala
Slovak
Slovenian
Somali
Spanish
Swahili
Swedish
Tajik
Thai
Turkish
Ukrainian
Urdu
Uzbek
Vietnamese
