Dasmotos Arts and Crafts: Code Review

Projects Skill Path Projects
1

Hello, first time posting, would love to get as much critique as possible! Thank you so much!

<!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/css/index.css">
</head>
<body>
    <header>
        <p class="header">Dasmoto's Arts & Crafts</p>
    </header>
    <div>
        <p class="headerfont" id="blueback">Brushes</p>
        <img src="./resources/images/hacksaw.jpeg" alt="">
        <h3>Hacksaw Brushes</h3>
        <p>Made of the highest quality oak, Hacksaw brushe are known for their weight and ability to hold paint in large amounts. Available in different sizes.<span class="boldblue">Starting at $3.00/brush.</span></p>
        
    </div>
    <div>
        <p class="headerfont" id="redback">Frames</p>
        <img src="./resources/images/frames.jpeg" alt="">
        <h3>Art Frames (assorted)</h3>
        <p>Assorted frames made of different material, including MDF, birchwood, and PDE. Select frames can be sanded and painted according to your needs.<span class="boldblue">Starting at $2.00/frame</span></p>
        
    </div>
    <div>
        <p class="headerfont" id="skyback">Paint</p>
        <img src="./resources/images/finnish.jpeg" alt="">
        <h3>Clean Finnish Paint</h3>
        <p>Imported paint from Finland. Over 256 colors available in-store, varying in quantity (1 oz. to 8 0z.). Clean Finnish paint microbinds to canvas, increasing the finish and longevity of any artwork.<span class="boldblue">Starting at $5.00/tube</span></p>
    </div>
        
</body>
</html>

* {
    box-sizing: border-box;
    font-family: Helvetica
}
.header{
    font-size: 100px;
    font-weight: bold;
    color: khaki;
    text-align: center;
    background-image: url(https://content.codecademy.com/courses/freelance-1/unit-2/pattern.jpeg?_gl=1*1i729lq*_ga*MTA0MDMyNzk2Ny4xNjY1MjYzOTcz*_ga_3LRZM6TM9L*MTY2NTUxNzAxNS41LjEuMTY2NTUxNzAzNS40MC4wLjA.);
    
}
.headerfont{
    font-size: 32px;
    font-weight: bold;
    color: white;
}
.boldblue{
    font-weight: bold;
    color: blue;
    
}
#blueback{
    background-color: mediumspringgreen;
}
#redback{
    background-color: lightcoral;
}
#skyback{
    background-color: skyblue;
}
2

Hi there,

Just a couple of things. I noticed that the <p> tag in your <header> has the class “header.” While it probably accomplished the styling you wanted in the end, semantics-wise, it’s best to avoid giving elements class names used by existing tags.

And I noticed that you have this <p> set as .headerfont with an <h3> below it. Perhaps it could have been better semantics-wise to do:

<header>
  <h1> </h1>
</header>
<div>
  <h2> </h2>
  <img>
  <h3> </h3>
  <p> </p>
</div>

Dasmoto’s is a good stepping stone into learning so much more–which is an exciting thing! Keep pushing forward!

2 Likes