Skip to content
OverviewSolutions
13
Comments
12

Stanley Nadar

@istealersn-devChennai370 points

Aspiring developer with an aim to build robust systems

Latest solutions

View more solutions

Latest comments

  • Stanley Nadar•370
    @istealersn-devPosted about 1 year ago

    Congratulations!! @hassan-12-source for completing the challenge.

    Quick tip at the first glance - To center the element on the page/container, you have to specify the min-height or height. In this case you can set the height: 100vh; that will position the card at the center

    Also as a best practice - you can use CSS custom properties that represent specific values to be reused throughout a document. For example: font-family, padding, border-radius, gap, etc.

    Hope these are helpful! Keep up the good work!

    0
  • Stanley Nadar•370
    @istealersn-devPosted over 1 year ago

    Congratulations! on completing project.

    It should always be mobile first approach unless you are building an application that is never meant for mobile. Quick feedback if this helps:

    1. It looks like you attempted the character 'W' for logo instead of the actual logo shared in the style kit
    2. Hover behaviors for button, New section items seem inconsistent
    3. HTML semantics state you don't need a <section> tag inside <header> instead you can use <nav> or other elements.

    Hoping these are helpful!

    Marked as helpful
    0
  • Stanley Nadar•370
    @istealersn-devPosted almost 2 years ago

    Great efforts! Congratulations on completion of the challenge

    When you build HTML, its important that you get the semantics right as that boosts accessibility and SEO. In your page structure you're are missing heading; minimum of one <h1> is mandate as per web standards.

    On the CSS front:

    • You can center a container by using display: flex; justify-content: center; align-items: center; min-height: 100vh; - Here while you attempt to center, its important to specify the height for flexbox to understand the center axis and that's how it aligns at the center on the page. You can also use display: grid; place-items: center; height: 100vh
    • While using @media queries, you do not have to repeat the styles already declared. You must include only the change that's needed at the specified screen-width. For instance, repeating *, body, main, etc. are not needed instead only add the changes; example your img already has set of css properties defined, if you skip it in 900+ screen width, it will follow what you have defined for mobile

    Use this resource to read more on media queries

    Hope this is helpful!

    Marked as helpful
    2
  • Stanley Nadar•370
    @istealersn-devPosted almost 2 years ago

    Great efforts! Congratulations on completion of the challenge

    When you build HTML, its important that you get the semantics right as that boosts accessibility and SEO. In your HTML structure you are missing <main> tag inside body specifying that its the main content of the body and including at least one <h1> is mandate as per web standards. You should avoid using <h6> without having a proper logical sequence such as <h1>..<h2>..<h3>..<h4>..<h5>..<h6>; its highly important from web and accessibility standards perspective that you do not skip the sequence while structuring your content.

    On the tailwind front:

    • You can avoid the p-6 for <body> as it has no role to play and as a practice avoid setting padding to entire body instead can do so on sections/div.
    • Similarly id="card" can also be avoided therefore makes it redundant.
    • Always assign descriptive alt text, such as alt="Frontendmentor.io website QR code"

    Hope this is helpful!

    Marked as helpful
    1
  • Stanley Nadar•370
    @istealersn-devPosted almost 2 years ago

    Great efforts! Congratulations on completion of the challenge

    When you build HTML, its important that you get the semantics right as that boost accessibility and SEO aspect. In your HTML structure you are missing some important aspects like making sure to include <main> tag inside body specifying that its the main content of the body and including at least one <h1> is mandate as per web standards.

    On the CSS end, I see you've used a mix of px and rem, as a best practise I will recommend to stick to rem instead of pixels as that will enable good support for user specific browser preferences and accessibility. It uses a base size: 16 (default font size) however you can override that by specifying the root font size within html tag in CSS, something like this: html { font-size: 15px; } - this will automatically calculate your pixels based on you the rem values you set.

    For reference read this!

    Hope this is helpful!

    Marked as helpful
    0
  • Stanley Nadar•370
    @istealersn-devPosted almost 2 years ago

    Great efforts, Congratulations on completing your first challenge

    In order to center the card all you missed was setting the min-height/height while your max-height doesn't help in this case.

    You can either set the as height: 100% or min-height: 100vh as vh stands for viewport-percentage length unit based on the browser default viewport size. This allows the flexbox to align the card at the center as all it needed was height to understand the center axis.

    Hope this helps!

    Marked as helpful
    0
View more comments