Web Developer Fundamentals

1

Qu茅 aprender谩s sobre HTML y CSS

2

驴Qu茅 es el Frontend?

3

驴Qu茅 es Backend?

4

驴Qu茅 es Full Stack?

5

P谩ginas Est谩ticas vs. Din谩micas

HTML

6

HTML: anatom铆a de una p谩gina web

7

Index y su estructura b谩sica: head

8

Index y su estructura b谩sica: body

9

Reto: crea tu lista de compras del supermercado

10

Anatom铆a de una etiqueta de HTML

Etiquetas multimedia

11

Tipos de im谩genes

12

Optimizaci贸n de im谩genes

13

Etiqueta img

14

Etiqueta figure

15

Etiqueta video

Formularios

16

Etiqueta form e input

17

Calendar

18

Autocomplete y require

19

Select

20

Input type submit vs. Button tag

CSS

21

驴Qu茅 es CSS?

22

驴C贸mo utilizamos CSS?: por etiqueta, selector, class y por ID

23

Pseudo clases y pseudo elementos

24

Anatom铆a de una regla de CSS

25

Modelo de caja

26

Herencia

27

Especificidad en selectores

28

Demo de especificidad y orden en selectores

29

M谩s sobre selectores

30

Combinadores: Adjacent Siblings (combinators)

31

Combinadores: General Sibling

32

Combinadores: Hijo y Descendiente

33

Medidas

34

Medidas EM

35

Medidas REM

36

Max/Min width

37

Position

38

Display

39

Desaf铆o: Layout 1

40

Display Flex

41

Flexbox layouts

42

Variables

43

Web fonts

Responsive Design

44

Responsive design: media queries

45

Estrategias de responsive: mostly fluid

46

Implementando mostly fluid

47

Layout shifter CSS

48

Column drop

49

Buenas pr谩cticas y ejemplos de responsive

50

Im谩genes responsive

Accesibilidad

51

Sem谩ntica

52

Textos

53

Labels, alt y title

Pr贸ximos pasos

54

Pr贸ximos pasos como Web Developer

55

Bonus: tabla de etiquetas HTML

No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Implementando mostly fluid

46/55
Recursos

Aportes 180

Preguntas 110

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Una buena pr谩ctica es separar los estilos para cada tama帽o de pantalla (phone.css, tablet.css, desktop.css) y manejar los estilos para cada uno.

La verdad es que Diego explica perfecto este tipo de temas, me qued贸 mucho m谩s claro esto de las media queries 馃憣馃徏

Comparto mi pr谩ctica implementando mostly fluid 馃槂


.

.




|
|
|
HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="./tablet.css" media="screen and (min-width: 600px)">
    <link rel="stylesheet" href="./laptop.css" media="screen and (min-width: 800px)">
    <title>Document</title>
</head>
<body>
    <main class="container">
        <div class="c c1"></div>
        <div class="c c2"></div>
        <div class="c c3"></div>
        <div class="c c4"></div>
        <div class="c c5"></div>
        <div class="c c6"></div>
    </main>
</body>
</html>

|
|
style.css

