Skip to content
OverviewSolutions
3
Comments
20

Sunny

@statanasovaBulgaria525 points

I am back to work after a 3 year long pause. It is exciting to see how much Grid, Flex and JS have evolved! I have a ton to learn and it is great we can improve together in a front end community. I love it!

I’m currently learning...

CSS Grid and Flex BEM and OOCSS JavaScript ES6

Latest solutions

Latest comments

  • Sunny•525
    @statanasova

    Hey, cindoor :) Good job with the CSS grid.

    Yes, I think you got the right idea for the opacity of the text colors - for the 'colored' cards you used white as a global color for all the texts and adjusted the opacity accordingly. And I believe you can do the same for the white cards - use the dark gray for all the texts in the card and change the opacity where needed. That will eliminate that slight difference between the black and the shades of gray that can be seen right now.

    Apart from that, I'd suggest making the website responsive by altering the grid for mobile screens. And what abdulrsf said above - limit the size of your .grid container and center it on the page so the cards won't become too wide on large desktops.

    Keep it up, I'd be glad to see more of your work :)

    PS. Upvote if you found any of this helpful

  • Sunny•525
    @statanasova

    Hi Raja, the solution is looking good!

    For the button and icon, I'd say wrap the 3 elements (input, button and icon) in a div tag with position: relative;. The div would then be just as big as the input field and if you position the button at right: 0; it will stick to the right of the input as well :) Then position the icon the same way - your button has a fixed width of 6.25rem on desktop, so you can set the icon to right: 7.25rem. I think this should solve your headaches :)

    By the way, I noticed the layout shifts back to the mobile version when the resolution is bigger than 1440px, is that on purpose?

    Keep up the good work!

    PS. Upvote if any of this was helpful

  • Sunny•525
    @statanasova

    Hi Axelle,

    I think you've done a fantastic job on this challenge! I am especially impressed with your use of CSS Grid - everything is in it's right place, the buttons of the slider align with the bottom right image. Really great job :) I am definitely inspired to have one more attempt at this challenge.

    I can only think of one tip right now - for designs that span the full view height 100vh, try setting some min-heights, so the content won't squish too much and all top-bottom padding won't dissapear when the viewport becomes much smaller.

    Keep it up!

    Ps. Upvote if you found any of this helpful :)

  • Sunny•525
    @statanasova

    You've given the project quite a lot of though, that's great :)

    Honestly, I don't know why frontend devs are expected to come up with tablet layouts. But that's how it is in real-life projects as well - you get a mobile and a desktop layout and you scale them... somehow :) It can become a huuuge time waster indeed.

    Practice makes perfect, I guess...

    Popup - yes, I'm using Firefox, probably why I was seeing the empty popup. But I think the preventDefault() works, because I don't see it anymore :)

    Colors - oh wow, I also use sass, but I prefer css variables for my colors and had no idea sass converts HSLs to RGBs. That's very interesting, thanks!

    Bye for now!

  • Sunny•525
    @statanasova

    Hi Thomas. I agree, this one IS surprisingly difficult :) I like the way you tracked your time, I should really start doing this!

    I noticed that your layout look perfectly on 375px mobile and 1440px desktops, but for resolutions between 375 and 1200px it sticks to the 375px layout. Is this on purpose? I believe layouts are expected to expand and shift as the resolution grows - tablet users, for example, would see a layout that is a bit different than the one for mobile users.

    That being said, the result from your approach doesn't look too bad for this particular design :) Just keep in mind that clients usually expect to see fully fluid/responsive implementations - with the layout shifting at least once or twice between mobile and desktop.

    About the form - an empty white popup appears when I enter an invalid email. You can prevent this behavior by adding an event.preventDefault(); when handling the form.

    Finally :) The linear gradients look good to me. I see you use RGB values. Why not directly use the hsl values from the styleguide? :) It will save you the time to convert them, plus HSL colors nowadays are considered the better option for larger scale projects. Here is a bit info on that, if you're interested.

    Good luck with your 365 days of 1 project per day. Seems like a great challenge, you will learn so much!

    PS. Upvote if you found any of this helpful :)

  • Sunny•525
    @statanasova

    This is a good, responsive implementation :)

    Using Bootstrap for a project like this is not very easy - the columns in the design are with specific widths and you can't always recreate them exactly with the 12 Bootstrap columns, all the gutters, etc. But you did well :)

    Are you thinking of trying Flexbox and Grid? If they are new to you, maybe start with Flexbox by using it for little things in projects like this one - for example for aligning the avatar image with the title and subtitle, etc.

    Flexbox makes life so much easier :)

    Keep it up!

View more comments