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

HTML,Scss

#sass/scss

@LonelyBuddy

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


Second challenge completed... I really need a break. I was so close to burnout.🤣

What I did and tried in this challenge:

  • created 2 reusable minxins to create buttons and gray-pattern-blocks on the page.
  • tried using helper classes, but I didn't bother it too much.
  • used Sass partial to make code smaller

Challenge 3 is coming soon! 😉

Community feedback

@UDsGitHub

Posted

Hi Henry, I just saw your site and it looks great. My only comments would be on the first keyboard images pseudo element. I dont know if its supposed to be there or its more of a design element from the background because I have not attempted this challenge, but yeah I think that is what is causing most of your issues with responsiveness on smaller screensizes. I think just like Aakash has said above, you should add overflow hidden to your container element, but also make those pseudo elements absolutely positioned so that they dont affect the flow of other elements. I just noticed you already have them on absolute positioning, but yeah. Start first with the overflowhidden and work your way to figuring out the content spill on the smaller screens. Good luck 👍

Marked as helpful

0

@LonelyBuddy

Posted

@UDsGitHub Thanks buddy.😁

0
P
AK 6,700

@skyv26

Posted

Hi! Henry, Well done you completed this challenge and you also learnt alot from this challenge. But let me help you in increasing your knowledge.

In your mobile response, your whole layout is going outside the viewport. Make sure that you have aligned your layout horizontally, make sure your width is 100% in mobile media query and also make your outermost container with overflow: hidden.

Good luck!

Marked as helpful

0

@LonelyBuddy

Posted

@skyv26 Unfortunately, I had to take out the gray block on the right side. I have no idea why the left one works without pushing the content? I'll take a deep look later. Tx for the feedback, buddy!

1
P
AK 6,700

@skyv26

Posted

@LonelyBuddy Sure 😃

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