Submitted
QR code component solution
- HTML
- CSS
What are you most proud of, and what would you do differently next time?
I'm most proud that I managed to finish this challenge :) Next time, I might separate CSS from the index.html file and maybe use some variables (or even SCSS) for styling.
What challenges did you encounter, and how did you overcome them?
I had a problem with centring the card both vertically and horizontally. I found some articles about using flex
to do this, but the default margins and padding messed it up a bit (creating additional space so that scrollbars were active).
I've used a "hack" with *
to reset those, but I'm unsure if this is the right approach.
I've also had an issue with properly sizing the text elements on the card - the style guide said the paragraph size should be 15px, but there was no mention of the size for the header. I had to download the Figma file to check the proper size so I could mirror the design as closely as possible.
What specific areas of your project would you like help with?
- I'm not sure if the HTML structure I came up with is the right approach. I tried not to overuse
div
elements, I reached for tags likemain
andsection
to give it more semantics although I worry that this is overkill for the example in the challenge. Any feedback is appreciated. - I had a problem with centring things and I've used
flex
to solve it - what is the best approach here? I've usedheight: 100vh
on the container to fill the whole viewport so it is also centred vertically - is this how it's supposed to be done? - Is the naming of the classes in the CSS fine? I've always struggled with naming them and I went for naming by the "component" they describe.