Skip to content
OverviewSolutions
13
Comments
12
Stanley Nadar
@istealersn-dev

All comments

  • Stanley Nadar•370
    @istealersn-devPosted 8 months 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
  • Jeremiah Chinwe•150
    @JeremiahChinweSubmitted over 1 year ago

    Building this project triggered a question in me because I was using the desktop design to determine how I would begin the project with mobile design.

    What's the recommended approach to front end development Mobile first or Desktop first approach?

    News Homepage with React and CSS Flexbox

    1
    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
  • star-369•280
    @star-369Submitted over 1 year ago

    What I have learned from this challenge:

    1. Mobile first!
    2. Centering items using position and transform property
    3. Apply only necessary changes to @media queries (thanks to @istealersn-dev)
    4. Using Github as junior developer
    5. Launch static website using Github Pages

    My question to the community:

    I'm actually struggling to center the item without using the position and translate property, so any suggestions from you guys ? (I know some technique with flexbox and auto margin)

    Update Moving all my simple UI component to tailwind css, and try to re-design to make it look as similar as possible with the design(Update 3 Feb 24).

    QR Code Cards for Mobile and Desktop

    1
    Stanley Nadar•370
    @istealersn-devPosted over 1 year 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 over 1 year 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 over 1 year 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
  • Ricardo de Souza•30
    @AburaAkagoSubmitted over 1 year ago

    My first challenge, still has a lot to improve, I had a little trouble centering using the flex-box so I opted to use padding with a percentage for responsiveness reasons and REM measurements.

    qr-code-challenge

    2
    Stanley Nadar•370
    @istealersn-devPosted over 1 year 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
  • Stanley Nadar•370
    @istealersn-devPosted over 1 year ago

    Great work!

    When you build HTML, its important that you get the semantics right as that boost accessibility and SEO aspect. In your project, you have added <header> tag inside <main>, doing this the header tag itself loses its landmark instead if you add outside, the landmark is considered as header of the entire page (like Navigation, Hero banner, etc.) that holds your H1

    For reference read this!

    Hope this is helpful!

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

    Great efforts, Congratulations!!

    In order to center your card, you can use the following within the body tag, this will center it for both x and y axis

    body { display: grid; place-items: center; }

    Also for HTML structure, you should make use of <main> tag to define the content body and use <h1> as each page must contain at least 1 top heading as per web standards; it helps boost SEO

    Hope this is helpful!

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

    Great efforts, Congratulations!

    Few tips to improve the HTML structure and other aspects

    • Every page should have at least one <h1>, you could replace the first <p> tag with the required heading
    • When you use position: absolute;, there must be a container/body setup as position: relative;. I can understand you've used position to center the card - it can also be done with adding the following code to body { display: grid; place-items: center; }

    Hope this is helpful!

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

    Great efforts, Congratulations!!

    The only advise I'd want to give you would be around making images accessible. Having alt="" makes it decorative image therefore assistive technologies would skip them from reading. Instead always populate values something like alt="Frontend mentor QR code", this will enable users to consume.

    Hope this helps!

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

    Great efforts, especially using Typescript and styled components. With a bit of tweaks and fixes, you should be able to make it accessible and optimized to the best

    • Building a good HTML semantics for a better structure to the content while you build app using react/typescript is a must
    • You could have avoided the extra <div> by using React.Fragments or <> in your card component
    • To simply center card component, you can also use display: grid; place-content: center;
    • You have set fixed width for few elements, avoid setting fixed width, you should let it scale based on the content + padding, this supports responsive behavior and easy to implement
    • Lastly your final build of the application will also include the long list of styles from theme.ts which I think is not necessary (could be optimized)

    Hope this is helpful, keep coding!!

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

    Great effort!! with a small tweak you can center the component by adding height to the following code; specifying the body height allows the css property to align items accordingly

    body{
    background-color: hsl(212, 45%, 89%);
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-family: 'Outfit', sans-serif;
}
    Marked as helpful
    1