11

Creating the website

Setting things up

It’s important that we are on the exact same setup for this chapter, as I will be introducing some tips along the way that you will really benefit from, going forward. So for clarity, I will be using Sublime Text as my text editor, Google Chrome as my browser and Photoshop as my image editor (you don’t have to use Photoshop, but it would be ideal to mirror my setup as much as possible for the maximum benefit).

A quick note before we start: some of these challenges will be outside the scope of what we have learned so far and will stretch your knowledge and understanding of web design. In these circumstances, you can either have a go at working out the solution yourself, or you can google the challenge and find the answer that way. A huge part of web development is finding solutions to problems you face online. Learning how to google an issue you are having is a fundamental aspect of web design.

Great, now that we’ve got that out of the way, let’s start coding!

The homepage

HTML

The template

Let’s kick things off with the page template that we will be using for our homepage.

The steps:

• Create a new folder in a directory of your choosing, name it whatever you want.
• Head over to Sublime Text.
• Open the folder in Sublime Text (you should see an empty directory structure).
• Create a new file called index.html.
• Inside your index.html file create a template for our webpage, consisting of:
  1. –  DOCTYPE declaration
  2. –  html, head, and body tags
• Give your webpage a title of ‘How to build a website’.
• Create a div with an id of ‘introduction’.
• Inside the ‘introduction’ div:
  1. –  add a header with the same text as your page title ‘How to build a website’
  2. –  add a paragraph and enter the following text snippet: ‘This website contains a reference to everything I know about HTML, CSS and JavaScript. Each language is contained on its own page, and each section of the language is contained in a separate block. Use the main navigation and then the jump list to navigate straight to any section of the webpage.’

Expected result: the expected result of this should be a basic webpage with a simple header and paragraph explaining a bit about the website.

Expected code: