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

Más sobre selectores

29/55
Recursos

Aportes 183

Preguntas 25

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Malas Prácticas dichas en Clase Hasta Ahora

  • Utilizar tanto id en CSS
  • Utilizar el !important
  • Utilizar la etiqueta <style> dentro del archivo html
  • Utilizar el atributo style dentro de las etiquetas html
  • Utilizar div para contener todo ignorando los header, nav, section, article, etc.
  • No utilizar la etiqueta <form> para hacer formularios
  • Utilizar las etiquetas <select> y <option> para hacer selectores o menús desplegables.
  • No nombrar el primer archivo html del proyecto como index.html
  • No tener archivos .css para cada pantalla de un proyecto.
  • Tener todo el css junto en un solo archivo.
  • No ponerle el atributo alt a una imagen
  • Poner imágenes dentro de <div> en vez de <figure>
  • Utilizar textos solo en mayúscula en HTML, en vez de utilizar el atributo de CSS, text-transform, con el valor uppercase. Ya que al hacer esto pareciera que estuvieras gritando.
  • Poner videos que se reproduzcan solos.
  • No optimizar las imágenes.
  • No tener cuidado de cual es el formato ideal para las imágenes y su respectivo peso.
  • No tener cuidado con la respectiva semántica de HTML, y con la sintaxis adecuada para CSS.
  • No cerrar las etiquetas que se cierran en sí mismas como <br/>
  • No comentar partes esenciales de tu código.
  • No poner la etiqueta <meta name=”robots” content=”index,follow”> en tu proyecto para que los navegadores los puedan ubicar mejor.
  • No usar la etiqueta <meta name=”viewpor” content=”width=device-width, initial-scale=1.0”> para hacer tu proyecto responsive.
  • No poner el atributo autocomplete=”valor” en los campos de tu formulario para hacerle la vida más fácil al usuario
  • No usar el atributo required en los campos obligatorios de tu formulario como una primera capa de seguridad

Mandamientos sacados de https://developer.mozilla.org/es/docs/Web/CSS/Especificidad

1.- Busca siempre una manera de emplear la especificidad antes de considerar el uso de !important.
2 .- Usa !important solo en declaraciones específicas de CSS que sobrescriban CSS externo (de librerías externas como Bootstrap o normalize.css).
3.- Nunca uses !important cuando estés intentando escribir un plugin/mashup.
4.- Nunca uses !important en todo el código CSS.

Estilización en CSS explicadapor Thanos 😃

Este curso es lo mejor que hay!
Por fin aclare todo esto de la especificidad Muchas Gracias Diego!

Recuerden.
1- Evitar usar !important
2- Evitar usar estilos embebidos (Estilos en la etiqueta html).
3- Evitar usar ID para dar estilos en CSS por que tienen mas peso y dan conflictos.

Si usan Visual Studio Code pueden ver que peso tiene el o los selectores que están usando.
Solo pongan el mouse sobre los selectores y podrán verlo de la siguiente manera (ID, Class, Elemento HTML)

Cuando logro entender todo:
-El cielo resplandece a mi alrededoooor!
AJAJJAJAJAJAJAJAJA

CSS Diner
es un juego para practicar selectores de css!

Le estaba explicando a un amigo sobre la especificidad y se me ocurrió esta comparación con la que lo entendió perfecto y quiero compartirlo porque tal vez le sirva a alguien más:

Digamos que HTML es un alumno de Platzi.
HTML hace sus apuntes muy completos con todo lo que necesita (html contiene todo lo que la página requiere), sin embargo al ver sus apuntes no queda muy convencido de cómo se ve, por lo que le pide ayuda a su amiga, la chica de los plumones CSS.

