Dasmoto's Arts & Crafts Code Review

Hi there,

Would someone be able to look over my HTML and CSS code for the “Dasmoto’s Arts & Crafts” project? The website looks exactly like it should, but if someone could provide feed back on:

in the CSS, does the h1,h2,h3,p selector make sense, or should I just use * instead

are the alt values on the images descriptive

and does the usage of the span make sense, or should it be an em since that text is essentially emphasized

Thank you for any feedback you can provide!

<!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">
        <link rel="stylesheet" href="./Resources/Css/index.css">
        <title>Dasmoto's Arts & Crafts</title>
    </head>
    <body>
        <header>
            <h1>Dasmoto's Arts & Crafts</h1>
        </header>
        <main>
            <section>
                <h2 id="brushes">Brushes</h2>
                <img src="./Resources/Images/hacksaw.jpeg" alt="an assortment of 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.  <span class="starting-price">Starting at $3.00/brush.</span></p>
            </section>
            <section>
                <h2 id="frames">Frames</h2>
                <img src="./Resources/Images/frames.jpeg" alt="a variety of colourful picture frames">
                <h3>Art Frames (assorted)</h3>
                <p>Assorted frames made of different materials, including MDF, birchwood, and PDE.  Select frames can be sanded according to your needs.  <span class="starting-price">Starting at $2.00/frame.</span></p>
            </section>
            <section>
                <h2 id="paint">Paint</h2>
                <img src="./Resources/Images/finnish.jpeg" alt="open tubes of 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="starting-price">Starting at $5.00/tube.</span></p>
            </section>
        </main>
    </body>
</html>
h1,
h2,
h3,
p {
    font-family: helvetica, sans-serif;
}

h1 {
    font-size: 100px;
    font-weight: bold;
    color: khaki;
    text-align: center;
    background-color: darkcyan;
    background-image: url("../Images/pattern.jpeg");
}

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

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

#brushes {
    background-color: mediumspringgreen;
}

#frames {
    background-color: lightcoral;
}

#paint {
    background-color: skyblue;
}

Your code is well organized and clean. Good use of HTML with alt tags for images. I think it looks great. Good job!

1 Like

One habit I would recommend to get away from immediately is using capitalized folder names. Best to follow the convention and only use lowercase in all your resource and folder names so that the URL is always lowercase.

./resources/
./resources/css/
./resources/images/
../images/

The sooner the good habit is formed, the less it can come back to bite you in the future.

I like that you used a CSS background for the pattern.jpg image since it is skin, and not an image we need indexed or explained (with alt). Nice, succinct alternate text, too. For brevity, we can leave off articles such as an or a. This cuts down on the verbosity of screen readers.

2 Likes

Thank you very much for the taking the time to look over my markup and leaving feedback!

1 Like

Hi there! Nice looking code. I suppose I have a question and a comment.

Question: Would you mind telling me why you chose to include http-equiv=“X-UA-Compatible” and content=“IE=edge” in the meta? From my research, it looks like it’s unnecessary.

Comment: My understanding is that if you can define a webpage’s outline with headings, then section elements should only be used when you need a div container (and div isn’t necessary). Since section elements aren’t needed for styling and whatnot, I believe you should forego using it here.

1 Like

Good question haha.

The meta tag was just added in automatically by Visual Studio Code, so I’m not even sure what it means at my beginner stage.

I used the Section tags solely because, in my mind, those three groupings were semantic sections. Also I did so because of the switching from h2 to h3 then back to h2 that is happening made it seem like there should be some markup to explain why that is happening, and I felt Sections were the best explanation.

Thank you for taking the time to look over the markup and for the feedback!

1 Like

Fair enough. I am also a beginner. I use sublime text though, so that meta data isn’t inserted automatically and I looked it up.

Makes sense! I suppose I went about the project differently. Instead of H3 elements I used figcaption. In my mind that text was relevant to the photo. Then I stylized it accordingly to meet the project spec.

  <main>
    <h2 class="color-green">Brushes</h2>
      <figure>
        <img src="./resources/images/hacksaw.jpeg" alt="Pile of Hacksaw brushes">
        <figcaption>Hacksaw Brushes</figcaption>
      </figure>
      <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="starting-price">Starting at $3.00 / brush.</span></p>
figcaption {
  font-weight: bold;
  padding-top: 15px;
  font-size: 18px;
}
1 Like

Good idea on using the figure and figcaption options!

Yeah then if you only used h2 level headings (and weren’t bouncing back-and-forth) then semantically it wouldn’t be necessary to group into sections.

1 Like

That particular usage is a bit of overkill unless you include the paragraph within the figure.

<figcaption>
  <h3>Hacksaw Brushes</h3>
  <p>Made of ...</p>
</figcaption>

Pretty sure this was explained a while back as a way to help indexing engines identify what goes with what.

1 Like