Skip to content
Submitted 7 months ago

perfect pixel, devtools

AnnaRodi•10
@AnnaRodi
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

I'm glad I was able to use variables for the flowers and align the container. I didn't quite figure out the last one.

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

it was difficult to align the text with the template, the code from figma helped a lot. and it was quite difficult to figure out github

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

I would appreciate explanations of how and in what order to make borders and styles. For example, in this project the text is in two blocks h1 and p, and part of the code for them is repeated - is it necessary to somehow combine the repeating code or is it better to make a separate style block for each element, and let them partially repeat each other.

Code

Please log in to post a comment

Log in

Community feedback

  • feelgooddd•430
    @feelgooddd

    You can create utility classes for code that will be used on many html tags / elements repeatedly.

    For example you can do

    .text-center{
Text-align: center
}
.ff-outfit{
Font-family: "Outfit", sans-serif
}
.fstyle-normal{
Font-style: Normal
}

    Then in your html just add these classes to the elements tags you want to change so your H1 and P could look something like

    <p class="text-center fstyle-normal ff-outfit> Paragraph </p>

<h1 class="text-center fstyle-normal ff-outfit"> H1 text </h1>

    Now you can remove text align, font family and font style from your p and h1 selectors in your css, removing the repeated code between the 2 elements. This becomes increasingly important as the scale of your website grows because it can remove dozens or even hundreds of lines of repeated code if that's how many different elements you want with the same styles.

    It also allows you to easily change the font size between 2 different paragraphs, let's say for example you have 1 Paragraph at 16px and another at 14px. You can create 2 custom utility classes like fsize-14 and f-size16 and then just include that class in the <p class=""> HTML tag for how big you want the font on that paragraph to be.

    Utility classes are amazing and take a bit of setup to create them but they can save you hundreds of lines of repeated code so the sooner you start getting into the habit of making them the better. As soon as you find yourself repeating the same thing in multiple places you should consider "hmm maybe I should make a utility class for this". On a project this small it's not so important though :) but something to think about.

    This is essentially what frameworks like bootstrap or tailwind do they come with a lot of predefined utility classes that you can just throw onto your HTML tags to style them, but in this case you'd just be making your own custom utility classes.

    Marked as helpful
  • #just_peace•10
    @Justpeace1

    i have nothing to say

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