@statanasova
Posted
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 :)
@tboittin
Posted
@statanasova Hi Sunny, thanks for the reply :)
I usually do some in-between design but couldn't figure a quick pattern that would look good for this one. In the end, I just kept the mobile design using max-width to prevent containers to go out of control :)
Thanks for the prevent.default() tips, I usually do that with project using event trigger in React.js, didn't thought about it in this html project. Will give it a try. To prevent the built-in tooltip I used this.setCustomValidity(' ') which replace the text of the toolbox with a space. I'm using Google Chrome by the way. I first tried to replace with nothing between quotes but it didn't override the default message so I tried with a space and it worked out. I didn't try this with other browsers, the behavior might be different and that would explain why you're getting this weird popup.
Finally, I indeed use the hsl values but since I'm using sass, my stylesheet gets preprocessed into usual css. It seems sass turns hsl values into rgb for some reason.
Happy New Year !
