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
#4

Hi I have also started the Dasmoto project and have been having a hard time with the image and centering the title. Thank you very much I took a look at the solutions and it actually worked.

Still very unsure of my skills, would you be able to review the code and maybe give some feedback on how to clean up my code and get better at it.?
Thanks

HTML:

Dasmoto's Arts & Crafts

Dasmato's Arts & Crafts

Brushes

<img src="/Users/anthonyalvarado/Desktop/Codecademy/Damostos_Art-rev1/resources/images/hacksaw.jpeg">

<h3>Hacksaw Brushes</h3>

<p>Made of the highes quality oak, Hasksaw brucshes are knoen for thiet weight and abilibnt ti hild paint in large amounts. Availiable in different sizes. <span>Starting at &dollar;3.00 / brush.</span></p>

Frames

<img src="/Users/anthonyalvarado/Desktop/Codecademy/Damostos_Art-rev1/resources/images/frames.jpeg">

<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>Starting at &dollar;2.00 / frame.</span></p>

Paint

<img src="/Users/anthonyalvarado/Desktop/Codecademy/Damostos_Art-rev1/resources/images/finnish.jpeg">

<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>Starting at &dollar;5.00 / tube.</span></p>

CSS:

header {
box-sizing: border-box;
background-image: url(/Users/anthonyalvarado/Desktop/Codecademy/Damostos_Art-rev1/resources/images/pattern.jpeg);
text-align: center;
font-family: Helvetica;
font-size: 100px;
font-weight: bold;
color: khaki;
}

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

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

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

.frames {
background-color: lightcoral;
font-family: Helvectica;
font-size: 32px;
font-weight: bold;
color: white;
}

.paints {
background-color: skyblue;
font-family: Helvectica;
font-size: 32px;
font-weight: bold;
color: white;
}