Complete Frontend Website Design : HTML5, CSS3 and JavaScript

4.0 (20 reviews) 5 students enrolled 4 Months

Last updated: 12 May 2026 Available in: English

Web Development

Self-Paced Save $10.00

$79.99 $89.99

Starting price — see more plans below

7-Day Money-Back Guarantee Try the course risk-free. If it's not right for you, get a full refund within 7 days.

Business

Upskill Your Entire Team

Enrol multiple staff members and get tailored training with reporting, certificates, and flexible scheduling.

Dedicated account manager

Team progress dashboard

Volume discounts

Custom scheduling available

Request a Quote

Your Destination

Launch Your Career as a Data Professional

Master the three core foundations of web development — HTML5, CSS3, and JavaScript — and learn how to turn ideas into professional, dynamic websites.

This practical, project-driven course walks you step by step through modern frontend development techniques used by real-world developers. By the end, you’ll have the skills, confidence, and portfolio projects needed to begin your journey as a frontend website designer.

Whether you’re a complete beginner or looking to sharpen your web development skills, this course gives you everything you need to thrive.

What's included on this platform

Live Classes

Real-time instruction via Microsoft Teams with Q&A

Course Groups

Private peer communities with expert moderation

Social Feed

Progress sharing and achievement recognition

Direct Messages

Instructor & peer messaging with quick support

Project Library

Realistic datasets and personalised feedback

Certificates

Verified, employer-recognised digital badges

Start Dates & Learning Options Flexible Learning Options

Available Now

Self-Paced

Enrolling Now

Start immediately on enrolment

Start immediately and learn at your own pace. No deadlines or fixed schedule.

Course Curriculum 19 Modules · 136 Lessons · 6 Tests · 15 Assignments · 2 Projects

8–12 hrs/week / week 4 Months Lifetime Access

Section Welcome & Orientation

1 Welcome to the Frontend Development Bootcamp

Course Overview: Your Path to Becoming a Frontend Developer

Meet Your Instructors and the Citichoice Learning Philosophy

Navigating the Course Platform and Learning Resources

Understanding the Frontend Developer Career Path and Job Market

2 Setting Up Your Professional Development Environment

Choosing and Installing a Modern Web Browser (Chrome/Firefox)

Mastering Browser Developer Tools for Debugging

Installing and Configuring Visual Studio Code (VS Code)

Essential VS Code Extensions for Frontend Development

Introduction to the Command Line Interface (CLI)

Joining the Course Community on Slack/Discord

Customize Your VS Code Setup and Introduce Yourself in the Community

Section Web Development Fundamentals

3 How the Web Works: Core Concepts

Understanding the Client-Server Model

What are IP Addresses, DNS, and Domains?

HTTP/HTTPS: The Protocol of the Web

Anatomy of a URL: Scheme, Host, Path, and Parameters

Web Browsers: The Rendering Engine Explained

Introduction to Web Accessibility (a11y)

Core Web Concepts Check

4 Introduction to Version Control with Git & GitHub

What is Version Control and Why is it Essential?

Installing and Configuring Git on Your Machine

Core Git Commands: init, add, commit, status, log

Creating and Managing Repositories on GitHub

Connecting Local and Remote Repositories: push, pull, clone

Understanding the Branching and Merging Workflow

Collaborating with Others using Pull Requests

Create a GitHub Repository and Push Your First Project

Section STAGE 1 – Mastering HTML5 for Structure

5 HTML Basics: Building Your First Web Page

The Anatomy of an HTML Document: Doctype, Head, and Body

Working with Headings, Paragraphs, and Text Formatting

Creating Ordered and Unordered Lists

Embedding Images and Understanding the ‘alt’ Attribute

Creating Hyperlinks to Navigate Between Pages

Understanding File Paths: Relative vs Absolute

Build a Simple Recipe Web Page

6 Deep Dive into HTML Elements and Semantics

The Importance of Semantic HTML for SEO and Accessibility

Structuring Content with header, nav, main, section, article, aside, and footer

Understanding Block vs. Inline Elements

Using div and span for Grouping Content

