Frontend Mentor - Skilled e-learning landing page solution

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.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

Users should be able to:

• View the optimal layout depending on their device's screen size
• See hover states for interactive elements

Screenshot

url('/screenshot-mobile.png') url('/screenshot-tablet.png') url('/screenshot-desktop.png')

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow

What I learned

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;
}

Continued development

image positioning with translate() media queries css grid

Useful resources

• [Example resource 1] kevin powell youTube - This helped me for XYZ reason. I really liked this teaching method and will use it going forward.

Acknowledgments

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.