Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • Ruth Joy Tolentino• 10

    @ruthjoy76

    Submitted

    ♥♥♥ 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-Nagpal

    Posted

    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-Nagpal

    Posted

    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-Nagpal

    Posted

    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

    @iamis15

    Submitted

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

    Order Summary

    3

    Akhil-Nagpal• 180

    @Akhil-Nagpal

    Posted

    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

    @kanuos

    Submitted

    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-Nagpal

    Posted

    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-Nagpal

    Posted

    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-Nagpal

    Posted

    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-Nagpal

    Posted

    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-Nagpal

    Posted

    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-Nagpal

    Posted

    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-Nagpal

    Posted

    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

    @HonkyTonkTP

    Submitted

    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-Nagpal

    Posted

    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