codeequip.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="codeequip.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> The equipment you need to write the code! </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>
                    To begin coding, you need to have software to play and write code...
                </h2>
                <h3>
                    The code canvas!
                </h3>
                <img src="./images/vscode.png" width="950" height="480" />
                </h3>
                <p>
                    <b> 🤔 What is VScode? 🤔</b>
                </p>
                <p>
                    VScode, made by the <i>Microsoft Cooperation, </i> is a code editor, where developers build and
                    write their desired code, in all the different code languages!
                </p>
                <h3>
                    See below for a walk through on how to set up your own VScode.
                </h3>
            </div>

            <div class="card">
                <h2>
                    Download VScode 🔽:
                </h2>
                <h3>
                    <i>Click the button below to go to the official VScode website, to download!</i>
                </h3>
                <a href="https://code.visualstudio.com/download">Download the official VScode!</a>
                <p>
                    Choose the correct computer software, whether you are a linux/apple/windows user, then download.
                </p>

            </div>

            <div class="card">
                <h2>
                    The process:
                </h2>
                <h3>
                    <i> The downloading and what to do after:</i>
                </h3>
                <a href="https://code.visualstudio.com/docs/setup/windows">See the official VScode website for details
                    after downloading.</a>

            </div>

            <div class="card">
                <h2> Extra VScode resources:</h2>
                <table>
                    <tr>
                        <th>Resource 📚: </th>
                        <th>Description 🖊️</th>
                    </tr>
                    <tr>
                        <td> 🎯 <a href="https://code.visualstudio.com/docs/introvideos/basics"> VScode videos and
                                shortcuts.</a></td>
                        <td> See the videos on how to use VScode and keyboard shortcuts.</td>
                    </tr>
                    <tr>
                        <td> 🎯 <a href="https://adamtheautomator.com/visual-studio-code-tutorial/">All you need about
                                VScode</a></td>
                        <td> Here is an article about all things VScode. From the command pallette to the settings.</td>
                    </tr>
                    <tr>
                        <td> 🎯 <a href="https://github.com/microsoft/vscode">VScode GitHub repository.</a></td>
                        <td> The code of VScode, where others ask questions, and contribute to their codes.</td>
                    </tr>

                </table>

            </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>