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

HTML and CSS with Flex Box

@djoodi

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


What are you most proud of, and what would you do differently next time?

I'm most proud of the fact that I still remember so many web development fundamentals. It's been a long time since I coded anything for web, so all I needed was the MDN docs and a quick video on flexbox to get me going. All in all, I'm proud that I finished this solution.

What I'd do different next time is try to use frameworks. I have past experience using React and Bootstrap, so I would probably use React and try to learn Tailwind if I was given this challenge again in the future.

What challenges did you encounter, and how did you overcome them?

Because I was out of practice with web development, my biggest challenge was remembering CSS attributes. I had a good idea of which properties I could change but I had to look up the docs to get it right. In retrospect, CSS is probably my weakest skill so I learned a lot with this challenge. HTML wasn't difficult at all.

What specific areas of your project would you like help with?

Since CSS is my weakest skill, I'd love to get feedback on if I'm doing things right. Are there any bad practices that I unknowingly used? Is there a better way to implement something?

Community feedback

daurygg 10

@daurygg

Posted

¡Buen trabajo, Judie! Me encanta cómo lograste crear un diseño limpio y centrado usando Flexbox, y el código es fácil de leer. También está genial que hayas usado variables CSS para los colores, eso te da mucha flexibilidad. Algo que podrías mejorar es hacer que el contenedor sea un poco más flexible usando max-width en lugar de una width fija, para que se adapte mejor a diferentes pantallas. También te recomendaría optimizar la imagen del QR para mejorar los tiempos de carga. Como mencionas que CSS es tu área débil, probar Tailwind puede ser una excelente idea para simplificar tu estilo y escribir menos código CSS. ¡Sigue así!

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