The Browser Triad

# The Browser Triad
            ## HTML, CSS and Javascript
            
            ---
            
            ![Illustration of the request/response cycle](../assets/images/dev/browser-triad.png)
            
            See: [HTML Tutorial for Beginners: HTML Crash Course](https://www.youtube.com/watch?v=qz0aGYrrlhU) by Mosh Hamedani
            
            ---
            
            ## The Browser Triad
            HTML, CSS and JS each do different and very important jobs in every web browser: 
            - **HTML**: _Content Layer_
            - **CSS**: _Presentation Layer_
            - **Javascript**: _Behaviour Layer_
            
            ---
            
            ## HTML - Content Layer
            HTML defines the meaning and structure of web content.
            
            ```html
            <section class="intro">
              <h1>About Tony</h1>
              <p>Tony likes to play games! His faves:</p>
              <ul>
                <li>Pinball</li>
                <li>King of Tokyo</li>
                <li>D&D</li>
              </ul>
            </section>
            ```
            
            Semantic HTML elements describe content and provide "meaning" to the browser (handy for screen readers)
            
            ---
            
            ## HTML Syntax
            ![HTML Syntax](../assets/images/html/grumpy-cat-small.png)
            
            ![Attribute Syntax](../assets/images/html/grumpy-cat-attribute-small.png)
            
            See: [Getting started with HTML](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started)
            
            ---
            
            ## CSS - Presentation Layer
            The CSS that control the visual appearance of a web page. Examples: typography, layout, colour, etc.
            
            ```css
            body {
              font-size: 20px;
              text-align: center;
              color: rebeccapurple;
              background-color: lightgrey;
            }
            
            h1 {
              border-bottom: 2px solid black;
            }
            ```
            
            ---
            
            ### CSS Syntax
            ![CSS Syntax](../assets/images/css/css-declaration-small.png)
            
            See: [CSS Basics](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics)
            
            ---
            
            ## Javascript - Behaviour Layer
            The Javascript that controls the interactive behaviour of a web page. 
            
            In practice, the behaviour layer is responsible for everything the content and presentation layers _can't_ do (yet).
            
            Javascript will be covered in more detail later.
            
            ---
            
            ## Further Learning
            - Video: [HTML Tutorial for Beginners: HTML Crash Course](https://www.youtube.com/watch?v=qz0aGYrrlhU) by Mosh Hamedani
            - [Getting started with HTML](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started)
            - [CSS Basics](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics)