This is a solution to the Skilled e-learning 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 depending on their device's screen size
- See hover states for interactive elements
- Solution URL: Add solution URL here
- Live Site URL: https://hilarious-zuccutto-26d3b9.netlify.app/
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- CUBE CSS with Tailwind
This was a good challenge to mainly use intrinsic design principles on. For instance, the main card grid works very well with an auto-fit layout, avoiding the need for specific media queries.
The main problem I hit building this was the hero image. The designers had combined the image, the stats and the decorative stripe all into a single image file. This was problematic for two reasons. Firstly it meant the statistics were only available in alt text. Secondly positioning the image with the stripe extending the full range of the screen was difficult. Absolute positioning techniques would not work because the whole image would be removed from the document flow. Any change to the text content of the hero, or font-size would have risked serious overflow issues.
To solve these problems I broke up the image and recreated its parts with HTML and CSS. This meant the data was actually in the document, rather than just alt text. And now the data and the main image could take up space in the layout, and only have the stripe take an absolute position. This does leave small inconsistancies where the stripe meets the main image, but I think this is an acceptable compromise as it prevents layout breaks on all screen-sizes.
- Github - Alex Marshall
- Frontend Mentor - @AlexKMarshall
- Twitter - @AlexKMarshall1