chauntevandeburgh/prj-rev-bwfs-dasmoto

prj-rev-bwfs-dasmoto's Issues

SUMMARY

GRADE: Needs Improvement

SUMMARY: Great start on this project. With a couple small changes, the site will be looking great and you did an excellent job keeping both the html and css neat and organized throughout. Nice work saving your image files locally and then using relative file paths to link to them as well!

As you work on these kinds of projects, always be referencing the finished page to make sure the styling you're adding is producing the desired effect. Try using devtools to double check the font size of the h1 element. Also, make sure to include the alt attribute on your img elements to ensure that a wider variety of users have access to that information.

As a next step, try using divs to reinforce the content structure of the page. Sectioning off each content block will help with styling, readability, and creating a well-defined structure for the page. All of these things become more and more crucial as your projects grow in size and complexity.

Have fun and keep up the good work!

SUBTLETY - resources organization

great work including the image assets with your project folder and then using relative paths to link to them throughout. consider organizing your resources folder further by making two separate 'css' and 'images' folders to help split up the different types of resources.

SUBTLETY - selector usage

https://github.com/ChaunteVanDeBurgh/prj-rev-bwfs-dasmoto/blob/master/ArtStore/resources/style.css#L2

good job setting font-family just once for the entire page. consider using a more general selector that could replace all these separate ones.

IMPORTANT - img alt attribute

https://github.com/ChaunteVanDeBurgh/prj-rev-bwfs-dasmoto/blob/master/ArtStore/index.html#L24
etc...

make sure to use an alt attribute for each img element to ensure that a wider variety of users have access to the information contained in those images. more info can be found here

SUBTLETY - html entities

https://github.com/ChaunteVanDeBurgh/prj-rev-bwfs-dasmoto/blob/master/ArtStore/index.html#L10

consider using an html entity to represent the & special character to ensure that the character displays correctly across all browsers. more info can be found here

SUBTLETY - header font size

https://github.com/ChaunteVanDeBurgh/prj-rev-bwfs-dasmoto/blob/master/ArtStore/resources/style.css#L7

check out the font-size of the main h1 heading. it looks a bit large, but you are setting the font-size right in the css. if you use devtools to inspect these elements, the h1 is actually 200px. so what is happening here?

many elements have default styling that is provided by a browser if no other styling is found. you can check out some more info about heading default styling here - https://www.w3schools.com/TAgs/tag_hn.asp the default for h1 elements is 2em, which means 2 times the current font-size. you set 100px for the div that surrounds the h1 element. so that 2em is never overwritten and the text ends up with 2 times 100px, which is 200px.

so you have a couple options here:

• set the font-size for the divs with these calculations in mind (50px for the main heading div, etc...). but this could be confusing down the line
• target the element directly and set the font-size that you want, overwriting the default

this all might be a bit much for now, but you'll learn more about default styling and em values in exercises to come.