Skip to content
OverviewSolutions
11
Comments
16
Madan Sinha
@lazy4gyan

All comments

  • Nathan Lowe•450
    @NathLoweSubmitted over 1 year ago

    This is the 5th project of the coding challenge: 1 day 1 website. Please consider connecting on LinkedIn not to miss any upcomming website: https://www.linkedin.com/in/nathan-kouekam-lowe-6aba92230/ If there is anything wrong or not good enough please let me know. Thank you so much for your support.

    Mutlistep Form using NextJS13, Typescript, Zustand, ShadCN, Tailwind

    1
    Madan Sinha•300
    @lazy4gyanPosted over 1 year ago

    @nathlowe you have done a great job 👏

    However, the info step and select plan step must be completed before proceeding to the next step. Adding a required mark or validation error would help users understand this requirement.

    Could you also take a look at my solution and share your thoughts on it?

    Link - Multi-step form using react.js

    Thanks!

    Marked as helpful
    0
  • Madan Sinha•300
    @lazy4gyanPosted over 1 year ago

    Congratulations 🎉for successfully completing the challenge!

    However, I have noticed few things -

    • you are using non-sematic tag try to avoid them as much as you can, use semantic html tag.
    • avoid defining colors individually to every selector instead use :root pseudo-class for defining global variable and utilize it in your selector as a variable.
    Marked as helpful
    0
  • Madan Sinha•300
    @lazy4gyanPosted over 1 year ago

    Hi, your UI is looking perfectly fine.

    However,I have noticed that your styles are breaking for screen size < 375px, due to the your community-container and flowing-conversation-container, use flex-direction:column for these two containers.

    And, most of the mobile screens are above 360px so try to use media queries which can includes all the mobile screens, i.e.

    @media only screen and (max-width: 767px) {
/* Styles for mobile devices and tablets go here */
}
    0
  • Madan Sinha•300
    @lazy4gyanPosted over 1 year ago

    Congratulation's buddy 🎉 you have done a fantastic job👏

    However, I noticed that you missed to center the .container class. You can fix this using flex below is the code.

    .container {
display: flex;
align-items: center;
height: 95vh;
}
    0
  • Madan Sinha•300
    @lazy4gyanPosted over 1 year ago

    Congratulations for completing this challenge!🎉

    Following thing's I have notice in your code -

    • In add-on page checkbox is not working properly and prices are not dynamically changing according to monthly/yearly plan. You can use the same logic that you have applied on Select Plan Page by checking the value of obj.kind = val;.
    • You forget to add assets like images, in your repo that's why image is breaking.
    • As you have not added all images in your repo due to which steps are not visible in your stepper as font color:"white"

    At last, I can say you have done a good job👏

    0
  • Madan Sinha•300
    @lazy4gyanPosted over 1 year ago

    Congratulations🎉 for completing the challenge... you have done a good job.

    @navnithi your GitHub link is not working.

    0
  • Madan Sinha•300
    @lazy4gyanPosted over 1 year ago

    Congratulations, for successfully completing the challenge!

    I have a question to ask you, why have you not given the same height to your all three cards?

    • If you want to highlight your particular card when it is being hovered over then you should use the :hover selector and use scale property to differentiate your card among remaining two cards.
    • Avoid unnecessary comments, until the code is difficult to read for others you think.
    Marked as helpful
    0
  • Madan Sinha•300
    @lazy4gyanPosted over 1 year ago

    Hi @Blackpachamame, Congratulations for completing this challenge!

    Following are the styling issues that I have found -

    • Your grow and conversation section top/bottom background images are breaking like they are not completely fitting themselves according to the screen size specially when it comes to desktop screen.
    • Same thing happening for footer section and for desktop view I can see a spacing in both sides of the footer section. Try to set width=100% for footer section.

    Solution : Set width=100% instead of max-width=100%

    Thanks

    Marked as helpful
    0
  • Madan Sinha•300
    @lazy4gyanPosted over 1 year ago

    @DanialJ-Dev, congratulations on successfully completing the challenge.

    I would suggest, try to use semantic html instead of non-semantic html this practice will help you in better SEO, readability of code and greater accessibility.

    i.e replace <div >with <section>, wrap your main content with <main></main>.

    Marked as helpful
    1
  • voffee•70
    @voffeeSubmitted about 2 years ago

    I had trouble with the cellphone and tablet media queries.

    I also had a lot of trouble with positioning relative and absolute.

    I initially used the progress element and couldn't style it very well before I created a progress bar from div elements.

    Fylo Data Storage

    2
    Madan Sinha•300
    @lazy4gyanPosted about 2 years ago

    Hi @voffee, I would like to highlight regarding responsiveness that instead of making first desktop based responsive site try to make mobile based, as it's easier to implement media queries in mobile based to make desktop based site.

    Try to use like @media (min-width : 700px){} and rest is all good.

    Happy coding :-)

    1
  • Madan Sinha•300
    @lazy4gyanPosted over 2 years ago

    Hi there, instead of using separate folder for your styling i.e. ./css/style.css place style .css in same folder where your index.html file placed may be this can help.

    0
  • 👾 Ekaterine Mitagvaria 👾•7,600
    @catherineisonlineSubmitted over 2 years ago

    Hello, Frontend Mentor community! This is my solution to the Interactive rating component.

    I have read all the feedback on this project and improved my code. Due to the fact that I published this project very long ago, I am no longer updating it and changing its status to Public Archive on my Github.

    You are still free to download or use the code for reference in your projects but I longer update it or accept any feedback.

    Thank you

    Interactive rating component

    6
    Madan Sinha•300
    @lazy4gyanPosted over 2 years ago

    Hi @catherineisonline, Can you advise from where you are learner Dom as I am facing difficulty when implementing them.

    0