Code Review: Dasmoto's Arts & Crafts

Hello!
Looking for some feedback/affirmation on my first off platform project:
Dasmoto’s Arts & Crafts

Please provide any notes about how I could improve and/or any affirmations about what is looking good on the following code. Thanks!
HTML

<!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 href="./resources/css/index.css" type="text/css" rel="stylesheet">
</head>
<body>
    <header>
        <h1>Dasmoto's Arts & Crafts</h1>
    </header>
    <main>
      <!--Brushes Section--> 
        <section class="brushes">
            <h2>Brushes</h2>
            <img id="hacksaw" src="./resources/images/image2hacksaw.jpeg" alt="hacksaw brushes stacked"/>
            <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="pricing"> Starting at $3.00 / brush.</span></p>
        </section>
      <!--Frames Section-->
        <section class="frames">
            <h2>Frames</h2>
            <img id="artframes" src="./resources/images/image3frames.jpeg" alt="multi colored frames stacked"/>
            <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="pricing"> Starting at $2.00 / frame.</span></p>
        </section>
       <!--Paint Section-->
        <section class="paint">
            <h2>Paint</h2>
            <img id="paint" src="./resources/images/image4finnish.jpeg" alt="yellow blue and red open paint tubes and brushes loaded with 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="pricing"> Starting at $5.00 / tube.</span></p>
        </section>
    </main>
</body>
</html>

CSS

* {
    font-family: Helvetica;
}

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

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

h3 {
    font-weight: bold;
}

.brushes h2 {
    background-color: mediumspringgreen;
}

.frames h2 {
    background-color: lightcoral;
}

.paint h2 {
    background-color: skyblue;
}

span.pricing {
    font-weight: bold;
    color: blue;
}
1 Like

Hello!

I just finished this project too, so super happy to find your post!

I really like that you used 's instead of divs.

The only differences I see are that you used classes for the sections. I started that way but decided to use id’s instead in the end as none of the classes I created got reused. I noticed that you gave your images Id’s too but I couldn’t see where the id was used.

You also put great comments in too, awesome! I need to work on that going forward!

Here is my code:

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="./resources/css/style.css" />
    <title>Dasmoto's Arts &amp; Crafts</title>
  </head>
  <body>
    <header>
      <h1>Dasmoto's Arts & Crafts</h1>
    </header>
  <main>
      <section id="brushes">
        <h2>Brushes</h2>
        <img src="../DasmotoArtsAndCrafts/resources/images/hacksaw.jpeg" alt="pile of 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 class="pricing">Starting at $3.00 / brush.</span>
        </p>
      </section>

      <section id="frames">
        <h2>Frames</h2>
        <img src="../DasmotoArtsAndCrafts/resources/images/frames.jpeg" alt="many picture frames of different sizes"/>
        <h3>Art Frames (assorted)</h3>
        <p>
          Assorted frames made of different material, including MDF, birchwood,
          and PDE. Select frames can be sandedand painted according to your
          needs. <span class="pricing">Starting at $2.00 / frame.</span>
        </p>
      </section>

      <section id="paint">
        <h2>Paint</h2>
        <img
          src="../DasmotoArtsAndCrafts/resources/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 (1oz to 8oz). Clean Finnish paint microbinds to
          canvas, increasing the finish and longevity of any artwork.<span class="pricing"> Starting at $5.00 / tube.</span
          >
        </p>
      </section>
    </main>
  </body>
</html>

css

* {
  box-sizing: border-box;
  font-family: Helvetica;
}
h1 {
  background-image: url(../images/pattern.jpeg);
  font-size: 100px;
  font-weight: bold;
  color: khaki;
  text-align: center;
}
h2 {
  color: white;
  font-size: 32px;
  font-weight: bold;
}
#brushes h2 {
  background-color: mediumspringgreen;
}
#frames h2 {
  background-color: lightcoral;
}
#paint h2 {
  background-color: skyblue;
}
.pricing {
  font-weight: bold;
  color: blue;
}

