Now, up to this point, we learned about ASML success templates and learned how to do layout with things
like flex box and success, grit, and probably the most important thing that you need to know from
the sections is how to create a website.
Right.
How to lay out a website, but also not spend a lot of time on simple tasks.
Because when we get to the JavaScript section, which is the more exciting actual logic programming
part of the course, that's when you truly become a developer.
Up until now, with what we've learned is the foundation that that allows us to build web apps and applications.
But you're never going to actually get interviewed about the specific topics.
I mean, yes, in small cases, you might be if you're a designer, you might get asked questions about
6000 HTML.
But most of the time the questions you'll be asked is on things like JavaScript logic and more complex
topics that we're going to cover later on in the course.
But the one thing that I really want to take away from this section is being able to build websites
fast or at least get to the part where you need to start writing JavaScript because that's where your
real job begins.
So I have a task for you.
Using all the skills that you've learned up until now, I want you to create a layout of a website,
something that you're going to do over and over throughout your career.
And I've created a small starter file here where we have these little button like containers or device.
But as the name suggests, I want you to align these in a responsive way to something that looks like
this.
I know it's not the prettiest thing right now to look at, and we're only focusing on layout, but what
I want you to do is to make the header green button over here be an actual header.
We want the cover to be, well, the actual cover of our website and then maybe have a project grid
where we list all of our projects like we have over here, and then obviously a footer at the bottom.
And I've selected this layout because it's a very common pattern that you'll see in a lot of websites,
so you're going to be doing this a lot.
So let's figure out the best way to go about doing this so that when I make this smaller, it's all
responsive.
So your task is to use whatever you've learned up until now to create this, using the starter files
and don't worry, I'll have a solution video for you after this.
And we'll also go into how easy it is once you have a layout, which is the recommended way to build
a website, starting with the layout first and then once you have the layout fixed.
Converting this into something usable like this, because styling becomes really, really easy once
you have the layout in place.
Now, the one hint that I want to give here is to use both flex box and CSFs Grid to accomplish your
goal, although anything you can do in flex box, you can do with grid and vice versa, or at least
most things using the tools in combination flex box and kska grid together is really, really powerful
to allow you to build a layout like this.
So good luck.
I know it's going to be tough, but I'll see you in the solution video.
Bye bye.