Submitted over 2 years ago

QR code challenge

Padawan• 160

@soitirakis

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hello everyone. I tried to do this challenge as best as possible. If anyone can check the code quality, what can be improved? Can you check the correctness of the CSS file? There is any recommended structure or order to write from top to bottom the CSS ? Any other feedback is highly appreciated. Thank you

Community feedback

Larrie• 100

@Anirog

Posted over 2 years ago

I read that media queries should always go at the bottom of CSS.

Padawan• 160

@soitirakis

Posted over 2 years ago

@Anirog aaa I understand where was the confusion. I did not make my self clear. I have meant if there is any recommended structure for a CSS file. Like, to start with the most general style, for body, h1, h2, and after that to move on to the particular ones. Because I tend to take each element in the order of appearance in the html structure, which I don.t think is the correct way. That is what I have tried to do here

Larrie• 100

@Anirog

Posted over 2 years ago

@soitirakis I think the way you have structured your CSS in the same order as your HTML is a good way of doing it.

Introduction to CSS layout goes into more detail, but I think what your doing is correct.

Larrie• 100

@Anirog

Posted over 2 years ago

Hi, your CSS looks really clean, I used a different approach to get the card exactly in the center of the screen using viewport height, viewport width and flexbox.

.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

Link to codepen example

There is any recommended structure or order to write from top to bottom the CSS ?

In CSS the code at the bottom overrides any styles above that style, so if you had:

h1 {
 color: red;
}

h1 {
 color: blue;
}

The h1 tag would be blue.

Padawan• 160

@soitirakis

Posted over 2 years ago

@Anirog thank you for the feedback and positive approach,. I think too that the flexbox solution would have been easier. Also thank you for the example

Larrie• 100

@Anirog

Posted over 2 years ago

@soitirakis Your welcome, I am still learning flexbox but it seems to be very useful to me for getting elements in the correct place and also good for responsive design.

Padawan• 160

@soitirakis

Posted over 2 years ago

@Anirog yes, but I do not think that I have any overriding in the CSS. Have you spotted any?

Larrie• 100

@Anirog

Posted over 2 years ago

@soitirakis No I didn't see any overriding but you asked about recommended structure of CSS did you mean what styles to put starting from bottom to top?

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