index.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> Here is a list of websites and resources to begin your developer journey! </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>
                    Want to know about the different opportunities software engineering can give you?
                </h2>
                <h3>
                    See the list below:
                </h3>
                <img src="./images/mindmap.jpg" width="950" height="480" />
                </h3>
                <p>
                <ul>
                    <li> Create websites! 🌐</li>
                    <li> Create life changing apps! 📱</li>
                    <li> Learn multiple languages! 👩‍💻👨‍💻</li>
                    <li> Create your own games! 🎮🕹️</li>
                    <li>Learn a new life skill...</li>
                </ul>
                </p>
            </div>

            <div class="card">
                <h2>
                    The mindset an aspiring software engineer needs to be equipped with 🧠:
                </h2>
                <h3>
                    <i>It's not just code you need to get your head around 💫 ...</i>
                </h3>
                <img src="./images/software-engineer-skills.png" style="height:500px;" />
                <p>
                <ul>
                    <li> Have plenty of endurance to complete a task. ✔️</li>
                    <li> Organise the time to complete a code task. ⌚ </li>
                    <li> Work well with others, and contribute to projects 👊</li>
                    <li> Be able to set reasonable and achievable targets. 🎯</li>
                    <li> Have a love and passion for the modern world of technology! ⚙️</li>
                    <li> Be confident with mathematics! ➗➖</li>
                </ul>
                </p>
            </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>