Skip to content
OverviewSolutions
25
Comments
7

Mohit Mummon

@Mohit-k-MummonFremont, CA530 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • Mohit Mummon•530
    @Mohit-k-MummonPosted almost 2 years ago

    Hey, man! Congrats on completing the project. Have you heard about CSS modules for your React components? I took a glance at your code and noticed that you keep all your styles in a single file. If I may, I'd suggest diving into CSS modules and getting comfortable with them, especially for larger projects. For now, it's fine to keep all your styles in one file for a small project. However, as your projects grow and you start building multi-page websites, having everything in a single file can become a real mess. Trust me, I've been there and made that mistake myself.

    When it comes to organizing styles in React projects, there are a couple of other options worth exploring. For instance, you could check out libraries like "styled-components" or leverage the power of CSS preprocessors. Take the time to experiment and see what works best for you. Happy coding!

    1
  • Mohit Mummon•530
    @Mohit-k-MummonPosted almost 2 years ago

    Looks pretty good! I like the sound effects you've incorporated when clicking the buttons. I have a suggestion for improvement. Consider implementing a restriction that disallows consecutive periods after an existing period in the input. For instance, when I enter '0.0...0', it's evident that this isn't a valid operand. The current error code display works fine, but preventing users from entering invalid operands would be even better. You could consider incorporating a regular expression into your existing code to perform validation on the input. But other than that, keep up the good work!

    Marked as helpful
    0
  • Mohit Mummon•530
    @Mohit-k-MummonPosted about 2 years ago

    Great job on completing the project and pushing yourself to learn more about JavaScript! It's impressive that you were able to write the HTML and CSS from scratch and tackle challenges like accurately sizing and positioning elements without the Figma file. And even though the JavaScript code wasn't entirely your own, it's great that you were able to understand and incorporate other solutions to figure out what was happening. Keep up the great work and continue to challenge yourself!

    Marked as helpful
    1
  • Mohit Mummon•530
    @Mohit-k-MummonPosted about 2 years ago

    One suggestion I would make is to add a label element for the email input field to improve accessibility. This will associate the label text with the input field, making it easier for screen readers to identify the purpose of the field.

    Another suggestion is to include alternative text for the header logo and hero image. This will also improve accessibility by allowing screen readers to describe the image to users who may not be able to see it.

    Overall, great job! Keep up the good work.

    0
  • Mohit Mummon•530
    @Mohit-k-MummonPosted about 2 years ago

    Hey so If you want to make your websites responsive you'll want to utilize Media Queries

    Do some research on media queries and then you'll want to start with a mobile first approach when building a website. It is much easier to build the mobile site and then add media queries for tablet and desktop sizes. Take a look at some of my projects source code for some examples.

    As for the tool you can use the browser's built in dev tools, it will allow you to see what your website will look like at various screen sizes

    Marked as helpful
    1
  • Mohit Mummon•530
    @Mohit-k-MummonPosted over 2 years ago

    Hey congrats on completing the project! Some advice

    1. Ensure your body takes the entirety of the viewport. I suggest setting the min-height to 100vh

    2. I assume the margin 600px on the .header class was for centering the component. A better approach would be using display flex on the body and justify-content and align-items to center.

    3. You used an h3 for the header and then an h5 for the next heading. It is best practice to move in increments of 1, so go from h3 -> h4 -> h5.

    4. It is best practice to use landmark elements, so for the div with the class header. Try using main or section instead. You can read more about landmark elements here Here

    Here is an example, also remove the margin from the .header class

    body{
    background-color: hsl(217, 54%, 11%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.header{
    background-color: hsl(216, 50%, 16%);
    width: fit-content;
    padding: 20px;
    border-radius: 20px;
}
    Marked as helpful
    0
View more comments