Submitted 4 months ago

QR Code Component using styles in HTML

Ryan O'Hanlon•140

@Ryan-OHanlon

Preview site View code

This is a solution for...QR code component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

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

What I'm most proud of is that I was able to learn how to use CSS to create a box around the image and text elements. If I could do something different is that I would create a dedicated CSS file to link to the HTML document as the amount of properties required for this exercise made it difficult to read in VS Code.

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

The main challenge I encountered was learning how to use CSS to create a padded box and align the box, image, and text into the center of the browser. Thanks to W3Schools I was able to learn how important the padding attribute was to be able to create a complete white border around the image and text by using the example they had on their website about CSS borders.

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

While I'm still new to applying HTML and CSS. I'd like help with learning best practices and workflow to solve these problems. I found myself jumping around between the code trying to figure out a solution.

I took the advice to focus on the HTML structure first, but the core of this problem was focused on CSS and already have an in-depth knowledge of CSS attributes to manipulate the text size and borders to match the desktop and mobile image.

Community feedback

IZY_BOY•70
@IZY-BOYPosted 4 months ago
@Ryan-OHanlon Good job, the more you code the you become better.😁😁👍🏾 When coding in HTML, remember to include semantic HTML such as main, section, footer, ... An order thing is about the margin attribute, as your .box element is found in the body you need to specify top and bottom values or at list only the top value. Order wise you can use orther attribute to centralize your .box like Grid or Flex. For the organization it will come with practice.
0
Ryan O'Hanlon•140
@Ryan-OHanlonPosted 4 months ago
@IZY-BOY Thanks for taking the time to comment. I appreciate the feedback and guidance because I realize how much I missed the mark compared to the solution desired. You seriously helped me realize what I did wrong as I couldn't figure out how to place everything in the center as I don't know grid or flexbox yet.

I'll make adjustments to the code and update the comments when I get the time. The book I'm studying from each day is focused on PHP and MySQL first before it gets into CSS. So it'll be a while before I take the next challenge.
0
IZY_BOY•70
@IZY-BOYPosted 4 months ago
@Ryan-OHanlon Your welcome and I wish you the best for your studies 😁😎✌️
0

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