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

Mobile first dev with Sass, no script

John Norman• 880

@norman02

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


Feedback welcomed!

Community feedback

Vanza Setia• 27,855

@vanzasetia

Posted

Hello, John! 👋

Congratulations on completing this challenge! 🎉

Some suggestions from me.

  • Write your code with a consistent style (e.g. the indentation, quotes, whitespace, etc). If you write your code that way, it will make it easier to read for everyone (including your future self).
  • I recommend using code-formatter like Prettier to make the codebase has a consistent format.
  • Don't use aria-label when there's text content. For example, if the link has already the visible "Try for Free" text, there's no need for aria-label="try for free". The same goes for the other elements that already have visible text content as the label.
  • The countdown number should not be h2 elements. Not only that, I recommend wrapping the countdown as a paragraph instead. Then, wrap each text with span to style them differently.
  • At the 702px width, the "Get Started" button in the footer is too narrow. I recommend trying to adjust the media query breakpoint.

I hope this helps! Happy coding!

1
P
tediko• 6,580

@tediko

Posted

Hello, John Norman! 👋

Well done on this challenge! 🎉 Here's a few things I'd suggest you to take a look at:

  • Instead of using border for :focus pseudo-class state use outline. It will create same effect but doesn't make your box grow and it will prevent site from shaking like it is now. Properties such as outline and box-shadow don't affect the size of our box.

Keep up the good work! 💪

1

John Norman• 880

@norman02

Posted

@tediko Thanks for the tip!

0
Haythem Lazaar• 60

@HaythemLazaar

Posted

Looks nice John, nothing feels wrong. you did a very good job, the only thing I would've added is some kind of interaction with the cards maybe when hovered it scales a bit.

1

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