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

Tailwindcss easybank landing page

Nawal Malkiā€¢ 160

@NawalMalki

Desktop design screenshot for the Easybank landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi there šŸ‘‹, Iā€™m Nawal and this is my solution for this challenge.

This was my first time using tailwindcss .

Any suggestions on how I can improve and reduce unnecessary code are welcome!

Community feedback

P
Jeremy Helselā€¢ 670

@JIH7

Posted

Looks great! Especially considering this is your first Tailwind project. If you want things to be more exact, try using the square brackets [] notation to insert arbitrary values. I see max-[640px] in there a lot, I'm not familiar with the max utility class, but for other classes in Tailwind this is incredibly useful. If you want percentage based height or width for instance, and you aren't happy with the selection of fractions tailwind has, you can say h-[65%] to get something more specific. All units, like px, %, ems, rems, vw, etc all work with this syntax.

Marked as helpful

0

@hassaneljebyly

Posted

congrats on finishing yet another challenge, I have some suggestions and I hope they help, in the "latest articles" section put "width: 100%; object-fit: cover;" on card img tags, it will fix the problem with images not filling the whole width of the card, how ever imo putting a max width on the cards then making img elements take 100% of the width plus adding "aspect-ratio: 1;" will guarantee that your images stay the same width no matter their size, also a "justify-content: space-around; flex-wrap: wrap;" on the div containing the cards will make it more responsive with much less media queries. hopefully my feedback was clear enough... cheers :)

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