Dasmoto's Arts & Crafts, Project attempt

Hello guys, I would like to request for someone to take a look at my attempt on this project. I did my best to use the knowledge gained throughout the lessons. Made an effort to incorporate semantic HTML tags instead of div tags into the code. Doing so made the code a little bit more complex in some areas than it could have been for the given project’s size and complexity. For example the figure tag that encapsulates the media comes with default margin values which had to be reset with additional line of code in CSS. Removing the figure tag in this case would make the code cleaner. Any feedback would be greatly appreciated.

<!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="./resources/index.css">
</head>
<body>
    <header>
        <h1>Dasmoto's Arts & Crafts</h1>
    </header>
    <main>
        <section>
            <h2 class="subheading green">Brushes</h2>
            <figure>
                <img src="./resources/images/hacksaw.jpeg" alt="Five types of paint brushes stacked on top of each other">
                <figcaption>Hacksaw Brushes</figcaption>
            </figure>
            <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>Starting at $3.00 / brush.</span></p>
        </section>
        <section>
            <h2 class="subheading coral">Frames</h2>
            <figure>
                <img src="./resources/images/frames.jpeg" alt="Dozen of multicoloured frames">
                <figcaption>Art Frames (assorted)</figcaption>
            </figure>
            <p>Assorted frames made of different material, including MDF, birchwood, and PDE. 
                Select frames can be sanded and painted according to your needs. <span>Starting at $2.00 / frame.</span></p>
        </section>
        <section>
            <h2 class="subheading blue">Paint</h2>
            <figure>
                <img src="./resources/images/finnish.jpeg" alt="Messy paint tubes on the table">
                <figcaption>Clean Finnish Paint</figcaption>
            </figure>
            <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>Starting at $5.00 / tube.</span></p>
        </section>
    </main>
</body>
</html>
* {
    font-family: Helvetica;
}

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

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

figure {
    margin: 0;
}

figcaption {
    margin: 18.72px 0;
    font-weight: bold;
    font-size: 18.72px;
}

span {
    font-weight: bold;
    color: blue;
}

.green {
    background-color: mediumspringgreen;
}

.coral {
    background-color: lightcoral;
}

.blue {
    background-color: skyblue;
}
1 Like

Good job, you have done well using semantic HTML to recreate the layout of the project.

One issue I had when I viewed it inside the chrome browser on my macbook was that the images have not loaded correctly, this may be because of the way I have viewed your code in the browser. I’m not 100% sure if the way I have viewed your code makes a difference but could be worth a check to see if the images are displaying well.

Once again nice work and good luck =)

1 Like

Thank you for your valuable feedback, I appreciate it a lot!

It seems that I made a mistake to not consider the people who wanted to take a look at the working website without a hassle to set it up locally. As it as well would require to have the resources associated with the website, in this case the images. My apologies. Here is the hosted link to the website: Dasmoto’s Arts & Crafts (shelbis.github.io).

Cheers!