CSS hace un diseño padrísimo utiliza distintos colores y técnicas en cada elemento del apunte (#id, .class, etc), pero, nota que HTML puso en su apunte (código html) cierto párrafo con rojo (estilos embebidos) y piensa que debe haber una razón importante por lo que lo hizo, así que a pesar de ella haber planeado en su apunte estilizado ponerlo amarillo (.class amarillo) en el apunte que ella entrega (cuando carga la página) queda rojo.

Obviamente es una comparación burda pero espero les sirva a alguien (:

Esto no es un aporte pero como experiencia personal, cuando yo empecé a aprender CSS lo hice por mi cuenta. Compré cursos en Udemy. Seguía a youtubers, artículos, etc.
La cuestión es que este tema de la especificidad en CSS cuando ya las combinas entre id y las clases, clases y clases, clases y elementos, nunca me quedó muy claro. Yo opté por aprender Sass para olvidarme del tema. Según yo era la mejor opción en ese tiempo.
La manera de explicarlo en estos vídeos está super clarísimo con los demos. Y realmente soluciona muchos problemas. Si necesitan verlo dos veces, hagánlo. Lo mejor es aprender bien las bases desde el principio. Saludos!

Les comparto este hilo que hizo teffcode en Twitter hablando sobre la especificada en CSS, es muy bueno y creo que complementa muy bien la clase:

https://twitter.com/teffcode/status/1159162961090490369

Seguramente sea la pagina mas fea y incompleta que veran en su vida 😂 pero la ire evolucionando al pasar el curso.

ahora entiendo porque en React se utiliza siempre ClassName y no los Id, por eso nunca utilicen id por la especificidad 😃

Aqui un resumen de la clase

Aun no me queda muy claro cuando se debe usar un id y una clase …
¿cuando es estrictamente necesario?

profesores como degranda son lo que hacen que platzi sea el mejor medio de estudio online al día de hoy, felicidades degranda por ese gran dominio de explicar con simplicidad las cosas

eres de los mejores, por no decir el mejor en tu profesión

No es buena practica usar important
No es buena practica usar estilos embebidos en etiquetas
No es buena practica usar id para dar estilos
Si es buena practica usar clases para estilos

Dame una: " A ".
-A.
Dame una: " M ".
-M.
Dame una: " O ".
-O.
Dame una: " E ".
-E.
Dame una: " S ".
-S.
Dame una: " T ".
-T.
Dame una: " E ".
-E.
Dame una: " C ".
-C.
Dame una: " U ".
U.
Dame una: " R ".
-R.
Dame una: " S ".
-S.
Dame una: " O ".
-O.

¡QUE DICE! … AMO ESTE CURSO ❤️ :3

QUE BUENAS EXPLICACIONES Y RECOMENDACIONES PARA MI VIDA PROFESIONAL TE AGREDEZCO DEMASIADO.

Cuando nos parámos en el editor de texto en el .css nos sale “selector specificity” (1,0,1) El primer número habla del ID, el segundo de la Clase y el Tercero de la Etiqueta.

Notas de la clase

Este hombre es un genio! Cada clase es oro, le voy a estar muy agradecido cuando esté trabajando jaja 👏👏👏👏

📑 No es buena practica usar estilos embebidos en etiquetas, dificulta el mantenimiento.

¡Cada clase admiro más a este hombre!

Buenas Practicas

  • Hagamos los estilos con etiquetas, clases y pseudo elementos
  • Deja de usar !important
  • Evitar usar estilos embebidos
  • Evita usar id para los estilos

En esta clase aprendimos que:

  • No es buena práctica usar el !imporntat.
  • No es buena práctica usar los estilos embebidos.
  • No es buena práctica usar muchos id.

IMPORTANTE

Dejar de utilizar id para CSS y empezar a utilizar class

<!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>Clase Para Mejorar y Quitarle los Id</title>
<link rel=“stylesheet” href="./style.css">
</head>
<body>
<header class=“page-header”>
<h1 id=“page-title” class=“title”>Empresa </h1>
<nav>
<ul id=“main-nav” class=“nav”>
<li><a href="" class=“home”>Home</a></li>
<li><a href="" class=“cursos” >Cursos</a></li>
<li><a href="">Instructores</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Contactanos</a></li>
<!-- Mala practica */ -->
<li>
<a href="" class=“Contactano” > Contactano</a>
<!-- LO QUE LE FALTA A LO DE ARRIBA A LA MALA PRACTICA–>
</li>
</ul>
</nav>
</header>
</body>
</html>

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

}
h1 {
color: purple;
font-family: serif;
margin-bottom: 10px;
}
/* asi se llama id */

}
.title {
font-size: 18px;
font-family: monospace;
}
.nav {
margin-top: 10px;
list-style-type: none;
padding-left: 0;
}

/* PONER DE MANERA HORIZONTAL*/
.nav li {
display: inline-block;
}
.nav a {
color: white;
background-color: darkcyan;
padding: 8px;
border-radius: 20px;
text-decoration: none;
}

/ESTILO INDEVIDO Y POR ESO NO SE APLICA/
.nav .Contactano {
background-color: blue;
}

.nav .home {
background-color: brown;
}

.nav .cursos {
background-color: red;
}
<!–Malas Prácticas dichas en Clase Hasta Ahora
Utilizar tanto id en CSS
Utilizar el !important
Utilizar la etiqueta <style> dentro del archivo html
Utilizar el atributo style dentro de las etiquetas html
Utilizar div para contener todo ignorando los header, nav, section, article, etc.
No utilizar la etiqueta <form> para hacer formularios
Utilizar las etiquetas <select> y <option> para hacer selectores o menús desplegables.
No nombrar el primer archivo html del proyecto como index.html
No tener archivos .css para cada pantalla de un proyecto.
Tener todo el css junto en un solo archivo.
No ponerle el atributo alt a una imagen
Poner imágenes dentro de <div> en vez de <figure>
Utilizar textos solo en mayúscula en HTML, en vez de utilizar el atributo de CSS, text-transform, con el valor uppercase. Ya que al hacer esto pareciera que estuvieras gritando.
Poner videos que se reproduzcan solos.
No optimizar las imágenes.
No tener cuidado de cual es el formato ideal para las imágenes y su respectivo peso.
No tener cuidado con la respectiva semántica de HTML, y con la sintaxis adecuada para CSS.
No cerrar las etiquetas que se cierran en sí mismas como <br/>
No comentar partes esenciales de tu código.
No poner la etiqueta <meta name=”robots” content=”index,follow”> en tu proyecto para que los navegadores los puedan ubicar mejor.
No usar la etiqueta <meta name=”viewpor” content=”width=device-width, initial-scale=1.0”> para hacer tu proyecto responsive.
No poner el atributo autocomplete=”valor” en los campos de tu formulario para hacerle la vida más fácil al usuario
No usar el atributo required en los campos obligatorios de tu formulario como una primera capa de seguridad -->

