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 Using Custom CSS Variables and CSS Grid Properties

P
Jan 160

@Negligence

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

LeikoRed 10

@LeikoRed

Posted

I see you are using:

not(ul, ol, li) {margin: 0; padding: 0;}

since it targets all elements except ul, ol, and li, setting their margin and padding to zero. It'd be prefered to use the universal selector. The :not selector is used for more specific cases where you need to exclude particular elements, but in this scenario isn't necessary because you don't use ul, ol or li.

*{
margin: 0;
padding: 0;
}

It is good tho

0

P
Jan 160

@Negligence

Posted

Hi @LeikoRed 👋🏻

Me using not(ul, ol, li) {margin: 0;} was born from me wanting a shorter selector to target instead of using body, h1, h2, h3, h4, h5, h6, p {margin: 0;} to remove margins.

My personal preference is to reuse the initial lines of code in /* #region Defaults */ over and over across multiple projects so I no longer have to worry about overwriting margins for these commonly used elements [body, h1, h2, h3, h4, h5, h6, p].

While I did consider using the shorter * {margin: 0;}, it just personally felt weird to me when my lists did not have their default indentation in other projects like Recipe Page

With the wildcard selector * literally selecting everything, I don't want to have to worry about moments where certain html elements not looking right without their margin and padding.

This is just me being lazy, but I'm going to keep my not(ul, ol, li) {margin: 0;} selector for now until I find something better 😂

Thank you for the comment though 🙌🏻

0

@ElianPujols

Posted

Espero que tengas esto en cuenta. La solucion esta correcta, pero un punto en el codigo es la cantidad de comentarios repetidos que tiene, en realidad no interfiere directo con el codigo pero es algo que a mi opinión se debe de utilizar en la menor medida posible...

0

P
Jan 160

@Negligence

Posted

Hi @ElianPujols 👋🏻

I appreciate your comment.

Upon reviewing, it seems that the repeated comments that you were referring to are the regions I have put in place to organize my code.

/* #region */ and /* #endregion */ are custom markers to enable code folding for longer lines of code.

I find it incredibly convenient to collapse all of the regions at once using Ctrl+K Ctrl+8, then unfold only the current regions I am working on.

It visually declutters my screen and allows me to focus on one code section at a time.

This is a personal preference of mine and is subjective though, so we might not be on the same page on the matter.

Here's where I learned it: Region Code Folding

0

@ElianPujols

Posted

Hola @Negligence Gracias por la aclaración y una disculpa...

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