QR Code component

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.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @coding-tomato
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.
- @samd1a
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!
- @correlucas
👾 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 withalign-items: center;
/justify-content: center;
andheight: 100vh;
.3.Inside the class called
.The_whole_content
insertdisplay: flex;
andflex-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!
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