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

QR Code (Bootstrapped)

#bootstrap

@Faris-Thibani

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View Challenge

Design Comparison

SolutionDesign

Report

1

Accessibility Issues

0

HTML Issues

View Report

Faris Thibani’s questions for the community

This project was simple and easy. Bootstrap really did most of the CSS. I find it difficult to write CSS rules... having learned bootstrap really transformed the playing field and helped me achieve the outcome. I am unsure about centring the cards without using margins and of course about the accessibility of the code. Yes, how can I write this same code without bootstrap? If you know the answer ... it will help me bridge the gap between bootstrap classes and CSS rules, leave feedback!

Community Feedback

Adriano 11,920

@AdrianoEscarabote

Posted

Hi Faris Thibani, how are you?

I really liked the result of your project, but I have some tips that I think you will like:

1- Every pages needs a <h1> to show which is the most important heading. So replace the <h2> with <h1> and follow the sequence h1-h5

Prefer to use rem over px to have your page working better across browsers and resizing the elements properly

The rest is great!!

Hope it helps...👍

Marked as helpful

1

@vcarames

Posted

Hey @Faris-Thibani, great job on this project!

Some suggestions:

  • While using Bootstrap is great, I highly recommend you stay away from it until you gain a better understanding of the HTML/CSS fundamentals.

  • To make your content accessible you wan to rewrite you Alt Tag in your QR image; It needs to describe where the QR code is taking the user when they scan it.

  • For the heading, its crucial that you do not skip headings. In this case you would use the <h1> heading.

Happy Coding!

Marked as helpful

1

P
Lucas 👾 84,530

@correlucas

Posted

👾Hello @Faris-Thibani, Congratulations on completing this challenge!

I’ve few suggestions for you that you can consider adding to your code:

1.Fix the alignment of the whole content using flex and min-height to manage the vertical alignment and make everything centered.First of all put min-height: 100vh to the body to make the body display 100% of the viewport height (this makes the container align to the height size that's now 100% of the screen height) size and display: flex e flex-direction: column to align the child element (the container) vertically using the body as reference.

body {
    min-height: 100vh;
    background-color: hsl(212, 45%, 89%);
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

2.Use relative units like rem or em instead of px to have a better performance when your page content resizes on different screens and devices. REM and EM does not just apply to font size, but all sizes as well. To save your time you can code your whole page using px and then in the end use a VsCode plugin called px to rem to do the automatic conversion or use this website https://pixelsconverter.com/px-to-rem

3.Instead of use ID to give style to your elements, use CLASS that’s better, note that with id these styles are not reusables, so prefer to use ID forms and Javascript and CLASS for styling.It is not advisable to use IDs as CSS selectors because if another element in the page uses the same/similar style, you would have to write the same CSS again.

Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/qr-code-component-vanilla-cs-js-darklight-mode-nS2aOYYsJR

✌️ I hope this helps you and happy coding!

Marked as helpful

1

Please log in to post a comment

Log in with GitHub
Slack logo

Join our Slack community

Join over 100,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!