Dasmoto's Project Feedback

Hello, this is my first project in making a website and I would like some feedback on it. I received a lot of help from my notes and google searches to help me and my code is working as intended. All feedback is appreciated. Thank you.

<!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 and Crafts</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="centered"><h1>Dasmoto's Arts & Crafts</h1></div>

    <div>
        <h2 class="heading">Brushes</h2>
            <img src="./images/hacksaw.jpeg" alt="">
            <h3 class="h3">Hacksaw Brushes</h3>
            <p class="p">Made of the highest quality oak, Hacksaw bruhses are known for their weight and ability to hold paint in large amounts. Available in different sizes. <span id="cost">Starting at $3.00 / brush.</span></p>
    </div>
    <div>
        <h2 class="heading-2">Frames</h2>
        <img src="./images/frames.jpeg" alt="">
        <h3 class="h3">Art Frames(assorted)</h3>
        <p class="p">Assorted frames are made of different material, including MDF, birchwood, and PDE. Select frames can be sanded and painted accordingly to your needs. <span id="cost">Starting at $2.00 / frame.</span></p>
    </div>
    <div>
        <h2 class="heading-3">Paint</h2>
        <img src="./images/finnish.jpeg" alt="">
        <h3 class="h3">Clean Finnish Paint</h3>
        <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 id="cost">Starting at $5.00 / tube.</span></p>
    </div>

    
   
    
</body>
</html>


.centered{
    background-image: url(images/pattern.jpeg);
    text-align: center;
    font-family: Helvetica;
    font-weight: bold;
    font-size: 80px;
    color: khaki;
    
}

.heading {
    font-family: Helvetica;
    font-size: 32px;
    font-weight: bold;
    color: white;
    background-color: mediumspringgreen;
}

#cost {
    font-family: Helvetica;
    font-weight: bold;
    color: blue;
}

.h3 {
    font-family: Helvetica;
    font-weight: bold;
}

.heading-2{
    font-family: Helvetica;
    color: white;
    font-size: 32px;
    background-color: lightcoral;
}

.p{
    font-family: Helvetica;
}

.heading-3{
    font-family: Helvetica;
    font-weight: bold;
    font-size: 32px;
    color: white;
    background-color: skyblue;
}
1 Like

Hi there!

So, as for semantics–I would not use class names that are the same as a tag name.

It works, but it’s bad practice. Dasmoto’s is a simple layout, so it would be simple enough just to use the tag when styling.

So, instead of

.h3 {
    font-family: Helvetica;
    font-weight: bold;
}

It would simply be

h3 {
    font-family: Helvetica;
    font-weight: bold;
}

Happy coding!

1 Like

Yea, I was having trouble with that and I was wondering why it wasn’t working :sweat_smile: , thank you so much for your feedback!!

1 Like