This is a solution to the Typemaster pre-launch landing page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout for the landing page depending on their device's screen size
- Solution URL: https://www.frontendmentor.io/solutions/typemaster-landing-page-with-bem-scss-flexbox-and-grid-GnUcgK2T8
- Live Site URL: https://madmanden.github.io/typemaster-landing-page/
I used a bit of CSS grid in this challenge. I look forward to using it more. Flexbox and grid is a powerful combination. Personally I'm glad the days of table layout are gone :)
I also found out that it would be beneficial to seperate mobile, tablet and desktop views into different files. I sometimes thought I was updating the desktop media query, but was instead doing it on mobile. Different files would help mitigate that risk. In the same way, it would be helpful to have a live server view of both desktop and mobile at the same time, in case you break something you didn't intend.
Lastly, I really need to learn better commit practices. Especially naming commits. It's so easy to jump all around the code base and "fixing" things, then commit everything into one big non-descript pile.
- GitHub - Madmanden
- Twitter - Madmanden
- Website - Christian Holm
- FrontendMentor - @Madmanden
- Blog - Blog