Dasmoto's Arts & Crafts: Project Code Feedback

Hi, I am just starting the full-stack engineer course. I am at 6%. Below is my html and css code for the Dasmoto’s Arts & Crafts project. I would love any feedback. Thank you!

html code:

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

<body>
    <header>
        <h1>Dasmoto's Arts & Crafts</h1>
    </header>

    <section>
        <article>
            <h2 class="brushes">Brushes</h2>
            <img class="article" src="./resources/image2.webp" alt="Paint 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>
        </article>

        <article>
            <h2 class="frames">Frames</h2>
            <img class="article" src="./resources/image3.webp" alt="Art Frames">
            <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>    
        </article>

        <article>
            <h2 class="paint">Paint</h2>
            <img class="article" src="./resources/image4.jpeg" alt="Paint">
            <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>        
        </article>
    </section>
</body>
</html>

css code:

body {
    font-family: Helvetica;
    background-color: #FFF;
    margin: 0 auto;
  }

  h1{
      font-size: 100px;
      font-weight: bold;
      color: khaki;
      text-align: center;
      background-image: url('../image1.webp');
  }

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

  .brushes {
      background-color: mediumspringgreen;
  }

  .frames {
    background-color: lightcoral;
  }

  .paint {
        background-color: skyblue;
  }

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

I’ve just done the same project as you, so don’t expect any expert feedback - a few things i’ve done differently,

  • Since alot of the text is written in bold, i made a bold class instead of hardcoding it to your other classes (h1, h2, etc.).
  • Since brushes/frame/paint is only really use in one specific place, i made them as ID’s instead of classes.
  • Span is an inline element, whcih means that you can omit the display = inline attribute in your css code.

Hopefully everything i’ve written made sense, and thanks for sharing your nice work - it gave me alot of good ideas!

Thank you! These are great ideas, and I really appreciate it. Good luck with your upcoming projects on the course.

I have just completed this project and was curious how others coded it. The above coder has some great points, and I’d also like to add another point:

I would suggest using a div tag as opposed to an article tag, as the content within these tags are not semantically related. You should only use an article tag if the content is semantically related AND self-contained. Meaning that the contents within an article should be able to be isolated from the rest of the page and still be meaningful. Use this page for reference: Sectioning Content in HTML5 - div or section or article?

I also added a footer at the bottom of my page with my name and a copyright © symbol, and also added some styling just for a bit of practice but this is of course optional.

Other than that, well done and I hope you enjoy the rest of the course! :call_me_hand:

Hi Codythecoder99, this is great! Thanks for page reference. That helps clear up the usage of those three terms a bit more for me. I appreciate the feedback, and enjoy the rest of the course as well!