Semantic HTML Elements

Semantic elements clearly describe their meaning to both the browser and the developer.

• Non-semantic elements: <div>, <span>
• Semantic elements: <form>, <table>, <article>

Exercise: Semantic HTML

Identify one non-semantic element in your HTML and suggest a semantic alternative.

Common Semantic Elements

• <section>
• <article>
• <header>
• <footer>
• <main>
• <nav>
• <aside>

Semantic Structure Example

<header>
    <h1>My Website</h1>
    <nav>
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
        </ul>
    </nav>
</header>
<main>
    <article>
        <h2>Article Title</h2>
        <p>Article content...</p>
    </article>
    <aside>
        <h3>Related Links</h3>
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
        </ul>
    </aside>
</main>
<footer>
    <p>© 2024 My Website</p>
</footer>
                    

Exercise: Blog Structure

List three semantic elements you would use to structure a simple blog post.

HTML Tables

Used for displaying tabular data with rows and columns.

<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1, Cell 1</td>
            <td>Row 1, Cell 2</td>
        </tr>
        <tr>
            <td>Row 2, Cell 1</td>
            <td>Row 2, Cell 2</td>
        </tr>
    </tbody>
</table>
                    

Exercise: HTML Table

Create a simple HTML table with 2 columns and 3 rows, including a header row.

HTML Forms

Used to collect user input.

<form action="/submit" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    
    <button type="submit">Submit</button>
</form>
                    

Form Input Types

<input type="text" name="username">
<input type="password" name="password">
<input type="email" name="email">
<input type="checkbox" name="subscribe">
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
<input type="submit" value="Submit">
                    

Exercise: HTML Form

Create a simple contact form with fields for name, email, and a message.

Checkboxes and Dropdown

<!-- Checkboxes -->
<input type="checkbox" id="option1" name="option1" value="1">
<label for="option1">Option 1</label>
<input type="checkbox" id="option2" name="option2" value="2">
<label for="option2">Option 2</label>

<!-- Dropdown -->
<select name="cars" id="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>
                    

Advanced CSS: Flexbox

A layout model that provides an easy and clean way to arrange items within a container.

.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.item {
    flex: 1;
}
                    

Exercise: Flexbox Layout

Use Flexbox to create a simple horizontal navigation bar with three items.

Advanced CSS: Grid

A two-dimensional layout system for the web.

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.item {
    grid-column: span 2;
}
                    

Exercise: CSS Grid

Create a simple 2x2 grid layout using CSS Grid.

CSS Transitions and Animations

Transitions

.button {
    transition: background-color 0.3s ease;
}
.button:hover {
    background-color: #ff0000;
}
                    

Exercise: CSS Transition

Add a simple color transition to a button on hover.

CSS Transitions and Animations

Animations

@keyframes slide-in {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}
.animated-element {
    animation: slide-in 0.5s forwards;
}
                    

Exercise: CSS Animation

Create a simple fade-in animation for a heading element.

CSS Preprocessors: Sass

Extends CSS with features like variables, nesting, and mixins.

$primary-color: #3498db;

.button {
    background-color: $primary-color;
    &:hover {
        background-color: darken($primary-color, 10%);
    }
}
                    

Exercise: Sass Variables

Define a Sass variable for a primary color and use it in a button style.