Dasmoto's arts and Crafts review request

Projects Skill Path Projects
#1

So I have finished the Dasmoto practice and would like a review on it. I have three points for this review:

  1. My banner appears very big in comparison to the example in the exercise. I followed the instruction to use a font-size of 100px, so this might be intended but I would like to know if I may made a mistake here.

  2. I use the span element to make the text about prices blue and gave it a color in CSS. Is this the best way to approach this?

  3. Overall CSS buildup.

Here’s my code:
HTML part:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Dasmoto's Arts & Crafts</title>
        <link rel="stylesheet" href="./resources/CSS/style.css">
    </head>
    <body>
        <header>
            <h1>Dasmoto's Arts & Crafts</h1>
        </header>
        <main>
            <section>
                <h2 id="brushes">Brushes</h2>
                <img src="./resources/Images/Brushes.jpeg" alt="Hacksaw Brushes">
                <h3><strong>Hacksaw Brushes</strong></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>Starting at $3.00 / brush.</span></p>
            </section>
            <section>
                <h2 id="frames">Frames</h2>
                <img src="./resources/Images/frames.jpeg" alt="Art Frames">
                <h3><strong>Art Frames (assorted)</strong></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>Starting at $2.00 / frame.</span></p>
            </section>
            <section>
                <h2 id="paint">Paint</h2>
                <img src="./resources/Images/Paint.jpeg" alt="Tubes of paint">
                <h3><strong>Clean Finnish Paint</strong></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>Starting at $5.00 / tube.</span></p>
            </section>
        </main>
    </body>
</html>

CSS part:

header {
    box-sizing: border-box;
    background-image: url(../images/bannerbg.jpeg);
    text-align: center;
    font-family: Helvetica;
    font-size: 100px;
    font-weight: bold;
    color: khaki;
}

h2 {
    font-family: Helvetica, sans-serif;
    font-size: 32px;
    font-weight: bold;
    color: white;
}
#brushes {
    background-color: mediumspringgreen;
}
#frames {
    background-color: lightcoral;
}
#paint {
    background-color: skyblue;
}

span {
    font-family: Helvetica, sans-serif;
    font-weight: bold;
    color: blue;
}

Thank you for looking at my practice. :smiley:

#2

Hi! It looks fine.
I was doing just that project today too. So, I can’t say I’m an expert, but I can probably give some advice.

I had this problem with the banner too. I don’t understand why, but if you put font-size: 100px; in the rule for header, the banner gets much bigger. But if you put it in the h1 rule, it looks fine, as it should.

And applying span was also my idea :sweat_smile:

I would point out that the css code could be shortened a bit. For example the Helvetica and bold features have many headers and this could be combined, for example like this:

h1,
h2,
span {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
}
1 Like
#3

Thank you zalnana. Good find about the header and h1 and the combining of headers and span is a good one!

I did decide later on that I would add a class to the span. Not really needed for this exercise, but in case something would be added later, I think it’s good practice to make it a habit (might be useful for you too).

1 Like