1
00:00:02,270 --> 00:00:10,520
Now, up to this point, we learned about ASML success templates and learned how to do layout with things

2
00:00:10,520 --> 00:00:16,790
like flex box and success, grit, and probably the most important thing that you need to know from

3
00:00:16,940 --> 00:00:20,000
the sections is how to create a website.

4
00:00:20,000 --> 00:00:20,330
Right.

5
00:00:20,390 --> 00:00:25,310
How to lay out a website, but also not spend a lot of time on simple tasks.

6
00:00:25,580 --> 00:00:32,000
Because when we get to the JavaScript section, which is the more exciting actual logic programming

7
00:00:32,000 --> 00:00:34,920
part of the course, that's when you truly become a developer.

8
00:00:35,210 --> 00:00:41,420
Up until now, with what we've learned is the foundation that that allows us to build web apps and applications.

9
00:00:41,870 --> 00:00:48,490
But you're never going to actually get interviewed about the specific topics.

10
00:00:48,740 --> 00:00:54,890
I mean, yes, in small cases, you might be if you're a designer, you might get asked questions about

11
00:00:54,940 --> 00:00:55,990
6000 HTML.

12
00:00:56,150 --> 00:01:03,110
But most of the time the questions you'll be asked is on things like JavaScript logic and more complex

13
00:01:03,110 --> 00:01:05,180
topics that we're going to cover later on in the course.

14
00:01:05,540 --> 00:01:12,380
But the one thing that I really want to take away from this section is being able to build websites

15
00:01:12,380 --> 00:01:18,710
fast or at least get to the part where you need to start writing JavaScript because that's where your

16
00:01:18,710 --> 00:01:19,850
real job begins.

17
00:01:20,180 --> 00:01:21,410
So I have a task for you.

18
00:01:22,570 --> 00:01:29,290
Using all the skills that you've learned up until now, I want you to create a layout of a website,

19
00:01:29,320 --> 00:01:32,210
something that you're going to do over and over throughout your career.

20
00:01:32,650 --> 00:01:40,930
And I've created a small starter file here where we have these little button like containers or device.

21
00:01:41,530 --> 00:01:49,450
But as the name suggests, I want you to align these in a responsive way to something that looks like

22
00:01:49,450 --> 00:01:49,780
this.

23
00:01:51,020 --> 00:01:56,270
I know it's not the prettiest thing right now to look at, and we're only focusing on layout, but what

24
00:01:56,270 --> 00:02:02,720
I want you to do is to make the header green button over here be an actual header.

25
00:02:03,780 --> 00:02:10,050
We want the cover to be, well, the actual cover of our website and then maybe have a project grid

26
00:02:10,050 --> 00:02:15,660
where we list all of our projects like we have over here, and then obviously a footer at the bottom.

27
00:02:16,940 --> 00:02:21,500
And I've selected this layout because it's a very common pattern that you'll see in a lot of websites,

28
00:02:21,500 --> 00:02:23,100
so you're going to be doing this a lot.

29
00:02:23,510 --> 00:02:31,280
So let's figure out the best way to go about doing this so that when I make this smaller, it's all

30
00:02:31,280 --> 00:02:32,000
responsive.

31
00:02:35,820 --> 00:02:42,170
So your task is to use whatever you've learned up until now to create this, using the starter files

32
00:02:42,720 --> 00:02:46,020
and don't worry, I'll have a solution video for you after this.

33
00:02:46,710 --> 00:02:52,050
And we'll also go into how easy it is once you have a layout, which is the recommended way to build

34
00:02:52,050 --> 00:02:56,820
a website, starting with the layout first and then once you have the layout fixed.

35
00:02:57,730 --> 00:03:03,970
Converting this into something usable like this, because styling becomes really, really easy once

36
00:03:03,970 --> 00:03:05,240
you have the layout in place.

37
00:03:06,180 --> 00:03:14,320
Now, the one hint that I want to give here is to use both flex box and CSFs Grid to accomplish your

38
00:03:14,320 --> 00:03:20,680
goal, although anything you can do in flex box, you can do with grid and vice versa, or at least

39
00:03:20,680 --> 00:03:28,150
most things using the tools in combination flex box and kska grid together is really, really powerful

40
00:03:28,390 --> 00:03:30,580
to allow you to build a layout like this.

41
00:03:31,180 --> 00:03:31,990
So good luck.

42
00:03:32,020 --> 00:03:35,650
I know it's going to be tough, but I'll see you in the solution video.

43
00:03:36,400 --> 00:03:36,760
Bye bye.