Skip to content
OverviewSolutions
17
Comments
13
Neil Kanakia
@neilk17

All comments

  • Neil Kanakia•300
    @neilk17

    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.

  • Neil Kanakia•300
    @neilk17

    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.

  • Neil Kanakia•300
    @neilk17

    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!

  • Neil Kanakia•300
    @neilk17

    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
  • Neil Kanakia•300
    @neilk17

    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
  • Neil Kanakia•300
    @neilk17

    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.

  • Neil Kanakia•300
    @neilk17

    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!

  • Neil Kanakia•300
    @neilk17

    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!

  • Neil Kanakia•300
    @neilk17

    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
  • Neil Kanakia•300
    @neilk17

    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.
  • Neil Kanakia•300
    @neilk17

    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

  • Neil Kanakia•300
    @neilk17

    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
  • Neil Kanakia•300
    @neilk17

    Good work Alvin and nice display pic!

    One suggestion: On your parent-container, Instead of having height: 120vh; You could simply added a margin: 30vh auto; Since you have a height greater than 100% it isn't sized perfectly but the rest looks good!

    About the image background I was not sure what the best way to implement that was either but your solution is looking good!