<commit_before><!DOCTYPE html>
<html>
  <head>
    <title>HTML and CSS Udacity Reflection </title>
    <meta charset="UTF-8">
    <link href="/styles/main.css" rel="stylesheet" type="text/css">
  </head>
  
  <body>

    <div class = "sidebar">
      <div class="header">
        <h1>Mikes Blog</h1>
        <h4>Learning @ EDA</h4>
        <div class="nav">
        <ul>
          <li><a href="~/index.html">Home</a></li>
          <li><a href="/blog/c1-reflection-blog.html">Reflections</a></li>
          <li><a href="/blog/c1-time-and-habits-blog.html">Time and habits</a></li>
        </ul>
        </div>
      </div>
    </div>

    <div class="post">
      
   
      <h1>HTML and CSS Udacity 1</h1>
      <h4>14 April 2016</h4>

        <h3> Can you think of an analogy to describe HTML, CSS and the DOM? How would you describe it 
to your non-technical friend?</h3>
          <img class="displayed" src="images/trees.jpg" alt="trees">

          <p>
            HTML , CSS and the DOM are terms commonly used in the web development world to describe how a webpage is put together. Each part has it’s own function and performs a specific role in creating what you see on screen.
          </p>
          <p>
            Using a tree as an analogy. When you look at a tree,  think about the elements which you define it as what it is.  
          </p>
          <p>
            The trunk is what gives the tree structure. You could call this the DOM (Document object model) of the tree. This defines what the tree is going to look like in terms of its overall structure . The DOM is like a map or a model of how the web page it put together.
          </p>
          <p>
            HTML (Hypertext Mark-up Language) is what gives the web page its form. It is comprised of various elements, each one with a specific function or role. Each of these elements are identified by tags or labels indicating how they are used.
          </p>
          <p>
            Common examples of these tags include sections, headings, paragraphs, links and images. These tags are like the various parts of the tree - leaves, fuits, flowers, branches, roots. 
          </p>
          <p>
            The HTML allows us to put the elements onto our DOM structure much like how we would expect our tree to look
          </p>
          <p>
            Now what makes the tree different from all the other trees in the forest is how it appears. Each part of the tree can have it’s own shape, colour, smell, size. The combinations are endless. 
          </p>
          <p>
            This is what the CSS (cascading style sheet) does. It provides styling to the website and enables us to apply all different styles such as colour, formatting, font characteristics, shape. 
          </p>
          <p>
            This is what makes web pages beautiful.
          </p>

        <h3> What is meant by boxifying design?</h3>
          <img class="displayed" src="boxify.jpg" alt="boxify design">

         <p>
            A webpage is made up of a number of elements which are rendered on a page based on it’s HTML and CSS characteristics. To make the design process easy to understand and create, the page is split up into boxes and containers. 
          </p>
          <p>
            Each box holds elements of a certain type - headers, sidebars, footers, paragraphs, images etc and there can be boxes within boxes too.
         </p>
        <p>
          By boxifying our design elements and showing our layout in a graphical sense, it makes the job of creating out HTML and CSS coding much easier.
        </p>
      
      <h3>What is the box model?</h3>
        <img class="displayed" src="boxmodel.jpg" alt="box model">

        <p>
          The box model defines how a box and its attributes relate to each other and how this box (and its contents may appear on the screen. There are 4 parts to the box model.
        </p>
        <dl>
          <dt>Content</dt>
          <dd>Where the element resides.</dd>
          <dt>Padding</dt>
          <dd>The white space inside between the element and the box.</dd>
          <dt>Border</dt>
          <dd>Outlines the visible portion of the element.</dd>
          <dt>Margin</dt>
          <dd>The invisible space outside of the box.
          </dd>
        </dl>
        <p>
          The actual size of the box includes all these attributes so it is important to consider this when laying out the page. For example, if an element has been given a width attribute of 100px, the true size of the box would have to include the left/right padding, border-width and margin dimensions.
        </p>
        <p>
          One way of reducing unintended formatting errors would be to use the box-sizing selector using the border-box attribute to limit the size of the box to the border itself.
        </p>
     </div>
    
    <!-- this is a comment. -->
  
  </body>
</html><commit_msg>trying to add images again<commit_after><!DOCTYPE html>
<html>
  <head>
    <title>HTML and CSS Udacity Reflection </title>
    <meta charset="UTF-8">
    <link href="/styles/main.css" rel="stylesheet" type="text/css">
  </head>
  
  <body>

    <div class = "sidebar">
      <div class="header">
        <h1>Mikes Blog</h1>
        <h4>Learning @ EDA</h4>
        <div class="nav">
        <ul>
          <li><a href="~/index.html">Home</a></li>
          <li><a href="/blog/c1-reflection-blog.html">Reflections</a></li>
          <li><a href="/blog/c1-time-and-habits-blog.html">Time and habits</a></li>
        </ul>
        </div>
      </div>
    </div>

    <div class="post">
      
   
      <h1>HTML and CSS Udacity 1</h1>
      <h4>14 April 2016</h4>

        <h3> Can you think of an analogy to describe HTML, CSS and the DOM? How would you describe it 
to your non-technical friend?</h3>
          <img class="displayed" src="/images/trees.jpg" alt="trees">

          <p>
            HTML , CSS and the DOM are terms commonly used in the web development world to describe how a webpage is put together. Each part has it’s own function and performs a specific role in creating what you see on screen.
          </p>
          <p>
            Using a tree as an analogy. When you look at a tree,  think about the elements which you define it as what it is.  
          </p>
          <p>
            The trunk is what gives the tree structure. You could call this the DOM (Document object model) of the tree. This defines what the tree is going to look like in terms of its overall structure . The DOM is like a map or a model of how the web page it put together.
          </p>
          <p>
            HTML (Hypertext Mark-up Language) is what gives the web page its form. It is comprised of various elements, each one with a specific function or role. Each of these elements are identified by tags or labels indicating how they are used.
          </p>
          <p>
            Common examples of these tags include sections, headings, paragraphs, links and images. These tags are like the various parts of the tree - leaves, fuits, flowers, branches, roots. 
          </p>
          <p>
            The HTML allows us to put the elements onto our DOM structure much like how we would expect our tree to look
          </p>
          <p>
            Now what makes the tree different from all the other trees in the forest is how it appears. Each part of the tree can have it’s own shape, colour, smell, size. The combinations are endless. 
          </p>
          <p>
            This is what the CSS (cascading style sheet) does. It provides styling to the website and enables us to apply all different styles such as colour, formatting, font characteristics, shape. 
          </p>
          <p>
            This is what makes web pages beautiful.
          </p>

        <h3> What is meant by boxifying design?</h3>
          <img class="displayed" src="/images/boxify.jpg" alt="boxify design">

         <p>
            A webpage is made up of a number of elements which are rendered on a page based on it’s HTML and CSS characteristics. To make the design process easy to understand and create, the page is split up into boxes and containers. 
          </p>
          <p>
            Each box holds elements of a certain type - headers, sidebars, footers, paragraphs, images etc and there can be boxes within boxes too.
         </p>
        <p>
          By boxifying our design elements and showing our layout in a graphical sense, it makes the job of creating out HTML and CSS coding much easier.
        </p>
      
      <h3>What is the box model?</h3>
        <img class="displayed" src="/images/boxmodel.jpg" alt="box model">

        <p>
          The box model defines how a box and its attributes relate to each other and how this box (and its contents may appear on the screen. There are 4 parts to the box model.
        </p>
        <dl>
          <dt>Content</dt>
          <dd>Where the element resides.</dd>
          <dt>Padding</dt>
          <dd>The white space inside between the element and the box.</dd>
          <dt>Border</dt>
          <dd>Outlines the visible portion of the element.</dd>
          <dt>Margin</dt>
          <dd>The invisible space outside of the box.
          </dd>
        </dl>
        <p>
          The actual size of the box includes all these attributes so it is important to consider this when laying out the page. For example, if an element has been given a width attribute of 100px, the true size of the box would have to include the left/right padding, border-width and margin dimensions.
        </p>
        <p>
          One way of reducing unintended formatting errors would be to use the box-sizing selector using the border-box attribute to limit the size of the box to the border itself.
        </p>
     </div>
    
    <!-- this is a comment. -->
  
  </body>
</html>
{'fraction_non_alphanumeric': 0.08528935653581546, 'fraction_numerical': 0.0056657223796034, 'mean_word_length': 2.1281645569620253, 'pattern_counts': {'":': 0, '<': 201, '<?xml version=': 0, '>': 201, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6584756', 'n_tokens_mistral': 2715, 'n_tokens_neox': 2626, 'n_words': 1317}