HTML & CSS: Building Websites
html · css · websites · web · fundamentals · frontend · development · page · elements · form · images · iframe · introducing · links · pie · site · text · browser · contact · content · co...
This manual walks through building a complete, real-world website from scratch using only HTML and CSS, with a small dose of JavaScript at the end. Throughout the material, a single running example is used: the website for a fictional bakery called Bethany's Pie Shop. Every concept introduced — page structure, text, images, tables, semantic layout, navigation, forms, embedded content, and browser storage — is applied directly to building out this site, page by page, until a fully working, multi-page, styled website exists.
The operating system does not matter — HTML is rendered identically everywhere, and the chosen editor is available cross-platform.
Sign in to read this course
A free account unlocks all 514 courses. 20 are readable without one.
What's inside
14 sections- 1 Table of Contents
- 2 Module 1: Introduction and Environment Setup
- 3 Module 2: Setting up the Page Structure
- 4 Module 3: Adding Text, Headings, and Images to the Home Page
- 5 Module 4: Moving to CSS
- 6 Module 5: Defining the Page Layout and Structure
- 7 Module 6: Working with Images
- 8 Module 7: Creating the Pie Overview Table
- 9 Module 8: Designing the Pie Detail Page
- 10 Module 9: Adding Navigation to the Site
- 11 Module 10: Creating a Contact Form
- 12 Module 11: Including External Content Using iframe
- 13 Module 12: Storing Data with JavaScript
- 14 Summary
More HTML, CSS & Web Fundamentals courses
View all 10Creating Graphics with Canvas and SVG
The rich features of JavaScript, combined with the power of modern web browsers, have blurred the lines between the capabilities of web-based and native applications. This course discusse...
CSS: Advanced Features
This course built up a layered toolkit for adding depth, color, motion, and typographic polish to a site using only CSS — no images, no JavaScript animation libraries.
CSS: Creating Layouts
css · layouts · html · web · fundamentals · frontend · development · layout · page · responsive · components · grid · clean · flexbox · pies · designing · home · study · visit · accessibi...
Debugging Sites with Chrome DevTools
Google Chrome ships with a powerful set of tools to help developers debug websites. There is no more appropriate place to debug client-side web apps than right in the application where th...
Deploying and Optimizing Websites
Zip --> Kudu[Upload to Kudu Zip Deploy] Kudu --> Extract[Kudu extracts files] Extract --> Recycle[App Service recycles] Recycle --> Live[Site live at azurewebsites.net] flowchart TB You[Y...
HTML APIs: Creating Interactive Experiences
html · apis · interactive · experiences · css · web · fundamentals · frontend · development · dom · events · event · playback · animations · audio · content · drag · drop · elements · ani...
Interested in this course?
Contact us to book it or get a custom training plan for your team.