HTML/CSS: Complete GUIDE
Before Getting Started
Welcome to this comprehensive guide on HTML and CSS! Whether you're a beginner or looking to deepen your knowledge, this guide will help you master the basics and explore advanced techniques to create modern and attractive web pages.
Why Learn HTML and CSS?
HTML (HyperText Markup Language) is the fundamental language used to structure web pages, while CSS (Cascading Style Sheets) is used to style them and make them visually appealing. Together, these two languages are essential for any developer or website creator.
What You Will Learn
📌 HTML: Essential tags, page structure, forms, tables…
📌 CSS: Styling, colors, fonts, positioning, responsive design…
đź“Ś Best Practices: Accessibility, code optimization, and modern techniques.
Through this guide, you’ll learn step by step, with concrete examples and tips, how to build professional and well-structured websites.
💡 Ready to dive into the world of web development? Let’s go! 🚀
Guide Content
Dont forget: Join our web dev community—learn, build, and grow together, all for free!
1. Mastering HTML Fundamentals
HTML (Hypertext Markup Language) is the foundation of every web page’s structure. Here are the essential elements you need to master to get started:
HTML Structure
The basic structure of an HTML document consists of several key elements:
<!DOCTYPE html>: This declaration tells the browser that the file is an HTML5 document. It is essential to ensure that the document is correctly interpreted by all modern browsers.
<html>: The html element contains all the content of the web page. It is the root of all HTML elements.
<head>: The head section contains metadata about the document, such as links to CSS files, icons, page descriptions, etc. This information does not appear directly in the page content but influences its behavior and appearance.
Example:
<head>
<meta charset="UTF-8">
<title>My web page<title>
</head><meta>: The meta element defines metadata such as character encoding (UTF-8), page description, and SEO rules. For example, meta charset="UTF-8" defines the character encoding.
<body>: The body section contains all visible content of the web page: text, images, videos, etc.
HTML Elements
Here are the basic HTML elements that make up web page content:
Headings (<h1> - <h6>): Headings are used to structure content. h1 represents the main title (most important), while h6 represents a less important heading. Using hierarchical headings improves readability and accessibility.
Example:
<h1>Main Title<h1>
<h2>A Subtitle<h2>Paragraphs (<p>): Paragraphs are used to group text into logical units, helping to organize content into readable blocks.
Example:
<p>This is a paragraph of text.<p>Lists (<ul> - <ol>)
- (<ul>): Unordered list (with bullet points). Example:
<ul>
<li>First item</li>
<li>Second item</li>
</ul>- (<ol>): Ordered list (with numbers). Example:
<ol>
<li>First item</li>
<li>Second item</li>
</ol>Tables (<table>): Tables allow displaying data in a grid format.
<table>
<tr>
<th>First item</th>
<th>Second item</th>
</tr>
<tr>
<th>First item</th>
<th>Second item</th>
</tr>
</table>HTML Forms
Forms are used to collect user information:
Fields (<input> - <textarea>): Used for various types of text input, such as text fields, passwords, or emails.
Example:
<input type="text" placeholder="Enter your name">
<textarea placeholder="Enter a message"></textarea>Buttons (<button>: Used to create a button for submitting a form or performing an action.
Example:
<button type="submit"">Submit</button>Selections (<select>: Used to create a dropdown menu.
Example:
<button type="submit"">Submit</button>Selections (<select>: Used to create a dropdown menu.
Example:
<select>
<option value="option1">option1</option>
<option value="option2">option2</option>
</select>HTML Semantics
Semantic elements clearly describe their role in content structure, improving accessibility and SEO:
<header>: Represents the page or section header, often containing a logo, navigation bar, etc.
<nav>: A navigation block, typically used for main site navigation links.
<main>: Contains the main content of the page. It is unique and used only once per page.
<article>: Represents self-contained content that can be distributed or reused independently (e.g., blog posts, news articles, etc.).
<section>: Used to divide content into logical sections, usually with a heading.
<footer>: The footer element, typically used for information like credits, privacy policies, contact links, etc.
Accessibility (A11Y)
Accessibility ensures that web content is usable by all people, including those with disabilities. Here are some important practices:
<alt>: The alt attribute provides a text description of images. This is essential for people using screen readers.
Example:
<img src="image.jpg" alt="Image description"><aria-label>: Adds additional information to HTML elements to improve accessibility (e.g., buttons or form fields).
Example:
<button aria-label="Close window">X</button><role>: ARIA roles describe non-semantic elements (such as a button or dynamic panel) so screen readers know how to interpret them.
Example:
<div role="button" aria-pressed="false">Click here</div>Conclusion
Understanding these HTML fundamentals is essential for building well-structured, accessible, and optimized web pages. Once you master these basics, you’ll be able to create effective web pages and explore advanced concepts like CSS and JavaScript to make your applications even more interactive and dynamic.
đź’ˇ HTML Elements : complete list!
2. Mastering CSS Fundamentals
CSS (Cascading Style Sheets) is the language used to define the style of web pages, determining their layout, appearance, and visual presentation. Here are the key concepts to master for a solid understanding of CSS.
Selectors and Specificity
Selectors are patterns used to target specific HTML elements within a document. Specificity determines the priority of CSS rules when multiple styles could apply to the same element.
id (#): An ID selector targets an element with a specific identifier. IDs should be unique on a page and used only once per document.
#header {
background-color: blue;
}class (.): A class selector targets elements that have a specific class. Multiple elements can share the same class.
.menu {
font-size: 16px;
}:hover: The hover pseudo-class is used to define styles for an element when a user hovers over it with the mouse (e.g., a button).
button:hover {
background-color: lightblue;
}:nth-child(): The nth-child() pseudo-class allows targeting a specific child element within its parent. This is useful for styling elements based on their position.
ul li:nth-child(2) {
color: red; /* Applies style to the second item in the list */
}Attribute Selectors: Allows targeting elements based on the existence or value of an attribute.
input[type="text"] {
border: 1px solid black;
}Box Model
The box model defines how elements are displayed on the page and how they occupy space. It consists of four main areas: margin, border, padding, and content.
margin: The space around the element, outside the border. The margin separates an element from others.
div {
margin: 20px;
}border: The border that surrounds the element, positioned between the padding and the margin.
div {
border: 1px solid black;
}padding: The space between the element's content and its border. The padding creates space inside the element.
div {
padding: 10px;
}widthandheight: The width and height of the element, defining the size of its content.
div {
width: 300px;
height: 200px;
}IMPORTANT: The total size of an element includes width, height, padding, and border. Using box-sizing: border-box ensures the total width accounts for padding and border.
Typography & Colors
Google Fonts: A free service for embedding external fonts into an HTML page.
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">In CSS:
body {
font-family: 'Roboto', sans-serif;
}Units of Measurement:
px: Fixed unit (e.g., 16px).
em: Relative to the font size of the parent element (useful for flexible scaling).
rm: Relative to the root element (), ensuring uniform sizing across the document.
Exemple:
p {
font-size: 1.5em; /* 1.5 times the parent element's font size */
}Color Formats:
Hexadecimal: #ff5733
RGB: rgb(255, 87, 51)
HSL:hsl(9, 100%, 60%)
Named colors: red, blue, green
Exemple:
p {
color: red; /* font size color is red */
}Flexbox & Grid
These layout systems help manage flexible and responsive designs.
Flexbox (display: flex): Ideal for linear layouts, either in a row or a column.
.container {
display: flex;
justify-content: space-between; /* Distributes space between elements */
align-items: center; /* Aligns elements vertically */
}Grid (display: grid): A two-dimensional system for complex layouts.
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Three equal columns */
gap: 10px; /* Spacing between elements */
}CSS Variables
CSS variables enable reusable values, improving code maintainability.
Declaring a CSS variable:
:root {
--primary-color: #ff5733;
--font-size: 16px;
}Using a CSS variable:
h1 {
color: var(--primary-color);
font-size: var(--font-size);
}Animations & Transitions
@keyframes: Defines step-based animations.
@keyframes colorChange {
0% { color: red; }
100% { color: blue; }
}
p {
animation: colorChange 2s infinite;
}transition: Adds smooth transitions to property changes.
button {
background-color: red;
transition: background-color 0.3s ease;
}
button:hover {
background-color: green;
}transform: Moves, scales, or rotates elements.
div {
transform: rotate(45deg);
}Conclusion
Mastering these CSS fundamentals is essential for creating structured, responsive, and aesthetically pleasing websites. A solid grasp of CSS improves user experience, layout control, and interface design. Once comfortable with these basics, you can explore advanced topics like complex animations, media queries for responsiveness, and more.
đź’ˇ CSS Properties : complete list!
3. Responsive Design & Adaptability
Responsive Design is an approach that allows a web page to automatically adapt to different screen sizes. It ensures an optimal user experience regardless of the device used to view the site. Here are the essential elements to understand and use this approach effectively.
Media Queries
Media queries allow you to define specific CSS rules that apply only under certain conditions, such as screen size. This makes it possible to create different styles for desktops, tablets, and smartphones.
Basic example:
@media (max-width: 768px) { /* Styles applied only if the screen width is less than or equal to 768px */
body {
font-size: 14px;
}
}Explanation:
@media: The keyword used to define a rule that applies based on device characteristics (screen width, orientation, etc.).
(max-width: 768px): The conditional expression that means “if the screen width is less than or equal to 768px.” This means the rules inside this block will only apply to tablet-sized screens and smaller (like smartphones).
You can also combine multiple conditions
@media (max-width: 768px) and (orientation: portrait) {
/* Styles applied for screens less than 768px wide in portrait mode */
}Other properties used in media queries:
min-width: Applies to screens larger than a given size.
max-width: Applies to screens smaller than a given size.
orientation: Targets the screen orientation (portrait or landscape).
resolution: Used to target screen resolution, ideal for high-resolution displays (e.g., Retina screens).
Media queries are at the heart of responsive web design. They make the design fluid and adaptable depending on the device being used.
Relative Units
Relative units are used to define dimensions in a flexible and responsive way. Unlike absolute units like pixels (px), which are fixed, relative units allow the layout to adapt based on the screen size or the size of the parent element.
Here are the main relative units used for responsive design:
vw(Viewport Width): This unit is relative to the width of the viewport. 1vw equals 1% of the total viewport width.
div {
width: 50vw; /* The width will be 50% of the viewport width */
}vh(Viewport Height): This unit is relative to the height of the viewport. 1vh equals 1% of the total viewport height.
div {
height: 100vh; /* The height will be 100% of the viewport height */
}%(Percentage): Percentages are relative to the size of the parent element. For example, if you set an element's width to 50%, it will be 50% the width of its parent.
div {
width: 50%; /* The width will be 50% of the parent element’s width */
}emThis unit is relative to the font size of the parent element. For example, if the parent element’s font size is 16px, then 1em equals 16px. It’s useful for fluid text sizing.
p {
font-size: 2em; /* The font size will be twice that of the parent element */
}rem Like em, but rem is always relative to the root element’s (<html>) font size, usually defined in pixels. For example, if html { font-size: 16px; }, then 1rem = 16px.
h1 {
font-size: 2rem; /* The font size will be twice the root element’s size (16px) */
}Relative units are powerful for building flexible layouts that adapt to different screen sizes and user needs.
CSS Frameworks
CSS frameworks are libraries that contain pre-defined CSS rules, components, and tools that simplify the creation of responsive and modern layouts. Using these frameworks can save you a lot of time, as they are designed to be optimized and follow best practices.
Here are the three most popular CSS frameworks:
Bootstrap
Bootstrap is one of the most widely used CSS frameworks, created by Twitter. It offers a series of grids, pre-built components (buttons, cards, modals, etc.), and utility classes to manage responsive design and layout.
Example usage:
<div class="container">
<div class="row">
<div class="col-md-6">
<!-- Content -->
</div>
<div class="col-md-6">
<!-- Content -->
</div>
</div>
</div>
Grids: Bootstrap provides a flexible grid system with column classes that adapt to different screen sizes (e.g., col-sm-4, col-md-6, etc.).
Tailwind
Tailwind CSS is a utility-first framework, meaning you primarily use utility classes to apply styles directly in your HTML. Instead of writing separate CSS, you use classes like p-4, text-center, bg-blue-500, etc.
Example usage:
<div class="bg-blue-500 text-white p-4">
<h1 class="text-2xl">Welcome to my website</h1>
</div>Advantage: Highly flexible and customizable, you’re not limited to pre-made components like in Bootstrap. This allows you to create a fully custom design.
Foundation
Foundation is another popular CSS framework, developed by Zurb. It provides a grid system similar to Bootstrap’s, along with extra components and tools for building responsive websites.
Grids: Foundation also offers a fluid grid system with column classes similar to Bootstrap’s.
Conclusion
Responsive Design and Adaptability are key elements for building modern, high-performing websites accessible across all devices.
Media queries let you target specific screens and adjust the display based on screen size.
Using relative units helps make dimensions and layouts more flexible and suited to different environments.
CSS frameworks like Bootstrap, Tailwind CSS, and Foundation can help you speed up the development of responsive sites while following best design practices.
These tools and concepts are essential for ensuring your websites provide a consistent user experience, no matter the screen size.
4. Performance and Optimization
Optimizing performance is crucial to providing a fast and smooth user experience. This includes reducing file sizes, lazy loading resources, and efficiently managing images and styles. Here are some specific techniques to optimize your site's performance.
Lazy Loading of Resources
Lazy Loading is a technique that delays the loading of resources (images, videos, CSS or JavaScript files) until they are needed—usually when a user scrolls to a certain part of the page or interacts with a component.
Benefits:
Reduced initial load time: Non-essential resources (like images at the bottom of the page) aren’t loaded right away, speeding up page load.
Lower bandwidth usage: Users only load the content they actually see or interact with.
Lazy Loading Examples:
Images: Use the loading="lazy" attribute on <img> tags to enable lazy loading for images:
<img src="image.jpg" loading="lazy" alt="Image description">Script: Use the defer or async attributes to load JavaScript files non-blocking:
<script src="script.js" defer"></script>CSS: For non-critical styles (not needed for the initial render), you can load them lazily using JavaScript or conditionally with media queries.
Optimized SVGs
SVGs (Scalable Vector Graphics) are excellent for optimizing images—especially icons. They're vector-based, which means they can be resized without losing quality and are often much smaller than traditional image formats like PNG or JPEG.
Optimization:
Use tools like SVGO to clean and optimize SVG files by removing unnecessary metadata, whitespace, and reducing file size.
Example of optimized SVG code:
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M12 2L2 22h20L12 2z"/>
</svg>Benefits:
SVG files are lighter and more flexible than raster images.
They can be embedded directly into HTML, eliminating the need for HTTP requests.
Critical CSS
Critical CSS refers to the essential CSS needed to render the above-the-fold content (the visible part of the page on first load). The idea is to load only the necessary styles for the initial view, and load the rest asynchronously.
Benefits:
Faster initial rendering: By loading only what's needed for the initial viewport, the page appears more quickly.
Improved perceived performance: Users see and can interact with content sooner—even before all styles are fully loaded.
How it works:
During your build process, extract only the CSS needed for the first render.
Embed it directly in the <head> of your HTML.
Load the rest of the CSS later via media queries or asynchronously with JavaScript.
Tools for Critical CSS:
PurgeCSS: Can remove unused styles from your CSS.
Critical: Analyzes your HTML and CSS to extract critical styles automatically.
Example of including Critical CSS in HTML:
<style>
/* Critical CSS goes here */
</style>
<link rel="stylesheet" href="style.css">Conclusion
Optimizing your site’s performance and adaptability is essential for delivering a fast, smooth user experience. Here’s a summary of techniques you can use:
- Lazy loading to load resources only when needed, cutting down initial load time.
- Optimized SVGs to reduce HTTP requests and image sizes.
- Critical CSS to prioritize essential styles for the fastest possible first paint.
These optimizations help boost loading speed, efficiency, and user satisfaction on your website.
5. Tools and Best Practices
Typography & Colors
Google Fonts: A free service for embedding external fonts into an HTML page.
@keyframes: Defines step-based animations.