acsgd / tea-cozy Goto Github PK

Overall met expectations.

The html is well structured and organized. You used divs, ids, and classes to organize the content.

The CSS main issue is the nav bar with the padding-left.

Display block is extra work. Usually I would recommend after typing display block for css, you go into the chrome tools and make sure it isn't part of the default. Even if it isn't, unless you see a dramatic visual difference, uncheck from the chrome tools to see if it made a real difference.

Alt texts and comments is more about best practices in accessibility and web site design.

To prepare you for the upcoming projects, use a media query to make this site fit properly on a mobile device.

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

The last set of projects will be using media queries for this purpose and this will help prepare you for them.

nav{
  text-align: right;
  flex-grow: 1;
  padding-left: 700px;
}

The very large padding left is causing this, if you get rid of it then this works. Screenshot attached.

If you work on a wide screen you wouldn't notice this.

Have matching comments in your css file, this makes it easier to line up the html and css together.

Divs, paragraphs, and headings have a default of display: block. So adding this is unneeded code as the browser would have already done this.

If you look at the screenshot below, the cross out line represents the browser default.

Include descriptive alt text in each picture, the visually impaired use screen readers to go on the web. The screen readers read this to describe the picture.