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>
Hi, i’m also new to this so take what I say with a grain of salt…
For your html:
I think all of the title tags you have for brushes/frames/paint etc should fall under h2 headers.
Where you have the title classes those could just be h3 tags without a class.
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.
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:
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>
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
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>
<html>
<head>
<title>Dasmoto's Arts & Crafts</title>
<link href="./css/styles.css" rel="stylesheet" />
</head>
<body>
<h1 class="title">Dasmoto's Arts & Crafts</h1>
<h2 class="subtitle brushes">Brushes</h2>
<img src="./images/hacksaw.jpeg" alt="Hacksaw" />
<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="cost">Starting at $3.00 / brush</span></p>
<h2 class="subtitle frames">Frames</h2>
<img src="./images/frames.jpeg" 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="cost">Starting at $2.00 / frame.</span></p>
<h2 class="subtitle paint">Paint</h2>
<img src="./images/finnish.jpeg" alt="Finnish" />
<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="cost">Starting at $5.00 / tube.</span></p>
</body>
</html>
Hi @esmdev I hope you don’t mind the unsolicited review, hoping you might take a look at my code below and return the favour
The HTML looks good, just a couple of observations:
Your for the CSS doesn’t include type=“text/css”
You could get away without using classes for the h1 + span elements and using their type selectors for a single-page like this. That’s not to say it’s bad practice, you just could save a little code in this instance
You could incorporate semantic HTML by putting the h1 in a tag and each of the product listings in their own tags, just as an idea to something that could be added (I personally chose not to do this in my code either)
As for CSS:
Echoing point 2 for your HTML file would save some additional code for the class definitions. Your h1 & h2 would work without the classes so it’s an opportunity for optimisation
Overall great job and the page presents as expected
Here’s my effort, hoping somebody would be kind enough to review, please
HTML
<!DOCTYPE html>
<html>
<head>
<title>Dasmoto's Arts & Crafts</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Dasmoto's Arts & Crafts</h1>
<h2 class="brushes">Brushes</h2>
<img src="./images/hacksaw.jpeg" alt="Hacksaw 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>Starting at $3.00 / brush.</span></p>
<h2 class="frames">Frames</h2>
<img src="./images/frames.jpeg" alt="A collection of coloured picture 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>Starting at $2.00 / frame.</span></p>
<h2 class="paint">Paint</h2>
<img src="./images/finnish.jpeg" alt="Tubes of 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>Starting at $5.00 / tube.</span></p>
</body>
</html>
Looks good, the only super minor thing you could do is to change the CSS h2.class selectors to just include the class name., as in say not h2.paint but just .paint as it will select that element anyway. This is only minor though, otherwise nice, clean and simple code
Since there is already thread about the Dasmotos’ Project. I thought i would post my completed html and css here. I would appreciate any feedback and criticism that would improve what I have done.
Thank you!
-HTML-
Dasmoto's Arts and Crafts
<body>
<header>
<h1>Dasmoto's Arts and Crafts</h1>
</header>
<main>
<section>
<h2 class="h2brushes">Brushes</h2>
<img src="C:\Users\npbowes.000\Desktop\hacksaw.jpeg"/>
<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>Starting at $3.00 / brush.</strong></p>
</section>
<section>
<h2 class="h2frames">Frames</h2>
<img src="C:\Users\npbowes.000\Desktop\frames.jpeg"/>
<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>Starting at $2.00 / frame.</strong></p>
</section>
<section>
<h2 class="h2paint">Paint</h2>
<img src="C:\Users\npbowes.000\Desktop\finnish.jpeg"/>
<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>Starting at $5.00 / tube.</strong></p>
</section>
</main>
</body>
you’re right about the CSS. I think my brain over-engineered so I could re-use the classes 