Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted about 3 years ago

First Challenge Complete - HTML and CSS

Louise Willoughby•80
@Louise-Ann93
A solution to the QR code component challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


As my first frontend mentor challenge I thought i'd start small, a small component with just HTML and CSS. This was my experience;

Challenges I faced:

  • I've definitely become accustom to the luxury that is VueJs and Tailwind CSS frameworks. It was like muscle memory to type in a tailwind class just to tweak some margin, in reality it was much back and forth between style sheets. I had to google more basic css than i'd like to admit.
  • Importing the font was new to me, it's not something i've done before. Seems simple enough, in practice it didn't want to play ball at first.
  • Being on one monitor, just my laptop it was quite difficult to look by eye if my sizing was completely right, too much or too little padding in places?
  • At the end i worry i may have over complicated it a little.

Take aways;

  • Great experience again with HTML and CSS, made me realise how comfortable i had gotten and not in a good way.
  • Made me excited to take on more challenges.

Now i know there was no right way in completing this challenge but i would please appreciate someone taking a look and letting me know what i could have done either better or was there a way i could have simplified things? Over use in CSS that i maybe didn't need?

Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

  • Brian Johnson•210
    @BrianJ-27
    Posted about 3 years ago

    Hi @Lou I think you did a good job here but I wanted to show you something. If you open up your inspector tool, you'll notice your content is not going to the bottom of the viewport page. This explains why your card is not perfectly center on the page. How do you fix that? Here's how:

    1. first remove all flex styles from the <body> tag. I know it sounds a little weird, but trust me on this. ;-)
    2. Next you have a <div> tag that has no class associated to it. What I would do here is first change that <div> tag to a <main> tag for accessibility reasons, then cut the class="container" you have on the one div and paste it on the <main> tag. Then rename that class from container to `class="card" because that's what it is. Let me visually show you what I mean.
    <body>
       <main class="container> // changing your div tag to a main tag
           <div class="card"> // rename your class from container to card
               <img src="images/image-qr-code.png" alt="QRCode" class="qrcode">
               <h1>Improve your front-end skills by building projects</h1>
               <p>...content </p>
           </div>
       </main>
    </body>
    
    1. Now on the class="container" add min-height: 100vh. What this does is, makes your container content area go all the way to the bottom of the page. Next you add back those flex properties, display: flex justify-content: center align-items: center . Once you write those flex styles, this will perfectly center your card on the page! you can then remove the margin-top: 100px style bc you won't need it.

    2. another thing you want to think about is using rem units in lieu of pixels. Pixels are fixed units and don't play well with making responsive layouts so try to think about this for future projects.

    3. on your img styles, you don't want to use fixed pixel widths because your image won't scale. On the width I would use max-width: 100% in lieu of width.

    Sorry I wrote a lot of things to change but try to implement these things and see if it helps you :)

    Marked as helpful
  • Grace•32,130
    @grace-snow
    Posted about 3 years ago

    Looks like you've had some great feedback already. Definitely follow it!

    I'll only add 2 extra tips to the above:

    1. Very important to rewrite the alt text on that image. It needs to be human readable (it's readable content not code) and describe the image more. Eg "QR code to frontendmentor.io"

    2. Whenever you use target _blank, make sure you also include rel="noopener". This is a security essential for external links. It prevents the opening page to gain any kind of access to the original page. Here's some extra info about it, if you're interested https://web.dev/external-anchors-use-rel-noopener/

    Marked as helpful
  • Travolgi 🍕•31,320
    @denielden
    Posted about 3 years ago

    Hi Louise, great work on this challenge! 😉

    Here are a few tips for improve your code:

    • add main tag and wrap the card for improve the Accessibility (you can replace the first child div of body with it)
    • remove all unnecessary code, the less you write the better as well as being clearer: for example the html comment
    • remove margin-top from container class because with flex they are superfluous
    • add justify-content: center flexbox property to the body to center the card vertically. Read here -> best flex guide
    • after, add min-height: 100vh to body because Flexbox aligns child items to the size of the parent container
    • instead of using px use relative units of measurement like rem -> read here

    Overall you did well 😁 Hope this help!

    Marked as helpful

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
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

How does the accessibility report work?

When a solution is submitted, we use axe-core to run an automated audit of your code.

This picks out common accessibility issues like not using semantic HTML and not having proper heading hierarchies, among others.

This automated audit is fairly surface level, so we encourage to you review the project and code in more detail with accessibility best practices in mind.

How does the CSS report work?

When a solution is submitted, we use stylelint to run an automated check on the CSS code.

We've added some of our own linting rules based on recommended best practices. These rules are prefixed with frontend-mentor/ which you'll see at the top of each issue in the report.

The report will audit 1st-party linked stylesheets, and styles within <style> tags.

How does the HTML validation report work?

When a solution is submitted, we use html-validate to run an automated check on the HTML code.

The report picks out common HTML issues such as not using headings within section elements and incorrect nesting of elements, among others.

Note that the report can pick up “invalid” attributes, which some frameworks automatically add to the HTML. These attributes are crucial for how the frameworks function, although they’re technically not valid HTML. As such, some projects can show up with many HTML validation errors, which are benign and are a necessary part of the framework.

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Frontend Mentor for Teams

Frontend Mentor for Teams helps companies and schools onboard and train developers through project-based learning. Our industry-standard projects give developers hands-on experience tackling real coding problems, helping them master their craft.

If you work in a company or are a student in a coding school, feel free to share Frontend Mentor for Teams with your manager or instructor, as they may use it to help with your coding education.

Learn more

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub