Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,690 --> 00:00:03,560
Let's start by taking a look
2
00:00:03,560 --> 00:00:06,070
at the project that we're gonna be designing
3
00:00:06,070 --> 00:00:07,750
throughout this section,
4
00:00:07,750 --> 00:00:10,853
as we learn about all the different web design rules.
5
00:00:12,540 --> 00:00:14,640
And just like in the other sections,
6
00:00:14,640 --> 00:00:16,320
the first thing that we need
7
00:00:16,320 --> 00:00:19,400
is to get our starter files from the code
8
00:00:19,400 --> 00:00:21,523
that we downloaded in the very beginning.
9
00:00:22,360 --> 00:00:24,260
So here in the starter files,
10
00:00:24,260 --> 00:00:26,323
we need now this folder, Design.
11
00:00:27,610 --> 00:00:28,910
So for the first time,
12
00:00:28,910 --> 00:00:32,280
this project is not going to build on the previous one.
13
00:00:32,280 --> 00:00:35,800
So here you really need to go into your starter files
14
00:00:35,800 --> 00:00:37,693
and grab this folder here.
15
00:00:39,110 --> 00:00:41,670
So paste that wherever you are working,
16
00:00:41,670 --> 00:00:43,133
for me, it's the desktop.
17
00:00:44,420 --> 00:00:45,620
So close this down
18
00:00:46,700 --> 00:00:50,983
and then I'll just open a new VS code window.
19
00:00:52,200 --> 00:00:55,520
All right, and then you can click open here
20
00:00:55,520 --> 00:00:57,093
or also in the Menu Bar.
21
00:00:58,270 --> 00:00:59,833
You can use Open in there.
22
00:01:01,670 --> 00:01:05,683
So from the desktop, we want the Design folder.
23
00:01:06,860 --> 00:01:10,463
And so this is now our new project folder.
24
00:01:11,830 --> 00:01:15,600
So here we already have an index.html file
25
00:01:15,600 --> 00:01:18,690
and a style.css as well,
26
00:01:18,690 --> 00:01:20,580
along with a couple of images
27
00:01:20,580 --> 00:01:22,823
that we need for this project as well.
28
00:01:24,160 --> 00:01:26,610
Now what's different about this project is
29
00:01:26,610 --> 00:01:29,590
that this time I already coded all the HTML
30
00:01:29,590 --> 00:01:32,160
that we're gonna need for this project.
31
00:01:32,160 --> 00:01:33,650
So basically what we're going to do,
32
00:01:33,650 --> 00:01:35,490
as we go through the section,
33
00:01:35,490 --> 00:01:37,470
is to adjust the CSS
34
00:01:37,470 --> 00:01:40,450
and also learn some new CSS properties
35
00:01:40,450 --> 00:01:44,220
in order to apply these different web design rules.
36
00:01:44,220 --> 00:01:48,853
But now let's take a look by clicking here, on Go Live.
37
00:01:50,610 --> 00:01:54,500
And this is how our project looks like
38
00:01:54,500 --> 00:01:56,350
in the very beginning.
39
00:01:56,350 --> 00:01:59,150
So it's really just a bare bone webpage,
40
00:01:59,150 --> 00:02:01,020
everything in black and white
41
00:02:01,020 --> 00:02:03,040
and everything I did here was
42
00:02:03,040 --> 00:02:05,360
to simply apply some margins.
43
00:02:05,360 --> 00:02:08,770
And I also already built the layout.
44
00:02:08,770 --> 00:02:11,250
So what I want you to do after this video
45
00:02:11,250 --> 00:02:15,340
is to take 10 or 15 minutes to analyze this HTML
46
00:02:15,340 --> 00:02:18,003
and also the CSS that I wrote.
47
00:02:18,970 --> 00:02:23,350
So for example, here, we have this global reset as always.
48
00:02:23,350 --> 00:02:25,320
We have a container element
49
00:02:26,190 --> 00:02:30,413
and we have some CSS Grid here also applied to this page.
50
00:02:31,320 --> 00:02:33,880
So for example, here we have these 3 columns.
51
00:02:33,880 --> 00:02:36,923
And so there we use this grid-3-cols class.
52
00:02:38,600 --> 00:02:39,740
So this one here,
53
00:02:39,740 --> 00:02:43,160
so this is basically grid with 3 columns,
54
00:02:43,160 --> 00:02:44,943
so inside of this section.
55
00:02:46,320 --> 00:02:50,040
So yeah, so it's just a grid with 3 columns,
56
00:02:50,040 --> 00:02:51,220
as I was saying.
57
00:02:51,220 --> 00:02:54,533
So that's why we have to repeat 3 times, 1fr,
58
00:02:55,470 --> 00:02:57,903
so just as we learned in the previous section.
59
00:02:59,320 --> 00:03:00,520
Then here in the header,
60
00:03:00,520 --> 00:03:03,480
there is another grid with these 2 elements here,
61
00:03:03,480 --> 00:03:04,663
side by side.
62
00:03:05,810 --> 00:03:07,380
And yeah, as I was saying,
63
00:03:07,380 --> 00:03:10,540
there's a lot of margins already being applied,
64
00:03:10,540 --> 00:03:12,810
but basically that's it.
65
00:03:12,810 --> 00:03:15,290
So again, I think it would be a very good idea
66
00:03:15,290 --> 00:03:19,233
that you analyze this CSS code and also the HTML.
67
00:03:20,260 --> 00:03:21,640
So this here is an element
68
00:03:21,640 --> 00:03:23,910
that I think we didn't use before,
69
00:03:23,910 --> 00:03:27,730
but basically the element already says what it is.
70
00:03:27,730 --> 00:03:29,970
So this is just a semantic element,
71
00:03:29,970 --> 00:03:31,933
which means that it is a section.
72
00:03:32,850 --> 00:03:37,260
So for example, this one here is gonna be one section,
73
00:03:37,260 --> 00:03:40,410
then this one and all of this here.
74
00:03:40,410 --> 00:03:42,800
So those are sections in the webpage.
75
00:03:42,800 --> 00:03:45,150
And so we have an element in HTML,
76
00:03:45,150 --> 00:03:47,143
which is exactly called section.
77
00:03:48,190 --> 00:03:51,300
So once again, we could have used a generic div here,
78
00:03:51,300 --> 00:03:55,030
but div doesn't have any meaning and section does.
79
00:03:55,030 --> 00:03:56,430
So that's the better choice.
80
00:03:57,320 --> 00:04:02,320
Then another element that is important is the span element.
81
00:04:04,330 --> 00:04:06,090
Yeah. This here, right here.
82
00:04:06,090 --> 00:04:07,810
So as it says here actually,
83
00:04:07,810 --> 00:04:10,043
the span is just a generic INLINE element
84
00:04:10,043 --> 00:04:12,030
that we use for text,
85
00:04:12,030 --> 00:04:13,950
but it doesn't have any meaning.
86
00:04:13,950 --> 00:04:15,980
So it's a little bit like the div element,
87
00:04:15,980 --> 00:04:18,200
which also doesn't have any meaning,
88
00:04:18,200 --> 00:04:20,650
but for INLINE elements.
89
00:04:20,650 --> 00:04:23,770
So when we just need a small element for some texts,
90
00:04:23,770 --> 00:04:26,223
we always reach for the span element.
91
00:04:27,530 --> 00:04:29,270
All right, and then here,
92
00:04:29,270 --> 00:04:32,070
was also the blockquote element
93
00:04:32,070 --> 00:04:34,040
that we didn't talk about before.
94
00:04:34,040 --> 00:04:35,520
And this one is simply,
95
00:04:35,520 --> 00:04:37,560
usually to write some quote.
96
00:04:37,560 --> 00:04:40,510
So quoting someone, in this case,
97
00:04:40,510 --> 00:04:43,110
is writing their testimonial.
98
00:04:43,110 --> 00:04:46,270
So basically Mary and Sarah saying something
99
00:04:46,270 --> 00:04:48,170
about these chairs.
100
00:04:48,170 --> 00:04:50,533
And so for that, we can use a blockquote.
101
00:04:51,920 --> 00:04:54,480
All right, so again,
102
00:04:54,480 --> 00:04:57,790
take some time to go through all this code
103
00:04:57,790 --> 00:04:59,590
and try to understand it.
104
00:04:59,590 --> 00:05:03,120
And again, if you don't understand everything, 100%,
105
00:05:03,120 --> 00:05:04,960
that's not a problem at all
106
00:05:04,960 --> 00:05:07,250
because the main focus of this section
107
00:05:07,250 --> 00:05:09,440
is not really in the code,
108
00:05:09,440 --> 00:05:11,810
at least not so much in the HTML,
109
00:05:11,810 --> 00:05:15,480
but it's really on the web design rules and guidelines
110
00:05:15,480 --> 00:05:17,530
that we're about to learn.
111
00:05:17,530 --> 00:05:19,220
And speaking of that,
112
00:05:19,220 --> 00:05:21,320
the final result of this project
113
00:05:21,320 --> 00:05:24,823
will not be this, but this.
114
00:05:26,170 --> 00:05:29,190
So this looks quite different, right?
115
00:05:29,190 --> 00:05:31,370
It has a different typeface,
116
00:05:31,370 --> 00:05:34,760
so a different font, a more modern one.
117
00:05:34,760 --> 00:05:37,620
It has some green colors here
118
00:05:37,620 --> 00:05:40,000
and the text is also not black.
119
00:05:40,000 --> 00:05:41,920
And there's a lot of rules here applied
120
00:05:41,920 --> 00:05:46,010
that make the typography look really good.
121
00:05:46,010 --> 00:05:47,770
Then we have these carts here
122
00:05:47,770 --> 00:05:51,123
with some shadows and everything is nicely rounded.
123
00:05:52,510 --> 00:05:55,103
And we have this accent color here in the bottom.
124
00:05:55,975 --> 00:05:58,970
So yeah, this is basically applying some
125
00:05:58,970 --> 00:06:00,900
of the guidelines that we're gonna learn
126
00:06:00,900 --> 00:06:02,790
through this project here,
127
00:06:02,790 --> 00:06:05,080
as it looks like in the beginning.
128
00:06:05,080 --> 00:06:06,970
So I hope that sounds exciting.
129
00:06:06,970 --> 00:06:09,010
And so let's now actually get started
130
00:06:09,010 --> 00:06:10,973
with learning about web design.
9207
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.