Dasmoto's Art's & Crafts - Code Review

Projects Off-platform Practice Projects
1

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.

2

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

3

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
4

looks amazing. keep on !

5

Hi All,
This was a good lesson in refactoring css. :nerd_face:
here’s my page:
https://rachelfaris.github.io/dasmotoArtsCodeReview/
and my code:

<!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 rel="stylesheet" href="style.css">
</head>

<body>
    <header>
        <h1>Dasmoto's Arts & Crafts</h1>
    </header>
    <section class="brushes-section">
        <h2 class="header-h2">Brushes</h2>
        <img src="images/brushes.jpeg" alt="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="price-highlight">Starting at
                $3.00 / brush
            </span>
        </p>
    </section>
    <section class="frames-section">
        <h2 class="header-h2">Frames</h2>
        <img src="images/frames.jpeg" alt="frames">
        <h3>Art Frames (assorted)</h3>
        <p>Assorted frames made of different materials, including MDF, birchwood, and PDE.
            Select frames can be sanded and painted according to your needs. <span class="price-highlight">Starting at
                $2.00 / frame.
            </span>
        </p>
    </section>
    <section class="paint-section">
        <h2 class="header-h2">Paint</h2>
        <img src="images/paint.jpeg" alt="paint tubes">
        <h3>Clean Finnish Painting</h3>
        <p>Imported from Finland. Over 256 colors available in-store, varying in quantity (1 0z.
            to 8 oz.) Clean Finnish paint microbinds to canvas, increasing the finish and
            longevity of any artwork. <span class="price-highlight">Starting at $5.00 / tube.</span>
        </p>
    </section>

</body>

</html>





body {
    font-family: Helvetica, Arial, sans-serif;
}

h1, h2, h3 {
    font-weight: 600;
}

h1 {
    background-image: url(images/pattern.jpeg);
    text-align: center;
    font-size: 100px;
    color: khaki;
}

.header-h2 {
    color: white;
    font-size: 32px;
}

.brushes-section h2 {
background-color: mediumspringgreen;
}

.frames-section h2 {
    background-color: lightcoral;
}

.paint-section h2 {
    background-color: skyblue;
}

.brushes-section h3, .frames-section h3, .paint-section h3 {
    font-size: 24px;
}

.brushes-section p, .frames-section p, .paint-section p {
    font-size: 20px;
}

.price-highlight {
    color: blue;
}