Responsive E-Learning Landing Page using Generic HTML/CSS, BEM Naming

Hello Dan, congrats on getting this solution, the layouts looks pretty and the responsiveness is great!

I will try to help you answering your questions the best I can.

1. Seems good for me, but you should try to take more advantage when getting on a new block, for example, if you define a courses class then all their childs should not care about the main class they should start like courses__description courses__heading etc... good job on the naming of your buttons to get those juicy styles!

2. Great work defining articles on each card, I would personally divide the main in two sections because they are really semantically related, instead of divs, one is the hero and the other is the grid of skills.

3. Using properties like object-fit: cover or object-fit: contain and getting your image on a container with display: block and 100% width can save you a lot of work, give it a try on your next challenge!

4. Don't bash yourself with this, the responsiveness is totally fine and the project looks great even on a 4k monitor.

5. You can use some cool gradient generator like css-gradient, maybe this helps you with your gradients.

6. Avoid pixels for sizes, because this can be buggy on high density and low width screens, stick to rems, if you want to use rems as you were using pixels, you can convert your root font-size to 62,5% so 1 rem equals 10px, and then on the body re-assign the font-size to 16px to avoid unnecesary behaviours.

Snnipet to get 1 rem = 10px for easy Figma conversion to CSS without using pixels:

html {
  /* 1rem = 10px */
  font-size: 62.5%;
}
body {
  font-size: 1.6rem;
}

Hope my answers did help you, if you have any questions, don't hesitate to ask!