Creating Data Tables with table, thead, tbody, tr, th, and td

Properly Citing Sources with figure, figcaption, and blockquote

Refactor a Non-Semantic Page to use Semantic HTML5 Tags

HTML Semantics and Structure Assessment

7 Creating Forms and Handling User Input

Introduction to the form Element and its Attributes

Essential Input Types: text, password, email, number

Advanced Input Types: date, color, range, search

Using textarea for Multi-line Text Input

Creating Dropdown Menus with select and option

Using Radio Buttons and Checkboxes for Selections

Grouping Form Controls with fieldset and legend

Implementing Form Validation with HTML5 Attributes

Build a Detailed User Registration Form

Project: Portfolio Project: Multi-Page Informational Website (CCS-HTML)

Section STAGE 2 – Styling with CSS3 and Responsive Design

8 CSS Fundamentals: Selectors and the Cascade

Three Ways to Add CSS: Inline, Internal, and External

Mastering CSS Selectors: Type, Class, and ID

Combining Selectors: Descendant, Child, and Sibling

Understanding Specificity, Inheritance, and the Cascade

Working with Colors: Hex, RGB, and HSL

Styling Text and Importing Custom Web Fonts

Using Comments to Organize Your CSS

Style the Recipe Web Page from the HTML Section

CSS Selectors and Cascade Quiz

9 The Box Model and Layout Essentials

Deep Dive into the CSS Box Model: Content, Padding, Border, Margin

Controlling Element Sizing with ‘width’, ‘height’, ‘min/max-width’

The ‘box-sizing’ Property: border-box vs content-box

Understanding the ‘display’ Property: block, inline, inline-block

Positioning Elements: static, relative, absolute, fixed, sticky

Controlling Stacking Order with ‘z-index’

Floating Elements and Clearing Floats (The Old Way)

Create a Two-Column Layout using Positioning

10 Advanced Layouts with Flexbox

Introduction to Flexbox: Solving 1D Layout Problems

Setting up a Flex Container: ‘display: flex’ and ‘flex-direction’

Aligning Items on the Main Axis with ‘justify-content’

Aligning Items on the Cross Axis with ‘align-items’ and ‘align-content’

Controlling Flex Items: ‘flex-grow’, ‘flex-shrink’, and ‘flex-basis’

The ‘flex’ Shorthand Property

Changing Item Order with the ‘order’ Property

Building a Navigation Bar with Flexbox

Flexbox Layout Challenge

Recreate a Complex Card Layout using Flexbox

11 Mastering Grid for Complex 2D Layouts

Introduction to CSS Grid: Your 2D Layout Superpower

Defining a Grid: ‘grid-template-columns’ and ‘grid-template-rows’

Placing Items on the Grid using Line Numbers

Spanning Items Across Multiple Cells

Using the ‘fr’ Unit for Flexible Tracks

Naming Grid Lines and Areas for Cleaner Layouts

Aligning and Justifying Grid Items and Tracks

Creating a Full Page Layout with CSS Grid

Build a Magazine-Style Article Layout with CSS Grid

12 Responsive Design and Advanced CSS

The Principles of Responsive Web Design

Using the Viewport Meta Tag

Writing Media Queries for Different Screen Sizes

Mobile-First vs. Desktop-First Strategies

Using Relative Units (em, rem, %, vh, vw) for Fluidity

Styling with Pseudo-classes (:hover, :focus, :nth-child)

Adding Style with Pseudo-elements (::before, ::after)

Implementing CSS Transitions and Simple Animations

Introduction to CSS Variables for Theming

Make Your Multi-Page Website Fully Responsive

Responsive Design and Advanced CSS Concepts

🧩 Project: Portfolio Project: Fully Responsive Business Landing Page (CCS-CSS)

Section STAGE 3 – Programming with JavaScript (ES6+)

13 JavaScript Fundamentals: Variables, Data Types, and Operators

What is JavaScript and its Role in Web Development?

Adding JavaScript to a Web Page: Inline, Internal, and External

Declaring Variables with ‘var’, ‘let’, and ‘const’

