Desmoto's Arts and Crafts: Feedback

I got the page looking pretty much like the original. The only issue I’m having is getting the to appear in the same line as the

. I started out with being <p class-“desc”> and tried the inline display but nothing seems to be working?

HTML:

<header>
    <title>Desmoto's Arts and Crafts</title>
    <h1>Dasmoto's Arts and Crafts</h1>
    <link rel="stylesheet" href="./resources/CSS/index.css"/>
</header>
<Body>
    <h2 class="brushes">Brushes</h2>
    <figure>
        <img src=img here>
    </figure>
    <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.</p><span>Starting at $3.00/brush.</span>
    <h2 class="frames">Frames</h2>
    <figure>
        <img src=img here>
    </figure>
    <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.</p><span>Starting at $2.00/frame.</span>
    <h2 class="paint">Paint</h2>
        <figure>
            <img src=img here/>
        </figure>
        <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.</p><span>Starting at $5.00/tube.</span>
</Body>

CSS:

h1{
    font-family: Helvetica;
    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*a6z6pn*_ga*OTE5NTAyMjE0LjE2NTcwNDg1Njk.*_ga_3LRZM6TM9L*MTY1ODk1MzMwMi4xOC4xLjE2NTg5NTMzMTQuNDg.);
}
h2.brushes{
    background-color:mediumspringgreen;
    font-family: Helvetica;
    font-size: 32px;
    font-weight: bold;
    color: white;
}
h3{
    font-family: Helvetica;
    font-weight: bold;
}
span {
    font-family: Helvetica;
    font-weight: bold;
    color: blue;
}
h2.frames{
    background-color: lightcoral;
    font-family: Helvetica;
    font-size: 32px;
    font-weight: bold;
    color: white;
}
h2.paint{
    background-color: skyblue;
    font-family: Helvetica;
    font-size: 32px;
    font-weight: bold;
    color: white;
}
p{
    font-family: Helvetica;
}

Hi,

Try putting the span element inside the p element. In other words, move the span section to right before the closing </p> tag.

You’ve duplicated a lot of the style rules for your <h2> elements. You could simplify this by moving the font-family, font-size, font-weight, and color declarations into a single rule set, and then just have different rules for the background-color declarations.

:grimacing:

1 Like

Hey, i can see you have added title and link under header and not head. Head is for the meta-data (information about a website), i.e title, link etc but everything else that would show up on the actual page needs to go in the body element. So you need to change where it says header to say head and then take out the h1 from there as it does not belong in the mata-data section and put it and in the body section as that will then show up on the page. I hope that is clear and will fix the issue you’re having.

1 Like

Thanks so much for the response! Ah such a simple fix, it works!

To move into a single ruleset do you mean something like:

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

?

Hi there! Thanks so much for the response. Ah I got head and header confused. Thanks again!

1 Like

Yes, exactly like that :slight_smile:

You want to avoid repeating the same declarations over again, because it will be harder to make changes in a bigger project. Here’s an example of code from my CSS file for the same project:

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

.brushes h2 {
    background-color: mediumspringgreen;
}

.frames h2 {
    background-color: lightcoral;
}

.paint h2 {
    background-color: skyblue;
}

You can see that the common style declarations are all in the one h2 rule set, and then the individual section headings get their own, specific style rule for the background color. This way, if I wanted to change all the h2 font sizes, for example, I would only have to change it in one place.

Whereas in your code, you would have to change the font size property in h2.paint, h2.frames, and h2.brushes, which is three times the work!

Hope this helps. Happy coding :slight_smile:

1 Like

I guess while we’re discussing feedback… you could perhaps think about how structured your HTML is. Let’s compare your structure to mine, and see what difference this makes to position and style choices.

Here’s your code:

Here’s the same code in a more structured format:

You can see how I’ve utilised whitespace (to make it easier to read), and I’ve given each heading, image, and paragraph it’s own section, to separate them from each other. This could be a div, either.

The result is that we can now move these sections around for a more interesting and visually pleasing final look (in my opinion):

Happy coding! :slight_smile:

(Edited to make the images easier to see)

This is SO helpful! Thank you so much!!!

1 Like