Skip to content
OverviewSolutions
2
Comments
18
Akhil-Nagpal
@Akhil-Nagpal

All comments

  • Ruth Joy Tolentino•10
    @ruthjoy76Submitted over 1 year ago

    ♥♥♥ Hello, Frontend Mentor community ♥♥♥

    This is my solution for the QR Code Component Challenge.

    I tried my best to create as closer to the actual design as possible. Make the code clean as much as possible

    All feedback is highly appreciated!

    ♥Happy Coding♥

    QR Code Component

    2
    Akhil-Nagpal•180
    @Akhil-NagpalPosted over 1 year ago

    Hi Ruth! 👋 Congratulations on completing your first challenge! 🎉

    I have some suggestions regarding your code

    • In CSS always try to use relative units like em or rem instead of absolute units like px. Using these relative units will improve the responsiveness. Read this to understand better 👉 Should we use Rem, Em, or Pixel?.
    • You used the grid as well as flex for centering the card, I think you should use only one either flex or grid.

    Otherwise! You did a great job! 👏

    I hope these suggestions will help you to improve! 😄

    Happy Coding!

    Marked as helpful
    0
  • Akhil-Nagpal•180
    @Akhil-NagpalPosted over 1 year ago

    Hello Giulia! 👋 Congratulations on completing this project! 🥳

    To fix accessibility & HTML errors, you need to fix these things in your code:

    • Always add alternative text to all images you use like: <img src="illustration-1.svg" alt="girl-listening-music">. This specifies an alternate text for an image if the image cannot be displayed.

    Other Suggestions 📝

    • Use relative units like em or rem instead of using absolute units like px. This will improve responsiveness. Read this to understand better 👉 Should we use Rem, Em, or Pixel?

    • Background image is not responsive while adjusting the screen size. Use background-size: cover;

    • You missed some properties in the body { } tag. For centering anything use these properties:

    display: flex;
