Dasmoto's Arts & Crafts Project - Feeback Please!

Hello,

This is the first HTML/CSS project i completed off Codecademy. Any feedback welcome and much appreciated!

Currently i am at 16% of Full-Stack Engineer Career Path and still have a lot to learn!

Here is my code for Dasmoto’s Arts & Crafts Project:

HTML Code

<!DOCTYPE html>
<html>
  <head>
    <title>Dasmoto's Arts & Crafts</title>
    <link href="style.css" type="text/css" rel="stylesheet" />
  </head>
  <body>
    <h1>Dasmoto's Arts & Crafts</h1>
    <h2 style="background-color: mediumspringgreen;">Brushes</h2>
    <img src="Dasmoto Project Images/hacksaw.webp" />
    <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 style="background-color: lightcoral;">Frames</h2>
    <img src="Dasmoto Project Images/frames.webp" />
    <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 style="background-color: skyblue;">Paint</h2>
    <img src="Dasmoto Project 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 class="price"> Starting at $5.00 /
      tube.</span></p>
    </p>
  </body>
</html>

CSS Code

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

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

p span.price {
  font-family: Helvetica;
  font-weight: bold;
  color: blue;
}

Hi! I just finished my own Dasmoto project so my thoughts sound like they’re about as educated as yours but I’ll give it a whirl.

My first thought, why do you have a CSS sheet and inline style editing? It isn’t much but the background colors for the h2 elements could be done in CSS and clean up the html just a bit. And I may be wrong and this is more efficient, I don’t know. Like I said, it’s just a thought.

Second, are your images appearing when you load your file to a browser? Spaces in the file path name seem unusual but without your full folder it doesn’t load correctly for me.

You can shorten your CSS element “p span.price {…}” to just “.price {}”. The assigned class means you don’t have to have everything in front of it.

Again, I just finished my project so my opinion may only be worth a grain of salt, but good job!

2 Likes

Hi,

Thank you very much for your feedback!

Regarding your questions to my code i used inline style because i couldn’t remember how to do it with CSS and i thought that was a way to do it as well. I guess this way is rarely used now because of the CSS.

My images appearing to the browser because i used an external file path as a source for the images and you don’t have access to that path.

Thank you for letting me know that i can shorten the CSS element when i use a class selector.

I followed your advice you gave me and i corrected my code.

Here is my updated code:

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Dasmoto's Arts & Crafts</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <h1>Dasmoto's Arts & Crafts</h1>
    <h2 id="brushes">Brushes</h2>
    <img
      src="https://content.codecademy.com/courses/freelance-1/unit-2/hacksaw.jpeg"
    />
    <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="https://content.codecademy.com/courses/freelance-1/unit-2/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 class="price"> Starting at $2.00 / frame.</span>
    </p>
    <h2 id="paint">Paint</h2>
    <img
      src="https://content.codecademy.com/courses/freelance-1/unit-2/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 class="price"> Starting at $5.00 / tube.</span>
    </p>
  </body>
</html>

CSS

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

h1 {
  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");
}

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

#brushes {
  background-color: mediumspringgreen;
}

#frames {
  background-color: lightcoral;
}

#paint {
  background-color: skyblue;
}

.price {
  font-weight: bold;
  color: blue;
}

I used the links from codecademy for the images this time. :smiley:

1 Like