Skip to content
OverviewSolutions
7
Comments
6
P
Aslam Mohammad
@AssSam7

All comments

  • ikethedev•260
    @ikethedevSubmitted 3 months ago
    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•190
    @AssSam7Posted 3 months ago

    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
    0
  • Aslam Mohammad•190
    @AssSam7Posted over 1 year ago

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

    0
  • Manoranjan Satpathy•40
    @manosatpathySubmitted over 1 year ago

    Kindly suggest to me how to make it mobile-responsive. I'm just fed up with making it mobile-responsive. please help so that I can correct it.

    Result-summary-component

    2
    Aslam Mohammad•190
    @AssSam7Posted over 1 year ago

    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
    0
  • Smruti Sagar Pattanaik•40
    @SmrutiSPSubmitted over 1 year ago

    • This app is a single page application (SPA) coded using vanilla JS and has a clear distinction between model, view, controller classes.

    • The rating selected and submitted will be persisted through local storage of browser. So, after refresh of browser that rating can be seen as highlighted.

    Rating app

    1
    Aslam Mohammad•190
    @AssSam7Posted over 1 year ago

    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!

    1
  • Heza•20
    @ChoiHezaSubmitted almost 2 years ago

    This is my first project on this website, if you have any feedback it would be greatly appreciated :)

    I built mobile first which was my first time doing that, got a bit of challenge converting to desktop layout but I think I executed it well, but if there was a better way for me to do, please do let me know. Thank you!!

    Product Preview Card (HTML & CSS)

    2
    Aslam Mohammad•190
    @AssSam7Posted almost 2 years ago

    Good Job!

    1
  • Aslam Mohammad•190
    @AssSam7Posted over 2 years ago

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

    0