text-align: center;
align-items: center;
justify-content: center;

    Otherwise! You did a great job! 👏

    I hope these suggestions will help you to improve! 😊

    Happy Coding!

    1
  • Akhil-Nagpal•180
    @Akhil-NagpalPosted over 1 year ago

    Hey Rahil! 👋 Congratulations on completing your first challenge! 🥳

    I have a few suggestions:

    To fix all the accessibility errors, you need to change these things in your code.

    • First, every time you start your code always add the <main> tag after the <body> tag. These tags will help to make the code clean and navigation will improve. For Example: If you are making a navbar instead of using the <div> tag, use the <nav> tag for making a navbar.

    Other Suggestions 📝

    • Use Flexbox or Grid for positioning anything on the web page. This will make your code more responsive. 👉 Should we use Flexbox or Grid?
    • Use relative units like em & rem instead of using absolute units like px. This will improve responsiveness. Read this for more understanding 👉 em or rem VS px
    • When you download the starter kit of any challenge, read the Readme file and style guide. These pages will help you to understand what to do.

    I hope these suggestions will help you to improve 😊

    Keep Calm & Keep Coding 💻

    0
  • iamis15•70
    @iamis15Submitted over 1 year ago

    No major problems with this. However, any feedback is greatly appreciated!

    Order Summary

    3
    Akhil-Nagpal•180
    @Akhil-NagpalPosted over 1 year ago

    Hi there! 👋 Congratulations on completing this challenge! 🎊

    You did awesome work! Well Done! 👌

    I've some suggestions :

    • Always follow a structure. The <h1> to <h6> element tags must be in descending order(as per size). Read more 👉 The HTML Section Heading elements.
    • While using sections, you need to add headings on every section. So, you should change <section> into <div> or add headings to every section.

    Otherwise! Your solution is nearly perfect! 👏

    I hope you will find this useful! 😊 Happy Coding!

    0
  • Sounak Mukherjee•560
    @kanuosSubmitted over 1 year ago

    This is my solution to the newbie challenge Order Summary Component. Since it was a fairly easy layout, I decided to use vanilla CSS instead of a preprocessor or a library.

    Tech Stack

    • Semantic HTML 5
    • CSS3

    Tools used

    • VS Code - editor
    • Firefox - browser + dev tools
    • Git - SVN
    • GitHub - Code repo
    • GitHub Pages - deployment

    Any suggestions/feedback/tips is welcome :)

    Responsive order summary component using vanilla CSS

    1
    Akhil-Nagpal•180
    @Akhil-NagpalPosted over 1 year ago

    Hey Sounak! 👋Congratulations on completing this challenge!🎉

    You did a great job! 👏

    I have a few suggestions regarding your code:

    • There's a slight drop shadow under the primary button. I think you missed that.
    • To achieve the desired size of the card, I have a trick, slightly adjust the screen size to 75-80%, which will make your screen 1440px.
    • Font size is small, you should set the font size of a paragraph to 16px not only for the text but also for the pricing panel.

    **I hope these suggestions help you to improve!**😄

    Happy Coding!

    1
  • Akhil-Nagpal•180
    @Akhil-NagpalPosted over 1 year ago

    Hi there! 👋 Congratulations on completing this project! 🎉

    To fix all the accessibility errors, you need to do these things:

    -You must follow a basic web page structure. You used the <main> tag under the <div>. Use <main> only once per page, and put it directly inside <body>. Ideally, this shouldn't be nested within other elements. Read this for a better understanding👉 Document and website structure

    Other Suggestions 📖

    • Use a flexbox or grid to center anything. Using flexbox or grid makes your web page more responsive.

    • To achieve the desired size of the card, I have a trick, slightly adjust the screen size to 75-80%, which will make your screen 1440px.

    • Always read README & Style Guide pages. These pages will help you to understand what to do.

    I hope this will help you. 😊

    Otherwise! You did a great job! 👌 Happy Coding!

    0
  • Akhil-Nagpal•180
    @Akhil-NagpalPosted over 1 year ago

    Hello Mariam! Congratulations on completing your first project! 🎊

    To fix the accessibility error, you need to change this thing in your code:

    • Just nest the attribution group element inside the <main> tag. This will fix the landmark error.

    Other Suggestions:

    • In CSS always try to use relative units like em or rem instead of absolute units like px. Using these relative units will improve the responsiveness. Read this for a better understanding 👉 Should we use Rem, Em, or Pixel?
    • There's a slight drop shadow under the card. Try to add a box shadow to the card. This will bring your solution near to perfect.

    Otherwise! You did an amazing job! Well Done! 👌

    I hope this will help you to improve! 😄

    Happy Coding!

    Marked as helpful
    1
  • Akhil-Nagpal•180
    @Akhil-NagpalPosted over 1 year ago

    Hi Anina! 👋 Congratulations on completing your first challenge! 🎉

    I've some suggestions regarding your code

    • You should use External CSS files instead of using Internal or Inline. This practice will make your HTML file have a cleaner structure and become small in size. Read this for a better understanding 👉 Inline vs internal vs external CSS
    • Use Flexbox or Grid for positioning anything on the web page. This will make your code more responsive. 👉 Should we use Flexbox or Grid?
    • Use relative units like em & rem instead of absolute units like px, because using em & rem will add responsiveness. Read this 👉 Should we use Rem, Em, or Pixel?
    • The size of the card is also not correct, use width: 20rem; height: 31rem;, this will fix the size of the card.

    Otherwise! You did a great job! Well Done! 👏

    I hope you will find this useful! 😄

    Happy Coding!

    0
  • Akhil-Nagpal•180
    @Akhil-NagpalPosted over 1 year ago

    Hi Jhay! 👋 Congratulations on completing this project! 🎉

    To fix all the accessibility errors, you need to do these things:

    • You must follow a basic web page structure. You used the <main> tag under the <div>. Use <main> only once per page, and put it directly inside <body>. Ideally, this shouldn't be nested within other elements. Read this for a better understanding👉 Document and website structure

    • This structure also applies to headings. The <h1> to <h6> element tags must be in descending order(as per size). Read more 👉 The HTML Section Heading elements

    Other Suggestions 📖

    • Box shadow is a bit high, put 0px for offset x & spread radius set to negative. This will create a very similar effect.
    • To achieve the desired size of the card, I have a trick, slightly adjust the screen size to 75-80%, which will make your screen 1440px.
    • Always read README & Style Guide pages. These pages will help you to understand what to do.

    I hope this will help you. 😊

    Otherwise! You did a great job! 👌 Happy Coding!

    0
  • Akhil-Nagpal•180
    @Akhil-NagpalPosted over 1 year ago

    Hello Tiksha! 👋 Congratulations on completing your first challenge! 🎉

    I have some suggestions regarding your code.

    • Always start your code by adding <main> tag after <body> tag. And use semantic HTML elements like <section>, <footer>, <nav> to avoid accessibility errors.
    • You didn't add an alt="girl-listening-to-music" attribute in the <img> element. Every image must contain an alternative text.
    • You used a backward slash in the src="images\icon-music.svg". Use a forward slash.
    • Try to use external CSS files instead of using Internal CSS. Internal CSS is not a bad practice, but this might be problematic with multiple CSS files. If you want to use internal CSS to add style to an HTML file, you should learn a CSS framework like Tailwind or Bootstrap.

    I hope these suggestions will help you improve 😊

    Otherwise! You did a great job! 👏 Happy Coding!

    0
  • Akhil-Nagpal•180
    @Akhil-NagpalPosted over 1 year ago

    Hello there! 👋 Congrats! on completing this project

    First, you need to solve your accessibility error. Here's how:

    • The <h1> through <h6> element tags must be in a sequentially-descending order for headings to be in a correct logical order.

    I have some other suggestions!

    • Width doesn't need in the body. And I think you miss to add background size, repeat & color. Please add these to fix them. background-color: hsl(225, 100%, 94%); background-repeat: no-repeat; background-size: contain;
    • The size of the card is less. But you can use this hack, just adjust the screen size to 75-80% this will make your screen size 1440px, which is needed to build the desktop version.

    You can also see my solution for a better understanding of background & size.

    Otherwise! You did a great job 👌

    Happy Coding! 😊

    Marked as helpful
    1
  • HonkyTonkTP•50
    @HonkyTonkTPSubmitted over 1 year ago

    Should I just give the img, h1 & p elements a class each instead of going through .card h1 etc? Since in this challenge I could've done either that or just used h1, img, p selectors by themselves.

    In short, is there a preferred way to do it?

    Responsive qr code page using media query for max-width.

    2
    Akhil-Nagpal•180
    @Akhil-NagpalPosted over 1 year ago

    Hi There! 👋 Congratulations on completing your first challenge! 🎊

    First you should fix your asseccibility errors.

    • You should use <main> tag after <body> tag. But you used <main> after <div>, it raised errors.

    Other Suggestions

    • Use flexbox or grid to center anything. Learn more 👉 CSS Grid Vs Flexbox
    • Yes, you can use classes for headings and paragraphs.
    • You should work on width & height of tbe card.

    Otherwise, You did a great job.

    I hope this will help you.😄

    Marked as helpful
    1