HTML & CSS: Introduction
This tutorial blends the core HTML markup skills with the CSS styling techniques you need to build real websites.
What you will learn
- How HTML structures content using semantic, accessible elements.
- How CSS controls layout, colors, typography, and responsive behavior.
- How to combine HTML and CSS to build reusable components and full projects.
- Best practices for accessibility, performance, debugging, and deployment.
Course map
This tutorial starts from the basics and gradually adds more skills.
Each chapter builds on the previous one:
- Setup: Configure your tools, create your first HTML and CSS file, and learn workflow tips.
- Foundations: Master HTML structure, text, lists, media, forms, and reusable snippets.
- Styling Core: Work with selectors, cascade rules, typography, colors, and the box model.
- Layout: Build flexible layouts with positioning, Flexbox, Grid, and responsive patterns.
- Enhancements: Add polish with custom properties, functions, transitions, transforms, and animations.
- Quality: Ensure accessibility, performance, maintainability, and efficient tooling.
- Projects: Apply everything in guided projects and prepare for deployment.
Use the left-hand menu (or the menu icon on mobile) to navigate between lessons.
How to study
- Read the explanations carefully. We highlight important definitions and gotchas.
- Run the embedded examples. Edit the HTML and CSS to immediately see the result.
- Complete the exercises and challenges at the end of each topic.
Tip: Create a dedicated project folder for the entire course. Save each experiment so you can compare improvements over time.
See how HTML elements and CSS rules work together on the same page:
Example
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello HTML and CSS</title>
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
<main>
<h1>Welcome, Web Creator!</h1>
<p>This box is built with HTML structure and CSS styling.</p>
<p><mark>Edit the code</mark> to change colors, fonts, or layout.</p>
<button>Start Building</button>
</main>
</body>
</html>
css
body {
font-family: "Segoe UI", sans-serif;
background:#f2f6fb;
margin:0;
}
main {
max-width: 600px;
margin: 60px auto;
background:#fff;
padding:32px;
border-radius:8px;
}
h1 {
color:#04AA6D;
margin-top:0;
}
mark {
background:#fffd91;
}
button {
background:#04AA6D;
color:#fff;
border:none;
padding:12px 24px;
border-radius:999px;
cursor:pointer;
}
button:hover {
background:#028a56;
}
Use the Try It editor to experiment as you follow along.
Prerequisites
- No prior coding experience is required. We start from the ground up.
- An eager mindset and willingness to practice will help you succeed!