JSFiddle - React, Tailwind, and code Playground

by Scott Kaye

HTML

<h1>Stage 1</h1>

<ul>
    <li>Basic HTML
        <ul>
            <li>Opening and closing tags</li>
            <li>Basic formatting tags like &lt;strong&gt; and &lt;em&gt;</li>
            <li>Semantics - using h1, p, etc when appropriate</li>
            <li>Tag attributes</li>
        </ul>
    </li>
    <li>Basic CSS
        <ul>
            <li>Super basic overview of selectors and properties</li>
            <li>IDs, classes</li>
            <li>Changing background colour and text colour</li>
        </ul>
    </li>
    <li>Basic DOM manipulation
        <ul>
            <li>getElementById</li>
            <li>querySelector (from CSS selectors)</li>
            <li>Using console.log for debugging and learning</li>
        </ul>
    </li>
    <li>Just Javascript
        <ul>
            <li>Variables, addition &amp; basic operators</li>
            <li>User input with prompt()</li>
            <li>Arrays</li>
            <li>User input with &lt;input&gt;s</li>
            <li>Event listeners with addEventListener</li>
            <li>Functions</li>
            <li>Anonymous functions</li>
            <li>Objects</li>            
        </ul>
    </li>
</ul>

<h1>Stage 2</h1>
<ul>
    <li>Conditions
        <ul>
            <li>if</li>
            <li>switch</li>
        </ul>
    </li>
    <li>Loops
        <ul>
            <li>For, while</li>
            <li>If the student is attentive, forEach, every, some, etc</li>
        </ul>
    </li>
</ul>

CSS

body {
    line-height: 1.2em;
    font-family: Roboto, sans-serif;
    background: #f0f0f0;
    color: #202020;
    text-shadow: 0 1px 0 #fff;
    padding: 5vh 5vw;
}
h1 {
    margin: 0;
    font-weight: 300;
    text-transform: uppercase;
}
body > ul > li {
    margin-top: 10px;
}