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

My second project on Frotend Mentor

P
The Burrito Doggie• 1,260

@BurritoDoggie

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


Hello everyone.

I am a kid in 7th grade trying to learn code.

I finally uploaded my second project!!!!!! ^^

(On my last project APG helped me, but this time I did this challenge by myself)

I'm also not a Pro at coding so I'm expecting a lot of correction! 😆

Feedback will be appreciated!!!

Community feedback

Tesla_Ambassador• 3,000

@tesla-ambassador

Posted

Hey Burrito Doggie! I am happy that you have finished your second project all on your own! 🥳 the accessiblity issues have already been addressed by @TheCoderGuru. Your CSS is much better seeing that you have obtained a clearer understanding of flex! I just have a few tips to point out.

  1. You could consider adding a padding around your card component instead of giving all those paragraphs margins therefore they won't cling onto the walls of their parent container (the card).
  2. Incase you apply align-self: center and it doesn't work, try setting a height attribute for the parent component of the items you would want to center. In your case, you can just wrap the card into a main tag like this:
<main> <div class='card'>...</div> </main> Then you could set the height of main to "100vh". You will then be able to align your items to the center hence eliminating the need for you to use "margin-top". The reason why you need to set the hieight is because the default height property is auto and it sets the height to fit all the content within you div therefore, in some cases you may not be able to align your items on a vertical scale.

Marked as helpful

3

P
The Burrito Doggie• 1,260

@BurritoDoggie

Posted

@tesla-ambassador

Heyyyyy!!!! Thank you sooo much for the feedback!!!!!! I really appreciate it!!!!

0
P
ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted

🤩 LOVE IT 😍

Marked as helpful

2

P
The Burrito Doggie• 1,260

@BurritoDoggie

Posted

@ApplePieGiraffe

Thank you!!! ❤️

1
Shashree Samuel• 9,260

@shashreesamuel

Posted

Great job completing this challenge

Keep up the good work

Your solution looks great however I have some recommendations regarding the design aspect

  • The title and the description are supposed to be a heavier font weight, I recommend rechecking the style-guide.md file to be sure.

In terms of your accessibility issues

  • Document should have one main landmark, this is caused by a semantic <maintag not being present in your markup, simply wrap all the content between the body element within main tags since it will identify that a main content exists thus resolving all the errors.

In terms of your code, I think that the paragraph element for the title should be a h1 since it's like a heading in the card. This will resolve your second issue where your document needs a level one heading.

Read more on html semantics.

Hope this helps

Cheers

Marked as helpful

2

P
The Burrito Doggie• 1,260

@BurritoDoggie

Posted

@TheCoderGuru

Heyy!! Thank you sooooo much for the feedback!!! I really appreciate the time you took to take a look at my project and, I certainly learned something new today!

^^

1
Anna Leigh• 5,135

@brasspetals

Posted

Hi Alyssa! 👋

It’s so awesome to see you finally submit another solution! Sorry I’m a bit late to comment (been ill, but better now!). You’ve already gotten some great advice from Tesla Ambassador & Shashree. I agree that instead of the two margins on the image, you could simply add margin: 15px to the card, and then add any extra needed margin/padding for the text to the .paras div. Semantically the first paragraph should be some sort of heading (h1, h2, etc.) rather than a p tag, as Shashree already mentioned.

The only "new" piece of advice I have is typically it's best not to have a set height for elements, letting the content determine height instead. This helps to avoid overflow issues. For example, try adding more text to the second paragraph, and you'll see that the text will soon overflow the card. However, if you remove the height from the card or switch it to min-height, the card will expand with the text.

Again, great to see you submit another solution and looking forward to the next one! 😄

Marked as helpful

1

P
The Burrito Doggie• 1,260

@BurritoDoggie

Posted

@brasspetals

Hiiii Anna!!

Thank you so much for the feedback! I reallllly appreciate it! I will apply the min-height property in my future projects! You have given me very helpful feedback!!

Have a good day! ☀️

1

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