HTML & CSS Tutorials
Free step-by-step tutorials that answer the questions beginners ask most, like how to center a div or build a form. Each one starts with the short answer, then walks through every method with live examples you can edit in the browser and open in the full HTML editor.
16 tutorials · Last updated: October 4, 2026
No tutorials match that search yet. New ones are added every week.
All tutorials
HTML forms tutorialBuild a complete HTML form step by step: inputs, labels, checkboxes, dropdowns, validation and a submit button.
How to make a tableBuild an HTML table with rows, cells and headers, add borders with CSS, merge cells and make it phone-friendly.
How to make a responsive websiteMake a site work on every screen: viewport tag, fluid layouts, flexbox and grid, media queries and responsive images.
How to make a navigation barBuild a navigation bar with <nav> and a list of links, style it with flexbox, make it sticky and add a mobile menu.
How to make a footerBuild a site footer with the <footer> tag: links, contact info, grid columns and a footer that stays at the bottom.
How to make a dropdown menuBuild a dropdown menu with a nested list, CSS positioning and a click-to-open button that works on phones.
How to make a contact formBuild a contact form that emails you: the HTML fields, a form service or server script, spam protection and a thank-you message.
How to make a buttonCreate a button with the <button> tag, style it with CSS, make link buttons and handle clicks with JavaScript.
How to link CSS to HTMLConnect a CSS file to your page with the <link> tag, or use <style> and inline styles, and fix CSS that won't load.
How to embed a YouTube videoCopy YouTube's embed code, make the video responsive, set start time and autoplay, or play your own files with <video>.
How to change text colorChange text color with CSS: color names, hex, RGB and HSL, coloring part of a sentence, links and good contrast.
How to change the fontChange the font family, size, weight and color with CSS, and add Google Fonts or your own font files.
How to center a divFive ways to center a div horizontally and vertically — flexbox, grid, margin auto and more, with live examples.
How to add an imageAdd images with the <img> tag: file paths, alt text, sizing, captions, clickable images and faster loading.
How to add a linkCreate links with the <a> tag: other pages, page sections, email and phone links, new tabs and link styling.
How to add a background imageAdd a background image with CSS, make it cover the full screen, stop it repeating and keep text readable.
Looking up a specific tag? See the HTML reference or the HTML cheat sheet. Want to practice now? Open the free HTML editor →