Cozy coding setup for a beginner HTML/CSS course, featuring a computer screen displaying simple HTML and CSS code, a coffee mug, notebook, and plant.

Introduction for Beginners

Welcome to this HTML/CSS crash course! If you’re completely new to HTML, don’t worry — getting started is simpler than you might think. You don’t need any special software to begin; any text editor will work, though some editors are more beginner-friendly and offer helpful features for coding.

Setting Up Your Environment

To follow along with this course, you’ll need to create an HTML file. Here’s how:

  1. Choose a Text Editor: You can use any text editor to write HTML. Basic editors like Notepad (on Windows) or TextEdit (on Mac) will work fine, but using a more advanced editor like Notepad++ (free for Windows) or Visual Studio Code (free and available for all major platforms) is recommended. These editors add color-coding, formatting, and other features that make coding easier to read and write.
  2. Create Your HTML File:
  • Open your text editor and start a new file.
  • Save the file with a .html extension, such as my_webpage.html. This tells your computer to treat the file as a webpage.
  1. Launch Your Webpage:
  • Once you save your HTML file, open it in any web browser (like Chrome, Firefox, or Edge) by double-clicking the file or dragging it into an open browser window. Your browser will display the content as a webpage.
  • As you make changes to your HTML file, simply save the file and refresh the browser to see your updates instantly.

Using This Course

This course is designed to be completed in about 1 hour, giving you a quick yet solid introduction to HTML and CSS basics. However, if you’re unable to complete it in one sitting, don’t worry — you can save your progress as you go.

Each chapter includes a checkbox labeled “Complete this chapter.” Marking a chapter as complete will save your progress, allowing you to pick up right where you left off, even if you close the page or return later.

At the end, there will be a chance to test your knowledge by reviewing each chapter’s key points, giving you a solid foundation and practical experience with HTML and CSS. This approach will help ensure you’re comfortable and confident with everything covered.

Table of Contents

  1. Chapter 1: Course Introduction & Goals
  2. Chapter 2: Introduction to IDs & Classes
  3. Chapter 3: Introduction to CSS Basics
  4. Chapter 4: Building the Webpage Layout
  5. Chapter 5: Final Touches and Troubleshooting
  6. Chapter 6: Conclusion and Recap
  7. Quiz

Chapter 1: Course Introduction & Goals

Step 1: Introduction to HTML and Web Structure

HTML (HyperText Markup Language) is the skeleton of any web page. It tells the browser what each piece of content is — whether it’s text, images, links, or other elements.

In this course, we’ll build a simple webpage with a basic structure. By the end of Chapter 1, you’ll have the foundational code set up that will evolve into a simple webpage layout with space for a future app.

Step 2: Setting Up Your HTML Document

An HTML document has a specific structure, which starts with a document declaration and main elements like <html>, <head>, and <body>. Here’s a breakdown:

  • <!DOCTYPE html>: Tells the browser to expect HTML5.
  • <html>: The root element, containing everything on the page.
  • <head>: Contains metadata about the page (like the title and CSS links).
  • <body>: Contains the content of the page (text, images, etc.).

Let’s set up this structure.

Code Snippet 1: Basic HTML Document Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Simple Webpage</title>
</head>
<body>
    <!-- Content will go here -->
</body>
</html>
  • Explanation:
    • <meta charset="UTF-8"> sets the character encoding to support all text symbols.
    • <meta name="viewport" content="width=device-width, initial-scale=1.0"> makes the page responsive on mobile devices.
    • <title> sets the page’s title, which shows up on the browser tab.

Step 3: Adding Main Sections with <div> Containers

A common HTML structure includes a header, main content area, and footer. We’ll use <div> tags to section these areas off.

Add the following code inside the <body> tag:

Code Snippet 2: Adding Div Containers

<body>
    <div id="header">
        <h1>Welcome to My Webpage</h1>
    </div>

    <div id="main-content">
        <p>This is the main content area. Here you can add text, images, or anything else you’d like.</p>
    </div>

    <div id="footer">
        <p>Footer section where you can add links, contact info, or other details.</p>
    </div>
</body>
  • Explanation:
    • <div id="header">: A container for the header section with a heading.
    • <div id="main-content">: A container for the main content.
    • <div id="footer">: A container for the footer area.

Step 4: Final Structure for Chapter 1

