Skip to content
Submitted almost 3 years ago

CSS properties for styling, Flexbox to center my container

Hadjer Laissaoui•160
@HadjerL
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

  • How to know much padding, margin, font-size just from a picture?
  • What do you think is the best practice for a beginner?
  • How do you organise your work in projects?
Code

Please log in to post a comment

Log in

Community feedback

  • Lucas 👾•104,160
    @correlucas

    👾Hello Hadjer, congratulations for your first solution and 😎 welcome to the Frontend Mentor Coding Community!

    I can see that you're having some issues to setup the Github Pages. In my first days I tried to use Github Pages too but was too hard to setup, doesn't helps if you're a beginner like us.

    My tip for you is to use vercel.com or netlify.com that are really user-friendly platforms for live sets and totally user-friendly, in a matter of 5 minutes your live site is online. All you need to to is to connect the Github account, import the repository and deploy it. Really fast.

    The easy one is Vercel and is the one I use for my solution.

    After you do that I'll be able to see your solution live site and we'll help you bro!

    👋 I hope this helps you and happy coding!

    Marked as helpful
  • Shiva•670
    @shivaprakash-sudo

    Hello Hadjer,

    • There's a style-guide.md file in every project on this site. In that there would be different type of styling guides for the project like font size, colours, font family, etc. Try checking out that first for the base styles.

    Regarding padding and margin, we can't say exactly what the value would be, from a design, but we can do trial and error to see what value is the closest one which matches the design.

    • Try playing with different CSS values for particular property like padding or margin and see how it effects the overall design. Try doing this with various properties and you'll start to get how these things work and how to approach a design.

    • For small projects like this, we don't need much organisation of files, but as projects become bigger, try researching which type of project structure would be good for the tech stack you choose.

    • Try to research about the usage of semantic tags to make your site more accessible.

    Keep up the work! Aim higher and try to reach for it.

    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