Another Dasmoto's Project seeking review

Hi, all! I just completed my Dasmoto’s Project and just want some opinions on it. I am in the Front-End Engineer Path and 7% through.

Big question for whomever might know the answer: why does the background image work correctly if I use the link provided by Codecademy, but if I download the image and add it to my resources folder like the other images it will not work. I spent hours trying to solve where I was going wrong and happened upon another thread where the poster commented this was the only way they could fix it. Any thoughts would be appreciated to save myself time in the future. Thanks for reading!

 <!DOCTYPE html>
<html>
    <head>
        <title>Dasmoto's Arts & Crafts</title>
        <link href="resources/index.css" type="text/css" rel="stylesheet" />
    </head>

    <body>
        <header id="title">
        <h1>Dasmoto's Arts & Crafts</h1>
        </header>
        <h2 id="brushes">Brushes</h2>
            <img src="resources\images\hacksaw.jpeg" alt="stacked 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. <b>Starting at $3.00/brush.</b></p>
        <h2 id="frames">Frames</h2>
            <img src="resources\images\frames.jpeg" alt="many colorful picture frames leaning against each other" />
            <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. <b>Starting at $2.00/frame.</b></p>
        <h2 id="paint">Paint</h2>
            <img src="resources\images\finnish.jpeg" alt="colorful tubes of paint" />
            <h3>Clean Finnish Paint</h3>
                <p>Imported paint from Finland. Over 250 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. <b>Starting at $5.00/tube.</b></p>
    </body>
</html>

body {

    font-family: Helvetica;

}

h1 {

    font-size: 100px;

    font-weight: bold;

    color: khaki;

    text-align: center;

    background-color: transparent;

}

header {

    background-image: url("https://content.codecademy.com/courses/freelance-1/unit-2/pattern.jpeg");

}

h2 {

    font-size: 32px;

    font-weight: bold;

    color: white;

}

#brushes {

    background-color: mediumspringgreen;

}

#frames {

    background-color: lightcoral;

}

#paint {

    background-color: skyblue;

}

b {

    color: blue;

}

Also, I do not know why my CSS sheet posted as double-spaced. It is not in Visual Studio.

1 Like

Hi,

I think if you remove the header and add the background image to h1 it should work.
I used a local file path for all the images as well and they worked just fine but i didn’t use a header.

Regarding the CSS file in your code editor it shows normal and when you posted it at Codecademy was double-spaced? In the code editor you have the choice to make your code look prettier, at least with Visual Studio Code you can. If that’s the case you can fix the code and post it again.

Thank you again for your feedback on the same project! I hope my feedback to help you as well.

Thank you for your thoughts!

As to the CSS double spacing, it was fine in my code editor, it just copied into codecademy that way. Very weird.

I think I originally had my background image the way you have yours but couldn’t get it to work. Believe me, I had to walk away from this project more than once! I will try your suggestions again and hope it works this time because yours makes much more sense.

Thank you!