Introduction
In this beginner-friendly tutorial, we’re diving into the essential building blocks of web development: HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets). These technologies are the core of every website on the internet, and understanding them is your first step in building your own web applications.
What You’ll Learn in This Tutorial
- The basics of HTML (structure, tags, attributes).
- Styling your page with CSS (fonts, colors, layout).
- How to create responsive and aesthetically pleasing web pages.
Prerequisites
This tutorial assumes no prior knowledge of web development. A basic understanding of how to use a text editor (such as VS Code or Sublime Text) and a web browser is all you need.
Getting Started
Let’s start by creating the foundation of your website, where we’ll break down each step in a simple and clear way.
- Create a basic HTML file (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML & CSS: Web Fundamentals</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Welcome to HTML & CSS Basics</h1>
</header>
<main>
<section class="intro">
<p>This is where your journey to becoming a web developer begins!</p>
</section>
</main>
<footer>
<p>© 2025 Your Website</p>
</footer>
</body>
</html>
- Create a basic stylesheet (styles.css) to style the page
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
header {
background-color: #333;
color: white;
padding: 10px 0;
text-align: center;
}
h1 {
font-size: 2rem;
}
.main {
padding: 20px;
}
footer {
text-align: center;
background-color: #333;
color: white;
padding: 10px;
position: fixed;
width: 100%;
bottom: 0;
}Introduction to HTML: Structuring Your Content
HTML provides the structure of a web page. It uses tags to define elements like headings, paragraphs, links, images, and more.
Step 1: Understanding Basic HTML Tags
Here’s a breakdown of common HTML tags you’ll use to structure your page:
- <!DOCTYPE html>: Declares the document type, ensuring it follows HTML5 specifications.
- <html>: The root element of the web page.
- <head>: Contains metadata about the document, such as title and link to styles.
- <body>: Contains the content of the webpage.
- <header>, <footer>: Used for the page’s top and bottom sections.
- <h1>: The main heading of the page.
- <p>: A paragraph of text.
Step 2: Experimenting with More Tags
Try adding more elements to your page, such as:
- Adding images with the <img> tag.
- Creating links with the <a> tag.
- Creating lists with the <ul>, <ol>, and <li> tags.
<section class="list-section">
<h2>My Favorite Websites</h2>
<ul>
<li><a href="https://www.w3schools.com" target="_blank">W3Schools</a></li>
<li><a href="https://www.mdn.mozilla.org" target="_blank">MDN Web Docs</a></li>
</ul>
</section>Introduction to CSS: Styling Your Page
CSS controls the style of your webpage—how things look: colors, fonts, layout, and more. We will start by modifying the layout and color of the elements.
Step 1: Linking CSS to HTML
In your HTML file, the <link> tag inside the <head> section is used to link your external CSS stylesheet
<link rel="stylesheet" href="styles.css">
Step 2: Basic Styling with CSS
Let’s add some styles to the webpage. Update your styles.css with the following:
/* Apply a background color to the body */
body {
background-color: #f4f4f4;
font-family: 'Helvetica', sans-serif;
margin: 0;
padding: 0;
}
/* Style for the header */
header {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}
/* Style for links */
a {
text-decoration: none;
color: #008cba;
}
a:hover {
color: #005f6b;
}
/* Make sure paragraphs are readable */
p {
font-size: 1.1rem;
line-height: 1.5;
}
This applies:
- A light gray background to the body.
- A dark header with white text.
- Styling to make links blue, which changes on hover.
- Ensuring paragraph text is readable and well-spaced.
Layout: Using Box Model and Flexbox
One of the key principles in web design is the Box Model—understanding how content, padding, borders, and margins all relate to each other.
Step 1: Using the Box Model
The Box Model tells us that every element has four parts:
- Content: The text or image inside.
- Padding: The space between content and border.
- Border: Surrounds the padding (optional).
- Margin: The space outside the border.
section {
padding: 20px;
border: 1px solid #ccc;
margin: 20px auto;
}
Step 2: Flexbox for Layout
Flexbox is an excellent tool for building responsive layouts. Here’s an example to structure your page content into two columns:
.main-content {
display: flex;
justify-content: space-between;
}
.section {
width: 45%;
padding: 20px;
}
With the display: flex property:
- justify-content: space-between evenly spaces the items.
- The .section elements are given width and padding for layout control.
Media Queries: Making the Website Responsive
Media Queries are used to create responsive web design. They apply styles depending on the screen size of the device.
Step 1: Creating a Media Query
Here’s an example where we change the layout for smaller screens:
@media (max-width: 768px) {
.main-content {
flex-direction: column;
}
.section {
width: 100%;
}
}
This:
- Changes the layout from two columns to a single column for screens that are 768px wide or smaller.
Final Output and Testing
You’ve just learned the foundations of building websites using HTML & CSS! Try opening your HTML file in a web browser and experiment with changes to see how it affects the layout and styling. Resize the browser window to test responsiveness and see your media queries in action.
Why HTML & CSS Matter
Mastering HTML & CSS is essential because they form the foundation of every website you’ll build:
- HTML provides the basic structure.
- CSS is the paint and layout—turning structure into a user-friendly and beautiful page.
- Together, they ensure your site looks great on any device.