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.

1 Like

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!

I have the same problem. I looking for a solution and not find. If you discover please share with me. cheers

did not work, I have the same problem and try too. I try put background image in all others tags and nothing. try use one dot, two dots, slash, quotes. But just work if the url is online. I use the vs code.

Hi, if you could post your code i might be able to help you. Thank you.

It took me absolutely forever to figure out how to get a background image attached using Visual Studios. Codecademy makes it look so easy! Try using the formula in this picture I have attached. But also with VS I have learned that if you type in “background-image: url(…/)” (there is only supposed to be 2 dots before the slash but there seems to be 3 rendering for some reason) then a little box pops up and you can select through to the correct file.

background-image

Side note: the above formula works assuming your file tree looks like this:

Project Folder
–index.html
–resources folder
–styles.css
–images folder
–image.jpg
–image2.jpg

Hope this helps you!

1 Like

Good answer! Glad that you managed to sort it out. :sunglasses:

1 Like