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

Flex, max/min width, font CDN

@drjrodriguez

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


I learned about HSL and how it relates to RGB, which was very interesting. I added the box-shadow too. I like little details like that.

I wondered about the font import. I went back to the google font page and used their cdn code. Maybe that was what I was supposed to do anyway, but from the specification, I wasn't sure. And the @font-face rule didn't work because of a CORS error. But with the google font link code, everything was fine.

I built the whole thing using flex and tested it on various sizes. It transitions smoothly at all sizes, so I didn't see a specific reason or way to use the responsive widths indicated. If I was restacking or arranging based on width, that would have been different. I'm not sure what I was supposed to make of that.

Community feedback

Rino 340

@Rhinozer0s

Posted

Hi coder, 👾

your solution is great! You have a good eye for the details. I have some recommondation for you.

Grid & Gap

Remove the margin of your <p> elemets. It is a popular technic to remove the margin of all elements before you start styling. To create the distances you could use the gap property in combination with display: flex; or display: grid; This could look like this:

*{
margin: 0;
padding: 0;
}

.modal{
display: flex;
flex-direction: column;
align-content: center;
row-gap: 1rem;
}

Semantic HTML

Also you sould use semantic html tags like <main> for your modal or <h1> for your headline. Here you can read more about that: https://www.w3schools.com/html/html5_semantic_elements.asp

I hope you find this helpful 🤝😉

2

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