Thanks for the review! I used classes as practice starting lower to leave room to add more specificity later if needed, this project was fairly simple so I think either works. I think I added more than I needed to also :upside_down_face: again for practice to have it all identified for more complex CSS.

Yours looks good too! Aside from what you already mentioned about adding in comments I would just watch your spacing in your CSS. As projects get more complex notes in both the HTML and CSS will be helpful along with spacing to keep your bearings.
:v: :sunglasses:

1 Like

Thank you, mtnjenni and text7538846811, for your posts. I had a lot of trouble remembering how to get the pattern image behind the title. I appreciate your share.

I look forward to adding to future discussions.

All the best, and thank you again!

body {
    font-family: Helvetica;
}

The above will suffice enough for this generic selector rule. Universal selectors are a waste of resources in a big way. We should know what elements we have, their default behaviors, and how to direct those behaviors to suit our needs. Leave the default style sheet alone.

Toss universal selectors and get intimate with your pages and their default behaviors, else you never learn what has already been done for you. CSS is a grind, truly, and it is not made any easier to learn by wiping the slate clean before we even begin. Repeat, leave the default style sheet alone.

We need to go back to when and why CSS became an important component of document presentation, and even behavior in some instances. There were just too many attributes in the HTML domain that were specifically geared to presentation, rather than the structure of the document. What place does a ‘color’ or ‘align’ attribute have in an outline?

Oh there were dozens and dozens more presentational attributes that CSS had to do away with, and it did, in full living color. CSS 1 & 2 made writing HTML soooo much easier. It was the cure to attributitis and opened the gateway for presentational code to exit the HTML domain. We could now focus on structure, and structure alone. Presentation has left the building and gone across campus.

Previous to the ID attribute which was coordinated along with the introduction of CSS, we had only the anchor element, <a></a>. In the early days this was simply meant to mean text that had a connection to more detail or related information within a document.

A link to a page fragment could be written as such:

<p>The professor suggested <a href="#gpr">ground penetrating radar</a> ...</p>

The page fragment in the the day would be written as,

<a name="gpr">GPR</a>
<p>Ground Penetrating Radar is able to detect the perturbations in the soil beneath which would indicate unnatural inclusions in the overlying earth. It is a  powerful tool for finding burial sites, for instance, which are a common disturbance of the surrounding depositional material.</p>

That was before id="gpr" was applied to the P, directly.

The creative people who really flourish in the present day are fluent in the past constructs and how they lead to where we are. Forget your history, you forget your future, as in are not a part in it, only a player. Learn your history and you can go far.

Thank you @mtf for the background and the opportunity to learn more history. Gaining historical context is helpful beyond what this skill building course offers. I’m still getting a feel for best selectors to use so I will keep this in mind moving forward.

1 Like

If it’s not important (in the moment), one can always count on me. History is one of my bents, especially considering I’ve lived through it and can fact check myself.

Following, I tried to keep everything to barebones simplicity but edged up the structure for CSS flexibility. My goal in this demo is simplicity, not eye candy. We’re in command of everything that goes to the screen so see each facet as a form of declarative control. We want to access only the parts of the structure that are specific to our directives.

style.css

