Avatar for shashilo

Shashi Lo

@shashilo Austin, TX

Mentor Score

1,090

Senior Frontend Engineer, UX/UI enthusiast, and father of baby boys with natural Mohawks.

No solutions submitted

No solutions submitted yet

Latest Comments

  • RE: Kele 'Yintii' Heart's "Job Listings - built with React and slight design change" solution

    1

    Good work here Kele. I know this challenge takes time to style and implement. There are some things you should clean up, but you should be proud of how far you've gotten.

    • I do like that you added a filter to the top of the page, but if I'm the designer or the product manager, I'd have you remove it until you click on a tag.
    • If you select multiple tags from the filter, it doesn't properly function.
    • On all your clickable states, there's no hover state. This is not good for usability as the user will not know if something is clickable.
    • If you look at the active-states.jpg, it tells you what should be clickable. Currently, you cannot click on the individual job posting tags. That's how a user will filter the results.
    • Font size, letter spacing, padding on tags, missing box-border on each listing, etc. These are details missed.
  • RE: esraagamal's "using html,css(flexbox)" solution

    1

    Hey Esraa. You're getting better at implementing designs, but I do see some areas that you can improve on:

    • The overall container should be max-width: 920px.
    • The method you are using to vertically and horizontally center the project is not ideal. It's not fluid and responsive. I'd remove this and make it margin: auto;. Because you're already using flexbox, add place-items: center;. This will center the elements vertically and horizontally.
    • In the left column, the icon box sizes are inconsistent.
    • Please check the font spacing, white bubble background color, details of the design. There are many little things off about this implementation. Please use PixelPerfect to overlay the design on top of your implementation to view the details I'm talking about.
    • The mobile view is pretty good aside from some padding issues.
    • Look into implementing your CSS mobile first.
  • RE: Cara Uymatiao's "Flexbox Galore" solution

    1

    Hey Cara. Looks like you were able to redo this using Flexbox. Great job! This implementation looks very much like the design too. I did find some areas that can improve:

    • .main should be 920px wide and the child containers should span the entire 920 width.
    • Remove the fixed height from .left-container. Allow this section to be fluid. This way if anything changed, it's easier to know where the fault is. If you inspect this element with browser dev tools, you'll see that the margin cuts the icons in half. Its true size is lost.
    • <div class="icon-bg"> has a hover state, but it's true clickable region is the <img>. For better usability, remove the div and move .icon-bg to <img class="icon-bg">. Less DOM elements, cleaner code, win-win.
    • .progress-bar-active should be 81.5% of the width.
    • Mobile looks great, but the left/right containers should have only 15px spacing between them.
  • RE: Jisha Joseph's "Single price grid component using html, css and bootstrap" solution

    1

    Hey Jisha! You produced a good solution, however I found some things that can improved with your implementation:

    • Font-size and text color needs a closer look. You're setting your headings at font-weight: 500 when they should be 700.
    • Overall container border-radius and box-shadow is missing.
    • The submit button's border-radius and box-shadow are incorrect as well.
    • Your mobile implementation needs work. The body being width: 45% is not ideal. It should be 100% and add margin to the left/right to space the content from the edges.
  • RE: Shannon Crabill's "Single Price Grid with Flexbox and CSS Variables" solution

    1

    Hey Shannon. You did a good job including all the elements and styles. I did find some items that can improve:

    • Overall, paying attention to the details. If you get PixelPerfect Chrome plugin, you can overlay the design and see where you are off from the design.
    • The Content padding is a little off.
    • Check the font colors, size, etc. There's a few places that it's a tad off.
    • You're missing the box-shadow from the main container and the submit button.
    • Mobile needs a little work. There needs to be space on the left/right of the container. Also, check the border-radius on Monthly Subscription box.