QR-Code-Composant

Hello Melissa 👋

Congrats! To be your first frontend development It was a very nice job. I think you achieved very well the shape of the card.

There are some margins/paddings to adjust to be equal to the solution proposed, but essentially yo did it very well.

For the next challenges, I highly recommend to you to use the design images provided by the challenge and try to compare the exactly size of components, just for layout purposes.

Keep improving, you're on the right track.

Hello @Melissa-Sadeg!

Your solution looks great!

I have a suggestion for improvement:

• For semantic reasons, use <main> to wrap the main content instead of a <div>. The tag <div> has no semantic value.

📌 This tag change does not impact your project visually and makes your HTML code more semantic, improving SEO optimization as well as the accessibility of your project.

I hope it helps!

Other than that, great job!

Hello @name!

Your solution looks great for your first time. Keep it up!

I have few suggestions that i think might interest you.

- HTML: Consider using semantic HTML tags like <main></main> and others that you can find more here in this link. And in this case, replace the <div class="bordure"> with <main class="bordure">. The main tag should hold the main content of the page so consider correcting that.

The semantic HTML tags help the search engines and other user devices to determine the importance and context of web pages. The pages made with semantic elements are much easier to read. It has greater accessibility. It offers a better user experience. <div></div> have no semantic value so using it when there's a better option is not helpful.

Also, you solution is not responsive, which makes it look not that great on mobile device. You can use media queries to make a page responsive. You can start by doing the mobile design first and then using media queries to style the desktop design like you had done. Example

@media (min-width: 1024px) {
  /*You define your desktop styles here */
}

With the example above, whatever styles you define in the media queries will be applied when it reaches the specified device width in the media query. You can learn more about media queries heremedia queries

I hope this solution is helpful

Other than that, you did a great job!

Hi Melissa-Sadeg

Congratulations on your first challenge. Here are a few points that you can have a look at

• a site should be made up of Landmark region (elements), generally you need to have the main landmark element in this challenge. Find out more about landmark regions here
• get a formatter to format your code for readability
• it is important to have your font sizes in rems , using px values is not recommended as px are not responsive. The following article will brief you more on Why font-size must NEVER be in pixels
• on the class .bordure , you are using explicit sizes like width: 320px; and height: 497px; . This will have responsive issues in some case, for example you will note that below 320px , the size will not be viewed in full. I would use max-width as that would allow the component to a certain maximum width. For the height of the component, let the elements decide how tall the component should be .

Your solution looks great!