Introducci贸n al curso

1

Presentaci贸n y bienvenida al curso de Frontend Developer

2

HTML y CSS: definici贸n y usos

3

驴Qu茅 son y para qu茅 nos sirven HTML y CSS?

4

DOM, CSSOM, Render Tree y el proceso de renderizado de la Web

5

5 tips para aprender CSS

Conceptos iniciales de HTML

6

Anatom铆a de un Elemento HTML: Atributos, Anidamiento y Elementos vac铆os

7

Anatom铆a de un Documento HTML: DOCTYPE, html, head y body

8

Funciones de las etiquetas HTML m谩s importantes

9

La importancia del c贸digo sem谩ntico

10

Tipos de errores en HTML, debugging y servicio de validaci贸n de etiquetas

11

Reto 1: Organiza el siguiente bloque de c贸digo de forma sem谩ntica

Conceptos iniciales de CSS

12

Anatom铆a de una declaraci贸n CSS: Selectores, Propiedades y Valores

13

Tipos de selectores, pseudo-clases y pseudo-elementos

14

Modelo de caja

15

Valores relativos y absolutos

16

Displays en CSS

17

Funciones de las propiedades CSS m谩s usadas

18

Posicionamiento en CSS

Arquitectura CSS

19

驴Qu茅 son y para qu茅 nos sirven las arquitecturas CSS?

20

OOCSS, BEM, SMACSS, ITCSS y Atomic Design

21

Reto 2: Identifica el error de arquitectura del siguiente bloque de c贸digo

Construcci贸n de componentes

22

驴Qu茅 es un componente? Analicemos nuestros dise帽os

23

Estructura con HTML y BEM de un men煤 desplegable

24

Estilizando nuestro men煤 desplegable con CSS

25

Creaci贸n de un buscador

26

Creaci贸n de un carousel de im谩genes con CSS: Estructura principal

27

Creaci贸n de un carousel de im谩genes con CSS: Detalle de cada item

Maquetaci贸n y dise帽o responsivo

28

Flexbox

29

Nuestro nuevo sistema de layout: CSS Grid

30

Maquetaci贸n de la pantalla de login: Estructura HTML

31

Maquetaci贸n de la pantalla de login: Estilizaci贸n con CSS

32

Estilizaci贸n de inputs y footer en la pantalla de login

33

Media queries

34

Maquetaci贸n de la pantalla principal

35

Reto 3: Maquetaci贸n de la pantalla de Not Found

Preprocesadores

36

驴Qu茅 es un preprocesador, cu谩les existen y cu谩les son sus diferencias?

37

Instalaci贸n de SASS y configuraci贸n inicial

38

Hablemos de variables, herencia, anidamiento, operadores y m谩s

Accesibilidad

39

La accesibilidad y nuestra responsabilidad como desarrolladores

40

Mejorando la accesibilidad de nuestra p谩gina de inicio

Conclusi贸n

41

Conclusi贸n del curso y paso siguiente

Bonus

42

Visualizaci贸n de un bot贸n usando storybook para HTML

43

Flexbox

No tienes acceso a esta clase

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

Media queries

33/43
Recursos

Los media queries nos ayudan a ajustar nuestros dise帽o a dispositivos m谩s peque帽os como tablets y celulares.

Es recomendable seguir la metodolog铆a de Mobile First: comenzar a dise帽ar para el dispositivo m谩s peque帽o e ir creando las media queries para las pantallas m谩s grandes.

Aportes 227

Preguntas 33

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

Si no les funcionan los MediaQuery es porque les hace falta un meta dato para que los reconozca

<meta name="viewport" content="width=device-width, initial-scale=1">

Este fue mi resultado 馃槃

En la mayor铆a de editores visuales te encontraras que la medida est谩ndar para mobile first empieza en 480 pixeles.

M谩s sin embargo el framework GEF v.2 nos da las siguiente recomendaciones:

  • XS - Extra peque帽o <34em
    <544px Pantalla muy peque帽a / Tel茅fono

  • SM - Peque帽o 鈮34em
    鈮544px Pantalla peque帽a / Tel茅fono

  • MD - Mediano 鈮48em
    鈮768px Pantalla media / Tablet

  • LG - Grande 鈮62em
    鈮992px Pantalla grande / Tablet, escritorio

  • XL - Extra grande 鈮75em
    鈮1200px Pantalla muy grande / Escritorio

Si quieres ver los queries para los Min y Max size los encuentras en este link:

