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: (https://www.frontendmentor.io/solutions/responsive-landing-page-built-mobilefirst-with-flexbox-Cx9cn_A-xd)
- Live Site URL: (https://victoria-sardelli.github.io/skilled-e-learning-landing/)
- Semantic HTML5 markup
- Flexbox
- Mobile-first workflow
Two especially new and interesting challenges for me were:
- to display a half-opaque white overlay on the buttons upon hover
- to allow the banner image to "leak" into the header above on both tablet and desktop (as well as the section of text on its left when on tablet mode), while still controlling overflow and making the header button clickable
From this project, I learned a lot about positioning elements on the screen. I especially got to practice (and better appreciate!) the use of relative and absolute positioning. It was also one of the first times I used the flexbox gap property, which really came in handy for laying the square tiles out onto the screen with the right amount of space in between.
I'd like to continue practicing using the BEM naming convention for CSS classes. I'd also like to continue learning flexbox techniques, and how to achieve various layouts, positionings, and responsive features.
- Frontend Mentor - @Victoria-Sardelli