Skip to content
Submitted 3 months ago

Mobile-first workflow, CSS Box Model for spacing and borders,

Ahmed-Abdul-ghaffar•40
@Ahmed-Abdul-ghaffar
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 am really proud that this is my first project that I completed on my own without waiting for guidance from an instructor. I overcame my fear of needing to review HTML and CSS courses before starting the challenge. Instead, I dove straight in without much review and am happy that, by the grace of God, I was able to search for solutions to any problems I encountered and successfully finish this small but exciting project.

There are two additional things I am particularly proud of:

Centering the page vertically using Flexbox: This was something I hadn't learned before, and I’m pleased that I managed to figure it out. Using a font family that is not installed on my device: It was the first time I accomplished this, and I’m happy with how it turned out.

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

The challenge I faced:

  • Adding a favicon, and here's how I overcame it:
  • using font family which is not installed on my device. Here's how you can use a font family form google fonts.




body {
  font-family: "Outfit", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}
  • centering the page vertically, here's how I overcame it:
body {
  display: flex;
  align-items: center;
  height: 100vh;
}
What specific areas of your project would you like help with?

in the html file:

  1. I used five meta elements, is that a good practice?
  2. what about the structure of the semantic html5 elements like div and article and ...

in the css file:

  1. what's your opinion in the naming of the classes, is that a good practice?

overall feedback:

  • when I finished the project and see the design on the mobile phone, I found that the edge of the container is nearly took the width of the screen and there is not any spaces like the required design, so I tried to modify the width of the container and the image so that it could fit, the question is how to handle the mobile design in the first time when I am writing the code and see the effect on the desktop?
  • any advices on how to make a pixel perfect application especially when it is concerned with something on the design that is not mentioned in the style-guide?

Community feedback

  • Boris•2,870
    @mkborisPosted 3 months ago

    Hi Ahmed-Abdul-ghaffar, congrats on completing your first challenge you did great, here are a few things to review

    HTML

    • Using many meta tags in HTML is not essentially bad, but it's important to use them correctly and ensure they are relevant.
    • All content should be wrapped within landmarks. Wrap a main tag around the .container. Using the article element here might not be the best choice. article is best suited for content such as blog posts or news articles.
    • Your image needs a more descriptive alt attribute like so alt="Qr Code to Frontendmentor.io"

    CSS

    • Your CSS class names are clear. If you want a more structured and maintainable naming, you can use the BEM naming convention
    • To handle mobile design effectively start by designing for mobile first, applying styles for smaller screens, and then use media queries to adjust the layout for larger screens. (Although you don't need media queries for this particular challenge).
    • Change the height of the body to min-height. The .container width should be max-width and it should be defined in rem
    • Font-size should be written in rem not px
    • Consider using a modern CSS reset at the start of the styles in every project. Like this one Modern CSS Reset. This will help reset a list of default browser styles.
    • You can use the PerfectPixel browser extension to match the design
    Marked as helpful
    0
    Ahmed-Abdul-ghaffar•40
    @Ahmed-Abdul-ghaffarPosted 2 months ago

    @mkboris

    Thank you so much for the brilliant feedback! I learned new things that I wasn’t aware of before, and I've already implemented some of them in the project.

    However, I have two questions:

    Regarding the <article> element, I researched and found that it is used for self-contained pieces of content. I believe the card I built fits that description—what do you think?

    Why should the font size be written in rem instead of px. I am asking because the font size in the style-guide is in px?

    0
    Boris•2,870
    @mkborisPosted 2 months ago

    @Ahmed-Abdul-ghaffar I think this card functions more as a component within a page rather than a self-contained piece of content so a div is better suited than an article. This article explains Why font-size must NEVER be in pixels

    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