github.html

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="icon" href="./favicon.png" />
    <title> Web Dev Book 📚</title>
    <link rel="stylesheet" type="text/css" href="index.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <div class="header">
        <div class="logo">
            <img src="./favicon.png" />
        </div>
        <h1>
            Web Dev Book 📚
        </h1>
        <h3> GitHub: Where a developer's life is, from day 1. </h3>
    </div>
    <div class="topnav">
        <a href="./index.html">Home 🏡</a>
        <a href="./codeequip.html"> Code equipment 💼 </a>
        <a href="./links.html">Links and resources 🔗</a>
        <a href="./github.html"> GitHub Sign Up</a>
        <a href="./ghubprep.html"> GitHub Basics.</a>
        <a href="./js.html">JavaScript Links.</a>
        <a href="./html.html">HTML Links.</a>
        <a href="./css.html">CSS Links.</a>
    </div>


    <div class="row">
        <div class="leftcolumn">
            <div class="card">
                <h2>
                    What is GitHub?
                </h2>
                <h3>
                    Where the world builds software!
                </h3>
                <img src="./images/GitHub-logo.png" width="950" height="480" />
                </h3>
                <p>
                🎯 GitHub is a platform for developers to use and add their code, to be saved, and seen by others. 
                <br>
                🎯 You basically add your code, commit your code, and then push your code to the remotely. 
                <br>
                🎯 You just sign up, and create your first <b> repository.</b> A repository is a project with the files of your code.
            </div>

            <div class="card">
                <h2>
                    How to sign up to GitHub!
                </h2>
                <h3>
                    To start, press the link: <a href="https://github.com/">https://github.com/</a>
                </h3>
                <p>
                    1️⃣ Press the top right button to sign up.
                </p>
                <img src="./images/Github/1.png" style="height:500px;" />
            </div>

            <div class="card">
                <h2>
                   Add your official email.
                </h2>
                <h3>
                    Make sure you add the email that is yours officially, with your name.
                </h3>
                <p>
                    2️⃣ Add your email.
                </p>
                <img src="./images/Github/2.png" style="height:500px;" />
            </div>

            <div class="card">
                <h2>
                   Create a SUPER secure password 🔒
                </h2>
                <h3>
                    Encrypt your developer diary.
                </h3>
                <p>
                    3️⃣ Be sure to create a fully secure password, not like the one in the guide below, with numbers, and letters, to make sure it is safe. 
                </p>
                <img src="./images/Github/3.png" style="height:500px;" />
            </div>

            <div class="card">
                <h2>
                  Make your own username!
                </h2>
                <h3>
                    Add your own username, so others can identify you!
                </h3>
                <p>
                    4️⃣ Make sure it is one you like, and want, like your name, or something that you wouldn't want to change!
                </p>
                <img src="./images/Github/4.png" style="height:500px;" />
            </div>

            <div class="card">
                <h2>
                  Email Preferences.
                </h2>
                <h3>
                    Choose if you want emails.
                </h3>
                <p>
                    5️⃣ You will still get important emails, but you can choose if you want news and updates.
                </p>
                <img src="./images/Github/5.png" style="height:500px;" />
            </div>

            <div class="card">
                <h2>
                  Verify
                </h2>
                <h3>
                    Verify your account.
                </h3>
                <p>
                    6️⃣ Choose the correct answers to verify your account.
                </p>
                <img src="./images/Github/6.png" style="height:500px;" />
            </div>

            <div class="card">
                <h2>
                  Add Code.
                </h2>
                <h3>
                    Add the code, as a final step.
                </h3>
                <p>
                    6️⃣ Type the 8 digit code, that you will have been sent in your email.
                </p>
                <img src="./images/Github/7.png" style="height:500px;" />
            </div>
        </div>
        <div class="rightcolumn">
            <div class="card">
                <h2>
                    Our personal Favourite resource... 🤩
                </h2>
                <img src="./images/w3.jpg" style="height: 200px; width: 275px;" />
                <h3>With all the code examples, and docs, see here:</h3>
                <a href="https://www.w3schools.com/" class="button">W3 Schools</a>
            </div>
            <div class="card">
                <h3>
                    See the official documentation:
                </h3>
                <p>Want to see the latest releases in documentation? Click the image below for mozilla web docs!</p>
                <a href="https://developer.mozilla.org/en-US/"><img src="./images/mozilla.jpg" /></a>
                <h3>
                    See frequently asked code questions...
                </h3>
                <p>Stackoverflow, the home of code questions!</p>
                <a href="https://stackoverflow.com/"><img src="./images/stackoverflow.png" /></a>
                <h3>Welcome to your coding journey! 🎒</h3>
                <p>Enjoy learning to code!</p>

                <img src="./images/enjoy.png" />

            </div>
        </div>
    </div>
    <div class="footer">
        <img src="./favicon.png" style="height: 100px; width: 100px; float: left;" />
        <h2>
            Web Dev Book!
        </h2>
    </div>
</body>

</html>

</html>