HTML/CSS Dasmoto's Arts & Crafts Project

Projects Skill Path Projects
1

Any feedback on this would be greatly appreciated! I am just starting with more open ended projects. Thanks so much!

<!DOCTYPE html>
<html>
    
<head>
    
    <title>Dasmoto's Arts & Crafts</title>
    
    <link href="art-supply.css" type="text/css" rel="stylesheet">
    
</head>
    
<body>
    
    <header>
        
        <h1>Dasmoto's Arts & Crafts</h1>
        
    </header>
    
    <main>
        <section> <!--Brushes-->
            
            <h2 class="brushes">Brushes</h2>
            
            <img src="image-2.webp" alt="Paintbrushes">
            
            <h3>Hacksaw Brushes</h3>
            
            <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 class="prices">Starting at $3.00 / brush.</span></p>
            
        </section>
        
        <section> <!--Frames-->
            
            <h2 class="frames">Frames</h2>
            
            <img src="image-3.webp" alt="Wooden art frames">
            
            <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="prices">Starting at $2.00 / frame.</span></p>
            
        </section>

        <section> <!--Paint-->
            
            <h2 class="paint">Paint</h2>
            
            <img src="image-4.webp" alt="paint tubes">
            
            <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 class="prices">Starting at $5.00 / tube.</span></p>
            
        </section>

    </main>
    
</body>
    
</html>

CSS Code Here:

h1, 
h2, 
h3, 
p {
  font-family: "Helvetica", sans-serif;
}

h1 {
    background-image: url(image-1.webp);
    font-size: 100px;
    font-weight: bold;
    color: khaki;
    text-align: center;  
}

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

.brushes {
    background-color: mediumspringgreen;
}

.frames {
    background-color: lightcoral;
}

.paint {
    background-color: skyblue;
}

.prices {
    font-weight: bold;
    color: blue;
}
2 Likes
2

Hi @dawnxbelle,

That’s looking great so far!

Just a couple tips to help you as you go along, you want to keep your code as dry as possible, which means you want to try to limit how much you repeat yourself. In your CSS you have a great start for this with the first section with the “font-family”. I would recommend you do something similar with the “font-weight: bold;” as you repeat this 3 times throughout your h1, h2, and p elements like this:

h1, h2, p {
  font-weight: bold;
}

Also, you can simplify the font-family styling. Since you’re applying it to all text elements as a “global style”, you can use the asterisk to represent “all text” for the HTML in the CSS like this:

* {
  font-family: "Helvetica", sans-serif;
}
3 Likes
3

Thank you for the great feedback! I really appreciate it : )

1 Like