Submitted about 1 year ago

QR-code challenge using bootstrap

Pabasara Jayawardhana• 40

@Pabz2020

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hello friends, this is my first challenge and I found it difficult in CSS positioning and after some attempts, I was able to do it. However, I'm still unsure about the positioning specially the footer part. I used relative positioning to position the card component and margin to position the footer part. It would be great if you can give me any comments on my positioning and its best practices.

Community feedback

hitmorecode• 6,230

@hitmorecode

Posted about 1 year ago

Congratulations well done. I took a look at what you did and you used position. In this case you don't have to use position. Make use of flexbox instead. I made some changes to fix it. Try it and it's good practice to use min-height: 100vh on the body.

body{
background-color: hsl(212, 45%, 89%);
/*     position: relative; */
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
min-height: 100vh;
    
}

.component{
/*     position:relative; */
/*     left: 40%; */
/*     top: 100px; */
padding: 15px;
width: 20rem;
border-radius: 15px;
}

.footer{
margin-top: 30px;
/*     margin-left: 550px; */
/* position: absolute;
right: 35%;
bottom: 10%; */
}

Marked as helpful

Oscar Bocanegra• 235

@obocanegra-dev

Posted about 1 year ago

Hello @Pabz2020! 👋

Congratulations on completing your first challenge on Frontend Mentor! 🎉 I want to acknowledge your hard work and dedication in achieving this milestone.

Here are some suggestions to further enhance your project:

To center the card, I recommend adding the following properties to the body selector in your CSS file: display: flex; flex-direction: column; align-items: center; justify-content:center; min-height: 100vh;. This will vertically and horizontally center the content on the screen. Once you make these changes, you can remove the margins from the footer and the card, and it should appear properly centered.

Additionally, I suggest using semantic elements instead of relying on numerous <div>s. Semantic elements like <header>, <nav>, <main>, and <footer> add meaning and structure to your HTML, improving accessibility and search engine optimization.

For the QR code image, it would be beneficial to provide a more descriptive alt attribute, such as "QR code to Frontend Mentor website". This helps provide clear context to users who rely on assistive technologies and enhances the accessibility of your site.

I also noticed that you didn't use the specified font in the design. Make sure to import the font correctly in your CSS file. You can find the import link on the font's website.

You're making great progress! Keep implementing these best practices and exploring new opportunities to enhance your skills.

If you have any questions or need further assistance, feel free to ask. Best of luck with your future projects! 🚀✨

Warm regards, Oscar

Marked as helpful

Tushar Biswas• 4,080

@itush

Posted about 1 year ago

Congratulations on completing the challenge! 🎉

Welcome to the platform! 🎉 We're thrilled to have you here and excited to see your progress 💪as you continue your front-end development journey.

Nice attempt :)

Yes, it is important to correctly understand CSS Position property to render HTML elements as per the requirement. Please note:
By default, all HTML elements are static (non-positioned elements).
By using top, right, bottom, left we can control the final location of an HTML element.
Top, right, bottom, left, z-index don’t have any effect on Statically positioned / non-positioned elements.
So, basically, we first need to convert a non-positioned element to a positioned element using (relative/fixed/absolute/sticky) then only (top/right/bottom/left/z-index) etc. will work for the targeted element.

In my projects:

I always start with mobile-first workflow.
I use at least one main element for a page (entire content goes into the main, if I'm not using header & footer), and avoid divs as much as possible and use section and article element wherever I can.

<body>
<main>
All content 
</main>
</body>

I Use relative units as much as possible and avoid absolute units whenever possible.
If you are someone who is just starting out with front-end development, I strongly suggest starting with the QR code component project(which you did). Also in the challenges page you may filter by (Newbie, HTML&CSS) sort by (easier first) to select projects that will help you solidify your foundation. To avoid any potential knowledge gap⚠️ please first solidify HTML, CSS, JS fundamentals, make few projects only with the trio and then move on to any framework or library.
I remember when I started out, I made countless mistakes and spent long hours searching for solutions. But hey, you don't need to go through the same struggles! 🙌 To help you shorten the learning curve, I recommend going through the following articles. They contain valuable insights that can make your journey smoother:

📚🔍 12 important CSS topics where I discuss about css position, z-index, box-model, flexbox, grid, media queries, mobile-first workflow, best practices etc. in a simple way.

📚🔍 11 important HTML topics where I discuss about my thought process and approach to convert a design/mock-up to HTML along with important topics like block and inline elements, HTML Semantic Elements.

I hope you find these resources helpful in your coding adventures! 🤞

I'm eagerly looking forward to seeing the amazing projects you'll create in the future! 🚀💻

Keep up the fantastic work and happy hacking! 💪✨

Please log in to post a comment

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