Design comparison
Solution retrospective
This is my first frontend mentor challenge (i've been studying html+css recently)
Community feedback
- @StormKing969Posted over 2 years ago
Hi,
Congratulation on completing this challenge. Overall, you did well especially since you just started. Allow me to give you some tips on improving your code.
1.Instead of writing your CSS (style section) inside your HTML file, you should create a separate CSS file and link it in your HTML file underneath the title tag inside the head tag.
<link rel="stylesheet" href="./public/css/main.css">
2.I usually start off my styling by remove all the default browser styles and adding my own.
* { box-sizing: border-box; padding: 0; margin: 0; } body { font-family: 'Overpass', sans-serif; width: 100%; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; scroll-behavior: smooth; overflow: hidden; background: $very-dark-blue; }
3.I also try to stay away from hard coding size (depends on the situation) and instead use rem or em. This way, you can easily have your website responsive.
4.Use @media to style your website for different devices
@media screen and (min-width: 370px) { .container { width: 370px; } }
5.I'll also learn about display: flex and grid. Here are some links that I look at when I forget some stuff about them. Flexbox, Grid
6.Finally I learn SCSS/SASS when you have a good understanding of CSS. It's easy and it make styling a lot simpler in my opinion.
Here's a link to my version of the QR Code Component : QR-Code
Hope this helps
Happy coding
Marked as helpful1 - @shashreesamuelPosted over 2 years ago
Hey good job completing this challenge
Keep up the good work
Your solution looks great however I think that the content in the card needs some padding.
Secondly the border radius needs to be increased and the box-shadow needs to be subtle
I hope this helps
Cheers Happy coding š
0
Please log in to post a comment
Log in with GitHubJoin 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