Feedback for Dasmoto's Arts and Crafts

Projects
1

Just finished this project. Any feedback would be greatly appreciated.
Thanks in advance!

HTML file:

<!DOCTYPE html>
<htm lang="en">
    <head>
        <title>Dasmoto's Arts and Crafts</title>
        <link href='./style.css' rel="stylesheet">
    </head>
    <body>
        <header>
            <h1>Dasmoto's Arts & Crafts</h1>
        </header>
        <main>
            <section>
                <h2 class='product-type mediumspringgreen'>Brushes</h2>
                <img src="https://content.codecademy.com/courses/freelance-1/unit-2/hacksaw.jpeg" alt="some painting 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='blue'>Starting at $3.00 / brush.</span></p>
            </section>
            <section>
                <h2 class='product-type lightcoral'>Frames</h2>
                <img src="https://content.codecademy.com/courses/freelance-1/unit-2/frames.jpeg" alt="painting 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 class='blue'>Starting at $2.00 / frame.</span></p>
            </section>
            <section>
                <h2 class='product-type skyblue'>Paint</h2>
                <img src="https://content.codecademy.com/courses/freelance-1/unit-2/finnish.jpeg" alt="some paint bottles">
                <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='blue'>Starting at $5.00 / tube.</span></p>
            </section>
        </main>
    </body>    
</html>

CSS file:

* {
    font-family: Helvetica;
}

h1, h2, h3, .blue {
    font-weight: bold;
}

h1 {
    text-align: center;
    font-size: 100px;
    color: khaki;
    background-image: url(https://content.codecademy.com/courses/freelance-1/unit-2/pattern.jpeg);
}

.product-type {
    font-size: 32px;
    color: white;
}

.mediumspringgreen {
    background-color:mediumspringgreen;
}

.lightcoral {
    background-color:lightcoral;
}

.skyblue {
    background-color: skyblue;
}

.blue {
    color: blue;
}
1 Like
2

Hi! I’m Julia! I’m working on the same project! I’ll go ahead and review your code, will you review mine as well?

I’ve completed 7% of the Front-End Engineer Pathway!
I’m in the US, PST.
One fact is that I enjoy improv comedy!

1 Like
4

Here are my files!

HTML

<!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">
    <title>Dasmoto's Arts & Crafts</title>
    <link rel="stylesheet" href="resources/index.css">
</head>
<header>
    <h1>Dasmoto's Arts & Crafts</h1>
</header>    
<body>
    <h2 class='brushes'>Brushes</h2>
    <img src="images/paintbrushes.webp" alt="various paintbrushes">
        <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="price">Starting at $3.00 / brush.</span></p>

    <h2 class="frames">Frames</h2>
    <img src="images/frames.webp" alt="picture 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 class="price">Starting at $2.00 / frame.</span></p> 
    
    <h2 class="paint">Paint</h2>
    <img src="images/paint.jpeg" alt="paint tubes">
        <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="price">Starting at $5.00 / tube.</span></p>    

</body>
</html>

CSS:

h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 100px;
    font-weight: bold;
    color: khaki;
    text-align: center;
    background-image: url("/Users/juliaheitner/Documents/Code Academy/Dasmotos/images/pattern.webp");   
}

h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 32px;
    font-weight: bold;
    color: white;
}

body {
    font-family: Helvetica;
    font-weight: normal;
}

.brushes {
    background-color: mediumspringgreen;
}

.frames {
    background-color: lightcoral;
}

.paint {
    background-color: skyblue;
}

.price {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: blue;
}
5

Hey!
I think that your code is pretty good overall. There are just some minor details I myself would have done differently:

  1. Indentation. - I would recommend indenting child tags from parent tags. For instance, is a parent tag, so you indent everything inside of it. Also, note that tags go inside a tag, whereas here you left them in between the and tags.
  2. Organizing your work in sections. - I think that code is easier to read when it is organized by sections, so maybe you’ll want to consider wrapping each of those blocks of h2, img, h3, and p in a section or div tag. Even though we won’t give any formatting to the section/div tag, I think it gives a clearer structure to a program.
  3. Intuitive names for CSS rulesets. - Since the .brushes, .frames, and .paint rulesets are solely used to change the background color, you might want to change the names of those rulesets to .mediumspringgreen, .lightcoral, and .skyblue, since it is easy to infer what each of those rulesets do just by reading their names.

That’s it! Good job!
P.D. Would you recommend me to use tags like you did? I don’t know what those do, but I see them pretty often, so maybe they’re somehow important?

6

Thanks! Yes, thanks for the feedback, especially the point on organizing work in sections. I’ll go ahead and review your code as well!

What do you mean by add tags like I did? Can you give an example?

Also, in terms of CSS names, I took a look at the solution code provided by Code Academy and they used a similar naming structure that I did and organized the sections into Brushes, Frames, and Paint:

Solution Code Link: https://www.codecademy.com/paths/front-end-engineer-career-path/tracks/fecp-web-development-fundamentals/modules/fecp-developing-with-css/informationals/dasmoto-solution

1 Like
7

Yes, same, looks good overall!

  1. I like how you organized the html into clear sections, including header and a section for each.
  2. CSS is clear and well organized
  3. Main question is around the naming convention for the section header colors. Do go take a look at the solution provided by Code Academy. This is a question of Semantic naming which is then covered more in the following chapters. Also it looks like the solution used id rather than class. I personally need to review when to use which.

Great work! Looking forward to continue to collaborate!

8

Ups, sorry! I meant “meta” tags like you did.

And as far as the naming structure goes, you probably got it right. I organized it into .mediumspringgreen, .lightcoral, and .skyblue because I felt like it was more intuitive than Brushes, Frames, and Paint, but it’s very much possible that I’m violating some style convention (specially given the fact that Codecademy’s solution has a naming structure like yours rather than mine).

Thanks for the feedback!

1 Like