Submitted 6 months ago

QR code component

Jeff Gicharu• 80

@jeffgicharu

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

What are you most proud of, and what would you do differently next time?

I'm mainly proud of the fact that I was able to finish this challenge despite being very confused when I started.

What challenges did you encounter, and how did you overcome them?

As I was adding styles in the CSS, there was a element which was not behaving as expected when I tried to style it. I overcame the challenge by trying different possible solutions until I found one that worked.

What specific areas of your project would you like help with?

I would like help in knowing when to add classes to HTML elements and also in the organization of my CSS.

Community feedback

Rowan• 210

@rowanDeveloper

Posted 6 months ago

Hi @jeffgicharu,

Congrats on submitting your first solution! Keep it up! FrontEnd Mentor is a great place to practice and improve your coding skills.

I took a look at your code and I like the fact that it is pretty clean and concise. I would add some changes, like, for example, using the <main> tag instead of <article> or <section>. The idea is that the <main> tag holds everything. I would also have a div container, just so I could better manipulate the padding and another div for the image-container to better adjust the width and height of the image. But that is just my logic of programming.

Something like:

         body 
             <main>
	            <div class="container">
		            <div class="image-container">
			         <img href="./">
		           </div>
		           code 
		
	             </div>
           </main>

Overall, congrats on your first project!

Marked as helpful

Jeff Gicharu• 80

@jeffgicharu

Posted 6 months ago

Hello @rowanDeveloper Thank you very much for your feedback. I started learning HTML and CSS recently and the teacher that I'm following on YouTube suggests avoiding using divs too much and instead insists on using specific HTML tags so that the code can have more meaning.

mbalali63• 150

@mbalali63

Posted 6 months ago

Hi @jeffgicharu Thank you for the great work. The html and css file are well structured and excellent. I just think that your font sizes are too small. it may be good enough if it will be increased from 15px to 19px for the header text and the other 17px. And also please consider the background color which is different from the design. Hope this is helpful for your great work.

Jeff Gicharu• 80

@jeffgicharu

Posted 6 months ago

Hi @mbalali63 Thank you for pointing that out. I also noticed that the font sizes were too small but since I'm a beginner, I was trying to follow exactly what they wrote in the style markdown file about the sizes.

Charlie• 300

@Xarlizard

Posted 6 months ago

Heyo,

I think that you've swapped body background-color with .para:last-child text color , other than that, really good man keep it up! 😉👍

Jeff Gicharu• 80

@jeffgicharu

Posted 6 months ago

Hey @Xarlizard Thank you for that correction. I had not even noticed it. But I've made the correction so I think now it is okay.

Charlie• 300

@Xarlizard

Posted 6 months ago

@jeffgicharu yeah it is, it looks amazing now well done 😊

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