Codexpal - Learn Programming Interactively

Lesson Content

Build a Blog Template 📝

Create a blog template structure that you can use for your own blog or content site.

Blog Structure

Header with logo and navigation
Main content area with articles
Sidebar with categories and recent posts
Footer with links

Article Structure

<article>
  <header>
    <h2>Article Title</h2>
    <time datetime="2024-01-01">January 1, 2024</time>
  </header>
  <div class="content">
    <p>Article content...</p>
  </div>
  <footer>
    <span>By Author Name</span>
    <span>5 min read</span>
  </footer>
</article>

Example Code

Create a blog article structure

<article>
  <header>
    <h2>My First Blog Post</h2>
    <time datetime="2024-12-31">December 31, 2024</time>
  </header>
  <p>This is my first blog post content...</p>
  <footer>
    <span>By John Doe</span>
  </footer>
</article>

Expected Output:

Blog article with header, content, and footer

Study Tips

•Read the theory content thoroughly before practicing
•Review the example code to understand key concepts
•Proceed to the Practice tab when you're ready to code