HTML and CSS and JS website

Community feedback

• 

  Tyson W•305

  @Tyson-WellingsPosted over 3 years ago

  You are getting an error in your report related to landmarks. I too had the same issues with my projects. What I learned is that you must divide the body section into

  body header/header main/main footer/footer /body

  Since doing so I no longer receive this error.

  https://www.w3.org/TR/wai-aria-practices/examples/landmarks/HTML5.html

  I'm quite early on in my CSS development so I do not feel qualified to give feedback on that portion however I would like to say I found your use of REM units for text interesting. I personally would also like to utilize these units more so I would love to hear your reasoning behind their use.

  Marked as helpful

  0

  ---

  

  Anwar•375

  @Anwar11234Posted over 3 years ago

  @Tyson-Wellings Thanks for the landmarks tip.

  I like to use REM because it's relative to one thing only(which is the font size of the HTML element) so every time I size something with REM I can predict its behavior and that's not the case with EM units which is relative to the font-size of an element's parent and if the parent doesn't have a set font-size it'll be relative to the font-size of the element itself.

  For more about REM and EM I recommend this video: https://www.youtube.com/watch?v=_-aDOAMmDHI

  And for lines like this : font-size: calc(4rem * var(--scale)); that's a strategy to create fluid text using custom properties and it's good because it makes text responsive without changing mush in media queries

  Read this for more info: https://www.smashingmagazine.com/2018/05/css-custom-properties-strategy-guide/

  Also search for the Clamp() function in css

  Good luck with your css journey❤

  1

  

  Tyson W•305

  @Tyson-WellingsPosted over 3 years ago

  @Anwar11234 Bro lots of quality advice in this comment! Thanks :)

  0

  

  Anwar•375

  @Anwar11234Posted over 3 years ago

  @Tyson-Wellings My pleasure.

  0
• 

  P

  Grzegorz Sterczewski•680

  @gsterczewskiPosted over 3 years ago

  Hello Anwar 👋, my name is Grzegorz.

  Reagrding the css and accessibillity I have a few observations:

  • You could add focus state on clickable elements, so when I navigate it with keyboard I can see the same effect as with hover with mouse.

  • Headings are not in sequential order (you've skipped h2) and you have multiple h1 (there should be only one per page). Use h2 h3 etc. and style them in CSS if you need them to be bigger/smaller.

  • Consider adding the same hover state on social media links as in other links in the footer section for consistency.

  • Links in nav could also use some visual tips when you hover or focus on them.

  Your are on the right path, continue to improve your solution and you will get it perfect soon.

  Keep up the good work! 💪

  See you on the coding trail 😉

  Cheers!

  Marked as helpful

  0

  ---

  

  Anwar•375

  @Anwar11234Posted over 3 years ago

  @GSterczewski Those are some really good tips, especially this heading thing I didn't know about. Thanks for the feedback and those really nice words 🥰

  0