Introduction

This tutorial aims to guide you through the process of creating your first web page with the use of HTML5 and CSS3 styles. To allow you to continue it is best to think of the HTML5 code as the bricks of a house. It defines the structure and the content of the house. CSS3 is the wallpaper and paint of a house. It defines how each section should look.

You should be able to follow this guide with little to no previous knowledge of any computer programing. It does assume that you are able to carry out operations such as ‘File>>New’, ‘File>>Save’, Opening a file and refreshing your web browser.

Final Project Preview
The simple site that we will create

For this tutorial you will need code editing software. We have used Adobe Dreamweaver for demonstration purposes, however any software will do.

Web pages can be created using any text editing software including Notepad.
We recommend Brackets as this is FREE and also very powerful should you wish to enhance your knowledge.

So with your code editor in hand let’s get started.

Creating Your First Page

In Adobe Dreamweaver creating your first page could not be easier. Simply open Dreamweaver, select ‘New Document’, type in a title such as “HTML5 Basic”, select ‘Doc Type:’ as “HTML5” and press ‘Create’.

01 New Doc

When the New Document loads you will have to switch to ‘Code View’ for this tutorial.

02 Code View

If you are not using Dreamweaver then don’t panic. All you have to do is create a new blank file.

For those using Dreamweaver you will notice that in ‘Code View’ some code will already have been inserted for you.

If you are not using Dreamweaver then simple type this code into your document.

03 Essential Code
This is essential coding to ensure that your page is displayed by web browsers accurately.

Before we go any further ‘Save’ your document in a suitable folder and call the file “index.html”. By calling your file index you’ll ensure that this is the first page to display when you access your website.

Writing Our First Lines of Code

We’re going to start off simply by typing the following lines into our code.

05 Header then Save

When we type code that we want to display on the browser, we enter them between the opening ‘<body>’ tag and the closing ‘</body>’ tag.

These three lines of code are very basic. Using ‘<header>’ tag we are creating a pre-made ‘div’ (divider). You can think of these as BOXES in which we can put more code/content into. We can even add more boxes inside another box.
To complete the box structure, it is important to close the tag using ‘</header>’. This tells the browser that there is no more content to be put into this box.

In between the ‘header tags’ we can enter our content. In this case we simply add the words “I’m in the header” – You can type whatever you like in here and it will display in the browser just fine.

To see what our web page looks like we first have to ‘Save’ our file and then ‘Preview’ it in your web browser.
Once you have saved the file, in Dreamweaver select ‘File >> Preview in Browser’ and select your prefered browser from the list. We recommend using Google Chrome or Firefox when developing a web page as they are the most popular browsers on the web.

06 Preview

If you are not using Dreamweaver, locate the ‘index.html’ that you created and right click on it. Select ‘Open With..’ and chose a web browser such as Google Chrome or Firefox

Once opened in a web browser of your choice, your preview should look like this.

Pretty boring as far as web pages go
Pretty boring as far as web pages go

Simple Page Structure

Ok so we’ve added content into our web page but it doesn’t look too great. We’ve set up our first container/box/div and we’ve added some content. HTML5 comes with a load of predefined containers including the ‘<header>’ that we have already used.

In this tutorial we will use ‘<header>’, ‘<main>’, ‘<article>’, ‘<aside>’, ‘<footer>’ and ‘<h1>’. These tags are designed to make our code simpler to write and also for others, including web browsers and search engines to read.

The first of these tags that we’ll add is the ‘<h1>’ tag. We’re going to wrap our header text in ‘<h1>’ tags. Remember we need an opening ‘<h1>’ and a closing ‘</h1>’ tag for this to work.

08 h1

Again we can ‘Save’ this and ‘Preview’ it in your browser.

You will see that the text that we have placed inside the ‘<h1>’ tags now appears larger than before. This is because CSS3 (the style of your web page) has some predefined styles for the ‘<h1>’ and many other tags.

Now that we know how to use containers we are going to set up the rest of our page structure using some of the tags we mentioned earlier.

At this point you can type in the code as follows.

10 Page Structure

In the real world these containers would hold some useful information usually:
<header> – Would display the website information i.e. name and logo.
<nav> – Would display the web site menu.
<main> – Holds all the data that has to be displayed.
<article> – Would display the page content and images i.e. information.
<aside> – Would usually appear at the side of the page and include secondary information.
<footer> – Would display contact and copyright information.

Looking at most websites it can be fairly easy to spot these sections.

We can preview the changes we have just made in our browser. Remember to ‘Save’ the file before trying to preview.
You should have something that looks like this.

