Submitted almost 2 years ago

Responsive page

Faheem ismail• 210

@faheem4545

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Need guidance to improve my skill

Community feedback

Saulius K.• 560

@TH3RIV

Posted almost 2 years ago

What exactly are you looking guidance for?

There seem to be a few things that come to mind instantly:

The QR code image border-radius is way too big. 50% makes a circle, try maybe 10-20px.
Heading and parapgraph fonts are too big, so play around with font sizes and paragraph font color.
Margin or padding is needed in mobile version. Tip for the future, start with mobile first.

Hope this helps! :)

Marked as helpful

Melvin Aguilar 🧑🏻‍💻• 61,220

@MelvinAguilar

Posted almost 2 years ago

Hi @faheem4545 👋, good job on completing this challenge! 🎉

In addition to the previous comments here are some suggestions you might consider to improve your code:

Try to use semantic tags in your code. Click here for more information.:

With semantic tags:

<body>
   <main class="container">
      . . .
   </main>
<body>

Use an h1 tag for your solution. The <h1> element is the main heading on a web page. There should only be one <h1> tag per page, and always avoid skipping heading levels; Always start from <h1>, followed by <h2>, and so on up to <h6> (<h1>,<h2>,...,<h6>). The HTML Section Heading elements (Reference)

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

Good job, and happy coding!

Marked as helpful

Please log in to post a comment

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