lesson 5-2: codely page course list end

Author: ismanapa

52-codely-page-course-list/index.html

@@ -41,7 +41,7 @@
   </header>
 
   <main class="courses">
-    <article class="course-card">
+    <article tabindex="0" class="course-card">
       <div class="course-card__image">
         <img src="./assets/de-javascript-a-typescript.png" alt="Portada curso De JavaScript a TypeScript">
       </div>
@@ -53,7 +53,7 @@ <h3 class="course-card__title">🏗️ De JavaScript a TypeScript</h3>
       <p>¡Después de este curso no querrás volver a JavaScript!</p>
     </article>
 
-    <article class="course-card">
+    <article tabindex="0" class="course-card">
       <div class="course-card__image">
         <img src="./assets/css-grid.jpg" alt="Portada curso CSS Grid a fondo">
       </div>
@@ -63,7 +63,7 @@ <h3 class="course-card__title">🍱 CSS Grid a fondo</h3>
       </p>
     </article>
 
-    <article class="course-card">
+    <article tabindex="0" class="course-card">
       <div class="course-card__image">
         <img src="./assets/light-dark-themes.jpg" alt="Portada curso Light and Dark themes accesibles">
       </div>
@@ -74,7 +74,7 @@ <h3 class="course-card__title">🌚🌝 Light & Dark themes accesibles</h3>
       </p>
     </article>
 
-    <article class="course-card">
+    <article tabindex="0" class="course-card">
       <div class="course-card__image">
         <img src="./assets/domain-driven-design.jpg" alt="Portada curso Domain-Drive Design">
       </div>
@@ -85,7 +85,7 @@ <h3 class="course-card__title">🕋 Domain-Driven Design</h3>
       </p>
     </article>
 
-    <article class="course-card">
+    <article tabindex="0" class="course-card">
       <div class="course-card__image">
         <img src="./assets/php-8.jpg" alt="Portada curso PHP 9 Ejemplos para el Mundo Real">
       </div>
@@ -96,7 +96,7 @@ <h3 class="course-card__title">🐘 PHP 8: Novedades y ejemplos para el Mundo Re
       </p>
     </article>
 
-    <article class="course-card">
+    <article tabindex="0" class="course-card">
       <div class="course-card__image">
         <img class="course-card__image" src="./assets/api-http-go-hexagonal.jpg"
           alt="Portada curso API HTTP en Go con arquitectura hexagonal">
@@ -111,7 +111,7 @@ <h3 class="course-card__title">⛳ API HTTP en Go aplicando Arquitectura Hexagon
       </p>
     </article>
 
-    <article class="course-card">
+    <article tabindex="0" class="course-card">
       <div class="course-card__image">
         <img class="course-card__image" src="./assets/setup-linux.jpg" alt="Portada curso Setup Linux para programar">
       </div>
@@ -121,7 +121,7 @@ <h3 class="course-card__title">🐧 Setup Linux para Programar</h3>
       </p>
     </article>
 
-    <article class="course-card">
+    <article tabindex="0" class="course-card">
       <div class="course-card__image">
         <img class="course-card__image" src="./assets/js-moderno.jpg" alt="Portada curso JavaScript moderno">
       </div>
@@ -133,7 +133,7 @@ <h3 class="course-card__title">🐥 JavaScript moderno: Buenas prácticas para e
       </p>
     </article>
 
-    <article class="course-card">
+    <article tabindex="0" class="course-card">
       <div class="course-card__image">
         <img class="course-card__image" src="./assets/testing-frontend.jpg" alt="Portada curso Testing en frontend">
       </div>

52-codely-page-course-list/scss/_courses.scss

@@ -0,0 +1,52 @@
+.courses {
+  margin-top: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  align-content: center;
+
+  @media screen and (min-width: 50rem) {
+    flex-wrap: wrap;
+    height: 1500px;
+
+    &::before,
+    &::after {
+      content: "";
+      flex-basis: 100%;
+      width: 0;
+      order: 2;
+    }
+  }
+
+  .course-card {
+    width: 80%;
+
+    &__image {
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    &__title {
+      color: #238b53;
+    }
+
+    @media screen and (min-width: 50rem) {
+      width: 28%;
+
+      &:nth-child(3n + 1) {
+        order: 1;
+      }
+
+      &:nth-child(3n + 2) {
+        order: 2;
+      }
+
+      &:nth-child(3n) {
+        order: 3;
+      }
+    }
+  }
+}

52-codely-page-course-list/scss/index.scss

@@ -1,2 +1,3 @@
 @import "./base";
 @import "./header";
+@import "./courses";