Skip to content
Submitted over 1 year ago

My FIRST solution ever! QR Code Component

Nielzon Tolentino•10
@nielzon-t
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

Hi!

Please, help me with two things:

  1. How do I center elements more efficiently?
  2. How do I build a responsive design more efficiently?

Thank you!

Community feedback

  • Jenna•230
    @NandiniCooppenPosted over 1 year ago

    Hello nielzon-t,

    Congrats on completing the QR- code challenge 👏

    To properly center the outer and inner box on the page , you may do the following changes:

    body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.outerbox {
    width: 85%;
    background-color: hsl(212, 45%, 89%);
    /* margin: auto; */
    display: flex;
    /* min-width: 300px; */
    /* margin-top: 1.5em; */
    box-shadow: -5px 10px 10px hsl(220, 15%, 55%);
    /* height: 90vh; */
    /* min-height: 400px; */
    justify-content: center;
    padding: 6rem 0;
}

.innerbox {
    /* max-width: 30%; */
    /* min-width: 275px; */
    height: 50vh;
    /* min-height: 400px; */
    background-color: white;
    display: flex;
    justify-content: center;
    flex-direction: column;
    /* margin: auto; */
    border-radius: 10px;
    box-shadow: -0.5px 1px 3px hsl(220, 15%, 55%);
    align-content: center;
    align-items: center;
    width: 340px;
}

img {
    width: 300px;
    /* height: 200px; */
    /* display: flex; */
    /* justify-content: center; */
    /* margin: auto; */
    border-radius: 10px;
    margin-top: 10px;
}

    I have added some code to center the elements on the page. I have commented /**/ some of them as they do not seem to be necessary. However you will have to adjust the code as needed to get close to the design.

    You should also specify a unit ex: 16px

    html { font-size: 16; }

    If I may suggest some other improvements :

    1. Semantic structure / Using Semantic HTML5

    Using the semantic HTML5 in your structure. To improve the document structure and in return improve its accessibility, consider using <header>, <main>, <article>, and <footer> elements where applicable. You may use semantic HTML, instead of <div>. some examples of semantic HTML : <main> , <section> , <header>,<nav>, <footer>

    3. Headings

    It is also important to always have an h1 heading in a document before any other level headings tag. Use a <h1> tag for title to provide a descriptive title.

    Helpful links:

    Read more about accessibility here

    Read more about semantics here

    Read more about headings here

    Using CSS variables

    For example, using the style guide provided, you may create your CSS colors variables as follow :

    root {
--white: hsl(0, 0%, 100%);
--light-gray: hsl(212, 45%, 89%);
}

    Helpful links:

    Read more about CSS custom properties here

    Read more about CSS Flexbox :

    Link1

    Link2

    I hope these will be helpful to you 😉

    Good luck going forward and happy coding 🙂

    Marked as helpful
    1
    Nielzon Tolentino•10
    @nielzon-tPosted over 1 year ago

    @NandiniCooppen, thank you SOOOO much for the time you’ve taken to write this wonderful reply!

    Is there a way I can get back to you? I’d like to know the rationale behind some of the codes you’ve written…

    Again, many thanks! Blessings.

    0
  • Misaponce•170
    @MisaponcePosted over 1 year ago

    Hi there, your solution looks good, by looking at your code I can see that the opening "<body>" tag is missing and I can also see that you are using flex box to align the elements which is one of the best ways to center elements.

    To build a responsive design more efficiently you can use tools like Bootstrap or Tailwind which are CSS framework mainly focus on mobile-first design.

    👍👍👍

    Marked as helpful
    1
    Nielzon Tolentino•10
    @nielzon-tPosted over 1 year ago

    Wow! @Misaponce,

    Thanks for the constructive advice!

    Will definitely research more on flexbox, as what I’ve done was a sort of trial-and-error. And, I haven’t encountered Bootstrap and Tailwind, but I will read up on them, too!

    Again, thank you! God bless you.

    0
  • Kevin Hirwa Nzitatira•40
    @hirwaNkevinPosted over 1 year ago

    Hi,

    1. Consider using the width property set to the width you want: width: 50%;
    2. Then setting the margin property to auto: margin: auto;
    1
    Nielzon Tolentino•10
    @nielzon-tPosted over 1 year ago

    @hirwaNkevin , thank you!

    Will definitely try that.

    Godspeed.

    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