http://guia-frontend.uoc.edu/UOC/GEFv2/es/guide/breakpoints.html

Les invito a ver mi resultado.
https://codepen.io/angelcabrera/full/VwZqxmM

A seguir aprendiendo!

Arregle algunos detallitos como por ejemplo; alinear el checkbox con el texto o eliminar los peque帽os espacios vac铆os de las secciones, o el logo centrado (cuesti贸n de gusto) por si a alguien le sirve.

/* *** MEDIA QUERIES START*** */
@media only screen and (max-width: 600px) {
  .header{
    justify-content: center;
  }
  .login{
  margin-top: -2px;
  }
  .login__container{
    background-color: transparent;
    border: none;
    padding: 0;
    width: 100%;
  }
  .login__container--remember-me{
    align-items: center;
  }
  .login__container--remember-me label{
    display: flex;
    align-items: center
  }
  .footer{
    align-items: flex-start;
    flex-direction: column;
    padding: 0px 21px;
    margin-top: -2px;
    justify-content: space-evenly;
  }
}
/* *** MEDIA QUERIES END*** */```

驴Han hecho la prueba escribiendo algo en los inputs (Nombre, E-mail)?
Si les aparece en negro agreguen al estilo de .input:

color: white;
font-size: 16px;

馃槈

Como la profe dice, es muy recomendable usar el metodo Mobile First, es mas sencillo a la hora de redimensionar y posicionar los elementos, adem谩s de que si tenemos en cuenta, la gran mayoria de las personas consultan las web desde el movil.

Es importante que tengan en cuenta , las mediaQueries no van a funcionar si no se tiene en el HTML este meta definido dentro del <head>

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
Veo que muchos est谩n diciendo que este curso esta muy desordenado y eso es verdad. Sin embargo, les recomiendo tomar el Curso Definitivo de Html y Css antes de ver este curso. As铆 le van a entender mucho mejor

Ya hab铆a hecho la versi贸n mobile y la desktop, en mi caso s铆 quise conservar el fondo y borde:

Lo pueden ver aqu铆 en esta p谩gina que la sub铆 en Github Pages:
PlatziVideo Login

驴porque dentro del curso empezamos por la version de escritorio, si lo correcto seria mobile-first?

Si empezamos desde mobile podemos ahorrarnos mucho c贸digo en @media queries. Incluso podemos llegar a utilizar ning煤n media querie jam谩s. Eso estar铆a m谩s cool

A m铆 me sirvi贸 con un width del 85% 馃槮 no s茅 si es una buena pr谩ctica colocarle un width m谩s peque帽o para que se adapte:

![](

En dado caso que el media quieri no haya surtido efecto, probablemente nos hace flata la esta etiqueta meta:

<meta content="width=device-width, initial-scale=1" name="viewport" />

les comparto mi maquetaci贸n responsive

Vengo a compartirles este 鈥渂ug鈥 que me apareci贸.
Al usar el padding: 0, se quedaba asi las vistas
Lo solucione cambiando el padding a la mitad de lo que tenia el original en el login__container

Si alguien no le funciona los media queries y a pesar de eso pusieron el meta dato, simplemente lo us茅 de esta manera y me funcion贸.

@media (max-width: 600px) {
  .login__container {
    background-color: transparent;
    border: none;
    padding: 0px;
    width: 100%;
  }

  .footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

Cambi茅 esto en el media query

.footer {
        align-items: center;
        flex-direction: column;
    }
    .footer a {
        font-size: 12px;
    }

Tengo una duda.

Yo solucione el footer simplemente agregandole fuera de los media-queries un flex-wrap:wrap; y funciona a la perfecci贸n

:3 馃崊

Para quien guste, estas son las medidas estandar de los dispositivos, para que puedan hacer sus MediaQuerys.

Los que usaron la propiedad 鈥淏ox-shadow鈥 No olviden ponerla 鈥渘one鈥 en el media query.

Me tir茅 un buen rato mirando porque no me quedaba igual, y era s贸lo eso. Jajajajaja.

hay una aplicacion llamada responsively la cual los deja ver su sitio web desde la perspectiva de otros dispositivos. simplemente copian la ruta de su archivo, lo pegan arriba y listo. aca les dejo el enlace por si quieren descargarla https://responsively.app/

Saben como quitar el scroll que aparece:

Gracias por la ayuda.

Porque mi linear gradient sale asi ? tengo que ponerle otros valores? o hay que a帽adir otra cosa ?

@media only screen and (max-width: 600px) {
    .login__container {
        background-color: transparent;
        border: none;
        padding: 0px;
        width: 100%;
    }
    .footer {
        align-items: flex-start;
        flex-direction: column;
    }
}

Como comentario talves empezar primero con una versi贸n 鈥mobile first鈥 para dispositivos m贸viles y luego se ampl铆a para web, se optimiza mejor el css.

Totalmente recomendando tanto en proeceso de dise帽o como desarrollo Mobile First:

https://www.hostgator.mx/blog/mobile-first/

Esta es mi pantalla de inicio de sesi贸n para mobile

Al probar en la vista de ipad se me queda un espacio en blanco debajo del footer鈥 a alguien m谩s le pasa? 馃槄


Tengo una linea divisoria entre el footer y el login__container solo en version mobile

Un consejo, para evitar conflictos en el procesamiento del CSS, no definan atributos 鈥渄in谩micos鈥 (que cambiar谩n conforme al tama帽o de pantalla) dentro del c贸digo CSS global, sino s贸lo en las Media Queries, ya que si definen medidas desde el c贸digo 鈥済eneral鈥, el navegador le da mayor prioridad a estos e ignora los atributos en los media queries.

Al empezar por movile design first tuve que aplicar muchas menos lineas de codigo.

@media only screen and (min-width: 600px) {
    .login__container {
        width: 500px;
    }
    .footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

dos puntos por terminar de ver el video :v

para reutilizar c贸digo de media pueden crear un archivo css que se llame mobile.css y de esta manera en el archivo html de login y de register agregan este link despues del link del css que ya tenia puesto

<link rel="stylesheet" href="./mobile.css" media="screen and (max-width: 600px)">

y en el archivo mobile.css ponen:

.login__container{
    background-color: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
    width: 100%;
}
.footer{
    align-items: flex-start;
    flex-direction: column;
}

y listo. el mismo c贸digo para ambos archivos login y register

For the people who are studying English, I share with you important notes

Media Queries

@media

  • The @media CSS at-rule can be used to apply part of a style sheet based on the result of one or more media queries. With it, you specify a media query and a block of CSS to apply to the document if and only if the media query matches the device on which the content is being used.

    /* At the top level of your code */
    @media screen and (min-width: 900px) {
      article {
        padding: 1rem 3rem;
      }
    }
    
    /* Nested within another conditional at-rule */
    @supports (display: flex) {
      @media screen and (min-width: 900px) {
        article {
          display: flex;
        }
      }
    }
    
  • https://developer.mozilla.org/en-US/docs/Web/CSS/@media

Mobile First

Yo estoy usando css gird porque mi maquetaci贸n es diferente y es super cool que con pocas l铆neas de c贸digo ya tengas un layout diferente, en mi caso tengo dos columnas en desktop y para pasar a mobile solo hice lo siguiente:

    @media only screen and (max-width: 992px) {
        .login-section {
            grid-template-areas: 
            "login-form login-form"
        }
    }```

