news-letter-sign-up using CSS and Javascript
Solution retrospective
On this project the hardest part was adjusting the height for the image on sign up page/index page when transitioning from mobile to large screen. I eventually figured it out by using flex-box and grid. Also, on success.html on mobile, the success card gave me some issues. As the screen got smaller, the card height would shrink and the card parent container would show with dark background. I fixed this issue with little bit of JavaScript.
I have some question regarding CSS.
- What is the best practice when working with images?
- How to organize CSS?
- Best practice for naming selectors?
Thank you very much for your help!
Please log in to post a comment
Log in with GitHubCommunity feedback
- @antoebtfr
Great job ! 👍
- Missing the
cursor: pointeron the subscribe button - ash@loremcompany.com is static in the success modal. Try to set it dynamically. Ask me if you need help
Answering questions
- Depends of the project and of the situation
- In the project architecture or in a CSS file ?
Architecture :
Depends of the structure, frameworks, CMS used but essentially you regroup them in style folder with different files like style/main.css, style/card.css
Ex : https://github.com/antoebtfr/fM_TODO_list/tree/master/styles
File :
No organisation needed, it's not like scss. Just try to not duplicate the selector like .news-container at line 34 and the same .news-container at line 356 so try to search ( with the command ) in the file if there is no selector yet. If there is media queries in the file try to place them at the end but it's not a "rule"
3.Make it obvious, and use kebab-case
It triggers me so much to see the "Challenge by" like this. So ugly😂
- Missing the
Join 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