Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Site Review Requests _ Is my CSS ok?

Posted by: mp3909 Apr 17 2020, 12:14 PM

So I am quite new to HTML and CSS, still learning it.
But after watching a series of YouTube channels, I went ahead and created a webpage.

I am looking for experts in this field to look at my code below and give constructive criticism so that I can improve.
I could be doing certain things the wrong/bad way in my code so only someone who is an expert in this field will know.
Anything at all will help!
Thank you and much appreciated

p.s. attached zip file contain the images referenced within the code.

HTML code

CODE

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type"css/text" href="website1.css">
    </head>
    <body>
        <div class="wrapper">
            <nav id="navbar">
                <ul>
                    <li><a href="#">bikes</a></li>
                    <li><a href="#">best buy</a></li>
                    <li><a href="#">offers</a></li>
                    <li><a href="#">accessories</a></li>
                    <li><a href="#">contact</a></li>
                    <li><a href="#">about us</a></li>
                </ul>
            </nav>
            <section>
                <img src="../images/lead-banner.jpg" alt="main photo">
            </section>
            <main>
                <div class="container">
                    <img  src="../images/bike.jpg" alt="bike">
                    <h3>Bicycle RetroSyperb VII #1</h3>
                    <h1>$299.99</h1>
                    <div class="container-2">
                        <img src="../images/stars.png" alt="stars">
                    </div>
                    <h5>Add to shopping basket</h5>
                </div>
            </main>
            <footer>
                <img src="../images/footer.jpg" alt="footer">
            </footer>
        </div>
    </body>
</html>

CSS code

CODE

body {
    background-color: lightgrey;
    margin: 0;
}

.wrapper {
    width: 900px;
    margin: -16px auto;
}

nav {
    text-align: right;
    background-color: rgb(2, 21, 43);
    height: 50px;
    padding-right: 10px;
}

nav ul li {
    margin-left: 20px;
    list-style-type: none;
    display: inline-block;
    padding-top: 12px;
}

nav ul li a{
    color: white;
    text-transform: uppercase;
    font-size: 12px;
    text-decoration: none;
}

nav ul li a:hover {
    background-color: rgb(194, 164, 141);
}

section img {
    width: 100%;
    height: 380px;
}

main .container {
    text-align: center;
    background-color: white;
    margin-top: -5px;
    padding-top: 100px;
    height: 550px;
}

main .container h1 {
    font-size: 70px;
    margin-top: -20px;
}

main .container .container-2 {
    margin-top: -50px;
}

main .container h5 {
    border: 2px solid #af746c;
    color: rgb(194, 164, 141);
    padding: 10px;
    text-transform: uppercase;
    font-family: "Times New Roman";
    width: 200px;
    margin: 20px auto;
}

main .container h5:hover {
    background-color: rgb(194, 164, 141);
    color: white;
}

footer img{
    width: 100%;
}

Attached File(s)

images.zip ( 65.8k ) Number of downloads: 385

Posted by: Christian J Apr 17 2020, 04:43 PM

QUOTE(mp3909 @ Apr 17 2020, 07:14 PM)

The TITLE text is missing. I suggest using the site name combined with the individual page's name.

QUOTE

The TYPE attribute is missing its equal sign, and the value should be "text/css".

QUOTE

The ALT text might be more descriptive --imagine viewing the page without images, what would be a suitable alternative text for each image? Images that are mostly decorative might have empty ALT values.

QUOTE

body {
background-color: lightgrey;

It's safest to specify foreground color and background color in the same rule.

QUOTE

.wrapper {
width: 900px;

It's usually more user-friendly with a layout that adapts to different viewport sizes. This can be done in a number of ways, today media queries are popular.