Lo comenc茅 a hacer desde m贸vil, as铆 el resultado.

隆Tenemos un curso de maquetaci贸n mobile first aqu铆 en Platzi! 馃槏
https://platzi.com/clases/mobile-first/

![](

Esta clase me sorprendi贸 :麓)

Le cambi茅 una cuantas cosas, aqu铆 est谩 el resultado

practicando ando鈥
ahora movil after鈥 jejejje

Consejo para reducir el n煤mero de media querys: GRID.
Esa es la panacea.

Genial

Mi resultado:

Hola, como hacen la simulaci贸n de la panalla de iPhone?

驴Por qu茅 se da una recomendaci贸n de Mobil First y no se hizo desde un principio siguendo eso?

Los 煤ltimos 30 segundos no tienen audio

No se hace mobile first?

Yeiiiii

Que takl. campeon, buen dia鈥 excato, first mobile鈥

great鈥!

Dise帽o para Pantallas y Mobile:

https://ibb.co/1bmq8DL
https://ibb.co/71wJdC6

As铆 fue como me qued贸 a mi, pero aun no logro despegar del todo el header de ah铆 arriba, se me hace que est谩 muy pegado. Otra cosa es que se me hace todos los elementos est谩n muy alejados entre s铆.

Ejercicio de registro

Resultado de la aplicaci贸n del media query: 馃槈馃槈馃槈

