Dasmoto's Arts & Crafts - review needed :)

Hi everyone,

Here’s my code below for the html structure and the CSS style. Please have a look and share your thoughts!

<!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>Dasmoto's Arts & Crafts</title>
    <link rel="stylesheet" href="./resources/style.css">
</head>
<body>
    <header>
        <h1>Dasmoto's Arts & Crafts</h1>
    </header>
    <main>
        <div>
            <h3 class="brushes">Brushes</h3>
            <img src="https://content.codecademy.com/courses/freelance-1/unit-2/hacksaw.jpeg" alt="set of brushes">
            <h4>Hacksaw brushes</h4>
            <p>Made of the highest quality oak, Hacksaw brushes are known for their weight and ability 
                to hold paint in large amounts. Available in different sizes. <span>Starting at $3.00 / brush.</span></p>
        </div>
        <div>
            <h3 class="frames">Frames</h3>
            <img src="https://content.codecademy.com/courses/freelance-1/unit-2/frames.jpeg" alt="set of brushes">
            <h4>Art Frames (assorted)</h4>
            <p>Assorted frames made of different material, including MDF, birchwood, and PDE. Select frames can be sanded
                 and painted according to your needs. <span>Starting at $2.00 / frame.</span></p>
        </div>
        <div>
            <h3 class="paint">Paint</h3>
            <img src="https://content.codecademy.com/courses/freelance-1/unit-2/finnish.jpeg" alt="set of brushes">
            <h4>Clean Finnish Paint</h4>
            <p>Imported paint from Finland. Over 256 colors available in-store, varying in quantity (1 oz. to 8 oz.). 
                Clean Finnish paint microbinds to canvas, increasing the finish and longevity of any artwork 
                <span>Starting at $5.00 / tube.</span></p>
        </div>
    </main>
</body>
</html>
* {
    padding: 0;
    margin: 0;
}

body {
    margin: 0 16px;
    font-family: Helvetica;
}

header {
    background-image: url("https://content.codecademy.com/courses/freelance-1/unit-2/pattern.jpeg");
    background-size: cover;
    padding: 16px;
    margin: 48px 0;
}

header h1 {
    font-size: 100px;
    font-weight: bold;
    color: khaki;
    margin: 0 auto;
}

h3, h4, img, p {
    margin-bottom: 16px;
}

h3 {
    font-size: 32px;
    font-weight: bold;
    color: white;
}

img {
    height: 200px;
    width: 200px;
}

h4 {
    font-weight: bold;
}

span {
    font-weight: bold;
    color: blue;
}

.brushes {
    background-color: mediumspringgreen;
}

.frames {
    background-color: lightcoral;
}

.paint {
    background-color: skyblue;
}

Good overall job. But you use the same alt value for your images. And consider this: If (for whatever reason) your images did not load in a browser, the “alt” value would be displayed instead. Being that the heading immediately under each image is in fact descriptive of the image, setting your “alt” value to an empty string (“”) would avoid a repeated description of the image.

2 Likes

Great catch! It slipped my mind to alter the alt text for the other 2 images although I realise the importance of the alternative text for accessibility or images not loading for whatever reasons.
Always good to have a second pair of eyes on your work! Appreciate your help :slightly_smiling_face:

1 Like