Exploring Primitive Data Types: String, Number, Boolean, Null, Undefined

Working with Strings and Template Literals

Performing Mathematical Operations

Understanding Comparison and Logical Operators

Using the Browser Console for Debugging

Create a Simple Tip Calculator

JavaScript Fundamentals Check

14 Control Flow and Data Structures

Making Decisions with ‘if’, ‘else if’, and ‘else’ Statements

Using the ‘switch’ Statement for Multiple Conditions

Repeating Code with ‘for’ and ‘while’ Loops

Introduction to Arrays for Storing Collections of Data

Common Array Methods: push, pop, shift, unshift, slice, splice

Iterating Over Arrays with ‘forEach’, ‘map’, ‘filter’, and ‘reduce’

Introduction to Objects for Storing Key-Value Pairs

Accessing and Modifying Object Properties

Filter and Display a List of Products

15 Functions, Scope, and the DOM

Writing Reusable Code with Functions

Understanding Function Parameters and Return Values

Function Expressions vs. Function Declarations

Introduction to ES6 Arrow Functions

Understanding Scope: Global, Function, and Block

What is the Document Object Model (DOM)?

Selecting DOM Elements: getElementById, querySelector, etc.

Manipulating DOM Elements: Changing Text, HTML, and Attributes

Modifying Element Styles with JavaScript

Creating and Removing Elements from the DOM

Build a Simple To-Do List Application

16 Advanced DOM and Browser Storage

Traversing the DOM: Parent, Child, and Sibling Nodes

Creating and Appending Complex Elements Dynamically

Manipulating CSS Classes using classList (add, remove, toggle)

Working with Browser Storage: LocalStorage vs SessionStorage

Saving User Preferences and Data using JSON.stringify and JSON.parse

Timing Events: setTimeout and setInterval

Build a Theme Switcher (Dark/Light Mode) that Persists on Reload

17 Asynchronous JavaScript and Web APIs

Understanding Synchronous vs. Asynchronous Code

Handling Events: Event Listeners and the Event Object

Introduction to Callbacks and ‘Callback Hell’

The Modern Solution: Promises and the .then() and .catch() syntax

Cleaner Async Code with ‘async’ and ‘await’

What are Web APIs?

Making HTTP Requests with the Fetch API

Working with JSON Data from an API

Handling API Errors Gracefully

Fetch and Display Data from a Public API (e.g., a weather API)

🧩 Project: Portfolio Project: Interactive Quote Generator with API Integration (CCS-JS)

Section Building Your Professional Portfolio

18 Crafting a Standout Developer Portfolio

The Purpose of a Portfolio: Showcasing Your Skills

Key Sections of a Developer Portfolio: About, Projects, Skills, Contact

Choosing Projects that Demonstrate Your Abilities

Writing Compelling Project Descriptions

Design Principles for a Clean and Professional Portfolio

Gathering Assets and Content for Your Site

🧩 Project: Plan and Design Your Personal Portfolio Website

Section Career Launch & Job Preparation

19 Final Capstone Project and Graduation

Capstone Project Kickoff: Building a Feature-Rich E-commerce Frontend

Project Planning, Scoping, and Task Breakdown

Final Project Showcase and Presentation

Next Steps: Continuing Your Learning Journey

🧩 Project: Final Capstone: E-commerce Storefront with Product Pages, Cart, and Checkout (CCA-Frontend)

Material Includes

Downloadable project files

HTML & CSS templates

JavaScript code samples

Cheat sheets (HTML5 tags, CSS properties, JS basics)

Practice exercises & challenges

Access to all course updates

Requirements

No prior coding experience required

A computer with internet access

A modern web browser (Chrome recommended)

Code editor (VS Code suggested)

Commitment to practicing the exercises

This Course Is For

Beginners who want to learn website development

Students preparing for tech or computer science careers

Freelancers wanting to offer web design services

Business owners who want to build or manage their own websites

Anyone interested in learning frontend development from scratch

$79.99

From — 3 plan options

Student Reviews 20 Reviews

4.0

Course Rating

100%

Saliou Gueye

2 months ago

4.0