Frontend Mentor - Fylo dark theme landing page solution
This is a solution to the Fylo dark theme landing page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Table of contents
Overview
The challenge
Users should be able to:
- View the optimal layout for the site depending on their device's screen size
- See hover states for all interactive elements on the page
Screenshot
Links
My process
Built with
- Desktop-first workflow
- Semantic HTML5 markup
- Flexbox
- CSS Grid
- BEM Naming Convention
- SASS - CSS preprocessor
What I learned
The :invalid CSS pseudo-class
This selector allows to customize styles to invalid elements see below:
.signup__input-email:invalid ~ .signup__error-input {
display: block;
}
Useful resources
-
https://en.bem.info/methodology/naming-convention/ - This helps me in understanding the application of BEM.
-
https://gist.github.com/AdamMarsden/7b85e8d5bdb5bef969a0 - Make sass folder structure more organized.
Author
- Website - https://cholis04.github.io
- Frontend Mentor - @cholis04
- Dribbble - cholis04
- Instagram - @cholis04
- Codepen - cholis04
Acknowledgments
Many thanks to anyone who provided feedback.