Skip to content
OverviewSolutions
11
Comments
16
Madan Sinha
@lazy4gyan

All comments

  • Madan Sinha•300
    @lazy4gyan

    @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
  • Madan Sinha•300
    @lazy4gyan

    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
  • Madan Sinha•300
    @lazy4gyan

    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 */
}
  • Madan Sinha•300
    @lazy4gyan

    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;
}
  • Madan Sinha•300
    @lazy4gyan

    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👏

  • Madan Sinha•300
    @lazy4gyan

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

    @navnithi your GitHub link is not working.

  • Madan Sinha•300
    @lazy4gyan

    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
  • Madan Sinha•300
    @lazy4gyan

    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
  • Madan Sinha•300
    @lazy4gyan

    @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
  • Madan Sinha•300
    @lazy4gyan

    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 :-)

  • Madan Sinha•300
    @lazy4gyan

    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.

  • Madan Sinha•300
    @lazy4gyan

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

  • Madan Sinha•300
    @lazy4gyan

    @MaryamSherief Can you please advise how you have calculated the pixels of this challenge, you have done a good work.

  • Madan Sinha•300
    @lazy4gyan

    Hi @mycrochip, I have checked your site you have done a good work only I want to highlight that your image is not showing 100% in mobile view and when I tried to change the media query of section 2 it is affecting the desktop design not sure what is happening.

    If you have answer please let me know.

    Marked as helpful
  • Madan Sinha•300
    @lazy4gyan

    @Ryan-Tru Your code is in very detail which helps me to easily understand.

  • Madan Sinha•300
    @lazy4gyan

    Hi, I like your code learn new from there.