How to Build Your First Website with HTML and CSS

In today’s digital age, having a personal website is a great way to showcase your skills, ideas, or portfolio. HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets) are the building blocks of the web. HTML provides the structure of a web page, while CSS is used to style and format that structure. This blog will guide you through the process of building your first website using these two technologies.

Table of Contents

  1. Understanding the Basics
    • What is HTML?
    • What is CSS?
  2. Setting Up Your Workspace
    • Choosing a Text Editor
    • Creating a Project Directory
  3. Writing Your First HTML Page
    • HTML Document Structure
    • Adding Headings and Paragraphs
    • Inserting Images and Links
  4. Styling Your HTML with CSS
    • Internal vs. External CSS
    • Selectors and Properties
    • Applying Colors and Fonts
  5. Common Practices and Best Practices
    • Semantic HTML
    • Responsive Design
    • Code Organization
  6. Conclusion
  7. References

Understanding the Basics

What is HTML?

HTML is a markup language used to create the structure of a web page. It uses tags to define elements such as headings, paragraphs, images, and links. For example, the <h1> tag is used to define a top-level heading, and the <p> tag is used for paragraphs.

What is CSS?

CSS is a style sheet language used to control the presentation of HTML documents. It allows you to change the color, font, size, and layout of elements on a web page. For instance, you can use CSS to make all headings on your page red and 24 pixels in size.

Setting Up Your Workspace

Choosing a Text Editor

You can use any text editor to write HTML and CSS code. Popular choices include Visual Studio Code, Sublime Text, and Atom. These editors offer features like syntax highlighting, which makes it easier to read and write code.

Creating a Project Directory

Create a new folder on your computer to store all the files related to your website. Inside this folder, you can create separate files for your HTML and CSS code. For example, you can name your main HTML file index.html and your CSS file styles.css.

Writing Your First HTML Page

HTML Document Structure

Every HTML document starts with a <!DOCTYPE html> declaration, followed by an <html> tag. Inside the <html> tag, there are two main sections: the <head> and the <body>. The <head> contains metadata about the page, such as the title, while the <body> contains the visible content.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Website</title>
</head>
<body>
    <h1>Welcome to My First Website</h1>
    <p>This is a paragraph about my website.</p>
</body>
</html>

Adding Headings and Paragraphs

You can use different levels of headings in HTML, from <h1> (the most important) to <h6> (the least important). Paragraphs are defined using the <p> tag.

<h2>About Me</h2>
<p>I am a beginner in web development, and I'm excited to learn more!</p>

To insert an image, use the <img> tag. You need to provide the source (src) attribute, which specifies the location of the image file. To create a link, use the <a> tag with the href attribute, which specifies the destination URL.

<img src="my-image.jpg" alt="A description of the image">
<a href="https://www.example.com">Visit Example.com</a>

Styling Your HTML with CSS

Internal vs. External CSS

You can add CSS to your HTML page in two ways: internally or externally. Internal CSS is added within the <style> tag in the <head> section of your HTML file. External CSS is stored in a separate .css file and linked to your HTML file using the <link> tag.

Internal CSS Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Website</title>
    <style>
        h1 {
            color: blue;
        }
        p {
            font-size: 16px;
        }
    </style>
</head>
<body>
    <h1>Welcome to My First Website</h1>
    <p>This is a paragraph about my website.</p>
</body>
</html>

External CSS Example First, create a styles.css file with the following content:

h1 {
    color: blue;
}
p {
    font-size: 16px;
}

Then, link it to your HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Website</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Welcome to My First Website</h1>
    <p>This is a paragraph about my website.</p>
</body>
</html>

Selectors and Properties

CSS selectors are used to target specific HTML elements. Common selectors include element selectors (e.g., h1, p), class selectors (e.g., .my-class), and ID selectors (e.g., #my-id). Properties are used to define the style of the selected elements, such as color, font-size, and background-color.

/* Element selector */
h2 {
    color: green;
}

/* Class selector */
.my-class {
    font-weight: bold;
}

/* ID selector */
#my-id {
    background-color: yellow;
}

Applying Colors and Fonts

You can specify colors in CSS using names (e.g., red, blue), hexadecimal values (e.g., #FF0000 for red), or RGB values (e.g., rgb(255, 0, 0) for red). To change the font, use the font-family property.

body {
    color: #333333;
    font-family: Arial, sans-serif;
}

Common Practices and Best Practices

Semantic HTML

Use semantic HTML tags like <header>, <nav>, <main>, <article>, <section>, and <footer> to give meaning to your HTML structure. This makes your code more readable and accessible for search engines and screen readers.

<header>
    <h1>My Website</h1>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
        </ul>
    </nav>
</header>
<main>
    <article>
        <h2>Article Title</h2>
        <p>Article content goes here.</p>
    </article>
</main>
<footer>
    <p>&copy; 2024 My Website. All rights reserved.</p>
</footer>

Responsive Design

Make your website responsive so that it looks good on different devices and screen sizes. You can use media queries in CSS to apply different styles based on the device’s width.

@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
}

Code Organization

Keep your HTML and CSS code organized by using proper indentation and commenting. Separate different sections of your code with comments to make it easier to understand and maintain.

/* Header styles */
header {
    background-color: #f4f4f4;
    padding: 20px;
}

/* Navigation styles */
nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

Conclusion

Building your first website with HTML and CSS is an exciting journey. By understanding the basic concepts, setting up your workspace, writing HTML code, and applying CSS styles, you can create a functional and visually appealing website. Remember to follow common practices and best practices to make your code more readable, accessible, and responsive. With practice, you’ll be able to create more complex and advanced websites in the future.

References