Up next in 10
How to Style a Modern Website (Part Two)
1K views
Feb 7, 2024
"How to Style a Modern Website (Part Two)" continues the instructional journey of crafting contemporary websites using CSS, following up from Part One. This installment further explores advanced techniques in web design, such as animation effects, custom transitions, and integrating modern design trends. Viewers are provided with practical demonstrations and insights into optimizing user experience and visual appeal. Whether you're a novice seeking to expand your CSS proficiency or a seasoned developer refining your skills, this video offers valuable guidance in creating polished and engaging modern web designs.
View Video Transcript
0:00
Hello everybody. Welcome to the second video on how to style a modern website
0:04
In the first video, we looked at styling the About page of our band website
0:08
and in this video, we're going to tackle styling the home page of our website to look exactly as this image on the right here
0:14
In order to get started with this, let's open up our index.html page with Live Server
0:20
and here we have all the HTML with no CSS styling applied to it
0:25
The first thing that we want to do is to go into our About.html
0:29
copy our link tag from the head and paste this into our index.html file
0:36
This way we'll be able to load our styles in from our styles.casss file into our homepage here
0:42
As you can see, this already made some changes by changing our font, font color, etc
0:46
based on our everything selector. The next thing that we need to do is apply our styles to our header that we created in the last episode
0:54
episode, such as the class of main header. If we save this, we'll see that on the right, our header will update, and then we have our
1:05
navigation, which we can apply the classes of nav and main nav to, and there we go
1:12
We'll get rid of this HR here, as well as these two line breaks and our comment, since these
1:17
are no longer needed, since we have a background image, and these line breaks will be taken
1:21
care of using CSS. Let's save that, and then add our final class here for the band name
1:28
and band name large. And if we save that, our header now looks very similar to how
1:37
our About page header looks, but we have these two buttons down here that we need to style
1:41
still. The first thing we want to do is create a button class for all of our buttons
1:46
We'll do this in a similar way that we styled our navigation elements by having a navvents
1:51
class and then another class to style what type of Nav it is, but first we'll just create
1:56
this generic button class that all of our buttons will be able to use. Inside of our styles.ciss
2:01
let's add the selector for that button class and start applying the different styles we need
2:06
We know that we want all of our buttons text to be centered in the middle and center of our button
2:11
so we'll use text align center to put our text in the center horizontally
2:17
and then we'll be using vertical align of middle to put our text in the middle vertically
2:24
If we save that, we'll notice that no changes are made over here because our buttons aren't tall enough
2:28
or wide enough for our text didn't need to be aligned in the middle yet. But as we start adding different pattings
2:33
and different heights and widths, we'll see that our text will always be in the center
2:37
Next, let's add a little bit of padding around our button so that we have more space between the text
2:41
and the edge of our button. To do this, we'll use padding, and then we'll give it .67
2:47
em of padding on both the top, bottom, left, and right. by just doing one number, and if we save that, we'll see that our buttons have gotten slightly larger
2:56
Last thing we want to do is when we hover over our button, we want our cursor to change to a pointer icon as opposed to the normal arrow icon
3:03
So we're going to go into here change our cursor to pointer and save that and now when we hover over our buttons
3:10
We'll get the pointer icon instead of the typical arrow icon The next thing we want to do is apply our button-specific classes for our header. We'll just call this button
3:20
header. Now if we go into our styles.cass, use the selector for our button header class
3:27
we can start adding styles that are specific for this get our latest album button
3:32
The first thing we want to do is use the margins around our button to be able to position it where we want
3:38
If we look at our image here, we can see that our button is positioned so that it is slightly offset from the center and offset from the left edge of the screen
3:46
We're going to be using margins with percentages and EMs in order to be using margins
3:50
to accomplish this. So if we use margin, the first value, if we use all four values of margin
3:55
corresponds to the top margin, which we want to set to .5 EM, which will be half the size of the
4:01
font. We then want to use 15% to correspond to our right side margin, which will take up 15% of
4:09
the total space our object can occupy. Then we can use 2 EM as the bottom margin, and another
4:15
15% as the left side margin. If we save this, we see that our object already aligned
4:20
lines itself slightly offset from the left and not quite centered on our space
4:25
This is exactly what we want. Next, we want to style the button to look like it does on this page
4:32
The first thing that we're going to want to do is change the tux color to be white
4:40
And then we want to add a border around our object. It's going to be two pixels, solid, and we're going to use this color, which is a slightly blue
4:50
blueish color as our border color. Now if we save that and go back, we already see that our text
4:55
color has changed to white and we have a blue border around the object, but we still have this gray
4:59
background. In order to get rid of that, we can just set the background color and we're
5:05
going to use a very, very opaque white color, which would be RGBA, 255, 255, and 0.1. If we save that
5:16
we now get a button that looks very similar to this button in color
5:20
but spacing it's still not quite right. What we need to do is set the border radius of our object to be 0
5:27
which completely remove the rounded corners of our object so that we now have a perfectly square-cornered object over here
5:33
just like in this image. The border radius corresponds to how rounded the corners are so by setting to 0 we have no rounded edges to our corner Next we want to increase the font size We just going to set that to 1 to be about 50 larger and then we want to make the font weight to be lighter so that the text is slightly thinner
5:53
And if we save that, our button is looking very similar to our button over here, but you'll notice that we don't quite have the same padding on the left and right
6:01
In order to fix this, we'll set our padding on the left to be 2 EM and our padding on the right to also be 2 EM
6:10
Now if we save that, our button looks almost exactly the same as our button in here
6:17
This is perfect. But when we hover over this button, nothing actually happens
6:22
We have no way to know we're actually hovering over it. In order to fix that, we use the button header hover selector here, and we'll set the back button
6:30
and we'll set the background color, and we'll just make it a slightly less opaque version of the color that it already is
6:37
which is white, but we'll use 0.3 instead of 0.1 as our opacity
6:43
So now if we hover over it, you see that our button gets slightly lighter
6:46
so that way we know that we're actually hovering over top of it. One thing that you may notice is if we zoom out here on our image
6:54
and we increase our font, our window size to be even larger
6:58
Our button will become very offset to the left and not as centers as we like it to be
7:03
In order to fix this, in our index.h.m. page, what's wrap this button here inside of a div with the class of container
7:14
If we do this, we've already created this container class, which has a limited width
7:20
This means the padding of our button on the left and right will be inside of that confined width space to the container
7:26
So if we save this, and it will be a button. this and increase our size of our browser to be even larger, you see that our button will
7:31
always stay similar to the center of the screen because it's inside of a container with a limited
7:36
width. That's exactly what we want our web page to react as. Now let's zoom that back in so it's
7:42
easier for you guys to see. There we go. And now let's work on styling this button right
7:52
here for the play button. We'll use very similar styles to our header button
7:57
But we'll also add a play button class to this. If we save that, we already see that this is very similar to our style over here
8:06
What we want to do is we want to make this button entirely round, and we want to make the icon on the inside blue as opposed to white
8:12
In order to do this, we'll go to our styles.cass here, and we use our button play class
8:18
to style our play button how we want. The first thing we want to do is center our button horizontally in the screen, so we're
8:24
going to use margin with zes, zero on the top and bottom and auto on the left and right in order to tell our button to center itself in the screen
8:32
But as you'll notice, our button actually just centers over onto the left side
8:36
This is because buttons are not block level elements and only block elements can have an auto margin
8:42
To get around this, we'll change our button to be a display block
8:46
Now if we save that, we'll notice our button is perfectly centered in our screen
8:50
The next thing we want to do is change the color of this icon to be our blue color here, which we can just copy from our
8:57
border, save that, and now we have that same blue color inside of our button
9:02
We want to increase the font size in order to make the icon larger
9:06
We'll use 4EM. And then we want to change our border radius to be 50% in order to make a perfect circle
9:16
And there we go. But you'll notice that our button is more of an oval than a circle, and that's because
9:21
our button has different padding on it, so we need to completely remove the padding from
9:25
our button. in order to make it a perfect circle. But you'll see there's a slight problem where a button gets really scrunched up
9:33
so we want to give our button a width and a height, and we're going to make these exactly the same
9:38
so our button is a perfect circle as opposed to an oval
9:41
We'll just use 100 pixels. And if we save that, you see that we now have a perfect circle button
9:48
in the center of our screen that is slightly offset from our button up here
9:52
very similarly to over here. And if we increase it, the size of our screen, you see that our buttons will stay positioned how they want them
10:01
no matter what size our screen is. That's exactly what we want, and everything that we need to do in order to make the header of our page look exactly the same as this image over here
10:10
The next thing that we need to do is work on this section of our page, which contains our tour dates, and is the main content of this homepage
10:19
The first thing we can do is use our styles that we created in our previous video
10:23
We can use our class over here of content section in order to specify that this is a content section
10:30
And we can also use the class container in order to specify that we don't want the width to grow over a certain size
10:37
Next, we can use the class here of section header, just as we created in our other video
10:43
That'll mark this header as a section header, hence center, and give it the right font that we want
10:48
Now, we need to tackle the individual rows of our tour date
10:52
The first thing we can do is remove the HR as well as these less than and greater than symbols
10:58
since these were only there in order to be used for spacing in our HTML, and we will do all of that with CSS now instead
11:06
So now if we save that, we see that our row is completely scrunched together, which is perfect for us to start styling
11:12
We also want to give our row a class of tour row so that we can say each row will be styled in the same exact way Let go into our styles here Add that tour row selector and get started styling it The main thing we want our tour row to do is to give us padding between our different rows
11:30
as well as give us a border on the bottom of the row. So to start, let's use border bottom to give a bottom border to our row
11:37
and we'll make it one pixel solid black. And if we save that, we see that we now have that border on the bottom of our object
11:44
similar to how the HR worked. But we also want there to be a little space between the row and the row below it
11:50
as well as between the row and the border. In order to give us space between the row and the border
11:55
we'll use padding, since padding is space between the content and the border
11:59
and we'll set this to 1em. If we save that, we now have space between our content and our border
12:05
and in order to give us space between the content below in our border
12:09
we use margin, which is on the outside of our border, and we'll set that to the same 1EM
12:13
same 1 EM. Now if you save that, we have spacing between all of our rows here
12:18
Let's take this tour item or to a row class and give it to all of the different rows
12:23
inside of our content here. We can just copy and paste that into all these divs
12:28
And after we're done with that, we save it, we'll see that we now have borders on the bottom here
12:34
Let's get rid of all these HRs so that it's easier to see
12:38
And you'll see now that we have borders on the bottom of all these different rows
12:42
It's very similar to over here, but you'll notice there should be no border on our last row here
12:48
And you may think, oh, we'll just remove the class and that'll solve the problem, but that will get rid of all of our padding and margins
12:54
In order to fix this problem, we can use what is called the last child selector
13:00
So if we do two a row, last child, this will select the last child with this two a row class
13:06
And if we just give it a border, bottom of none, to say that there should be no border
13:12
and save it, you'll see the border on this last child has been completely removed
13:18
Now we can get started on styling the different elements inside of our row
13:22
Let's first start with the date element here, and we're going to give this a class of tour
13:27
item, which we'll give to all the items in our row, and we'll give it a specific class of
13:32
tour date, and this will work very similar to how we've done buttons and navs so far
13:37
Let's first start by styling the tour item element. here all we want to do is set very specific padding, margins, spacings, all of that way we want
13:47
between all of our tour items. So first we want to add a padding right between all of our
13:53
elements to give them a little bit of space of .5 em. If we save that, we'll see that now there's
13:59
a little bit of padding to the right side of our date element here, which is exactly what we want
14:04
But we also want these elements to display inline with a specific width. As we know, inline elements
14:11
cannot have any width applied to them. For example, if we were to apply a width of a thousand
14:16
pixels here and save this, our object does not actually become a thousand pixels wide, and that's because
14:21
it's an inline element. So what we want to do is change the display to be inline block, which will make
14:27
this act like an inline element, as in it won't break the line when it's done, but it'll also be
14:33
able to have widths and heights applied to it like a block element. And if we save that
14:37
we see our element is now a thousand pixels wide. We don't actually want that, so we'll
14:41
will remove that line. Perfect. The only downside of inline block is it does add a tiny bit of
14:47
space between each element that we cannot actually remove, but that is okay for now. Now let's use
14:53
that tour date class that we also assigned it and start styling that as well. First, we want to give
14:59
it a slightly darker color than the rest of our row to match the styling in this page, so we'll
15:04
give it a color of 555, which is a slightly darker version of our 777 color. And if we'll
15:11
If we save that, you'll see our colors a little bit darker. We also want to make it so that it's bold
15:16
So we use font weight of bold. If you save that, you notice not much actually changes
15:22
And that's because we used a strong tag over here for our element
15:25
Strong tags are meant only when you want to emphasize something. And in this case, our bolding is only for visual instead of for emphasis
15:33
So we want to change this to a span tag in order to remove the special emphasis applied
15:38
to it, since it is only meant to be visually bolded. and not actually emphasized for importance
15:44
Now if we save that, you'll see it'll look perfect. Let's go back to our style.csss, and give this a specific width
15:50
and we'll just use 11% for our width here. Save that, and now it gives us a little bit of extra spacing
15:57
and as we increase the size of our browser, the spacing will increase with it. Perfect
16:02
Now let's move on to the other elements of our tour item. Instead of our index.html, let's give all of our elements the tour item class
16:11
As well as a specific class, in this case, this is our city, so we'll call it Tour City
16:17
This next one is going to be our Arena, so we'll give it Tour Item and Tour Arena
16:24
And this last one is our Button, so we'll give it the class of Button
16:30
We'll also give it a Tour Item class and a Tour Button class and save that
16:38
Now our row looks a little bit better, has a little bit of spacing between our elements, but everything's not quite lined up how we want it
16:44
So in our styles that CSS here, let's style our individual tour elements, starting with the
16:48
city element, which we're just going to give a width of 24%, since this is a slightly larger text
16:55
than our date is. And we save that and now it gives us a little bit of spacing We go on to our tour arena and we give this a width of 42 since this is our largest element by far
17:08
And then lastly, we use the tour button. And instead of giving this an actual width
17:12
because if we give it a width, for example, of 19%. And we say that as we increase our screen size
17:20
we'll see that our button will get wider, which we don't actually want to happen
17:24
So instead, we'll use max width as opposed to widths, which means our eyes
17:27
element will never be larger than 19% of the screen. So now if we shrink this, our button will stay exactly the same no matter how large or how small it goes, because the width will always be the same as the content, but it will never become larger than 19% of the screen. So if we make our screen very small, you'll see that our button will break onto two lines instead of shrinking even further. That's exactly what we want. You also may be wondering by looking at these widths why they don't
17:57
don't exactly add up to 100% because you would think we want to fill up 100% of this space
18:03
And you are correct, we do want to fill up 100% of this space, but as I talked about
18:08
inline block elements add some amount of spacing between each other inline block element
18:12
that we cannot remove. We have to account for this by making our widths slightly less than
18:18
100% when added together. To do this, I subtracted about 1% from each of these widths
18:24
after making them total up to 100%. This way we have 96%
18:27
6% width taken care of, so that way our screen won't break onto multiple different lines until it becomes very, very small, and in that case you'll see it does break onto multiple lines
18:37
But that is okay because our size, our screen is not really meant to be viewed on mobile. This is mostly for desktop design
18:44
Let's make that size a little bit larger here. There we go, and let's copy these styles onto all of our different elements over here in all of our different rows. I'll do that really quick
18:57
And there we go. Now all of our rows are styled correctly, that they all line up exactly so the spacing is exactly
19:12
what we want it to look like. And if we increase the size of our browser, everything stays in line in all of our different
19:18
columns and scales to be responsive with the size of our browser
19:22
This is perfect. The only thing we have left to do is style our buttons so that it look the same on this page
19:27
do on this page. In order to do that, let's add one final class to our buttons, which will
19:32
be button primary, since it will be the primary button of our site, and this primary attribute
19:39
really refers mostly to the coloring of our button, since our button base class already
19:44
applies all the styling for the different sizing, padding, and margins that we need
19:48
So now if we go over to our styles.cass, add this button primary class in here, we can now
19:55
style the different colors we need to. Let's first start by adding the color of white, which make our text color white, as well as our background color
20:04
which we want to set to this color. And if we say that, we now see our buttons are the exact same color as over here
20:12
We next want to remove all the border from this element, so we don't have this gray border around here anymore
20:19
And then we want to make our border radius to be slightly bent around the corners
20:24
As you can see over here, we have a slight bend in the corner, so we'll make this gray border radius, So we'll make our border radius be 0.3 EM
20:31
And if we save that, you see that our button is already looking great, but our text is a little bit dull in here. So let's make the font weight bold
20:40
to make our text pop a little bit. And if we save that, our buttons now look perfect
20:44
and they look exactly the same as our buttons over here. The only thing we have left to do
20:49
is that a hover element to this so that we can tell that we're hovering over our element. We'll do this exactly the same way by using our button primary with the hover selector
20:57
and we'll just give it a background color that is going to be slightly darker
21:03
So in here, we'll go background color, and we'll just set that to this color right here
21:09
Now if we hover over our button, you'll see that it'll get darker to note that we are hovering over this button
21:14
and it is easier for our users to know what's going on. The last thing we have left to do is style the footer to be exactly the same as the footer on our about page
21:23
So in order to do this, we'll just go to our about page, go down to the fuller
21:27
footer and copy all the footer elements, IDs, classes, all of that, and we'll paste it over
21:34
our footer here. Since we know that we want them to be exactly the same, and now if we save that
21:39
we scroll down here, our footer now looks exactly the same as our footer over here, which is
21:44
exactly what we want. Now, if we zoom out our webpage here a little bit to be 100% increase the
21:50
size, you'll see that our content stays inside of these bounds, and that is due to the container
21:55
class that we added. This is perfect for making our site responsive without stretching too far
22:00
on larger screens and also making it look decent on smaller screens such as this or this. That's
22:07
all there really is to creating the CSS for this homepage. You'll notice that this was much easier
22:12
than doing our About page and that is because all the styles that we used in our About page
22:17
we were able to copy over and use in our home page and we'll even be able to use those styles
22:21
in our store page when we get around to doing that in the next video. If you guys enjoyed this video, please leave a like and comment down below what your favorite CSS property is that we learned in this video
22:32
Thank you guys very much for watching. I can't wait to see you in the final part of this when we style the store page of our website
22:38
which is going to be by far the most complicated and interesting style that we have to do. Thanks for watching
#Multimedia Software
#Online Goodies
#Skins
# Themes & Wallpapers