Dasmoto's arts project code review

Projects Skill Path Projects
1

Hello,

This is my first attempt at the Despot’s arts project on the Front-end Developer careers path, as well as my first post on this forum!

https://www.codecademy.com/journeys/front-end-engineer/paths/fecj-22-web-development-foundations/tracks/fecj-22-developing-websites-locally/modules/wdcp-22-developing-with-css-fed6b6e3-8e8d-4dbb-86db-cbe1d1827233/projects/dasmoto

Any feedback you can provide will be appreciated.

HTML:-

<!DOCTYPE html>
<html>
<head>
  <title>Dasmoto's arts and crafts</title>
  <link href="./styles.css" type="text/css" rel="stylesheet">
</head>
<body>
    <h1>Dasmoto's Arts & Crafts</h1>
    <h2 class="brushes">Brushes</h2>
        <img src="photos/hacksaw.jpeg" alt="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>Starting at $3.00 / brush.</span></p>
    <h2 class="frames">Frames</h2>
        <img src="photos/frames.jpeg" alt="Frames">
        <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>
    <h2 class="paint">Paint</h2>
        <img src="photos/finnish.jpeg" alt="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>Starting at $5.00 / tube.</span></p>
</body>
</html>

CSS:-

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: helvetica;
    margin: 50px 10px;
}

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

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

p {
    margin-bottom: 20px;
}

span {
    font-weight: bold;
    color: blue;
}

img {
    margin-bottom: 20px;
}

.brushes {
    background-color: mediumspringgreen;
}

.frames {
    background-color: lightcoral;
}

.paint {
    background-color: skyblue;
}

Thank you for your help and I am looking forward to continuing my coding journey.

Alasdair

2

@alasdairmckay you’ve done a great job!

I’d suggest organizing the content into sections for improved clarity, if you are indenting you probably want to group the contents. For instance:

<article>
    <header>
        <h1>Dasmoto's Arts & Crafts</h1>
    </header>
    
    <section class="product">
        <h2 class="brushes">Brushes</h2>
        <img src="photos/hacksaw.jpeg" alt="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. They are available in different sizes.
              <span>Starting at $3.00 per brush.</span>
        </p>
    </section>
</article>

You can also perhaps create another container inside with the h3 and p.

It’s worth noting that you might not need to reset the margin and padding, as the specifications might already use default values.

Additionally, since h1, h2, and h3 are already set to bold by default, it’s not necessary to redefine their style. Keep up the good work!

3

@paulinhaabro Thank you so much for your advice.

Thanks for the tip about grouping the content into sections. With the indenting error I was thinking that, for example, the p element was a child of the h3 element above, but I can see now that I was wrong and they should be indented the same as they are siblings.

I reset the margin and padding more to try it out and see the difference as I had just done the lesson where it was explained, and I appreciate the reminder that h1, h2 etc are bold by default.

Thanks again for your help.
Alasdair

1 Like
4

NP. I thought that you did the Margin and Padding as a practice and if I was to do like I wanted I would reset it too.