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

Valores relativos y absolutos

15/43
Recursos

Los valores absolutos son, por ejemplo, cent铆metros, mil铆metros, pixeles y pulgadas. Se llaman de esta forma porque no tienen en cuenta a nadie m谩s, no depende de la medida de otra unidad.

Los valores relativas, llevan este nombre porque depende de otra unidad de medida o elemento. Por ejemplo, porcentajes, vmx, em, entre otros.

Recuerda que podemos darle estilos a etiquetas HTML muy espec铆ficas indicando d贸nde se van a encontrar. Por ejemplo: si queremos darle estilos 煤nicamente a la imagen que est谩 dentro del header, podemos usar el selector css header img { ... }.

No olvides resolver el desaf铆o: crear tu propio header con las etiquetas y estilos que m谩s te gusten para compartirlo en la secci贸n de discusiones.

Aportes 1244

Preguntas 63

Ordenar por:

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

Si le quieren poner gradientes
https://cssgradient.io/gradient-backgrounds/

La forma en que declaras la ruta no me parece 贸ptima, no se considera una buena pr谩ctica hacerlo de esa manera, ser铆a mejor, que dentro de la carpeta del proyecto crearas una carpeta img o no el nombre que le quieras dar y llamar la imagen desde esa ruta, tal vez lo haces por facilidad, pero yo creo que es mejor sentar las bases para adquirir buenas pr谩cticas a la hora de escribir c贸digo.

Aqui tienen el logo:

logo

HAY UN ERROR.
los pixeles no se pueden considerar actualmetne como unidades absolutas, ya que depende de la densidad de las pantallas.

Trate de hacer un prototipo de lo que se supone debe ser el proyecto de este curso, espero sus opiniones

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>馃ソHeader</title>
</head>
<script>
    function myFunction(){
        alert("Estas saliendo de la pagina")
    }
</script>
<style>
    body{
        margin: 0;
    }

    header{
        width: 100%;
        height: 80px;
        background-color: #21C08B;
        display: flex;
        justify-content: space-between;
    }
    header img{
        width: 200px;
        margin: 10px 0;
    }
    ul, li{
        list-style: none;
    }
    a{
        text-decoration: none;
        color: #FFF;
    }

    .nav-list{
        display: flex;
        align-items: center;
        margin: 20px;
    }
    .nav-item{
        margin: 8px 30px 0 30px;
        font-size: 17px;
        font-weight: 600;
        font-family: 'Lato';
        color: #FFF;
        background: transparent;
        border: 0;
    }

    section{
        background: linear-gradient(to bottom, #21C08B, #5e1dfc);
        width: 100%;
        height: 500px;
    }

    footer{
        background-color: #5e1dfc;
        width: 100%;
        height: 45px;
    }
</style>
<body>
    <header>
        <img src="https://raw.githubusercontent.com/platzi/PlatziVideo/feature/react/src/assets/static/logo-platzi-video-BW2.png">
        <div class="contenedor">
            <ul class="nav-list">
                <li class="nav-item"><a href="https://twitter.com/JuanFraKC" target="_blank" onclick="myFunction()">Contacto</a></li>
                <li class="nav-item">Acerca de</li>
                <li class="nav-item">Perfil</li>
            </ul>
        </div>
    </header>
    <section>
        
    </section>
    <footer>

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

Les recomiendo mucho el uso de Firefox developer edition

es un navegador para desarrolladores, adem谩s de que es bastante r谩pido y esta especializado para el uso y edici贸n de CSS, tiene herramientas muy 煤tilies y me parece muy sencillo de utilizar.

Medidas

Las medidas en CSS es lo que nos permitir谩 establecer tama帽os a fuentes, contenedores, iconos, im谩genes, etc茅tera鈥 Existen 2 tipos de medidas:

  1. Absolutas: Es una medida que no cambia en ning煤n momento, se usan los pixeles.
  2. Relativas: Son valores que s铆 cambian y son relativas a otros elementos.

Medidas EM

Em es un acr贸nimo de elemento y lo que hace es que toma el tama帽o de fuente de su padre directo. Si un parrafo est谩 encerrado en un div que tiene un tama帽o fuente de 16px, entonces:

1em 鈫 16px

2em 鈫 32px

1.5em 鈫 24px

No es de las mejores medidas porque puede generar conflicto entre medidas ya que siempre toma la de su padre m谩s cercano y esto puede cambiar el tama帽o de los elementos sin que nos demos cuenta.

Medidas REM

*La etiqueta HTML tiene 16px de fuente por defecto

REM hace referencia a la etiqueta root de nuestro archivo HTML, la cual es la etiqueta <html>. Por lo tanto 1rem siempre ser谩 igual a 16px a no ser que cambiemos el tama帽o de font-size del html. REM puede ser confuso de calcular y para esto existe un truco, el cual consiste en establecer el tama帽o de fuente del html en 62.5% de esta forma:

1rem 鈫 10px

1.6rem 鈫 16px

2rem 鈫 20px

Esto me ayudo bastante para saber posicionar bien el header

Un poco de humor 馃槀

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Header</title>
    <link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet">
</head>
<style>
    body{
        margin: 0px;
        background-color: #EDF2F4;
    }
    header{
        box-sizing: border-box;
        width: 100%;
        height: 80px;
        background-color: #B7A196;
    }
    header img {
        width: 100px;
        display: block;
        margin: auto;
        text-align: center;
        padding-top: 7px;
    }
    h1.stay-at-home {
        font-family: 'Anton', sans-serif;
        text-align: center;
        font-size: 150px;
        color: #373737;
    }
</style>
<body>
    <header>
        <img src="https://i.redd.it/t706olecrdu41.png" alt="Coffin Guys">
    </header>
    <h1 class="stay-at-home">STAY AT HOME <BR>OR DANCE WITH US</BR></h1>
</body>
</html>

Rayos, pense que iba profundizar mas en cada medida. Pero bueno ya es reto personal investigar y aprender cada una de ellas! 馃檶

Tips para optimizaci贸n de imagenes y as铆 contribuir a la carga r谩pida de nuestra p谩gina.

  • Tama帽o m谩ximo recomendado para una im谩gen: 70kb
  • Herramientas para optimizar im谩genes: Tiny PNG: Comprime el tama帽o de una imagen, para hacerla m谩s ligera
  • Verefix: Elimina los metadatos de una imagen, para reducir su tama帽o

Tambi茅n es muy recomendable hacer imagenes acorde al tama帽o que utilizaremos. por ejemplo el tama帽o del logo del header del ejemplo que muestra la profesora es mucho m谩s grande del que ella requer铆a y lo resolvi贸 con css pero hay un problema porque el navegador tardar谩 m谩s en descargar la imagen. Espero que les sirva estos peque帽os tips que aprend铆 en el curso definitivo de html y css ac谩 mismo en platzi. en la ruta de desarrollo web. chao.

(

Tratando de Imitar el nav de Youtube

Mi header (Inspirado en lo retro)

estoy trabajando en mi propio proyecto a la par de este curso, muy interesante

No olvidemos la buena practica de colocar una descripcion de la imagen:

<body>
    <header>
        <img src="https://raw.githubusercontent.com/platzi/PlatziVideo/feature/react/src/assets/static/logo-platzi-video-BW2.png"
            alt="Logo">
    </header>
</body>```

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">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/practica.css">
    <title>Document</title>
</head>
<body>
    <header>
        <img src="Imagenes/StarWars.png">
    </header>
    <nav>
        <img src="Imagenes/Opening-Credits.jpg">
    </nav>
</body>
</html>

Css

header
{
    background-color: #010101;
    width: 100%;
    height: 115px;
}
header img
{
    width: 200px;
    display: block;
    margin: auto;
}
nav
{
    background-color: #010101;
}
nav img
{
    display: block;
    margin: auto;
}

Este es un link donde amplia los temas de valores relativos y valores absolutos, teniendo en cuenta unidades de medida tales como pixeles, porcentajes entre otros.
https://franciscoamk.com/unidades-de-medida-en-css/

Utilice en esta link un generador de CSS gradient https://cssgradient.io

馃槃

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body{
        margin: 0px;
    }
    header{
        background-color: rgb(236, 16, 16);
        width: 100%;
        height: 130px;
        display: flex;
    }
    .corona{
        width: 150px;
    }
    .titulo{
        color: white;
        margin-top: 45px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
</style>

<body>
    <header>
        <img src="corona.png" alt="logo" class="corona">
        <h1 class="titulo">CORONA BYTES</h1>    
    </header>
</body>
</html>```

Esta sencilla pero me gusto mucho 鉂わ笍

My challenge:

Como costumbre suelo 鈥榝ormatear鈥 el documento

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

el * hace que se aplique a todo el documento.

Yo hice un header basandome en uno de mis videojuegos favoritos.

Aqu铆 dejo mi reto cumplido, les comparto esta herramienta que les ayudar谩 a generar gradientes: https://cssgradient.io/gradient-backgrounds/

Que tal si hago un clon de platzi para que freddy nos contrate?

![](``
<!DOCTYPE html>
<html lang =鈥渆n鈥>
<head>
<meta charset=鈥淯TF-8鈥>
<meta name=鈥渧iewport鈥 content= 鈥渨idth=device-width, initial-scale=1.0鈥>
<meta http-equiv=鈥淴-UA-Compatible鈥 content=鈥渋e-edge鈥>
<title>Header</title>
</head>
<style>
body {
margin: 0px;
}
header {
background-color: #7B738D;
background-image: linear-gradient(145deg, #7B738D 0%, #070212 180%);
width: 100%;
height: 100px;
}
header img {
width: 104px;
margin-top: 5px;
margin-left: 2px;
}
header h1 {
margin-top: -82px;
margin-left: 118px;
}
header h5 {
margin-top: -23px;
margin-left: 115px;
}
</style>
<body>
<header>
<img src=鈥淐:\Users\JAVIER\Pictures\Camera Roll\MARCA.png鈥 alt="">
<h1>SIDIZ</h1>
<h5>La Biblioteca Infinita</h5>
</header>
</body>
</html>```

As铆 me quedo mi reto.

les comparto mi c贸digo.
C贸digo CSS

C贸digo HTML.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Header Propio</title>
</head>
<style>  
    body {
        margin: 0px;
    }
    header {
        background-image: linear-gradient( #CE6571, #FC6C61);
        width: 100%;
        position: fixed;
        z-index: 100;
    }

    header img{
        width: 100px;
        margin-top: 10px;
    }

    nav {
    float: right; /* Desplazamos el nav hacia la izquierda */
    }
    
    nav ul {
    list-style: none;
    overflow: hidden; /* Limpiamos errores de float */
    }
    
    nav ul li {
    float: left;
    font-family: Helvetica, sans-serif;
    font-size: 16px;
    }
    
    nav ul li a {
    display: block; /* Convertimos los elementos a en elementos bloque para manipular el padding */
    padding: 20px;
    color: #fff;
    text-decoration: none;
    }
    
    nav ul li:hover {
    background: #F5BB4E;
    color: #fff;
    }
</style>
<body>  
    <header>
    <img src="https://i.pinimg.com/originals/96/83/11/968311b0646af4135d68b6dc7384fda3.png">
        <nav>
            <ul>
                <li><a>Inicio</a></li>
                <li><a>Productos</a></li>
                <li><a>Cursos</a></li>
                <li><a>Sobre nosotros</a></li>
                <li><a>Contacto</a></li>
            </ul>
        </nav>
    </header>
</body>
</html>

Como qued贸 con algunos detalles de transiciones y c贸digo: https://jsfiddle.net/giustozzi/5x4239ot/2/

C贸digo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Header</title>
</head>
<style>
    @import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
    body {
        margin: 0;
    }
    header {
        width: 100%;
        height: 64px;
        background-image: linear-gradient(72deg ,#21C08B, #198C66);
    }
    header img {
        display:block;
        width: 128px;
        margin: 12px 0px 12px 12px;
        float: left;
        transition: 0.3s;
    }
    header nav {
        font-family: 'Open Sans', sans-serif;
        font-size: 12px;
        text-transform: uppercase;
    }
    nav ul {
        float: right;
        height: auto;
        display: flex;
        list-style: none;
        margin: 24px;
    }
    nav ul li {
        width: 96px;
        text-align: center;
        display:block;
    }
    nav li a {
        color: white;
        line-height: 0;
        text-decoration: none;
        transition: 0.3s;
    }
    nav li a:hover {
        color: #D6F3E9;
        text-decoration: none;
    }
    header img:hover {
        width: 132px;
    }
</style>
<body>
    <header>
        <nav>
            <a href="#platzi-video"><img src="https://raw.githubusercontent.com/platzi/PlatziVideo/feature/react/src/assets/static/logo-platzi-video-BW2.png" alt="Platzi Vide"></a>
            <ul>
                <li><a href="#link1">Series</a></li>
                <li><a href="#link2">Pel铆culas</a></li>
                <li><a href="#link3">Estrenos</a></li>
            </ul>
        </nav>
    </header>
</body>
</html>

Interesante.

All铆 va mi header:


Cuando la profe agrega margin : 0; al body, es para quitar el margen obviamente.
Este margen es dado por que el navegador aplica sus propios estilos.

Comparto mi reto:

![](

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modelo Acad茅mico de las Naciones Unidas</title>
    <link rel="icon" type= "image/png" href="FaviconCepi.png"/>
</head>
<style>
    body {
        margin: 0;
    }
    header{
        background-color: black;
        width: 100%;
        height: 230px;
        margin-right: 100px;
        margin-left: 0;
    }
    header img {
        width: 200px;
        margin-top: 10px;
        margin-right: 50px;
        margin-left: 50px;
        margin-bottom: 10px; 
        padding-left: 25px;
        padding-right: 25px;            
    }
    h1 {
        margin-top: 89px;
        margin-right: 0px;
        margin-bottom: 89px;        
        position: fixed;
        color: white;
        font-style: italic;
        font-size: 45px;
        text-align: justify;
        align-items: flex-start;
        display: inline-block;
        }
</style>
<body>
    <header>
        <img src="Logo cepi blanco.png" height="210px" width="200" alt="">
         <h1>Centro de Estudios de Pol铆ticas Internacionales</h1>
    </header>
</body>
</html>```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reto2</title>
</head>
 <style>
body{
    margin: 0px;
}
 header {
    background-color: #85FFBD; background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);
    width: 100%;
    height: 80px;
 }
 header img {
    width: 70px;
    margin-top: 10px;
    margin-left: 10px;
 }

 </style>

<body>
    <header>
        <img src="logo2.png" alt="Logo de Pizza">
    </header>
</body>
</html>

Una duda: es necesario a帽adirle un 100% de ancho al header? Al ser un elemento de bloque ocupa por defecto el 100% del ancho, si no me equivoco

dejo el link para descargar el logo de platzi video en png ya que en los recursos de la clase ya no esta disponible :

https://imgur.com/gallery/tXDT5Io

Aqu铆 est谩 mi header 馃槃

Y aqu铆 el c贸digo :3

<!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>Header</title>
</head>
<style>
    body
    {
        margin: 0px;
    }
    header{
            width: 100%;
            height: 80px;
            background-color: #4455aa;
            background-image: linear-gradient(147deg, #4455aa 0%, #1cd2bf 40%, #000000 100%);
    }
    header img
    {
        width: 200px;
        margin-top: 10px;
        margin-left: 10px;
    }
</style>
<body>
    <header>
        <img src="./Imagenes Proyecto/logo-platzi-video.png" alt="">
    </header>
</body>
</html>

con un display flex al padre de img y align-items center alinean el brand en el centro del contenedor y asi no usan margin

馃榿

Juntando un poco lo visto en las clases

Practicando un poco!

A si quedo

este es el c贸digo:

Mi resultado.

C贸digo

Las **medidas absolutas ** siempre ser谩n fijas e invariables independientemente del tama帽o de cualquier elemento, en ellas podemos encontrar:

  • Cm: Centimetros

  • mm: Milimetros

  • px: Pixeles (1 pixel = 0,026 458 cm)

  • pc: Pica (1 pica es igual a 0,423 333 cm)

  • pt: Punto ( 1 punto es equivalente a 0,035 277 cm)

  • in: Incha (1 In es igual a 2,54 cm )

Qued茅 un poquito perdida, pues el video es sobre valores relativos y absolutos y no se habl贸 m谩s de 2 minutos del tema y tampoco hubo ejemplo que dejara las cosas claras.

este juego ayuda mucho para aprender display flex
https://flexboxfroggy.com/

Estoy viendo en paralelo este curso con el Definitivo de HTML y CSS y es increible, porque se pueden aplicar las buenas pr谩cticas dadas por el profesor Diego a este curso, y pues algunas pr谩cticas que hace la profesora Estefany no me parecen las mejores 馃槮 tal vez sea por facilidad, pero es mejor hacer las cosas bien para sentar unas buenas bases para el futuro y para lo que viene despu茅s de esto en platzi.

Ojo: No desmerito el trabajo de la profesora, solo que viendo el curso de Diego de Granda uno va con mejores bases a pesar de este ser un curso m谩s adelantado en la ruta.

Me puse a jugar con mi color favorito el azul les comparto el css para los que quieran juagar con los gradientes.

Mi header en este reto dandole un degradado.

Codigo:

![](

Muy cool!

comparto mi reto 馃槏

馃榾

como hizo la imagen de platzi? alg煤n software

![](

Quise hacer un nuevo logo y aplicar una rotaci贸n dentro del style para simular el original de Platzi. 馃挭

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>

    body{
        margin: 0px;
    }

    header{
        background-color: #550a46;
        width: 100%;
        height: 80px;
        
    }

    header img:nth-child(2n){
        background-color: #550a46;
        width: 9%;
        height: 80%;
        border-bottom: 8px solid #550a46;
        
    }
    header img:nth-child(2n+1){
        background-color: #9aceff;
        width: 10%;
        height: 80%;
        /*Apa帽o para que se pueda ajustar al height del header*/
        border-top: 8px solid #9aceff;
        border-bottom: 8px solid #9aceff;
        
    }

</style>
<body>
    <header>
        <img src="./platzi.png" alt="">
        <img src="./platzi.png" alt="">
        <img src="./platzi.png" alt="">
        <img src="./platzi.png" alt=""> 
        <img src="./platzi.png" alt=""> 
        <img src="./platzi.png" alt="">
        <img src="./platzi.png" alt="">
        <img src="./platzi.png" alt="">
        <img src="./platzi.png" alt=""> 
        <img src="./platzi.png" alt=""> 
            
    </header>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Platzi Video</title>
  <style>
    body {
      margin: 0px;
    }

    header {
      background-color: #E94F37;
      width: 100%;
      height: 80px;
    }

    header img {
      width: 200px;
      margin-top: 10px;
      margin-left: 10px;
    }
    
  </style>
</head>
<body>
  <header>
    <img src="./logo-platzi-video-BW2.png" alt="Logo Platzi Video"/>
  </header>
</body>
</html>

Aqui est谩 el mio, lo hice con mi logo personal, sorry platzi鈥

<!DOCTYPE html>
<html lang=鈥渆n鈥>
<head>
<meta charset=鈥淯TF-8鈥>
<meta name=鈥渧iewport鈥 content=鈥渨idth=device-width, initial-scale=1.0鈥>
<title>Document</title>
</head>
<style>
body{
margin: 0px;
}
header {
width: 100%;
height: 80px;
background-color:#333333;
}
header img {
height: 60px;
margin-top: 10px;
margin-left: 30px;
}
</style>
<body>
<header class=鈥渉ead鈥>
<img class=鈥渓ogo鈥 src=鈥渇ile:///Users/davidmontealegre/Documents/EstudioHTML/Assets/LogoID.png鈥>
</header>
</body>
</html>

La paleta de colores que use la encuentran aqui

Reto Cumplido!

Aqu铆 la documentaci贸n de referencia de CSS por Mozilla sobre las unidades de medida: https://developer.mozilla.org/es/docs/Learn/CSS/Building_blocks/Valores_y_unidades_CSS

Aqu铆 esta mi header, le agregue unos keyframes que hacen que el header cambie de color 馃槂

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    @keyframes example {
  0%   {left:red; left:0px; top:0px;}
  25%  {right:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
    body {
        margin: 0px;
    }
    header {
        animation-name: example;
        animation-duration: 4s;
        animation-delay: 2s;
        animation-timing-function: ease-in-out;
        background-color: #21C08B;
        width: 100%;
        height: 80px;
    }
    header img {
        width: 200px;
        margin: 5px;
    }
</style>
<body>
    <header>
        <img src="file:///Users/bruceaguilar/Desktop/curso%20frontend%20platzi/logo-platzi-video-BW2.png" alt="platzi">
        
    </header>
</body>
</html>```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>header</title>
    <style>
        body {
            margin: 0;
        }
        header {
            background-color: #faf4ff;
            border-bottom: 1px solid #844685;
            color: #10375c;
            width: 100%;
            height: 65px;
            display: flex;
            align-items: center;
        }
        header a {
            color: #10375c;
            display: flex;
            align-items: center;
            /* flex-flow: column; */
            margin-right: 15px;
            padding-right: 15px;
            text-decoration: none;
        }
        header img {
            width: 45px;
            margin-left: 10px;
            margin-right: 16px;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <header>
        <img src="https://pbs.twimg.com/profile_images/888092858405851137/NGb_8v2L_400x400.jpg" alt="patogalarzar">
        <a href="https://twitter.com/patogalarzar" alt="patogalarzar">馃惁 twitter</a>
        <a href="https://github.com/patogalarzar" alt="patogalarzar">馃悪 github</a>
        <a href="https://platzi.com/@patogalarzar/" alt="patogalarzar">馃吙锔 platzi</a>
    </header>
</body>
</html>

Listo!

Comenzando spotify video !!

Hola, les dejo los nuevos colores corporativos de Platzi 馃槄

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Header</title>
    </head>
    <style>
        body {
            margin: 0px;
        }

        header {
            background-color: #0779e4;
            width: 100%;
            height: 80px;
        }

        header img {
            width: 200px;
            margin-top: 8px;
            margin-left: 5px;
        }

    </style>
    <body>
        <header>
            <img src="logo-platzi-video.png" alt="Logo Platzi Video">
        </header>

    </body>

Hola!

Mi c贸digo:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
    <title>Ejemplo</title>
</head>

<style>
    body {
        margin: 0px;
        font-family: "Lato", sans-serif;
    }
    
    header {
        background: linear-gradient(to bottom right, #FF715B, #FFE066);
        height: 100vh;
        width: 100%;
        position: relative;
    }
    
    header img {
        margin-left: 10px;
        margin-top: 10px;
        width: 200px;
    }
    
    header span {
        color: white;
        font-size: 4rem;
        position: absolute;
        top: 40%;
        left: 30%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
</style>

<body>

    <header>
        <img src="logo-platzi-video-BW2.png">
        <span>Lorem ipsum dolor</span>
    </header>

</body>

</html>

Una muy buena herramienta de color es: https://color.adobe.com/

Solo agregu茅 un 鈥渂ot贸n鈥 para Iniciar Sesi贸n 馃槃

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    body {
      margin: 0px;
    }
    header {
      background-color: #21c08b;
      width: 100%;
      height: 80px;
    }
    header img {
      width: 200px;
      margin-top: 10px;
      margin-left: 10px;
    }
    header a {
      position: fixed;
      top: 25px;
      right: 20px;
      padding: 5px;
      border: 2px solid antiquewhite;
      font-size: 15px;
      font-family: Arial, Helvetica, sans-serif;
      color: antiquewhite;
    }
  </style>
  <body>
    <header>
      <img src="logo-platzi-video-BW2.png" alt="Logo Platzi Video" />
      <a href=""><strong>Iniciar Sesi贸n</strong></a>
    </header>
  </body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:[email protected]&display=swap" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>


<style>

  body{
      margin:0px;
  }

     header {
    width:100%;
    height:80px;
    background:#5E1DFC;
    }

    .logo{
    font-family: 'Noto Sans JP', sans-serif;
    color:#FFFFFF;
    margin:0px;
    padding-top:10px;
    padding-left:20px;

    }

</style>
<body>
<header>
<h1 class=logo>Logo</h1>
</header>
</body>
</html>