Up next in 10
CSS Tutorial For Beginners 53 - CSS Website Build Part 2
294 views
Feb 8, 2024
The video "CSS Tutorial For Beginners 53 - CSS Website Build Part 2" is likely a continuation of a tutorial series aimed at beginners interested in building their own website using Cascading Style Sheets (CSS). In this second part, viewers can expect to further develop the website layout started in Part 1, adding more advanced styling and functionality. In this installment, the tutorial may delve into topics such as refining the design with more intricate CSS properties, implementing responsive design techniques to ensure the website looks good on various devices, and adding interactivity using CSS transitions or animations. By following along with this tutorial, beginners can expand their knowledge of CSS and gain practical experience in building fully functional websites. This series likely provides a comprehensive guide to creating a complete website from scratch, empowering viewers to apply their skills to real-world web development projects.
View Video Transcript
0:00
Yo, what's up guys, you're watching CSS for Beginners Lesson 53, and this video
0:11
is going to be part two of the CSS website build. Alright, guys, so we're just going to start off where we left in the last video, and if you
0:19
remember, I showed you we had this simple HTML file here, and we started to style it with these
0:24
styles, and that gave us this nicely styled nav bar right here
0:29
So we're just going to carry on and crack on with the rest of the page. So the next thing I want to do is just knitting up this image here
0:36
If you look to the very right of it, it's got this very thin white line
0:40
And that's the background under here peeping through because the image is not the full whip
0:45
So we're just going to make this image here stretch all the way across. So to do that, I want to find it in my HTML
0:51
It's this image right here. And it's within the lead banner ID
0:55
So we'll copy that. come down here and we'll target it in the CSS and we'll say we want the image within
1:02
that bleed banner div and we're just going to say width 100% and then that scoots it right
1:08
across gives it 100% width of this wrapper so it's taken up all the room and we no longer
1:14
have that thin white bar at the end cool so next thing we want to do is come down here
1:19
and style these things up and to do that we're going to go after this shop div
1:24
is everything's within the shop so we're going to going to grab that copy it and paste it down here and the first thing I want to do is
1:36
give this a margin of 30 pixels and then zero left and right so I'm just going to give it
1:45
this space in here and at the bottom here so it's away from both banners the next thing
1:51
I want to do is give it a text align property and
1:56
we going to say center and now everything scoots into the center there that really cool so text align not only affects text when you got that inside you did but also images So it centralises everything within this column
2:10
So that's really cool. So the next thing I want to do is style up that product name right here
2:16
So to do that, I'm just going to give us some room down here. And I'm going to say shop h2
2:22
dot product name because up here you can see it's H2 it's got a class of product name
2:29
so that's what we're grabbing there and we'll say we want that to have a few styles and the
2:35
first one is going to be a font size oops font size 16 pixels so we just reduced
2:45
that in size a little bit and we're going to give a margin bottom of zero because we want
2:50
it to be right up against the price when we style that And that's all we need to do for that. The next thing I'm going to do is grab the price
2:57
So that's a span tag and it's got a class of price. And let's display that first of all as block
3:07
And then what that does, my friends, is because we're giving it a block display type
3:12
It's going to take up the whole row. Remember, block level elements take up a whole row
3:16
And inline elements are stacked sides aside. That's why it was stacked side to side with this and this
3:21
initially because these three are all by default in line elements so we give that a display of blocks
3:25
which is taking up now the whole row and it's forcing these two onto the next line which is cool
3:30
because we want this to have its own row so the next thing we want to do is increase that font size
3:36
we're going to say we want it to be a lot larger at 58 pixels and then that's going to make it
3:43
roughly the same width as this thing here so it looks nice and neat all right so the next thing
3:47
we want to do is grab this link here and make it into a button so to do that
3:51
we're going to say shop and then it's an a link and it's got a class of add hyphen 2
3:58
hyphen bag and that this link right here so let style this up and the first thing we want to do again is give it a display of block That going to give it the whole row
4:10
We'll force the stars onto the next line. Then we'll give it a colour of that beige colour again
4:14
which is, if I can remember properly 8F746C, I think. Yep, there we go, cool
4:24
Then we'll give it a text transform property of uppercase. Make them all capitals
4:30
and we'll give it a font size of 12 pixels make it a little bit smaller that's fine
4:36
text decoration of none because we want to remove that underline if I just
4:41
scoot off this you can see it's currently underlined we don't want that so we'll just put none that takes away the underline we'll give it some padding we'll give
4:51
it 10 pixels top and bottom left and right I'm gonna give it zero because we're
4:55
gonna make this a definite width so we don't need to give it the padding on the left and right and the next one is going to be a border and we're going to say two
5:04
pixels solid and we're going to say that same beige color again so what was
5:10
that this this thing here let's copy and paste that because I'm being a bit lazy
5:15
and put that there yep and then we'll give it a width of 210 pixels so if I just
5:21
scoot off this a minute you can see currently it's got that default width of 100% because it's a block level element because of this
5:28
here so by default is taking up the full width we don't want that width we want
5:33
to give it a definite width which is gonna be kind of this size here the same
5:37
width as this and this so that's roughly about two hundred and ten pixels but now
5:42
you can see it's gone off to the left over here now I don't want that I want it to be in the middle so remember from the margin lesson I showed you that trick and
5:50
also in part one of this tutorial where we say margin we'll give it 30 pixels
5:56
top and bottom no we'll give it 20 pixels 20 pixels top and bottom and then for the left and right we just say auto and then that scoots in right to the center okay so that all we want to do for that button Now it looks nice and cool I would like a hover effect So let put one of those in Let get this and add a pseudo class to it
6:16
Now we've covered pseudoclass, remember. It's just a colon that we put after our selector
6:21
And the particular pseudo class we want for this is the hover one, because we're giving it a hover effect
6:26
And we'll just change the color to white and the background of the button to that beige color
6:32
which is 8F746C. Cool, so let's check this out now. Oops, that's not working
6:40
Oops, I didn't put the background property in, that's fine. Okay, there we go
6:44
Cool. So, there's our button. The stars don't really need styling. They're all in the middle
6:51
They've got that margin there. This bottom image does have that thin gap there
6:57
where the white is poking through, so we're going to get rid of that as well. now that image is within this div the footer banner so let's copy that and give that a rule down here
7:10
and then we'll say the image within it is going to be a width of 100% and boom there we go guys
7:18
that is completely done how long has that taken me what seven minutes in this lesson and about
7:23
10 minutes in the last lesson so in under 20 minutes I've styled that with CSS and made a website
7:29
The HTML took about five minutes. This took about 20 at most
7:33
So 25 minutes. We've got ourselves a one-page website. That is how simple it is, guys
7:39
If you have any questions, obviously, feel free to comment down below
7:43
Otherwise, take this, go out, mess with it, make your own websites. You can do it
7:48
And I'll see you guys in the next video. Don't forget to subscribe if you enjoy or please like or share
7:53
I'll see you guys then. You know
#Skins
# Themes & Wallpapers