Submitted almost 2 years ago

QR Code Newbie Challenge

Tyrone Robertson• 230

@Roneeey

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

In order to get the text to match with the example exactly, I used margin on the title and text classes to make the text appear more indented in line with the image above. I also needed to ad a in the HTML before the word third last word. (See snippet below). Is there a better way to have achieved this?
Any points to make this code more effecient (besides colour variables)? I know it is probably too small of a project to add advice for this. Could I expect any formatting to be thrown out by adding css to classes that perhaps were not the best option to add them to?
Although I used flexbox.align-items property the space at the top of the page seems slightly larger than at the bottom. Is this just me?

SNIPPET FOR POINT 1. ABOVE.

<p class="text">
          Scan the QR code to visit Frontend Mentor and take your coding skills
          to
          <br />
          the next level
        </p>

Community feedback

Melvin Aguilar 🧑🏻‍💻• 61,220

@MelvinAguilar

Posted almost 2 years ago

Hi @Roneeey 👋, good job completing this challenge, and welcome to the Frontend Mentor Community! 🎉

Here are some suggestions you might consider:

1.Don't use  , the   tag is not semantic. It should never be used to add vertical spacing, it is only used in specific cases (e.g. poem or an address) also when a screen-reader reads the text it will break the text at the   tag and break the flow of reading, You could use padding or margin styling via CSS to avoid them. More Information here.

For example, you could remove the tag and add margin-inline: 1rem; to the element and you would have the same result.

2.Use margin: 0.938rem or margin: 15px in the .card selector so that it has some space when viewed on mobile devices.

3.I see it well, although to confirm with the "Inspect Element" option of your browser you can see your result on other devices and get an idea of if it is centered.

I hope those tips will help you.

Good job, and happy coding!

Marked as helpful

Jen M• 130

@jenmurph4610

Posted almost 2 years ago

Great job!

One note would be that some of your classes are unnecessary here. For example the .title class can be targeted in the CSS with the h1 selector that it already has instead .

The div 'container' can be eliminated if you use the body tag to target the same properties in the CSS as well.

Just a couple of notes on first glance. Nice job on replicating this though.

Marked as helpful

Lucas 👾• 104,420

@correlucas

Posted almost 2 years ago

👾Hello @Roneeey, Congratulations on completing this challenge!

Great code and great solution! I’ve few suggestions for you that you can consider adding to your code:

I can see that you're having some issues to setup the Github Pages. In my first days I tried to use Github Pages too but was too hard to setup, doesn't helps if you're a beginner like us.

My advice for you is to use vercel.com or netlify.com that are really easier platforms for live sets and totally user-friendly, in a matter of 5min your live site is online. All you need to do is to connect the Github account, import the repository and deploy it. Really fast.

The easy one is Vercel and is the one I use for my solution.

Fixing that you've to update the solution with the new link and we'll be able to see your live site and help you.

✌️ I hope this helps you and happy coding!

Tyrone Robertson• 230

@Roneeey

Posted almost 2 years ago

@correlucas Thank you so much, Lucas.

Haha I was indeed having trouble with github pages but I figured it, about 30 min ago, how to store multiple projects that each has its own live environment so I don't have to keep replacing a single repository. I have done some reading on netlify and vercel. Very little but will take a deeper read into it.

Thanks for your time and energy to respond to my project.

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