Dasmoto’s Arts and Craft: Code Review

I finish my first off-platform project today and was wondering if there is anything i could do to improve it. here it comes the html and css as follow.

HTML:

Dasmoto's Arts & Crafts
<body>
    <h1>Dasmoto's Arts & Crafts</h1>
    <div class="items">
        <h2 id="brushes">Brushes</h2>
        <img src="./resources/pictures/hacksaw.jpeg"/>
        <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>Starting at $3.00 / brush</span>.</p>
    </div>

    <div class="items">
        <h2 id="frames">Frames</h2>
        <img src="./resources/pictures/frames.jpeg"/>
        <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>Starting at $2.00 / frame</span>.</p>
    </div>

    <div class="items">
        <h2 id="paint">Paint</h2>
        <img src="./resources/pictures/finnish.jpeg"/>
        <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>Starting at $5.00 / tube</span>.</p>
    </div>
</body>

CSS:

  • {
    font-weight: lighter;
    }
    h2 {
    font-weight: bold;
    }
    h1 {
    font-family: Helvetica;
    font-size: 100px;
    font-weight: bold;
    color: khaki;
    background-image: url(./pictures/pattern.jpeg);
    text-align: center;
    }
    .items {
    font-family: Helvetica;
    font-size: 32px;
    font-weight: bold;
    color: white;
    }
    #brushes {
    background-color: mediumspringgreen;
    }
    #frames {
    background-color: lightcoral;
    }
    #paint {
    background-color: skyblue;
    }
    h3 {
    font-family: Helvetica;
    font-weight: bold;
    color: black;
    }
    span {
    font-family: Helvetica;
    font-weight: bold;
    color: blue;
    }
    p {
    text-align: left;
    color: black;
    }
    img {
    position:relative;
    }

Hi, pixelfx!

I have just finished this project myself. I started doing it like you but, after writing “font-family: Helvetia” several times, I realised that the spec indicated the same font-family for everything. That is why I finally decided to write that css instruction in the body tag. I think it makes it easier to read the css (it becomes shorter), and to have it changed if needed.

I am not sure, but I think the default setting for text-align is “left” and the color, “black”. I did not specify anything and my

texts appear black and aligned to the left.

If my answer has not been clearly writen, please tell me, and I try to explain myself better. I wish for you to have a nice day!

Hello and thank you for your response. Yes, you are absolutely right, your way is much clearer and shorter. I did not pay attention. Thank’s for the review, and i am happy to review your code too, if you desire. Have a pleasant day! :slight_smile: