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. Figma design and all assets were provided by Frontend Mentor. The solution was coded by me.
Check out the live version on Netlify!
Users should be able to:
- View the optimal layout depending on their device's screen size
- See hover states for interactive elements
- Live Site URL: https://skilled-learning-lucieyarish.netlify.app/
- Explored Figma mockup and creating the project structure.
- Imported Google Font, defined resets in CSS and set up CSS variables for font family and weight, border radius values, and colors.
- Build mobile version.
- Build tablet version.
- Build desktop version.
- Add active states for desktop.
- Reviewed code.
- Deployed to Netlify.
HTML and CSS
- Explored CSS Block Element Modifier naming, solidified responsive design and mobile-first approach knowledge and identified areas for improvement.
- Worked with a Figma mockup provided by Frontend Mentor, bringing the interface to life. Embraced a mobile-first approach and honed responsive design skills using relative units, ensuring a seamless experience across devices.
- Encountered a fascinating bug that led me to delve into the z-index property in CSS. Hover effects on one of three buttons weren't working due to an absolutely positioned image overlapping the button—a valuable lesson in troubleshooting!
- Every challenge is an opportunity to learn and grow. The journey from design to launch was filled with lessons, and I'm eager to refine my skills further.
Excited to share that before tackling my next Frontend Mentor project, I'll be working on an upcoming Scrimba Frontend Developer Career Path solo project called Learning Journal. This project aims to enhance my skills in building layouts with CSS grid. It's a thrilling endeavor that involves creating a multi-page website comprising blog posts, an about me page, and a home page. Following that, for my next Frontend Mentor challenge, I'm planning to explore CSS preprocessors like Sass or Less. Additionally, I'll be focusing on refining my CSS class naming logic. Continuous improvement is the name of the game!
Tracked my progress and completed the project in 7 hours, including all final touch ups. Proof that learning and creating can be efficient and enjoyable!
- Frontend Mentor - @lucieyarish
- Hashnode - Lucie Yarish
Thank you, Frontend Mentor, for the fantastic challenge! Looking forward to more projects and continued growth in the vast world of frontend development. 🌐✨