yellowzapp / dasmotos_arts_crafts

Dasmotos arts and crafts site

DASMOTOS_ARTS_CRAFTS

dasmotos_arts_crafts's Issues

SUMMARY

Grade: Meets expectations

Summary:
Nice job on this project! I love your use of <div> elements, comments, and your use of locally stored images with descriptive alt attributes in your HTML.

A couple things to work on here would be: 1. using group selectors to make your CSS more concise and 2. possibly changing your current group selectors to descendant selectors (based on your intention there).

Next, as a stretch goal, I challenge you to research and implement media queries to make your page totally responsive for all screen widths. This is a challenge I think you are ready for based on your work here! Here are a couple resources to get you started: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries and https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Using locally stored images

Great! Wonderful job using locally stored images for your project. This is best practice for production code and helps your page load faster.

Example: https://github.com/yellowzapp/DASMOTOS_ARTS_CRAFTS/blob/master/index.html#L14

Also, great job using descriptive alt attributes on your <img> elements. This is best practice and helps make your site even more accessible!

<div> elements and comments in HTML

Great! Nice work using <div> elements to wrap the different sections of your page. Also, great job with the comments before each section. These practices help to keep the sections of your page separated, and help make your markup more organized and easy to read!

Example: https://github.com/yellowzapp/DASMOTOS_ARTS_CRAFTS/blob/master/index.html#L11-L17

Group selectors in CSS

Simplify! Consider using group selectors for any repeated styles in your CSS. For example, I'm seeing font-weight bold; repeated throughout your CSS.

Also, not sure if this was intentional, but I see your are using group selectors on lines 18-19, 27-28, 35-36, and 43-44. These look like they were meant to be descendant selectors instead. If that was your intention, I would remove the comma and return on those lines.

For example, you would want to use:

.item h3 {
  font-size: 20px;
  font-weight: bold;
  text-align: left;
  color: black;
}

instead of:

.item,
h3 {
  font-size: 20px;
  font-weight: bold;
  text-align: left;
  color: black;
}