This is how the HTML code should look by the end of Chapter 1:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Simple Webpage</title>
</head>
<body>
    <div id="header">
        <h1>Welcome to My Webpage</h1>
    </div>

    <div id="main-content">
        <p>This is the main content area. Here you can add text, images, or anything else you’d like.</p>
    </div>

    <div id="footer">
        <p>Footer section where you can add links, contact info, or other details.</p>
    </div>
</body>
</html>

Summary of Chapter 1

In this chapter, you’ve:

  • Learned about the core HTML structure.
  • Set up the document structure with the <html>, <head>, and <body> tags.
  • Created three main sections (header, main-content, footer) using <div> tags.

Chapter 2: Introduction to IDs & Classes

Step 1: What are IDs and Classes?

IDs and classes are attributes in HTML that help us identify and style specific elements on a webpage.

  • ID: An ID is unique; it identifies one specific element. Think of it like a personal ID — no two people share the same one.
  • Class: A class is a group identifier, allowing you to apply styles to multiple elements at once.

You’ll use IDs for unique elements (like header, main-content, footer) and classes when you want to group multiple elements under a common style (like buttons or images that have similar styling).

Step 2: Adding IDs to HTML Elements

Let’s add an id attribute to our main sections: header, main content, and footer. IDs make it easy to select these elements for styling or to link to them in the future.

Code Snippet 1: Adding IDs

Update your existing code to add id attributes to each <div>.

<body>
    <div id="header">
        <h1>Welcome to My Webpage</h1>
    </div>

    <div id="main-content">
        <p>This is the main content area. Here you can add text, images, or anything else you’d like.</p>
    </div>

    <div id="footer">
        <p>Footer section where you can add links, contact info, or other details.</p>
    </div>
</body>
  • Explanation:
    • id="header": Unique identifier for the header section.
    • id="main-content": Unique identifier for the main content area.
    • id="footer": Unique identifier for the footer.

Step 3: Adding Classes for Reusable Styles

Now, let’s add a class to some text elements to group them. For example, if we want certain paragraphs to have the same style, we can assign them a class.

Let’s create a class for any text we want to highlight on the page.

Code Snippet 2: Adding a Class

<div id="main-content">
    <p>This is the main content area. Here you can add text, images, or anything else you’d like.</p>
    <p class="highlight">This paragraph will be styled differently because it has the 'highlight' class.</p>
</div>
  • Explanation:
    • class="highlight": Groups this paragraph with other elements that may need the same style (e.g., a specific font or color).

Step 4: IDs vs. Classes — Key Points

  • IDs are unique and used only once per page, while classes can be used on multiple elements.
  • Best Practice: Use IDs for unique sections or elements and classes for styles you’ll apply to multiple elements.

Step 5: Final Code for Chapter 2

This is what your code should look like by the end of Chapter 2:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Simple Webpage</title>
</head>
<body>
    <div id="header">
        <h1>Welcome to My Webpage</h1>
    </div>

    <div id="main-content">
        <p>This is the main content area. Here you can add text, images, or anything else you’d like.</p>
        <p class="highlight">This paragraph will be styled differently because it has the 'highlight' class.</p>
    </div>

    <div id="footer">
        <p>Footer section where you can add links, contact info, or other details.</p>
    </div>
</body>
</html>

Summary of Chapter 2

In this chapter, you’ve:

  • Learned about the purpose of IDs and classes in HTML.
  • Added IDs to the main sections (header, main content, footer).
  • Created a class to apply to multiple elements (e.g., highlighted text).

Chapter 3: Introduction to CSS Basics

Step 1: Understanding CSS and Where to Place It

CSS (Cascading Style Sheets) is used to style HTML elements. It controls how elements look on the page, including color, layout, font, and more.

Where to Add CSS:

  • Internal CSS: Adds styles directly in the HTML document within the <style> tag in the <head> section. This is what we’ll use for simplicity.
  • External CSS: Links to a separate .css file, ideal for larger projects.

In this chapter, we’ll add CSS directly into our HTML file.

Step 2: Adding a <style> Section in the Head

Place your CSS code inside a <style> tag within the <head> section. This allows you to control the look of your webpage directly within the HTML file.

Code Snippet 1: Setting Up the CSS Section

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Simple Webpage</title>
    <style>
        /* CSS code will go here */
    </style>
</head>

Step 3: Styling Elements Using IDs

We’ll start by applying CSS styles to the header, main-content, and footer sections using their ID selectors.

To target an ID in CSS, use the # symbol followed by the ID name. For example, #header targets the <div id="header"> section.

