Skip to content
OverviewSolutions
39
Comments
533

_nehal๐Ÿ’Ž

@NehalSahu8055India6,710 points

๐Ÿค๐ŸปOpen for collaboration

Iโ€™m currently learning...

Express JS, Mongo DB

Latest solutions

View more solutions

Latest comments

  • _nehal๐Ÿ’Žโ€ข6,710
    @NehalSahu8055

    Hello Coder ๐Ÿ‘‹

    Congratulations on successfully completing the challenge! ๐ŸŽ‰

    Few suggestions regarding design.

    • To dynamically center the card. Don't use margins
    • USING FLEXBOX
    body{  
    display: flex;
    justify-content: center;
   align-items: center;
   min-height: 100vh;
   ...
}

    • Every site must have one h1 element describing the main content of the page.

    • So, Add a level-one heading

    • <h1>Improve you frontend skills by building projects</h1>

    • Don't use multiple <p> for the single descritption use only one.

    • Use Semantics for the proper design of your code.

    <body>
<main>... main content goes here ...</main>
<footer>... .attribution div goes here ... </footer>
</body>

    • For non-decorative images give meaningful and descriptive alt like alt= "QR code to frontend mentor website".

    • Use responsive units(rem, em, %) from next project. Explore respective use cases on google.

    I hope you find this helpful.

    Happy coding๐Ÿ˜„

  • _nehal๐Ÿ’Žโ€ข6,710
    @NehalSahu8055

    Hello Coder ๐Ÿ‘‹.

    Congratulations on successfully completing the challenge! ๐ŸŽ‰

    Few suggestions regarding design.

    • Use Semantics for the proper design of your code.
    <body>
<main>... main content goes here ...</main>
<footer>... .attribution div goes here ... </footer>
</body>
    • It would be better if you use source media for switching to screen sizes(mobile or desktop) for image.
    <picture>
<source media="(min-width:800px)" srcset="yourimage.jpg">
<img src="yourimage.jpg" alt="description">
</picture>

    • For non-decorative images give meaningful and descriptive alt like alt= "Gabrielle Chanel Perfume bottle surrounded by leaves.".

    • Use semantic element for strike-through <s>$169.99</s>

    • If you want to dive into accessibility for this project check this link

    I hope you find this helpful.

    Happy coding๐Ÿ˜„

  • _nehal๐Ÿ’Žโ€ข6,710
    @NehalSahu8055

    Hello Coder ๐Ÿ‘‹.

    Congratulations on successfully completing the challenge! ๐ŸŽ‰

    Few suggestions regarding design.

    • To properly center the card
    • USING FLEXBOX
    body{  
    display: flex;
    justify-content: center;
   align-items: center;
   min-height: 100vh;
   ...
}
    • Use Semantics for the proper design of your code.
    <body>
<main>... main content goes here ...</main>
<footer>... .attribution div goes here ... </footer>
</body>
    • It would be better if you use source media for switching to screen sizes(mobile or desktop) for image.
    <picture>
<source media="(min-width:800px)" srcset="yourimage.jpg">
<img src="yourimage.jpg" alt="description">
</picture>

    • For non-decorative images give meaningful and descriptive alt like alt= "Gabrielle Chanel Perfume bottle surrounded by leaves.".

    • Use semantic element for strike-through <s>$169.99</s>

    • If you want to dive into accessibility for this project check this link

    I hope you find this helpful.

    Happy coding๐Ÿ˜„

    Marked as helpful
  • _nehal๐Ÿ’Žโ€ข6,710
    @NehalSahu8055

    Hello Coder ๐Ÿ‘‹

    Congratulations on successfully completing the challenge! ๐ŸŽ‰

    Few suggestions regarding design.

    • Every site must have one h1 element describing the main content of the page.

    • So, Add a level-one heading

    • <h1>Improve you frontend skills by building projects</h1>

    • Use Semantics for the proper design of your code.

    <body>
<main>... main content goes here ...</main>
<footer>... .attribution div goes here ... </footer>
</body>

    • For non-decorative images give meaningful and descriptive alt like alt= "QR code to frontend mentor website".

    • Use responsive units(rem, em, %) from next project. Explore respective use cases on google.

    I hope you find this helpful.

    Happy coding๐Ÿ˜„

    Marked as helpful
  • beowulf1958โ€ข1,890
    @beowulf1958
    What are you most proud of, and what would you do differently next time?

    learning to use Sass variables

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

    I had a bit of trouble with centering the card at first; check on solutions to other challenges by other people and was able to finally get it centered

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

    my h1 breaks the line differently than the design jpg

    QR Code version 2 semantic HTML

    #accessibility
    2
    _nehal๐Ÿ’Žโ€ข6,710
    @NehalSahu8055

    Hello Coder ๐Ÿ‘‹

    Congratulations on successfully completing the challenge! ๐ŸŽ‰

    Few suggestions regarding design.

    • Use min-height:100vh instead of height:100vh To dynamically center the card

    • For non-decorative images give meaningful and descriptive alt like alt= "QR code to frontend mentor website".

    I hope you find this helpful.

    Happy coding๐Ÿ˜„

    Marked as helpful
  • _nehal๐Ÿ’Žโ€ข6,710
    @NehalSahu8055

    Hello Coder ๐Ÿ‘‹.

    Congratulations on successfully completing the challenge! ๐ŸŽ‰

    Few suggestions regarding design.

    • It would be better if you use source media for switching to screen sizes(mobile or desktop) for image.
    <picture>
<source media="(min-width:800px)" srcset="yourimage.jpg">
<img src="yourimage.jpg" alt="description">
</picture>

    • For non-decorative images give meaningful and descriptive alt like alt= "Gabrielle Chanel Perfume bottle surrounded by leaves.".

    • Use semantic element for strike-through <s>$169.99</s>

    • Use <button></button> for button as it a semantic element

    • If you want to dive into accessibility for this project check this link

    I hope you find this helpful.

    Happy coding๐Ÿ˜„

    Marked as helpful
View more comments