Skip to content
OverviewSolutions
17
Comments
13
Neil Kanakia
@neilk17

All comments

  • JAV•40
    @andcareSubmitted about 2 years ago

    Hi everyone,

    This is my Order Summary Component. I don't think that there was something that I find difficult in making the component, but if there's something that you see wrong on how I approach the challenge feel free to comment it out. 😁

    Order Summary Component using Flex Box

    2
    Neil Kanakia•300
    @neilk17Posted about 2 years ago

    Hi Jav,

    Great job with completing this challenge and at making it responsive

    If you don't mind, here's some small improvements you can make:

    Accessibility issues: <html lang="en"> just ensure that all of the content is indented within this tag.

    Responsive Design: I think you have done this part perfectly

    Overall this is great and good luck for your other challenges.

    1
  • Neil Kanakia•300
    @neilk17Posted about 2 years ago

    Hi Vaibhav,

    Good job with completing this challenge!

    If you don't mind, here's some improvements you can make:

    Accessibility issues: This has an easy fix, rather than using <h5>, try to just increase the value by one and then change the font-size in styles.css.

    Purple Filter I was also not able to figure out how to add the purple filter overlay to the image, if you figure out how to do this please let me know!

    Hope this helps, and let me know if you have any other questions.

    0
  • Neil Kanakia•300
    @neilk17Posted about 2 years ago

    Hi Vishal,

    Good job with completing this challenge

    If yo don't mind, here's some improvements you can make:

    Accessibility issues:

    These are easy fixes such as using html landmarks (<main>, <header>, <footer>) instead of putting all of your content inside <div> tags.

    Font: The font that is in the design is provided in the style-guide.md file, where you can go to google fonts, add the font and paste the link into your html / css document.

    Centering Content :Rather than using display: absolute, you can effectively center your content using css Flexbox, by putting the code in a container and using

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

    Responsive Design: I would suggest taking a look at Media Queries to understand how to make a website responsive, which just means it will look good on a mobile device with a smaller pixel width.

    Hope this helps, and let me know if you have any other questions!

    0
  • Neil Kanakia•300
    @neilk17Posted about 2 years ago

    Hey Reymart,

    congrats on completing this challenge you have done a great job especially with the share button.

    Here's some other suggestions:

    HTML issues:

    • These are easy fixes such as using using href inside the <a> tag instead of <a link=``>
    • Adding an alt text in your images as a description for accessibility

    Flexbox: You can effectively center your content using css flexbox, by putting the code in a container and using

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

    Hope this helps, and let me know if you have any other questions.

    Marked as helpful
    0
  • Neil Kanakia•300
    @neilk17Posted about 2 years ago

    Hey Francisco, Congrats on completing this challenge and good job on making it responsive!

    I don't think you need the line 113 styles.css is required. Here's some other suggestions:

    • Accessibility: These are easy fixes such as using html landmarks (<header>, <main>, <footer>) instead of <div> tags to contain most of the content.
    • Flexbox: You can effectively center your content using css flexbox, by putting the code in a container and using
    display: flex;
