004 – Building a Website From Scratch – HTML/CSS Tutorial
In the previous episode, we covered how to add a bit of style which I think has set us up enough to wipe the slate clean and start building a fully functioning website. This is where the skills you have learned will start to come together to become more useful.
We are going to build a website with a header, navigation, main content area, sidebar and footer.
One thing I will say before we start is I am going to concentrate introducing you to some of the core aspects of CSS here. So I will be using div tags instead of some of the new semantic HTML5 tags because that would confuse things for some people. I will introduce HTML5 tags slowly for now and will cover them in more depth in more advanced episodes.
These days the first thing you usually come across is a nav bar, so let’s start with that.
A nav bar uses the list tags we came across before, however we are going to add some styling to remove the bullet points and make it go horizontally.
So to get setup we are going to input an HTML5 “nav” tag, followed by an unordered list with links inside, which we won’t point anywhere just yet.
The “nav” tag is just like the div tag in that it won’t do anything by itself.
Now let’s add some styles inside the style tags.
There are a lot of new things going on here so let’s look at what is going on.
The first new thing here is that we aren’t using a “.” when targeting an element. We only use a “.” when we are targetting classes.
We have removed the bullet points for the unordered list by adding “list-style:none;” to the “ul” tag.
We can also see the use of multiple selectors where we have targetted “nav ul li”. What this is essentially saying is only target the “li” which is inside a parent “ul” tag and which is only inside a “nav” tag. If we were to have a list outside of the “nav” tag then these styles would not apply.
As you will see we have set the “li” to an “inline-block” which is what has changed the list to go from verticle to horizontal.
Lastly, we have added some styling to the “a” tag where we have targetted “nav ul li a”. You will recognize most of the styling from the last episode, however one new style here is the “text-decoration:none;” style which simply removes the underline that comes by default on the “a” tag.
Container and page padding
First off we can see that our nav is padded in from the top and sides of the page. We are going to add a simple reset style that will remove all default padding and margins from the page.
Now unless you want your website to be full width then you will want to add a container which will constrain the content to a section of the page.
To do this we are going to add a div tag inside our nav tag surrounding our ul and add the class container. Then we can add a “.container” style and add some CSS which will constrain the width and center the box.
So the magic that is going on here is the “margin:auto;”. This is what is causing the container to center on the page. You can also see that only the contents of nav have been centered and the background is still full width. If we had put the container div tag outside of the nav then it would have stopped the background being full width too.
So the next thing on our list is the header. In this case, we are just going to add a large banner image to keep things simple. One thing that will be different to the last time we added an image is that we are going to host the image ourselves instead of pointing to a remote resource.
So first off we are going to add a folder called “img” to the root of our site. Then we can place our banner image in there. I will just call my image banner.jpg to keep thing simple.
We will also stick our header inside a container.
So your file structure should now look like this
To target the file you just add the folder name then a “/” and the file name.
As you can see I have added a couple of new attributes, “alt” and “title”. The “alt” attribute is what will display if the image can’t be displayed. This would happen if someone is viewing on a screen reader or if the image can’t be loaded or found. The title tag will show text if you hover the image.
For the sake of SEO, it is recommended to have at least an alt tag.
Right, so there is a clear issue here where the image is breaking outside of the container. What we need to do is add a class to the image and add a width of 100% to the styling which will cause the image to scale to the correct size.
Main content area and sidebar
Next up we are going to create the main content area. There are a couple of ways to do this. We could just use two div tags with classes or we could do it the HTML5 way and use semantic tags which helps Google understand what is on the page. For now, we are going to keep it simple and just use some div tags.
Now you will see that we have added an “inline-block” style and set the widths however a new style we have here is the “float” style. We will cover the float style in more detail later, however basically what it does is cause the div to float to the left of the container. You will notice we didn’t need this before when using “inline-block” and this is because if the inline-block elements go to 100% width then they will break to a new line, which obviously we don’t want. Floating both divs to the left fixes this.
So now that we have the areas created let’s just fill it out with some basic content.
So to start off we have filled in the “main-content” area. We are using some new techniques here again.
First off we are chaining styles where we have put “h1, h2, h3, h4. p”. If you separate out your styles with a comma then you can apply the styles to multiple elements in one go.
Next up we have added “margin-right” to our box. The difference between using a margin and padding is, a margin applies to the outside of the element and padding applies to the inside. You will get used to this as you use them.
Now because we want to display 3 boxes horizontally we can express this as a percentage which would be 33.33%, however we need to account for the margin, so what we will do is use 3.33% of that for the margin, which gives us a 30% for the box width and 3.33% for the margin.
CSS grids have been released recently so once we get into more advanced tutorials we will explore these. Just in case anyone is wondering why I never used them here.
So we are just going to add a sidebar navigation here to keep things simple. We covered how to make a navigation using an unordered list when we did the horizontal navigation at the top. The only difference here is that we aren’t going to make the elements inline blocks.
So this should mostly be pretty self-explanatory. The catch here though is if you add padding to the sidebar then what it will do is make the box bigger rather than pad out the content to the inside. The way to make it apply the padding to the inside of the box rather than increasing the size is to use the “box-sizing: border-box;” style.
Another little annoying thing you will come across when using floats is that elements that come directly after the floated elements that aren’t floated won’t act as expected.
The way we fix this is by adding a div with a “clearfix“ class, then we can add a style “clear:both“.
What this does is tell the non floated element to clear both left and right floated elements so that it appears after the floated elements, where you would expect them to be.
So you are going to put the clearfix div straight after your last floated element. Which in this case is the sidebar.
And to finish things off we are going to add a footer. Normally a footer holds at least the copyright info so we will add that and explore how to add symbols in HTML.
So you can see we have used “©”. These HTML symbols are pretty common and should be used for any symbols you need to display to the screen, including currencies. For example, if you want to display a GBP pound sign (£) then you would enter “£”. I will make a post including all of them soon, however if you need to find a symbol then a quick google search will usually give you what you need.
So this has been a pretty beefy episode and we have covered a lot of ground.
In the next episode we will be looking at adding a bit of responsiveness to the page, because currently it won’t look very nice on smaller devices.
If you would like the complete source code for this tutorial then you can gain access for only $2.
The reason I have chosen to charge for this is it helps massively when creating these articles to have even a small amount of funding to make all of this viable. So if you feel like supporting me then it would be massively appreciated :).