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

Typemaster pre launch landing page (mobile first)

Jérémy 1,020

@jrmydix

Desktop design screenshot for the Typemaster pre-launch landing page coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


If you have any feedbacks, I'll take them 🙂

Community feedback

Rio Cantre 9,690

@RioCantre

Posted

Hello there! Awesome work with this challenge. Looking at your solution, I think you should know the following as well…

  • There are possibilities to add more semantic tags. For instance, this line <div class="header__grid--right"> can be wrap with figure tag and this one <div class="main__title--text"> with section . But everything is looking great and well used of most common semantic tags.
  • The code is clean and well structured.
  • Try viewing around 1116px viewport, the images in the .main__imgs rule set have justify-content: space-between;, change it with justify-content: flex-start;. Since the main header image is transitioning from left to right.
  • Well use of Sass in styling, specially the compositions
  • I think you could try adjusting the Flexbox in 696px viewport for the .main__title--text rule set and set the main ul rule set with text-align: center; or justify-content:center;. If your using mobile first, try adding another breakpoint or increase the size
  • The details of the design are well implemented based on the original design

Above all, the project is well implemented. Keep up the good work!

Marked as helpful

1

Jérémy 1,020

@jrmydix

Posted

@RioCantre Thank you very much for your feedback!

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