Dasmoto Project: First Code Review

Projects Off-platform Practice Projects
1

Hello Community,

This is my first time posing a code-review request, as per the Web-Dev Syllabus. This code was for the project “Dasmoto’s Arts & Crafts”. I’d appreciate general feedback on semantic layout in the HTML as well as best-practice in code cleanliness. i.e. Using the ‘body’ selector to change the font-family vs. using ‘*’ selector.

(I’ve seen others using Github to share their entire project folders. Is that standard practice? Any links to resources on how to get started would be appreciated.)

Thanks,
P$

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <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" rel="stylesheet">
</head>
<body>
    <header>
        <h1>Dasmoto's Arts & Crafts</h1>
    </header>
    <content>
        <h2 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. <a class='sale' href="">Starting at $3.00/brush.</a>
        </p>
        <h2 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.<a class='sale' href="">Starting at $2.00/frame.</a></p>
        <h2 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, increaseing the finish and longevity of any artwork.<a class='sale' href="">Starting at $5.00/tube.</a></p>
    </content>
    <footer>

    </footer>
</body>
</html>```

CSS:

body{
    font-family: Helvetica;
}
header{
    background-image: url("https://content.codecademy.com/courses/freelance-1/unit-2/pattern.jpeg");
}

h1{
    font-size: 100px;
    font-weight: bold;
    color: khaki;
    text-align: center;
}

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

#brushes{
    background-color: mediumspringgreen;
}

#frames{
    background-color: lightcoral;
}

#paint{
    background-color: skyblue;
}

a.sale{
    font-weight: bold;
    color: blue;
}
1 Like
2

Hey there. I can’t speak with any real authority to the semantics of using the ‘body’ selector vs. the ‘*’ selector for the font-family, but I’m pretty sure some of the examples in the lessons used the ‘*’ selector, so that’s just the one I ended up using. Honestly, this is probably something I should go look into further.

I would imagine that sharing the Github repos is more relevant for larger, more complex projects. Github has some basic setup instructions that you’ll be able to find at github.com/your-username/your-username
What that doesn’t tell you though, is that you’ll need to set up an access token (I think that’s what it was called) in order to sync your local repo to github, which took a little bit of searching to figure out how to set up.

I think it would help the readability of your HTML to have the sections subdivided out. As it is right now, it’s kinda just one wall that makes it a little more difficult to pick out each section. CSS looks clean though.

1 Like
3

Thanks! I did think about adding section tags after seeing yours. I liked the cleanliness of it’s separation.

Fortunately I believe there is a Github section of the course I’m in. I’ll hopefully have a use for it by then!

1 Like