Mini Project – Blog Layout

Build a complete blog page for Alex's portfolio using semantic HTML, combining article structure, navigation, and sidebar elements.

Time to put everything together! Alex's portfolio needs a blog section where they can share their development journey and project insights. This means creating a proper blog layout with multiple articles, navigation, and a sidebar. A blog layout is like organizing a newspaper — you need a main content area for articles, a sidebar for extra information, and clear navigation. Each blog post becomes its own article element with its own heading, content, and metadata.

Understanding Blog Structure

Every blog needs the same basic parts. Think of it like a magazine layout — you have the main content, some navigation, and additional information on the side.

<header> - Site navigation and title

<main> - Blog articles and content

<article> - Individual blog post

<article> - Another blog post

<aside> - Sidebar content

<footer> - Site footer information

Each article element contains one blog post. Inside each article, you use headings, paragraphs, and other content just like any webpage. The aside element holds sidebar content like recent posts, categories, or author information.

Creating the Blog Header

Alex's blog needs a header with navigation links. This sits at the top and helps visitors move around the portfolio.

<!-- Blog header with navigation for Alex's portfolio -->
<header>
  <h1>Alex's Developer Blog</h1>
  <nav>
    <a href="index.html">Home</a>
    <a href="projects.html">Projects</a>
    <a href="blog.html">Blog</a>
    <a href="contact.html">Contact</a>
  </nav>
</header>

What just happened?

The header contains the blog title and navigation menu. Each link points to different pages in Alex's portfolio. The nav element groups all navigation links together for screen readers.

Building Blog Articles

Now for the main content — the actual blog posts. Each post goes inside its own article tag with a heading, publication date, and content.

<!-- Individual blog post with metadata -->
<article>
  <header>
    <h2>Learning React Hooks</h2>
    <time datetime="2024-01-15">January 15, 2024</time>
  </header>
  
  <p>After weeks of working with class components, I finally dove into React hooks. The useState hook changed everything about how I manage component state.</p>
  
  <p>Here's what I learned about the useEffect hook and why it replaced componentDidMount in my workflow.</p>
  
  <footer>
    <p>Tags: React, JavaScript, Frontend</p>
  </footer>
</article>

What just happened?

Each article has its own header with the post title and date. The time element includes a machine-readable datetime attribute. The article footer contains metadata like tags. Try this: Add multiple articles for different blog posts.

The time element is special — it tells browsers and search engines when the post was published. The datetime attribute uses the standard date format that computers understand.

Adding a Sidebar

The sidebar shows additional information like recent posts, categories, or an author bio. This goes in an aside element next to the main content.

<!-- Blog sidebar with recent posts and author info -->
<aside>
  <section>
    <h3>About Alex</h3>
    <p>Frontend developer passionate about React, accessibility, and clean code. Currently learning TypeScript and exploring web performance optimization.</p>
  </section>
  
  <section>
    <h3>Recent Posts</h3>
    <ul>
      <li><a href="#">CSS Grid vs Flexbox</a></li>
      <li><a href="#">JavaScript Array Methods</a></li>
      <li><a href="#">Building Accessible Forms</a></li>
    </ul>
  </section>
</aside>

What just happened?

The aside contains two sections — author information and recent posts list. Each section has its own heading and content. The aside element tells screen readers this content is related but separate from the main articles.

Complete Blog Layout

Now let's combine everything into Alex's complete blog page. This shows how all the semantic elements work together in a real blog layout.

<!-- Complete blog layout for Alex's portfolio -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Blog - Alex's Portfolio</title>
</head>
<body>
  <header>
    <h1>Alex's Developer Blog</h1>
    <nav>
      <a href="index.html">Home</a>
      <a href="projects.html">Projects</a>
      <a href="blog.html">Blog</a>
      <a href="contact.html">Contact</a>
    </nav>
  </header>

  <main>
    <article>
      <header>
        <h2>Learning React Hooks</h2>
        <time datetime="2024-01-15">January 15, 2024</time>
      </header>
      <p>After weeks of working with class components, I finally dove into React hooks. The useState hook changed everything.</p>
    </article>

    <article>
      <header>
        <h2>CSS Grid Adventures</h2>
        <time datetime="2024-01-10">January 10, 2024</time>
      </header>
      <p>Building responsive layouts with CSS Grid has been a game-changer for my portfolio projects.</p>
    </article>
  </main>

  <aside>
    <section>
      <h3>About Alex</h3>
      <p>Frontend developer passionate about React and clean code.</p>
    </section>
  </aside>

  <footer>
    <p>© 2024 Alex's Portfolio</p>
  </footer>
</body>
</html>

What just happened?

The complete blog combines header navigation, main content with multiple articles, sidebar information, and footer. Each semantic element has a clear purpose — screen readers can navigate between articles, skip to the sidebar, or jump straight to navigation. This structure makes the blog accessible and SEO-friendly.

Blog Layout Best Practices

Different blog layouts work better for different purposes. Here's what works well for developer portfolios like Alex's:

Keep it Simple

Focus on readability. Long paragraphs hurt readability on screens. Break content into digestible chunks with clear headings.

Date Everything

Always include publication dates using the time element. Visitors want to know if content is current, especially for technical tutorials.

Semantic Structure

Use article for each post, section for sidebar content, and time for dates. This helps search engines understand your content structure.

Navigation Matters

Include clear navigation back to your main portfolio. Visitors should easily find your projects and contact information from any blog post.

Common mistake:

Putting the entire blog in one giant article element. Each blog post needs its own article tag. The main element contains all the articles, but each post is a separate article inside main.

Your blog layout should guide readers naturally from post to post while keeping the focus on your main content. The sidebar provides useful information without overwhelming the main articles.

Quiz

HTML Interview Questions

Master the most common HTML interview questions that hiring managers ask, from semantic elements to accessibility and performance optimization.

← Previous Course Index Next →