Frontend Mentor | HTML and CSS coding challenge solution

Community feedback

@correlucas

Posted about 2 years ago

👾Hello The MITS, Congratulations on completing this challenge!

Great solution and great start! By what I saw you’re on the right track. I’ve few suggestions to you that you can consider to add to your code:

1.You need to include the title for you PAGE. Do that inserting in the <head> the tag <title> → <title>QR Code - Front End Mentor</title>

2.Use <main> instead of <div> to wrap the card container. This way you show that this is the main block of content and also replace the div with a semantic tag.

3.Use units as rem or em instead of px to improve your performance by resizing fonts between different screens and devices. These units are better to make your website more accessible. REM does not just apply to font size, but to all sizes as well.

4.Something that can be a time saver for you is to use a CSS RESET to remove all default settings for margins, making the images easier to work, see the article below where you can copy and paste this css code cheatsheet: https://piccalil.li/blog/a-modern-css-reset/

✌️ I hope this helps you and happy coding!

Marked as helpful

Nneoma Njoku• 1,210

@SatellitePeace

Posted about 2 years ago

Hello congrats on completing this task hers are a few things you should fix -HTML PROBLEMS

try using semantic HTML tags for example, instead of enclosing the main contents in a div enclose them in the main tag

-enclose your attribution in a footer tag

CSS Problems -the QR card is not centered on the small screen

-you wrote many lines of code for something that will take 10 lines at most so instead of

  margin-top: 10%;
  margin-bottom: 1%;
  margin-left: 42%;
  border-radius: 15px;

  text-align: center;
  width: 25%;
  height: 450px;
  background-color: hsl(0, 0%, 100%);
  align-items: center;
  justify-content: center;
  min-width: 250px;
  min-height: 380px;
  max-width: 250px;
  max-height: 350px;
} ``

You can do this

```.main__tag {
  border-radius: 15px;
  text-align: center;
  max-width:300px
  width:100%
  display: flex;
  flex-direction: column
  align-items: center;
  justify-content: center;
}

-note main__tag here refers to the class of the element containing all your sub contents which in the case should be the HTML semantic main tag

-then instead of doing this

````html {
  background-color: hsl(212, 45%, 89%);
}

-do this
```body{
  background-color: hsl(212, 45%, 89%);
  display: flex;
  flex-direction: column
  align-items: center;
  justify-content: center;
 margin: 3rem
 height: 100vh
}

-instead of this 
```.attribution {
  background-color: hsl(212, 45%, 89%);
  font-size: 11px;
  text-align: center;
  position: relative;
  top: 10%;
 
}

do this
````.attribution {
  background-color: hsl(212, 45%, 89%);
  font-size: 11px;
  text-align: center; 
}

I hope this helps

Marked as helpful

The MITS• 220

@Tachy-22

Posted about 2 years ago

@SatellitePeace thanks I'll look into it.

HTML and CSS

Design comparison

Community feedback

Please log in to post a comment

Join our Discord community