Well... Dasmoto's Arts & Crafts Review too haha

any feedback negative or positive or any tips on how i can make the code better is welcome :grinning:

html:

<!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 & Craftsument</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <header>
      <h1>Dasmoto's Arts & Crafts</h1>
    </header>
    <main>
      <section>
        <h2>Brushes</h2>
        <img src="/hacksaw.webp" alt="hacksaw 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.
          <strong>Starting at $3.00 / brush.</strong>
        </p>
      </section>

      <section>
        <h2 class="Frames">Frames</h2>
        <img src="/frames.webp" alt="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.
          <strong>Starting at $2.00 / frame.</strong>
        </p>
      </section>

      <section>
        <h2 class="paint">paint</h2>
        <img src="/finnish.jpeg" alt="finnish paint on the floor" />
        <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.
          <strong>Starting at $5.00 / tube.</strong>
        </p>
      </section>
    </main>
  </body>
</html>

css:

h1{
    font-size: 100px;
    font-weight: bold;
    color: khaki;
    text-align: center;
    margin: 67px 0;
    padding-top: 0px;
    top: 0px;
    display: block;
    background-image: url(\pattern.webp);
    top: 80px;
}
h2{
    font-size: 32px;
    font-weight: bold;
    color: white;
    background-color: mediumspringgreen;
}

strong{
    color: blue;
}

body{
    font-family: Helvetica;
}

.Frames{
   background-color: lightcoral;
}

.paint{
    background-color: skyblue;
}

Hi, there!

This looks really good. The only thing I would suggest keeping in mind (which you will become more familiar with as you come into your own) is to form a similar pattern with naming conventions (classes). You only used two classes in this project—which is not a problem—but I noticed one was capitalized and the other was not.

As projects get larger and more classes are used, I have found it much easier to remember classes and maintain styling when a pattern is being followed. Does that make sense?

yeah so you are basically if i understand correct you saying to either write the classes only with capital letters or without capitals at all or anyway follow a pattern in the writing i get it …
thnx for your feedback :slight_smile:

1 Like

This code seems to be perfectly functional. I especially appreciate the usage of the “alt” attribute for the img elements. However, like Kira, I would strongly suggest adopting a consistent naming convention for classes. It will greatly help you on your coding journey.

1 Like