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

Quiz: Web Developer Fundamentals

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

Quiz: HTML

Etiquetas multimedia

11

Tipos de imágenes

12

Optimización de imágenes

13

Etiqueta img

14

Etiqueta figure

15

Etiqueta video

Quiz: Etiquetas multimedia

Formularios

16

Etiqueta form e input

17

Calendar

18

Autocomplete y require

19

Select

20

Input type submit vs. Button tag

Quiz: Formularios

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

Quiz: CSS

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

Quiz: Responsive Design

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

Aprende todo un fin de semana sin pagar una suscripción 🔥

Aprende todo un fin de semana sin pagar una suscripción 🔥

Regístrate

Comienza en:

5D
19H
20M
14S

Implementando mostly fluid

46/55
Recursos

Aportes 168

Preguntas 107

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 👌🏼




|
|
|
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);
}

Comparto mi práctica implementando mostly fluid 😃


.

.

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

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/

Habiliten estas opciones en el navegador:

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.

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 👀

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…entonces ya no se utiliza

@media screen (max-width:600px)

¿El screen ya no se pone?

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;
  }
}

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

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.

Denle un vistazo a esta documentación:
https://docs.microsoft.com/en-us/windows/uwp/design/layout/screen-sizes-and-breakpoints-for-responsive-design

Aquí muestran los distintos tipos de dispositivos según el tamaño, y los tamaños recomendados para los breakpoints, para usar los media queries de la forma más eficiente.

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?

Mis trabajo de la clase

Orden en que se cargan los CSS:

Cuando usar max-width o min-width ?

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 “móviles” y de “pantalla” 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 ?

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

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 !

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

El mejor curso de HTML y CSS en platzi.



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:[email protected]&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:

Algo así ¿no?

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

Mi aporte: Mobile - Tablet - Small Screen - Desktop

Mi ejercicio xd

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.

.

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.

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

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!

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.

**Aquí hice la paleta de colores de mi portafolio ** y añadí más cositas

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

Retomando el curso despues de mucho tiempo…mi 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

Mi aporte:

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%;
}
}

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

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:

En mi caso tuve el siguiente inconveniente:
.
Me sucedía que al cargar y extender mi pantalla, llegando a los 800px se aplicaban estilos de los dos media queries!
.
No lograba entender esto.
.
Lo pude corregir modificando el orden de las etiquetas LINK en mi index.html
Me imagino que al tener mi atributo media=“screen and (min-width: 600px)” despues de media=“screen and (min-width: 800px)” se sobreescriben los atributos ya que se cumplen las 2 condiciones. Y al ejecutarse mi linea de 600px luego de haberse aplicado los estilos de 800px prevalecen estos de 600px
.
Eso concluye mi duda respecto a “¿Qué va a pasar al ejecutar el index.html si con una pantalla de 850px se cumplen las 2 condiciones (min-width:600px y min-width:800px)?”
.
Hasta donde entendí, simplemente se van a sobreescribir los estilos que estén por debajo en el index.html
.
Aun asi, no logré entender la parte de Network Waterfall. En mi caso, tanto tablet.css como desktop.css se cargan al mismo tiempo con una pantalla de más de 800px

RESUMEN CLASE 46:
IMPLEMENTANDO
MOSTLY FLUID

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>Mostly Fluid</title>
    <link rel="stylesheet" href="./style.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>
    <main class="container">
        <div class="c1"></div>
        <div class="c2"></div>
        <div class="c3"></div>
        <div class="c4"></div>
        <div class="c5"></div>
    </main>
</body>

</html>

CSS STYLE

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

html {
    font-size: 62.5%;
}

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

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

.c1 {
    background-color: #003476;
}

.c2 {
    background-color: #0062d2;
}

.c3 {
    background-color: #b4d2f7;
}

.c4 {
    background-color: #d5dfef;
}

.c5 {
    background-color: #dfe1e5;
}

/* @media (min-width: 600px) {
    .c2,
    .c3,
    .c4 {
        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%;
    }
} */

CSS TABLET

.c2,
.c3,
.c4 {
    width: 50%;
}

CSS DESKTOP

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

Información resumida de esta clase
#EstudiantesDePlatzi

  • Definiendo en media querie el tamaño limité a cumplir, podemos ver como los contenedores se ajustan automáticamente. El momento en el que se genera el cambio se llama Brakepoint

  • Debemos crear para cada Brakepoint un archivo Css y ser llamado desde html, ya que es una buena práctica

  • Ctrl + K + C = Comentar el código seleccionado

  • En la pestaña de Network del navegado podemos ver que se están ejecutando los queries

Genial explicación!

Excelente clase!

No es necesario indicar auto para margin-left y right,se puede resumir con margin = 0 auto;

margin puede resivir hasta 4 valores, uno por cada lado de la caja en sentido horario

margin : top right bottom left;

//example
margin : 50px 20px 10px 5px;

// los que es igual a:
margin-top : 50px;
margin-right : 20px;
margin-bottom : 10px;
margin-left : 5px;

//no hay necesidad de decir cual es mas eficiente

si solo se indican tres valores (top right bottom) left tomara el valor de su contraparte (right)

margin : 50px 20px 10px;
//es igual a:
margin : 50px 20px 10px 20px;

si indicamos solo dos los datos dados pasarian a indicar X (top bottom) y Y (right left):

margin : x y;
//example
margin  : 50px 20px;

//lo que seria igual a:
margin: 50px 20px 50px 20px;

Mis aportes:


Resumen

