Skip to content
Submitted over 2 years ago

First Challenge Complete - HTML and CSS

Louise Willoughby•80
@Louise-Ann93
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

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?

Community feedback

  • Brian Johnson•210
    @BrianJ-27Posted over 2 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
    5
  • Grace•30,910
    @grace-snowPosted over 2 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
    1
  • Travolgi 🍕•31,400
    @denieldenPosted over 2 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
    1

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