Up next in 10
How to Style a Modern Website (Part Three)
5K views
Feb 7, 2024
"How to Style a Modern Website (Part Three)" concludes the comprehensive series on CSS-based web design, building upon the concepts covered in Parts One and Two. In this final installment, viewers delve deeper into advanced topics such as grid layouts, flexbox techniques, and CSS frameworks. The video provides practical demonstrations and expert insights into crafting visually appealing and responsive websites that adhere to modern design standards. Whether you're a seasoned web developer or an aspiring designer, this tutorial offers valuable strategies and best practices for creating sleek and functional websites that captivate users.
View Video Transcript
0:00
Hello everybody, welcome to the final video on how to style a modern website
0:04
In this video, we're going to be taking the store page that we've designed earlier with
0:08
HTML, and style it to look exactly like this image on the right here
0:12
Before we get started, I want to say if you have been enjoying this series, let me know
0:16
down in the comments which one of the CSS properties that we've used that you'd like
0:20
me to cover more in depth in a future video. I'll make sure to read through those, find the best and most popular ones, and cover
0:26
those in later videos to go more in depth so you guys have a better understanding of
0:30
the CSS properties that we're using to style these bandweb pages. Now let's get started here by opening up our store HTML page using live server to see what
0:39
we have to get started with. Here we go. And the first thing that we need to do is copy over the style sheet that we've already
0:45
created and link it. So we'll just copy this link here from the index page, paste it into our store page
0:52
so we now have access to all the styles that we've already written, and as you can see, it's already taken effect
0:57
The next thing that we need to do is go into our header here, and we need to style our
1:01
header to be exactly like our homepage and our about page, as you can see here
1:06
So to do that, let's just add the classes that we've already created of main header
1:09
and our nav, and add the class of main nav, and then nav
1:19
And there we go. That looks good. Let's remove this HR. And then finally, style our band name here with band name and band name large
1:31
We save that, and there we go. We have the same header that we have on all of our other pages
1:35
And luckily for us, this is the only thing we need to do in our header here. The next thing we can do is move on to this section and work on this music cart section
1:43
right here. We can get started here by styling our section with the classes that we already have, such
1:49
as container and content section. If we save that, you'll see we get a little bit of padding from doing that
1:55
And then we can also title our header here by using the class of section header, which
2:01
we've already created. If we save that, we now see that our header for our section is properly styled
2:08
And now we can move on to styling the actual items that are going to be going into our cart
2:12
Let's first look at what we actually want the style to look like over here in our image
2:16
And we can see that we have the title of the item at the very top centered
2:20
We have the image here, and then we have the price and the button to add it to the cart
2:24
on the bottom that are slightly inset from the sides of the album image
2:29
So in order to do that, let's first add a class to this div that wraps all of this content here
2:35
And we're just going to call this shop item. And this is just going to represent a single item that we have for sale in our shop
2:43
And this will be usable in the music and the merch section. The next thing we can do is we can actually remove the divs that wrap this album, since
2:51
we can use CSS in order to make album on its own line without having to use a div to do that
2:58
So let's remove these divs here. And then we can also change the strong tag to a span, since we know that we want this
3:05
album one to be bolded, but we don't actually want to put emphasis on it that the strong
3:09
tag does for things like screen readers. We just want to style that in CSS
3:14
So let's add a class to this here. And we're just going to call this shop item title, since this is going to be the title
3:22
and the name of our shop item that we have here. Next we have our image, which we are going to add a class to as well
3:29
We can just call this shop item image, so that we can style our image to resize it as
3:36
we need. And then lastly, we have this bottom div here, which are the details of our shop item
3:42
So we're just going to give this a class. We'll call it shop item details
3:48
And inside of that, we have the price of the shop item here. So we can give that the class of shop item price
3:56
And then we have our button here, which we already have two classes for, a button and
4:01
button primary, since this will be the bluish colored primary button that we have
4:06
And then we'll add another class to it of shop item button, so we can style this button
4:11
specifically for the shop item as needed. And if we save that, go back to here, you'll see that some of the things in our page have
4:18
already changed. We got the blue button now. And now we can actually go into our styles.css and start styling these elements
4:26
The first thing that we're going to want to do is we're going to want to give some margin
4:30
around our shop items so that they don't run up right next to each other, as you can see
4:33
that these two items are. So if we go in here, we select our shop item, we can just give it a margin on all sides
4:41
of 30 pixels. And if we say that, you now see that we have spacing on the sides, bottom, top of these
4:45
shop items, so that they won't run right up against each other
4:49
The next thing we can do is style this shop item title right here. To do that, we'll just select the shop item title and we'll get started styling it
5:00
The first thing we want to do is we want to make it so that it is display block, so that
5:03
way it'll be on its own line as opposed to being in front of the image if the width of
5:07
our browser is large enough. The next thing we're going to do is we want to make this item 100% width so that it'll
5:14
take up the entire width of the top of the image. And that way, when we do text align center, the text will actually center itself above
5:21
the image just like that. Next thing we can do is change the actual size and color of the font
5:28
So if we go in here, we can make the font weight bold, so it is a little bit larger
5:32
We can make the font size be 1.5em, so it is also slightly bigger
5:38
And then lastly, add a color that is slightly darker than our current color here
5:44
We save that. You see that we now have a great title, but it's really close to our image, so we'll just
5:49
add a margin on the bottom here. We'll make that about 15 pixels, and we save that, and now we see it's spaced out above
5:56
our image, which is perfect. This is exactly what we want for our title
6:00
The next thing that we should tackle is the actual image of our shop item
6:04
Right now, this image is quite large. It takes up almost the entire screen, so what we want to do is we just want to change that
6:09
so that our shop item image is slightly smaller than it is right now
6:15
So we'll just give it a height of 250 pixels. If we save that, you'll see that our image shrinks down a little bit, and the width and
6:22
the aspect ratio stays the same because by default, the width will be automatically as
6:28
large as it needs to be for the image to be the same aspect ratio when the height is 250 pixels
6:34
This is because we didn't actually set a width, so it defaults to auto
6:37
Next, we want to work on this details row down here where we have the price and the
6:42
button for adding it to our cart. So let's go into here, and we'll do shop item details to select the wrapper that goes around
6:50
our details for our price and our button here, and we'll make this display flex
6:58
There we go. The reason we're using display flex is because we want to center these items vertically so
7:03
that they are all within the same line. As you can see, this price is at the top of the line here, and we want it to line up with
7:08
the text in our button. So to do that, we'll use align items center in order to centrally align all of the items
7:15
inside of this container, and as you can see, this looks perfect over here
7:19
The last thing we want to do is add a little bit of padding of five pixels on the top
7:24
bottom, left, and right, so that way it's slightly inset from the image and doesn't quite touch the image on the top
7:29
Next, we can move on to styling the actual price of our shop item, so we'll do shop item
7:34
price, and this doesn't take many styles. All we want to do is make it so that the button is shoved all the way to the right side of
7:41
the screen, so we'll set flex grow to one so that our price will take up as much width
7:47
as possible. If we save that, you see that it pushes this add to cart button all the way to the end
7:52
of our container right here. Next thing we want to do is change the color to make it slightly darker, and that's really
7:58
all there is to styling the actual item of our shop, but what we want to do is we want
8:03
to make it so that these shop items will all flow around each other, and as you can see
8:07
our shop item doesn't quite fit within the space of the image. It's taking up way too much of the width of the screen
8:13
In order to fix this, we can go back to our HTML here, and we can wrap all of these shop
8:17
items inside of a div, and we'll just give it a class of shop items
8:22
So if we go up here, create a div, give it a class of shop items
8:29
There we go. We put the end of this div at the end of all of our shop items for the music section right
8:37
here and indent everything so that it looks nice. There we go
8:45
Now we can actually select that shop items div that we created, and we can give it a
8:51
display of flex, and if we save that, you now see that everything's all in one line
8:58
and it goes all the way, way past the edge of our screen. We do not want that. We want these items to actually wrap, so we can use the property flex-wrap in order to
9:05
make these elements wrap, and we'll just set it to wrap so that if it goes past the edge
9:09
of our screen, they'll wrap down, and as you can see, now they all fill up in one column
9:14
instead of wrapping all the way to the end of the screen. You'll also see by changing flex, our display to flex here for the shop items, our image
9:23
is the total width of our item so that our add to cart button doesn't get put all the
9:27
way to the end here in our album, one title is properly centered above the image
9:32
This is exactly what we want. The last thing we want to do is when our screen is larger, these items will be right next
9:38
to each other like this, and we want to make sure that there's space between them in the
9:41
middle, left, and right, so we'll use justify-content-space-around, which will put an even amount of space on
9:50
the left and right of every single element inside of our container, and if we save that
9:54
we now see we have spacing between these elements and on the left and right of them
9:59
That's exactly what we want for these shop items. Now all that's left to do is to create all these different classes and add them to all
10:06
the different shop items, which I'll do real quick here
10:27
And there we go, that's all the styles that we need for our shop item, so now, as you
10:31
can see as we scroll down, all of our buttons and prices are styled correctly, everything's
10:36
lined up properly, and if we increase the size of our screen, you'll see that our items
10:40
will line up next to each other, which means that our site is actually responsive to different
10:44
screen sizes. This is because we used display-flex with the wrap property, so that if it became too
10:50
large for our screen, it would just wrap to the next line, and if our screen was large enough to allow multiple items, they would all stay on the same line
10:57
This is perfect for our situation, since we didn't want our albums to only take up one
11:01
line or be two on a line when our screen was very small
11:05
So now what we need to do is do the same thing to our merch section that we've done to this
11:09
section here by wrapping our container in a shop items div and then adding all of these
11:13
different classes down to these elements here. I'll do that real quick now
11:41
And there we go, I've added all of the different styles to our merch section, since it's pretty
11:45
much exactly the same as this music section here. And as you can see, if we increase our screen size to be large enough, there we go
11:59
Our items will be side by side, and if the screen size is not large enough, they'll stack
12:03
on top of each other just like this. And this is a perfect example of our flexbox working, because as you can see, these are
12:08
side by side, but these are not, because this coffee image is actually wider than these
12:13
images up here, so it needs a wider screen size in order for them to stack side by side
12:18
like this. Now the last thing that we have to tackle is the actual cart down here, which is going
12:23
to be the most complex part of this page, so stick with me
12:27
The first thing we need to do is go back into our HTML and style the different HTML elements
12:32
that we need with classes so that we can style it to look exactly like the cart down here
12:38
So first, let's take the classes that we know we already have for this section, we can do
12:42
container, we can do content section, there we go, we can also style this header here
12:50
with section header, there we go, and now let's get into the actual rows and headers
12:57
of our cart. Right here we don't need these less than and greater than signs anymore, since we're going
13:02
to be putting this spacing in using CSS, and same with these strong tags, we can replace
13:07
these with spans, so let's do that real quick, there we go
13:11
And now let's start adding the actual classes that we need. The first thing that we want to do is style the wrapper that goes around each of our rows
13:19
and we're going to just give that a class of cart row
13:24
And then we want to do classes for our different items, so we have our item column, our price
13:29
column, and our quantity column, since we want all these to line up and be the same
13:33
width, we'll give this a class, and we're going to give that cart item, and we'll also
13:40
give it a class of cart header, since this item is in the header of our cart, and then
13:46
lastly we'll use the cart column class, which we're going to give to all of our different
13:51
columns of our cart section, so that way we can do consistent styling between all of our
13:55
columns without having to copy and paste it other places. Let's do a similar thing for the price here, we're going to give it a class of cart price
14:05
a class of cart header, and a class of cart column. Then lastly, same thing for quantity, give it a class cart quantity, cart header, and
14:21
cart column. And there we go, that's everything we need to do in order to style the header row of
14:26
our cart. Let's start by styling that in our style sheet right now
14:31
The first thing we want to do is style the actual headers of our columns
14:34
So to do this, we can use the class cart header to select them, and then set a font weight
14:41
of bold, since these are going to be bolded, we can set a font size to be slightly larger
14:47
at 1.2em, and then lastly we want to make the color darker, so we'll just use this color
14:52
that's slightly darker, and then we can move on to styling the actual individual columns themselves
14:59
So let's use the selector cart column here, and get started styling that
15:04
In here, we can use a border bottom, and we'll just use one pixel solid black border in order
15:11
to put a border on the bottom here, but we also need space in between our elements, because
15:16
if we go back here, you'll notice that our borders are all running right up against each
15:20
other, and this image is even overlaying over the top of our borders. In order to get around this, we're going to use some margins around our elements here
15:27
First, let's use a margin on the right side in order to space our columns away from each
15:34
other, and we're just going to use a margin of 1.5em here
15:38
If we save that, you'll see that now there's some space in between our different columns
15:42
We're also going to put a padding on the bottom, so there's space in between the column and
15:46
the actual underline, so we'll use padding bottom here of 10 pixels, and then we'll also
15:53
put a margin on the top of our columns in order to put a little bit of space between
15:57
the top of our column and everything above it, so in this case, the actual border of
16:01
the element for this column. So we'll use margin top 10 pixels here, and perfect
16:10
Now we need to actually add these classes to the rest of our items inside of our columns
16:14
To do this, let's go back to our store.html and copy over all of these classes to these
16:20
other different elements here. Let's do this for the first one. We'll copy over this class CartRow, put it onto this div here
16:28
We also have the CartItem, which is going to include both the image here and this t-shirt
16:33
name, so we need to wrap this inside of a div with the class of CartItem, so we say
16:39
this is our item column, and then we'll also give it a CartColumn class, since it's going
16:44
to be a column inside of our section here. Put the end of the div down at the bottom, and now if we save this, you already see that
16:52
we started getting borders on the bottom, which is perfect. Next we can move over this CartPrice to be inside of this span here, since this is the
16:59
price for our item, so we'll give it a class of CartPrice, and another class of CartColumn
17:05
There we go. We can also remove these less than and greater than symbols here again, since they're just
17:11
used for spacing. And then lastly, we have our CartQuantity, which includes the input and button down here
17:17
so we can do a similar thing where we wrap them inside of a div. So if we paste this div here, instead of CartItem, we want CartQuantity, and then inside
17:26
of that div, we just want the input and the button. And there we go
17:32
Now we have everything we need, but you'll see that they're spaced out, so that they're
17:35
all on the line of their own, and in order to get around this, what we want to do is
17:39
we want to use Flexbox again in order to align these items properly
17:43
So if we go back to our styles.css, let's style that CartRow, and we use display flex
17:50
in order to get all these items onto one line, just like that, that's perfect
17:55
We're now running into the problem though, where our columns are different widths
17:59
As you can see, this item column here is not wide enough to support all the stuff in it
18:03
The price column doesn't line up with the actual price here, and the quantity is way off
18:07
In order to fix this, we'll use these CartItem class, the CartPrice class, and the CartQuantity
18:16
class that we applied to our different columns in order to style the widths of these columns
18:22
so they're all exactly the same. For our item, let's use a width of 45%
18:28
There we go. For the price, we're going to use a width of 20%
18:36
And lastly, for the quantity, we'll use a width of 35%. If you save that, you'll see that now everything lines up inside of the columns that they should
18:46
be inside of. You'll also notice that if you add these numbers up, they equal 100%
18:51
But if you remember from our first video, when we were styling, or actually our second
18:55
video, I'm sorry, when we were styling the homepage, you'll notice that we had to not quite equal 100% when we were creating our widths
19:02
This is because we were using inline block elements to style those, and inline block
19:06
elements have spacing around them. Here we're using Flexbox to align our items, so we can actually use widths that add up
19:14
to exactly 100% because Flexbox does not add any spaces in between the items inside
19:19
of its container. This is why I almost always use Flexbox when laying out elements as opposed to inline block
19:27
Flexbox is also great at aligning content inside of its box to be centered horizontally
19:31
or vertically, which is a problem you'll notice on the right here, where our content
19:35
should be centered horizontally, or vertically, I'm sorry, in order to look like this, so
19:40
that all of our text is right in the center here, but over here, our text is either at
19:44
the bottom over here or the top over here. So to fix that, we'll go back to our cart column here, since if you remember, all of
19:51
our content for each of these columns has this cart column class around it, and we'll
19:56
make this display of flex, and then we'll use align items center in order to center
20:01
our items along the vertical right here. We save that. You'll see that now all of our items are vertically aligned exactly as they should be, and this
20:10
is looking really close to what we have over here, minus all of the coloring that we need
20:14
to do for our different elements. In order to specifically select the different elements we want to style, let's go back into
20:21
our HTML here and add some classes to our different elements. The first element that we'll want to style here is the span tag with the title of the element
20:30
So what we'll do here is we'll add a class, we'll give it the title or the name of cart
20:35
item title, to specify this is the title of our cart item
20:39
We also want to add a class here to our image, so we'll just use cart item image to specify
20:44
this is the image of our cart item. Our cart price is already styled, which is perfect, and then we just need to add styles
20:51
to our input and our button here. So let's do class here. We'll just give it cart quantity input in order to specify this is the input for our
21:00
cart quantity, and then our button will have the class of button, which we've already defined
21:06
and then danger, which will specify a red colored button, and then also cart quantity
21:13
button in order to specify this is the button for our cart quantity. If we save that, you'll notice nothing over here changes other than the button styles
21:21
are applied to this button. So then we can go into our styles.css and actually start selecting and styling these elements
21:28
So let's go down here, and first let's style the actual title, the t-shirt title here
21:33
just by using cart item title selector, and then inside of this title selector, we'll
21:39
put the color to be a slightly darker color. We'll give it a little bit of margin on the left side so that it's not quite right up
21:45
against our image here, as you see. So we'll just use 0.5em for this, and then lastly, we'll increase the font size slightly
21:53
to 1.2em. If you save that, you'll now see that our image is slightly pushed away from our item
21:59
name, which is exactly what we want. Next thing we can style is the actual image
22:04
Since our image is a little bit too large right here, so we can go in here, cart item
22:09
image, we'll change the width to be 75 pixels so that this image is smaller
22:15
If we save that, you'll see our image is now smaller, but the height is too tall, so we're
22:20
going to give it a height of auto so the height will automatically adjust to the width
22:24
And if we save that, it's now within perfect aspect ratio that it was before
22:30
And lastly, we'll just add a slight rounding of the corners here, so we're just going to
22:34
use border radius, and we'll just say, for example, 10 pixels. If we save that, it now rounds the borders just a little bit, which adds a little bit
22:45
of extra aesthetic to the image, I think. The next thing we want to target is this price over here, and we already have a cart price
22:52
selector, so let's just do it inside of that. We'll increase the font size slightly to be 1.2em, and we'll make the color slightly darker
23:01
And if we save that, we'll see that the price now looks good, and we really don't have to
23:07
do anything to that. The last two elements, though, our input and our button, are going to take a little bit
23:12
more work. Let's go down here, and we can select that button danger class that we added earlier
23:19
to apply this reddish colored button, and we can start adding our classes to this
23:23
The first thing that we want to do is change the color of the text to be white, and we
23:28
want to give it a background color. Here that is going to be a reddish color
23:36
Paste that in here. That'll be a red color, and if we save that, we'll see that we now have this reddish button
23:41
We want to remove the border from the button, give it a slight border radius so that it
23:48
has rounded corners, and then lastly, increase it so that it is a bold font here
23:53
If we save that, we now have a good looking button, but we have no hover
23:57
That happens when we go over the button, so let's add our hover effect using the hover
24:03
selector here, and we can just give it another background color that is going to be slightly
24:08
darker here, and if we save that, and we hover, we now get a slightly darker red color when
24:16
we hover over the button, which is perfect. The next thing we can select is our cart quantity input, which is going to take quite
24:25
a few styles applied to it in order to give it a bluish border and a smaller size
24:30
The first thing we want to do for this is to make it the same height as our button over here, so to do that, we'll use a height of 34 pixels, save that, and we'll see that our
24:39
input is now the same height as our button. We also want to change the width of this input to be quite a bit smaller, so we'll use a
24:47
width of 50 pixels, which should be enough space in order to put our text and have these
24:52
buttons for incrementing and decrementing the number inside of here. The next thing we want to do is we want to give it a border radius, so it has slightly
25:00
rounded corners, we'll give it a border radius of 5 pixels, we'll give it also a border that's
25:06
going to be 1 pixel, it's going to be solid colored, and we want it to be the same exact
25:11
color as our buttons up here, so we'll just copy that background color from our button
25:18
and we'll paste that in here. Now when we save that, you'll see that we now have our border around our element, which
25:23
is great. We need to give it a slightly darker colored background, which is just slightly darker
25:30
than white, and if we save that, you can see that. We want to change our text color to be slightly darker, and then we want to make sure we have
25:40
no padding around this element at all, and if we save that, our input element is starting
25:45
to come together, we just want to move our text to the center and make it slightly bigger here
25:51
So we'll do text align center in order to center align our text, we'll use a font size
25:56
here of 1.2em to make our font slightly larger, and then lastly, let's use some margin on
26:02
the right here, 25 pixels, in order to separate our input from our button, and if you save
26:08
that, you see that now, this looks a lot like our mockup over here for our button and input
26:15
And that's pretty much all we need to do in order to style our row properly
26:19
Now I'm going to copy these styles from this row onto the second row, and see what we have
26:24
from there. And there we go, that's all the styles that I'm going to need in order to make this, we
26:46
can also remove the HR down here at the bottom, and we can also remove this cart quantity
26:53
button class, since we never actually ended up using that class, so let's remove that
26:57
from both of our buttons here, and save that, and you'll notice that everything still looks
27:02
exactly the same. You will notice however though, that our underlined borders here, don't quite look the same as
27:08
over here, as you can see we have a solid border on the bottom for our last row, and
27:13
over here we have a separated border on the bottom. In order to do this, we can use the last child selector in our CSS in order to change the
27:21
border for the last child. But the child element selector only works for the last child inside of a container
27:29
and right now, these cart rows are not the last child of the container that they're inside
27:34
as you can see this div right here is the last child. So let's wrap the rows of our cart here inside of a container, and we'll just give this container
27:44
here a class of cart items. Move this div down to the bottom here, now we can indent all this so it looks pretty
27:57
save it, and you'll notice nothing over here actually changes, which is perfect, but now
28:02
when we select the last child of the cart row, it'll be this cart row right here, since
28:07
it's the last child of this cart items container. So now let's do that inside of our styles.css here
28:14
First thing that we're going to do is select the cart row, last child of it, and in here
28:21
we're going to use that border-bottom property in order to set a one pixel solid black border
28:28
that is going to go across the entire row here. If we save that, you'll see that we now have one solid border on the bottom, but we still
28:35
have our individual borders that we want to remove. To do that, we'll again select the cart row last child, but we'll also select the cart
28:44
columns that are children of that actual cart row, and we'll remove the border from them
28:52
If we save that, you'll see that now we have removed these individual borders, and all
28:56
we have is this solid lined border right here on the bottom, and that looks exactly the
29:00
same as over here, which is perfect. Now all we need to do is style this total section and this purchase button, and we'll
29:09
be done with this entire band website. Let's first start by going into our HTML and adding some classes that we can select
29:16
these elements with. First, we'll use the class here of cart-total that'll wrap our total and the price of the
29:24
total, and then we'll also use class here of cart-total-title, since this is going to
29:33
be the title of total, and then in here we have the class of cart-total-price, since
29:40
this is the actual total price, and then inside of our styles.css, we can select those, so
29:45
we have cart-total, which is the row that wraps all of these, we'll give that a text
29:51
align of end, so that our text will go to the end of the line here, just as it does
29:57
over here, and then we can use the selector for our cart-total-title in order to change
30:04
the actual text here of this. The first thing we want to do is make the font-weight bold, since it is bolded in our
30:11
design, so we'll change that to bold, we'll increase the font-size to 1.5em, make the
30:18
color black so it stands out, and we'll give it a little bit of margin on the right side
30:24
that way it'll be spaced away from our actual price, and we'll just say 20 pixels for that
30:29
and if we save that, that's starting to look a lot like over here, which is great
30:34
Last thing we need to do is just style the actual total price, so we can use cart-total-price
30:41
to select that, and give it a color that's slightly darker, and a slightly larger font-size
30:49
just so it sticks out a little bit more of 1.1em, and if you save that, this now looks
30:55
almost exactly the same as this, but you'll notice that our total is very scrunched up
30:59
here against the bar, so we just want to add a little bit of margin, so we'll say
31:04
margin on the top here from our cart-total is going to be 10 pixels, and we'll also add
31:11
a margin on the right of 10 pixels, so that our total isn't squished right up against
31:15
the edge of our screen, and instead it has a little bit of extra space, and that looks
31:19
great right there. Our cart section is now exactly as over here, the only thing we have
31:24
left to do is this purchase button, which will be fairly simple, since most of the classes
31:28
we have are already defined. Let's go back to our store.html here, we can remove this
31:34
div that wraps this section, since we don't actually need that, and inside of here, we
31:39
can add some classes of button, and button-primary, since this has the primary colored button
31:46
and we'll also add a class of button-purchase, since this is going to be a purchase button
31:50
and if we save that, you'll see that we already have styled here from the primary button class
31:55
and if we go into our styles.css, we can add some styles specifically for this purchase
32:00
button here. The first thing we want to do, change the display to block here, so that way
32:06
we can center this button by using auto margins, so we'll use a margin here, on the top, we want
32:13
40 pixels to space it away from our total section, on the left, we want auto margin
32:19
on the bottom, we want 80 pixels, and on the right, we want another auto margin, and if we
32:25
save that, you'll see that our purchase button is now centered with padding, or margin I mean
32:29
on the top, and an even larger margin on the bottom, to put it away from the footer. The last
32:34
thing we want to do, is increase the font size to 1.75em, so that it is a much larger button
32:41
and there we go, that looks great, and that's a huge button for them to click when they want
32:44
to purchase their items. Now all we need to do, is style the footer down here, and this is going
32:50
to be very easy, all we can do, is go into our index page here, we can copy our footer, since
32:55
we know it's exactly the same, and we can just paste that into our store HTML, and if we save
33:01
that, we now have the footer down here, and it looks amazing, this looks exactly as the page
33:06
over here, and as we increase the size of our browser, our elements will flow naturally around
33:13
each other, you'll see all of our columns stay lined up here, no matter how large, or how small
33:18
our browser is, everything looks great, and that's pretty much all there is to creating this store
33:24
page for our band website. I really hope you guys were able to learn something from this video
33:28
where we walked through the store page of this website, and I hope you also learned some things
33:32
from the other videos, where we discovered how to do the home page, and the about page for this
33:36
band website. The next thing that we're going to tackle for this band website, is making this form
33:42
down here interactive, so increasing the quantity here for example, will increase the total down
33:46
here, removing will actually remove it from the cart, and clicking any of these add to cart buttons
33:51
will actually add elements to the cart down here. This is going to be done through JavaScript, which
33:56
is the third and final element that we need to learn, in order to understand everything we need
34:00
to know about front-end web development. So thank you guys very much for watching this video, if you
34:06
enjoyed it, please leave a like, and if you guys want to know anything more about those CSS
34:10
properties as I mentioned at the beginning of the video, please leave a comment down below
34:14
letting me know which properties you want me to delve more in depth into, and I'd love to
34:18
do that in future videos. Thank you guys very much
#Online Goodies
#Skins
# Themes & Wallpapers