Mini Course

Learn HTML and CSS: Build Your First Website

2 hour course • Updated: January 2024

Want to build a website? HTML and CSS are where you start. HTML is the structure, CSS is the styling. Together, they let you create websites from scratch.

I'll teach you the basics so you can build your first website. No prior experience needed. We'll start simple and build up to something you can actually use.

What Are HTML and CSS?

HTML (HyperText Markup Language): The structure of your webpage. It defines headings, paragraphs, images, links, buttons - all the content.

CSS (Cascading Style Sheets): The styling. It controls colors, fonts, spacing, layout - how everything looks.

Think of HTML as the skeleton and CSS as the skin. You need both to make a complete website.

Setting Up

You don't need fancy software. A text editor is enough:

Windows: Notepad (or Notepad++)
Mac: TextEdit
Better option: Visual Studio Code (free, works on all platforms)

You'll also need a web browser (Chrome, Firefox, Edge, Safari - any works).

Your First HTML Page

Create a new file called index.html. Type this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My First Website</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is my first webpage.</p>
</body>
</html>

Save it, then double-click to open in your browser. You should see "Hello, World!" and a paragraph.

What each part does:

<!DOCTYPE html> - Tells the browser this is HTML5
<html> - The root element
<head> - Metadata (title, links to CSS, etc.)
<title> - What appears in the browser tab
<body> - The visible content
<h1> - Main heading
<p> - Paragraph

Common HTML Elements

Headings:

<h1>Biggest Heading</h1>
<h2>Second Biggest</h2>
<h3>Third Biggest</h3>
<h4>Fourth Biggest</h4>
<h5>Fifth Biggest</h5>
<h6>Smallest Heading</h6>

Text:

<p>This is a paragraph.</p>
<strong>This is bold text.</strong>
<em>This is italic text.</em>
<br> (line break)

Links:

<a href="https://example.com">Click here</a>

Images:

<img src="image.jpg" alt="Description">

Lists:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

<ol>
    <li>First item</li>
    <li>Second item</li>
</ol>

Buttons:

<button>Click Me</button>

Adding CSS

Create a file called style.css. Add this:

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    color: #333;
}

h1 {
    color: blue;
    text-align: center;
}

p {
    font-size: 18px;
    line-height: 1.6;
}

Now link it in your HTML. Add this inside the <head>:

<link rel="stylesheet" href="style.css">

Refresh your browser. The page should look different now.

CSS Basics

CSS uses selectors to target elements:

/* Target all paragraphs */
p {
    color: red;
}

/* Target elements with a class */
.my-class {
    font-size: 20px;
}

/* Target element with an ID */
#my-id {
    background-color: yellow;
}

Common properties:

color: Text color
background-color: Background color
font-size: Text size
font-family: Font type
margin: Space outside element
padding: Space inside element
width: Element width
height: Element height
text-align: Text alignment (left, center, right)

Classes and IDs

Classes: Use for styling multiple elements. Add class="my-class" to HTML elements.

<p class="highlight">This is highlighted</p>

.highlight {
    background-color: yellow;
}

IDs: Use for unique elements. Add id="my-id" to HTML elements.

<div id="header">Header content</div>

#header {
    background-color: blue;
}

Use classes for things that appear multiple times. Use IDs for unique elements.

Layout Basics

Block vs Inline:

Block elements: Take full width, stack vertically (div, p, h1-h6)
Inline elements: Only take needed width, sit next to each other (span, a, strong)

Flexbox (simple layouts):

.container {
    display: flex;
    justify-content: center; /* horizontal alignment */
    align-items: center; /* vertical alignment */
}

Flexbox makes it easy to center things and create simple layouts.

Building a Simple Page

Let's build a basic page together:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Website</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Welcome to My Site</h1>
        <nav>
            <a href="#">Home</a>
            <a href="#">About</a>
            <a href="#">Contact</a>
        </nav>
    </header>
    
    <main>
        <section>
            <h2>About Me</h2>
            <p>This is a paragraph about me.</p>
        </section>
        
        <section>
            <h2>My Projects</h2>
            <ul>
                <li>Project 1</li>
                <li>Project 2</li>
            </ul>
        </section>
    </main>
    
    <footer>
        <p>© 2024 My Website</p>
    </footer>
</body>
</html>

Add some CSS:

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

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

nav a {
    color: white;
    margin: 0 10px;
    text-decoration: none;
}

main {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

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

You now have a basic website structure.

Responsive Design

Make your site work on mobile. Add this to your CSS:

/* Mobile first */
.container {
    width: 100%;
    padding: 10px;
}

/* Tablet and up */
@media (min-width: 768px) {
    .container {
        max-width: 750px;
        margin: 0 auto;
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .container {
        max-width: 1200px;
    }
}

Also add this to your HTML <head>:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This makes your site responsive - it adapts to different screen sizes.

Common Mistakes

Forgetting closing tags: Every opening tag needs a closing tag (except self-closing like <img>)
Wrong file paths: Make sure CSS file path is correct in the link tag
Not saving files: Save before refreshing browser
Hard refresh: Press Ctrl+F5 (Windows) or Cmd+Shift+R (Mac) to clear cache
Inline styles: Avoid style="..." in HTML - use CSS file instead

Pro Tip: Use browser developer tools (F12) to inspect elements and see what CSS is applied. This is how you learn and debug. Right-click any element, select "Inspect", and you'll see the HTML and CSS. Experiment with changing values to see what happens.

Next Steps

Once you're comfortable with HTML and CSS:

Learn JavaScript to add interactivity
Learn CSS frameworks like Bootstrap for faster styling
Practice by building more pages
Learn about semantic HTML (using the right tags for the right purpose)
Study other websites (view source code to see how they're built)

Common Questions

Do I need to learn HTML before CSS?

Yes, learn HTML first. You need content before you can style it. Get comfortable with HTML basics, then add CSS.

How long does it take to learn HTML and CSS?

Basics take a few days. Getting comfortable takes a few weeks. Mastery takes months of practice. Start building projects as soon as you can - that's how you really learn.

Do I need to memorize everything?

No. Learn the basics, then use references. I still look things up. The important part is understanding how HTML and CSS work together, not memorizing every property.

Start Building

Create your first HTML file right now. Start simple, then add more elements. Add CSS to make it look good. Build a few pages, experiment, break things, fix them. That's how you learn. HTML and CSS are the foundation of web development - master these and you can build anything.