Preview:
<!DOCTYPE html>
<html>
<head>
    <title>My Blog</title>
	<meta name="description" content"Awesome blog by Traversy Mesia>
	<meta name="keywords" content"web design blog,web dev blog, traversy media">
	  <style type="text/css">
	         #main-header{
			      text-align:center;
				  background-color:black;
				  color:white;
				  padding:10px;
				  
		   }
       #main-footer{
         text-align: center;
         font-size: 18px;
       }
	  </style>
</head>
<body>
      <header id="main-header">
             <h1>My Website</h1>
      </header>
    
	<a href="index.html">Go to index</a>

      <section>
              <article class="post">
                <h3>Blog post one</h3>
                <small>posted by Brad on july 17</small>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
                  Quasi laborum asperiores maxime cupiditate, quo recusandae,
                  temporibus repellendus modi adipisci numquam minus accusantium 
                 dolorum deleniti nobis vero perspiciatis voluptate. Rem, temporibus.</p>
                 <a href="post.html">Read More</a>
              </article>

              <article class="post">
                <h3>Blog post Two</h3>
                <small>posted by Brad on july 17</small>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
                  Quasi laborum asperiores maxime cupiditate, quo recusandae,
                  temporibus repellendus modi adipisci numquam minus accusantium 
                  dolorum deleniti nobis vero perspiciatis voluptate. Rem, temporibus.</p>
                  <a href="post.html">Read More</a>
              </article>

              <article class="post">
                <h3>Blog post Three</h3>
                <small>posted by Brad on july 17</small>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
                  Quasi laborum asperiores maxime cupiditate, quo recusandae,
                  temporibus repellendus modi adipisci numquam minus accusantium 
                  dolorum deleniti nobis vero perspiciatis voluptate. Rem, temporibus.</p>
                  <a href="post.html">Read More</a>
              </article>
      </section>

      <>
        <h3>Categories</h3>
        <ul>
             <li><a href="#">Category 1</a></li>
             <li><a href="#">Category 1</a></li>
             <li><a href="#">Category 1</a></li>
        </ul>
       </nav>
      </aside>

      <footer id="main-footer">
          <p>Copyright &copy; 2017, My Website</p>
      </footer>
</body>  
</html>
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter