Dasmoto's Arts & Crafts - Feedback (Full-stack engineer path)

Hi all!

Would it be possible to get some feedback on the below code I wrote to complete the Dasmoto Arts & Crafts project in the full-stack engineer path? Felt a bit lost at points so just want to check I haven’t done anything in a bit of a backward way!

I had difficulties getting links to the images to work until I started the path with “…/” after seeing this in an example on a cheatsheet. Can anyone explain how this fixed the issue? The images were saved in a Resources folder along with the folder containing the CSS file.

Any feedback is appreciated. Thank you in advance!

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Dasmoto's Arts & Crafts</title>
    <link href="./resources/css/index.css" type="text/CSS" rel="stylesheet">
</head>
<body>
<h1>Dasmoto's Arts & Crafts</h1>
  <h2 id="brushes">Brushes</h2>
    <img src="../Dasmoto/Resources/hacksaw.jpeg" alt="brushes"/>
    <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. <span class="price">Starting at $3.00 / brush.</span></p>
  <h2 id="frames">Frames</h2>
  <img src="../Dasmoto/Resources/frames.jpeg" alt="brushes"/>
    <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 class="price">Starting at $2.00 / frame.</span></p>
<h2 id="paint">Paint</h2>
  <img src="../Dasmoto/Resources/finnish.jpeg" alt="brushes"/>
  <h3>Clean Finnish Paint</h3>
    <p>Imported paint from Finland. Over 256 colors available in store, varying in quantity (1 oz. to 80z.). Clean Finnish paint microbinds to canvas, increasing the finish and longevity of any artwork. <span class="price">Starting at $5.00 / tube.</span></p>
</body>
</html>

CSS:

h1 {
    text-align: center;
    font-weight: bold;
    font-family: Helvetica;
    font-size: 100px;
    color: khaki;
    background-image: url("../pattern.jpeg");
}

h2 {
    font-family: Helvetica;
    font-size: 32px;
    font-weight: bold;
    color: white;
    text-align: left;
}

h3 {
    font-family: Helvetica;
    color: black;
    font-size: 18px;
    font-weight: bold;
    text-align: left;
}

p {
    font-family: Helvetica;
    color: black;
    text-align: left;

}

#brushes{
    background-color: mediumspringgreen;
}

#frames{
    background-color: lightcoral;
}

#paint{
    background-color: skyblue;
}

.price{
    font-family: Helvetica;
    font-weight: bold;
    color: blue; 
}
2 Likes

To me your code looks alright :slight_smile:
I would have maybe used semantic html tags to make your code more structured and accessible (header, section, article…). Like this:

<header>
  <h1>Dasmoto's Arts & Crafts</h1>
</header>
<section>
  <h2 id="brushes">Brushes</h2>
  <img src="../Dasmoto/Resources/hacksaw.jpeg" alt="brushes"/>
  <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. <span class="price">Starting at $3.00 / brush.</span></p>
</section>
 

Regarding your issue with the images - i don’t exactly know how your folder structure looks, so maybe you can post a picture of it, so i can tell you why which path to the file works?

But generally "…/ " indicates that you leave your current folder one folder back up in your folder tree.

so to enter a folder i have to write “foldername/” to exit a folder i write “…/”

I hope i could help you :wink:

PS: to the codecademy team - would be nice if also new paying members could embed more than one image in a comment :wink:

1 Like

Thanks @jelsicj - really appreciate you taking the time to check over the above. I’ll add the semantic tags as per your suggestion :slight_smile:

I managed to work out the path issue in the end - I realised it’s the same principle taught in the Command Line lesson :sweat_smile: so you’re completely right!

Thanks again for taking the time to help a newbie coder!

Amazing hint. Completely forgot about it. Thank you!

Thank you for sharing. Good work. Sometimes paths are difficult. But you figured it out in the end.

1 Like

Hi @nataliemartin1158157

maybe you can help me as well with my “Dasmoto”-page.

How did you get the .jpeg-images there? I tried to download them directly but ended up just having .webp-files. Those could be linked but won’t display the picture eventually in the browser… :frowning:

You did not seem to have problems there. Did you use another browser? I use chrome… :slight_smile:

Would be very thankful for your feedback!

Hi @arc9098845005 !

Just started and at the same point. I downloaded the images and got them just fine in .jpeg format while also using Chrome. Also as .webp is a format by Google if you’re using Chrome they should show up on your page as far as I know. Could there be an error in your file path maybe?

If you want to change the .webp files to .jpeg there are many online converters if you just Google “webp to jpeg”. There may be better ways to do it but that is what I came up with :slight_smile:

Hope you get your images working!

@web8072265148

Thank’s a lot! Hmm… strange, from what I remember I just got an empty line where the .webp-images should actually show up. But maybe I did a mistake there. I’ll try it again.

Instead I used the online-version / URL of those pictures, but felt a little bit like cheating you know? :stuck_out_tongue_winking_eye:

I was using Chrome too I’m afraid :frowning: From what I remember they opened in a new tab and I just right clicked and saved the file from there I think? I think it’s completely valid to use the URL too though! :slight_smile:

Hello!

Can I get some feedback on the following code?

I revised it with the solution from Code academy and it differs a bit, however I got the same results. I wonder if there are some upsides or downsides on how my code is written

Thanks a lot :smiley:

HTML:

Dasmoto's Arts & Crafts

Dasmoto's Arts & Crafts

    </div>
    <div>
        <h2 class="Brushes">Brushes</h2>
        <img src="/Users/lizbeth.reyes/Desktop/Web Development/Projects/Code Academy Projects/Dasmotos Arts & Crafts/Images/hacksaw.jpeg">
        <h3 class="Title">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>
        <p class="price">Starting at €3.00/brush</p>
    </div>
    <div>
        <h2 class="Frames">Frames</h2>
        <img src="/Users/lizbeth.reyes/Desktop/Web Development/Projects/Code Academy Projects/Dasmotos Arts & Crafts/Images/frames.jpeg">
        <h3 class="Title">Art Frames (assorted)</h3>
        <p> Assorted frames made of different material, including MDF brichwood,and PDE. Select frames can be sanded and painted according to your needs</p>
        <p class="price">Starting at €2.00/frame</p>
    </div>
    <div>
        <h2 class="Paint"> Paint</h2>
        <img src="/Users/lizbeth.reyes/Desktop/Web Development/Projects/Code Academy Projects/Dasmotos Arts & Crafts/Images/finnish.jpeg">
        <h3 class="Title">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>
        <p class="price">Starting at €5.00/tube</p>
    </div>
   
</body>    

CSS:

#Website_Banner{
font-size: 100px;
font-family:Helvetica;
font-weight: bold;
color: khaki;
text-align: center;
background-image: url("/Users/lizbeth.reyes/Desktop/Web Development/Projects/Code Academy Projects/Dasmotos Arts & Crafts/Images/pattern.jpeg");
}
.Brushes{
font-size: 32px;
font-weight:bold;
color: white;
font-family: Helvetica;
background-color: mediumspringgreen;
}
.Frames{
font-size: 32px;
font-weight:bold;
color: white;
font-family: Helvetica;
background-color: lightcoral;
}
.Paint{
font-size: 32px;
font-weight:bold;
color: white;
font-family: Helvetica;
background-color: skyblue;
}
.price{
font-family:Helvetica;
font-weight:bold;
color:blue;

}
.Title{
font-size: 20px;
font-weight:bold;
color:black;
font-family:Helvetica;
}
p{
font-family:Helvetica;

}

background-image: url("../pattern.jpeg");

I used this for the h1 heading to get the background of the title a picture but It doesn’t work I tried many times but no result. anybody knows what’s the problem I will share the html and css down below.

Where is the image stored relative to your HTML and CSS files? Are you able to show your file structure - maybe that’s the problem?

Looks great! :partying_face: It might be an idea to apply some of the styles to heading elements where possible instead of classes due to specifity and so you can reduce the code in your CSS file (it’ll save you writing out the font-size, color, etc multiple times)?

I am having the same issue with the pattern image not working.

Were you able to figure this out? I’m having the same issue with the pattern jpeg.

Hello! Do you have the file stored locally or are you using a URL?

Hi all,

Trying to get into the habit of sharing my workings and asking for feedback/ learning from others on here. Apologies if I’m posting in the wrong place!

Here is a linke to my Dasmoto’s Page code on GitHub:

Any interactions welcome ha!

Cheers,
Charlie

Hello,

I also think your code looks good. :smile:

Warm regards always,
nicolet301