Skip to content
OverviewSolutions
10
Comments
51

Laharl

@UrbanskiDevFrance1,000 points

A young full-stack freelancer who seeks to learn more while sharing his knowledge to assist other developers. My github link since I don't find a way to update it manually : https://github.com/Laharls

Latest solutions

View more solutions

Latest comments

  • Laharl•1,000
    @UrbanskiDev

    Hello Jasmin Hidanovic !

    Good job on completing this challenge. To answer your question, I feel you did great on the responsive, there's not many things to change, but I would adjust when the media query occur, because it happens way too soon (at 415px, which doesn't really make a good design for small device which has a width higher than 415px, but not much higher either)

    The most common breakpoints for media queries are :

    • 640px
    • 768px
    • 1024px
    • 1280px

    You can adapt them to the design you have to work on, but it should gives you a better idea at which width you should use a media query.

    Apart from that, it looks great, congrats again, hope it is useful and answer your question, happy coding !

    Marked as helpful
  • Laharl•1,000
    @UrbanskiDev

    Hello Emmanuel Luka !

    vw and vh correspond to the viewport width and the viewport height, which is based on the width and the height screen of a device. It is useful to size sections.

    Meanwhile, percentages is based on the relative size of the parent, and not the screen of the device used.

    I have found some links, which may help you to understand better the topic :

    I hope it answer your question, keep learning and happy coding !

  • Laharl•1,000
    @UrbanskiDev

    Hi Uzair Bajwa !

    To fix your issue with the centering, I did this on the body tag to center the card :

    display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100vh;

    The centering wasn't doing anything because the body element wasn't taking all the height available.

    Don't forget to remove the padding you added, and it will work like a charm, hope it helps, keep learning and happy coding !

    Marked as helpful
  • Laharl•1,000
    @UrbanskiDev

    Hello Laurie Jefferson !

    I feel there is something wrong with the dropdown on the desktop view, it works, but if you look closely, some elements get a little more space, and the page get bigger in height. I feel it would be better for the dropdown to not affect the height of the page. Also, when you click on one dropdown button, then the other, the first one clicked doesn't close off automatically. Also, I think you could add some kind of effect to make it visually appealing when you hover an element of the dropdown menu (for the desktop part)

    For the mobile part in general, I would add more spacing between element, it feel kinda cramped (not the menu), but otherwise, I think it looks cool. You may try to add a sort of transition to make the mobile menu look smoother. There is also a bug on the mobile menu, when you click to open the dropdown, then close the entire menu, the content of the dropdown is still visible ! (I think it is the same as the desktop version I mentionned earlier)

    Globally, you did a good job, keep learning and happy coding !

    Marked as helpful
  • Laharl•1,000
    @UrbanskiDev

    Hi Jaedon !

    Positioning and aligning is not really difficult, you can use flex and grid to do the job (which I saw you used in your code) which make it way easier to position or align element, maybe you need to go deeper on the subject

    For the transitions to the gradient, it is possible to achieve, but it's a bit tricky to achieve, I have found a codepen element which may help you to achieve the effect you wanted : Transition gradient

    For the javascript files,since it's a simple and small project, it does not really matter if they are in the same page, but for bigger project, it's better to sort the file by their functionalities, what they do.

    I hope it answer well your questions, keep learning and happy coding !

    Marked as helpful
  • Laharl•1,000
    @UrbanskiDev

    Hello anacarolinabmv !

    I don't know how you tackled this challenge, by starting to build the desktop version or the mobile version but I would recommend to always start with the mobile version, which makes it easier after to work for the tablet view & the desktop view.

    Also, if you test the responsive of the page, you will see it is not really responsive, the mobile size is working until your mobile screen is doing a width of 375px. (you can test it with your browser dev console)

    To make sure your design works well for larger devices, I recommend you to work with max-width, and medias query, here's a link about media queries : MDN media queries

    Otherwise, great job on the challenge, keep learning and happy coding !

    Marked as helpful
View more comments