Code Snippet 2: Styling the Header, Main Content, and Footer

Add this CSS inside the <style> tag:

#header {
    background-color: #4CAF50;
    color: white;
    padding: 20px;
    text-align: center;
}

#main-content {
    padding: 20px;
    background-color: #f4f4f4;
}

#footer {
    background-color: #333;
    color: white;
    padding: 10px;
    text-align: center;
}
  • Explanation:
    • #header: Sets a green background color and white text color for the header, with centered text.
    • #main-content: Adds padding and a light gray background color.
    • #footer: Sets a dark background with white text for the footer and centers the text.

Step 4: Styling Elements Using Classes

Now, let’s style the .highlight class we added to a paragraph in Chapter 2.

To target a class in CSS, use the . symbol followed by the class name. For example, .highlight targets any element with the highlight class.

Code Snippet 3: Styling the Highlighted Text

Add this CSS inside the <style> tag:

.highlight {
    color: #d9534f;
    font-weight: bold;
    background-color: #ffe6e6;
    padding: 5px;
}
  • Explanation:
    • color: #d9534f;: Sets the text color to a red shade.
    • font-weight: bold;: Makes the text bold.
    • background-color: #ffe6e6;: Adds a light pink background to the text.
    • padding: 5px;: Adds padding around the text to make it stand out.

Step 5: Final Code for Chapter 3

This is what your code should look like by the end of Chapter 3:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Simple Webpage</title>
    <style>
        #header {
            background-color: #4CAF50;
            color: white;
            padding: 20px;
            text-align: center;
        }

        #main-content {
            padding: 20px;
            background-color: #f4f4f4;
        }

        #footer {
            background-color: #333;
            color: white;
            padding: 10px;
            text-align: center;
        }

        .highlight {
            color: #d9534f;
            font-weight: bold;
            background-color: #ffe6e6;
            padding: 5px;
        }
    </style>
</head>
<body>
    <div id="header">
        <h1>Welcome to My Webpage</h1>
    </div>

    <div id="main-content">
        <p>This is the main content area. Here you can add text, images, or anything else you’d like.</p>
        <p class="highlight">This paragraph will be styled differently because it has the 'highlight' class.</p>
    </div>

    <div id="footer">
        <p>Footer section where you can add links, contact info, or other details.</p>
    </div>
</body>
</html>

Summary of Chapter 3

In this chapter, you’ve:

  • Added CSS styling to your HTML file using a <style> tag.
  • Styled elements using ID selectors and class selectors.
  • Learned how IDs and classes work with CSS to create customized looks for each section.

Chapter 4: Building the Webpage Layout

Step 1: Understanding the Layout Structure

In this chapter, we’ll refine our webpage layout by organizing sections and adding visual styles to create a clean and readable design. We’ll also include a sidebar within the main content, setting up an area that could later house widgets, additional links, or app elements.

Goal: By the end of this chapter, you’ll have a header, main content area, sidebar, and footer laid out with styling that organizes the page.

Step 2: Adding the Sidebar Structure

We’ll add a sidebar section inside the main content area using another <div> element. This structure will provide a space for extra content and eventually for our future JavaScript app.

Code Snippet 1: Adding the Sidebar HTML

Add this code inside the <div id="main-content"> section:

<div id="main-content">
    <p>This is the main content area. Here you can add text, images, or anything else you’d like.</p>
    <div id="sidebar">
        <h2>Sidebar</h2>
        <p>This is the sidebar section for additional information or widgets.</p>
    </div>
    <p class="highlight">This paragraph will be styled differently because it has the 'highlight' class.</p>
</div>
  • Explanation:
    • <div id="sidebar">: Creates a section for the sidebar within the main content area.

Step 3: Applying CSS for Layout and Positioning

To create a distinct look, let’s apply CSS styling to position the sidebar alongside the main content and give each section more structure.

Code Snippet 2: CSS for Layout

Add this CSS inside the <style> tag in the <head> section:

#main-content {
    padding: 20px;
    background-color: #f4f4f4;
    display: flex;
    gap: 20px;
}

#sidebar {
    background-color: #e8e8e8;
    padding: 15px;
    width: 30%;
}

#main-content p {
    width: 70%;
}
  • Explanation:
    • display: flex; on #main-content allows items within it (the main content and sidebar) to sit side-by-side.
    • gap: 20px; creates space between the main content and sidebar.
    • width settings for #sidebar and #main-content p control the relative size of each area.

