Free

Introduction to Web Development

Learn the fundamentals of web development and how to create websites.

Beginner 5+ students Last updated Jun 2026

About the Course

Most people who want to learn web development start in the wrong place. They open a tutorial, copy some HTML, and have no idea what it actually did or why. When something breaks, they can't debug it. When they need to change something, they're guessing.

This course fixes that by starting where web development actually starts: with how the web works. Before you write a line of code, you'll understand what happens between a browser and a server, what DNS is, and why any of this matters. That foundation is what most beginners skip, and what most beginners are missing when they get stuck later.

From there, you'll move through the three technologies that build every website you've ever visited: HTML for structure, CSS for style, and JavaScript for interactivity. Each one is introduced through the portfolio project you're building — a real, multi-page site you can deploy and share. No throwaway exercises. Every concept earns its place.

The format is text-based and self-paced. You read, write code, and run it yourself. By the end, you'll have a live portfolio and a clear mental model of how the web works — built from the ground up.

What You'll Build

You'll build a personal portfolio website with a homepage, an about section, a projects page, and a contact page with an accessible HTML form. The site uses HTML, CSS, and vanilla JavaScript, works across screen sizes, and deploys to a live URL you can share.

What You'll Learn

  • Explain how the web works — from typing a URL to a page loading in your browser
  • Structure web pages with semantic HTML that's readable and accessible
  • Style layouts confidently using CSS — Flexbox, Grid, and responsive design
  • Add interactivity with vanilla JavaScript through events and DOM manipulation
  • Handle user input with forms and validate it on the client side
  • Organise your project files in a way that scales as the site grows
  • Debug HTML, CSS, and JavaScript using browser developer tools
  • Deploy a static site to a live URL

Prerequisites

  • No prior coding experience needed — this course starts from zero
  • A computer to practice along with the course because this is a practical and hands-on course.
  • Basic computer skills — you should be comfortable with common tasks like creating folders, managing files, installing software, and navigating the internet.
  • A stable internet connection to access the web.

Who This Course Is For

  • Complete beginners who want to understand how the web works, not just copy code that does something
  • Designers who can use tools like Figma but want to understand how their designs become web pages
  • Career changers looking for a solid foundation before picking up a framework or applying for junior roles
  • Anyone who has started a tutorial before, got lost when something broke, and wants a course that explains the why

Course Content

15 sections·58 lessons·8 quizzes

Introduction to the internet and the web
IP addresses, domain names, DNS, and URLs
Client and server
Web hosting
How the web works
The web technologies
Quiz: Web fundamentals
Installing and setting up a code editor
Web browser and developer tools
Organising your project files and folders
Your first HTML document
Structure of an HTML document
Elements, tags, and attributes
Headings, paragraphs, and text formatting
Links
Lists
Images and file paths
Tables
Quiz: HTML foundations
Grouping with div and span
Semantic HTML
Building the portfolio homepage structure
Connecting your pages with navigation
Quiz: Structuring your portfolio
How CSS works and where it lives
Selectors, properties, and values
Colours
The box model
Units and measurement
Applying your first styles to the portfolio
Quiz: CSS foundations
What Flexbox solves
Flex containers and flex items
Aligning and distributing content
Building the portfolio navigation bar
Laying out the hero
Quiz: Flexbox
When to use Grid vs Flexbox
Defining rows and columns
Building the projects grid
Quiz: Grid
Reusing the layout and marking the active page
Building the about page
Building the projects page
Building the contact form
Choosing and loading fonts with Google Fonts
Setting a consistent colour palette
CSS custom properties
What responsive actually means
Media queries in practice
Making the portfolio work on mobile
Quiz: Responsive design
What JavaScript does in the browser
Variables, functions, and control flow
The DOM: selecting and modifying elements
Quiz: JavaScript foundations
Responding to events: clicks, hovers, input
Showing and hiding elements
Adding a mobile menu toggle
Preparing files for deployment
Deploying to Netlify
Sharing your live portfolio URL
Using AI tools as a developer

Your instructor

Chimezie Enyinnaya

Chimezie Enyinnaya

I'm a self-taught full-stack developer and educator. I create practical courses that are straight to the point and easy to understand. The best way to learn is by doing, so my courses equip you with hands-on experience while building real-world applications.

Frequently Asked Questions