Code Review: Dasmoto's Arts & Crafts

Hi all, I just finished the Dasmoto’s Arts & Crafts project and am seeking a code review, I am 7% of the way through the course.

I’m still trying to figure out how to best use section and article tags for a normal webpage structure. Any advice on the implementation for these tags is greatly appreciated as well as any other advice.

Lastly and most importantly I am happy to return the favor and perform code reviews for anyone. Thanks!

<!DOCTYPE html>
<html lang="en">
  <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/styles.css">
    <h1 id="main-banner">Dasmoto's Arts & Crafts</h1>
    <article id="art-supplies">
      <section id="brushes">
        <img src="./resources/images/paintbrushes.webp" alt="hacksaw brushes">
        <h3>Hacksaw Brushes</h3>
        <p>Made of the highest quality oak, Hacksaw brushses are known for their weight and ability to hold paint in large amounts. Available in different sizes. <span class="pricing">Starting at $3.00 / brush</span>.</p>
      <section id="frames">
        <img src="./resources/images/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 painted according to your needs. <span class="pricing">Starting at $2.00 / frame</span>.</p>
      <section id="paint">
        <img src="./resources/images/paint.jpeg" alt="paint supplies">
        <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="pricing">Starting at $5.00 / tube</span>.</p>
#main-banner, #art-supplies, .pricing {
  font-family: Helvetica, Arial;

/* Banner setup */

#main-banner {
  font-size: 100px;
  font-weight: bold;
  color: khaki;
  text-align: center;
  background-image: url('');

/* Section header setup */

#art-supplies h2 {
  font-size: 32px;
  font-weight: bold;
  color: white;

#brushes h2 {
  background-color: mediumspringgreen;

#frames h2 {
  background-color: lightcoral;

#paint h2 {
  background-color: skyblue;

/* Pricing text styling */ 

.pricing {
  font-weight: bold;
  color: blue;

Greetings coder,

This is my first time doing a code review. I wish I could give you the credible feedback that your code deserves, but I will say what I came to say and hope it helps you somehow.

I think that your html code has a very readable format, and you seem to make clever use of the section tags. I think your CSS code all used very specific selectors that makes it very easy to see what the code is doing. I copied your CSS code into VS studio and noticed that there was a small error on the last line caused by the ``` symbols. But, your code was still able to run well, and the page loaded quickly. Overall I think you have done a nice job here. Best wishes.

Thanks Austin,

I really appreciate the code review. Thanks for pointing out the error on the last line (non sure how I did that :grinning:).

Let me know if you are needing any code reviews as well. I’m glad to help!

1 Like

Nice work!

Main thing I would add is maybe comments and spacing for the html.

I would also take out <article> because it’s doing the same thing as <main>.



    <!-- Section 1 description -->  
      Section 1 stuff

    <!-- Section 2 description -->
      Section 2 stuff


All just personal preference though :slight_smile:

Thanks so much for the feedback!

I really like the spacing idea, it really helps to distinguish the different sections.

Let me know if you ever need a code review on one of your projects!