<!DOCTYPE html>
<html>

  <head> <!-- /Users/benscully/workspace/ben-scully.github.io/css/ -->
    <title> Bens Dev Academy Journey </title>
    <meta charset="UTF-8">

    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.css">
    <link rel="stylesheet" type="text/css" href="https://ben-scully.github.io/css/main.css">

  </head>

  <body>

    <header class="segment">
      <div class="container">
        <div class="row">

          <div>
              <div class="header-title">
                <h1>Bens Journey At</h1>
              </div>
              <img class="header-image" src="https://ben-scully.github.io/images/dev_academy_logo.png" alt="Dev Academy Logo">
          </div>

        </div>
      </div>
    </header>


    <div class="container">
      <div class="row">

        <nav class="three columns segment">
          <label for="home">Blog Entries</label>
	        <input type="radio" name="verticalMenu" id="blogentries" />
          <ul>
            <li> <!-- Home -->
              <a href="https://ben-scully.github.io/index.html">Home</a>
            </li>
            <li> <!-- Blog1-reflection -->
              <a href="https://ben-scully.github.io/blog/c1-reflection-blog.html"> Reflection </a>
            </li>
            <li> <!-- Blog2-time -->
              <a href="https://ben-scully.github.io/blog/c1-time-and-habits-blog.html">Time & Habits</a>
            </li>
            <li> <!-- Blog3-eq -->
              <a href="https://ben-scully.github.io/blog/c2-emotional-intelligence.html">EQ</a>
            </li>
            <li> <!-- Blog4-css&dom-partA -->
              <a href="https://ben-scully.github.io/blog/t2-html-css-dom-p1.html">The DOM part2</a>
            </li>
            <li> <!-- Blog5-css&dom-partB -->
              <a href="https://ben-scully.github.io/blog/t2-html-css-dom-p2.html">The DOM part2</a>
            </li>
            <li> <!-- Blog6-designtoweb -->
              <a href="https://ben-scully.github.io/blog/t3-design-to-web-blog.html">Design to Web</a>
            </li>
          </ul>
        </nav>

        <section class="nine columns segment">
          <article>
            <h2> Blog #3 The DOM, part2 </h2>

            <h3> What Is Grid Based Design? </h3>
            <p>
              When the page is divided in to columns based on percentages. Then sections of content are assigned the number of columns they need to fill the desired amount of the page. For instance if a navigation menu was intended to take up 1/3 of a 12 column page then you would assign the navigation menu x4 columns.
            </p>

            <h3> What Is All The Hype About Responsive Webpages? </h3>
            <p>
              In the past webpages were only viewed on laptop/desktop screens which were resonably large and similar in size. That meant webpage designers could make one design that would work everywhere. Now users have mobile phones, tablets, and desktop/laptop so 'Responsive Design' changes to meet all of these different interfaces which are a huge part of the market.
            </p>

            <h3> What Is Semantic Structure? </h3>
            <p>
              Structuring your content in a way which creates meaning. Sure you might have a few paragraphs of meaningful information but if they aren't under the correct title of related image no one may read them or understand them. How usability users need consitance as well. Like highlighting any links within a set of text.
            </p>
          </article>
        </section>

      </div>
    </div>

    <footer class="segment">
      <div class="container">
      <div class="row">

        <div class="offset-by-three column six columns">
          Footer for my blog
        </div>

      </div>
      </div>
    </footer>

  </body>
</html>