align-items: center;
justify-content: center;

    Hope this helps, and let me know if you have any other questions.

    Marked as helpful
    1
  • Neil Kanakia•300
    @neilk17Posted about 2 years ago

    Dear Emily, congrats on completing this challenge!

    Here's some advice for your solution: Colors: The colors for the text have been provided in the style-guide.md file. This can be done simply by adding the color attribute in your css file.

    0
  • Abdelouahed el yahiaoui•150
    @ab77-ossSubmitted about 2 years ago

    The challenge in this component is, how to transform the values of the JSON data to a shape and background color, and how in case of a change occurred in the data, the bars change also accordingly. The challenge was a great opportunity for me to get a deep understanding of some notions in React js especially the hooks, the event in javascript.

    the use of useEffect enabled me to put the background for all the bars taking into consideration the bar with the maximum amount, also the use of the style inline for the height enabled me to draw the shape of the bar.

    Expenses-chart-component

    1
    Neil Kanakia•300
    @neilk17Posted about 2 years ago

    Dear Abdelouahed, congrats on this challenge!

    I also just completed this one so I know it wasn't that easy.

    Here's some suggestions if you don't mind:

    1. Accessibility : These are simple fixes. You need to replace the main <div> tags with html landmarks such as header, footer, main.
    2. Clicking on the bars : Good work with displaying the values above the bars chart since that is something I wasn't able to achieve.
    3. Bottom section: I know it was difficult to space these parts of the page, you can take a look at my solution for some suggestions on how I styled them.

    Good luck for future challenges!

    0
  • Taskin Sultana•190
    @TaskinSultanaSubmitted about 2 years ago

    It was a simple challenge and I totally loved it...Though I didn't face any problem , but if I had made made any mistake feel free to point it out....and I'd be grateful if you can give me some feedbacks to improve 🙏

    QR code component using HTML and CSS

    2
    Neil Kanakia•300
    @neilk17Posted about 2 years ago

    Hey Taskin,

    Congrats on now having any accessibility or html issues!

    Your solution is comprehensive, one thing you can change is the font weight on the h1 text, this can be done by changing the font-weight attribute in css, and also make sure you added it on google fonts before your input.

    Good luck with other challenges!

    0
  • Neil Kanakia•300
    @neilk17Posted about 2 years ago

    Hey Abdallah,

    Congrats on this challenge!

    Few things you can improve on:

    • There is a thin border around the users display pic. This can be added simply by adding the border attribute in your css file.
    • There are a few accessibility issues that can be fixed easily: one of the main fixes you can do is adding landmarks (eg: header, footer, main, etc.) instead of using <div> tags everywhere

    Good luck with other projects!

    Marked as helpful
    0
  • Rahul Saini•110
    @RahulnerdySubmitted about 2 years ago

    THIS IS MY VERY FIRST PROJECT I AM COMPLETE BEGINNER.. I AM CURRENTLY LEARNING HTML AND CSS... ANY FEEDBACK IS HIGHLY APPRICATED...THANK YOU

    QR code component

    1
    Neil Kanakia•300
    @neilk17Posted about 2 years ago

    Hey Rahul,

    Congrats on completing your first challenge!

    It looks good and congrats on getting the sizes to match perfectly.

    A few recommendations:

    • The accessibility issues have very simple fixes such as using landmarks (eg: main, header, footer) instead of having all your code in divs.
    • The one thing I think you can change is the colors, that have been provided in the styleguide.md file for the fonts. This can be done simply by adding the color attribute in your css file.
    0
  • Taskin Sultana•190
    @TaskinSultanaSubmitted about 2 years ago

    It's my first ever javascript challenge...I know I didn't justify this challenge because i have skiped few features....but I really hope you people are gonna like it....now let me come to the problems...In this challenge, you have to select the 1,2,3,.... buttons and then click to the submit button ..then it gonna take you to the new modal...i don't know how to select individual buttons and change its background color ....so i need solutions for it.....and also need tricks and tips about javascript... Please do tell me if I have made any mistake....and I'd be grateful if you can give me some feedbacks to improve 🙏

    Interactive rating component using HTML,CSS (with a little javascript)

    1
    Neil Kanakia•300
    @neilk17Posted about 2 years ago

    Hey @TaskinSultana,

    Congrats on your first solution!

    I had the same issue while doing this challenge, but I figured you can change the elements color through DOM Manipulation, by changing the background color after clicking a function.

    Also the sizes on your buttons is a little off, so for the 1 - 5 buttons try using the html button tag instead of the <a> tag.

    Although its not perfect, feel free to take a look at my code here: https://www.frontendmentor.io/solutions/responsive-solution-to-interactive-rating-zemLMYJU2i

    0
  • GRAVIT•80
    @gravit09Submitted about 2 years ago

    I cannot add a hover style in my equilibrium image with an eye icon. please guide me on how to add it.

    nft card

    1
    Neil Kanakia•300
    @neilk17Posted about 2 years ago

    Hey Gravit,

    Congratulations on your solution!

    I had the same issue when I did this challenge, I would recommend making the main image into a button, this way when you hover, you can display the other image on top of it.

    Feel free to refer to my solution here https://www.frontendmentor.io/solutions/nft-preview-card-FY8wfpWj8s

    Secondly, I would suggest fixing the accessibility issues as they have simple fixes, such as adding an alt text, adding a language to the html tag.

    Marked as helpful
    1