Dasmoto's Art's & Crafts - Code Review

Hi All,

I just completed this practice project and was looking for feedback on my HTML and CSS code!

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 and Crafts</title>
        <!--Link code for my CSS stylesheet-->
        <link rel="stylesheet" href="Resources/CSS/index.css" />
    </head>
    <body>

        <!-- Header Section for the Top Banner-->
        <header>
            <h1 class="PageHeading">Dasmoto's Arts and Crafts</h1>
        </header>


        <!-- First Section Item Containing A Figure and some information-->
        <section>
            <h2 class="Brushes">Brushes</h2>
            <!--Semantic HTML element for figures-->
            <figure>
                <!-- Note: the alt attribute is important for site accessibility and search engine indexing-->
                <img src="Resources/Images/hacksaw.jpeg" alt="Hacksaw Brushes">
            </figure>
            <!--Semantic HTML element for section content-->
            <article>
                <h3>Hacksaw Brushes</h3>
                <!--Made use of the <span> type to enable selection of the price text in the below p-->
                <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="PriceQuote"> Starting at $3.00 / brush</span></p>
            </article>
        </section>

        <!-- Second Section Item Containing A Figure and some information-->
        <section>
            <h2 class="Frames">Frames</h2>
            <!--Semantic HTML element for figures-->
            <figure>
                <!-- Note: the alt attribute is important for site accessibility and search engine indexing-->
                <img src="Resources/Images/frames.jpeg" alt="Picture Frames - Assorted">
            </figure>
            <!--Semantic HTML element for section content-->
            <article>
                <h3>Art Frames (assorted)</h3>
                <!--Made use of the <span> type to enable selection of the price text in the below p-->
                <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="PriceQuote"> Starting at $2.00 / frame</span></p>
            </article>
        </section>

        <!-- Third Section Item Containing A Figure and some information-->
        <section>
            <h2 class="Paint">Paint</h2>
            <!--Semantic HTML element for figures-->
            <figure>
                <!-- Note: the alt attribute is important for site accessibility and search engine indexing-->
                <img src="Resources/Images/finnish.jpeg" alt="Finnish Paint - Various Colours">
            </figure>
            <!--Semantic HTML element for section content-->
            <article>
                <h3>Clean Finnish Paint</h3>
                <!--Made use of the <span> type to enable selection of the price text in the below p-->
                <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="PriceQuote"> Starting at $5.00 / tube</span></p>
            </article>
        </section>


    </body>
</html>

CSS Code:


/*According to the brief, all text appears to be Helvetica, so I am assuming this is the least code needed to style all text to Helvetica*/
*{
    font-family: Helvetica;
}

/* I had an issue with the relative path for the background image here - copying the relative path from the explorer did not
   take into account that the .CSS file was in lower folder than the image, so it would not display. I found I needed to use
   the ../ to go up one directory before linking to the pattern.jpeg. */

header{
    background-image: url(../Images/pattern.jpeg);
    width: 100%;
}

/*Styling for the top banner elements*/
.PageHeading{
    font-size: 100px;
    font-weight: bold;
    color: khaki;
    text-align: center;
}

/*Styling for the span attribute*/
.PriceQuote{
    color: blue;
    display: inline;
    font-weight: bold;
}

/*Styling for the section headings in h2 type*/
h2{
    font-size: 32px;
    font-weight: bold;
    color: white;
    text-align: left;
}

/*Styling for the section heading backgrounds*/
.Brushes{
    background-color: mediumspringgreen;
}
.Frames{
    background-color: lightcoral;
}
.Paint{
    background-color: skyblue;
}

/*Styling for h3 weight*/
h3{
    font-weight: bold;
}

Thanks in advance!

Tom.

Looks pretty good…similar to mine. I like the use of section instead of div. I may use that more in the future myself.

Thanks! I’ve got a little further in the course now, and there will be a lot of using both Section and Div. Correctly nesting div’s is the tricky bit but it makes sense once you get the hand of it :slight_smile:

1 Like

looks amazing. keep on !