Off-Platform Project: Dasmoto's Arts & Crafts

Hi, i just completed the Dasmoto’s Arts and Crafts project and was wondering if someone could review my attempt at coding it. Im still not too comfortable with coding and not sure if i made any errors or not.

Dasmoto's Arts & Crafts

Dasmoto's Arts & Crafts

<section class="brushes">
<h4>Brushes</h4>
<img src="https://content.codecademy.com/courses/freelance-1/unit-2/hacksaw.jpeg" alt="Paint Brushes">
<h5>Hacksaw Brushes</h5>
<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>
</section>

<section class="frames">
    <h4>Frames</h4>
    <img src="https://content.codecademy.com/courses/freelance-1/unit-2/frames.jpeg" alt="Image frames">
    <h5>Art Frames (assorted)</h5>
    <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>
    </section>

    <section class="paint">
        <h4>Paint</h4>
        <img src="https://content.codecademy.com/courses/freelance-1/unit-2/finnish.jpeg" alt="Paint and brushes">
        <h5>Clean Finnish Paint</h5>
        <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>
    </section>
``` h1 { font-family: Helvetica; font-size: 100px; font-weight: bold; color: khaki; text-align: center; background: url('https://content.codecademy.com/courses/freelance-1/unit-2/pattern.jpeg'); background-size: cover; }

h4 {
font-family: Helvetica;
font-size: 32px;
font-weight: bold;
color: white;
}

h5 {
margin: 18.72px 0;
font-family: Helvetica;
font-size: 18.72px;
font-weight: 700;
}

p {
font-family: Helvetica;
}

p span {
font-weight: 700;
color: blue;
}

.brushes h4 {
background-color: mediumspringgreen;
}

.frames h4 {
background-color: lightcoral;
}

.paint h4 {
background-color: skyblue;
}

Hello. here is how i did mine, maybe it helps you to compare. Your one seems good to me. I just did mine today.
http:

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;
    }

Sorry for the late response. Thank you for getting back to me with your review, i greatly appreciate it. Your code looks good as well. The only thing i see is that the “http” for the images aren’t added in with the code. I wasn’t able to see the images. Aside from that it looks good.

It is all right. The “http” is not needed in this case because the path of the images is in the same folder as my project. so instead using a “http”, the path is "./pictures/pattern.jpeg. "

i just realise that instead “background-image” you use “background”. Does the pattern.jpeg still appear when you lunch your index.html in the browser? Maybe that is a misstake. i tryed it out on my file and it didnt load any image.

ok, I didn’t know the http wasn’t needed, in that case your code and project was perfect from what I saw

I didn’t realize i didn’t put “background-image”. I just checked it in browser and it still shows the image. I use the google chrome browser

That’s good to know! Thank you for the review by the way. we could keep in touch, and help each other on the way and share our codes for a review when needed.

1 Like

Hi, e_lord!

As I have just suggested pixelfx, I would recommend you to give the font-family instructions in the body tag or using an * when you want the whole page to have the same one (which is the case of this project). Just imagine that your client, after giving you the indications of what he wants, once you have everything done, decides to change the font-family used for a different one. You would have to go one by one changing them. Should you have given the instructions for the whole page, you would only have to make one amendment.

Here you have my exercise, in case the comparison helps you. The html inside the tag is:

<header>
    <h1 id="Logo">Dasmoto's Arts & Crafts</h1>
</header>
<main>
    
    <!-- First item -->

    <h2 class="Items" id="Brushes">Brushes</h2>
    <img src="./Resources/Images/hacksaw.webp">
    <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="Imp">Starting at $3.00 / brush</span>.</p>

    <!-- Second item -->

    <h2 class="Items" id="Frames">Frames</h2>
    <img src="./Resources/Images/frames.webp">
    <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="Imp">Starting at $2.00 / frame</span>.</p>

    <!-- Third item -->

    <h2 class="Items" id="Paint">Paint</h2>
    <img src="./Resources/Images/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 class="Imp">Starting at $5.00 / tube</span>.</p>
</main>

And the CSS rules:

body {
font-family: Helvetica;
}

#Logo {
background-image: url(…/Images/pattern.webp);
font-size: 100px;
font-weight: bold;
color: khaki;
text-align: center;
}

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

#Brushes{
background-color: mediumspringgreen;
}

#Frames{
background-color: lightcoral;
}

#Paint{
background-color: skyblue;
}

.Imp {
font-weight: bold;
color: blue;
}

As far as I know, it works well. If you see any mistake in the coding, please, let me know.

I wish for you to have a nice day!

Yes, let’s do that. Being able to review each other’s coding projects will definitely help

1 Like

from what I can see it works well on my end. The code looks good on the html and css front. I will take your advice also for next time when it comes to font-family. How you explained it made a lot of sense. thank you for your help and insight. It was greatly appreciated.

Hi just started this project - never thought to use the body in CSS to define the format for non heading text sections I just used the * (global) attribute - a litle risky if I was going to add text with different font familes at a later date… your solution is really good.