Comprehensive HTML5 & CSS Guide
Table of Contents
HTML5 Basics
HTML5 Advanced Concepts
CSS Basics
CSS Advanced Concepts
Responsive Web DesignBest Practices
1. HTML5 Basics
1.1 Document Structure
The foundation of any HTML document follows this basic structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Page Title</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<!-- Content goes here -->
</body>
</html>
1.2 Basic Elements
Text Elements
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<p>This is a paragraph.</p>
<strong>Bold text</strong>
<em>Italicized text</em>
<br> <!-- Line break -->
<hr> <!-- Horizontal rule -->
Lists
<!-- Ordered list -->
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
<! -- Unordered list -->
<ul>
<li>Item</li>
<li>Another item</li>
</ul>
<!-- Definition list -->
<dl>
<dt>Term</dt>
<dd>Definition</dd>
</dl>
Links
<a href="[Link] Example</a>
<a href="[Link] Email</a>
<a href="[Link] Us</a>
<a href="#section-id">Jump to Section</a>
Images
<img src="[Link]" alt="Descriptive text" width="300" height="200">
Tables
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</tbody>
</table>
2. HTML5 Advanced Concepts
2.1 Semantic Elements
<header>Site header</header>
<nav>Navigation menu</nav>
<main>Main content</main>
<article>Self-contained content</article>
<section>Grouped content</section>
<aside>Related content</aside>
<footer>Site footer</footer>
<figure>
<img src="[Link]" alt="Description">
<figcaption>Caption for the image</figcaption>
</figure>
2.2 Forms
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob">
<label>Gender:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
<label>Interests:</label>
<input type="checkbox" id="coding" name="interests"
value="coding">
<label for="coding">Coding</label>
<input type="checkbox" id="design" name="interests"
value="design">
<label for="design">Design</label>
<label for="country">Country:</label>
<select id="country" name="country">
<option value="usa">USA</option>
<option value="uk">UK</option>
<option value="canada">Canada</option>
</select>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4"></textarea>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</form>
2.3 HTML5 Media<!-- Video -->
<video controls width="320" height="240">
<source src="movie.mp4" type="video/mp4">
<source src="[Link]" type="video/webm">
Your browser does not support the video tag.
</video>
<!-- Audio -->
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="[Link]" type="audio/ogg">
Your browser does not support the audio tag.
</audio>
2.4 Canvas and SVG
<!-- Canvas -->
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
const canvas = [Link]("myCanvas");
const ctx = [Link]("2d");
[Link] = "#FF0000";
[Link](0, 0, 150, 75);
</script>
<!-- SVG -->
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4"
fill="yellow" />
</svg>
3. CSS Basics
3.1 Selectors
/* Element selector */
p{
color: blue;
/* Class selector */
.highlight {
background-color: yellow;
/* ID selector */
#header {
font-size: 24px;
/* Descendant selector */
article p {
margin-bottom: 10px;
/* Child selector */
ul > li {
list-style-type: square;
/* Adjacent sibling selector */
h2 + p {
font-weight: bold;
/* Attribute selector */
input[type="text"] {
border: 1px solid gray;
/* Pseudo-class */
a:hover {
text-decoration: underline;
/* Pseudo-element */
p::first-letter {
font-size: 2em;
3.2 Box Model
.box {
width: 300px;
height: 200px;
padding: 20px;
border: 2px solid black;
margin: 30px;
box-sizing: border-box; /* Includes padding and border in width/height */
3.3 Text Styling
p{
font-family: 'Arial', sans-serif;
font-size: 16px;
font-weight: bold;
font-style: italic;
text-align: center;
text-decoration: underline;
text-transform: uppercase;
line-height: 1.5;
letter-spacing: 1px;
word-spacing: 2px;
color: #333333;
3.4 Background Properties
.container {
background-color: #f0f0f0;
background-image: url('[Link]');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
/* Shorthand */
background: #f0f0f0 url('[Link]') no-repeat center/cover;
4. CSS Advanced Concepts
4.1 Flexbox
.flex-container {
display: flex;
flex-direction: row; /* or column */
flex-wrap: wrap; /* or nowrap */
justify-content: space-between; /* horizontal alignment */
align-items: center; /* vertical alignment */
gap: 10px; /* space between items */
.flex-item {
flex: 1; /* grow ratio */
/* or specifically: */
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
4.2 CSS Grid
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
grid-template-rows: 100px 200px; /* Explicit row heights */
gap: 20px; /* gap between grid items */
}
.grid-item {
grid-column: 1 / 3; /* Span from column line 1 to 3 */
grid-row: 1 / 2; /* Span from row line 1 to 2 */
/* Or place by area: */
grid-area: header; /* Using named template areas */
/* Named template areas */
.grid-container {
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
4.3 Transitions and Animations
/* Transition */
.button {
background-color: blue;
transition: background-color 0.3s ease-in-out;
.button:hover {
background-color: red;
/* Animation */
@keyframes slideIn {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
.animated-element {
animation: slideIn 1s ease-out forwards;
/* animation properties: */
animation-name: slideIn;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: forwards;
4.4 Transforms
.transform-element {
/* 2D Transforms */
transform: translate(50px, 100px);
transform: rotate(45deg);
transform: scale(1.5);
transform: skew(10deg, 20deg);
/* Combine transforms */
transform: translate(50px, 100px) rotate(45deg) scale(1.5);
/* 3D Transforms */
transform: rotateX(45deg);
transform: rotateY(45deg);
transform: perspective(500px) rotateY(45deg);
5. Responsive Web Design
5.1 Media Queries
/* Base styles for all screen sizes */
body {
font-size: 16px;
/* Small screens (phones) */
@media screen and (max-width: 576px) {
body {
font-size: 14px;
/* Medium screens (tablets) */
@media screen and (min-width: 577px) and (max-width: 992px) {
body {
font-size: 15px;
/* Large screens (desktops) */
@media screen and (min-width: 993px) {
body {
font-size: 16px;
}
/* Print styles */
@media print {
.no-print {
display: none;
5.2 Responsive Images
.responsive-image {
max-width: 100%;
height: auto;
<picture>
<source media="(min-width: 992px)" srcset="[Link]">
<source media="(min-width: 576px)" srcset="[Link]">
<img src="[Link]" alt="Responsive image">
</picture>
5.3 Viewport Meta Tag
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
6. Best Practices
6.1 HTML Best Practices
Use semantic HTML elements
Maintain proper indentation
Include alt attributes for images
Use descriptive link text
Validate your HTML
Keep the DOM structure clean and minimal
Use comments to document complex structures
6.2 CSS Best Practices
Organize CSS with a methodology (BEM, SMACSS, etc.)
Use CSS variables for consistency:
root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
--font-size-base: 16px;
.button {
background-color: var(--primary-color);
font-size: var(--font-size-base);
Minimize specificity conflicts
Group related propertiesUse shorthand properties when possible
Keep selectors simple
Use a CSS reset or [Link]
Optimize for performance (minimize HTTP requests, use efficient
selectors)
6.3 Accessibility Best Practices
Use proper heading hierarchy
Include ARIA attributes when necessary
Ensure sufficient color contrast
Design keyboard-friendly interfaces
Test with screen readers
Provide text alternatives for non-text content
Make forms accessible
<label for="name">Name:</label>
<input type="text" id="name" name="name" aria-required="true">