First Challenge on Frontend Mentor that I coded without any tutorials. Looking forward to see the report and get cracking on correcting mistakes I missed. Please feel free to comment on things I might have missed. It is hard to code on design when my sight is deteriorating fast. I think I need to invest in Figma.
Nice job! 😊 To make it look better on smaller screens (phone), you can add .card margin, for instance, margin: 0px 20px; That way, it won't take up the whole phone screen width.
Good luck with other challenges!
After you successfully send the email, how do you remove the success message after a set amount of time?
To remove success message, you can use setTimeout, in your case it could look something like this setTimeout(function(){ text.innerHTML = ' '; }, 3500); This will remove Success message after 3.5 seconds ;)
How was my UI design for the settings? Are my animations good?
This is my second solution, please pass on the feedback on the following:
Overall nice job!! Seems responsive, hover animations are nice. :)
One thing though - card shadow seems a little bit thick, box-shadow parameters 0 1.4rem 3.5rem 0.1rem #00000085 for .outer-card seemed to look good to my eye, maybe you can try something you think would look better. :)
Great job!!!
One thing - you might want to add some left and right margin for the card/change card width a little bit so it is not 100%, for mobile screens. I opened it from my phone, and although it doesn’t look bad, it would look slightly better if there was some left and right space :)
Hello! This is definitely my worst attempt at a challenge, I don't really know what happened to be honest, it was a mix of frustration about box sizes, background image not showing and responsiveness adjusts. It turned out in the end, but the code is messy and I even gave up giving the proper blend mode to the image (I could've probably sorted that out, but I was really done with it). May I ask you how do you work with projects like this, where the target resolution is 1440p, but you have a 1080p monitor? How do you "simulate" the differences while coding? I can see that my proportions are right, but I'm on a different resolution device so how can I know what the difference will be on 2K? I saw a video about the "clamp" element, I will try to use it in the next responsive challenge, what do you think of it? Is it helpfull? Thanks for reading and happy coding!
I am not sure whether you have tried this...but :) You can simulate responsiveness of your web app and change dimensions of the possible screen, by right-clicking in your page, then "Inspect" and in the Devtools tab, which opens, on the top left you will see small phone/tablet icon, if you hover over it says Toggle device toolbar. Click it, then on your page, on top you will see a toolbar, choose dimensions: Responsive and then you can change your dimensions both manually and also below this toolbar you can click on different pre-defined dimensions, for example, Tablet - 768px, Laptop - 1024px, Laptop - 1440px etc. Despite the difficulties you faced, your solution looks nice anyway!
