Dasmoto's Arts & Crafts - code review please

Hello everyone i have just finished the Dasmoto’s Arts & Crafts project and seeking a review of my code, i am currently 7% of the way through the front end career path.

I chose to encapsulate the information in each section element within article elements so any future additions within that section would be a new article, a new brush type for example.

thanks for taking the time

<!DOCTYPE html>
<html lang="en">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Dasmoto's Arts & Crafts</title>
        <link href="./resources/css/index.css" type="text/css" rel="stylesheet">

        <!-- header -->
            <h1>Dasmoto's Arts & Crafts</h1>
            <!-- Brushes sections -->
            <section id="brushes">
                    <img src="./resources/images/hacksaw.webp" alt="wooden handled 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="pricing">Strating at $3.00 / brush</span></p>

            <!-- Frames section -->
            <section id="frames">
                    <img src="resources/images/frames.webp" alt="frames of various sizes and colours">
                    <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="pricing">Starting at $2.00 / frame.</span></p>

            <!-- Paint section -->
            <section id="paint">
                    <img src="resources/images/finnish.jpeg" alt="tubes of paint">
                    <h3>Clean Finish 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>
/* global*/

    * {

        font-family: Helvetica


    h2 {

        font-size: 32px;

        font-weight: bold;

        color: white;


    .pricing {

        color: blue;

        font-weight: bold;



    header {

        background-image: url('../images/pattern.webp');


    header h1 {

        font-family: Helvetica;

        font-size: 100px;

        font-weight: bold;

        color: khaki;

        text-align: center;


/*main - brushes*/

    #brushes h2 {

        background-color: mediumspringgreen;


/*main - frames*/

    #frames h2 {

        background-color: lightcoral;


/*main - paint*/

    #paint h2 {

        background-color: skyblue;


Hey bud, I’m 8% through the course and have just gotten to the point where they recommend code review. It almost feels premature to actually try to give helpful feedback, it kind of feels like toddlers teaching each other how to walk, but I guess it’s mostly for the practice right?
I like that you decided to chunk it in articles, I think that’s smart. Using comments to label the sections of your code is nice too. One thing I’d suggest would be wrapping your images in <figure so it would be easier for handicapped users that are using screen readers. Also by using <figure, you could wrap the captions in <figcaption which would let the computer know that the text relates to the picture, instead of having a paragraph element that only relates by placement if that makes sense.
And then lastly, your first <p element is out of line with the rest of the way you’ve formatted them, but that really doesn’t matter other than optics. Again, I barely know what I’m talking about yet, lol. Other than those tiny things I think it looks great!

Thank you for the reply,

I will space the ‘p’ element correctly, cant believe i missed that haha, thanks for pointing out the ‘figure’ & ‘figcaption’ approach, i read it as an item description rather then a description of the image but i think i have miss understood ‘figure’ & ‘figcation’ elements, i need to read more into that.

I know what you mean i am not really sure what i am talking about either, good to get into the habit i suppose, i feel like i am trying to speak another language when i only understand a few words.

thanks for taking the time to look over my code, happy to return the favour if needed.

Hello there,

I’m currently 15% on this path but with some dev experiences,
Your code seems pretty neat
Totally agree with Samantha’s points
I would add that if you define a font-family for all elements (like you did with the * selector) you don’t have to repeat this property in “header h1”,
and my advice is that you can take the habit of adding a fallback font when using the font-family property (eg. font-family: Helvetica, sans-serif;) it’s a good practice :slight_smile:

Keep going !

(sorry if my english isn’t that good, i’m just a french guy :slight_smile: )

Thanks for the advice i will start implementing a fallback font in my code and make sure i am not implementing the same rules twice.

no need for apologies nothing wrong with your english.