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

Office-Lite Coming

@leoimewore

Desktop design screenshot for the Officelite coming soon site coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


On this project, I found creating the custom select drop down very difficult. I couldn't easily change the style of option element.

If i can get feedback on making a custom drop down for future projects, i would appreciate.

Community feedback

Vanza Setia 27,795

@vanzasetia

Posted

Hi, Leonard Isaac! 👋

Congratulations on finishing this challenge! 👏

I agree that creating a custom select element is difficult. Also, there's currently no way to style the option element. There is the selectmenu element which you can style. But, it only exists on the Canary version of a Chromium-based browser (Edge, Chrome).

For now, you need to either use the native select element or create a custom select element with accessibility in mind. I recommend using the select element. Creating accessible custom select element is hard (required a lot of JavaScript and testing).

I have some feedback on this solution.

  • As you can see on the design comparison, the site is larger than the original design. I suggest adjusting the styling of the site. Try to make the site looks as close as possible to the original design.
  • On the Sign Up page, there's no h2 element even though h3 exists. Headings must be in a logical order. Users of assistive technology can use heading tags to navigate the website. If headings are not in a logical order, those users can get confused.
  • The home page and the sign-up page have some HTML issues. You can see all the issues for the home page on the Frontend Mentor report page. For the sign-up take at "Showing results for https://leoimewore.github.io/Officelite-Coming/sign-up.html - Nu Html Checker".

I hope this helps! Happy coding! 😄

Marked as helpful

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