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
My process was fairly simple. I wrote the html and css side-by-side because I did not have an idea of what all html elements I would need at the beginning. I initially thought of making the entire website as a grid but ended up dropping the idea because it was getting too complicated. I could have used media queries but I thought making the entire website fully responsive at all widths and not just on two would be a good challenge and a good way to test out my grid and flexbox skills.
Built with
Problems
There are few problems I am facing with my design:
- In the nav bar in the header, the transition property does not apply to text decoration.
- The buttons seem to be transiting weirdly when the cursor is hovered.
- The img is behind the h1 tag in the design, but whenever I tried to do this, the image automatically made the h1 and the subtitle disappear.
- I was also not able to make the testimonials grid exactly the way it is in the design, apparantly because of my incomplete knowledge of flexbox.
- I cannot figure out how display the ‘invalid email’ message.
- The site cannot be viewed properly on a mobile device.
It would be highly appreciated if someone could help me with these.
Continued development
There are two main things I need to increase my understanding of:
- Flexbox
- Position
Useful resources
- Grid Tutorial - This tutorial really helped me improve my understanding of CSS Grid. I still need to re-visit it though to further develop my understanding.
- Git Tutorial - This tutorial really helped me learn about Git version control.
Author
