Skip to content
OverviewSolutions
8
Comments
16
Sergio Reynoso
@sergioreynoso

All comments

  • Sergio Reynoso•320
    @sergioreynoso

    Nice job! I notice the <img> is not taking the whole height of its container. This is because the <img> tag only has it's width at 100%, you want to also do its height. Of course this would then then stretch it and distort it; this is where the object-fit property comes to the rescue by setting it to cover.

    img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

    A challenge for you is to pretend this was as component that would take any kind of image without the purple overlay added to it. How would you add the color overlay with just css? ;-)

    Cheers!

    Marked as helpful
  • Sergio Reynoso•320
    @sergioreynoso

    Great work, I love the smooth transition to dark-mode.

    I would recommend testing it out with a slow connection. You will notice the app needs a pre-loader to improve on the user experience. Specially while you wait axios to fetch user data.

    Btw, I also debated on React and decided going with vanilla js; I wanted to practice js modules. In the end, I might just use this as a practice in taking a vanilla js project and converting it to React lol.

    Cheers!

    Marked as helpful
  • Sergio Reynoso•320
    @sergioreynoso

    Good job! Very clean code. Some suggestions.

    1- The dark mode toggle doesn't activate when I navigate using the tab button. This is not an ideal user experience for those with a disability.

    2 - If you simulate a slow connection the applications just sits there until the fetch api finally loads the results. I would recommend giving the user a message that the information is loading.

    3 - Match the top margin to the design.

    4 - I really like the idea of a making a utility class to fetch data "FetchWrapper", just not sure why you use a class instead of just a regular function.

    5 - I would recommend you break up searchUser function into sub functions. This would make the code more readable. For example where you commented '// format joined date', this could easily be made into formatJoinedDate(arg);. It's good practice to keep functions pure and not have them do too many things.

    6 - As a next step I would recommend you break up your script file into modules. This goes back to point 5, it will make your code more readable.

    Again, very good work and I hope these tips help. :-)

    Marked as helpful
  • Sergio Reynoso•320
    @sergioreynoso

    Hi Spencer, good job in with the project, looks very clean. Here is my feedback:

    • The page lacks a preloader, I noticed a delay in the css rendering when I tested it on a slow connection. The quotes also lag when I refresh them. Test it out for yourself https://www.browserstack.com/guide/how-to-perform-network-throttling-in-chrome

    • It would make for a better user experience if the more button was completely clickable. I kept missing the arrow when I was trying to expand the bottoms panel.

    • I think this would be a good opportunity to practice your animation skills. Why not have the bottom panel slide up as it pushes the clock and quote up? ;-)

    Hope this helps. Good luck!

  • Sergio Reynoso•320
    @sergioreynoso

    Hi Tamir, great work in getting this far! The first thing I would recommend is you take care of accessibility issues, as they look to be very easy to fix. Second, I would recommend you add some visual, like a preloader, for when the page is loading data. I didn't go too deep into your code, but for some reason there is a delay for when the styles are rendered, I think it's related to rendering the page before api data is fully loaded.

    Good luck!

  • Sergio Reynoso•320
    @sergioreynoso

    Your accessibility implementation is awesome. I tested it with the Apple screen reader and the navigation was flawless IMO, and inspired me to do the same with mines and all future projects. Thank you for the follow. ;-)

  • Sergio Reynoso•320
    @sergioreynoso

    Good job! To resolved the one accessibility error in the report I would recommend turning that H5 heading tag into an H4. Headings should only increase by one.

    Marked as helpful
  • Sergio Reynoso•320
    @sergioreynoso

    Great work!

    I use this Firefox plugin to make sure everything is as close to the design as possible: https://addons.mozilla.org/en-US/firefox/addon/pixel-perfect-pro/

    It lets you use an exported png/jpg of the design and overlay it over your markup, and this way it's much easier to line things up. Good luck!

  • Sergio Reynoso•320
    @sergioreynoso

    Nice work! Check out my solution on this project for drag & drop. I used this library called Dragula that was super easy to use. I would still like to come back to it and try to do drag & drop on my own without a library. Cheers!

  • Sergio Reynoso•320
    @sergioreynoso

    Good job getting it this close. Your HTML is not using any semantic elements, here's more info as why it's important to write semantic markup, Why Use Semantic HTML?. This will help resolve your accessibility issues.

    Good luck!

  • Sergio Reynoso•320
    @sergioreynoso

    Good job! Just a few minor things. <div class="container">This can be more semantic by using and <article> tag. I would also give it a class name that is more specific like ''card'' or "profile-card".

    Cheers,

    Marked as helpful
  • Sergio Reynoso•320
    @sergioreynoso

    I would work on first resolving the accessibility and html issues first, which are mostly do to duplicate IDs. I would avoid IDs because they are too specific. I recommend using something like BEM https://en.bem.info/methodology/.

    I would also recommend using semantic tags in your markup.

    Cheers!

  • Sergio Reynoso•320
    @sergioreynoso

    Good job! As an extra challenge, try adding the overlay as a pseudo element in css instead of using a div. This would make your image components more modular.

  • Sergio Reynoso•320
    @sergioreynoso

    Good job! I would practice your eye for detail. Try to get it as close as possible to the design. Not pixel perfect, just some obvious things like, the round corners are too small, the color of your background image is off, some spacing inconsistencies. Good luck!

  • Sergio Reynoso•320
    @sergioreynoso

    Good effort. I would work on fixing some inconsistencies that don't follow the design. For example, the background color on the content side is wrong, stats labels are also too big, as well as the label top margin. All of these are very easy to fix by just following the design. No saying you have to be pixel perfect here, just close. Good luck!