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-code component html & css

Dirkβ€’ 20

@Kerraan

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


Hi, this is my first challenge here on frontendmentor. Started learning html and css 2 months ago and wanted to practice. This is the first code i share with other people so im curious what you think. I know its a really short (and perhaps easy) challenge but its my first one and a another step in the right direction. Im eager to learn from the community and hear what you all think.

Community feedback

P
Dave Quahβ€’ 670

@Milleus

Posted

Hi there πŸ‘‹,

Congratulations on completing your first challenge! πŸ₯³πŸ‘πŸŽ‰

I have some feedback for your consideration:

  1. There are some landmark issues, you can fix it by changing the <div class="center-screen"> to <main class="center-screen">. More about landmarks here.

  2. Always have the alt attribute with <img> elements. It helps to add a text description for screen reader users. If there are decorative images, you can have alt="". More about decorative images here.

  3. Setting font-size: 62.5% on html is... .... a hot controversial topic and non-standard πŸ˜…. There's been a lot of debate about this recently on Twitter πŸ™ˆ. Be careful when using this in team projects because a lot of developers are very used to working with 16px base font size, you may incur a lot of unnecessary wrath.

Happy coding~ 😊

0

Dirkβ€’ 20

@Kerraan

Posted

@Milleus Thanks for replying! About point 3: Thanks for letting me know, i didnt know that. This is what i learned in a Udemy course. The thing i like about is, is the easy translation to "rem". So most developers use some kind of cheatsheet when tranlating px to rem?

Thanks again :)

0
P
Dave Quahβ€’ 670

@Milleus

Posted

@Kerraan I'd say a handful of developers are very used to working with "16px" as the base so translating to rem comes very naturally to them. For the weirder numbers, quick calculations can be done with the mac spotlight or calculator app.

More commonly for projects that use SCSS or SASS, there are usually (mixin or functions)[https://dev.to/nikolab/convert-px-to-rem-using- sass-3-methods-4ep2] that help to translate px to rem.

If you're using Vscode, there are also extensions that can help to convert px to rem.

I'd suggest searching "62.5%" in the Frontend Mentor slack community, there are many experienced developers that have shared their thoughts on this :)

Marked as helpful

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