Skilled e-learning landing page

What are you most proud of, and what would you do differently next time?

I learned to make the course cards responsive by using CSS Grid with the grid-template-columns property, using the repeat() and minmax() functions for flexible layout control.

.courses .container.grid {
  grid-template-columns: repeat(auto-fit, minmax(352px, 1fr));
  gap: 32px;
}

.courses .courses-card {
  position: relative;
  width: 100%;
  height: 322px;
  padding: 64px 32px 40px;
  border-radius: 15px;
  box-shadow: 0 25px 50px rgba(6, 22, 141, 0.0442);
}

I also learned how to write clean HTML and CSS code, using CSS utilities classes and CSS Variables (custom properties), for different styles, such as:

• Background color and Text color.
• Font sizes and Text styles.
• CSS Grid and CSS Flexbox.
• Padding and Margin properties.

I will keep improving my HTML and CSS skills and learning new tricks and techniques. I will be focusing specifically on mastering CSS Flexbox and Grid techniques and responsive web design.

What challenges did you encounter, and how did you overcome them?

Positioning the header image was a bit challenging, but I finally managed to place it successfully using relative positioning.