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

P
Sayed Ali 80

@sydalwedaie

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 guess I had my first proper CI/CD setup! Here's my process at the moment:

  • Initialize local repo.
  • Work on the project, commit changes along the way.
  • When finished, run gh repo create (a GitHub CLI tool). This would create a remote repo, connect it to the local repo and push the commits to the remote repo.
  • Run netlify init (a Netlify CLI tool) to create a new Netlify website from the newly created remote repo.

With this setup, I never leave the terminal! Even better, any changes I make to the local repo can update the live website using a simple git push command.

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

Vertical centering has become much easier with Flexbox. However, it gets a bit tricky when flex direction is vertical. I gave the body a hight of 100vh, so I could use the Flexbox vertical centering technique. Otherwise, justify-content won't work when in vertical mode.

Community feedback

Ben Chi 80

@BenTheChi

Posted

Looks great. Way better organized then mine. So think it's all good. I did more inline styles and an embedded style, but yours is a more proper way.

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