Skip to content
Submitted over 1 year ago

QR Code - HTML and CSS only

Aisa Faith•10
@aisafaith
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

I did not know what to do at first. I thought I had to make the QR code from scratch (noob haha). Anyway, I figured it out soon, and I had fun doing it. I'm happy to learn how to center image vertically using flex.

I'm not sure if what I did in the text part <h2> and <p> are correct. I wanted bigger margins on left and right of the text so their extent would be narrower than the QR code. Margin-left worked, but margin-right had no effect. So I decided to put them in a text-box with a set width instead. Is there a better way to do this?

Also, because I didn't really browse this website, I did not see the note there to try to use tools like SASS. It's the first time I learned of this term, so I have to check it out. But really, why do you have to use those tools? Isn't CSS enough? Why add another step?

Feedback most welcome.

Thank you!

Community feedback

  • madosy•180
    @madosyPosted over 1 year ago

    If a css rule that you added isn't working like what you expected, it can be helpful to inspect the element using developer tools.

    For example, I added margin-right: 20px to your p element and inspected it using the chrome dev tool and the margin is showing in orange: https://imgur.com/a/Is5u4fn

    Marked as helpful
    0
    Aisa Faith•10
    @aisafaithPosted over 1 year ago

    @madosy thank you! This is a good practice.

    0
  • Daniel 👨‍💻•980
    @Daniel-BilodidPosted over 1 year ago

    Hi, my congratulations you did a great job 🎉

    𝐒𝐨𝐦𝐞 𝐭𝐢𝐩𝐬 𝐟𝐨𝐫 𝐲𝐨𝐮𝐫 𝐜𝐨𝐝𝐞 🛠

    🔹 About scss

    it is much more convenient for me to work with sсss because of the nesting of elements, check the example

    .about {

    margin: 0 230px;

margin-top: 75px;

&__img {
    display: flex;
    justify-content: center;
}

    &__btn {

        margin-top: 31px;

    display: flex; 

    justify-content: center;

}

    }

    There is an example from my code and with sccs the code is much more structuring and it is easier to group elements

    🔹 You need to put a landmark in your code

    simply wrap your code with <main> landmark

    📚 The <main> HTML element is intended for the main content (content) of the <body> of the document (page).

    I hope it was helpful, you are great, keep up the good work 👍

    Marked as helpful
    0
    Aisa Faith•10
    @aisafaithPosted over 1 year ago

    @Daniel-Bilodid That's nice! I like that feature too. It will make my css more organized. Thank you for your feedback. And also I will take note of the landmarks.

    0
    Daniel 👨‍💻•980
    @Daniel-BilodidPosted over 1 year ago

    @aisafaith glad to help you, happy coding! 💻

    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