Design comparison
Solution retrospective
Hi friends! I had difficulty making the email button responsive. Any way I can improve my code? I'm also new to JavaScript, let me know if I can also improve my code on there.
Community feedback
- @FanushhhPosted over 1 year ago
Hey Justin,
Well done on your challenge! I can see that you only just planned for the layout to be responsive for the specific widths requested in the file, however, it doesn't have to be complicated.
First off, start by removing any fixed width you have on your project, instead, try and work with max-width: (choose your size), width:100%. These two lines of code will make your life easier, if you know where to place them. Why? Because you no longer have to worry about setting the design to be clear for each device size and instead you let the browser do that. When you set the max-width on an element and width of 100%, you're basically saying, I want you to cover the whole width when you have it available but as soon as the width of the viewport gets bigger than the one of the element, you stop at that specific value set on max-width.
I'm not sure if I explained it best but here is a resource to read: https://css-tricks.com/tale-width-max-width/
Best of luck and happy coding, Fanush
0 - @0xabdulkhaliqPosted over 1 year ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
- I have other recommendations regarding your code that I believe will be of great interest to you.
JAVASCRIPT 🟡:
- The way you declared variables are need to be well structured and organized
- Take a look at the following example code which describes a better way of declaring variables to have a well structured code
const firstName = "Your"; const lastName = "Name"; const emailAddress = "[email protected]"; const password = "supersecret";
- instead try this,
const firstName = "Your", lastName = "Name", emailAddress = "[email protected]" ••• ••• // n number of declarations password = "supersecret"; // make sure to add a semicolon at end of last declaration
- This single line declaration with separated commas will helps you to have a better structured code and improves readability though
.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord