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

Responsive Huddle Landing Page /Curved Sections

keziarktsβ€’ 370

@keziarkts

Desktop design screenshot for the Huddle landing page with curved sections coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello~ Interesting challenge but not that so easy.

My problems here:

  1. Handling the different curves around the sections for the desktop and mobile version. I guess there is a way to make it more efficient for the code here. Any suggestions are all welcome^^
  2. For a 375px<page width<1440px, the rendering is really strange when it comes to sections with curves. In this challenge, should we worry about the design for a width included between these 2 values or not?

Thank you & Happy coding! 😊

Community feedback

Vanza Setiaβ€’ 27,795

@vanzasetia

Posted

Hi, @keziarkts! πŸ‘‹

About your questions:

  • You have done a great job with the curve background patterns. You decided to make them as background images for each section. You should have done the same thing for the curve background pattern of the <footer>.
  • The sizes on the style-guide.md have nothing to do with the media queries. They are telling you that "this is how your website should look like at these screen sizes". As a front-end developer, you should make your website looks good at all screen sizes, including smaller, larger, and everything in between.

I have some suggestions to improve your solution.

  • Any words that are related to "image" (for example, picture, photo, logo, icon, graphic, and avatar) should not be included in alternative text.
  • For images containing text, make sure the alternative text includes the image's text. In this case, the Huddle logo should have an alt value of β€œHuddle”. Reference: Checklist - The A11Y Project #for-images-containing-text-make-sure-the-alt-description-includes-the-images-text
  • Not every image needs alternative text. Decorative images should not have alternative text (alt=""). This will tell the screen reader to skip over the image. As a result, it saves screen reader users time navigating the page.
  • For your information, decorative images are images that don't add any information and serve only aesthetic purposes.
  • Use CSS to uppercase the text. It is not recommended to uppercase it manually within the HTML. Screen readers might spell the uppercased word in the HTML (spelled letter by letter).
  • Use one @import rule to import both Google Fonts. Even better, I recommend using <link> tags to improve the page performance.

I hope my suggestions help you. Happy coding! πŸ˜„

Marked as helpful

2

keziarktsβ€’ 370

@keziarkts

Posted

@vanzasetia thank you for your feedback and suggestions! πŸ˜ŠπŸ‘

0
Vanza Setiaβ€’ 27,795

@vanzasetia

Posted

@keziarkts

You are welcome! πŸ™Œ

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