Please review my code for HTML and CSS

Projects Personal Projects
1

Hi. Please review my code for a website design that I did as part of the front end developer course. This is my first website design as I’m only 9% into the course now. Any ideas on what I can do to improve my designs is welcome.

The html file is:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Project 1</title>
        <link rel="stylesheet" href="./resources/css/index.css">
    </head>

    <body>
        <!--Introduction banner-->
        <div class="intro">
            <h1>Welcome to my first website project</h1>
            <h2>My name is Everhardus Knox and this is my first website design</h2>
        </div>
        <!--Reasons why I'm learning to code-->
        <div class="reasons">
            <h3>My reasons for learning to code is:</h3>
            <ul>
                <li>I love learning new stuff</li>
                <li>I want to change my career</li>
                <li>I always felt like I have a passion for coding</li>
                <li>To take better care of my family</li>
            </ul>
        </div>
        <!--About me-->
        <div class="about">
            <h3>A little more about myself</h3>
            <p>I'm a father of 2 boys, currently residing in a small mining town on the border of the Kruger National Park. 
                I'm a qualified Instrument Artisan and working as an Artisan on a mine on the edge of the town. 
                I love the outdoors and nature but I also like busy cities as I see each as an opportunity for adventure.
                I have a positive outlook on my future and that of my family as well, because I believe a positive attitude will attract more positive outcomes.
            </p>
        </div>
        <!--links-->
        <footer>
            <nav>
                <h3>Follow me and my family on our social media platforms</h3>
                <ul>
                    <li><img src="./resources/images/Instagram_icon.png" alt="" class="instagram"><a href="https://www.instagram.com/19haxor89/" target="_blank">Personal Instagram: @19haxor89</a></li>
                    <li><img src="./resources/images/Instagram_icon.png" alt="" class="instagram"><a href="https://www.instagram.com/theknoxies/" target="_blank">Family Instagram: @theknoxies</a></li>
                    <li><img src="./resources/images/LinkedIn_logo_initials.png" alt="" class="linkedin"><a href="https://www.linkedin.com/in/everhardusknox89" target="_blank">LinkedIn: Everhardus Johannes Knox</a></li>
                    <li><img src="./resources/images/Facebook-icon-1.png" alt="" class="facebook"><a href="https://www.facebook.com/everhardusknox89" target="_blank">Everhardus Johannes Knox</a></li>
                </ul>
            </nav>
        </footer>
    </body>
</html>

And the css code is:

* {
    box-sizing: border-box;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

body {
    background-image: url("./bg1.jpg");
    background-size: 100%;
}

h1 {
    text-align: center;
    font-weight: 900;
    font-size: 50px;
    padding-top: 50px;
}

h2 {
    text-align: center;
    padding-bottom: 50px;
}

nav {
    background-color: grey;
    margin: 25px;
}

nav h3 {
    text-align: center;
    font-weight: bold;
    padding: 25px;
}

nav li {
    display: inline-block;
    width: 23%;
    padding: 20px;
}

.intro {
    background-color: grey;
    color:goldenrod;
    margin: 25px;
}

.reasons {
    width: 100%;
    padding: 50px 0;
    
}

.reasons h3 {
    text-align: center;
    font-weight: bold;
    color: azure;
}

.reasons ul {
    list-style-type: square;
}

.reasons li {
    padding-left: 25px;
    color: beige;
}

.about {
    background-color: aliceblue;
    padding: 25px;
    margin: 25px;
    opacity: 0.5;
    font-weight: 900;
}

.facebook {
    width: 25px;
    height: 25px;
}

.instagram {
    width: 25px;
    height: 25px;
}

.linkedin {
    width: 25px;
    height: 25px;
}
2

Wow! This is a great foundation, the layout looks awesome.

If I were to recommend just a couple of changes, I’d probably change the font color for the about me, it blends in with the white background. And maybe instead of making the items merely a list, convert them to boxes with their own separate image above the text. I think it’d look really cool.

But you’ve done an awesome job so far, just keep on plowing through that course and you’ll have you website looking even better in no time!

3

Thanks for the reply! I appreciate the feedback so I can learn and become better

1 Like
4

Echoing the above, as a general rule you can find contrast-checking tools online to make sure your text and background have enough contrast for good readability/accessibility.

Otherwise it looks like a good start! I find it’s a great idea to have an ongoing project as you learn that you can add to as you gain more skills and knowledge.

Cheers

2 Likes
5

Thanks for the tip! Definitely going into my bookmarks