Up next in 10
CSS Tutorial For Beginners 52 - CSS Website Build Part 1
1K views
Feb 8, 2024
The video "CSS Tutorial For Beginners 52 - CSS Website Build Part 1" is likely the beginning of a tutorial series aimed at beginners interested in building their own website using Cascading Style Sheets (CSS). In this first part, viewers can expect to learn the foundational steps of creating a website layout using HTML and CSS. The tutorial may cover topics such as structuring the HTML document with appropriate tags for header, navigation, main content, and footer sections. Additionally, viewers may learn how to apply basic CSS styling to these elements to define their appearance, such as setting background colors, fonts, margins, and padding. By following along with this tutorial, beginners can gain practical experience in creating simple yet functional website layouts using HTML and CSS. This series likely provides a step-by-step guide to building a complete website, empowering viewers to apply their newfound knowledge to create their own web projects.
View Video Transcript
0:00
Yo, what's up guys? You're watching CSS for Beginners Lesson 52, and this is going to
0:11
be part one of a CSS website build. Alright, so these website build tutorials are going
0:17
to be split up into two videos, and to follow along with them to the full extent, you're
0:21
probably going to want to download the files I've already created, alright? So that's the HTML files, all the image files, and the finished CSS file. Now, I've uploaded them
0:30
for you guys here onto GitHub, so all you have to do is come to this address, I'll pop
0:35
that in the description down below, and then click this download zip button right here
0:39
That's going to download a zip file with all the website files in it, you just unzip that
0:43
on your computer, and hey presto, you have the finished product. Now, if you want to
0:48
delete all the CSS in that product from the style CSS file, you can, and we'll add it
0:54
together, otherwise if you just want to follow along and kind of tweak the design yourself
0:57
feel free to do that also, it's up to you. But once you've downloaded that, join me back
1:01
here and we'll start making this website. So, here it is, this is the website, we're
1:06
going to build a nice, respectable bike selling website, nothing wrong here. And essentially
1:14
you can do this with everything I've taught you in this CSS playlist. We're not going
1:17
to use any advanced features whatsoever, everything I've taught you can be utilised to make a
1:22
webpage like this, how cool is that. So I'm going to show you exactly how to do that right
1:26
now in the code. Alright class, I'm back here in brackets, and what I've done is just put
1:32
a vertical or horizontal split on, should I say here, so we've got our HTML at the top
1:37
and our CSS at the bottom. I've also clicked this little button here which gives us a live
1:41
preview in this window, that's a cool feature of brackets, so as I make changes here, it's
1:46
going to automatically update over here so we can see as we go along what is happening
1:51
So before we start, I'm just going to increase this font size a little bit so you guys can
1:55
see and I'll just quickly go through the index file which is here. So, we've just got a dead
2:02
simple head with the title of bikes and then we've linked up the style sheet there. Down
2:07
here we've got this div idea wrapper that's enclosing all the content on this page and
2:12
that's basically going to just bring the content into a middle column of like 980 pixels in
2:18
width or something like that. Then within that we've got our nav of main navigation
2:22
that's all these links here, and you notice as I hover over some of the elements or click
2:26
some of the elements, it kind of highlights it over here, that's really cool. But anyway, that's the main navigation with some LI tags and some A tags in there. Then we've got this
2:34
div idea of lead banner with an image in it, that's just this here. Then the section with
2:39
an idea of shot, this is a HTML5 element by the way, as is this nav, they're pretty cool
2:44
elements, just semantic elements, that's all. Within this section of shot we've got
2:49
our product image, our name, price, the button and the star rating. Then right down at the
2:57
bottom of this page we've just got this funky image of a bike which is here with the idea
3:01
of footer banner and God knows what that block is there, apparently it's just going to make
3:06
your bike even more awesome. So, yeah, that's the website. Alright, so let's start adding some styles then. Now we're going to start with the body
3:16
tag because I want to give the body tag some basic styles that are going to be inherited
3:22
throughout the document, and the first one is the font family. I'm going to say I want
3:25
everything on this page to be Arial. Now, we know through inheritance that because I've
3:30
given it to the body, that every tag within the body is going to inherit that style, therefore
3:35
everything should now be Arial. These links are, and this text down here is. Cool. The
3:40
next thing I want to do to the body tag is give it a margin of zero. Don't want it to
3:45
have a margin. You see how it budged up there to the left? So, we've taken that away from
3:49
it and the third thing I want to give to it is just a background colour, and we're going
3:54
to make it a light grey which is just EEEEEE. Now, a little trick, if you've got six letters
4:00
here or numbers that are the same, we can shorten it down to three. That's exactly the
4:05
same. So, I'll do that, and then we'll tag it our wrapper ID which is just ID wrapper
4:12
and then this is the one that I want to bring in to a central column, so I'm going to give it a width of 980 pixels, and then remember that little technique I showed you where we
4:21
say margin. I want zero for the top and bottom, and then auto for the left and right. That
4:26
centralises it, remember. That's all in my previous tutorial on margins. Go and check
4:31
that out if you've not seen it. The last thing I'm going to do is give that a background
4:37
of white which is just FFF. So, we've done that, and next I want to target this main
4:43
navigation section here which is going to contain all of these links, so I'll just grab
4:48
that main navigation, and then within that I want to give it a background of like a really
4:57
deep charcoal grey which is going to be 181818. Okay, cool. You can see that update on the
5:04
right, and then I want to give it a padding of 10 pixels just to give it some space all
5:09
the way around like that. There we go. Cool. So, next we'll grab the UL tag within the
5:14
main navigation, and let's just scroll down here a bit. I'm going to say that that UL
5:24
I want to align all the text to the right. That's going to bring all the links now over
5:31
to this side. I'm going to say also that I want the list style type to be none. Now remember
5:41
that's going to take away those dots here, so if you see before I add that none, you
5:45
see those dots there? They come as standard with list items. I've taken them away with
5:49
that property there, and finally we'll say we want the margin right to be 10 pixels just
5:57
to give it a bit more space on this side. Okay, the next thing I want to do is tag those
6:02
LI tags within the UL, so main navigation again, and then LI. And this time I want to
6:11
say we'll display them inline block because remember block elements automatically take
6:16
up this full width here. That's what they're doing currently. If we display them inline
6:20
block, we're giving them the best of both worlds. We give them those block level qualities
6:26
so we can control the box model properties, but we also say we want them to line up next
6:30
to each other much like inline tags. Okay, so we'll say display inline block, and that
6:39
brings them all up next to each other, and we'll give each one of those a margin left
6:47
of 20 pixels. That's going to space them out a little bit. Alright, cool, so now we've
6:52
done that, we just need to target, let's bring this down a little bit, the A tags within
6:57
those LIs. So main navigation again, we'll say A, and we don't need to go like this
7:04
UL, LI, we don't need to get really specific because these A tags are the only A tags within
7:09
the main navigation, so this will do fine. And with these, we'll say we want to give
7:15
those a color of white, which is FFF, text decoration of none, this is going to take
7:24
away those underlined rules underneath the A links, and then we'll say we want to text
7:32
transform, and we're going to make these uppercase, and then finally, we'll give them
7:42
a font size, oops, let's do that properly, what have we done there? Okay, there we go
7:51
font size of 14 pixels, and in fact, one more thing, I'm going to give those a padding of
7:59
6 pixels, cool. So they are the links at the top of the page now. Now I'm going to do one
8:06
more thing, I'm going to scoot up here, and you see this class here of current, that's
8:13
where we currently are, that's the page we're on, because that's what this current class
8:17
means. Now I want to style this a little bit differently, so what I'm going to do is make a rule for that down here, I'm going to say main navigation A, and then the class is current
8:27
so we go A.current, and that's going to grab that A tag with the class of current, and
8:33
with this, I want to give it a different background color, I want to give it a background of that
8:37
beige color you saw on the finished product, and the hex code for that is 8F74, if I can
8:46
remember this, 6C I think, yep, there we go, cool, you can just see up here it's changed
8:51
now, and then let's give that a border radius as well, let's give it a border radius just
8:57
a small one of 4 pixels, makes it look a bit different. Alright, so there we go guys
9:03
that is the head a little bit styled. So that's all I'm going to do for this lesson, believe
9:08
it or not, in the next lesson I'm going to cover the rest of this, and we'll probably have it done in 5 minutes, I kid you not, and yeah, I'll see you guys then for the final version
#Bike Frames
#Online Goodies
#Skins
# Themes & Wallpapers