webgodess / prj-rev-bwfs-tea-cozy Goto Github PK

All images should have descriptive alt text. The visually impaired rely on alt text through the use of screen readers on their computers and mobile devices.

Overall met expectations.

You were close visually to the mock. Visually, your issues had to do with not constraining your divs with width and centering it. The other issues are more on fundamentals and some common conventions on building a website. These mistakes are common in the beginning and go away with some experience.

To prepare you for the final projects, look at media queries. See if you can make this site fit inside of a mobile device by using one. You will be doing this heavily in your final projects.

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

The only time you use the .item class in your CSS was to target the image, why not give the image a class directly? Specificity might make a difference when your projects are larger in complexity.

All divs by default have display: block. This is redundant and unnecessary to write. A use case for when want to display: block a div, typically happens you used a different display option and need to change it back to block for a media query. You will be doing this heavily in these final projects.

Currently, the path to your CSS file is linked directly to your computer. Unless I am physically at your computer, your CSS won't be viewable and it will not work on any web servers. This is how it looks like on my screen.

In general, you want to use the relative url, that is in relation to the location of the file you write this in. Your link corrected below.

Screenshot below. If for some reason you didn't notice this and you were programming on a small laptop, realize that they tend to have lower resolution screens. Have to program as though people have different screen sizes and be mindful of that. Also, You have to think as div as the main container for each section and the reason why I am mentioning this is that you set the width of your .our class to 1200px, but you didn't do that for the mission div. As a result, the div stretches out like this. Had you done this with the mission class everything inside of that would say at that within width.