Skip to content
Submitted over 2 years ago

QR Code component

Mostafa Karem•80
@Mostafa-Alfiky
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

This is my first project in frontendmentor,

As a beginner, I faced a lot of problems I could not solve and raised a lot of questions, those are some of the issues I faced and I will be very happy if you help me solve and understand them:

1- My project looks a bit bigger when hosted on github than the original project 2- It was difficult to position elements vertically, I used position, left, top, and transform properties, but I could not understand them in-depth enough to feel comfortable with using them freely, so if you have a link to a course or a book that makes it easy to understand positioning, I would appreciate your help. 3 -What are your tips to write clear code?

I faced a lot of technical issues, But there are a lot of helpful developer communities that make it easier to find the answers, and I am happy I joined that huge community as a beginner developer.

Community feedback

  • Orlando Guevara•220
    @coding-tomatoPosted over 2 years ago

    Hello!

    Regarding your question about tips to write clear code, I highly recommend to study the BEM convention to write CSS. Can't state how much more predictable, debuggable and reusable my code now is thanks to it.

    https://css-tricks.com/bem-101/

    The concepts to implement it are rather simple and although they increase boilerplate due to more classes being created (which can be reduced with a preprocessor such as Sass), I found the benefits to outweigh any cons it might have.

    0
    Mostafa Karem•80
    @Mostafa-AlfikyPosted over 2 years ago

    @coding-tomato Thank you, Orlando.

    0
  • Sam•230
    @samd1aPosted over 2 years ago

    Hello Mostafa Alfiky, Good work finishing your project it looks great!

    An easier way to centre the card is to use flexbox:

    display: flex;
justify-content: center;
align-items: center;

    Also, in most cases, I only recommend setting a max-width rather than a fixed height allowing for different screen sizes to be responsive aswell.

    A good place to learn more about CSS is Kevin Powell's videos. Hope I can help a bit!

    0
    Mostafa Karem•80
    @Mostafa-AlfikyPosted over 2 years ago

    @samd1a Thank you sam. that is a great tip, I will modify it.

    0
  • Lucas 👾•104,340
    @correlucasPosted over 2 years ago

    👾 Hello Mostafa, congratulations for your first solution here in FEM!

    Look, I saw your commentary where you said you've used position: relative; to center the card, although this works I think is better you use FLEX or GRID to manage the content and also because it's modern CSS.

    Here's some tips:

    1.You've used <main> to wrap all content, so there's no need for another div to wrap the qr code image and the text, just delete the other div and paste the class inside <main>.

    2.Use flexbox to align the container inserting display: flex; inside the body and align with align-items: center; / justify-content: center; and height: 100vh;.

    3.Inside the class called .The_whole_content insert display: flex; and flex-direction: column;to set the container content vertically.

    If you're not familiar to flexbox, you could play this game that explain all flex properties and you can understand really easy how to align content: https://flexboxfroggy.com/

    Hope it helps, keep it up!

    0
    Mostafa Karem•80
    @Mostafa-AlfikyPosted over 2 years ago

    @correlucas Thank you for the awesome feedback.

    0

Please log in to post a comment

Log in with GitHub

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