How to Make a Website: 50 Practical Tutorials
Start with your first HTML page, then build navigation, layouts, content sections and useful interactions. Each lesson includes full code, a working example, original browser imagery and checks before you publish.
Start with the essentials
LESSON 01HTML · CSS · PRACTICAL GUIDEHow to Make Your First Website Page with HTML and CSS
Learn to build a complete first page with a heading, service introduction and contact link. Includes step-by-step instructions, complete code and a working example.
Read Tutorial
LESSON 02HTML · CSS · PRACTICAL GUIDEHow to Organise Website Files and Folders for Beginners
Learn to separate pages, styles, scripts and images without breaking relative paths. Includes step-by-step instructions, complete code and a working example.
Read Tutorial
LESSON 03HTML · CSS · PRACTICAL GUIDEHow to Add CSS to a Website with an External Stylesheet
Learn to use one stylesheet and reusable variables to control a consistent design. Includes step-by-step instructions, complete code and a working example.
Read Tutorial
LESSON 04HTML · CSS · PRACTICAL GUIDEHow to Make a Website Menu Bar with HTML and CSS
Learn to build a semantic navigation bar with real links and a current-page indicator. Includes step-by-step instructions, complete code and a working example.
Read Tutorial
LESSON 05HTML · CSS · PRACTICAL GUIDEHow to Make a Website Dropdown Menu without a Library
Learn to create a click-to-open navigation disclosure that supports keyboard and touch. Includes step-by-step instructions, complete code and a working example.
Read Tutorial
LESSON 06HTML · CSS · PRACTICAL GUIDEHow to Make a Responsive Mobile Hamburger Menu
Learn to reuse the same navigation links in an expanded desktop and collapsible mobile layout. Includes step-by-step instructions, complete code and a working example.
Read Tutorial
LESSON 07HTML · CSS · PRACTICAL GUIDEHow to Make a Website Header with a Logo and Navigation
Learn to combine brand identity, primary links and a useful action in a reusable header. Includes step-by-step instructions, complete code and a working example.
Read Tutorial
LESSON 08HTML · CSS · PRACTICAL GUIDEHow to Make a Sticky Website Header with CSS
Learn to keep navigation available during scrolling without hiding section destinations. Includes step-by-step instructions, complete code and a working example.
Read Tutorial
LESSON 09HTML · CSS · PRACTICAL GUIDEHow to Make a Website Footer with Links and Contact Details
Learn to finish the page with clear supporting navigation and accurate business information. Includes step-by-step instructions, complete code and a working example.
Read Tutorial
LESSON 10HTML · CSS · PRACTICAL GUIDEHow to Make a Full-Width Header and Footer with Centered Content
Learn to separate full-width background bands from the constrained readable content inside them. Includes step-by-step instructions, complete code and a working example.
Read Tutorial
Build layouts and content sections
LESSON 11HTML · CSS · PRACTICAL GUIDEHow to Make a Website Hero Section with HTML and CSS
Learn to introduce the offer with a clear headline, supporting copy and primary action. Includes step-by-step instructions, complete code and a working example.
Read Tutorial
LESSON 12HTML · CSS · PRACTICAL GUIDEHow to Make Responsive Website Cards with CSS Grid
Learn to create an adaptable card grid for services, projects or articles. Includes step-by-step instructions, complete code and a working example.
Read Tutorial
LESSON 13HTML · CSS · PRACTICAL GUIDEHow to Make a Website Sidebar with CSS Grid
Learn to pair a readable main column with related information that stacks after it on mobile. Includes step-by-step instructions, complete code and a working example.
Read Tutorial
LESSON 14HTML · CSS · PRACTICAL GUIDEHow to Make a Blog Article Page with a Readable Layout
Learn to build a tutorial template with a headline, summary, outline and content sections. Includes step-by-step instructions, complete code and a working example.
Read Tutorial
LESSON 15HTML · CSS · PRACTICAL GUIDEHow to Make a News Website Homepage Layout with CSS
Learn to arrange a lead story, headline columns and supporting sidebar in a responsive editorial layout. Includes step-by-step instructions, complete code and a working example.
Read Tutorial
LESSON 16HTML · CSS · PRACTICAL GUIDEHow to Make a News Flash Ticker with Pause and Arrow Controls
Learn to rotate linked headlines while preserving explicit visitor control. Includes step-by-step instructions, complete code and a working example.
Read Tutorial
LESSON 17HTML · CSS · PRACTICAL GUIDEHow to Make an Accessible Image Slider with JavaScript
Learn to create a manually controlled visual carousel with captions and a current-slide status. Includes step-by-step instructions, complete code and a working example.
Read Tutorial
LESSON 18HTML · CSS · PRACTICAL GUIDEHow to Make a Responsive Image Gallery with CSS Grid
Learn to present labelled project visuals in consistent responsive proportions. Includes step-by-step instructions, complete code and a working example.
Read Tutorial
LESSON 19HTML · CSS · PRACTICAL GUIDEHow to Make Website Images Responsive without Stretching
Learn to scale an image with its container while reserving its natural aspect ratio. Includes step-by-step instructions, complete code and a working example.
Read Tutorial
LESSON 20HTML · CSS · PRACTICAL GUIDEHow to Make a Website Services Section with HTML and CSS
Learn to explain distinct services and connect each option to a useful next step. Includes step-by-step instructions, complete code and a working example.
Read Tutorial
Build business pages and interactive features
LESSON 21HTML · CSS · PRACTICAL GUIDEHow to Make an About Us Page for a Business Website
Learn to present the company purpose, working approach and a genuine next step. Includes step-by-step instructions, complete code and a working example.
Read Tutorial
LESSON 22HTML · CSS · PRACTICAL GUIDEHow to Make a Portfolio Page with Project Cards
Learn to show project examples with context, accurate roles and clear detail links. Includes step-by-step instructions, complete code and a working example.
Read Tutorial
LESSON 23HTML · CSS · PRACTICAL GUIDEHow to Make a Contact Page with Email and Phone Links
Learn to provide accurate contact channels and explain what information helps an enquiry. Includes step-by-step instructions, complete code and a working example.
Read Tutorial
LESSON 24HTML · CSS · PRACTICAL GUIDEHow to Make an HTML Contact Form with Labels and Validation
Learn to build a labelled form and distinguish browser validation from real message delivery. Includes step-by-step instructions, complete code and a working example.
Read Tutorial
LESSON 25HTML · CSS · PRACTICAL GUIDEHow to Make a WhatsApp Enquiry Button with a Prepared Message
Learn to create an encoded WhatsApp handoff link that leaves sending under the visitor’s control. Includes step-by-step instructions, complete code and a working example.
Read Tutorial
LESSON 26HTML · CSS · PRACTICAL GUIDEHow to Make a Search Box for Static Website Articles
Learn to filter a local list with a labelled search field, count and empty state. Includes step-by-step instructions, complete code and a working example.
Read Tutorial
LESSON 27HTML · CSS · PRACTICAL GUIDEHow to Make Blog Pagination with JavaScript
Learn to split a local article list into pages with a current-page indicator. Includes step-by-step instructions, complete code and a working example.
Read Tutorial
LESSON 28HTML · CSS · PRACTICAL GUIDEHow to Make Category Filter Buttons for a Website
Learn to keep selected controls, visible cards and result counts in sync. Includes step-by-step instructions, complete code and a working example.
Read Tutorial
LESSON 29HTML · CSS · PRACTICAL GUIDEHow to Make an FAQ Accordion with HTML Details and Summary
Learn to answer supporting questions with native keyboard-operable disclosures. Includes step-by-step instructions, complete code and a working example.
Read Tutorial
LESSON 30HTML · CSS · PRACTICAL GUIDEHow to Make a Responsive Website Pricing Table
Learn to compare package scope clearly without inventing prices or popularity claims. Includes step-by-step instructions, complete code and a working example.
Read Tutorial
Responsive layouts, SEO and publishing
LESSON 31HTML · CSS · PRACTICAL GUIDEHow to Make an Accessible Modal Popup with HTML Dialog
Learn to open a focused dialog with native modal behaviour and explicit close controls. Includes step-by-step instructions, complete code and a working example.
Read Tutorial
LESSON 32HTML · CSS · PRACTICAL GUIDEHow to Make Tabbed Website Content with Keyboard Navigation
Learn to coordinate tab selection, panel visibility and arrow-key movement. Includes step-by-step instructions, complete code and a working example.
Read Tutorial
LESSON 33HTML · CSS · PRACTICAL GUIDEHow to Make a Website Mobile Friendly with Responsive CSS
Learn to adapt the content layout to narrow screens without clipping important information. Includes step-by-step instructions, complete code and a working example.
Read Tutorial
LESSON 34HTML · CSS · PRACTICAL GUIDEHow to Use CSS Flexbox for Website Layouts
Learn to align one-dimensional rows of navigation, tools or cards without fixed positions. Includes step-by-step instructions, complete code and a working example.
Read Tutorial
LESSON 35HTML · CSS · PRACTICAL GUIDEHow to Use CSS Grid for a Responsive Website Layout
Learn to coordinate rows and columns while keeping the document order meaningful. Includes step-by-step instructions, complete code and a working example.
Read Tutorial
LESSON 36HTML · CSS · PRACTICAL GUIDEHow to Add a Dark Mode Toggle to a Website
Learn to switch paired theme colours and optionally remember an explicit visitor preference. Includes step-by-step instructions, complete code and a working example.
Read Tutorial
LESSON 37HTML · CSS · PRACTICAL GUIDEHow to Add an SEO Title and Meta Description to a Website
Learn to write page-specific metadata that accurately describes the visible content. Includes step-by-step instructions, complete code and a working example.
Read Tutorial
LESSON 38HTML · CSS · PRACTICAL GUIDEHow to Make an XML Sitemap for a Static Website
Learn to list canonical public URLs in valid XML without confusing discovery with guaranteed indexing. Includes step-by-step instructions, complete code and a working example.
Read Tutorial
LESSON 39HTML · CSS · PRACTICAL GUIDEHow to Improve Website Loading Speed with Front-End Changes
Learn to measure and improve resource delivery, layout stability and unnecessary work. Includes step-by-step instructions, complete code and a working example.
Read Tutorial
LESSON 40HTML · CSS · PRACTICAL GUIDEHow to Publish an HTML Website on Hosting Step by Step
Learn to upload a static website while preserving paths and checking the real public result. Includes step-by-step instructions, complete code and a working example.
Read Tutorial
Website navigation, accessibility and technical SEO
LESSON 41HTML · CSS · PRACTICAL GUIDEHow to Make a Testimonial Section with Honest Attribution
Learn to present quotations in a readable layout without inventing verified customer feedback. Includes step-by-step instructions, complete code and a working example.
Read Tutorial
LESSON 42HTML · CSS · PRACTICAL GUIDEHow to Make a Website Team Section with Profile Cards
Learn to explain real team roles and responsibilities in a flexible profile layout. Includes step-by-step instructions, complete code and a working example.
Read Tutorial
LESSON 43HTML · CSS · PRACTICAL GUIDEHow to Make a Website Call-to-Action Section
Learn to give readers a clear next step that follows naturally from the page content. Includes step-by-step instructions, complete code and a working example.
Read Tutorial
LESSON 44HTML · CSS · PRACTICAL GUIDEHow to Add a Back-to-Top Link without JavaScript
Learn to use a working fragment link and optional reduced-motion-aware smooth scrolling. Includes step-by-step instructions, complete code and a working example.
Read Tutorial
LESSON 45HTML · CSS · PRACTICAL GUIDEHow to Make Website Breadcrumb Navigation with HTML
Learn to show the current page’s stable position in a content hierarchy. Includes step-by-step instructions, complete code and a working example.
Read Tutorial
LESSON 46HTML · CSS · PRACTICAL GUIDEHow to Make an Article Table of Contents with Anchor Links
Learn to create a linked outline for a long tutorial using stable section identifiers. Includes step-by-step instructions, complete code and a working example.
Read Tutorial
LESSON 47HTML · CSS · PRACTICAL GUIDEHow to Improve Website Accessibility with Semantic HTML
Learn to combine landmarks, skip navigation, labelled controls and visible keyboard focus. Includes step-by-step instructions, complete code and a working example.
Read Tutorial
LESSON 48HTML · CSS · PRACTICAL GUIDEHow to Add a Canonical URL to a Website Page
Learn to choose a preferred public URL and keep related indexing signals consistent. Includes step-by-step instructions, complete code and a working example.
Read Tutorial
LESSON 49HTML · CSS · PRACTICAL GUIDEHow to Add Article Structured Data to a Blog Page
Learn to describe the actual article using valid JSON-LD and accurate publisher information. Includes step-by-step instructions, complete code and a working example.
Read Tutorial
LESSON 50HTML · CSS · PRACTICAL GUIDEHow to Build a Website with a Separate Blog Folder
Learn to keep blog pages and dependencies self-contained so updates do not overwrite the main site. Includes step-by-step instructions, complete code and a working example.
Read Tutorial