Are you ready to build up your first website? Before using this blog post let’s go through this checklist:
- Do you know your HTML tags?
- Do you understand how CSS works?
- Have you created a design for your website?
- Have you created the folder structure for your website?
- Have you gathered the assets / graphics for your website?
If the answer to all questions above is “yes!” then you are ready to implement your website using HTML and CSS.
The first task is to create the overall layout of your webpage.
Compare your design with the following layouts. Would one of these be suitable to implement your first webpage? If so you can check how it’s made by clicking on the pictures below to display the page in full view and check its source code.
Customising the Layout
Now that you have a layout you will need to customise the CSS to:
- Resize the width and height of the different sections to match your design, (See video tutorial below)
- Change the background colors or add gradients for each section, (See video tutorial below)
- Customise other CSS attributes to add shadows, borders, margin and padding for each section, (See video tutorial below)
Creating a standalone CSS file to reuse across multiple web pages
Check this blog post on how to use a cascading stylesheet across multiple web pages.
Once your layout/template is ready, you can start adding content to the different sections.
Check the following blog posts to help you do so:
- Adding Pictures
- Using CSS with Pictures
- Using CSS with Text
- Using Hyperlinks
- Adding a FavIcon
- Adding page transition effects
- Interactive Add-ons to use on your website
- Using Google Fonts
Responsive Website Layout
Check this block post to make your layout responsive.