All right.
It's time for the project, for this section.
And in this project, we're going to be creating a beautiful website for a Web Design Agency.
Usually with web design agencies, you'll see them demonstrating their best work, but their websites
are usually quite simple.
So something with a big block of text telling people what they do and then just simple clean design.
This is what we're going to be creating.
We're going to be a Creative Design Agency at dev.com and we've got two little blocks of text that describes
a little bit about our work,
and finally, at the bottom, we've got a footer with our company motto, "Create, Develop Design."
But more importantly, our website actually scales responsively.
So when we create our website, we're going to make sure that when it's displayed on a smaller screen,
namely an iPhone, that our blocks now change and are centered and are responsive to make better use
of the screen real estate.
So instead of having it side by side such as here, where we've got one block here and then one block
here, when the screen size is a certain size, they actually stack on top of each other.
So this is going to require a little bit of the knowledge that you learned in this lesson about the Display
property, Floats and also Responsiveness.
Go ahead and download the starting project.
The first thing I want you to do is to go ahead and open up the index.html and take a look at the code
that we've already put in here for you.
You can, of course, design everything completely from scratch, but I think it's important that we
actually have a good pace of learning and we're practicing the things that we've actually just learned
about, rather than doing everything from scratch and not focusing on the important things.
Go ahead and show it as a preview on the right.
And if you want to see it better, just copy that URL and put it into your browser.
Now, you can see this is basically just kind of like plain HTML, right?
We've got some nice fonts in here, we've got some images, we've got some text,
but essentially it hasn't really been designed for layout and that's what we learned all about in this
section.
So now I want you to right-click on the solution.html, Show Preview, take this URL and put it up
side by side.
Now one way you can solve this project is to simply aim for this exact same layout.
I'm not going to give you too many clues about how to achieve this layout.
I think it's time that you actually figure out how to break down a problem and see if you can create
something similar.
It doesn't have to be exactly the same,
you could just aim for similar.
But the important thing to remember is look at how this is laid out,
you've got an image, you've got text that's floating next to it,
you've got these two different sections are completely separate from each other
and then when you change the dimensions, when you hit a certain break point, this is pretty much for
mobile around sort of 600-ish,
then it actually stacks on top of each other.
Using what you've learned in this section, you should be perfectly able to add the modifications to
the index.html to create this look and feel.
Now I want to leave this up to you.
You can actually create an entirely different website if you want to
by modifying this starting file. You could lay it out however you like, using whichever methods you've
learned,
it doesn't have to end up looking like this. As long as it looks beautiful to your eyes,
I'm happy with it.
But remember, I want you to try out putting in responsiveness and try out some of the things you learned
in this section, such as block and inline-block and floats.
Just put some of those things into the CSS so that you have some practice doing these things.
Once you're done, you can take a look at the solution code to see how I achieved this particular layout.
And you can look back at some of the previous lessons if you're not quite sure how I achieved it in
the solution code, but I recommend don't look at the solution code until you're happy with your creation.
So now go ahead, download the starting files, modify the layout, and if you've created something completely
different from the solution and you think it's amazing, you want to show off to everybody, then go
ahead and include a screenshot in the Q&A so that we can all admire your hard work.
So now it's time for you to shine and for you to design and use CSS to your heart's content to create
a beautiful website of your own making.
So have a go at that now.
I hope that was fun for you and you managed to create something really beautiful.
I want to quickly point out some of the things in my solution code that I want to draw your attention
to in case you got stuck on how to recreate the layout that I had in the solution.
So the first thing I want you to notice is here I've created a span giving it a different class.
That means that in the solution I can target that particular class ".creative" and give it a different
color.
That's how I managed to have this part be blue rather than having it all the same color,
but layout-wise, it's completely within the same flow because it's simply an inline element that slots
in.
That's the first thing I want to draw your attention to.
The second thing is notice how I've got a media query targeting 680px and below,
if you remember from previously, this is going to give us access to a lot of the smaller devices where
maybe our two sided sort of blocks won't work,
so that we get that responsiveness where they stack on top of each other.
And the way that I've made them stack on top of each other is by simply changing the cards to have a
display of block, so that they occupy the full width.
And then I've changed the width to 100% so that they go from edge to edge, changed the text to justify,
so that instead of being left-aligned, as you see here, they actually try to occupy the full-width
and the spaces get stretched out so that we have these clean lines, on either side of the paragraphs.
And of course, the way that we've managed to get these cards to go to the left and the right is using
what we learned about float, float-left and float-right.
So all in all, the solution should be easy enough to understand.
The only thing you might have never seen before is this "object-fit".
And what I want you to do if you're not quite sure about some code that you see in the solution code
is to simply Google for that property on MDN Developer Docs and read up on it because it's usually
something simple enough to simply understand by using the docs.
And this is an important workflow in any professional web developers life, so it's important to get
used to it.
I hope you had fun in this project and I'll see you in the next section.