Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Your session has expired please log in again.
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Landing Page build with TailwindCSS

#tailwind-css
Elias Fung 140

@iManchai

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


Hello FEM Comunity!

This was my first time using TailwindCSS. It was a fun project to do but there were moments when I got stucked. For example working with the SVG files. Parts that I founded hard to make were the mobile menu, and to make the responsiveness of the website.

Any sugestions on how to improve my code or have better practices are welcome!

Community feedback

turtlecrab 550

@turtlecrab

Posted

Hey, great job on this one! It works great on all screen sizes(maybe except for very very wide) and is really close to the design!

Some feedback:

  • The main tag should include all the following section tags. It's semantic role is to show screen readers where the main content of the page is. More about it here
  • Bottom divs that hold images belong to the footer in my opinion, not the main. After these two fixes the accessibility warnings should be gone as all the content would be inside landmarks (header, main and footer in this case)
  • Usually we don't need to add the word "image" to alt texts of images. Here is a great article about alt-texts: https://axesslab.com/alt-texts/, it explains the topic very well.
  • And in this case I think these bottom images are purely decorative, so I'd remove alt-texts from them (<img ... alt="">). But if you think that these(or any other) images convey some information that people who don't see them should know about, then feel free to add image descriptions to alt.
  • Also a little bug: if we open the menu in mobile view and then resize the window to desktop view, then the menu stays and there is no way to hide it apart from going back to mobile screen size. This situation can happen in real life if a user goes from portrait to landscape orientation on their mobile, or if they just simply resize the window on desktop. I think adding md:hidden to <div id="mobile-menu" ... should fix this.

Hope this helps!

Marked as helpful

1

Elias Fung 140

@iManchai

Posted

@turtlecrab Ohh I see! Thank you so much for the feedback, really appreciate it!

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