Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

QR-code desktop version (basic css + flexbox)

@AkramLah

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Complete beginner here , feel free to review my css code and give me advices on how to improve (css file structure , clean code ect )

Community feedback

P

@GerardoCianciulli

Posted

There are about a dozen html tag that you may want to use on a regular basis. Selecting the correct tag helps with SEO, CSS and javascript . Looking over your html I noticed the use of div, span and section in ways that can cause you trouble for more complex projects. Example

<div class="title"> <span class="main_title">Improve your front-end skills by building projects</span> </div>

should be

<h1>Improve your front-end skills by building projects</h1>.

This helps SEO "search engine optimization" by adding a heading level 1. It also helps you with your CSS. Since you can only ever use one H1 per html you don't need to create a title class and can style the H1 directly.

Marked as helpful

0

@AkramLah

Posted

@GerardoCianciulli Thanks , indeed now that you brought that up i see how clunky my code is . I still d'ont have knowlage about SEO that's somethin a surely will loo into in the future .

0

@MeganKullu

Posted

Hey, I like your approach to the problem. You can consider placing all your tags inside the container div so that all the code is in one view as you have assigned it the 100vh height. :-)

0
Ishita 180

@ishitaraina1807

Posted

hey! you can add shadow using "box-shadow". it will make it even closer to the real design :)

0

@AkramLah

Posted

Thanks , i'll try to add that when i'll rework the project@ishitaraina1807

0

Please log in to post a comment

Log in with GitHub
Discord logo

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