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

Qr using basic CSS and HTML

P

@ricarddo96

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@Lukas3162000

Posted

Hey Ricarddo96, Unfortunatly im a total beginner myself, so i can only feedback you on the size of the h1 which looks a bit too small and the left and right paddings on the content-part of your card.

The Shadow looks a bit too dark aswell, but these are only small css tweeks. I really like that your card is responsive and the border-radius goes from rounded to sharp the smaller the card gets - great work ! :)

hope that helped a bit atleast :D

kind regards, Lukas

Marked as helpful

1

P

@ricarddo96

Posted

@Lukas3162000 you helped a lot, thank you! Im a begginer too but im excited to learn more!

1
P

@tomwinskell

Posted

Here's some suggestions that I though might help.

  • One of the biggest issues I can see if the alignment of your component. It should be centred on the screen. It's worth learning how your can create layouts using flexbox. Flexbox makes it really easy to center something on the screen. Check out https://css-tricks.com/snippets/css/a-guide-to-flexbox/.
  • Nice reset with the use of * in your css. There are also pre-prepared CSS resets which you can use https://meyerweb.com/eric/tools/css/reset/.
  • Organizing your CSS into sections with comments as headers can help. This project is small but as your CSS files getter bigger and longer, sections and comments can really help. I find it has been useful to practise this with smaller projects first. For example:
// Font-styles
h1{
    font-size: 21px;
}

p{
    font-size: 15px;
    color: hsl(216, 15%, 48%);
}
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