*
{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html
{
    font-size: 62.5%;
}

.container
{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    max-width: 1300px;
    padding: 3rem;
    margin: 0 auto;
}

.c
{
    width: 100%;
    min-width: 150px;
    height: calc(17vh - 1rem);
    margin-bottom: 3rem;
    border-radius: 10px;
}

.c1
{
    background-color: #c72929;
}

.c2
{
    background-color: #df6060;
}

.c3
{
    background-color: #e4b342;
}

.c4
{
    background-color: #a0db32;
}

.c5
{
    background-color: #43d39c;
}

.c6
{
    background-color: #43b6d3;
    margin: 0;
}

|
tablet.css

.c2, .c3
{
    width: 48%;
}

.c4
{
    height: calc(60vh - 5rem);
}

|
laptop.css

.c1, .c2
{
    height: calc((100vh/3) - 4rem);
}

.c1
{
    width: 39%;
}

.c2
{
    width: 58%;
}

.c3, .c4, .c5
{
    width: calc((100%/3) - 2%);
    height: calc((100vh/3) - 4rem);
}

.c6
{
    width: 100%;
    height: calc((100vh/3) - 4rem);
}

Mi practica


En este caso despu茅s de 800px, el fondo de algunas secciones no completo el ancho de la pantalla, me imagino que deb铆 usar una clase en un contenedor por aparte

Habiliten estas opciones en el navegador:

Les comparto el enlace de un curso para aprender a manejar la Chrome DevTools, el profe del curso tambien es el Jedi Diego 馃槂
https://platzi.com/cursos/devtools/

No es mucho, pero es trabajo honesto鈥


HTML

<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mostly Fluid</title>
  <link rel="stylesheet" href="./styles/mostly.css">
  <link rel="stylesheet" href="./styles/mostly-tablet.css" media="screen and (min-width: 600px)">
  <link rel="stylesheet" href="./styles/mostly-tablet-hz.css" media="screen and (min-width: 800px)">
</head>

<body>
  <main class="container">
    <div class="class1"></div>
    <div class="class2"></div>
    <div class="class3"></div>
    <div class="class4"></div>
    <div class="class5"></div>
    <div class="class6"></div>
  </main>
</body>

</html>

CSS
mostly.css

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
html {
  font-size: 62.5%;
}
body { 
  background-color: #efe7da;
}
.container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.content {  
  margin: 0px;
}
.class1, .class2, .class3, .class4, .class5, .class6 {
  width: 100%;
  min-width: 150px;
  height: 150px;
  margin: 10px;
  border-radius: 20px;
}
.class1 {
  background-color: blue;
}
.class2 {
  background-color: blueviolet;
}
.class3 {
  background-color: burlywood;
}
.class4 {
  background-color: coral;
}
.class5 {
  background-color: cadetblue;
}
.class6 {
  background-color: salmon;
}

mostly-tablet.css

.container { 
  justify-content: space-evenly;
  margin: 0 auto; 
}
.class2, .class3, .class4, .class5 { 
  width: calc(50% - 20px)
} 

mostly-tablet-hz.css

.container {
  max-width: 1024px;
  margin-left: auto;
  margin-right: auto;
}
.class1 {
  width: calc(75% - 20px)
} 
.class2 {
  width: calc(25% - 20px)
}  
.class3, .class4, .class5{
  width: calc(33% - 20px);
} 
.class6{
  width: 100%;
} 

Una regla completa a usar en los media querie pienso que es la siguiente:

only screen and (breakpoint)

Only: Evita cargar los media queries en navegadores que no los soporten.
Screen: Carga los media queries solo en pantallas (mobile, tablet y desktop).

Recuerden que con CTRL + K y CTRL + C se puede comentar cualquier c贸digo en VisualStudio.

El patr贸n Mostly fluid consiste, principalmente, en una cuadr铆cula fluida. Por lo general, en las pantallas grandes o medianas se mantiene el mismo tama帽o y simplemente se ajustan los m谩rgenes en las m谩s anchas.

En las pantallas m谩s peque帽as, la cuadr铆cula fluida genera el reprocesamiento del contenido principal, mientras que las columnas se apilan verticalmente. Una de las mayores ventajas de este patr贸n es que, en general, solo se necesita un punto de interrupci贸n entre las pantallas grandes y las peque帽as.

Yo despu茅s de ver esta clase jajajajaja

El espacio que queda en blanco en el media querie de 600px es porque a .c1, .c2 y .c3 se les dio un width de 50% y a .c5 no se le di贸 ning煤n width, entonces este baja porque el valor que tiene en el archivo principal de estilos es de 100% y no puede ocupar ese espacio vac铆o con 100% de width.

Les comparto mi pr谩ctica 馃槃


HTML

<!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>Document</title>
    <link
      rel="stylesheet"
      href="../../node_modules/normalize.css/normalize.css"
    />
    <link rel="stylesheet" href="./styles/mobile.css" />
    <link
      rel="stylesheet"
      href="./styles/tablet.css"
      media="screen and (min-width: 768px)"
    />
    <link
      rel="stylesheet"
      href="./styles/desktop.css"
      media="screen and (min-width: 1024px)"
    />
  </head>
  <body>
    <main class="ctn">
      <header class="c c1">
        <picture class="logo-ctn"
          ><img src="./src/logo-aime.svg" alt="Logo" class="logo"
        /></picture>
        <nav class="menu-list">
          <ul>
            <li class="list-item"><a href="#">Home</a></li>
            <li class="list-item"><a href="#">Blog</a></li>
            <li class="list-item"><a href="#">Contact</a></li>
          </ul>
        </nav>
      </header>
      <main class="main">
        <div class="c c2">
          <picture>
            <img
              src="./src/one-piece.jpg"
              alt="Anime One Piece"
              class="img-anime"
            />
            <figcaption>One Piece</figcaption>
          </picture>
        </div>
        <div class="c c3">
          <picture>
            <img src="./src/snk.jpg" alt="Anime One Piece" class="img-anime" />
            <figcaption>Shingeki No Kyojin</figcaption>
          </picture>
        </div>
        <div class="c c4">
          <picture>
            <img
              src="./src/naruto.jpg"
              alt="Anime One Piece"
              class="img-anime"
            />
            <figcaption>Naruto</figcaption>
          </picture>
        </div>
        <div class="c c5">
          <picture>
            <img
              src="./src/kimetsu-no-yaiba.jpg"
              alt="Anime One Piece"
              class="img-anime"
            />
            <figcaption>Kimetsu No Yaiba</figcaption>
          </picture>
        </div>
      </main>
      <footer class="c c6">
        <ul>
          <li class="contact-item redSocial"><a href="#">Twitter</a></li>
          <li class="contact-item redSocial"><a href="#">Github</a></li>
          <li class="contact-item redSocial"><a href="#">Linkedin</a></li>
        </ul>
      </footer>
    </main>
  </body>
</html>

mobile.css

* {
  box-sizing: border-box;
}
html {
  font-size: 62.5%;
}

.ctn {
  font-size: 1rem;
  font-family: sans-serif;
}
.main {
  display: flex;
  flex-wrap: wrap;
}

.c {
  width: 100%;
  min-width: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
}

.c1 {
  height: 10vh;
}
.c1,
.c6 {
  background-color: rgba(219, 169, 65, 0.5);
}

.c2 {
  background: rgb(40 55 122);
  background: linear-gradient(
    90deg,
    rgb(40 55 122) 40%,
    rgba(116, 174, 247, 1) 100%
  );
}
.c3 {
  background: rgb(146, 13, 8);
  background: linear-gradient(
    90deg,
    rgba(146, 13, 8, 1) 25%,
    rgba(219, 169, 65, 1) 100%
  );
}
.c4 {
  background: rgb(228, 80, 41);
  background: linear-gradient(
    90deg,
    rgba(228, 80, 41, 1) 25%,
    rgba(245, 191, 31, 1) 100%
  );
}
.c5 {
  background: rgb(25, 26, 42);
  background: linear-gradient(
    90deg,
    rgba(25, 26, 42, 1) 25%,
    rgba(150, 166, 176, 1) 100%
  );
}
.c6 {
  height: 10vh;
}

.c1,
.menu-list ul,
.c6 ul {
  width: inherit;
  padding: 0;
  display: flex;
  align-items: center;
}

.c1 {
  justify-content: space-between;
}

.c6 ul {
  justify-content: space-evenly;
}

.c1 .logo {
  margin-left: 1.5rem;
  width: 10rem;
}

.menu-list .list-item {
  padding: 0 1rem;
}

.menu-list .list-item {
  padding: 0 1.2rem;
}

.c2,
.c3,
.c4,
.c5 {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 150px;
}

.main picture {
  padding: 3rem 4rem 2rem;
  text-align: center;
  font-size: 2.5rem;
}
.main picture {
  color: rgba(255, 255, 255, 0.9);
}

.main picture figcaption {
  margin-top: 1.5rem;
}
.main .img-anime {
  width: 30rem;
  border-radius: 1rem;
}

.menu-list li,
.c6 li {
  list-style: none;
}
.ctn a {
  text-decoration: none;
  color: #000;
}

.ctn .list-item {
  text-decoration: none;
}
.ctn .list-item:hover {
  text-decoration: underline;
}

.ctn .contact-item {
  text-decoration: underline;
}
.ctn .contact-item:hover {
  text-decoration: none;
}

tablet.css

@media (min-width: 768px) {
  .c {
    font-size: 1.6em;
  }
  .ctn {
    font-size: 1.6rem;
  }
  .c1 {
    height: 15vh;
  }
  .c1 {
    justify-content: space-between;
  }
  .c1 .logo {
    margin-left: 3rem;
    width: 16rem;
  }

  .menu-list .list-item {
    padding: 0 2rem;
  }

  .c2,
  .c3,
  .c4,
  .c5 {
    width: 50%;
    height: calc((100vh - 30vh) / 2);
  }
  .c6 {
    height: 15vh;
  }
}

desktop.css

@media (min-width: 1024px) {
  .ctn {
    width: 1024px;
    margin: 0 auto;
  }
  .c1 .logo {
    margin-left: 3.5rem;
    width: 17rem;
  }
  .menu-list .list-item {
    padding: 0 3rem;
  }
}

As铆 de f谩cil es trabajar con Flexbox, y es que realmente Flexbox es muy f谩cil de manipular, y tal vez pienses que nada puede superar a Flexbox, pues, si que hay algo que puede superar a Flexbox, vaya que lo hay jaja, espero que se llegue a ver ese tema en este curso 馃憖

Nota: a mi No me aparec铆an las barras de meda queries (naranjas), para que te salgan le dan al men煤 a la derecha (los 3 puntitos) y est谩n las opciones , se puede activar el_ pixel ratio_, para que aparezca el tipo de dispositivo, y los media queiries.
Espero les sirva, saludos.

Una forma de ver tus proyectos en tiempo real (desktop, tablet y/o mobile) es usando la plataforma Repl.it.
Solo tienes que copiar la url que te genera la plataforma y abrirlo en cualquier dispositivo. Adem谩s, puedes compartir tu proyecto con otras personas para colaborar o ayudarte en tu c贸digo.

Tengo una pregunta鈥ntonces ya no se utiliza

@media screen (max-width:600px)

驴El screen ya no se pone?

Aqui dejo mi Repositorio de GitHub por si quieren checar el codigo de implementar Mostly fluid
Aqui pueder verlo Online

Modo Mobile

Modo Tablet

Modo Desktop

seria bueno que esto del responsive lo hicieran con una pagina con contenido real
porque a la hora de implementar esto que estan explicando aqui no funciona todo se sale de su lugar

Cuando usar max-width o min-width ?

Orden en que se cargan los CSS:

Mi ejercicio xd

El navegador si va a descargar los archivos, pero les va a dar prioridad a los que necesite en ese momento

Donde veo eso?
en el Network del inspector de elementos !

El mejor curso de HTML y CSS en platzi.

Clase 46 - Implementando Mostly Fluid


驴C贸mo podemos saber si los archivos de CSS con sus media queries correspondientes se est谩n descargando de la manera en la que los ordene?

  • Debemos seguir el siguiente flujo en el inspector de elementos o Dev Tools de Google Chrome
    • Clic derecho o F12 para abrir el men煤 e ir a el inspector de elementos o dando simplemente F12 para abrir nuestras Dev Tools.
    • En el men煤 superior nos dirigimos a Network y en esta secci贸n veremos una lista de los archivos que se est谩n cargando y su orden.

Hola, les comparto las medidas donde normalmente se hacen los cambios (actualizado 2023).

  • Movil S = 320px
  • Movil M = 375px
  • Movil L = 425px
  • Tablet = 768px
  • Laptop = 1024px
  • Laptop L = 1440px
  • 4K = 2560px

Excelente clase, margin-left:auto; y margin-right:auto; es lo mismo que margin:0 auto;鈥 no era mejor hacerlo con una sola linea?

Mis trabajo de la clase

Reto cumplido !

Alguien sabe como activar las barras naranjas que se ve que tiene Diego arriba que indica cuando va a pasar de mobile a tabler o desktop?
O solo es de mac?
Yo estoy en win.
Gracias muy buen curso!

Estoy confundido鈥 si recomienda por buena practica solo agregar una solo fuente, como es que recomienda agregar varios css para que cargue cada dispositivo, esto multiplicaria las peticiones al servidor y eso no seria optimo o me equivoco?

Hola,
Por las dudas, en el minuto 2:48 Diego hace referencia a 4 elementos:
"鈥 estamos cambiando la posici贸n de estos 4 elementos鈥"
Y en realidad los que est谩n cambiando son 3 elementos, el c2, c3 y c4 que pasan a tener un ancho de 50%.
Aclaro por las dudas porque esto a alguno le puede generar confusi贸n.

Retomando el curso despues de mucho tiempo鈥i practica de mustly fluid, comenzando con columnas apiladas en forma vertical para los mobiles y reacomodandose a medida que cambia de dispositivo con media queries definidas en el head!
mobile

tablets

portatil

Practicando el responsive con el patr贸n Mostly Fluid, realic茅 lo siguiente 馃榿:

HMTL:

<!DOCTYPE html>
<html lang="es">
<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>Pokemones</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./phone.css">
    <link rel="stylesheet" href="./tablet.css" media="screen and (min-width: 600px)">
    <link rel="stylesheet" href="./desktop.css" media="screen and (min-width: 800px)">
</head>
<body>
    <header class="header">
        <p class="header--titulo">Pokemones Destacados</p>
    </header>
    <main>
        <section class="section">
            <article class="section__card card">
                <p class="card--titulo">Pikachu</p>
                <figure class="card__retrato">
                    <img src="./img/pikachu.png" alt="Pikachu" class="card--retrato_img">
                </figure>
            </article>
            <article class="section__card card">
                <p class="card--titulo">Charizard</p>
                <figure class="card__retrato">
                    <img src="./img/charizard.png" alt="Charizard" class="card--retrato_img">
                </figure>
            </article>
            <article class="section__card card">
                <p class="card--titulo">Squirtle</p>
                <figure class="card__retrato">
                    <img src="./img/squirtle.png" alt="Squirtle" class="card--retrato_img">
                </figure>
            </article>
            <article class="section__card card">
                <p class="card--titulo">Togepi</p>
                <figure class="card__retrato">
                    <img src="./img/togepi.png" alt="Togepi" class="card--retrato_img">
                </figure>
            </article>
            <article class="section__card card">
                <p class="card--titulo">Chikorita</p>
                <figure class="card__retrato">
                    <img src="./img/chikorita.png" alt="Chikorita" class="card--retrato_img">
                </figure>
            </article>
        </section>
    </main>
</body>
</html>

CSS (mobile)

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html{
    font-size: 62.5%;
}
.header{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 18px 0;
    background-color: #f44336;
}
.header--titulo{
    font-family: 'Roboto Slab', serif;
    font-size: 2.9rem;
    color: white;
    font-weight: bold;
    text-transform: uppercase;
}
.section{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 35px 0;
}
.card{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 55%;
    margin: 5px 0 10px;
    padding: 15px;
    background-color: #a9a9a99c;
    border: 1px black dotted;
    border-radius: 12px;
}
.card--titulo{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 2.8rem;
    text-transform: uppercase;
    font-weight: bold;
    color: rgb(96 65 64);
}
.card--retrato_img{
    width: 100%;
    height: 100%;
}

CSS (tablet)

@media (min-width:600px) {
    .section{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .card{
        width: 45%;
        margin: 5px 5px 10px;
    }
}

CSS (desktop)

@media (min-width:800px) {
    .section{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .card{
        width: 20%;
        margin: 5px 5px 10px;
    }
    .card--titulo{
        font-size: 2.3rem;
    }    
}

RESULTADO:

Hola a todos 馃槃
Fu茅 algo complejo hacerlo con todas las buenas pr谩cticas incluidas BEM y medidas relativas.
Pese a todo he aqu铆 mi ejercicio, ya que tambi茅n adaptarlo durante las transiciones si que se vea extra帽o es dificil al principio.

No importa 馃槃

Mobile

Tablet

Desktop

Mi practica de Mostly fluid
Mobile

Table

Desktop

cito de la p谩gina https://blog.muktek.com/media-queries-30674b927ddb el porque se debe incluir el media type screen

only screen: indica qu茅 tipos de dispositivos deber铆an usar esta regla. En los primeros intentos para apuntar a diferentes dispositivos, CSS incorpor贸 diferentes tipos de medios (pantalla, impresi贸n, m贸viles). La raz贸n fundamental fue que, conociendo el tipo de medio, se podr铆an aplicar las reglas de CSS adecuadas. Sin embargo, los dispositivos 鈥渕贸viles鈥 y de 鈥減antalla鈥 comenzaron a ocupar un rango mucho m谩s amplio de tama帽os y tener solo una regla de CSS por dispositivo de medios no fue suficiente. screen es el tipo de medio que se usa siempre para mostrar contenido, sin importar el tipo de dispositivo. La palabra clave only se agrega para indicar que esta regla solo se aplica a un tipo de medio (pantalla).

驴es necesario escribir screen? 驴o es opcional ?

<h4>Mi aporte de como lo implemente</h4>



Mi aporte:

Para ver las barras de las media queries lo pueden activar desde aqui

Con la metodolog铆a mostly fluid pude avanzar lo presentado. Aunque aun falta mas practica . a seguirle mas con la maquetacion.

Space

Space

Este es el justo momento donde las cabezas comienzan a estallar!

**Aqu铆 hice la paleta de colores de mi portafolio ** y a帽ad铆 m谩s cositas

Algo as铆 驴no?

aqui dejando mi aporte:
-responsive: celular
![](
responsive: tablet
![](
responsive: desktop
![](

Mi aporte: Mobile - Tablet - Small Screen - Desktop

Me parecio genial este resumen.

Mi pr谩ctica de la clase

y los nuevos archivos .css de estilos que se crean se deben reiniciar las configuraciones por defecto agregando:

o con que el style.css lo lleve es suficiente? se lo debo poner a cada uno? yo se lo puse pero vi que el profe no. ayuda porfis.

Me da mucha satisfaci贸n visual el responsive design 馃槏

la parte de responsive design
es la mejor del curso


Asi me quedo 馃槃

Mostly Fluid

mobile:

laptop:

Jam谩s pens茅 hacer responsive design tan f谩cil como ahora, lo ve铆a como algo muy dif铆cil y complicado. La manera en que se ha llevado el curso ha sido genial, siempre apuntando a ese prop贸sito. Adem谩s, Diego lo explica muy bien!

Este es mi proyecto, realmente fue muy f谩cil aplicar este metodolog铆a mostly fluid, y genera un excelente responsive design.

Mi resumen:

Mostly Fuid: hace que todo el conenido empiece como columnas y cuando empiezan a crecer el espacio (o ancho de pantalla) las columnas dependiendo de los contenidos se vayan reacomodando en filas.

HTML

<section class="container">
	<h2>Mostly Fluid</h2>
	<div class="c1"></div>
	<div class="c2"></div>
	<div class="c3"></div>
	<div class="c4"></div>
	<div class="c5"></div>
</section>

CSS (style.css)

.container * {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

.container h2 {
	width: 100%;
	text-align: center;
}

.c1,
.c2,
.c3,
.c4,
.c5 {
	width: 100%;
	min-width: 100px;
	height: 150px;
}

.c1 {
	background-color: #003476;
}
.c2 {
	background-color: #0062d2;
}
.c3 {
	background-color: #b4d2f7;
}
.c4 {
	background-color: #dbd178;
}
.c5 {
	background-color: #dfe1e5;
}
/* Break point 
@media (min-width: 600px) {
	Cuando la pantalla tenga de 600px en adelante se colocar谩 todo el css en este bloque
	.c2,
	.c3,
	.c4 {
		width: 50%;
	}
}

/* Break point 
@media (min-width: 800px) {
	.container {
		width: 800px;
		margin: 0 auto;
	}
	.c1 {
		width: 60%;
	}
	.c2 {
		width: 40%;
	}
	.c3,
	.c4 {
		width: 33%;
	}
	.c5 {
		width: 34%;
	}
}
*

CSS (tablet.css)

/*Cuando la pantalla tenga de 600px en adelante se colocar谩 todo el css en este bloque*/
.c2,
.c3,
.c4 {
	width: 50%;
}

CSS (desktop.css)

.container {
	width: 800px;
	margin: 0 auto;
}
.c1 {
	width: 60%;
}
.c2 {
	width: 40%;
}
.c3,
.c4 {
	width: 33%;
}
.c5 {
	width: 34%;
}

Esto es muy valioso. Aqu铆 se marcan diferencias entre un proyecto bien elaborado y solo un proyecto.

Esta clase ha sido de mis favoritas!, todo lo que he aprendido en el curso ahora lo veo con este ejemplo, es brillante!

Super buena esta clase 馃槂

una buena practica es separar los estilos para cada pantalla, y asi la pagina cargue mas rapido, (phone.css, tablet.css, desktop.css)

html{
/* Para jugar con el Rem */
font-size:62.5%;
}

*forma de llamar varias clses es seprandolas por una coma,

.c1, .c2, .c3, .c4,.c5{ }

Me pregunto si Grid Layout mejora la performance del patr贸n Mostly Fluid?

Aqu铆 mi aporte, lo he hecho gracias a la ayuda de sus aportes, aprendo mucho!

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8"/>
    <meta name="descripci贸n" />
    <meta name="robots" content="indext, no follow"/>
    <meta name="viewport" content="width=device-width, inicial-scale=1.0"/>
    <title>mobile</title>
    
    <link rel="stylesheet" href="/styles/index.css" />
    <link rel="stylesheet" href="/styles/table.css" media="screen and (min-width: 600px)"/>
    <link rel="stylesheet" href="/styles/desk.css" media="screen and (min-width: 800px)"/>
</head>
<body>

    <main class="container">
        <div class="c c1"></div>
        <div class="c c2"></div>
        <div class="c c3"></div>
        <div class="c c4"></div>
        <div class="c c5"></div>

    </main>


</body>
</html>```





*{
box-sizing: border-box;
margin: 0;
padding: 0;

}
html
{
font-size: 62.5%;
}
body
{
width: 100%;

}
.container
{
display: flex;
flex-wrap: wrap;
}
.c1, .c2, .c3, .c4,.c5
{
width: 100%;
min-width: 150px;
height: 150px;
padding: 2rem;

}
.c
{
width: 100%;
min-width: 150px;
height: calc(17vh - 1rem);
margin:1.5rem;
border-radius: 2.5rem;
}
.c1
{
background-color: brown;
}
.c2
{
background-color: rgb(161, 64, 64);
}
.c3
{
background-color: rgb(170, 95, 95);
}
.c4
{
background-color: rgb(172, 126, 126);
}
.c5
{
background-color: rgb(192, 173, 173);
}```

.c2, .c3
{
    
    margin-top: 2rem;
    margin-bottom: 2rem;
    width: 45%;
    height: calc(35vh - 6rem);
    

}
.c4
{
    height: 10vh;
}
.container{
    margin-left: auto;
    margin-right: auto;
    max-width: 800px;
}
.c1{
    width: 20%;
    height: 30vh; 
    margin: 2rem;
}
.c2{
    width: 70%;
    height: 30vh; 
    margin: 2rem;
}
.c3, .c4 {
    width: 45%;
    height: 10vh;
    margin: 2rem;
}
.c5{
    width: 100%;
}```


Aparte del porcentaje podrian trrabajar en funcion de viewport measures.

Implementaci贸n del Primer Breakpoint:

  • Se inicia la implementaci贸n del primer breakpoint, pasando de dispositivos m贸viles a tablets.
  • Se utiliza media queries para establecer reglas a partir de un min-width de 600 p铆xeles.
  • Se ajusta el ancho (width) de ciertas clases para adaptarse a la nueva pantalla.
/* En el archivo style.css (Mobile First) */
.container {
  display: flex;
  flex-wrap: wrap;
}

.c2, .c3, .c4 {
  width: 50%; /* Cambio en el ancho para adaptarse a tablets */
}

/* En el archivo tablet.css (Tablet Breakpoint) */
@media screen and (min-width: 600px) {
  .c2, .c3, .c4 {
    width: 50%;
  }
}

Implementaci贸n del Segundo Breakpoint:

  • Se agrega un segundo breakpoint para ajustar el dise帽o al tama帽o de la pantalla de un desktop.
  • Se crea un archivo desktop.css para los estilos espec铆ficos del desktop.
  • Se aplican cambios en los anchos de las clases para una visualizaci贸n 贸ptima.
/* En el archivo desktop.css (Desktop Breakpoint) */
@media screen and (min-width: 800px) {
  .c1 {
    width: 60%;
  }

  .c2 {
    width: 40%;
  }

  .c3, .c4 {
    width: 33%;
  }

  .c5 {
    width: 34%;
  }

  /* Restricci贸n del crecimiento m谩ximo del contenedor principal a 800 p铆xeles */
  .container {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
}

Estructura de Archivos y Descarga de Estilos:

  • Se organiza el proyecto con archivos separados para mobile, tablet, y desktop.
  • Se verifica en la consola de red del navegador que los estilos se descargan seg煤n las necesidades del viewport.

Prioridad en la Descarga de Estilos:

  • Se observa que los estilos se descargan seg煤n la necesidad del viewport, priorizando la carga de estilos espec铆ficos.

Conclusiones y Pr贸ximos Pasos:

  • Se ha implementado el patr贸n Mostly Fluid, permitiendo un dise帽o fluido y adaptable.
  • Aprenderemos sobre el segundo patr贸n en la siguiente clase para continuar construyendo proyectos responsive.

隆Hasta la pr贸xima clase, donde exploraremos el siguiente patr贸n para mejorar nuestras habilidades en dise帽o responsive!

隆Incre铆ble este tema! Hab铆a conocido la frase de desarrollar "mobile first" pero nunca hab铆a entendido estas implicaciones. Me encant贸 entenderlo.

Implementando Mostly Fluid en mi proyecto con tematica de Clash Royale mi juego favorito de ni帽a.

Se usaron dos @media diferentes para c2 cual queda, que prelacion se le da?

amigos, como hago para que los link queden asi ordenados y no de corrido (veo que no se hace manual) ![](https://static.platzi.com/media/user_upload/image-149bfa69-f65c-44ed-bd12-f29b2a8a2419.jpg)![](https://static.platzi.com/media/user_upload/image-c8cc3c08-59ec-4223-a04c-53e5a31d9c89.jpg) que no me quede asi ![](https://static.platzi.com/media/user_upload/image-20186385-cb31-4ac9-93da-c12e391ecfe3.jpg) gracias ; )

Para implementar una estrategia 鈥渕ostly fluid鈥 en tu dise帽o web, puedes seguir estos pasos b谩sicos utilizando HTML y CSS. Ten en cuenta que estos son ejemplos simples y puedes ajustarlos seg煤n tus necesidades espec铆ficas.

  1. Estructura HTML B谩sica:
    html
    Copy code
    <!DOCTYPE html>
    <html lang=鈥渆s鈥>
    <head>
    <meta charset=鈥淯TF-8鈥>
    <meta name=鈥渧iewport鈥 content=鈥渨idth=device-width, initial-scale=1.0鈥>
    <link rel=鈥渟tylesheet鈥 href=鈥渟tyles.css鈥>
    <title>Mostly Fluid Design</title>
    </head>
    <body>
    <div class=鈥渃ontainer鈥>
    <header>
    <h1>Logo o T铆tulo</h1>
    <nav>
    <ul>
    <li><a href="#">Inicio</a></li>
    <li><a href="#">Acerca de</a></li>
    <li><a href="#">Servicios</a></li>
    <li><a href="#">Contacto</a></li>
    </ul>
    </nav>
    </header>

    <main>
    <!-- Contenido principal de la p谩gina -->
    </main>

    <footer>
    <p>Derechos de autor 漏 2023</p>
    </footer>
    </div>
    </body>
    </html>

  2. Estilos CSS B谩sicos (styles.css):
    css
    Copy code
    body {
    margin: 0;
    padding: 0;
    font-family: 鈥楢rial鈥, sans-serif;
    }

.container {
width: 80%;
margin: 0 auto;
}

header {
background-color: #3498db;
color: white;
padding: 1em;
text-align: center;
}

nav ul {
list-style: none;
padding: 0;
margin: 0;
}

nav li {
display: inline;
margin-right: 15px;
}

main {
padding: 20px;
}

footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
}
En este ejemplo:

Se utiliza una unidad relativa (%) para el ancho del contenedor principal (body) y el contenedor (div.container). Esto permite que el dise帽o sea flexible y se ajuste al ancho de la ventana del navegador.

Las fuentes se especifican de manera gen茅rica (鈥楢rial鈥, sans-serif) para permitir cierta flexibilidad y adaptaci贸n seg煤n las preferencias del usuario.

Los m谩rgenes y rellenos se definen en unidades relativas o em, y se utilizan para proporcionar espaciado y ajuste en diferentes tama帽os de pantalla.

Recuerda que esta es una estructura b谩sica y puedes personalizarla seg煤n las necesidades espec铆ficas de tu proyecto. Adem谩s, puedes agregar consultas de medios (media queries) para realizar ajustes espec铆ficos en diferentes puntos de quiebre.

Recursos importantes 馃槃 :

Hola Muchachos, tuve un problema con el responsive y con las siguiente sintaxis logre que me funcionara, Exitos

<code> 
@media screen and (min-device-width: 600px) {
  .container2, .container3
  {
    width: 45%;
  }
  
}

.

El navegador solo carga el archivo recibido css de acuerdo a cuando se abre la p谩gina desde diferentes tipos de dispositivos.

Mostly Fluid

A mi se me descarga siempre primero el style.css 馃槮

-Mostly Fluid: En este patron de dise帽o, mantenemos el mismo tama帽o de la pagina web, bajo el layout, de acuerdo a la pantalla, solo vamos a determinar un ancho maximo de margen de lado y lado. Esto con el fin de que se vea igual en ambos dispositivos, es decir centrariamos el layout.

Analogamente es como si tuvieramos todo el contenido de la pagina (layout), en un cuadro, en tablet y dispositivos mas grandes, mantenemos el mismo tama帽o del contenido, al momento de crecer mantenemos el mismo tama帽o del contenido de manera centrada, el cambio en estos dos dispositvos, solo se realiza en los margenes.
Mientras que si el dispositivo al cual accedemos, es un smartphone, el ajusta el contenido, para que pueda ser mas agradable a la vista. Es decir lo posiciona de manera horizontal, por container.
Descripcion medianamente grafica:
tablet, monitor -> cambia solo margen 1. 2. 3. margen cambia

smartphones
1.
2.
3.

SI ALGUIEN TIENE EL MISMO PROBLEMA QUE TUVE YO CON EL @MEDIA

@media screen and (min-width: 600px) {
    .c2, .c3, .c4{
        width: 50%;
    }
}

Gracias profe!

Me encanto la clase, para hacer mas eficiente la pagina, jamas habria pensado esto y jamas lo habia visto.

Esta t茅cnica es uno de los patrones mas populares y dentro de la comunidad responsive y uno de los mayormente empleados en los distintos dise帽os. En dimensiones de smartphone se apilan todas las columnas y seg煤n aumentan estas dimensiones se voltean en un desarrollo multicolumna tanto como el ancho del navegador deje acomodarlas. Estos elementos se vuelven fluidos y se expanden hasta los diferentes breakpoints. Adem谩s se puede combinar con la t茅cnica de Column Drop.

Es bien enga帽oso el dise帽o de menos de 600px, porque ese espacio blanco no es ning煤n contenedor, es solo espacio vac铆o. Pero por la paleta de colores pareciera que hubiese otro contenedor de color blanco que ocupa el 50% del viewport

no me funciona, lo he hecho exactamente igual y no se aplica el mostly fluid
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}

html{
font-size: 62.5%;
}

.contenedor{
display: flex;
flex-wrap: wrap;
}

.c2, .c2, .c3, .c4, .c5{
width: 100%;
min-width: 150%;
height: 150px;
}

.c1{
background-color: red;
}

.c2{
background-color: blue;
}

.c3{
background-color: green;
}

.c4{
background-color: yellow;
}

.c5{
background-color: grey;
}

@media (max-width: 600px){
.c1, .c2, .c3{
width: 50%;
}
}

En este caso, si quisiera agregar un heder y footer junto a otras etiquetas semanticas de layout, 驴Las tendr铆a que meter en un div que asemeje un container y as铆 las ir铆a modificando?.

@media (min-width: 600px) {
.c2, .c3, .c4, .c5 {
width: 50%;
}
}

@media (min-width: 800px) {
.container {
width: 800px;
margin-left: auto;
margin-right: auto;
}
.c1 {
width: 60%;
}
.c2 {
width: 40%;
}
.c3, .c4 {
width: 33%;
}
.c5 {
width: 34%;
}
}

Lo hice con un Arcoiris, para Mostly Fluid:

  • Smartphone:

  • Tablet:

  • Desktop:

驴A todos les qued贸 el waterfall igual? Cuando recargo en movil tarda el mismo tiempo en los tres estilos 馃槮

Cargar diferentes CSS de acuerdo al ancho de la pantalla:

Explicacion Basica @media Queries: