class-02/example-1.html

<!doctype html>
<html>

<head>
    <title></title>

</head>

<body>
    <div>
        <article>
            <section>
                <header>
                    <h1 class="title">Front-end web design</h1>
                    <p class="byline">Mitchell Hudson</p>
                    <p class="pub-date">
                        <time>September 18, 2016</time>
                    </p>
                </header>

                <p>Man do I love me some <abbr title="HyperText Markup Language">HTML</abbr>, <abbr title="Cascading Style Sheets">CSS</abbr>, and JavaScript, there is so much you can do with this it's incredible! Not only does this stuff work in the browser, these are found in many native tools. You can make web sites and web based applications, you can also make hybrid and native apps. Everyone is saying HTML5 is the future of web browsing.</p>

                <blockquote cite="https://recklesslyoptimistic.com">A great analogy to describe HTML, CSS, and JavaScript, you might say HTML was the bones, CSS was the skin, and JavaScript was the muscles. <span>- Adam Braus</span></blockquote>
            </section>

            <section>
                <h2>HTML - The skeleton</h2>

                <p>HTML defines the structure. As a markup language HTML is all about adding meaning and context. Looking at tags semanticly they explain and define themselves. With this mindset HTML is a very intuitive language.</p>
            </section>

            <section>
                <h2>CSS - The skin</h2>
                <p>Where HTML is all about structure and context, CSS is all about presentation. CSS is ridiculously powerful in the range of control it provides. Using a few clear decarative lines you can position an element with pixel precision, and set it's font style color and other visual features. </p>

            </section>

            <section>
                <h2>CSS - The skin</h2>
                <p>JavaScript brings code to your web pages. Run in the browser JavaScript allows you turn your web pages into full fledged applications that are accessible to anyone with web browser.
                </p>
            </section>

            <section>
                <h2>Code Sample</h2>

                <p>HTML is a simple language built on tags. A tag looks like this:</p>

                <pre>
<code lang="HTML">
&lt;tag&gt;
    &lt;tag&gt;Content&lt;/tag&gt;
&lt;/tag&gt;
</code>
</pre>

            </section>

            <footer>
                <ul class="tag-list">
                    Tags:
                    <li>Web</li>
                    <li>Front-end</li>
                    <li>Opinion</li>
                    <li>HTML5</li>
                    <li>HTML</li>
                    <li>CSS</li>
                    <li>JavaScript</li>
                </ul>
            </footer>
        </article>
    </div>
</body>

</html>