Submitted almost 2 years ago

A bigger QR-code with a simple hover state footer

Cameron Dick• 20

@CTDck

Preview site View code

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Updated solution trying to incorporate suggested fixes. I have still go no idea on the size of the project soooooo I mightve eyeballed it :D.

Cheers.

Community feedback

Snehamoy Bag• 600

@snehamoybag

Posted almost 2 years ago

Great Job Cameron 🙌 Congratulations on completing your first challenge 🙌

And yes it is better to markup your html first then do the css, well atleast some of the basic structural html (i.e. divs, h1, paragraph etc). You can later change, add, remove or edit the html if you have to 😄 and it is completely normal for a web developer to switch between tabs again and again in order to make sure everything looks and works fine.. so don't worry about it 😁

Marked as helpful

Cameron Dick• 20

@CTDck

Posted almost 2 years ago

@snehamoybag Got it, HTML stuffs first, styling later then hop back between them. Much appreciated thank you!

Cheers!

Abdul• 8,560

@Samadeen

Posted almost 2 years ago

Hey!! Cheers 🥂 on completing this challenge.. .

Here are my suggestions..

You should use <main class="container"> instead of <div class="container">.
You can wrap your attribution section in a footer tag to avoid accessibility issues.

This should fix most of your accessibility issues

. Regardless you did amazing... hope you find this useful... Happy coding!!!

Marked as helpful

Cameron Dick• 20

@CTDck

Posted almost 2 years ago

@Samadeen Thanks for the suggestions! I will take a look into updating it with the above. Is it standard practice to always, within <body> tag, split things up into 3 tags, namely <header> <main> and <footer> ? At the moment Im only really familiar with the <div> tag.

Cheers!

Danilo Blas• 6,300

@Sdann26

Posted almost 2 years ago

Hello Cameron!

Your layout is pretty good but in style-guide.md when they say that the font-size is 15 px they mean the font-size of the paragraph so the text was 15 px and the title was bigger. That's why your design is quite small, otherwise it would be the same.

It is not very relevant but it is good to take it into account because a font size of 11px is very small even for cell phones.

By the way it is quite normal to have to change views when doing CSS and HTML layouts, some even have two screens to see how the project is changing while coding.

One last thing, whenever you finish uploading a challenge, always check the report generated by frontend mentor to see what the reasons were because they usually guide you to avoid HTML and accessibility problems. In your case you have 3 problems but they are easily solved. You only have to add a <main> tag inside the body that includes all your main content, in this case the card.

Then your HTML will look like this:

<body>
   <main>
      ...
   </ main>
</ body>

I hope these comments help you

Good coding :D!

Marked as helpful

Cameron Dick• 20

@CTDck

Posted almost 2 years ago

@Sdann26 Thank you for the feedback! So essentially the <main> tag is like a special <div> tag? Similarly for the <footer> and <header> tags? Oh and I believe I can resize all the text in the container using the font-size property as it should (I think) affect all the separate texts simultaneously?

Cheers!

Danilo Blas• 6,300

@Sdann26

Posted almost 2 years ago

@CTDck Exactly, the difference between a <div> and a <nav>, <header>, <aside>, <main>, etc. is not much when it comes to styling it with classes or functionalities with JS. However for the SEO of the page if it is relevant because they are semantic tags, ie that according to its name have a specific use. The div's were created to not abuse semantic tags and give style to things because sometimes they are necessary when it comes to layout.

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