Skip to content
Submitted 5 months ago

Divide body components in HTML, use CSS to style.

briskett•10
@briskett
Preview site (opens in new tab)View code (opens in new tab)
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?

I'd say completing it is a good thing lol. I can't say I'm proud because I had to sit down and suffer through for a really long time for something considered newbie difficulty. But if I want to get anywhere, that's what I gotta do.

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

Figuring out how to center things on my screen. I kept using top and left in CSS but only the x axis would get modified. I didn't understand why.

I also didn't completely understand the requirement of 1140px, I just used flex display and max width of 320px for my container

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

The CSS. I had a really hard time understanding what in god's name I was doing. A lot of it was me experimenting just to see what would get me closest, but I wasn't able to grasp what some of the CSS actually did. I just ran off what the name of the functions implied.

Community feedback

  • Dylan de Bruijn•3,230
    @DylandeBruijnPosted 5 months ago

    Hi Briskett,

    Completing something you have been struggling with is definitely a good thing! You can be proud of your solution because it is very close to the design specifications. You have a great mindset, keep that up!

    I think the requirement for 1140px is just so your solution looks good on desktop and above. In this case it doesn't matter that much because the QR code is centered anyway.

    I would be happy to help with any specific CSS questions if you want. A lot of people underestimate the language and struggle with it, and it's a lot of work to be great at it.

    A bit of friendly constructive advise:

    • You could try to make your CSS more reusable by using CSS variables.

    • It's good practice to use descriptive (reusable) CSS classes. You could name your container .qr-code-card for example. And your image .qr-code-image following the same principle. This helps you and other developers make sense of your code. It also helps you style things as you know better what you are actually styling! I like to view elements on a page as components and style them that way. A CSS naming convention can help with that, but that's a personal preference.

    • I see you used a inline style block to style your HTML elements. While this has it's uses it's generally good practice to create a separate CSS file and link this in your HTML file like this:

    <head>
<link rel="stylesheet" href="style.css">
</head>

    I hope you find my feedback helpful and let me know if you have any other questions!

    Marked as helpful
    1
    briskett•10
    @briskettPosted 5 months ago

    @DylandeBruijn Thank you, I will be sure to look into the naming convention.

    0

Please log in to post a comment

Log in with GitHub

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