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

A simple card layout by the help of bootstrap

kush452 20

@kush452

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


As a beginner it took me much time to build this simple cards website even when using bootstrap

So I would like to hear your recommendations on how can i improve myself on it

Community feedback

Dreamleaf 230

@Dreamleaf

Posted

Good job, there is so much to learn as a beginner.

I would suggest that you skip using a framework like Bootstrap for your early learning and instead learn to write the CSS by hand. Doing this will help you understand what Bootstrap is doing and how best to use it.

This is a relatively simple design to achieve, and for the most part your html structure has identified the key sections to target. I personally prefer to use GRID for layouts, you can see a primer for that at this link. There is a lot of information there, and once you get familiar with it, you should be able to feel confident in jumping straight in writing your own CSS.

You should also be (gently) critical when comparing to designs, take care to try and match as much as possible. Obvious differences between your version and the original design are size of padding around the QR code and text alignment. Both are really easy to change, and will give you a sense that you are learning more. Search for text-align and also CSS box model - they should give you some good information.

Hope these pointers help.

Marked as helpful

2

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