Build a Website in less than 2 Hours! (Step by Step)

Create a basic HTML5 document with doctype, html, head, and body tags, and set the title to home. Save as home.html and structure the page with header, media, and footer.

Create a header logo by adding an image from the images folder, resize to 120 pixels, and wrap it in a homepage link with alt text.

Learn to build website navigation in the top right corner by creating home, about, and contact links, linking a stylesheet, and applying navigation link classes.

Create and style footer social media links by adding Facebook, Instagram, and Twitter logos, resizing images, setting alt text, and centering them on a colored bottom bar.

Develop and insert copyright text and links, replace placeholders with copywritten content, add a mailto email link, and adjust styling to remove extra page margins.

Create a homepage background by using a prepared image from the images folder, then define a style block with a body class to apply the background to the page.

Create the homepage main content with centered text and gray styling. Turn images from the images folder into anchor links for about, course, and contact, with yellow emphasis.

Create the about page by reusing home page content, replace the body with a new layout, and apply a background image and styled text with center alignment and gray color.

Create a dedicated course page by building a title, header, and three-column description lists, applying a background image and CSS classes to style headings and content.

Create a dedicated contact page by replacing the body content, updating the HTML document, and applying a page-specific background image to build the base contact page for the site.

Create a contact map by embedding a Google map in an iframe. Load the Dublin location and copy the iframe code into your contact page.

Customize the contact page by placing a Google map beside a question form in two equal columns that span the width, with a 410-pixel height and a shared css class.

Create a complete contact form on the contact page with named fields for name, surname, age, gender radios, phone, a course/lesson select, a question textarea, and submit and reset buttons.

Customize the contact form by widening fields, applying validation and date of birth pickers, setting initial values and placeholders, and adding a JavaScript submit action.