This is the code I added in a new media.css file

CSS

@media only screen and (max-width: 673px) {
  .login__container {
    background-color: transparent;
    border: none;
    box-shadow: none;
    width: 100vw;
  }

  .footer__list-container {
    flex-direction: column;
    align-items: center;
  }
}

Utiliza box-shadow: none; para eliminar la sombra del contenedor.

@media only screen and (max-width: 600px){
    .login__container{
        background-color: transparent;
        border: none;
        padding: 0;
        width: 100%;

        box-shadow: none;
    }
}
<!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="./css/estilos.css" />
    <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=Mulish:ital,[email protected],200;0,300;1,300&display=swap"
      rel="stylesheet"
    />
    <title>Inicio de sesi贸n</title>
  </head>
  <body>
    <header class="header">
      <img src="./img/logo.png" alt="Logo_PlatziVideo" class="header__logo" />
    </header>
    <section class="login">
      <!--Seccion principal del login PADRE-->
      <section class="login__container">
        <!--Contenedor del login HIJO-->
        <h2>Inicio de sesi贸n</h2>
        <!--T铆tulo de iniciar sesi贸n-->
        <form class="login__container--form">
          <!--Formulario de registro-->
          <input type="text" class="input" placeholder="Correo" />
          <input type="password" class="input" placeholder="Contrase帽a" />
          <button class="button">Iniciar sesi贸n</button>
          <!--Bot贸n de inicio de sesi贸n-->
          <div class="login__container--remember-me">
            <!--Contenedor checkbox HIJO-->
            <label for="">
              <input
                type="checkbox"
                name="cbox1"
                id="cbox1"
                value="checkbox"
              />Recu茅rdame
            </label>
            <a href="#">Olvid茅 mi contrase帽a</a>
          </div>
        </form>
        <section class="login__container--social-media">
          <!--Contenedor logos RSSS-->
          <div class="google">
            <!--Bot贸n de inicio con Google-->
            <img src="./img/google.png" alt="Logo Google" />
            <p>Inicia sesi贸n con <strong>Google</strong></p>
          </div>
          <div class="facebook">
            <!--Bot贸n de inicio con FB-->
            <img src="./img/fb.png" alt="Logo Facebook" />
            <p>Inicia sesi贸n con <strong>Facebook</strong></p>
          </div>
        </section>
        <section>
          <!--Contenedor de registro usuarios nuevos-->
          <p class="login__container--register">
            驴No tienes cuenta? <a href="#">Reg铆strate</a>
          </p>
        </section>
      </section>
    </section>
    <footer class="footer">
      <!--Footer con datos extra-->
      <a href="#">T茅rminos de uso</a>
      <a href="#">Declaraci贸n de Privacidad</a>
      <a href="#">Centro de ayuda</a>
    </footer>
  </body>
