Web Development for Kids: Basic

What I'm teaching my own children
    <html>
        <head></head>
        <body>
            <h1>The Title To My Essay</h1>
            <span style="background-color: grey;">
              I like to run around the block. I like to run around the block. I like
            </span>
        </body>
    </html>
    
    
    <html>
        <head>
            <link rel="stylesheet" href="index.css">
        </head>
        <body>
            <h1 style="background-color: red;color: teal;">My web page about tigers</h1>
            <p>
              I love <span style="color: white;background-color: black;">tigers</span>. They are endangered.
            </p>
            <script src="index.js"></script>
        </body>
    </html>
    <html>
        <head></head>
        <body>
            Here is my page about dogs.
            <a href="index.html">Click here</a> to go back to my homepage.
        </body>
    </html>
    <html>
        <head></head>
        <body>
            <h1>Main Page</h1>
            <a href="dog.html">Dog</a>
            <a href="cat.html">Cat</a>
            
            <h2>Steps to make a link</h2>
            <ol>
                <li>Create a new file (like foo.html)</li>
                <li>Create an *a* tag with link text inside</li>
                <li>Create an href attribute on the *a* tag</li>
                <li>Set it to the name of the file you created (like foo.html)</li>
            </ol>
    <html>
        <head></head>
        <body>
            <h1>My web page</h1>
    
            <!-- TODO: Write more interesting stuff. -->
            <p>My information about stuff.</p>
        </body>
    </html>
    var horseyPower = "Running faster than humans"
    
    var groceryBag = "whipped cream"
    
    console.log(groceryBag)
    
    var myBucket = "ice cream"
    
    groceryBag = "peach cobber"
    
    console.log(groceryBag)
    <html>
        <head>
            <link rel="stylesheet" href="index.css">
        </head>
        <body>
            <!-- inline styles -->
            <h1 style="color: blue;">Let's change color!</h1>
            <div style="color: red;">Some other text</div>
            <p style="color: green;">I like cheese.</p>
            
            <!-- uses classes frmo a stylesheet -->
            <p class="wonderful">I like train sets</p>
            <div class="beautiful">I like the fireplace. It is cozy.</div>
            <p class="boringcolor">John likes Star Wars more than My Little Pony.</p>
    <html>
    	<head>
            <style>
            table {
                border: 1px solid teal;
            }
            td, th {
                border: 1px solid teal;
            }
            </style>    
        </head>
    	<body>
    		<table>
                <thead>
    var a = "John";
    var b = "Legos";
    var c = a + " " + c;
    
    var foo = 'Lydia likes her hamster, Pika.';
    var bar = "Lydia's hamster";
    var baz = `Aaron likes to \`play\` hockey`;
    
    var nameArray = ['L', 'y', 'd', 'i', 'a'];
    
    // 0-[L]-1-[y]-2-[d]-3-[i]-4-[a]-5
    const farewell = "Goodbye strings, we'll be back.";
    
    console.log(farewell);
    
    var rat = [4, 5, 6];
    
    // mutable means changeable
    
    var e = rat.shift(); // SHIFT goes the HEAAAADDD
    
    console.log(rat);
    
    // shift goes the head -- shift removes the head
    // pop goes the tail -- pop removes the tail
    
    
    // document object model
    // the DOM
    
    // getElementById
    
    var node = document.querySelector('#hello');
    
    node.innerHTML = "Hi, <b>Pika</b>!";