Module 1 - Getting Started with Your first website

What you need before starting the course & What you want to design for

Get the required images and create environment

Creating Web Pages

Creating Html Document Structure

Add Meta Tags

Add Css Link

Module 2 - Website Header Slides

Add Images To Header Tag

Adding Javascript For Animating Header Slides

Add Javascript Link To Header Tag

Test Header Sliders For Browser Compatibility And Responsiveness

Module 3 - Horizontal Navigation Bar with drop down menu

Creating Horizontal Navigation Bar (part 1)

Creating Horizontal Navigation Bar (part 2)

Distribute Horizontal Navigation Bar To All Web Pages

Styling The Horizontal Navigation Bar With CSS (part 1)

Styling The Horizontal Navigation Bar With CSS (part 2)

Code Review

Test Horizontal Bar For Browser Compatibility And Responsiveness

Module 4 - Left and Right Navigation Bar with mouse hover
drop down menu

Create Left Navigation Bar

Distribute Left Side Bar To Web Pages

Create And Distribute Right Navigation Bar On Web Pages

Styling Left And Right Navigation Bars With CSS

Test Left And Right Navigation Bars For Browser Compatibility

Code Review

Module 5 – Homepage

Add Text on Homepage-

Add Image On Homepage

Add Image with a link on Homepage

Test Homepage For Browser Compatibility And Responsiveness

Add Headings To Web Pages

Module 6 - Photo gallery page

Creating Photo Gallery

Styling Photo Gallery With CSS

Testing Photo Gallery For Browser Compatibility And Responsiveness

Module 7 - Media page

Embedding Video Player In Your Media Page

Styling Video Player With CSS

Embedding Audio Player In Media Page

Add Javascript To Audio Player (part 1)

Add Javascript To Audio Player (part 2)

Styling Audio Player With CSS

Test Video And Audio Players For Browser Compatibility And Responsiveness

Module 8 - About page

Add Image on About Page

Add Text To About Page (Part 1)

Add Text To About Page (Part 2)

Test About Page For Browser Compatibility And Responsiveness

Module 9 - Contact page

Create Contact Form

Add Email Box To Contact Form

Add Massage Box To Contact Form

Add Submit Button To Contact Form

Validate User’s Inputs In Contact Form

Styling Contact Form With CSS

Styling Text Area

Test Contact Page For Browser Compatibility And Responsiveness

Module 10 - Register/Sign up page

Add First-name And Last-name on Sign Up Form

Add Email Address, Password And Password Confirmation Box on Sign Up Form

Add Dropdown Menu For Nationality on Sign Up Form

Add Birthday Calendar on Sign Up Form

Add Check Boxes on Sign Up Form

Add Radio Buttons on Sign Up Form

Add Submit Button on Sign Up Form

Styling Sign Up Form With CSS

Validate Sign Up Form

Add Placeholders on Sign Up Form

Test Register Page For Browser Compatibility And Responsiveness

Code Review For Register Page

Module 11 – Login/Sign in page

Add Email And Password Boxes on Sign In Form

Add Check Box And Submit Button on Sign In Form

Styling Sign In Form With CSS

Add More Style on Sign In Form

Add Placeholder And Password Validation On Sign In Form

Test Login Page For Browser Compatibility And Responsiveness

Module 12 - Visitor's page

Create Visitor’s Page

Add Headings

Add Image

Add download Progress Bar With Download Button

Javascript Code For download Progress Bar

Styling download Progress Bar with CSS

Round Off Of Visitor’s Page

Test Visitor’s Page For Browser Compatibility And Responsiveness 

Module 13 - Footer

Add Footer On Homepage

Distribute Footer To Web Pages

Code Review

Module 14 - Website Completion

Your Newly Designed Website Ready on the go

Hosting Your First Website

What Next? How to Bring Traffic to this site…