Code Review: Dasmoto’s Arts & Crafts

Hey everyone! I’ve done the Dasmoto’s Arts & Crafts project and would like to get the Code Review

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">
    <link rel="stylesheet" href="resources/css/index.css">
    <title>Dasmoto's Arts & Craft's</title>
</head>

<body>

    <!-- BANNER -->

    <header>
        <h1>
            Dasmoto's Arts & Crafts
        </h1>
    </header>
</body>

<main>

    <!-- BRUSHES -->

    <section>
        <h2 class="green">
            Brushes
        </h2>
        <img src="resources/images/img1.webp" alt="Set of brushes">
        <h3>Hacksaw Brushes</h3>
        <p>Made of the highest quality oak, Hacksaw brushes are
        known for theit weight and ability to hold paint in large
        amounts. Available in different sizes.
        <strong class="blue">Starting at $3.00 / brush.</strong></p>
    </section>

    <!-- FRAMES -->

    <section>
        <h2 class="coral">
            Frames
        </h2>
        <img src="resources\images\img2.webp" alt="Frames of different colors and sizes">
        <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.
        <strong class="blue">Starting at $2.00 / frame.</strong></p>
    </section>

    <!-- PAINT -->

    <section>
        <h2 class="skyblue">
            Paint
        </h2>
        <img src="resources\images\img3.jpeg" alt="Paint tubes on the table">
        <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.
        <strong class="blue">Starting at $5.00 / tube.</strong></p>
    </section>
</main>

</html>

CSS

* {
    font-family: Helvetica;
}

h1 {
    font-size: 100px;
    font-weight: bold;
    color: khaki;
    text-align: center;
    background-image: url(../images/header.webp);
}

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

/* strong {
    color: blue;
} 

Changed my mind about this 'cause I might want to use strong element in the future (if project gets bigger)
and probably I wouldn't want it to be blue.

*/


.green {
    background-color: mediumspringgreen;
}

.coral {
    background-color: lightcoral;
}

.skyblue {
    background-color: skyblue;
}

.blue {
    color: blue;
}

Also I was hesitating about including the reset code to the css (I’ve read somewhere in the comments that it’s better not to use separate file for reset and just include it in the beginnig of the main css) and since I was hesitating I’ve commented out this section

/* RESET START */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

/* html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
} 
* {
    box-sizing: border-box;
}
*/
/* HTML5 display-role reset for older browsers */
/* article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
} 

* {
    box-sizing: border-box;
}

*/



    /* RESET END */

I’ve also included box-sizing: border-box; to css reset code.

reset.css is practicallly pointless in today’s world. It stems from the time when browser vendors were anything but on the same page. Now we hardly even need vendor prefixes (thank providence for that). The days of everybody pulling in opposite directions is all but over. The new Living Standard is ubiquitous, today.

Eric Meyer did what he had to back in the day. It still boils down to a hack disguised as a polyfill, of sorts. reset.css is a cudgel, when we look at it in its crudest form of intention… Make CSS layouts work in all environments. Today, that is no longer a requirement. We’ve come a very long way since 2011.

1 Like

Wow thank you for an explanation! It was actually your comment about including the reset to the main css file so that’s really valuable that you explained this in terms of todays world.

P.S. Your comments taught me a lot in here so thanks for all of your answers :slight_smile:

1 Like