Blog sample with CSS

Basic Blog Post Layout (<article>, <header>, <section>, <footer>)

Getting Started with Web Development

— by Liejan Lawrsel M. Luengo

Web development is where you combine creativity with technical skills. Whether you are building a personal portfolio or an application, understanding the fundamentals of HTML is the first step!

In this post, we will explore the basic building blocks of the web and how you can start your journey as a developer.

Why Learn HTML?

HyperText Markup Language is the standard language for creating web pages. It structures the content on the web and works alongside CSS and JavaScript. Basically, HTML is the skeleton.

"This is a quote but I got to gatekeep it" — Me

Once you master HTML, you can move on to CSS for styling and JavaScript for functionality. The possibilities are endless!

Code (ready to copy-paste):

<article>
  <header>
    <h2>My blog title</h2>
    <p><time datetime="2010-09-18">September 18, 2010</time> — by <strong>your name</strong></p>
  </header>

  <section>
    <p>Your paragraph content goes here</p>

    <h4>A random question</h4>
    <p>More paragraph content</p>

    <blockquote>
      "Your quote here" — You, probably.
    </blockquote>
  </section>

  <footer>
    <p>Categories: <a href="#">Link</a> </p>
  </footer>
</article>

Image with Caption (<figure> & <figcaption>)

placeholder
Figure 1: A placeholder image

Code (ready to copy-paste):

<figure>
  <img src="image.jpg" alt="Description">
  <figcaption><em>Figure 1:</em> Your caption here.</figcaption>
</figure>

Sidebar / Aside Content (<aside>)

Code (ready to copy-paste):

<aside>
  <h4>About you</h4>
  <p>Your bio goes here</p>
  <address>
    Contact: <a href="mailto:email@example.com">email@example.com</a>
  </address>
</aside>

Blog Post Navigation (<nav> with <a>)

Code (ready to copy-paste):

<nav>
  <a href="#"> < Previous Post</a>
  <a href="#">Back to Blog</a>
  <a href="#">Next Post > </a>
</nav>