Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Learning path QR challenge

MrDull 20

@MrDull

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • 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 just glad i could do it.

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

  1. the qr image didn't fit into div but somehow i got it right. more or less
  2. div wasn't centered properly but somehow i got it right. more or less
  3. text an their padding was all over the place but somehow i got it right. more or less

looots of trial and error.

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

i don't have any specific questions, any feedback is welcome

Community feedback

Alejandro 300

@adelayglesiafleitas

Posted

Hello @MrDull, good job, to center the module group it and apply margin: 0 auto in CSS. Set the side margins to "auto". Another thing you can do is use an external CSS and load it on your site, which makes it more readable when reading the code and it is very convenient to separate CSS from HTML:

Create a separate CSS file with your CSS code. For example, you can name it styles.css and save it in the same folder as your HTML file.

In the <head> of your HTML file, add a <link> tag with the following attributes:

<link rel="stylesheet" type="text/css" href="styles.css"> Where href is the relative path to the CSS file you created.

By following these steps, you can load an external CSS file into your HTML document, separating the CSS from the HTML code for better organization and readability. Keep up the good work! Best regards.

Marked as helpful

1

Please log in to post a comment

Log in with GitHub
Discord logo

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