11 Structure Preview

Adding Styles

So we have our web page with the structure we want but it doesn’t look very good or very organised. By default the browser will display each container stacked on top of each other.

To make these containers stand out we can add styles to them using CSS3. There are a few options of how to add styles but for the purpose of this tutorial we are going to add them to the top of our HTML code.

To do this we must write a block of code within the ‘<head>’ tags. This is the simplest way to add styles but not the most common. In future lessons we will add the styles on a completely separate file and create a link to that file.

Add the following code just below the ‘<title>’ tags.

12 Inline Style

This block of code tells the browser that it will contain all of the styles for this page between the opening ‘<style>’ and the closing ‘</style>’ tag. This method of adding styles requires the styles to be entered onto each individual page within your website. As you can imagine this is not very convenient as one change would have to be changed on every page. However for the purposes of this tutorial it is easier to work with one single file.

Get Creative!

Within the style tags we can declare many styles on each container on our page for example we can add a colour to the background of our ‘header’ container. To do this we must first of all type the word “header” followed by a “{” and a “}”. Within the curly braces, { and }, we apply our styles.
Below is an example of how we would add a colour to the background of the ‘header’.

13 Header Style
Notice we use the American spelling of Color not Colour

The layout of your CSS is quite important, if you can ensure that your style is indented and the curly braces are as above, then your code becomes much easier to read when you have to make a change.

For colours in CSS there are many ‘named’ colours but there are many many more colours to choose from using hex code ‘#a1b2c3’ using a colour picker will soon make you very familiar with using this type of code, but for now we will just declare named colours.

For each container there are too many style properties to discuss, that you can change. For this tutorial we will focus on a few.
In this example we will add a ‘width’ property as well as a ‘height’ property to the <header> container and preview the results.

14 Header More Style

15 Header Preview

The above code shows two different methods of declaring sizes. One uses ‘px’ which stands for “pixels” and the other is ‘%’ which is measured by the size of the screen in this instance.
As you can see from the ‘preview’ the <header> container is the full width (100%) of the page and it has a height of 100px, as well as the light green background.

For each of the other containers we are going to declare similar styles but with different measurements.
You can type in the code from the example below.

16 All Styles

You may notice that ‘main’, ‘article’ and ‘aside’ have different properties that we have yet to discuss but we’ll get onto that next. Without these additional properties our web page would look rather different.

This is without the extra styles in 'main', 'article' and 'aside'
This is without the extra styles in ‘main’, ‘article’ and ‘aside’

While you design and style your webpage you can play about with each of the style properties. This tutorial will try to explain the simple use of Flexbox within CSS3.

CSS3 Flexbox

Flexbox is a relatively new addition to the CSS3 library. It is designed to help developers create clever layouts that can ultimately be edited quickly and easily when displayed on different devices.

This tutorial will only use Flexbox to aid the layout of the ‘<article>’ and the ‘<aside>’ containers.

The coding that belongs to Flexbox are on lines 22, 28 and 34 of this code snippet.

18 Flex Styles

As we have our ‘<article>’ and ‘<aside>’ containers within our ‘<main>’ container we have to tell our browser that we want to use flexbox properties. To do this we declare our ‘<main>’ container’s ‘display’ property as ‘flex’.
By default the browser will try to display all containers within ‘<main>’ on a single row which we want our page to do.

We also want to make sure that our ‘<article>’ container is larger than our ‘<aside>’ container. To do this we could have declared the widths of these as 70% and 30% however Flexbox makes it even easier for us. Using ‘flex-grow’ we can tell the browser that we want ‘<article>’ to be twice the width of ‘<aside>’ by declaring that in ‘<article>’, ‘flex-grow’ is 2.

There are many more powerful things that can be achieved using CSS3 and Flexbox. For more information on Flexbox check out CSS Tricks guide to Flexbox

17 Styles Preview

Where to Next

So now you have the very basics of building a website, where should you go next? Well next we must introduce divs (containers that we name ourselves) and classes (styles that can apply to many containers). We must also discover how to move our styles to a separate file so that we can use them over and over again. After that we will look at media queries within our CSS which will allow us to alter styles depending of the device or screen size that our page is viewed on.

Thank you for reading and hopefully using this HTML5 and CSS3 Tutorial.

Introduction to HTML5 and CSS3
Like this? Share thisTweet about this on Twitter
Twitter
Share on Facebook
Facebook
Pin on Pinterest
Pinterest
Share on Reddit
Reddit
Tagged on: