Complete Introduction to HTML and CSS

Table of Contents

Introduction to Web Development
HTML Fundamentals
CSS Fundamentals
HTML Elements Deep Dive
CSS Styling Techniques
Layout and Positioning
Responsive Design
Forms and Input
Multimedia and Embedding
Advanced CSS
Best Practices
Practical Examples
Tools and Resources

Introduction to Web Development

What are HTML and CSS?

HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) are the foundational technologies for building web pages:

HTML: Structures the content on the web page (like the骨架 of a house)
CSS: Styles and layouts the content (like the paint, furniture, and decorations)

<!-- HTML provides structure -->
<article>
<h1>Welcome to My Website</h1>
<p>This is a paragraph of text.</p>
</article>

/* CSS provides styling */
article {
background-color: #f0f0f0;
padding: 20px;
border-radius: 5px;
}
h1 {
color: blue;
font-size: 24px;
}

How They Work Together

HTML and CSS work together through selectors and properties:

HTML creates elements with tags
CSS selects those elements and applies styles
The browser renders the styled content

<!DOCTYPE html>
<html>
<head>
<style>
/* CSS inside style tags */
.highlight {
background-color: yellow;
font-weight: bold;
}
</style>
</head>
<body>
<!-- HTML content -->
<p class="highlight">This text will be highlighted</p>
</body>
</html>

HTML Fundamentals

Basic HTML Document Structure

Every HTML document follows a standard structure:

<!DOCTYPE html>  <!-- Declares HTML5 -->
<html lang="en">  <!-- Root element with language -->
<head>
<meta charset="UTF-8">  <!-- Character encoding -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>  <!-- Page title -->
<link rel="stylesheet" href="styles.css">  <!-- Link to CSS -->
</head>
<body>
<!-- All visible content goes here -->
<header>
<h1>Welcome!</h1>
</header>
<main>
<p>This is my web page content.</p>
</main>
<footer>
<p>&copy; 2024</p>
</footer>
</body>
</html>

HTML Elements and Tags

HTML uses tags to define elements:

<!-- Element with opening and closing tags -->
<p>This is a paragraph</p>
<!-- Self-closing elements -->
<img src="image.jpg" alt="Description">
<br>  <!-- Line break -->
<hr>  <!-- Horizontal rule -->
<!-- Elements with attributes -->
<a href="https://example.com" target="_blank">Click me</a>
<!-- Nested elements -->
<div class="container">
<h2>Title</h2>
<p>Text with <strong>bold</strong> word</p>
</div>

Common HTML Elements

<!-- Headings - 6 levels -->
<h1>Most Important Heading</h1>
<h2>Subheading</h2>
<h3>Section Heading</h3>
<h4>Sub-section</h4>
<h5>Small heading</h5>
<h6>Least important</h6>
<!-- Text formatting -->
<p>Regular paragraph</p>
<strong>Bold text</strong>
<em>Italic text</em>
<u>Underlined text</u>
<mark>Highlighted text</mark>
<small>Small text</small>
<del>Deleted text</del>
<ins>Inserted text</ins>
<sub>Subscript</sub>
<sup>Superscript</sup>
<!-- Links -->
<a href="https://example.com">Absolute link</a>
<a href="/about">Relative link</a>
<a href="#section">Link to section</a>
<a href="mailto:[email protected]">Email link</a>
<!-- Lists -->
<!-- Unordered list -->
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<!-- Ordered list -->
<ol>
<li>First step</li>
<li>Second step</li>
<li>Third step</li>
</ol>
<!-- Description list -->
<dl>
<dt>Term</dt>
<dd>Description of term</dd>
</dl>
<!-- Images -->
<img src="photo.jpg" alt="Description of image" width="300" height="200">
<img src="https://example.com/image.jpg" alt="Remote image">
<!-- Tables -->
<table border="1">
<caption>Table Title</caption>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Footer</td>
</tr>
</tfoot>
</table>

CSS Fundamentals

CSS Syntax

CSS consists of selectors and declarations:

/* Basic syntax */
selector {
property: value;
another-property: value;
}
/* Example */
p {
color: blue;
font-size: 16px;
margin: 10px;
}

Ways to Add CSS

<!-- 1. Inline CSS (not recommended) -->
<p style="color: red; font-size: 20px;">This is red text</p>
<!-- 2. Internal CSS (in head) -->
<head>
<style>
p {
color: green;
font-size: 18px;
}
</style>
</head>
<!-- 3. External CSS (best practice) -->
<head>
<link rel="stylesheet" href="styles.css">
</head>

CSS Selectors

/* Element selectors */
p { color: black; }
h1 { font-size: 24px; }
/* Class selectors (most common) */
.highlight { background-color: yellow; }
.button { padding: 10px 20px; }
/* ID selectors (use sparingly) */
#header { background-color: #333; }
#submit-btn { background-color: green; }
/* Attribute selectors */
[type="text"] { border: 1px solid gray; }
[href^="https"] { color: blue; }
[src$=".jpg"] { border-radius: 5px; }
/* Descendant selectors */
article p { line-height: 1.5; }
div .content { margin: 10px; }
/* Child selectors */
ul > li { list-style: none; }
body > header { position: fixed; }
/* Adjacent sibling selectors */
h2 + p { font-weight: bold; }
/* General sibling selectors */
h2 ~ p { color: gray; }
/* Pseudo-classes */
a:hover { text-decoration: underline; }
li:first-child { font-weight: bold; }
li:last-child { border-bottom: none; }
li:nth-child(even) { background: #f0f0f0; }
input:focus { outline: 2px solid blue; }
/* Pseudo-elements */
p::first-line { font-variant: small-caps; }
p::first-letter { font-size: 200%; }
::before { content: "→ "; }
::after { content: " ←"; }
/* Multiple selectors */
h1, h2, h3 { font-family: Arial, sans-serif; }
.error, .warning { color: red; }

CSS Colors

/* Named colors */
color: red;
background-color: blue;
/* Hexadecimal */
color: #ff0000;      /* Red */
color: #00ff00;      /* Green */
color: #0000ff;      /* Blue */
color: #000;         /* Black (shorthand) */
color: #fff;         /* White (shorthand) */
/* RGB/RGBA */
color: rgb(255, 0, 0);           /* Red */
color: rgba(255, 0, 0, 0.5);      /* 50% transparent red */
/* HSL/HSLA */
color: hsl(0, 100%, 50%);         /* Red */
color: hsla(120, 100%, 50%, 0.3); /* 30% transparent green */
/* Current color */
border-color: currentColor;       /* Uses text color */

CSS Units

/* Absolute units */
width: 100px;        /* Pixels */
width: 1in;          /* Inches */
width: 1cm;          /* Centimeters */
width: 1mm;          /* Millimeters */
width: 1pt;          /* Points (1/72 inch) */
width: 1pc;          /* Picas (12 points) */
/* Relative units */
width: 50%;          /* Percentage of parent */
font-size: 1.5em;    /* Relative to parent font-size */
font-size: 1.5rem;   /* Relative to root font-size */
width: 50vw;         /* 50% of viewport width */
height: 50vh;        /* 50% of viewport height */
font-size: 1.2ex;    /* Relative to x-height */
font-size: 1.2ch;    /* Relative to '0' character width */
/* Modern units */
width: min(100%, 500px);              /* Minimum value */
width: max(300px, 50%);                /* Maximum value */
width: clamp(300px, 50%, 500px);       /* Value within range */
gap: 1cqw;                             /* Container query units */

HTML Elements Deep Dive

Semantic HTML

Semantic elements clearly describe their meaning:

<!-- Page structure -->
<header>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
</header>
<main>
<article>
<header>
<h1>Article Title</h1>
<p>Published on <time datetime="2024-01-15">January 15</time></p>
</header>
<section>
<h2>Section 1</h2>
<p>Content here...</p>
</section>
<section>
<h2>Section 2</h2>
<p>More content...</p>
</section>
<footer>
<p>Written by Author</p>
</footer>
</article>
<aside>
<h3>Related Articles</h3>
<ul>
<li><a href="#">Article 1</a></li>
<li><a href="#">Article 2</a></li>
</ul>
</aside>
</main>
<footer>
<p>&copy; 2024 My Website</p>
</footer>

Text-Level Semantics

<!-- Abbreviations -->
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
<!-- Address -->
<address>
Written by <a href="mailto:[email protected]">John Doe</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
<!-- Citations -->
<blockquote cite="https://example.com/source">
<p>This is a long quote from another source.</p>
</blockquote>
<p>As he said, <q cite="https://example.com">This is a short quote</q>.</p>
<p><cite>The Scream</cite> by Edvard Munch.</p>
<!-- Code -->
<code>console.log('Hello World');</code>
<pre>
function hello() {
console.log('Hello');
}
</pre>
<kbd>Ctrl + C</kbd>
<samp>Error: File not found</samp>
<var>username</var> variable

Grouping Content

<!-- Divisions and spans -->
<div class="container">
<span class="highlight">Important</span> text here
</div>
<!-- Figures -->
<figure>
<img src="diagram.jpg" alt="System diagram">
<figcaption>Figure 1: System Architecture</figcaption>
</figure>
<!-- Horizontal rule -->
<hr>
<!-- Preformatted text -->
<pre>
Line 1: Content
Line 2: More content
Indented line
</pre>

CSS Styling Techniques

Text Styling

/* Font properties */
p {
font-family: 'Helvetica', Arial, sans-serif;
font-size: 16px;
font-weight: bold;      /* normal, bold, 100-900 */
font-style: italic;      /* normal, italic, oblique */
font-variant: small-caps;
line-height: 1.5;        /* Unitless multiplier */
letter-spacing: 1px;      /* Space between letters */
word-spacing: 2px;        /* Space between words */
}
/* Text alignment and decoration */
h1 {
text-align: center;       /* left, right, center, justify */
text-decoration: underline; /* underline, overline, line-through, none */
text-transform: uppercase; /* uppercase, lowercase, capitalize */
text-indent: 20px;        /* Indent first line */
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
white-space: nowrap;       /* How white-space is handled */
word-break: break-all;     /* How words break */
writing-mode: horizontal-tb; /* Text direction */
}
/* Advanced text effects */
p {
text-overflow: ellipsis;   /* Show ... for overflow */
overflow: hidden;          /* Required for text-overflow */
direction: rtl;            /* Right to left text */
unicode-bidi: bidi-override;
}

Box Model

/* Every element is a box */
.element {
/* Content */
width: 200px;
height: 100px;
/* Padding - space inside the border */
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
/* Shorthand: top right bottom left */
padding: 10px 20px 10px 20px;
/* Shorthand: top/bottom left/right */
padding: 10px 20px;
/* Border */
border-width: 2px;
border-style: solid;      /* solid, dotted, dashed, double, groove, ridge, inset, outset, none */
border-color: black;
/* Shorthand */
border: 2px solid black;
/* Individual sides */
border-top: 1px dashed red;
border-bottom: 3px dotted blue;
/* Border radius */
border-radius: 5px;
border-radius: 10px 20px;  /* top-left/bottom-right top-right/bottom-left */
border-radius: 10px 20px 30px 40px;  /* top, right, bottom, left */
border-radius: 50%;        /* Makes a circle */
/* Margin - space outside the border */
margin: 10px 20px 10px 20px;
margin: 0 auto;            /* Center block elements */
}
/* Box sizing */
* {
box-sizing: border-box;    /* Includes padding/border in width */
/* content-box is default (width only content) */
}

Backgrounds

.element {
/* Background color */
background-color: #f0f0f0;
/* Background image */
background-image: url('image.jpg');
background-repeat: no-repeat;   /* repeat, repeat-x, repeat-y, no-repeat */
background-position: center;    /* top, bottom, left, right, center, % values */
background-size: cover;         /* cover, contain, auto, % values */
background-attachment: fixed;   /* scroll, fixed, local */
/* Multiple backgrounds */
background: 
linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
url('background.jpg') center/cover no-repeat fixed;
/* Gradients */
background: linear-gradient(to right, red, blue);
background: linear-gradient(45deg, red 0%, blue 50%, green 100%);
background: radial-gradient(circle at center, yellow, orange);
background: conic-gradient(from 90deg, red, yellow, green, blue);
/* Shorthand */
background: #f0f0f0 url('bg.jpg') no-repeat center/cover;
}

Lists Styling

/* Remove default list styling */
ul, ol {
list-style-type: none;
padding: 0;
margin: 0;
}
/* Custom list markers */
ul {
list-style-type: square;        /* disc, circle, square, decimal, lower-roman, etc. */
list-style-position: inside;     /* inside, outside */
list-style-image: url('marker.png');
}
/* Horizontal navigation */
nav ul {
list-style: none;
display: flex;
gap: 20px;
}
nav ul li {
margin: 0;
padding: 0;
}
nav ul li a {
text-decoration: none;
padding: 10px 15px;
background: #333;
color: white;
}

Layout and Positioning

Display Property

/* Display values */
.block {
display: block;              /* Takes full width, starts new line */
}
.inline {
display: inline;             /* Takes only needed width, no line break */
}
.inline-block {
display: inline-block;       /* Inline but can set width/height */
}
.none {
display: none;               /* Element not displayed */
}
.flex {
display: flex;               /* Flexbox layout */
}
.grid {
display: grid;               /* Grid layout */
}
.table {
display: table;              /* Table layout */
}
/* Visibility vs Display */
.hidden {
visibility: hidden;          /* Element hidden but takes space */
}
.gone {
display: none;               /* Element removed from layout */
}

Positioning

/* Position values */
.static {
position: static;            /* Default - follows normal flow */
}
.relative {
position: relative;          /* Relative to normal position */
top: 10px;
left: 20px;
}
.absolute {
position: absolute;          /* Relative to nearest positioned ancestor */
top: 0;
right: 0;
}
.fixed {
position: fixed;             /* Relative to viewport */
bottom: 20px;
right: 20px;
}
.sticky {
position: sticky;            /* Toggles between relative and fixed */
top: 0;
}
/* Z-index for stacking */
.layer1 {
position: relative;
z-index: 1;                  /* Lower number = lower layer */
}
.layer2 {
position: relative;
z-index: 2;                  /* Appears above layer1 */
}

Flexbox

/* Container properties */
.container {
display: flex;               /* or inline-flex */
flex-direction: row;         /* row, row-reverse, column, column-reverse */
flex-wrap: wrap;             /* nowrap, wrap, wrap-reverse */
justify-content: space-between; /* Main axis alignment */
align-items: center;          /* Cross axis alignment */
align-content: stretch;       /* Multi-line alignment */
gap: 20px;                    /* Space between items */
}
/* Item properties */
.item {
flex-grow: 1;                /* Ability to grow */
flex-shrink: 1;              /* Ability to shrink */
flex-basis: auto;            /* Initial size */
flex: 1 1 auto;              /* Shorthand: grow shrink basis */
align-self: center;          /* Override align-items */
order: 0;                     /* Item order */
}
/* Common flex patterns */
.flex-center {
display: flex;
justify-content: center;
align-items: center;
}
.flex-between {
display: flex;
justify-content: space-between;
align-items: center;
}
.flex-wrap {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.flex-wrap > * {
flex: 1 1 300px;             /* Grow, shrink, basis */
}
/* Navigation bar */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
}
.nav-links {
display: flex;
gap: 1rem;
list-style: none;
}

Grid

/* Container properties */
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;  /* Three columns */
grid-template-rows: auto 200px auto;   /* Three rows */
grid-template-areas: 
"header header header"
"sidebar main main"
"footer footer footer";
gap: 20px;                            /* Grid gap */
justify-items: stretch;                /* Horizontal alignment */
align-items: stretch;                  /* Vertical alignment */
place-items: center;                    /* Shorthand for both */
}
/* Item properties */
.header {
grid-area: header;                     /* Place in named area */
}
.sidebar {
grid-column: 1 / 2;                    /* Start at line 1, end at 2 */
grid-row: 2 / 3;
}
.main {
grid-column: span 2;                   /* Span 2 columns */
grid-row: 2;
}
.footer {
grid-column: 1 / -1;                   /* Start to end */
}
/* Responsive grid */
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
}
/* Grid with media queries */
@media (min-width: 768px) {
.container {
grid-template-columns: 1fr 3fr;
grid-template-areas: 
"header header"
"nav main"
"footer footer";
}
}

Responsive Design

Viewport Meta Tag

<head>
<!-- Essential for responsive design -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Additional options -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0">
</head>

Media Queries

/* Basic media queries */
@media screen and (max-width: 768px) {
body {
font-size: 14px;
}
.sidebar {
display: none;
}
}
/* Multiple conditions */
@media screen and (min-width: 768px) and (max-width: 1024px) {
.container {
width: 90%;
margin: 0 auto;
}
}
/* Orientation */
@media (orientation: landscape) {
.sidebar {
width: 30%;
}
}
@media (orientation: portrait) {
.sidebar {
width: 100%;
}
}
/* Print styles */
@media print {
.no-print {
display: none;
}
a::after {
content: " (" attr(href) ")";
}
}
/* Dark mode */
@media (prefers-color-scheme: dark) {
body {
background: #333;
color: #fff;
}
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
/* High contrast */
@media (prefers-contrast: high) {
button {
border: 2px solid black;
}
}

Responsive Units

/* Modern responsive approach */
html {
/* Base for rem units */
font-size: 16px;
}
@media (max-width: 768px) {
html {
font-size: 14px;
}
}
.container {
/* Fluid widths */
width: 90%;
max-width: 1200px;
margin: 0 auto;
/* Responsive padding */
padding: clamp(1rem, 5%, 3rem);
}
h1 {
/* Responsive font size */
font-size: clamp(1.5rem, 5vw, 3rem);
}
.card {
/* Flexible cards */
width: min(100%, 400px);
/* Aspect ratio */
aspect-ratio: 16 / 9;
}
/* Container queries (modern) */
@container (max-width: 400px) {
.card {
flex-direction: column;
}
}

Responsive Images

<!-- Responsive images with srcset -->
<img src="small.jpg"
srcset="small.jpg 500w,
medium.jpg 1000w,
large.jpg 2000w"
sizes="(max-width: 600px) 100vw,
(max-width: 1200px) 50vw,
33vw"
alt="Responsive image">
<!-- Picture element for art direction -->
<picture>
<source media="(max-width: 600px)" srcset="mobile.jpg">
<source media="(max-width: 1200px)" srcset="tablet.jpg">
<img src="desktop.jpg" alt="Hero image">
</picture>
<!-- Lazy loading -->
<img src="image.jpg" loading="lazy" alt="Lazy loaded image">

Forms and Input

Form Structure

<!-- Basic form -->
<form action="/submit" method="post" enctype="multipart/form-data">
<!-- Form fields go here -->
<button type="submit">Submit</button>
</form>
<!-- Form with validation -->
<form novalidate>  <!-- Disable browser validation -->
<!-- Custom validation -->
</form>

Input Types

<!-- Text inputs -->
<input type="text" name="username" placeholder="Enter username">
<input type="password" name="password" placeholder="Password">
<input type="email" name="email" placeholder="Email">
<input type="tel" name="phone" placeholder="Phone">
<input type="url" name="website" placeholder="Website">
<input type="search" name="search" placeholder="Search...">
<!-- Number inputs -->
<input type="number" name="age" min="0" max="150" step="1">
<input type="range" name="volume" min="0" max="100" value="50">
<!-- Date/time inputs -->
<input type="date" name="birthday">
<input type="time" name="appointment">
<input type="datetime-local" name="meeting">
<input type="month" name="month">
<input type="week" name="week">
<!-- Selection inputs -->
<input type="checkbox" name="subscribe" checked>
<input type="radio" name="gender" value="male" checked>
<input type="radio" name="gender" value="female">
<!-- File inputs -->
<input type="file" name="avatar" accept="image/*" multiple>
<!-- Hidden inputs -->
<input type="hidden" name="user_id" value="123">
<!-- Buttons -->
<input type="submit" value="Save">
<input type="reset" value="Reset">
<input type="button" value="Click me" onclick="alert('Clicked')">
<!-- HTML5 inputs -->
<input type="color" name="favcolor">
<input type="range" name="points" min="0" max="10">
<input type="week" name="week_year">
<input type="datetime-local" name="datetime">

Select and Textarea

<!-- Dropdown select -->
<select name="country" required>
<option value="">Select country</option>
<optgroup label="North America">
<option value="us">United States</option>
<option value="ca">Canada</option>
<option value="mx">Mexico</option>
</optgroup>
<optgroup label="Europe">
<option value="uk">United Kingdom</option>
<option value="fr">France</option>
<option value="de">Germany</option>
</optgroup>
</select>
<!-- Multiple select -->
<select name="colors" multiple size="3">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="yellow">Yellow</option>
</select>
<!-- Textarea -->
<textarea name="message" rows="5" cols="40" placeholder="Enter your message..."></textarea>

Form Validation

<!-- HTML5 validation attributes -->
<form>
<input type="text" required minlength="3" maxlength="20" pattern="[A-Za-z]+">
<input type="email" required multiple>
<input type="number" min="18" max="99">
<input type="url" required>
<input type="tel" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">
<input type="file" accept=".jpg,.png" required>
<!-- Custom validation message -->
<input type="text" 
required 
oninvalid="this.setCustomValidity('Please enter your name')"
oninput="this.setCustomValidity('')">
<button type="submit">Submit</button>
</form>

Styling Forms

/* Form styling */
form {
max-width: 500px;
margin: 2rem auto;
padding: 2rem;
background: #f9f9f9;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
/* Form groups */
.form-group {
margin-bottom: 1.5rem;
}
label {
display: block;
margin-bottom: 0.5rem;
font-weight: bold;
color: #333;
}
/* Input styling */
input, select, textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 1rem;
transition: border-color 0.3s, box-shadow 0.3s;
}
input:focus, select:focus, textarea:focus {
outline: none;
border-color: #007bff;
box-shadow: 0 0 0 3px rgba(0,123,255,0.1);
}
/* Validation states */
input:valid {
border-color: #28a745;
}
input:invalid:not(:placeholder-shown) {
border-color: #dc3545;
}
/* Checkbox and radio styling */
.checkbox-group, .radio-group {
display: flex;
align-items: center;
gap: 0.5rem;
}
.checkbox-group input[type="checkbox"],
.radio-group input[type="radio"] {
width: auto;
margin-right: 0.5rem;
}
/* Custom checkbox */
.custom-checkbox {
position: relative;
padding-left: 2rem;
cursor: pointer;
}
.custom-checkbox input {
position: absolute;
opacity: 0;
cursor: pointer;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 20px;
width: 20px;
background-color: #eee;
border-radius: 4px;
}
.custom-checkbox:hover input ~ .checkmark {
background-color: #ccc;
}
.custom-checkbox input:checked ~ .checkmark {
background-color: #007bff;
}
.checkmark:after {
content: "";
position: absolute;
display: none;
}
.custom-checkbox input:checked ~ .checkmark:after {
display: block;
}
.custom-checkbox .checkmark:after {
left: 6px;
top: 2px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
/* Submit button */
button[type="submit"] {
background: #007bff;
color: white;
padding: 0.75rem 1.5rem;
border: none;
border-radius: 4px;
font-size: 1rem;
cursor: pointer;
transition: background 0.3s;
}
button[type="submit"]:hover {
background: #0056b3;
}
button[type="submit"]:disabled {
background: #ccc;
cursor: not-allowed;
}

Multimedia and Embedding

Images

<!-- Basic image -->
<img src="photo.jpg" alt="Description" width="800" height="600">
<!-- Figure with caption -->
<figure>
<img src="diagram.svg" alt="System diagram">
<figcaption>Figure 1: System Architecture</figcaption>
</figure>
<!-- Image map -->
<img src="map.jpg" alt="Interactive map" usemap="#workmap">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" href="area1.html" alt="Area 1">
<area shape="circle" coords="337,300,44" href="area2.html" alt="Area 2">
<area shape="poly" coords="139,34,224,99,135,158" href="area3.html" alt="Area 3">
</map>

Video

<!-- Basic video -->
<video src="video.mp4" controls width="640" height="360">
Your browser doesn't support video.
</video>
<!-- Video with multiple sources -->
<video controls width="640" height="360" poster="thumbnail.jpg">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video.ogv" type="video/ogg">
<track src="subtitles.vtt" kind="subtitles" srclang="en" label="English">
Your browser doesn't support video.
</video>
<!-- Video attributes -->
<video controls autoplay loop muted preload="auto">
<source src="video.mp4" type="video/mp4">
</video>

Audio

<!-- Basic audio -->
<audio src="audio.mp3" controls>
Your browser doesn't support audio.
</audio>
<!-- Audio with multiple sources -->
<audio controls preload="auto">
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
<source src="audio.wav" type="audio/wav">
Your browser doesn't support audio.
</audio>

Embedding

<!-- YouTube video -->
<iframe width="560" height="315" 
src="https://www.youtube.com/embed/VIDEO_ID" 
frameborder="0" 
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
allowfullscreen>
</iframe>
<!-- Google Maps -->
<iframe 
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d..." 
width="600" 
height="450" 
style="border:0;" 
allowfullscreen>
</iframe>
<!-- Social media posts -->
<blockquote class="twitter-tweet">
<p lang="en" dir="ltr">Tweet content</p>
&mdash; User (@username) <a href="https://twitter.com/...">Date</a>
</blockquote>
<script async src="https://platform.twitter.com/widgets.js"></script>
<!-- PDF document -->
<object data="document.pdf" type="application/pdf" width="100%" height="600px">
<p>Unable to display PDF. <a href="document.pdf">Download</a> instead.</p>
</object>

Advanced CSS

CSS Variables (Custom Properties)

/* Define variables */
:root {
--primary-color: #007bff;
--secondary-color: #6c757d;
--font-size-base: 16px;
--spacing-unit: 8px;
--container-width: 1200px;
--border-radius: 4px;
--box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
/* Use variables */
.button {
background: var(--primary-color);
color: white;
padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 4);
border-radius: var(--border-radius);
font-size: var(--font-size-base);
}
/* Override in components */
.card {
--card-padding: 20px;
padding: var(--card-padding);
}
.card.featured {
--primary-color: #ff5722;
background: var(--primary-color);
}
/* Theme switching */
.dark-theme {
--bg-color: #333;
--text-color: #fff;
--link-color: #66b0ff;
}
.light-theme {
--bg-color: #fff;
--text-color: #333;
--link-color: #007bff;
}
body {
background: var(--bg-color);
color: var(--text-color);
}
/* JavaScript integration */
/* document.documentElement.style.setProperty('--primary-color', '#ff0000'); */

Animations and Transitions

/* Transitions */
.button {
background: blue;
transition: background 0.3s ease, transform 0.2s;
}
.button:hover {
background: darkblue;
transform: scale(1.05);
}
/* Multiple properties */
.element {
transition-property: width, height, background;
transition-duration: 0.5s, 0.5s, 0.3s;
transition-timing-function: ease, ease-in, linear;
transition-delay: 0s, 0s, 0.2s;
/* Shorthand */
transition: all 0.3s ease;
}
/* Keyframe animations */
@keyframes slide-in {
from {
transform: translateX(-100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* Apply animations */
.element {
animation: slide-in 0.5s ease-out;
}
.loader {
animation: spin 1s linear infinite;
}
.bouncing {
animation: bounce 2s ease infinite;
}
/* Animation properties */
.animated {
animation-name: slide-in;
animation-duration: 0.5s;
animation-timing-function: ease-out;
animation-delay: 0.2s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: forwards;
animation-play-state: running;
/* Shorthand */
animation: slide-in 0.5s ease-out 0.2s 1 normal forwards;
}
/* Animation events */
.animated:hover {
animation-play-state: paused;
}

Transforms

/* 2D transforms */
.element {
transform: translate(50px, 100px);     /* Move */
transform: rotate(45deg);               /* Rotate */
transform: scale(1.5);                  /* Scale */
transform: skew(10deg, 5deg);           /* Skew */
transform: matrix(1, 0.5, 0.5, 1, 0, 0); /* Matrix transform */
/* Multiple transforms */
transform: translate(50px, 100px) rotate(45deg) scale(1.5);
/* Transform origin */
transform-origin: top left;
transform-origin: 50% 50%;
}
/* 3D transforms */
.element-3d {
transform: perspective(500px) rotateX(45deg) rotateY(30deg);
transform-style: preserve-3d;
backface-visibility: hidden;
}
/* Card flip example */
.card {
width: 200px;
height: 300px;
position: relative;
transform-style: preserve-3d;
transition: transform 0.6s;
}
.card:hover {
transform: rotateY(180deg);
}
.card-front, .card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.card-back {
transform: rotateY(180deg);
}

Filters and Effects

/* CSS filters */
.image {
filter: blur(5px);
filter: brightness(150%);
filter: contrast(200%);
filter: grayscale(100%);
filter: hue-rotate(90deg);
filter: invert(100%);
filter: opacity(50%);
filter: saturate(200%);
filter: sepia(100%);
filter: drop-shadow(2px 4px 6px black);
/* Multiple filters */
filter: brightness(150%) contrast(200%) sepia(50%);
}
/* Backdrop filters (apply to area behind element) */
.modal {
backdrop-filter: blur(10px) brightness(80%);
backdrop-filter: blur(4px);
}
/* Blend modes */
.blended {
background-blend-mode: multiply;  /* screen, overlay, darken, lighten, etc. */
mix-blend-mode: difference;
}
/* Clip path */
.clipped {
clip-path: circle(50%);
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
clip-path: ellipse(25% 40% at 50% 50%);
clip-path: inset(10% 20% 30% 40%);
}
/* Masking */
.masked {
mask-image: linear-gradient(to bottom, transparent, black);
mask-image: url('mask.png');
mask-size: cover;
mask-composite: exclude;
}

Advanced Selectors

/* Structural pseudo-classes */
li:first-child { }           /* First child */
li:last-child { }            /* Last child */
li:nth-child(2) { }          /* Second child */
li:nth-last-child(2) { }     /* Second from last */
li:nth-child(odd) { }        /* Odd children */
li:nth-child(even) { }       /* Even children */
li:nth-child(3n+1) { }       /* Every third starting from first */
/* Type selectors */
p:first-of-type { }          /* First p element */
p:last-of-type { }           /* Last p element */
p:nth-of-type(2) { }         /* Second p element */
/* Empty and not */
div:empty { }                 /* Elements with no children */
div:not(.class) { }          /* Elements without class */
/* Form states */
input:enabled { }             /* Enabled inputs */
input:disabled { }            /* Disabled inputs */
input:checked { }             /* Checked checkboxes/radios */
input:indeterminate { }       /* Indeterminate checkboxes */
input:default { }             /* Default option */
input:valid { }               /* Valid inputs */
input:invalid { }             /* Invalid inputs */
input:in-range { }            /* Inputs within range */
input:out-of-range { }        /* Inputs outside range */
input:required { }            /* Required inputs */
input:optional { }            /* Optional inputs */
input:read-only { }           /* Read-only inputs */
input:read-write { }          /* Read-write inputs */
/* Link states */
a:link { }                    /* Unvisited links */
a:visited { }                 /* Visited links */
a:hover { }                   /* Hover state */
a:active { }                  /* Active state */
a:focus { }                   /* Focus state */
a:focus-within { }            /* Element with focused child */
a:focus-visible { }           /* Focus when using keyboard */
/* Target and root */
:target { }                   /* Element targeted by URL fragment */
:root { }                     /* Root element (html) */
/* Scope and host */
:scope { }                    /* Scope element */
:host { }                     /* Shadow DOM host */
:host-context(selector) { }   /* Shadow DOM host with context */
/* Language */
:lang(en) { }                 /* English language elements */
/* UI states */
:fullscreen { }               /* Fullscreen mode */
:modal { }                    /* Modal element */
:picture-in-picture { }       /* Picture-in-picture video */

Best Practices

HTML Best Practices

<!-- 1. Always use doctype -->
<!DOCTYPE html>
<!-- 2. Include meta charset -->
<meta charset="UTF-8">
<!-- 3. Use semantic HTML -->
<article>...</article>
<section>...</section>
<nav>...</nav>
<!-- 4. Use alt attributes for images -->
<img src="logo.png" alt="Company Logo">
<!-- 5. Use labels for form inputs -->
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<!-- 6. Indent properly -->
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Heading</h1>
<p>Paragraph</p>
</body>
</html>
<!-- 7. Use lowercase tags and attributes -->
<!-- Good -->
<div class="container"></div>
<!-- Bad -->
<DIV CLASS="container"></DIV>
<!-- 8. Close all tags -->
<!-- Good -->
<p>Text</p>
<!-- Bad -->
<p>Text
<!-- 9. Use quotes for attributes -->
<!-- Good -->
<a href="page.html">Link</a>
<!-- Bad -->
<a href=page.html>Link</a>
<!-- 10. Validate your HTML -->
<!-- https://validator.w3.org/ -->

CSS Best Practices

/* 1. Use a consistent naming convention */
/* BEM naming */
.block { }
.block__element { }
.block__element--modifier { }
/* Example */
.card { }
.card__title { }
.card__image { }
.card__button { }
.card__button--primary { }
/* 2. Organize CSS logically */
/* Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Variables */
:root {
--primary-color: #007bff;
}
/* Base styles */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
/* Layout */
.container {
max-width: 1200px;
margin: 0 auto;
}
/* Components */
.button {
/* styles */
}
/* Utilities */
.text-center { text-align: center; }
.mt-1 { margin-top: 0.5rem; }
.hidden { display: none; }
/* Media queries */
@media (max-width: 768px) {
/* responsive styles */
}
/* 3. Avoid !important */
/* Good - increase specificity */
.important-button.button {
background: red;
}
/* Bad */
.button {
background: red !important;
}
/* 4. Use shorthand properties */
/* Good */
padding: 10px 20px;
/* Bad */
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
/* 5. Comment your code */
/* Navigation bar - fixed at top */
.navbar {
position: fixed;
top: 0;
width: 100%;
}
/* 6. Optimize performance */
/* Use transforms instead of position/width/height for animations */
.animated {
transform: translateX(100px);
/* instead of left: 100px */
}
/* 7. Mobile-first approach */
/* Base styles (mobile) */
.container {
width: 100%;
padding: 10px;
}
/* Tablet */
@media (min-width: 768px) {
.container {
width: 750px;
margin: 0 auto;
}
}
/* Desktop */
@media (min-width: 1024px) {
.container {
width: 960px;
}
}
/* 8. Use modern units */
/* Use rem for font sizes */
html { font-size: 16px; }
h1 { font-size: 2rem; }  /* 32px */
p { font-size: 1rem; }   /* 16px */
/* Use vh/vw for viewport sizing */
.hero {
height: 100vh;
}
/* 9. Validate CSS */
/* https://jigsaw.w3.org/css-validator/ */
/* 10. Minify for production */
/* Use tools like cssnano, clean-css */

Accessibility (a11y) Best Practices

<!-- 1. Use semantic HTML -->
<button>Click me</button>  <!-- Good -->
<div onclick="submit()">Click me</div>  <!-- Bad -->
<!-- 2. Provide text alternatives -->
<img src="icon.png" alt="Search">
<!-- 3. Use ARIA attributes when needed -->
<div role="button" tabindex="0" aria-label="Close">×</div>
<!-- 4. Maintain focus indicators -->
:focus {
outline: 2px solid blue;
outline-offset: 2px;
}
/* Don't remove focus outlines */
:focus {
outline: none; /* Bad */
}
/* 5. Use proper heading hierarchy -->
<h1>Page Title</h1>
<h2>Section</h2>
<h3>Subsection</h3>
<!-- 6. Associate labels with inputs -->
<label for="email">Email:</label>
<input id="email" type="email">
<!-- 7. Use landmark roles -->
<header role="banner">...</header>
<nav role="navigation">...</nav>
<main role="main">...</main>
<footer role="contentinfo">...</footer>
<!-- 8. Provide skip navigation -->
<a href="#main" class="skip-link">Skip to main content</a>
<!-- 9. Ensure color contrast -->
/* Use tools to check contrast ratio */
.button {
background: #007bff;  /* Check contrast with white text */
color: white;
}
<!-- 10. Make forms accessible -->
<fieldset>
<legend>Personal Information</legend>
<!-- form fields -->
</fieldset>
<!-- 11. Use meaningful link text -->
<!-- Good -->
<a href="/about">Learn more about our company</a>
<!-- Bad -->
<a href="/about">Click here</a>
<!-- 12. Provide transcripts for media -->
<video controls>
<source src="video.mp4">
<track kind="captions" src="captions.vtt">
</video>

Performance Best Practices

<!-- 1. Load CSS in head -->
<head>
<link rel="stylesheet" href="styles.css">
</head>
<!-- 2. Load JavaScript at end of body -->
<body>
<!-- content -->
<script src="script.js"></script>
</body>
<!-- 3. Use async/defer for scripts -->
<script async src="analytics.js"></script>
<script defer src="app.js"></script>
<!-- 4. Optimize images -->
<img src="image.jpg" loading="lazy" width="800" height="600">
<!-- 5. Use modern image formats -->
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Description">
</picture>
<!-- 6. Minify resources -->
<!-- Use minified versions in production -->
<link rel="stylesheet" href="styles.min.css">
<script src="script.min.js"></script>
<!-- 7. Use CDN for libraries -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<!-- 8. Preconnect to external domains -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<!-- 9. Preload critical resources -->
<link rel="preload" href="critical.css" as="style">
<link rel="preload" href="hero-image.jpg" as="image">
<!-- 10. Use HTTP/2 -->
<!-- Enables multiplexing, server push -->

Practical Examples

Example 1: Modern Landing Page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modern Landing Page</title>
<style>
/* Variables */
:root {
--primary: #4361ee;
--secondary: #3f37c9;
--accent: #4895ef;
--text: #333;
--light: #f8f9fa;
--dark: #212529;
--spacing: 1rem;
--container-width: 1200px;
--border-radius: 8px;
--box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
/* Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Base styles */
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
line-height: 1.6;
color: var(--text);
}
.container {
max-width: var(--container-width);
margin: 0 auto;
padding: 0 var(--spacing);
}
/* Typography */
h1 {
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: 800;
line-height: 1.2;
margin-bottom: 1rem;
}
h2 {
font-size: clamp(1.5rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 2rem;
}
/* Buttons */
.btn {
display: inline-block;
padding: 0.75rem 1.5rem;
border-radius: var(--border-radius);
text-decoration: none;
font-weight: 600;
transition: all 0.3s;
cursor: pointer;
}
.btn-primary {
background: var(--primary);
color: white;
}
.btn-primary:hover {
background: var(--secondary);
transform: translateY(-2px);
box-shadow: var(--box-shadow);
}
.btn-outline {
border: 2px solid var(--primary);
color: var(--primary);
}
.btn-outline:hover {
background: var(--primary);
color: white;
}
/* Header */
.header {
position: fixed;
top: 0;
width: 100%;
background: rgba(255,255,255,0.95);
backdrop-filter: blur(10px);
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
z-index: 1000;
}
.nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 0;
}
.logo {
font-size: 1.5rem;
font-weight: 800;
color: var(--primary);
}
.nav-links {
display: flex;
gap: 2rem;
list-style: none;
}
.nav-links a {
text-decoration: none;
color: var(--text);
font-weight: 500;
transition: color 0.3s;
}
.nav-links a:hover {
color: var(--primary);
}
.menu-toggle {
display: none;
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
}
/* Hero section */
.hero {
min-height: 100vh;
display: flex;
align-items: center;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
text-align: center;
}
.hero-content {
max-width: 800px;
margin: 0 auto;
}
.hero h1 {
margin-bottom: 1.5rem;
}
.hero p {
font-size: 1.25rem;
margin-bottom: 2rem;
opacity: 0.9;
}
/* Features section */
.features {
padding: 5rem 0;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.feature-card {
padding: 2rem;
background: white;
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
transition: transform 0.3s;
}
.feature-card:hover {
transform: translateY(-5px);
}
.feature-icon {
width: 60px;
height: 60px;
background: var(--light);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
font-size: 2rem;
}
.feature-card h3 {
margin-bottom: 0.5rem;
}
/* About section */
.about {
padding: 5rem 0;
background: var(--light);
}
.about-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.about-image {
width: 100%;
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
}
/* CTA section */
.cta {
padding: 5rem 0;
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: white;
text-align: center;
}
.cta h2 {
margin-bottom: 1rem;
}
.cta p {
margin-bottom: 2rem;
opacity: 0.9;
}
.cta .btn {
background: white;
color: var(--primary);
}
.cta .btn:hover {
background: var(--light);
color: var(--secondary);
}
/* Footer */
.footer {
padding: 3rem 0;
background: var(--dark);
color: white;
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}
.footer-section h4 {
margin-bottom: 1rem;
color: var(--accent);
}
.footer-section ul {
list-style: none;
}
.footer-section li {
margin-bottom: 0.5rem;
}
.footer-section a {
color: rgba(255,255,255,0.8);
text-decoration: none;
transition: color 0.3s;
}
.footer-section a:hover {
color: white;
}
.social-links {
display: flex;
gap: 1rem;
margin-top: 1rem;
}
.social-links a {
width: 40px;
height: 40px;
background: rgba(255,255,255,0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.3s;
}
.social-links a:hover {
background: var(--primary);
}
.copyright {
text-align: center;
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px solid rgba(255,255,255,0.1);
color: rgba(255,255,255,0.6);
}
/* Responsive */
@media (max-width: 768px) {
.nav-links {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: white;
flex-direction: column;
padding: 1rem;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.nav-links.active {
display: flex;
}
.menu-toggle {
display: block;
}
.about-content {
grid-template-columns: 1fr;
}
.footer-content {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<header class="header">
<nav class="container nav">
<div class="logo">Brand</div>
<button class="menu-toggle" aria-label="Menu">☰</button>
<ul class="nav-links">
<li><a href="#home">Home</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#" class="btn btn-primary">Get Started</a></li>
</ul>
</nav>
</header>
<main>
<section id="home" class="hero">
<div class="container hero-content">
<h1>Build Amazing Websites</h1>
<p>Create stunning, responsive websites with modern HTML and CSS. Perfect for beginners and professionals alike.</p>
<a href="#" class="btn btn-primary">Get Started</a>
<a href="#" class="btn btn-outline">Learn More</a>
</div>
</section>
<section id="features" class="features">
<div class="container">
<h2>Features</h2>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon">🚀</div>
<h3>Fast Performance</h3>
<p>Optimized for speed and performance with best practices and modern techniques.</p>
</div>
<div class="feature-card">
<div class="feature-icon">📱</div>
<h3>Responsive Design</h3>
<p>Looks great on all devices from mobile phones to desktop computers.</p>
</div>
<div class="feature-card">
<div class="feature-icon">🎨</div>
<h3>Customizable</h3>
<p>Easily customize colors, fonts, and layouts to match your brand.</p>
</div>
</div>
</div>
</section>
<section id="about" class="about">
<div class="container about-content">
<div>
<h2>About Us</h2>
<p>We're passionate about creating beautiful, functional websites that help businesses succeed online. Our team combines creativity with technical expertise to deliver outstanding results.</p>
<p>With years of experience in web development, we understand what it takes to create engaging user experiences that convert visitors into customers.</p>
<a href="#" class="btn btn-primary">Learn More</a>
</div>
<img src="https://via.placeholder.com/600x400" alt="About us" class="about-image">
</div>
</section>
<section class="cta">
<div class="container">
<h2>Ready to Get Started?</h2>
<p>Join thousands of satisfied customers who trust us with their web development needs.</p>
<a href="#" class="btn">Contact Us Today</a>
</div>
</section>
</main>
<footer class="footer">
<div class="container">
<div class="footer-content">
<div class="footer-section">
<h4>About</h4>
<p>Your trusted partner for web development solutions. We deliver quality and innovation.</p>
<div class="social-links">
<a href="#" aria-label="Facebook">📘</a>
<a href="#" aria-label="Twitter">🐦</a>
<a href="#" aria-label="Instagram">📷</a>
<a href="#" aria-label="LinkedIn">💼</a>
</div>
</div>
<div class="footer-section">
<h4>Quick Links</h4>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="footer-section">
<h4>Resources</h4>
<ul>
<li><a href="#">Blog</a></li>
<li><a href="#">Documentation</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</div>
<div class="footer-section">
<h4>Contact</h4>
<ul>
<li>📧 [email protected]</li>
<li>📞 (555) 123-4567</li>
<li>📍 123 Main St, City</li>
</ul>
</div>
</div>
<div class="copyright">
<p>&copy; 2024 Your Company. All rights reserved.</p>
</div>
</div>
</footer>
<script>
// Mobile menu toggle
document.querySelector('.menu-toggle').addEventListener('click', function() {
document.querySelector('.nav-links').classList.toggle('active');
});
// Smooth scroll for navigation links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({ behavior: 'smooth' });
}
});
});
</script>
</body>
</html>

Example 2: Responsive Card Grid

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Card Grid Example</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
background: #f5f5f5;
padding: 2rem;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
h1 {
text-align: center;
margin-bottom: 2rem;
color: #333;
}
/* Card grid */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
/* Card styles */
.card {
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
transition: transform 0.3s, box-shadow 0.3s;
cursor: pointer;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 15px rgba(0,0,0,0.2);
}
.card-image {
width: 100%;
height: 200px;
object-fit: cover;
}
.card-content {
padding: 1.5rem;
}
.card-category {
display: inline-block;
padding: 0.25rem 0.75rem;
background: #e0e7ff;
color: #4361ee;
border-radius: 20px;
font-size: 0.875rem;
font-weight: 600;
margin-bottom: 0.75rem;
}
.card-title {
font-size: 1.25rem;
margin-bottom: 0.5rem;
color: #333;
}
.card-description {
color: #666;
line-height: 1.6;
margin-bottom: 1rem;
}
.card-meta {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 1rem;
border-top: 1px solid #eee;
color: #999;
font-size: 0.875rem;
}
.card-author {
display: flex;
align-items: center;
gap: 0.5rem;
}
.author-avatar {
width: 30px;
height: 30px;
border-radius: 50%;
background: #e0e7ff;
display: flex;
align-items: center;
justify-content: center;
color: #4361ee;
font-weight: 600;
}
.card-actions {
display: flex;
gap: 1rem;
}
.card-actions button {
background: none;
border: none;
cursor: pointer;
color: #999;
transition: color 0.3s;
}
.card-actions button:hover {
color: #4361ee;
}
@media (max-width: 768px) {
body {
padding: 1rem;
}
.card-grid {
gap: 1rem;
}
}
</style>
</head>
<body>
<div class="container">
<h1>Popular Articles</h1>
<div class="card-grid">
<div class="card">
<img src="https://via.placeholder.com/400x200/4361ee/ffffff?text=Card+Image" alt="Card image" class="card-image">
<div class="card-content">
<span class="card-category">Technology</span>
<h3 class="card-title">Understanding Modern Web Development</h3>
<p class="card-description">Learn about the latest trends in web development including frameworks, tools, and best practices.</p>
<div class="card-meta">
<div class="card-author">
<span class="author-avatar">JD</span>
<span>John Doe</span>
</div>
<div class="card-actions">
<button>❤️ 24</button>
<button>💬 12</button>
</div>
</div>
</div>
</div>
<div class="card">
<img src="https://via.placeholder.com/400x200/3f37c9/ffffff?text=Card+Image" alt="Card image" class="card-image">
<div class="card-content">
<span class="card-category">Design</span>
<h3 class="card-title">CSS Grid vs Flexbox</h3>
<p class="card-description">A comprehensive comparison between CSS Grid and Flexbox for modern layouts.</p>
<div class="card-meta">
<div class="card-author">
<span class="author-avatar">JS</span>
<span>Jane Smith</span>
</div>
<div class="card-actions">
<button>❤️ 18</button>
<button>💬 8</button>
</div>
</div>
</div>
</div>
<div class="card">
<img src="https://via.placeholder.com/400x200/4895ef/ffffff?text=Card+Image" alt="Card image" class="card-image">
<div class="card-content">
<span class="card-category">Tutorial</span>
<h3 class="card-title">Getting Started with HTML5</h3>
<p class="card-description">A beginner-friendly guide to HTML5 features and semantic markup.</p>
<div class="card-meta">
<div class="card-author">
<span class="author-avatar">BW</span>
<span>Bob Wilson</span>
</div>
<div class="card-actions">
<button>❤️ 32</button>
<button>💬 15</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Tools and Resources

Development Tools

Code Editors

VS Code (with Live Server extension)
Sublime Text
Atom
Brackets
WebStorm

Browser DevTools

Chrome DevTools
Firefox Developer Tools
Safari Web Inspector

Online Editors

CodePen
JSFiddle
CodeSandbox
StackBlitz

Validation and Testing

HTML Validator: https://validator.w3.org/
CSS Validator: https://jigsaw.w3.org/css-validator/
Lighthouse: Built into Chrome DevTools
Accessibility Checker: https://wave.webaim.org/

CSS Frameworks

Bootstrap: https://getbootstrap.com/
Tailwind CSS: https://tailwindcss.com/
Bulma: https://bulma.io/
Foundation: https://get.foundation/
Materialize: https://materializecss.com/

Learning Resources

MDN Web Docs: https://developer.mozilla.org/
CSS-Tricks: https://css-tricks.com/
W3Schools: https://www.w3schools.com/
freeCodeCamp: https://www.freecodecamp.org/
Codecademy: https://www.codecademy.com/

Icons and Images

Font Awesome: https://fontawesome.com/
Google Icons: https://fonts.google.com/icons
Unsplash: https://unsplash.com/ (free images)
Pexels: https://www.pexels.com/ (free stock photos)
SVG Repo: https://www.svgrepo.com/ (free SVGs)

Color Tools

Coolors: https://coolors.co/ (color palette generator)
Color Hunt: https://colorhunt.co/ (color palettes)
WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/
Adobe Color: https://color.adobe.com/

Font Resources

Google Fonts: https://fonts.google.com/
Font Squirrel: https://www.fontsquirrel.com/
Adobe Fonts: https://fonts.adobe.com/

Performance Tools

PageSpeed Insights: https://pagespeed.web.dev/
GTmetrix: https://gtmetrix.com/
WebPageTest: https://www.webpagetest.org/

Conclusion

HTML and CSS form the foundation of web development. This comprehensive guide covers:

Key Takeaways

HTML provides the structure and meaning of content
CSS handles presentation, styling, and layout
Semantic HTML improves accessibility and SEO
Responsive design ensures good experience on all devices
Modern CSS includes Flexbox, Grid, variables, and animations
Best practices ensure maintainable, performant code
Accessibility makes websites usable for everyone

Next Steps

Practice regularly by building projects
Learn JavaScript for interactive websites
Explore frameworks like React, Vue, or Angular
Study backend for full-stack development
Keep up with new CSS features and specifications
Contribute to open source projects
Build a portfolio to showcase your work

Remember: The best way to learn is by doing. Start with small projects and gradually increase complexity as you gain confidence!

HTML & CSS Learning Guides, Exercises, Projects, Design Systems, Accessibility & Performance (Related to HTML & CSS Development)

HTML & CSS Quiz – Comprehensive Assessment:
This quiz evaluates core knowledge of HTML and CSS including structure, styling, layout, forms, and responsive design. It is used to test practical understanding of front-end fundamentals and identify skill levels in web development.
Read more: https://macronepal.com/bash/html-and-css-quiz-comprehensive-assessment/

Complete Guide to HTML & CSS Tooling & Automation:
This guide explains tools and automation workflows used in modern web development, such as preprocessors, build tools, and task runners that improve efficiency in HTML and CSS projects.
Read more: https://macronepal.com/bash/complete-guide-to-html-and-css-tooling-automation/

Complete HTML & CSS Exercises:
A collection of practical exercises designed to strengthen HTML and CSS skills through hands-on coding tasks, covering layout, styling, and responsive design concepts.
Read more: https://macronepal.com/bash/complete-html-and-css-exercises/

Complete HTML & CSS Landing Page Project:
This project focuses on building a full landing page using HTML and CSS, helping learners understand real-world website structure, layout design, and UI development.
Read more: https://macronepal.com/bash/complete-html-css-landing-page-project/

HTML & CSS Debugging and Testing Guide:
This guide teaches how to identify and fix errors in HTML and CSS code, along with testing techniques to ensure websites work correctly across browsers.
Read more: https://macronepal.com/bash/complete-guide-to-html-and-css-debugging-testing/

HTML & CSS Design Systems Guide:
A design system approach helps maintain consistency in UI development using reusable components, styles, and patterns across web projects.
Read more: https://macronepal.com/html-and-css/complete-guide-to-html-and-css-design-systems/

HTML & CSS Accessibility (A11y) Guide:
This guide focuses on making websites accessible for all users, including proper semantic HTML, keyboard navigation, alt text, and screen reader support.
Read more: https://macronepal.com/bash/complete-guide-to-html-css-accessibility-a11y/

HTML & CSS Performance Guide:
This topic explains optimization techniques such as reducing file size, improving loading speed, and writing efficient HTML and CSS for better website performance.
Read more: https://macronepal.com/bash/complete-guide-to-html-and-css-performance/

HTML & CSS Design Systems (Advanced Overview):
Design systems help developers maintain scalable and consistent UI components across large projects using structured HTML and reusable CSS patterns.
Read more: https://macronepal.com/html-and-css/complete-guide-to-html-and-css-design-systems/