Los media queries siempre deben ir al final de un archivo CSS. Estos media queries nos permiten conocer los breakpoints en que cambia el diseño de la página.

<link rel="stylesheet" href="./styles.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">

Para llamar los estilos responsive separamos el contenido de los media queries y los colocamos en archivos distintos. Recuerda: primero se coloca el diseño más pequeño hasta el más grande.

Dentro de los archivos ya no es necesario colocar el @media, ya que lo hiciste en la etiqueta link.

De los cursos más útiles y prácticos para arrancar 😃

Si no les funciona el enlace, esten atentos al cerrar el link, con el /> VisualStudio code no lo coloca automáticamente.

<link rel=“stylesheet” href="./tablet.css" media="screen and (min-width:600px)"/>

Entiendo que lo media queries son como bloques condicionales en un lenguaje tradicional de programación, me resulta mucho más fácil hacer esa asociación

Comparto mis anotaciones

<!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">
    <meta name="descripcion" content="Esta página contiene contenido de la cultura mexicana">
    <meta name="robots" content="index, follow">
    <title>Arte&Cultura</title>
    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="./tablet.css" media="screen and (min-width:600px)"/>
    <link rel="stylesheet" href="./deskup.css" media="screen and (min-width: 800px)"/>
</head>
<body>
    <header>
        <figure>
            <img src="./imagen.png" alt="logotipo" width="50px">
        </figure>
        <nav>
            <ul class="nave">
                <li class="nave__item"><a href="">Home</a></li>
                <li class="nave__item"><a href="">Foro</a></li>
                <li class="nave__item"><a href="">Blog</a></li>
            </ul>
        </nav>
    </header>
    <main class="container">
        <div class="c1"></div>
        <div class="c2"></div>
        <div class="c3"></div>
        <div class="c4"></div>
        <div class="c5"></div>
    </main>
    <footer>
        <div class="footer-social"> letras
        </div>
        <div class="footer-info"> letras
        </div>
    </footer>
</body>
</html>

…CSS…

:root{ /*variables para evitar repetir codigo y fuentes disparejos*/
    --prymary-color:#003475; /*color principal*/
    --secundary-color:#0062d2;
    --encabezados-size: 4rem;
    --font:1.8rem;
}

*{ /*eliminan el scroll*/
    box-sizing: border-box;
    margin:0;
    padding: 0;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
}
html { /* nos ayuda aplicar el rem*/
    font-size: 62.5%;
  }
/*------------------------------------------------------HEADER-------------------------------------------------*/
nav{
    /*display: inline-block;*/
    position: absolute; /* este es el que hace que se vaya a la otra esquina, ver clase 37*/
    right: 1.5rem; /* esta es la medida para que se vaya a la otra esquina */
    top: 1.2rem;
   /* display: flex;*/
} 

.nave{
    margin-top:1rem;
    list-style:none;
    padding-left: 0;
    background-color: blue;
   /* display: inline-block;*/
    text-align: center;
    display: flex;/*es como el inline-block pero responsive*/
    flex-wrap: wrap; /*cuando haya menos espacio se pondra en columna*/
   /* justify-content: center; va centrar el contenido ya no usar margin:0 auto; [ [contenido] ]*/
   justify-content: space-evenly; /* espacios iguales*/
}

.nave__item a{
  color:aliceblue;
  text-decoration: none;
  font-size: var(--font);
  padding: 0.5rem;/* 
  border-radius: 0.2rem;
  background-color: grey;*/
}
.nave__item a:hover{ /* el hover cambia de color al pasar por encima*/
    color:tomato;
}

.nave__item a:active{ /* el active cambia de color al darle click*/
    color:grey;
}

header{ 
    height: 15vh;
    width: 100vw; /*va ocupar el 100% del espacio del tamaño de la pantalla*/
    background-color: var(--prymary-color);
    /*display: inline-block;
    display: flex;*/
    padding: 0.3rem; /*espacio corto del logo*/
}
/*-----------------------------------------------------HEADER--END--------------------------------------------*/
/*-------------------------------------------------BODY----MAIN--MosttlyFluid---------------------------------*/
body {
    background-color: white;
    font-size: var(--font);
  }
.container{
    display: flex; /*ayuda a manipular el contenido*/
    flex-wrap: wrap; /*el contenido se reposicione segun su tamaño del viewport*/
    width: 100vw; /*ocupe todo su espacio*/
    height: 100vh; /*ocupe todo su espacio*/
    background-color: white;
}

.c1, .c2, .c3, .c4, .c5{
    width: 100%; /*ocupen todo el ancho horizontal*/
    min-width: 150px; /*limitamos el minimo del ancho*/ 
    min-height: 150px;/* crezca lo de su contenido con el min*/
}
.c1{
    background-color: black;
}
.c2{
    background-color: #0062d2;
}
.c3{
    background-color: #b4d2f7;
}
.c4{
    background-color: #d5dfef;
}
.c5{
    background-color: #dfe1e5;
}

/*------------------------------------footer----------------------------------------------------------------*/
footer{
    background-color:var(--secundary-color);
    width: 100vw;
    height: 10vh;
}

.footer-social, .footer-info{
    display: inline-block;
    margin:1rem;
    color: aliceblue;
  }
  
  .footer-info {
    position: absolute;
    right: 1.5rem;
    color: aliceblue;
  }

…
tablet.css

.c1{
    width: 50%;
} 
    .c2{
        width: 50%;
    } 
    .c3, .c4{
        width: 33%;
    } 
    .c5{
        width: 34%;
    }

…
deskup.css

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