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
url('/screenshot-mobile.png') url('/screenshot-tablet.png') url('/screenshot-desktop.png')
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
How to work with CSS grid template and media queries
To see how you can add code snippets, see below:
.proud-of-this-css {
translate: 0 -50px;
}
image positioning with translate() media queries css grid
- [Example resource 1] kevin powell youTube - This helped me for XYZ reason. I really liked this teaching method and will use it going forward.
I used Andy Bells css variables in my css layout https://piccalil.li/blog/a-modern-css-reset I used Kevin Powells Css Grid layout to help position my grid container Kevin Powell github learn grid the easy way.