Step 4: Styling the Header, Footer, and Sidebar

Let’s add some additional visual styles to the header, footer, and sidebar for a more polished look.

Code Snippet 3: Additional Styling

Add these styles to your existing CSS:

#header h1 {
    font-size: 2em;
    margin: 0;
}

#footer p {
    font-size: 0.9em;
    margin: 0;
}

#sidebar h2 {
    font-size: 1.2em;
    margin-bottom: 10px;
}
  • Explanation:
    • #header h1: Increases the header font size for a stronger visual.
    • #footer p: Reduces font size in the footer for a subtler appearance.
    • #sidebar h2: Adjusts the sidebar title’s font size for a balanced look.

Step 5: Final Code for Chapter 4

Here’s how the full code should look by the end of Chapter 4:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Simple Webpage</title>
    <style>
        #header {
            background-color: #4CAF50;
            color: white;
            padding: 20px;
            text-align: center;
        }

        #header h1 {
            font-size: 2em;
            margin: 0;
        }

        #main-content {
            padding: 20px;
            background-color: #f4f4f4;
            display: flex;
            gap: 20px;
        }

        #main-content p {
            width: 70%;
        }

        #sidebar {
            background-color: #e8e8e8;
            padding: 15px;
            width: 30%;
        }

        #sidebar h2 {
            font-size: 1.2em;
            margin-bottom: 10px;
        }

        #footer {
            background-color: #333;
            color: white;
            padding: 10px;
            text-align: center;
        }

        #footer p {
            font-size: 0.9em;
            margin: 0;
        }

        .highlight {
            color: #d9534f;
            font-weight: bold;
            background-color: #ffe6e6;
            padding: 5px;
        }
    </style>
</head>
<body>
    <div id="header">
        <h1>Welcome to My Webpage</h1>
    </div>

    <div id="main-content">
        <p>This is the main content area. Here you can add text, images, or anything else you’d like.</p>
        <div id="sidebar">
            <h2>Sidebar</h2>
            <p>This is the sidebar section for additional information or widgets.</p>
        </div>
        <p class="highlight">This paragraph will be styled differently because it has the 'highlight' class.</p>
    </div>

    <div id="footer">
        <p>Footer section where you can add links, contact info, or other details.</p>
    </div>
</body>
</html>

Summary of Chapter 4

In this chapter, you’ve:

  • Added a sidebar within the main content area for extra content or widgets.
  • Styled the layout with flexbox for positioning and alignment.
  • Enhanced the appearance of the header, footer, and sidebar.

Chapter 5: Final Touches and Troubleshooting

Step 1: Adding Some Final Touches

Now that our basic layout is complete, let’s enhance the visual design slightly by adding margins, a font choice, and some subtle colors. These final touches will improve readability and give a finished look to our page.

Code Snippet 1: Adding a Global Font and Spacing

Add this CSS inside your <style> tag at the top:

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

p {
    margin-bottom: 15px;
}
  • Explanation:
    • font-family: Arial, sans-serif; applies a global font for a cleaner look.
    • line-height: 1.6; increases the line spacing for readability.
    • margin-bottom: 15px; on <p> tags adds some space after each paragraph.

Step 2: Reviewing and Testing Your Layout

By now, your webpage should look cohesive and organized. Take a moment to review the layout in your browser:

  • Check that each section (header, main content, sidebar, and footer) is visually distinct.
  • Ensure that text in each area is readable and aligns well.
  • Verify that your highlight class styling is applied to the designated paragraph.

Step 3: Basic Troubleshooting Tips

When working with HTML and CSS, it’s common to encounter issues where things don’t display as expected. Here are some tips for fixing common issues:

  1. Check for Typos: HTML and CSS are case-sensitive, so ensure that tags and CSS properties are spelled correctly (e.g., background-color, not backgroundColor).
  2. Verify Tag Pairing: Make sure every opening tag (e.g., <div>) has a corresponding closing tag (e.g., </div>).
  3. Use Browser Developer Tools:
    • Right-click on the webpage and select Inspect to open Developer Tools.
    • Check the Console tab for errors.
    • Use the Elements tab to see your HTML structure and check if your IDs and classes are correctly applied.

Step 4: How to Copy and Paste Code Snippets

