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

CSS properties for styling, Flexbox to center my container

Hadjer Laissaouiβ€’ 160

@HadjerL

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


  • 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?

Community feedback

Lucas πŸ‘Ύβ€’ 104,580

@correlucas

Posted

πŸ‘Ύ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

1

Hadjer Laissaouiβ€’ 160

@HadjerL

Posted

@correlucas Hello Lucas, thanks a lot for your tips it is very helpful.

0
Shivaβ€’ 670

@shivaprakash-sudo

Posted

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

1

Hadjer Laissaouiβ€’ 160

@HadjerL

Posted

@shivaprakash-sudo Hello Shiva, thank you very much for your help. I will try as you said.

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