Here are a few project exercises to help you practice and improve your HTML skills!
They start
simple and gradually become more involved.
Project 1: Personal Profile Page
Goal: Create a simple HTML page that displays information about yourself.
Concepts to practice:
● <h1> to <h6> headings
● <p> paragraphs
● <img> for images (you can use a placeholder image if you don't have one)
● <a> links (e.g., to your social media or favorite website)
● Basic list types (<ul>, <ol>, <li>) for hobbies or skills.
Ideas for content:
● Your name and a short bio.
● A picture of yourself (or an avatar).
● Your hobbies and interests as a bulleted list.
● Your favorite quotes or fun facts as a numbered list.
● Links to your social media profiles.
Project 2: Simple Recipe Card
Goal: Design an HTML page for one of your favorite recipes.
Concepts to practice:
● All concepts from Project 1.
● <strong> or <b> for bold text.
● <em> or <i> for italic text.
● Using nested lists (e.g., a numbered list for steps, with bulleted lists for ingredients within
each step if needed).
● <div> elements for grouping related content (e.g., one div for ingredients, another for
instructions).
Ideas for content:
● Recipe title.
● Short description.
● Ingredients list (unordered list).
● Instructions (ordered list).
● An image of the dish.
Project 3: Basic Blog Post Layout
Goal: Create an HTML page that simulates a single blog post.
Concepts to practice:
● All concepts from Project 1 & 2.
● <header>, <nav>, <main>, <footer>, <article>, <aside> semantic HTML5 elements.
● Using <blockquote> for quotes.
● Adding a simple table using <table>, <thead>, <tbody>, <tr>, <th>, <td> (e.g., a table of
contents or key facts).
Ideas for content:
● A blog post title and author.
● A main article section with multiple paragraphs.
● An image related to the post.
● A "sidebar" (<aside>) with categories or recent posts (even if they are just placeholder
links).
● A footer with copyright information.
Project 4: Product Landing Page (Conceptual)
Goal: Build a basic landing page for a fictional product or service.
Concepts to practice:
● All previous concepts.
● Using more div elements for layout sections (e.g., hero section, features section,
call-to-action).
● Adding "buttons" using <a> tags styled to look like buttons.
● Considering hierarchy and flow of information.
Ideas for content:
● A catchy headline for your product.
● A compelling image or graphic.
● Short feature descriptions (can use lists or paragraphs).
● A call-to-action link (e.g., "Learn More," "Sign Up").
● A simple navigation bar at the top with dummy links.