Malas Prácticas dichas en Clase Hasta Ahora
Utilizar tanto id en CSS
Utilizar el !important
Utilizar la etiqueta <style> dentro del archivo html
Utilizar el atributo style dentro de las etiquetas html
Utilizar div para contener todo ignorando los header, nav, section, article, etc.
No utilizar la etiqueta <form> para hacer formularios
Utilizar las etiquetas <select> y <option> para hacer selectores o menús desplegables.
No nombrar el primer archivo html del proyecto como index.html
No tener archivos .css para cada pantalla de un proyecto.
Tener todo el css junto en un solo archivo.
No ponerle el atributo alt a una imagen
Poner imágenes dentro de <div> en vez de <figure>
Utilizar textos solo en mayúscula en HTML, en vez de utilizar el atributo de CSS, text-transform, con el valor uppercase. Ya que al hacer esto pareciera que estuvieras gritando.
Poner videos que se reproduzcan solos.
No optimizar las imágenes.
No tener cuidado de cual es el formato ideal para las imágenes y su respectivo peso.
No tener cuidado con la respectiva semántica de HTML, y con la sintaxis adecuada para CSS.
No cerrar las etiquetas que se cierran en sí mismas como <br/>
No comentar partes esenciales de tu código.
No poner la etiqueta <meta name=”robots” content=”index,follow”> en tu proyecto para que los navegadores los puedan ubicar mejor.
No usar la etiqueta <meta name=”viewpor” content=”width=device-width, initial-scale=1.0”> para hacer tu proyecto responsive.
No poner el atributo autocomplete=”valor” en los campos de tu formulario para hacerle la vida más fácil al usuario
No usar el atributo required en los campos obligatorios de tu formulario como una primera capa de seguridad

el !important! en que ocaciones es mas semantico usarlo?

Les aseguro que leer esta nota de Selectores avanzados valdrá el tiempo invertido. Después de ello pueden practicar con el juego de CSS Dinner SELECTORES AVANZADOS

