Skip to content
OverviewSolutions
6
Comments
2
irthifa
@irthifa

All comments

  • irthifa•140
    @irthifaPosted about 2 months ago

    Hello there, Kudos to getting the solution as close to the design as possible!

    If I may, one improvement I could suggest is getting the blog image (main image) in the mobile view close to the design. If you look closer it is cropped in the mobile view. You could try using CSS object-fit to get that outcome.

    you can read more about CSS object-fit here

    Once again the solution you submitted is great!

    happy coding :)

    Marked as helpful
    0
  • jopeeter•60
    @jopeeterSubmitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud to finish the challenge, i think next time with more experience, i can make the styling shorter.

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

    I had a hard time deciding how to center the QR code, i made some research, saw a lot of samples, and proceed what i think would be the more flexible solution.

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

    I'm still new on deciding how to approach styling, it would be best if i could have some help deciding the simplest methods.

    QR code component using HTML, CSS , also some Css variables

    1
    irthifa•140
    @irthifaPosted 2 months ago

    Hello there, Nice effort on this challenge!

    I tried viewing your code to give you specific feedback but unfortunately, the link doesn't work. Hence, I decided to drop some general styling tips.

    • Having all of the common styling first in the stylesheet is a good idea. This means all the styles which will generally apply unless you do something special with that element. You will typically have default rules set up for: body p h1, h2, h3, h4, h5 ul, ol table and links

    • We could define a few utility classes. If you have a few styling choices you know you will want to apply to lots of different elements, they can be put in this section. For example, a class that removes the default list style for lists we're going to display.

    /* || UTILITIES */

.nobullets {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* … */
    • Include CSS for specific things, broken down by the context, page, or even component in which they are used. Example :
    /* || STORE PAGES */

.product-listing {
  /* … */
}

.product-box {
  /* … */
}

    By ordering things in this way, we at least have an idea of which part of the stylesheet we are looking at.

    • Avoid overly-specific selectors If you create very specific selectors, you will often find that you need to duplicate chunks of your CSS to apply the same rules to another element. Example :
    article.main p.box {
  border: 1px solid #ccc;
}

    If you then wanted to apply the same rules to something outside of main, or to something other than a <p>, you would have to add another selector to these rules or create a whole new ruleset. Instead if you use below,

    .box {
  border: 1px solid #ccc;
}

    This will apply your rule to any element that has the class box. But, remember there will be times when making something more specific makes sense; however, this will generally be an exception rather than usual practice.

    You can read more about this here

    I hope you find this useful!

    Happy coding!

    Marked as helpful
    0