Submitted 7 months ago

Beginner card challenge one with HTML and CSS

Devanshu Rana•10

@devanshu75

Preview site View code

This is a solution for...QR code component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I'm most proud of that I am able to create a scalable website which are easy to maintain. I am looking forward to write more clean and readable code.

What challenges did you encounter, and how did you overcome them?

Challenge which I encounter by solving this problem was to identity the correct font family and develop the same card which was provided in the figma

Community feedback

Khalid Benhamou•150
@5alidevPosted 7 months ago
🎉 First of all, congratulations on finishing the project! Here are some suggestions that may interest you:

1- Consider using a <main> tag instead of the <div class="card-body"> to improve the accessibility of your website. 2- In the provided styling guide, they mention that you need to use the Outfit font with these properties: for paragraphs: Font size (paragraph): 15px. 3- In line 18 of your HTML code, for your card title, you should use an <h1> element instead of a <p> tag for good HTML structuring. 4- In the provided design, the card has a light box shadow; you may consider adding it. 5- You may also consider adding a media query for mobile screens: @media only screen and (max-width: 375px) { /* Your CSS rules */ } Overall, your solution is good and closely resembles the provided design. 👍
Marked as helpful
1
Devanshu Rana•10
@devanshu75Posted 7 months ago
@5alidev Thanks for reviewing my code, It was very help for me to know my mistake.
0

Please log in to post a comment

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