Para que sepan el peso de sus estilos en CSS con el editor VSC, deben poner el cursor del mouse sobre el selector e inmediatamente les saldrá esta información:
(

Excelente clase, por eso me gusta mucho aprender en platzi te enseñan las buenas prácticas de desarrollo web. Antes lo que hacía era si tenía un problema de especificidad recurría al estilo embebido o al important.

No tenia idea para que era el Selector de Especifidad, ahora ya eniendo el tema de las importancias y los selectores de la especifidad, esta clase esta llena de valor 😀

Me gustaría saber que opinan de esta forma

Excelente porque ya habia visto otros cursos donde estaban enseñando malas practicas

muy útil… yo le ponía ids a todo 😄

lo que me tomo aprender en 5 clases presenciales, aburridas y largas. Aqui en platzi 💚 lo aprendi en 8:12 minutos 🤯🚀. Realmente si es educación online efectiva!

Cuando un elemento tiene más de un valor distinto se genera un conflicto y CSS elige el que tenga mayor importancia. Para calcular la importancia se hace lo siguiente.
Si el selector es por etiqueta o pseudoelemento vale 1 punto, si es por clase pseudoclase o atributo vale 10, si es por id vale 100, si es inline style vale 1000, si está marcado important vale 10000, si hay selectores concatenados se suman y si hay 2 con el mismo valor se tomará el que está indicado después en el código.

Asi comente yo en mi codigo CSS, se me hace mas facil y practico para entender mejor, ojala le sirva alguien mas.

Ahora recién entiendo porque ciertos estilos nunca se me aplicaban, que importante es ésta clase.

Más sobre selectores

Utilizar id’s # para estilar no son buenas practicas sobre todo porque son muy importantes para el estilo y son específicos.

No es buena practica utilizar !important, estilos embebidos y utilizar id’s para los estilos. Los id’s son únicamente para el tema de especificidad.

Todo lo podemos trabajar en CSS con clases, etiquetas y pseudo elementos.

Para crear cosas estetica para una pagina web se recomienda tener una paleta de colores, aqui una pagina:
https://www.colourlovers.com/copaso/ColorPaletteSoftware

wow… hasta que entendí por qué dañanba los proyectos a mitad de camino… jejjejeje

Genial esta clase.
Me dejó clara la teoría de lo que vengo haciendo hace años.
Me siento todo un PRO!

Utilizar important solo para ultimo recurso, mejor hacer buenas practicas para no educarnos mal.

Los id's no son buenas practicas en CSS para estilar y deberian ser removidos Al ser especificos vamos a tener muchos y dificulta el mantenimiento

!importan == voldemord.
el innombrable xD

He aquí mis apuntes
Pueden comentar y duplicarlos.

Muy buena clase!

Muy buena clase, ya veo con mas claridad el tema de especificidad, a seguir 🤟🏻

RESUMEN CLASE 29:
MAS SOBRE SELECTORES

NO SON BUENAS PRACTICAS UTILIZAR:

$ !important 
$ Style=""
$ id

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>Demo</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <header class="page-header">
        <h1 id="page-title" class="title">Empresa</h1>
        <nav>
            <ul id="main-nav" class="nav">
                <li><a href="">Home</a></li>
                <li><a href="">Cursos</a></li>
                <li><a href="">Instructores</a></li>
                <li>
                    <a href="" class="blog">Blog</a></li>
            </ul>
        </nav>
    </header>
</body>
</html>

CSS

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
h1 {
    color: purple;
    font-family: serif;
    margin-bottom: 10px;
}

.title {
    font-size: 18px;
    font-family: monospace;
}
.nav {
    margin-top: 10px;
    list-style-type: none;
    padding-left: 0;
}

.nav li {
    display: inline-block;
}

.nav a {
    color: white;
    background-color: #121f3d;
    padding: 5px;
    border-radius: 2px;
    text-decoration: none;
}

.nav .blog {
    background-color: red;
}

DO you want to keep learning more about selector try this game:

Complete the whole challenge and practice english !

Información resumida de esta clase
#EstudiantesDePlatzi

  • Utilizar mucho el id en CSS no es una buena práctica, en este caso lo mejor es utilizar las clases y tener muy claro la especificidad

  • No utilizar el !importatn

Al fin aclare completamente este tema de especificad, se siente muy bien entenderlo de verdad. 🤯

Siiiii ya entendí esto, jejeje >:D estaba confundida pero me puse a experimentar con mi código y lo entiendo todo

que buen Maestro eres Diego, …siguiente clase

muchisimas gracias finalmente comprendi la importancia de las clases, mas haya de usarlos para identificar lugares en css! … excelente como podemos jugar con la especificidad, agregar una clase sumarle una etiqueta de ser necesario o a una clase sumarle la clase padre… excelente

yo logre hacer todo solo con las etiquetas sin meterme a clases o id.

  • {
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
    }

h1 {
color: rgb(128, 131, 131);
font-size: 20px;
font-family: ‘Franklin Gothic Medium’, ‘Arial Narrow’, Arial, sans-serif;
margin-bottom: 10px;
}

nav {
font-size: 20px;
padding-left: 0px;
list-style: none;
margin-top: 10px;
}

li {
display: inline-block;
}

a {
background-color: teal;
border-radius: 2px;
color: whitesmoke;
font-family: Verdana, Geneva, Tahoma, sans-serif;
padding: 3px;
text-decoration: none;
}

li .blog {
background-color: red ;
}

Me parace genial como va cuadrando cada cosa como si fueran engranajes para que todo funcione. Muy bueno el curso

Este juego les ayudara a entender mejor como usar los selectores em CSS

CSS Diner

**Tener en cuenta: **
2 clases más importantes que una clase y una etiqueta

💥💥

Si no es buena práctica usar 5/6 herramientas de css para escribir CSS, para que están ahí?

excelente explicacion
ahora toca es ponerlo en practica

Me gusta como nos advierte sobre las malas practicas. Se agradece!!

2 claes son mas importantes que una 1 clase

Evitar:

  • !importan
  • estilos en linea
  • #id

Y por lo que mas quieran no usen !Important

Estuve tratando de resolver este problema usando la pseudoclase :last-child ya que era el último elemento el que se quería pintar, estuve haciéndolo de esta manera y no me funcionaba:

.nav a:last-child{
	background: orange;
	}

Luego estuve viendo el código del HTML y me di cuenta que el problema era que debía aplicar la pseudoclase al <li> y lo hice de esta forma y me salió, estoy tan feliz 😄

.nav li:last-child a{
background: orange;
}

Muy contento con el curso y la claridad en las eplicaciones de Diego De Granda.muchas gracias

.

Wow, gracias a esta clase se me facilita mas usar CSS.
😄

Muchos ID no es combeniente usarlos.

Les comparto la documentación de Specificity :3

En conclusión es una mala practica: usar el !important ya que podemos perder la noción de como funcionan nuestros estilos, usar id ya que estos nos pueden generar conflictos al momento de aplicar los estilos y usar estilos embebidos(estilos en HTML).

<body>
    <header class="page-header">
      <h1 id="page-title" class="title">Empresa</h1>
      <nav>
        <ul id="main-nav" class="nav">
          <li><a href="">Home</a></li>
          <li><a href="">Cursos</a></li>
          <li><a href="">Instructores</a></li>
          <li>
            <a href="" class="blog">Blog</a>
          </li>
        </ul>
      </nav>
    </header>
  </body>

🤖🤖🤖
1.- Busca siempre una manera de emplear la especificidad antes de considerar el uso de !important.
⭐️
2 .- Usa !important solo en declaraciones específicas de CSS que sobrescriban CSS externo (de librerías externas como Bootstrap o normalize.css).
⭐️
3.- Nunca uses !important cuando estés intentando escribir un plugin/mashup.
⭐️
4.- Nunca uses !important en todo el código CSS.

muy bien explicado, con los tips de malas practicas en el codigo

Gracias, Profe!! muy valiosa la clase!

Malas Practicas a evitar

  • No usar #id dentro de el CSS
  • Con las herramientas de VScode ser mas específicos
  • No usar el Important!
  • Solo en ocasiones especificas utilizar el Style dentro del codigo HTML (Pero es mala practica)

Wow! No tenía idea de este tema, y tampoco que usar id era una mala práctica.

Para colocar el ultimo elemento en Rojo se puede usar en Pseudo Clase :lastchild

!important != "Una buena práctica"

https://www.youtube.com/watch?v=v5GxoV14YOE

Se refuerza con este video, hay un error de calculo de especificidad en el video , haber si lo encuentra … la respuesta correcta es 112 …

Solución a problemas al embeber el estilo

Yo siempre he pensado que los id deberían usarse solo con JavaScript XD y los class con CSS.

XD

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

h1 {
    font-family: serif;
    color: purple;
    margin-bottom: 10px;
}
.title {
    font-size: 18px;
    font-family: monospace;
}
.nav {
    margin-top: 10px;
    list-style-type: none;
    padding-left: 0px;
}
.nav li {
    display: inline-block;
}
.nav a {
    color: white;
    background-color: #13a4a4;
    padding: 5px;
    border-radius: 2px;
    text-decoration: none;
}
.nav .blog {
    background-color: red;
}

Quiero aportar mis apuntes con un poco la aplicación de lo aprendido en el curso.

HTML

<!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">
    <meta name="description" content="Pagina principiante en el desarrollo web">
    <link rel="stylesheet" href="../css/modeloCaja.css">
    <link rel="stylesheet" href="../node_modules/normalize.css/normalize.css">
    <title>Bienvenidos</title>
</head>
<body>
    <header>

    </header>
    <main>
        <div class="clase">
            <h2>Contenido # 1</h2>
            <div class="clase__contenido">
                
                <div>
                    <h3>Por que se llama index.html?</h3>
                </div>
                <div>
                    Si se puede llamar con otro nombre pero esta pagina inicial que los servidores buscar para abrir principalmente.
                </div>
            </div>
            <div class="clase__contenido">
                <div>
                    <h3>Head y Body</h3>
                </div>
                <div>
                    Son contenedores hermanos, en head va todo lo que necesita para ejecutarse correctamente pero no se necesita mostrar al usuario y en el body va todo con lo que va interatuar el usuario.
                </div>
            </div>
            <div class="clase__contenido">
                <div>
                    <h3>meta</h3>
                </div>
                <div>
                    Utilizamos meta con charset con UTF-8 para poder usar el idioma español y alguno otros caracteres como emojis. <br> Tambien tenemos el meta name="description" y content="contenido de la web" esto es para tenes una descripcion a la hora de buscar. <br> En el meta ponemos name = "robots" y content="index,follow" nos permite que nos busque con "index,unfollow" no nos deja buscarnos  <br> Meta para responsive name = "viewport" y content="width=device-width,inictial-scale=1.0".
                </div>
            </div>
        </div>
        <div class="clase">
            <h2>Contenido #2</h2>
            <div class="clase__contenido">
                
                <div>
                    <h3>Header main y footer</h3>
                </div>
                <div>
                    El header es la parte de la cabecera donde puede ir nuestra navegacion tambien conocidad como el nav <br> El main es donde va todo el contenido principal como articulos o side entre otros. <br> Footer es la parte inferior de las web las cuales es el pie de pagina donde esta la informacion de la organizacion/empresa/etc entre otros.
                </div>
            </div>
            <div class="clase__contenido">
                <div>
                    <h3>Etiquetas en main</h3>
                </div>
                <div>
                    En nuestro main o parte principal del contenido tenemos etiquetas importantes como son las section que hace referencia a secciones directamente de nuestra web/aplicativo dentro podemos tener 1 o varios article/articulos los cuales nos sirven para exponer nuestro contenido <br> Tenemos otras etiquitas como ul y ol las cuales nos sirven para listar desordenada u ordenada respectivamente, con un contenido de li para listar cada uno de los item respectivamente.
                </div>
            </div>
            <div class="clase__contenido">
                <div>
                    <h3>Div</h3>
                </div>
                <div>
                    El div es un tag muy util y muy fuerte para el uso en nuestro desarrollo pero no es en lo unico que nos vamos a poder fijar para realizar una buena semantica en nuestro html
                </div>
            </div>
            <div class="clase__contenido">
                <div>
                    <h3>Etiqueda A</h3>
                </div>
                <div>
                    Esta etiqueta es muy importante ya que nos permite navegar es la etiqueta que nos permite movernos entre las diferentes paginas de nuestro sitio, o incluso de poder viajar a paginas externas redirijadas desde nuestra web
                </div>
            </div>
        </div>
        <div class="reto">
            <h2>RETO #1</h2>
            <a href="https://icons8.com/icon/oz99A8bggOyV/group-of-fruits">Group Of Fruits icon by Icons8</a>
            <div class="reto__contenido">
                
                <div>
                    <h3>Lista de super</h3>
                </div>
                <div class="lista">
                    <ul>
                        <li>FRUTAS</li>
                        <ol>
                            <li><a href="https://www.google.com/search?q=receta+de+manzana&oq=receta+de+manzana&aqs=chrome..69i57.3487j0j4&sourceid=chrome&ie=UTF-8" target="_blank" rel="noopener noreferrer">Manzana</a></li>
                            <li><a href="https://www.google.com/search?q=receta+de+banano&sxsrf=ALeKk025De4kwoYBGsaKERzawcDrOUDx3A%3A1624320905751&ei=iSvRYIOiLcaIwbkPjZKNqA0&oq=receta+de+banano&gs_lcp=Cgdnd3Mtd2l6EAMyAggAMgIIADICCAAyAggAMgIIADICCAAyAggAMgIIADICCAAyAggAOgcIABBHELADOgoILhCwAxBDEJMCOgcIABCwAxBDOgUIABCxA1DCRVi9SWC9T2gEcAJ4AIABhQGIAd0GkgEDMC43mAEAoAEBqgEHZ3dzLXdpesgBCsABAQ&sclient=gws-wiz&ved=0ahUKEwjDitr0-qnxAhVGRDABHQ1JA9UQ4dUDCA4&uact=5" target="_blank" rel="noopener noreferrer">Banano</a></li>
                        </ol>
                    </ul>
                    <ul>
                        <li>CARNES</li>
                        <ol>
                            <li><a href="https://www.google.com/search?q=receta+de+pollo&sxsrf=ALeKk006LCaIOz0WJmsQuSmRidyHs2lZKQ%3A1624320916878&ei=lCvRYKeONfeSwbkP5Lik-A0&oq=receta+de+pollo&gs_lcp=Cgdnd3Mtd2l6EAMyAggAMgUIABCxAzICCAAyAggAMgIIADICCAAyAggAMgIIADICCAAyAggAOgcIABBHELADOgcIABCwAxBDOgQIABBDUNlOWM5TYPVUaARwAngAgAF6iAGzBZIBAzAuNpgBAKABAaoBB2d3cy13aXrIAQnAAQE&sclient=gws-wiz&ved=0ahUKEwinqIH6-qnxAhV3STABHWQcCd8Q4dUDCA4&uact=5" target="_blank" rel="noopener noreferrer">Pollo</a></li>
                            <li><a href="https://www.google.com/search?q=receta+de+res&sxsrf=ALeKk00q18SfY4qpNkVIlF5vymu4rUWQhw%3A1624320928625&ei=oCvRYOLTJcmQwbkP0PO16A0&oq=receta+de+res&gs_lcp=Cgdnd3Mtd2l6EAMyAggAMgIIADIHCAAQhwIQFDIHCAAQhwIQFDICCAAyAggAMgIIADICCAAyAggAMgIIADoHCAAQRxCwAzoHCAAQsAMQQzoECCMQJzoECAAQQzoFCAAQsQNQ4StYtjVgxTpoAXACeACAAZYCiAG3CpIBBTAuNy4ymAEAoAEBqgEHZ3dzLXdpesgBCsABAQ&sclient=gws-wiz&ved=0ahUKEwjio87_-qnxAhVJSDABHdB5Dd0Q4dUDCA4&uact=5" target="_blank" rel="noopener noreferrer">Res</a></li>
                        </ol>
                    </ul>
                    <ul>
                        <li>VERDURAS</li>
                        <ol>
                            <li><a href="https://www.google.com/search?q=receta+de+zanahoria&sxsrf=ALeKk02phR9A9XUTULA-1z-oKL9fIWiQkw%3A1624320937109&ei=qSvRYMGbBvaVwbkP59iv6A0&oq=receta+de+zana&gs_lcp=Cgdnd3Mtd2l6EAMYADICCAAyAggAMgIIADICCAAyAggAMgIIADICCAAyAggAMgIIADICCAA6BwgAEEcQsAM6BwgAELADEEM6BAgjECc6BQgAELEDUOQ0WPdPYM9XaAJwAngAgAG4AYgBxwiSAQMwLjmYAQCgAQGqAQdnd3Mtd2l6yAEKwAEB&sclient=gws-wiz" target="_blank" rel="noopener noreferrer">Zanahoria</a></li>
                            <li><a href="https://www.google.com/search?q=receta+de+espinaca&sxsrf=ALeKk02g6IZewRm3n67X0bPrzRXwI1EcDA%3A1624320949272&ei=tSvRYImOEOCKwbkP-sS16A0&oq=receta+de+espinaca&gs_lcp=Cgdnd3Mtd2l6EAMyAggAMgIIADICCAAyAggAMgIIADICCAAyAggAMgIIADICCAAyAggAOgcIABBHELADOgoILhCwAxBDEJMCOgcIABCwAxBDUPszWJhEYNtJaAJwAngAgAHwAYgBgwmSAQUwLjguMZgBAKABAaoBB2d3cy13aXrIAQrAAQE&sclient=gws-wiz&ved=0ahUKEwjJvLqJ-6nxAhVgRTABHXpiDd0Q4dUDCA4&uact=5" target="_blank" rel="noopener noreferrer">Espinaca</a></li>
                        </ol>
                    </ul>
                </div>
            </div>
        </div>
        <div class="clase">
            <h2>Contenido # 3</h2>
            <div class="clase__contenido">
                <div>
                    <h3>Tipos de imagenes</h3>
                </div>
                <div>
                    Existen dos tipos de imagenes en comportamiento con perdida y sin perdida Lossy/Lossless la cual debemos aprender a manejar para colocar las imaganes adecuadamente en la posicion que le corresponde a cada una <br> Lossless Son formatos sin perdidas eso quiere decir que la imagen no va perder calidad, el problema de ellas es que son imagenes muy pesadas <br> Lossy son formatos que pierden un poco la calidad pero son mucho mas livianas pero nos ayuda para la carga del navegador. <br> Vale recalcar que es normalmente tiene esa diferencia en su peso. pero la diferencia real entre estas dos es la CALIDAD.
                </div>
            </div>
            <div class="clase__contenido">
                <div>
                    <h3>Algunas imagenes</h3>
                </div>
                <div>
                    Gif es un lossless. <br>
                    Png-8 es un lossless. <br>
                    Png-24 es un lossless. <br>
                    Jpg/Jpeg es un lossy. <br>
                    Svg es un lossless/vector.
                </div>
            </div>     
            <div class="clase__contenido">
                <div>
                    <h3>Optimización de imagenes</h3>
                </div>
                <div>
                    Una imagen deberia de pesar alrededor de 70kb, paginas como Tiny PNG y verexif(quita metadatos) nos ayudan a optimizar estas imagenes para que la usemos en nuestra web.
                </div>
            </div>
            <div class="clase__contenido">
                <div>
                    <h3>Etiqueta imagen</h3>
                </div>
                <div>
                    <section>
                        <figure>
                            <img src="../img/Pequena.jpg" alt="Es una imagen de un portatil con codigo de programacion">
                            <figcaption>Es una imagen de un computador con codigo pequeña</figcaption>
                        </figure>
                        <figure>
                            <img src="../img/Mediana.jpg" alt="Es una imagen de un portatil con codigo de programacion">
                            <figcaption>Es una imagen de un computador con codigo mediana</figcaption>
                        </figure>
                        <figure>
                            <img src="../img/Grande.jpg" alt="Es una imagen de un portatil con codigo de programacion">
                            <figcaption>Es una imagen de un computador con codigo grande</figcaption>
                        </figure>
                    </section>    
                </div>
            </div>
            <div class="clase__contenido">
                <div>
                    <h3>Etiqueda imagenes</h3>
                </div>
                <div>
                    La etiqueta img para poder tratarla y manipularla en nuestro proyecto podemos meterla en un contenedor como figure (div se puede usar y algunos la usan pero es una mala semantica) con la etiqueta figure trae una etiqueta llamada figcaption
                </div>
            </div>
            <div class="clase__contenido">
                <div>
                    <h3>Etiqueda video</h3>
                </div>
                <div>
                    La etiqueta video para poder tratarla y manipularla en nuestro proyecto debemos ponerle el atributo de controls y de este modo tenemos los controles con preload="auto" esto nos ayuda a que el video empiece a renderizar al entrar a la web <br>entre las etiquetas de video se saca src para agregar la etiqueta source src="" para que el navegador "escoja" cual etiquta usar
                </div>
            </div>
            <div class="clase__contenido">
                <div>
                    <h3>Formularios</h3>
                </div>
                <div>
                    <form action="">
                        <label for="name">
                            <span>¿Cual es tu nombre?</span>
                            <input type="text" id="name" placeholder="Tu nombre">
                        </label>
                        <label for="age">
                            <span>¿Cual es tu edad?</span>
                            <input type="number" id="age" placeholder="Tu edad">
                        </label>
                        <label for="date">
                            <span>¿Cuando iniciaste en platzi?</span>
                            <input type="date" id="date">
                        </label>
                        <label for="time">
                            <span>¿Cuano tiempo estudias?</span>
                            <input type="time" id="time">
                        </label>
                    </form>
                </div>
            </div>
            <div class="clase__contenido">
                <div>
                    <h3>Calendario</h3>
                </div>
                <div>
                    <form action="">
                        <label for="hour">
                            <span>Hora</span>
                            <input type="time" id="hour" name="hour">
                        </label>
                        <label for="day">
                            <span>Dia</span>
                            <input type="date" id="day" name="day">
                        </label>
                        <label for="week">
                            <span>Semana</span>
                            <input type="week" id="week" name="week">
                        </label>
                        <label for="month">
                            <span>Mes</span>
                            <input type="month" id="month" name="month">
                        </label>
                        <input type="submit">
                    </form>
                    <h2>Calendario 2</h2>
                    <form action="">
                        <label for="calendario">
                            <span>Calendario</span>
                            <input type="datetime-local" name="calendario" id="calendario">
                        </label>
                        <input type="submit" >
                    </form>
                </div>
            </div>
            <div class="clase__contenido">
                <div>
                    <h3>Autocompletado y requerido</h3>
                </div>
                <div>
                    <form action="">
                        <label for="names">
                            <span>¿Cual es tu nombre?</span>
                            <input type="text" name="names" id="names" autocomplete="name" required>
                        </label>
                        <label for="emails">
                            <span>¿Cual es tu correo?</span>
                            <input type="email" name="emails" id="emails" autocomplete="email" required>
                        </label>
                        <label for="country">
                            <span>¿Cual es tu pais?</span>
                            <input type="text" name="country" id="county" autocomplete="country" required>
                        </label>
                        <label for="cp">
                            <span>¿Cual es tu codigo postal?</span>
                            <input type="text" name="cp" id="cp" autocomplete="postal-code" required>
                        </label>
                        <input type="submit">
                    </form>
                </div>
            </div>
            <div class="clase__contenido">
                <div>
                    <h3>Etiqueda select</h3>
                </div>
                <div>
                    <select name="cursos" id="">
                        <option value="JavaScrip">JavaScrip</option>
                        <option value="HTML5">HTML5</option>
                        <option value="CSS3">CSS3</option>
                        <option value="Web Standards">Web Standards</option>
                    </select>
                </div>
                <div>
                    <h3>Etiqueda Forma Correcta</h3>
                </div>
                <div>
                    <input list="cursos">
                    <datalist id="cursos">
                        <option value="JavaScrip"></option>
                        <option value="HTML5"></option>
                        <option value="CSS3"></option>
                        <option value="Web Standards"></option>
                    </datalist>
                </div>
            </div>
            <div class="clase__contenido">
                <div>
                    <h3>Botones</h3>
                </div>
                <div>
                    <input type="submit" value="Enviar">
                    <button type="submit">Enviar</button>
                    <p>utilizamos input principalmente para formularios y button para cual quier otra interacion que necesite un boton</p>
                </div>
            </div>

        </div>
    </main>
    <footer>

    </footer>
</body>
</html>

CSS

*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    color: #FFF5B7;
}
figure img{
    width: 100px;
    height: 100%;
}

div h2,div h3,div h4,div h5,div h6 {
    margin: 5px 0 10px 0;
    padding: 5px;
    color: #333;
}
.clase h2{
    color: #fff;
}

a:hover{
    color: #00EAD3;
}

a:active{
    color: #005F99;
}

.clase{
    background-color: #005F99;
    padding: 20px 15px;
    
}

.clase__contenido{
    background-color: #FF449F;
    padding: 15px;
    border: 2px solid #00EAD3;
    border-radius: 25px;
    margin-top: 15px;
}


.reto{
    background-color: #005F99;
    padding: 20px 15px;
}
.reto__contenido{
    background-color: #FF449F;
    padding: 15px;
    border: 2px solid #00EAD3;
    border-radius: 25px;
    margin-top: 15px;
}

.lista ul{
   list-style: none; 
   padding-top: 15px;
}

.lista li{
    list-style: none;
    margin-top:;
}
.lista li a {
    margin-left: 15px;
    text-decoration: none;
}

No es recomendable usar ID’s con frecuencia, porque so podría ocasionar problemas en nuestro código por problemas de especificidad.

Holas de nuevo, tengan cuidado en que etiqueta colocan la class para el CSS: yo me equivoque y coloque la class blog en la etiqueta <li> <li class="blog"><a href="">Blog</a></li> la forma adecuada es esta: <li><a href="" class="blog">Blog</a></li> de igual modo les comparto el CSS por si tienen fallos allí.

*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
h1{
    color: purple;
    font-family: serif;
    margin-bottom: 10px;
}
.title{
    font-size: 18px;
    font-family: monospace;
}
 .nav{
    margin-top: 10px;
    list-style-type: none;
    padding-left: 0px;
}
.nav li{
    display: inline-block;
}
.nav a{
    background: #13a4a4;
    color: white;
    border-radius: 2px;
    padding: 5px;
    text-decoration: none;
}
.nav .blog{
    background-color: tomato;
}

el mejor curso para la vida de develop

Bastante interesante y entendible, Muchas gracias Diego 👌

muy buena clase! me aclaro bastantes dudas

Porqué usar muchos ID en CSS es una mala Práctica