Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

HTML and CSS and JS website

Anwarโ€ข 375

@Anwar11234

Desktop design screenshot for the Sunnyside agency landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


I would love feedback on my CSS code quality also, any note about accessibility would be great

Community feedback

Tyson Wโ€ข 305

@Tyson-Wellings

Posted

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

@Anwar11234

Posted

@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-Wellings

Posted

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

0
Anwarโ€ข 375

@Anwar11234

Posted

@Tyson-Wellings My pleasure.

0
P

@gsterczewski

Posted

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

@Anwar11234

Posted

@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

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord