Web Developer Fundamentals

1

Qué aprenderás sobre HTML y CSS

2

¿Qué es el Frontend?

3

¿Qué es Backend?

4

¿Qué es FullStack?

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

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Implementando mostly fluid

46/55
Recursos

Aportes 135

Preguntas 90

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta 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 😃


.

.

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/

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:

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).

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.

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

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.

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?

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

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.

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.

Yo después de ver esta clase jajajajaja

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

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 👀

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?

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!

Cuando usar max-width o min-width ?

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.



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

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 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.

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!

la parte de responsive design
es la mejor del curso

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;

Me da mucha satisfación visual el responsive design 😍

Mi práctica de la clase

Mis trabajo de la clase

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


Asi me quedo 😄

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


Comparto el código que fabrique en base a la clase.
Recuerden ordenar las etiquetas link desde el dispositivo mas pequeño al mas grande.
La propiedad max-width se recomienda cuando tenemos un breack point que abarca muchos tamaños. Así nos aseguramos que un elemento no se vea excesivamente grande y no se enfoque la visión del lector en el contenido de la pagina.

1.phone.html:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.content{
    display: flex;
    flex-wrap: wrap;
}
.c1,.c2,.c3,.c4,.c5{
    width: 100%;
    min-width: 150px;
    height: 150px;
}
.c1{
    background-color: rgb(210, 72, 30);
}
.c2{
    background-color: rgb(84, 175, 57);
}
.c3{
    background-color: rgb(30, 114, 210);
}
.c4{
    background-color: rgb(207, 210, 30);
}
.c5{
    background-color: rgb(210, 30, 84);
}
  1. tabletA.html:
.c2,.c3{
    width: 50%;
}
  1. tabletB.html:
.content{
    max-width: 800px;
    margin: 0 auto;
}
.c1{
    width: 25%;
}
.c2{
    width: 75%;
}
.c3,.c4,.c5{
    width: 33.33%
}
  1. laptop.html:
.content{
    max-width: 1200px;
    margin: 0 auto;
}
.c1{
    width: 25%;
}
.c2{
    width: 75%;
}
.c3{
    width: 100%;
}
.c4,.c5{
    width: 50%
}

Está genial esta clase y es muy útil la sección de Network del Inspector del Navegador para ver la actividad de las descargas. 😄
Ahí puede verse cómo el navegador optimiza las descargas según lo que va a necesitar en ese momento, basándose en la resolución de pantalla del Dispositivo.
Supongo que por eso se llama Media Query.

Asi quedo…

En cuanto a rendimiento, el llamar a un único archivo de css o más de uno, ¿influye mucho?

Un saludo y gracias.

yo para aprobechar que le di un color de fondo con opacidad al body para darle mejor apariencia a la pagina,use en el body justify-content para no usar el margin auto y no tuve ningun problema con la vista de escritorio.

¿esto esta bien o es una mala practica?

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">
    <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:900px)">
        
    <title>Mostly fluid</title>
</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>

desktop.css

.container{
    width: 900px;
}

.c1,.c2{
    height: 37vh;
}
.c1 {
    width: 59%;
}
.c2{
    width: 37%
}
.c3,.c4,.c5 {
    height: 60vh;
    width: 32%;
}

la vista de tablet quedo asi

tablet.css

.c2, .c3{
    width: 45%;
}
.c4 {
    width: 85%;
}

y la vista de movil es la vista por defecto
style.css

/* configuracion estilos basicos generales*/
    *{
        box-sizing: border-box;
        margin: 0px;
        padding: 0px;
    }
    html{
        font-size: 6.25%;
    }
    
    body {
        background-color: rgba(92, 164, 188, 0.35); 
        display: flex;
        justify-content: center;
    }

    .container{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .c1,.c2,.c3,.c4,.c5 {
        width: 95%;
        height: 150px;
        min-width: 150px;
        border-radius: 10px;
        margin: 0.5%;
    }

    .c1 {
        background-color: #7fffd4;
    }

    .c2 {
        background-color: #34e3dc;
    }

    .c3 {
        background-color: #00c4de;
    }

    .c4 {
        background-color: #00a4d3;
    }

    .c5 {
        background-color: #3b83bd;
    }

si alguno se lo pregunta escogi, los colores buscando un generador de gradientes por google
, y la verdad me gusto bastante el resultado

¡Increíble esta estrategia! Me encanta. Sin duda este es un conocimiento que hará que nuestra carrera como desarrolladores se profesionalice aún más.

Una buena práctica es separar los estilos para cada tamaño de pantalla!

Una buena práctica es separar los estilos para cada tamaño de pantalla

Este es mio.

documento index.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="./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="box-1"></div>
        <div class="box-2"></div>
        <div class="box-3"></div>
        <div class="box-4"></div>
        <div class="box-5"></div>
        <div class="box-6"></div>
    </main>
</body>
</html>

archivo style.css

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

html {
    font-size: 62.5%;
}

.container {
    display: flex;
    flex-wrap: wrap;
    margin: 0 1em;
    justify-content: space-between;
}

.box-1, .box-2, .box-3, .box-4, .box-5, .box-6 {
    width: 100%;
    height: 120px;
    margin-top: 1em;
    border-radius: 10px;
}

.container > div:last-child {
    margin-bottom: 1em;
}

.box-1 {
    background-color: #7DCEA0;
}

.box-2 {
    background-color: #F4D03F;
}

.box-3 {
    background-color: #6C3483;
}

.box-4 {
    background-color: #943126;
}

.box-5 {
    background-color: #FFA07A;
}

.box-6 {
    background-color: #3498DB;
}

archivo tablet.css

.box-2, .box-3, .box-4, .box-5 {
    width: calc(50% - 5px);
}

.box-6 {
    height: 300px;
}

archivo desktop.css

.box-1 {
    width: calc(30% - 5px);
}

.box-2  {
    width: calc(70% - 5px);
}

.box-3, .box-4, .box-5 {
    width: calc(33.3% - 6.6px);
    height: 200px;
}

.container {        
    max-width: 780px; /* le resto 20px que corresponden a los 10px de margen en cada lado. */
    margin: 0 auto;
}
* {
  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) {
  .c1 {
    width: 25%;
    order: 1;
  }
  .c2 {
    width: 75%;
    order: 2;
  }
  .c3 {
    width: 100%;
    order: 3;
  }
  .c4 {
    width: 100%;
    order: 4;
  }
  .c5 {
    width: 100%;
    order: 5;
  }
}
@media (min-width: 800px) {
  .c1 {
    width: 30%;
  }
  .c2 {
    width: 40%;
  }
  .c3 {
    width: 30%;
  }
  .c4 {
    width: 50%;
  }
  .c5 {
    width: 50%;
  }
}

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./style.css" />
  </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>

Recuerden escribir bien :v, se les va todo alv si no tienen cuidado :c

Algo complejo, pero muy bien explicado.

Que maravilla este patrón, ya me estaba rompiendo el coco con algo que quería hacer y no encontraba la manera.

que clases tan genialeeeeeeeeees ¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡

Al usar la sintaxis hecha por el profesor, notaba que cuando llegaba a los 600px los contenedores accedian al 50% pero me generaban un scroll horizontal, a lo cual usé ésta sintaxis:

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

Y quedó mejor.

Tamaño minimo de 768px:
@media screen and (min-width: 768px){}
Tamaño maximo de 1024px:
@media screen and (max-width: 1024px){}

46.-Implementando mostly fluid

Si vamos a trabajar los media query’s en un solo CSS por buenas prácticas van hasta el final del documento para empezar a marcar donde existen los breakpoints y cuales son los cambios por cada uno.

Si empieza a crecer de más se hará muy flexible y nuestro contenido se va a estirar mucho, para evitar esto ponemos un limite que cuando alcance cierto tamaño se empiece a centrar.

Resumen del capitulo en Notion
https://acortar.link/yjy65

Reto cumplido !

Los media queries, por buenas practicas, siempre van hasta abajo del código CSS, cuando se le quiere poner en un solo archivo.

A alguien más le pasó que no funcionaba cuando ponian:
.c2
.c3
.c4{
width: 50%;
}
}
y solo funcionaba así:
.c4{
width: 50%;
}
.c2{
width: 50%;
}
.c3{
width: ;
}

Buena data 😀💚

<!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=“style.css”>
</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>

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

Definición de Mostly Fluid

Increíble como cambia tu perspectiva cuando empezas a estudiar responsive design, te das cuenta la cantidad de paginas web que carecen de esto!

verificar que se cargan archivos de media queries

/* archivo CSS para tablet
 @media (min-width: 600px) {
    .c2, .c3, .c4 {
        width: 50%;
    }
} */

/* archivo CSS para desktop
@media (min-width: 800px) {
    .container {
        width: 80rem; /* Le puedo indicar lo más grande que puede creer*/
        /* margin-left: auto;
        margin-right: auto;
    }

    .c1 {
        width: 60%;
    }
    .c2 {
        width: 40%;
    }
    .c3 {
        width: 35%;
    }
    .c4 {
        width: 30%;
    }
} */ ```

Mi practica de Mostly fluid
Mobile

Table

Desktop

Excelente!

Unas de las buenas practicas, es separar los estilos para cada tamaño de pantalla Desktop, Phone y Tablet de esta manejar un buen estilos para cada uno.

Hola, este es mi aporte. 😃
Mobile

Tablet

Destop

HTML

CSS mobile

CSS tablet

CSS destop

42. Mis apuntes sobre: “Implementando mostly fluid”

Los media queries en CSS por buena práctica irán abajo del CSS.

Les comparto el código de la clase:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</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>

style.css (mobile)

/*RESET*/
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    font-size: 62.5%;
}
/*MAIN*/
.container {
    display: flex;
    flex-wrap: wrap;
}
.c1, .c2, .c3, .c4, .c5 {
    width: 100%;
    min-width: 150px;
    height: 150px;
}
.c1 {
    background-color: mediumorchid;
}
.c2 {
    background-color: aqua;
}
.c3 {
    background-color: greenyellow;
}
.c4 {
    background-color: goldenrod;
}
.c5 {
    background-color: wheat;
}

tablet.css

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

desktop.css

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

Se pueden usar medidas como REM o EM al momento de definir mis breakpoints? Ej:

<link rel="stylesheet" href="./css/style.css" media="screen and (min-width="600rem")">

Es eficiente?
Es recomendable?