Copying and pasting code from resources is common in web development, but understanding where to place the code is essential. Here’s a quick guide:

  1. HTML Snippets:
    • If you’re copying HTML code, paste it within the <body> section of your page.
    • Make sure to avoid duplicating IDs (IDs should be unique on each page).
    • For similar sections, you may want to add a different ID or use a class if the style should be shared across multiple elements.
  2. CSS Snippets:
    • Place CSS code within the <style> section in the <head> or in an external CSS file.
    • Be cautious with selectors (#idName for IDs, .className for classes) to ensure they target the right elements.
  3. JavaScript Snippets:
    • JavaScript typically goes before the closing </body> tag or in a separate JavaScript file.
    • If you’re copying JavaScript snippets, wait until Part 2 of this course, where we’ll cover how to add JavaScript to this page.

Example: If you want to add another section of highlighted text, you can copy and paste the following HTML into the <div id="main-content"> area:

<p class="highlight">Here’s another highlighted text paragraph with the same style.</p>

This will apply the .highlight class styling to the new paragraph without needing to add new CSS.

Step 5: Final Code for the Webpage

Here’s the complete code for your webpage, incorporating all the styles and layout features covered in Chapters 1-5:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Simple Webpage</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            line-height: 1.6;
        }

        #header {
            background-color: #4CAF50;
            color: white;
            padding: 20px;
            text-align: center;
        }

        #header h1 {
            font-size: 2em;
            margin: 0;
        }

        #main-content {
            padding: 20px;
            background-color: #f4f4f4;
            display: flex;
            gap: 20px;
        }

        #main-content p {
            width: 70%;
        }

        #sidebar {
            background-color: #e8e8e8;
            padding: 15px;
            width: 30%;
        }

        #sidebar h2 {
            font-size: 1.2em;
            margin-bottom: 10px;
        }

        #footer {
            background-color: #333;
            color: white;
            padding: 10px;
            text-align: center;
        }

        #footer p {
            font-size: 0.9em;
            margin: 0;
        }

        .highlight {
            color: #d9534f;
            font-weight: bold;
            background-color: #ffe6e6;
            padding: 5px;
        }

        p {
            margin-bottom: 15px;
        }
    </style>
</head>
<body>
    <div id="header">
        <h1>Welcome to My Webpage</h1>
    </div>

    <div id="main-content">
        <p>This is the main content area. Here you can add text, images, or anything else you’d like.</p>
        <div id="sidebar">
            <h2>Sidebar</h2>
            <p>This is the sidebar section for additional information or widgets.</p>
        </div>
        <p class="highlight">This paragraph will be styled differently because it has the 'highlight' class.</p>
    </div>

    <div id="footer">
        <p>Footer section where you can add links, contact info, or other details.</p>
    </div>
</body>
</html>

Summary of Chapter 5

In this chapter, you’ve:

  • Added finishing touches to the page’s style, improving readability and spacing.
  • Learned some troubleshooting tips to debug HTML and CSS issues.
  • Practiced where and how to copy and paste code snippets effectively into HTML and CSS.

Chapter 6: Conclusion and Recap

Step 1: Quick Recap of What We’ve Covered

Congratulations on completing this HTML/CSS crash course! You’ve built a structured, styled webpage with distinct sections and a layout ready for future enhancements. Here’s a quick summary of each chapter:

  • Chapter 1: Established the foundational HTML structure with main tags — <html>, <head>, and <body> — and set up three essential sections: header, main content, and footer.
  • Chapter 2: Learned about IDs and classes to identify and style elements effectively.
  • Chapter 3: Added CSS styling to individual elements using IDs and classes, bringing visual organization to the page.
  • Chapter 4: Organized the layout further by introducing a sidebar with flexbox, creating a polished, multi-section structure.
  • Chapter 5: Added final styling touches, practiced basic troubleshooting, and learned tips on effectively copying and pasting code snippets.

Step 2: Preview of JavaScript Integration

In the next part of this series, we’ll introduce JavaScript to add interactivity to our webpage. JavaScript will allow us to make the webpage dynamic and responsive to user actions. Here’s a look at what we’ll explore in Part 2:

  • Dynamic Content Update: We’ll use JavaScript to modify content and add new elements directly in the browser.
  • Event Handling: Learn to trigger actions based on user interactions, such as button clicks or hover effects.
  • Basic App Integration: Our sidebar section is ready to house JavaScript-based widgets or mini-apps, like a calculator or a simple interactive form.

You’re now well-equipped to enhance this webpage and bring it to life with interactive elements in the next phase of development!

Test your HTML Knowledge: