Descubre qué ha cambiado en nuestro medio

1

Todo sobre el dise√Īo de p√°ginas web acaba de cambiar

Conceptos que forman parte del dise√Īo en CSS

2

La importancia de recordar las herramientas existentes

3

Flujo normal del documento: display block, inline e inline-block

4

Contextos de formato: Formato de Contexto de Bloque (BFC)

5

Posicionamiento + Din√°mica: ¬ŅC√≥mo se ver√≠a?

¬ŅFlexbox o CSS Grid?

6

Diferencias entre Flexbox y CSS Grid

7

Similitudes entre Flexbox y CSS Grid

8

¬ŅPuedo trabajar con Flexbox y CSS Grid al tiempo?

9

Din√°mica: ¬ŅQu√© usar√≠as? (Parte 1)

10

Din√°mica: ¬ŅQu√© usar√≠as? (Parte 2) + Reto

11

¬ŅCu√°ndo usar Flexbox y cu√°ndo usar CSS Grid?

Modern Layouts con CSS Grid

12

¬ŅQu√© son los Modern CSS Layouts?

13

Patrones para usar como punto de partida

14

Layouts: Super Centered, The Deconstructed Pancake, Sidebar Says, Pancake Stack, Classic Holy Grail Layout

15

Layouts: 12-Span Grid, RAM (Repeat, Auto, MinMax), Line Up, Clamping My Style, Respect for Aspect

Dise√Īo web para desarrolladores

16

Din√°mica: No puedo dejar de ver

17

Design System y detalles visuales a tener en cuenta

18

Tendencias de dise√Īo UI/UX: Fase de inspiraci√≥n y creatividad

19

Wireframes y comunicación visual simple, intuitiva y atractiva

20

Figma para devs: Auto Layout y Neumorphism (Parte 1)

21

Figma para devs: Auto Layout y Neumorphism (Parte 2)

Del dise√Īo al c√≥digo

22

Primeros pasos y estructura inicial

23

Ubicación y creación de elementos

El futuro de CSS Grid

24

Entendiendo las versiones de CSS: ¬Ņexistir√° CSS4?

25

CSS Subgrid

26

Native CSS Masonry Layout

27

CSS feature queries: @supports

28

Nosotros y el futuro de la web: tips para seguir aprendiendo y mantenerse al día

A√ļn no tienes acceso a esta clase

Crea una cuenta y contin√ļa viendo este curso

Layouts: 12-Span Grid, RAM (Repeat, Auto, MinMax), Line Up, Clamping My Style, Respect for Aspect

15/28
Recursos

Aportes 29

Preguntas 3

Ordenar por:

¬ŅQuieres ver m√°s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi√≥n.

Link al video ‚Äú10 single-line CSS layouts‚ÄĚ:
https://www.youtube.com/watch?v=qm0IfG1GyZU

Complicado que cobren por la plataforma cuando estan explicando los videos que uno encuentra GRATIS en internet y no est√°n aportando nada nuevo. CERO C√ďDIGO de pr√°ctica ni nada similar. Muy regular este curso.

llevo 15 clases y siento que no aprendi nada distinto a las cursos anteriores ūüė¶

Wow!!! No sabía que ya existía el apect ratio, yo seguía usando el truco este del padding para mantener una relación:(
.
Es incre√≠ble que hay muchas cosas chulas con CSS que lamentablemente a√ļn no son est√°ndar:(
.

Acá le dejo la pagina oficial de Google dev donde esta cada uno de los modelos, con su respectivo código para practicar.
https://1linelayouts.glitch.me/

Todos los dise√Īos mostrados en los ejemplos los pueden encontrar en la siguiente web explicados a detalle:
https://web.dev/one-line-layouts/

Muy interesante y completa la teor√≠a, pero para aprender realmente lo pr√°ctico quedar√° buscar alg√ļn ejemplo en Youtube.

Hasta ahora y tampoco en el curso anterior a este se ha hecho una pr√°ctica con una p√°gina real usando CSS Grid y poder tomar ese ejemplo para crear cosas por cuenta propia. Tristik. ūüė™

Hice una colección en codepen de algunos layouts, por si quieren ver el código
Codepen

Como comentario, espero sirva de feedback; el contenido del curso es muy bueno y no dudo para nada los conocimientos de la profesora pero creo que para la mayoría se hace pesado seguir el curso de esta manera por que la práctica de código es creo que un 10% y el resto solo va contando lo que hace el código, en lo personal se me hace muy difícil seguir el curso si no veo que es lo que está sucediendo. Sin embargo el contenido y la información es buenísima solo sugiero que debería ser llevado de manera más práctica.

Cada vez estoy m√°s seguro de lo malos ue son los cursos con Estefany Aguilar

Si no captan lo de grow/shrink/basis enontré este video espero que les ayude como a mi

15 clases y ni una sola linea de codigo escrita F

fueran puesto primero este curso y después el de css grid layau

Estas CARDS las hice teniendo en cuenta estas dos opciones
07. RAM (Repeat, Auto, Minmax)
09. Clamping My Style


HTML

<div class="container">
  <div class="card">
  <h1>MAMERTOLANDIA</h1>
  <div class="visual"></div>
  <p>El despertar de Colombia</p>
  <br/>
  <p>Somos la resistencia inteligente.</p>
</div>
<div class="card">
  <h1>MAMERTOLANDIA</h1>
  <div class="visual"></div>
  <p>El despertar de Colombia</p>
  <br/>
  <p>¬ŅRenuncia Duque o golpe de estado?</p>
</div>  
</div>

CSS

body {
  display: grid;
  place-items: center;
  height: 100vh;
}
.container {
  display: grid;
  place-items: center;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
  width: 100vw;
  
}

.visual {
  background-image: url(https://i.ytimg.com/vi/Bx6BTVQu9xA/maxresdefault.jpg);
  background-position: bottom;
  background-repeat: no-repeat;
  border-radius: 20px;
  height: 90px;
  width: 100%;
  background-size: cover;
  margin: 0.5rem 0;
}

.card {
  width: clamp(30ch, 43%, 55ch);
  display: flex;
  flex-direction: column;
  background: #dda15e;
  padding: 1rem;
  height:90%;
  border-radius: 10px;
  -webkit-box-shadow: 5px 4px 15px 1px rgba(0,0,0,0.58); 
box-shadow: 5px 4px 15px 1px rgba(0,0,0,0.58);
}

body {
  font-family: system-ui, sans-serif;
}

h1 {
  font-size: 1.5rem;
  font-weight: bold;
  color: white;
  text-align: center;
  letter-spacing: 3px;
}
p {
  color: white;
  text-align: center;
}

Yo vengo en orden tomando los cursos en la Escuela de Desarrollo Web. Si bien, este curso sí es muy teórico. Ya he pasado por otros prácticos con el profe Diego y con la Profesora Estefany Salas. Este curso me está ayudando a despejar dudas que tenia y tener otro tipo de conocimientos.
Si ocupo practicar, solo reviso algunos ejemplos que muestra la profesora y ya lo pongo en práctica y eso me ha ayudado muchísimo, porque de eso trata, de practicar y resolver.

Un jueguito para poner en pr√°ctica la clase:
https://cssgridgarden.com/#es

Regres√© a √©ste curso por √©ste tema: " Dise√Īo responsivo y el dise√Īo adaptatitvo". Tengo una duda con √©ste tema. Necesariamente tenemos que realizar varios ‚Äúmedia queries‚ÄĚ? o realmente todo depende de la interacci√≥n a la que queremos llevar al usuario?

caniuse de cssgrid https://caniuse.com/css-grid

Espero les sirva ūüėÉ
Span Grid:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Span Grid</title>
  <style>
    body {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      height: 90vh;
    }

    body div {
      text-align: center;
      color: white;
      font-size: 2rem;
    }

    body .span-12 {
      grid-column: 1 / 13;
      background-color: green;
    }

    body .span-6 {
      grid-column: 1 / 7;
      background-color: red;
    }

    body .span-4 {
      grid-column: 1 / 5;
      background-color: blue;
    }

    body .span-2 {
      grid-column: 1 / 3;
      background-color: yellow;
      color: black;
    }
  </style>
</head>
<body>
  <div class="span-12">span-12</div>
  <div class="span-6">span-6</div>
  <div class="span-4">span-4</div>
  <div class="span-2">span-2</div>
</body>
</html>

RAM:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>RAM (Not the memory)</title>
  <style>
    body {
      display: grid;
      gap: 1rem;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }

    body div {
      height: 100px;
      text-align: center;
      color: white;
      font-size: 2rem;
    }

    body .one {
      background-color: cadetblue;
    }

    body .two {
      background-color: blueviolet;
    }

    body .three {
      background-color: forestgreen;
    }

    body .four {
      background-color: deeppink;
    }
  </style>
</head>
<body>
  <div class="one">1</div>
  <div class="two">2</div>
  <div class="three">3</div>
  <div class="four">4</div>
</body>
</html>

Line Up:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Line Up</title>
  <style>
    body {
      height: auto;
      display: grid;
      gap: 1rem;
      grid-template-columns: repeat(3, 1fr);
    }

    body .section {
      background-color: coral;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    body .section div {
      height: 100px;
      width: 120px;
      margin-block-end: 20px;
    }

    body .section p {
      padding-inline: 5%;
    }

    body .section .color-1 {
      background-color: violet;
    }

    body .section .color-2 {
      background-color: dodgerblue;
    }

    body .section .color-3 {
      background-color: chartreuse;
    }
  </style>
</head>
<body>
  <section class="section">
    <h2 class="title">Title - Card 1</h2>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magnam facilis vel eveniet saepe adipisci sapiente cumque accusantium quisquam. Illum voluptate facere nam laudantium sit mollitia est sequi unde soluta distinctio.</p>
    <div class="color-1"></div>
  </section>
  <section class="section">
    <h2 class="title">Title - Card 2</h2>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magnam facilis vel eveniet saepe adipisci sapiente cumque accusantium quisquam. Illum voluptate facere nam laudantium sit mollitia est sequi unde soluta distinctio.</p>
    <div class="color-2"></div>
  </section>
  <section class="section">
    <h2 class="title">Title - Card 3</h2>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magnam facilis vel eveniet saepe adipisci sapiente cumque accusantium quisquam. Illum voluptate facere nam laudantium sit mollitia est sequi unde soluta distinctio.</p>
    <div class="color-3"></div>
  </section>
</body>
</html>

Clamp:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Clamping my style</title>
  <style>
    body {
      display: grid;
      place-items: center;
    }

    body .card {
      width: clamp(23ch, 50%, 46ch);
      display: flex;
      flex-direction: column;
      padding: 1rem;
      background-color: cadetblue;
      color: white;
    }

    body .card .color {
      width: 80%;
      height: 100px;
      background-color: antiquewhite;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <section class="card">
    <h2 class="h2">Title Here</h2>
    <div class="color"></div>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ut esse sed sapiente facilis hic, sunt delectus error quam doloribus cupiditate odit quo accusamus molestiae quaerat recusandae tempora! Possimus, dolor.</p>
  </section>
</body>
</html>

Respect for Aspect:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Respect for Aspect</title>
  <style>
    body {
      display: grid;
      place-items: center;
    }

    body .section {
      width: 50%;
      display: flex;
      flex-direction: column;
      background-color: aquamarine;
      aspect-ratio: 16 / 9; /*1 /1 es un cuadrado*/
    }

    body .section .color {
      width: 80%;
      height: 200px;
      background-color: darkkhaki;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <section class="section">
    <h2 class="h2">Video Title</h2>
    <div class="color"></div>
    <p>Hola gente de Platzi</p>
  </section>
</body>
</html>

Hay dos tipos de personas en estos cursos.
Las que no se dejan influenciar y se dan cuenta de lo nada practico que es este curso y que no les servirá nada para ser desarrolladores web. Y los ignorantes que dicen que les va bien y no se preocupan, pero que ya veran cuando estén frente al código.

En esta pagina pueden practicar los mismo ejemplos de la clase, son ejemplos que google creo.

El código de los ejemplos: https://1linelayouts.glitch.me/ mostrados.

Ac√° el resultado de clamp() en CANIUSE

!Increíble los modern layouts!
Mi consejo es que se detengan, y practiquen lo visto en estas dos √ļltimas clases, cada uno de los tipos de dise√Īos. Personalmente me ayud√≥ mucho m√°s comprender su implementaci√≥n ūüėĄ

Para los que no tengan muy entendido el uso del grid y quieran ver como es su uso en lo practicó aqui les dejo una lista de video que les puede ayudar mucho para poder entender cómo utilizar grid, a mi me ayudo bastante y logre entender bastante bien su uso:
https://www.youtube.com/watch?v=gCox2CqYvto&list=PLvq-jIkSeTUY628cyd9LVbXSXi2xG9mUl

Interesante

Chicos, conocen referentes de css para seguir??

Link a los ejemplos: https://1linelayouts.glitch.me/

Clamping my style es una función de CSS a la que le damos tres parámetros, el primero es el valor mínimo que queremos, el segundo el valor preferido que queremos y el tercero el valor máximo que nos gustaría.