Header Section

Part of the Fundamentals section of Coddy's HTML journey. Lesson 53 of 60.

Challenge

Easy

As always, you can use your own creativity to fill the texts, or use the example!

Create a <div> for the header section. Inside it, add an <h1> tag with the event name, a <p> tag with a tagline, and an <img> tag for the event banner. Add to the image a width and height of your choice.

For example:

Title: Code Camp 2024
Description: Learn. Build. Innovate.
Image URL: https://img.freepik.com/free-photo/painting-mountain-lake-with-mountain-background_188544-9126.jpg

Try it yourself

<!DOCTYPE html>
<html>
    <body>
        <!-- Write code here -->
    </body>
</html>

All lessons in Fundamentals

1HTML Basics

What is HTML?Basic Structure of an HTML Tags and Elements Nesting and Closing Tags Comments in HTML

4Recipe Card

Project Overview Recipe Title and Description

Ingredients

Steps

7Personal Profile Page

Project Overview Header Section

Profile Picture

About Me Section

Social Links

10Tables

Table Basics Adding Captions Spanning Rows and Columns Recap - Tables

2Text and Formatting

Headings Paragraphs Line Breaks Bold and Italic Text Bold and Italic Again Recap - Formatting

5Adding Content

HTML Attributes Links New Page Links Images Image Attributes

8Forms and Inputs Part 1

Form Basics Text Inputs Input Attributes Password Field Labels for Inputs Recap - Basic Form

11Event Registration Page

Project OverviewHeader Section Project lesson

Event Details Section

Registration Form

Footer Section

3Working with Lists

Unordered List Ordered List Nested Lists Recap - Lists

6Page Layout

Divisions Inline Spans Semantic Tags Sections and Articles Recap - Layout

9Forms and Inputs Part 2

Radio Buttons Checkboxes Dropdowns Buttons Buttons in Forms Recap - Forms #1 Recap - Forms #2

12Final Challenges

Simple Profile Card Event Invitation Card Simple Article Page Favorite Books List

Practice on your own: Web playground