Skip to content
OverviewSolutions
2
Comments
18

David Omar

@davidomarfMexico City, Mexico580 points

Hey! I'm David. I'm a dev with experience in React and Angular. I'll try to review some of the solutions marked as Feedback Requested. I'll be using the challenges I solve to make videos explaining common practices in front-end development. I'm on the slack channel, so feel free to reach me!

I’m currently learning...

Animations and Skeleton Loaders.

Latest solutions

Latest comments

  • David Omar•580
    @davidomarf

    Hi!

    I noticed some things.

    If I add some things to the filters, and then manually remove them by deleting one by one, the list doesn't update. Even if I end up with 0 filters.

    When the list is pretty small, the background color doesn't cover the whole body, only some part of it.

    The "Clear" button isn't vertically centered.

    In widths between 768 and ~1080, the layout for the individual offerings start to overlap within itself. Maybe you could set the media query to a greater width, or make the "wide" layout more responsive.

    One tip is to align the tags (Frontend, Senior, HTML CSS...) to the right instead of the left.

    Nice animations on the filter bar! I also loved the cursor for the hoverings!

    The layout is good in general.

    I'll go to sleep, but I'll try to check the code tomorrow morning and offer some comments about it.

    Keep the good work!

  • David Omar•580
    @davidomarf

    This is awesome! I'll be visiting your solution to get some ideas about the positioning of layouts like this. I've never done anything similar.

  • David Omar•580
    @davidomarf

    Hi!

    At first I noticed that the content was being contained always at the center even in wider screens. That's good!

    I realized that there were some text elements that had <br> in there just to make some vertical space.

    A more convenient way to do it, is by limiting the width of the text container. Then if the text grows bigger than that width, it'll wrap inside it, instead of growing sideways like crazy.

    I also noticed some horizontal scroll in all widths. After searching a little bit, I found out what was causing it. The companies container, and the features container were both wider than the div.content in some small widths. But the footer was always wider, no matter in what width.

    A fix for the footer issue is using box-sizing: border-box on the footer tag. Usually, when you set the width of an element, and then add border or padding to it, it'll be extra space to that width. And sometimes you just expect it to be included in that width. That's what border-box does.

    You can check this guide: https://css-tricks.com/box-sizing/

    And a fix for the features and companies containers, is trying to limit the size of them, and of the 'main' containers, like body and div.content.

    I see you use flex-box, so you can try using flex-wrap. This allows the items inside the flex-box to get into another row/column if there's not enough space to fit them all.

    Try adding this to your ul.companies and ul.features:

    flex-wrap: wrap;
justify-content: center;

    And of course, adding media queries as scorpion suggested.

    Nice work :) It looks polished. The work with the buttons and sections it's pretty good.

  • David Omar•580
    @davidomarf

    Hi Luis!

    Good layout. It responds well to resizing.

    There's one detail in your div.discount. In the full-width style it only has vertical padding. And there's a resolution in which the text in the div has the same width than the div, and looks like it has a bad layout.

    You could improve the input validation. If I try to put 'a' as email, it doesn't complain.

    Overall, good work. :)

  • David Omar•580
    @davidomarf

    Hey!

    You should try to wrap your solution in another container so it is contained in a limited space, and doesn't cover the whole width of the screen.

    And remember to add border-radius for the round corners!

    Nice use case for grid! I've always found it difficult.

  • David Omar•580
    @davidomarf

    This is an amazing solution! One of my favorite ones so far. Nothing I could add.

    Very responsive, perfect layouts for different media queries, and in general, done with best practices.

    Congrats! :)

View more comments