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 landing page using Bootstrap Grid

#bootstrap

@aj12-houdini

Desktop design screenshot for the Tip calculator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


This project took me a long time to complete and while completing the project I always felt the pressure of trying to complete it within a day or within a few hours. I was wondering if anybody could discuss how long it usually takes them to complete a project like this and do you prepare what you are going code or do you just jump in to start writing code. Feel free to contact me on Twitter: https://twitter.com/redpack457

Community feedback

@SGautam1108

Posted

Hi @aj12-houdini. For me, I did this project in 3 days, ofc, with breaks and classes in between. To improve the solution, there are few things I recommend-

  1. Try your solution without Submit button, that is what makes it truly a thinking based challenge
  2. Give more attention to details. E.g. The text used in multiple places appear to be bolder in design so use font-weight property. You can keep the designs provided at your side and use Chrome dev tools to open responsive mode (Ctrl+Shift+M in Windows)
  3. You can use <header>, <footer> and <main> tags inside <body> tag as required by FEM. These are the landmark tags and you must have one. It's best practices. Similarly, with each input you must have a <label> tag instead of <h4> you have used.

For now, these will help you out to get the basics right! All the best!

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