Code Review Dasmoto

Get Help CSS
#1

Hello everyone,

I just completed the Dasmoto’s project and would like to ask you for feedback. I don’t know if the way I structured the CSS rulesets is the best way possible. I’d be glad if you could give me some tips.

Link to the project on Codeacademy

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="./resources/css/index.css">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dasmoto's</title>
</head>

<body>
  <!-- Header section -->

  <header class="bold">
    <h1>
      Dasmoto's Arts and Crafts
    </h1>
  </header>
  <!-- End header section -->
  <main>
    <div class="brushes">
      <h2 class="bold">Brushes</h2>
      <img src="resources\images\image2.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="bold">Starting at $3.00 / brush.<span>
      </p>
    </div>

    <div class="frames">
      <h2>Frames</h2>
      <img src="resources\images\image2.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="bold"> Starting at $2.00 / frame.<span></span></p>
    </div>

    <div class="paint">
      <h2>Paint</h2>
      <img src="resources\images\image2.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="bold"> Starting at $5.00 / tube.</span></p>
    </div>
  </main>
</body>

</html>

CSS

* {
    font-family: Helvetica;
}

header {
    position: relative;
    text-align: center;
    color: white;
}

header h1 {
    background-image: url(https://content.codecademy.com/courses/freelance-1/unit-2/pattern.jpeg);
    text-align: center;
    font-size: 100px;
    color: Khaki;
}

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

span {
    color: blue;
    display: inline;
}

.brushes h2 {
    background-color: mediumspringgreen;
}

.bold {
    font-weight: bold;
}

.frames h2 {
    background-color: lightcoral;
}

.paint h2 {
    background-color: skyblue;
}

Thank you so much for your time!

#2

Overall, you did a good job, with both your HTML and CSS.

In your CSS file, the header ruleset actually does nothing to the html rendering in the browser (I viewed it in chrome). You also could have written an h1 ruleset instead of a header h1 ruleset.

Note that you used the same src for all of your image tags, meaning that the same image of the brushes showed up in each area where you had an img tag. If you change the frames img src to image3.jpeg and the paint img src to image4.jpeg, all will render fine. I must also note that in your img src values, you use a backward slash, instead of a forward slash. Although this did not prevent the images from loading, for the sake of convention, you should use forward slashes. Also, your img src’s do not have “./” before resources. Small details, yes, but important.

Once again, overall, you did a good job. There are different CSS rules that could be written for this project, I’m sure, but your CSS is effective.

And welcome to the community.

#3

Thank you so much for this review, it really helps me! Cheers :smiley:

1 Like
#4

Span is already an inline element in HTML, so this line is probably redundant. Apart from that, I agree, your code is neat and clear. Well done :slight_smile:

1 Like