Dasmotos Arts and Crafts review request + asking for advice

Hi everyone, I’d like to ask two things. I’ve completed the Dasmoto’s Arts and Crafts excercise. I was pretty happy with the outcome and decided to play around with the styling a little bit, just for fun.
First of all, could ask someone to please provide me with a bit of feedback with how I have done and the code execution?
Additionally, when playing about, I’ve found a bit of a problem. Since the page content sits awfully close to the screen edges, I decided to move all content in a bit. First I played about with margins and padding. I was very surprised that even with correctly given code, nothing was happening. I’ve also tried putting all of the visible content in a

with an ID, and repeating the same but I just couldn’t seem to make it work…
Any tips or advice would be hugely appreciated!

Here is the code for index.html

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

Here is the code for
index.css

* { box-sizing: border-box; }

h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 100px;
font-weight: bold;
color: khaki;
text-align: center;
background-image: url(“…/images/pattern.jpeg”);
border-radius: 6px;
width: 100%;
border: 4px solid khaki;

}

h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 32px;
font-weight: bold;
color: white;
width: 100%;
background-color: mediumspringgreen;
border-radius: 3px;
}

h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 32px;
font-weight: bold;
color: white;
width: 100%;
background-color: lightcoral;
border-radius: 3px;
}

h4 {
font-family: Arial, Helvetica, sans-serif;
font-size: 32px;
font-weight: bold;
color: white;
width: 100%;
background-color: skyblue;
border-radius: 3px;
}

.productimg {
height: 30%;
width: 30%;
border-radius: 4px;
max-width: 300px;
max-height: 300px;
}

p.title {
font-family: Arial, Helvetica, sans-serif;
font-size: 22px;
font-weight: bold;
}

p {
font-family: Arial, Helvetica, sans-serif;
font-size: 17px;
}

strong {
color: blue;
}

Once again thank you for help :grinning:

Hi, i’m also new to this so take what I say with a grain of salt…

For your html:

  1. I think all of the title tags you have for brushes/frames/paint etc should fall under h2 headers.
  2. Where you have the title classes those could just be h3 tags without a class.
  3. your strong tags around the prices should be changed to a span tag, I did it with an id of price to format it to blue in css.
  4. im not sure if it makes a major change but I did divs instead of sections, the solution code they gave afterward did the same.

in the css:

  1. you have a lot of overlap within the css elements, specifically around the h tags. you could combine a lot of the formatting with combining the elements… h1, h2, h3 { your formatting} instead of replicating code. Grouping them is best practice so if you want to make a major format change you only have to do it once. (I could have done this better in my css too) newbie mistake I suppose!

For reference, my html was:

<!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 & Crafts</title>
    <link rel="stylesheet" href="./resources/css/index.css">
</head>

<body>
    <!-- Head section -->
    <h1>Dasmoto's Arts & Crafts</h1>
    <!-- Brush Section -->
    <div class="item">
        <h2 id="brush">Brushes</h2>
        <img src="https://content.codecademy.com/courses/freelance-1/unit-2/hacksaw.jpeg?_gl=1*b3svc1*_ga*MTM5ODIyOTMxOC4xNjczMTg3NzMx*_ga_3LRZM6TM9L*MTY3MzE4NzczNS4xLjEuMTY3MzE4Nzc0My41Mi4wLjA."
            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">Starting at $3.00 / brush.</span></p>
    </div>
    <!-- Frame Section -->
    <div class="item">
        <h2 id="frame">Frames</h2>
        <img src="https://content.codecademy.com/courses/freelance-1/unit-2/frames.jpeg?_gl=1*b3svc1*_ga*MTM5ODIyOTMxOC4xNjczMTg3NzMx*_ga_3LRZM6TM9L*MTY3MzE4NzczNS4xLjEuMTY3MzE4Nzc0My41Mi4wLjA."
            alt="Frames">
        <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. <span class="price">Starting at $2.00 / frame.</span></p>
    </div>
    <!-- Paint Section -->
    <div class="item">
        <h2 id="paint">Paint</h2>
        <img src="https://content.codecademy.com/courses/freelance-1/unit-2/finnish.jpeg?_gl=1*b3svc1*_ga*MTM5ODIyOTMxOC4xNjczMTg3NzMx*_ga_3LRZM6TM9L*MTY3MzE4NzczNS4xLjEuMTY3MzE4Nzc0My41Mi4wLjA."
            alt="Paint">
        <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. <span
                class="price">Starting at $5.00 / tube.</span></p>
    </div>
</body>

</html>

and my css was:

h1 {
    font-size: 100px;
    font-weight: bold;
    color: khaki;
    text-align: center;
    background-image: url("https://content.codecademy.com/courses/freelance-1/unit-2/pattern.jpeg?_gl=1*1ebjqnc*_ga*NDcxMjE1MTc2Ni4xNjczMDQxNjc5*_ga_3LRZM6TM9L*MTY3MzEyMjg0MC41LjEuMTY3MzEyNjcyOS41OC4wLjA.");
}

.price {
    font-family: Helvetica;
    font-weight: bold;
    color: blue;
}

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

h1,h2,h3,p {
    font-family: Helvetica;
}

#brush {
    background-color: mediumspringgreen;
}

#frame {
    background-color: lightcoral;
}

#paint {
    background-color: skyblue;
}

Thanks for your review! I appreciate it and I think your advice about the span tags in the HTML and grouping the elements in CSS is particularly helpful :grinning:
Do you potentially have any advice about giving the whole page margins? Couldn’t make it work for some reason and I’m still struggling with it a bit…

Hi @tera7285384777 ! I have observed that there are plenty of tags used in your code. It makes it jumbled up and hard to read. You can use fewer tags and get the work done. It saves time and is efficient. I have made changes to font and colors according to how I like it but that is completely up to you. Here is my code:

Das-Arts&Crafts
<div class="image">
    <h1 class="heading">Dasmoto's Arts & Crafts</h1>
</div>


<!--brushes section---->
<div>
    <h2 class="brushdesk">Brushes</h2>
    <img src="./resources/images/hacksaw.jpeg" alt="">
    <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. <strong class="strong">Starting at $3.00 / brush.</strong></p>
</div>

<!-- frames section ---->
<div>
    <h2 class="framesdesk">Frames</h2>
    <img src="./resources/images/frames.jpeg" alt="">
    <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="strong">Starting at $2.00 / frame.</strong></p>
</div>

<!--paint section------>
<div>
    <h2 class="paintdesk">Paint</h2>
    <img src="./resources/images/finnish.jpeg" alt="">
    <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="strong">Starting at $5.00 / tube.</strong></p>
</div>

Here is my css code:

  • {
    font-family: cursive;
    }

.image {
background-image: url(…/images/pattern.jpeg);
background-size: cover;
background-position: center;

}

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

.brushdesk {
font-size: 32px;
font-weight: bold;
background-color: darksalmon;
color: white;
}

.framesdesk {
font-size: 32px;
font-weight: bold;
background-color: palevioletred;
color: white;
}

.paintdesk {
font-size: 32px;
font-weight: bold;
background-color: rgba(29, 168, 145, 0.719);
color: white;
}

.strong {
color:cornflowerblue;
font-weight: bold;
}

Hi, thanks for your review! I like your code and it’s simplicity. I agree that the simpler HTML is, the easier it is to read.

1 Like