<!DOCTYPE html>
<html lang="en">
<head>
      <title>Rena-Deane's Blog</title>
      <meta charset="UTF-8">
      <link href="../styles/main.css" rel="stylesheet" type="text/css">
</head>
        
<body>
  <div class="page-wrapper">
    <div class="header-container">
        <header class="masthead">
            <h1>Rena-Deane's Blog</h1>
            <h2>My Journey at EDA</h2>
            <nav class="primary-nav">
              <ul>
                <li>
                  <a href="../index.html">Home</a>
                </li>
                <li>
                  <a href="c1-reflection-blog.html">Reflection</a>
                </li>
                <li>
                  <a href="c2-emotional-intelligence.html">SIY</a>
                </li>
                <li>
                  <a href="c1-time-and-habits-blog.html">Time and Habbits</a>
                </li>
                <li class="activenav">Technical Blog</li>
              </ul>
            </nav>
        </header>
    </div>

    <section class="content">
      <h3>Udacity Reflection</h3>
      <ul class="secondary-nav">
          <li class="otherlesson"><a href="t2-html-css-dom-p1.html">Lesson 1</a></li>
          <li class="secondary-activenav">Lesson 2</li>
      </ul>
      <h4>Thursday 24 March 2016</h4>

      <article class="blog-post">
        <h5>Grid Based Design</h5>
        <p>
          The grid based design is a CSS framework used to arrange web content into rows and columns.  Every webpage is based on some type of grid design.  The most common grid size is 12 columns.
        </p>

        <h5>Responsive Webpages</h5>
        <p>
          People access the web using devices that vary in size/resolution.  Responsive design allows a page to respond to the changing size of a web browser meaning that if the browser width is reduced the content responds so that it fits within the browser's boundaries.
        </p>
        
        <h5>Semantic Structure</h5>
        <p>
          Semantic tags are used so that users such as developers and the web can easily determine the infromation structure of a webpage.  For example, <code>h1</code> to <code>h6</code> for headings, <code>img</code> for images and <code>forms</code> for forms.  These tags aren't about visual styling.  For instance, screen readers/assistive technology focus on semantic structures to read the page to a visually impaired user
        </p>

        <h5>Interesting Points</h5>
        <ul>
          <li>
            Grid - I found the <code>.classnames</code> for the 12 column grid very helpful.  This takes the stress out sectioning a page using div tags and creating names for the class attributes.
          </li>
          <li>
            Overflow - I like how a bunch of text can be contained in an area of the page.
          </li>
          <li>
            <code>@media</code> - I look forward to learning more about responsive design.
          </li>
          <li>
            Code, Test, Refine - This cycle reaffirms the method i've been applying.  Chrome dev tools is fun to use when testing code and trying out new ideas.  Also I always keep in the back of my mind to firstly determine the layout and secondly, customise
          </li>
          <li>
            Font - linking to google fonts is fun and gives us better design choices.
          </li>
        </ul>
      </article>
    </section>
  </div>
</body>
</html>