Skip to content
Submitted about 1 year ago

Responsive QR-Code Website

accessibility
peechidi•40
@peechidi
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

I am Proud of the fact that I could look at a design and be able to code it from the scratch, especially looking at it from figma, it is my first time for using figma to view a design. What I would do differently next time is that I will first carefully look out the required styles before I start coding.

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

I encountered a bit challenge in getting the accurate measurement. For example, I didn't know the accurate measurement to use for the border-radius though I had to create it by looking at the design then just trying and trying to see it came out almost the same.

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

I need help in really understanding my box-model.

Code

Please log in to post a comment

Log in

Community feedback

  • xNyfPtx•1,260
    @xNyfPtx

    Hi, your solution looks great but here are some issues I found in your design and code.

    1. The container is not centered vertically. #jumbotron is only vertically with margin: auto. What I would reccomend is to use Flexbox on the parent element (which is the body in this situation) and add the following lines of code to it { display: flex; align-items: center; justify-content: center; min-height: 100vh}

    You would use display: flex in order to use the second and third elements in the example. It would also enable CSS Flexbox. If you haven't learned it already, go learn it!. It makes challenges like these easier.

    Align-items center the element vertically by default but it can also center it horizontally ( we won't dive through that ), and justify-content centers the element horizontally by default (just like margin: 0 auto)

    Min-height: 100vh is just 100 of the viewport height but you could do this with any other unit (px, rem, em) and you need to set a height to the parent element to use align-items: center;.

    1. CSS Reset is not used.

    A css reset is basically a list of css code that makes your code look the same at MOST browsers (fuck you Internet Explorer). I'd reccomend using this https://www.joshwcomeau.com/css/custom-css-reset/ or https://piccalil.li/blog/a-more-modern-css-reset/.

    Other: Resources for learning box model; https://www.youtube.com/watch?v=rIO5326FgPE (video) https://www.theodinproject.com/lessons/foundations-the-box-model#the-box-model (written)

    Marked as helpful

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