Skip to content
OverviewSolutions
8
Comments
6

Aslam Mohammad

@AssSam7India220 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!

I’m currently learning...

React Javascript NextJs NodeJs

Latest solutions

View more solutions

Latest comments

  • ikethedev•280
    @ikethedev
    What are you most proud of, and what would you do differently next time?

    I'm proud to have successfully implemented JavaScript in my project. While I've focused heavily on DOM updates, I've realized the importance of visually appealing CSS. For my next project, I plan to prioritize both clean JavaScript and pixel-perfect CSS design.

    What challenges did you encounter, and how did you overcome them?

    My biggest challenge was styling the input range and I overcame that challenge with a lot of Googling and Youtube videos!

    What specific areas of your project would you like help with?

    I would love to have help with using the Figma files. I do not understand how to use the information provided to get width and height from the files provided.

    Password Generator app

    2
    Aslam Mohammad•220
    @AssSam7

    Good work pal!

    A few things to improve upon,

    1. The checkbox looks distorted in the checked state. The tick gets translated to the bottom right and also is not visible. (Sorry unable to share the screenshot here)
    2. The responsiveness could be improved, as soon the breakpoint is hit for the tablet instead of the center the container moves to the top of the page where as per the design it should be at the center both vertically and horizontally). It might be because of the width of the container.
    Marked as helpful
  • Aslam Mohammad•220
    @AssSam7

    Hey Fenbaru,

    Good Job with the challenge, Small things here if possible check the tints of the summary list items i.e. background color tints. They are a little darker than the original design ones. I could suggest one, use 0.05 in the hsla()

  • Aslam Mohammad•220
    @AssSam7

    Hello Manoranjan,

    Good work, Keep it up! I see you have asked how to approach mobile responsiveness. Before designing any layout, focus on the responsive design approach first like desktop-first or mobile-first. Accordingly, use the CSS3 concepts, relative units, etc for the responsiveness based on the breakpoints for mobile, tablet, large screens, etc. Here is one small trick that can help a lot in responsiveness.

    Using the rem units

    html { 
  font-size: 62.5%; /* Making 1px=10px from the base 16px */
}

    By default 1rem=16px

    The above code snippet makes 1rem=10px that can help for easier calculation as suppose you want to apply 45px of padding, it can be done easily like this

    padding: 4.5rem

    As we are using the rem which is a relative unit, we can easily scale it in other devices like this

    @media screen and (max-width: $bp-mobile) {
    font-size: 50%;
  }

    Previously 1rem=10px is now in lower resolution devices such as mobile, with the above one line it is changed to 8px

    This is one of the ways that help in responsiveness.

    Marked as helpful
  • Aslam Mohammad•220
    @AssSam7

    Hello Smruti Sagar,

    Please work on the typography, and colors of the application as they don't quite seem to fit with the design. Also, please check the report above and try to resolve the issues found. Good work!

  • Aslam Mohammad•220
    @AssSam7

    Good Job!

  • Aslam Mohammad•220
    @AssSam7

    The Font Family doesn't seem to watch the design, especially for the product title and price.