body {
  font-size: 100%;
}
header, footer {
  width: 100%;
  line-height: 13em;
  text-align: center;
  background-image: url(skin/pattern.jpeg);
  background-size: cover;
  background-position: center center;
}
h1, h2 {
  font-family: Helvetica;
}
header h1 {
  margin: 0;
  font-size: 7em;
  font-weight: bold;
  color: khaki
}
h2 {
  font-size: 1.25em;
  margin-top: 0.1em;
}
article h1 {
  font-size: 1.8rem;
  padding: 0.1em 0 0.1em 0.7em;
  margin: 0.2em 0;
  color: white;
}	
figure {
	display: flex;
	margin: 0.2em 1em;
}
figure img {
  width: 13em;
  height: 13em;
  background-size: cover;
  margin: 0 1em 0 0;
}
figcaption {
  width: 75%;
}
#brushes img {
  background-image: url(skin/hacksaw.jpeg);
}
#frames img {
  background-image: url(skin/frames.jpeg);
}
#paints img {
  background-image: url(skin/finnish.jpeg);
}
#brushes h1 {
  background-color: MediumSpringGreen;
}
#frames h1 {
  background-color: LightCoral;
}
#paints h1 {
  background-color: SkyBlue;
}
@media (width <= 1440px) {
  header, footer {
    height: 12em;
    line-height: 12em;
  }
  header h1 {
    font-size: 5.75em;
  }
}
@media (width <= 1080px) {
  header, footer {
    height: 8em;
    line-height: 8em;
  }
  header h1 {
    font-size: 4em;
  }
}
@media (width <= 760px) {
  header, footer {
    height: 6em;
    line-height: 6em;
  }
  header h1 {
    font-size: 2.75em;
  }
}
@media (width <= 540px) {
  header, footer {
    height: 4em;
    line-height: 4em;
  }
  header h1 {
    font-size: 2em;
  }
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dasmoto's Arts & Crafts</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
  <header>
    <h1>Dasmoto's Arts & Crafts</h1>
  </header>
  <main>
    <article id="brushes">
	  <h1>Brushes</h1>
      <figure>
        <img>
	    <figcaption>
	      <h2>Hacksaw Brushes</h2>
		  <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.</p>
		  <p><a href="#">Starting at $3.00 / brush</a>.</p>
	    </figcaption>
      </figure>
	</article>
    <article id="frames">
	  <h1>Frames</h1>
      <figure>
        <img>
	    <figcaption>
	      <h2>Art Frames (assorted)</h2>
		  <p>Assorted frames made of different material, including MDF, 
		  birchwood, and PDE. Select frames can be sanded and painted 
		  according to your needs</p>
		  <p><a href="#">Starting at $2.00 / frame</a>.</p>
	    </figcaption>
      </figure>
	</article>
    <article id="paints">
	  <h1>Paints</h1>
      <figure>
        <img>
	    <figcaption>
	      <h2>Clean Finnish Paint</h2>
		  <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.</p>
		  <p><a href="#">Starting at $5.00 / tube</a>.</p>
	    </figcaption>
      </figure>
	</article>
  </main>
  <footer>
  
  </footer>
</body>
</html>

As we can see, <img> tags are only placeholders in the markup. We use them as hooks in the CSS.

The media queries apply only to the header (and footer), at present, but could be made to apply elsewhere if one wished to explore. Our goal was adaptive and responsive behavior, which plays out here. Nothing novel, but a dye is cast that can now be exploited.

Of note is that we have kept to the ids in the spec, and not created any of our own. We’ve worked our CSS within these confines, along with traversal of the structure. Again, simplicity was/is the objective when designing CSS. Use the structure, not a bunch of classes and ids is how I like to roll. Note also that all the image files are in css/skin/ directory for easy access from the CSS. One final note is that figure is a Flex object. The reader will have to come to verse with that.

1 Like

We’re only getting started. Watch what happens here…

    <article id="paints">
	  <h1>Paints</h1>
      <figure>
        <img>
	    <figcaption>
	      <h2>Clean Finnish Paint</h2>
		  <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.</p>
		  <p><a href="#">Starting at $5.00 / tube</a>.</p>
	    </figcaption>
	    <figcaption>
	      <h2>Pure Flemish Paint</h2>
		  <p>Imported paint from Belgium. Over 256 colors available in-store,
		  varying in quantity (1 oz. to 8 oz.). Pure Flemish paint microbinds 
		  to canvas, increasing the finish and longevity of any artwork.</p>
		  <p><a href="#">Starting at $4.00 / tube</a>.</p>
	    </figcaption>
      </figure>
	</article>
figcaption {
  width: 75%;
  margin: 0 0.5em;
}

Disclaimer: The writer is not a fan of normalization and shy away from such crutches as the universal selector and reset.css. They only serve to handicap the developer. Learn to be intimate with your page elements and design appropriately for future thinking authors who follow. Leave the default style sheet alone, is my philosophy. Any designer worth their salt will want this level of access and mobility when traversing the CSS world’s geography. Little chance I’ll ever change this view.