</html>
body {
  background-color: #183b7a;
  font-family: "Mulish", sans-serif;
  margin: 0%;
  padding: 0%;
}
strong {
  color: white; /*Todos los strong ser谩n de color blanco*/
}
.header {
  background-color: #183b7a;
  align-items: center;
  display: flex; /*Para poder dimensionar los elementos del header usamos flex*/
  height: 80px;
  justify-content: space-between; /*Alinea los elementos con un espacio entre si */
  width: 100%;
}
.header__logo {
  margin-top: 10px;
  margin-left: 10px;
  width: 210px;
  cursor: pointer; /*Cambiamos el cursor de flecha a una mano*/
}
.login {
  align-items: center;
  background-color: #183b7a;
  display: flex;
  flex-direction: column; /*Alineamos los elementos uno debajo del otro*/
  justify-content: center; /*Cambiamos el contenido al centro*/
  min-height: calc(
    100vh - 200px
  ); /*Le dimos un tama帽o en relaci贸n a lo que ve el user*/
  padding: 0px 30px;
}
.login__container {
  background-color: rgba(255, 255, 255, 0.1); /*transparencia*/
  border: 2px solid white;
  border-radius: 40px; /*redondeamos los bordes*/
  color: white;
  padding: 60px 68px 40px;
  min-height: 700px; /*altura fija*/
  width: 300px;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
}
.login__container > h2 {
  align-items: center;
  font-weight: bold;
  display: flex;
  justify-content: center;
  letter-spacing: 1px; /*Cambiamos el espacio entre letras*/
}
.login__container--form {
  display: flex;
  flex-direction: column; /*alineamos uno debajo del otro*/
}
.login__container--remember-me {
  color: white;
  display: flex;
  justify-content: space-between; /*tengan espacio entre si*/
  font-size: 14px;
  margin-top: 10px;
}
.login__container--remember-me a {
  color: white;
  font-size: 14px;
  text-decoration: none; /*le quitamos el subrayado*/
}
.login__container--remember-me a:hover {
  text-decoration: underline; /*salga el subrayado al darle hover*/
}
.login__container--social-media > div {
  align-items: center;
  display: flex;
  font-size: 14px;
  margin-bottom: 10px;
}
.login__container--social-media > div > img {
  width: 30px;
  margin-right: 10px;
}
.google {
  background-color: #fc3c3c;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  height: 35px;
  justify-content: center;
}
.google > img {
  margin-left: -14px;
}
.facebook {
  background-color: #456dff;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  height: 35px;
  justify-content: center;
}
.login__container--register {
  align-items: center;
  display: flex;
  justify-content: center;
  font-size: 14px;
}
.login__container--register a {
  color: white;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  margin-left: 10px;
}
.login__container--register a:hover {
  text-decoration: underline;
}
.input {
  background-color: transparent; /*fondo transparente*/
  border-bottom: 2px solid white;
  border-left: 0px;
  border-right: 0px;
  border-top: 0px;
  font-family: "Mulish", sans-serif; /*colocamos la misma fuente*/
  font-size: 16px;
  height: 50px;
  margin-bottom: 20px;
  outline: none; /*Quitamos el borde al hacer click en el input*/
  padding: 0px 20px;
}
::placeholder {
  color: white; /*Cambiamos el color del placeholder*/
}

.button {
  background-color: rgba(255, 255, 255, 0.1);
  border: none; /*quitamos el borde*/
  border-radius: 25px;
  color: white;
  cursor: pointer;
  font-family: "Mulish", sans-serif;
  font-size: 16px;
  font-weight: bold; /*a帽adimos negrita*/
  height: 50px;
  letter-spacing: 1px;
  margin: 10px 0px;
}
.footer {
  align-items: center; /*centramos verticalmente*/
  display: flex;
  height: 100px;
  width: 100%; /*que su ancho sea un 100 en relacion al tama帽o*/
}
.footer a {
  color: white;
  cursor: pointer; /*el cursor flecha cambia a mano*/
  font-size: 14px;
  font-weight: bold; /*negritas*/
  padding-left: 30px;
  text-decoration: none; /*le quitamos el subrayado*/
}
.footer a:hover {
  text-decoration: underline; /*al hacer hover sale el subrayado*/
}
@media only screen and (max-width: 600px) {
  .login__container {
    background-color: transparent;
    border: none;
    padding: 0px;
    width: 100%;
  }
  .login__container--register {
    display: flex;
    justify-content: flex-start;
  }
  .footer {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
  }
}

Ya va agarrando forma.

Version mobile 馃摫馃摫

Si por alg煤n motivo no les aparece como a la profe, revisen como definieron el padding de .login. Me pas贸 que originalmente le puse padding vertical en vez de horizontal por tanto el formulario me ocupaba de extremo a extremo en mobile.

guau, esta increible

Done 鉁

El resto del c贸digo est谩 en mi aporte de la clase pasada.

CSS

@media (max-width: 600px) {
    .login{
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 15px 0 0 0;
        width: 80%;
    }
    
    .footer{
        flex-direction: column;
        align-items: center;
    }
    
    .footer *{
    padding: 5px;
    margin-inline: 10px;
    font-size: 12px;
    }
    
    .login__remain-forget{
        margin-block-end: -70px;
    }

    .login__social-media{
        margin-block-end: 60px;
    }
}

super interesante los media query.

Asi va quedando mi responsive!

As铆 termin贸 el m铆o.

El profe Diego Granda del curso definitivo de HTML y CSS recomienda siempre comenzar con la vista de celular y hacer los media query en base a pantallas m谩s grandes. Tambi茅n recomienda hacer un archivo css diferente por cada breakpoint o pantalla diferente.

![](

![Screenshot iniciosesion2021-03-26 201156.png](https://static.platzi.com/media/user_upload/Screenshot%20iniciosesion2021-03-26%20201156-99842645-2fb0-4bd8-8ed9-6f0b0f7294fb.jpg)

Este es mi resultado usando la metodolog铆a de mobile first

muchas gracias por el ejm