blog/blog-template.html

<!DOCTYPE HTML>
<html>

<head>
    <title>Blog Post Template</title>
</head>

<body>
    <header>
        <h3>Bill's Blog</h3>
    </header>
    <aside id="sidebar-fixed">
        <button>Main Page</button>
        <button>Facebook</button>
        <button>Twitter</button>
        <button>Pinterest</button>
    </aside>
    <section id="main-content">
        <h1>This is the blog post title</h1>
        <img src="#" alt="#">
        <p>
            February 19, 2016
        </p>
        <p>
            This is the first paragraph
        </p>
        <p>
            This is the second paragraph
        </p>

        <p>
            This is the third paragraph
        </p>
        <button>Previous</button>
        <button>Next</button>
    </section>
    <hr>
    <footer>Copyright stuff</footer>
</body>

</html>

<!-- 
Reflection

1. How was it to wireframe and create an HTML page with a pair?
It was fun to wireframe and create a HTML page with a pair. We were able to bounce ideas with each other, 
discuss the pros and cons of each feature and hear a different perspective on things.  

2. Did you find wireframing to be helpful to your development process?
Yes, I was able to write HTML faster compared to if I didn't have the wireframe in front of me. 
I can see the added benefit of writing CSS faster too because I already know where to layout the 
elements. 

3. What did you and your pair decide made a good wireframe? 
We decided right away to use a simple wireframe that serves the purpose of the site. 
It's a blog so we wanted to keep it easy and enjoyable for users to 
navigate and view the site.

4. What new semantic elements did you learn about (if any)?
We used as many semantic elements as we could including <aside>, <section>, <header>, <footer>, and <date>.

Link to view blog wireframe: https://github.com/billdevcode/billdevcode.github.io/blob/master/imgs/wireframe-blogs.png
-->