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

Funciones de las propiedades CSS más usadas

17/43

Lectura

width: Define el ancho de un elemento. Por ejemplo: width: 20px;.

height: Define el alto de un elemento. Por ejemplo: height: 20px;.


background: Puede definir el color de fondo o la url de fondo de un elemento. Por ejemplo: background: url(';puppy.png';);.

background-color: Define el color de fondo de un elemento. Por ejemplo: background-color: red;.

color: Define el color de nuestros textos. Estos colores los podemos escribir de 3 formas en CSS:

  • Con los nombres de los colores. Por ejemplo: black, red, green.
  • Sistema hexadecimal: Donde blanco se define como #FFFFFF y negro como #000000. Una página que me gusta mucho para sacar colores en hexadecimal es colorhunt.co.
  • RGB: Donde la R significa Red, G significa Green y B significa Blue; por lo que escribimos rgb(red, green, blue) y cada uno de ellos es un valor de 0 a 255 que describe la intensidad de ese color. Por ejemplo, para denotar el color verde, escribimos: rgb(0, 255, 0). También a estos valores se les puede agregar una opacidad (transparencia) que va de 0 a 1, por ejemplo: rgba(0, 255, 0, 0.5) lo que quiere decir que el color verde lo queremos con una transparencia del 50%.

border: Define el tamaño, estilo y color del borde de un elemento. Por ejemplo: border: 2px solid yellow;.

border-radius: Define qué tan redondeado quiero mi elemento. Por ejemplo: border-radius: 20px;.


margin: Define la margen de un elemento. Por ejemplo: margin: 2px (lo que quiere decir que mi elemento tendrá márgenes en todos sus lados de 2px).

Si quiero que mi elemento tenga margen superior de 2px, margen inferior de 4px, margen derecha de 3px y margen izquierda de 5px, lo escribiría de la siguiente forma: margin: 2px 3px 4px 5px. El primer valor es la margen superior y siempre va en sentido de las manecillas del reloj.

Si solo quiero que mi elemento tenga una margen a la derecha de 10px, escribiría margin-right: 10px;. Y para los demás valores sería margin-top: 10px; para la margen superior, margin-bottom: 10px; para la margen inferior y margin-left: 10px; para la margen izquierda.

padding: Define la distancia del borde de un elemento hasta su contenido. Por ejemplo: padding: 2px (lo que quiere decir que mi elemento tendrá un “margen interno” en todos sus lados de 2px).

Si quiero que mi elemento tenga padding superior de 2px, padding inferior de 4px, padding a la derecha de 3px y un padding a la izquierda de 5px, lo escribiría de la siguiente forma: padding: 2px 3px 4px 5px. El primer valor es la padding superior y siempre va en sentido de las manecillas del reloj al igual que con las márgenes.

Si solo quiero que mi elemento tenga un padding a la derecha de 10px, escribiría: padding-right: 10px;. Y para los demás valores sería padding-top: 10px; para la margen superior, padding-bottom: 10px; para la margen inferior y padding-left: 10px; para la margen izquierda.


font-size: Define el tamaño de la fuente. Por ejemplo: font-size: 20px;.

font-family: Define la familia tipográfica de la fuente. Por ejemplo: font-family: 'Roboto', sans-serif;.

Una página de fuentes que me gusta mucho es fonts.google.com.


opacity: Determina la transparencia del elemento. Tiene valores entre 0 y 1, que pueden verse como un porcentaje. Por ejemplo, si quiero que mi elemento se vea con una transparencia del 50%, escribiría: opacity: 0.5;.

outline: Un término algo desconocido es el esquema de los elementos HTML. Un esquema es una línea (por defecto, de color azúl) que se dibuja alrededor de los elementos que hace que se “destaquen”.

Lo anterior sucede mucho en elementos como los <input>s y los <button>s. Si no queremos ver esa línea, lo que hacemos es outline: none;. Aunque también podemos decirle que tenga determinado estilo, color, tamaño, entre otras. Por ejemplo:

outline-style: solid;
outline-color: red;
outline-width: 5px;

box-sizing: Cuando trabajamos con paddings, por ejemplo, veremos que el tamaño de nuestro elemento crece. Es decir, si tengo:

div {
   background: pink;
   width: 20px;
   height: 20px;
}

Y luego le agrego un padding de 20px, veré en el navegador que mi div ya no tiene un ancho y un alto de 20px, sino de 40px cada uno. Lo que quiere decir que el padding hizo que creciera mi elemento. Sin embargo, si yo no quiero que el padding afecte los 20px originales, le agrego la propiedad box-sizing para que el tamaño total del elemento incluya el padding también y no se vea afectado por él.


transition: Las transiciones CSS le permiten cambiar los valores de las propiedades sin problemas durante una duración determinada. Debemos tener presente que una transición NO es una animación. Una transición va de un punto A, a un punto B sin interrupciones o saltos en medio.

Te comparto la siguiente documentación para que puedas visualizar las propiedades y valores que puedes utilizar:

animation: Esta propiedad permite que animemos nuestros elementos.

Te comparto la siguiente documentación para que puedas visualizar las propiedades y valores que puedes utilizar:

Aportes 278

Preguntas 1

Ordenar por:

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

Yo agregaría:

Text.aling - Para centrar el texto (center, right, left, etc.)
list-style: none - Para quitar o modificar el símbolo de las viñetas en una lista
cursor: pointer - Para que el cursor aparezca para seleccionar.
background-size: cover - Modificar el tamaño del fondo, que sea de toda la pagina sin repetir.

Les dejo un link de un CSS CheatSheet interactiva
https://htmlcheatsheet.com/css/

Es necesario recordar que la propiedad box-sizing recibe el valor de border-box, quedaria de la siguiente manera.
box-sizing:border-box;

Comparto en versión editable para el que quiera hacer resúmenes:

Width: Define el ancho de un elemento.
Por ejemplo→ width: 20px;
Height: Define el alto de un elemento.
Por ejemplo → height: 20px;

Background: Puede definir el color de fondo o la url de fondo de un elemento.
Por ejemplo→ background: url(“puppy.png”);

Background-color: Define el color de fondo de un elemento.
background-color: red;

**Color: **Define el color de nuestros textos.

Estos colores los podemos escribir de 3 formas en CSS:

  • **Sistema hexadecimal: **Donde blanco se define como #FFFFFF y negro como #000000. Una página que me gusta mucho para sacar colores en hexadecimal es: https://colorhunt.com/.

  • Con los** nombres de los colores**, por ejemplo: black, red, green.

  • **RGB: **Donde la R significa Red, G significa Green y B significa Blue; por lo que escribimos rgb(red, green, blue) y cada uno de ellos es un valor de 0 a 255 que describe la intensidad de ese color. Por ejemplo, para denotar el color verde, escribimos: rgb(0, 255, 0).
    También a estos valores se les puede agregar una opacidad (transparencia) que va de 0 a 1, por ejemplo: rgba(0, 255, 0, 0.5) lo que quiere decir que el color verde lo queremos con una transparencia del 50%.

Border: Define el tamaño, estilo y color del borde de un elemento, por ejemplo:
border: 2px solid yellow;

Border-radius: Define qué tan redondeado quiero mi elemento,
Por ejemplo→ border-radius: 20px;
Margin: Define el margen de un elemento.
Por ejemplo→ margin: 2px;
Lo que quiere decir que mi elemento tendrá márgenes en todos sus lados de 2px.

Si por ejemplo quiero que mi elemento tenga margen superior de 2px, margen inferior de 4px, margen derecha de 3px y margen izquierda de 5px, lo escribiría de la siguiente forma:
margin: 2px 3px 4px 5px;
El primer valor es el margen superior y siempre va en sentido de las manecillas del reloj.

Ahora, si sólo quiero que mi elemento tenga una margen a la derecha de 10px, escribiría:
margin-right: 10px;
Y para los demás valores sería:
margin-top: 10px;
Para el margen superior.
margin-bottom: 10px;
Para la margen inferior.
margin-left: 10px;
Para la margen izquierda.

Padding: Define la distancia del borde de un elemento hasta su contenido.
Por ejemplo:
padding 2px;
Lo que quiere decir que mi elemento tendrá un “margen interno” en todos sus lados de 2px.

Si por ejemplo quiero que mi elemento tenga padding superior de 2px, padding inferior de 4px, padding a la derecha de 3px y un padding a la izquierda de 5px, lo escribiría de la siguiente forma:
padding: 2px 3px 4px 5px;
El primer valor es la padding superior y siempre va en sentido de las manecillas del reloj al igual que con las márgenes.

Ahora, si sólo quiero que mi elemento tenga un padding a la derecha de 10px, escribiría:
padding-right: 10px;

Y para los demás valores sería:
padding-top: 10px;
Para la margen superior.
padding-bottom: 10px;
Para la margen inferior
padding-left: 10px;
Para la margen izquierda

**Font-size: **Define el tamaño de la fuente.
Por ejemplo→font-size: 20px;

Font-family: Define la familia tipográfica de la fuente.
Por ejemplo→ font-family: ‘Roboto’, sans-serif;
Una página de fuentes que me gusta mucho es: https://fonts.google.com

Opacity: Determina la transparencia del elemento. Tiene valores entre 0 y 1, que pueden verse como un porcentaje.
Por ejemplo, si quiero que mi elemento se vea con una transparencia del 50%, escribiría:
opacity: 0.5;

Outline: Un término algo desconocido es el esquema de los elementos HTML. Un esquema es una línea (por defecto de color azúl) que se dibuja alrededor de los elementos que hace que “se destaquen”.
Lo anterior sucede mucho en elementos como los <input>s y los <button>s. Si no queremos ver esa línea, lo que hacemos es:
outline: none;

Aunque también podemos decirle que tenga determinado estilo, color, tamaño, entre otras.

Por ejemplo:
outline-style: solid;
outline-color: red;
outline-width: 5px;

**Box-Sizing: **Cuando trabajamos con paddings, por ejemplo, veremos que el tamaño de nuestro elemento crece. Es decir, si tengo:
div { background: pink; width: 20px; height: 20px; }

Y luego le agrego un padding de 20 px, veré en el navegador que mi div ya no tiene un ancho y un alto de 20px sino de 40px cada uno. Lo que quiere decir que el padding hizo que creciera mi elemento. Sin embargo, si yo no quiero que el padding afecte los 20px originales, le agrego la propiedad box-sizing para que el tamaño total del elemento incluya el padding también y no se vea afectado por él.

**Transition: **Las transiciones CSS le permiten cambiar los valores de las propiedades sin problemas durante una duración determinada.

Debemos tener presente que una transición NO es una animación. Una transición va de un punto A a un punto B sin interrupciones o saltos en medio.

Te comparto la siguiente documentación para que puedas visualizar las propiedades y valores que puedes utilizar:
https://www.w3schools.com/css/css3_transitions.asp

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

https://css-tricks.com/almanac/properties/t/transition/

Animation: Esta propiedad permite que animemos nuestros elementos.

Te comparto la siguiente documentación para que puedas visualizar las propiedades y valores que puedes utilizar:

https://www.w3schools.com/css/css3_animations.asp

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations

https://css-tricks.com/almanac/properties/a/animation/

Dejo página en español que me esta ayudando bastante a entender todo sobre CSS: https://lenguajecss.com

Ese de transition y animation son muy utiles , no los habia visto en el curso definitivo de html y css 😎

Si bien el sistema hexadecimal es el modo más utilizado en el mundo del desarrollo web, el sistema hsl es mucho más fácil de utilizar, ya que tenemos un control más intuitivo de los colores y sus distintas variaciones.

Más detalles en :

Recuerden que tenemos nuevos cursos para explicar esto más a detalle

Buena informacion , pero seria mas util si dejaran los links fuera de la imagen para poder acceder mas facil a ellos.

Seria bueno que los links se pudieran copiar, tanto esta lección como la anterior son imágenes y no se pueden copiar los links.

Les comparto una librería de animaciones en CSS que uso muchísimo:

animate.css

Es rápida y muy fácil de usar

Estaria cool un curso de animaciones con CSS aqui en Platzi 😎

En el ejemplo del texto “Y luego le agrego un padding de 20px, veré en el navegador que mi div ya no tiene un ancho y un alto de 20px, sino de 40px cada uno” Ese ancho y alto no deberían se de 60px? ya que no se especificó una dirección de padding y este se agrega tanto arriba y abajo como hacia los dos lados.

Qué les parece esto, super básico:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animacion</title>
</head>
<style>
    .example {
        width: 500px;
        height: 400px;
        background: #ffffdd;
        animation-name: example;
        animation-duration: 10s;
    }
    
    @keyframes example {
        0% {
            background: #cbeaed;
        }
        25% {
            background: #d3de32;
        }
        50% {
            background: #006a71;
        }
        100% {
            background: #ffffdd;
        }
    }
</style>

<body>
    <div class="example">

    </div>
</body>

</html>```

La documentación es muy buena pero si no se aplican los conceptos no se entenderá cuál es su uso real.


El outilne es como un border adicional que envuelve al border original.
Aquí hay un button:

El border de este button es:

  border: 5px solid blue;

Y el outline es:

  outline: 3px solid green;

El outline es el borde verde y el border es el borde azul.
Espero que les ayudado esto 😄

A lo que le dediqué una buena cantidad de tiempo fue la transición. Así que me vi en la obligación de crear un mini proyecto aplicando la mayoría de lo que hay en la documentación. 😄

h1, h2, h3{
    margin: 30px;
    text-align: center;
    font-size: 30px;
}

div{
    margin-top: 30px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
    display: block;
    border-width: 0px;
    border-style: solid;
}

#moreLenght{
    background-color: #A5FECB;
    width: 70px;
    height: 70px;
    transition: width 2s;    
}
#moreLenght:hover{
    width: 400px;
}

#bigSize{
    background-color:#20BDFF;
    width: 70px;
    height: 70px;
    transition: width 2s, height 2s;
}
#bigSize:hover{
    width: 180px;
    height: 180px;
}

#rotate{
    background-color:#5433FF;
    width: 70px;
    height: 70px;
    transition: width 2s, height 2s, transform 2s;
}
#rotate:hover{
    width: 180px;
    height: 180px;
    transform: rotate(180deg);
}```

Siempre pensé que la transición entraba dentro de la categoría de “animaciones”. Siempre se aprende algo nuevo, gracias platzi.

Y los videos explicando 😦 , me gusta la documentación pero ojala vinieran acompañadas de ejemplos

Creo que faltó aclarar que el OUTLINE no afecta el width ni el height, es decir las medidas finales del elemento y que si el Outline es de un color sólido se va a sobreponer a los elementos adyacentes si no hay suficiente margen. Más detalles en: https://www.w3schools.com/css/css_outline.asp

Con todo respeto, deberían abarcar estos temas tan importantes en el contenido y no mandarnos a ver links tras links, también observo que no profundizan mucho el cada contenido… se queda bastantes flojos en ejemplos…

CSS es más extenso de lo que pensaba

Al momento de desarrollar un producto, tengan cuidado con usar tipografías que no tengas derechos libre.
Puedes terminar pagando las licencias tipográficas, como helvetica, etc.
Les recomiendo la tipografí de IBM, nerd fonts, consola fonts, etc. Fonts open source

a mi me cuesta aprender las definiciones, pero con este resumen queda bien entendido los conceptos, además de que son descripciones cortas.

la propiedad outline es muy util si quieres dar estilos personalizados con border-radius a los botones o inputs 😄

https://www.w3schools.com/css/css3_animations.asp
Las animaciones son súper útilesssss!

Es poco practico que a los enlaces no se les pueda hacer clic.

En la propiedad box-sizing ¿a que se refiere que el padding no afecte el tamaño original? Es decir, esta propiedad tiene dos posibles valores: border-box y content-box; donde la primera permite tomar en cuenta borde, relleno(padding o margen interno) y contenido de la caja en el tamaño del elemento(caja/box) y content-box lo que hace es eliminar el valor que representa al contenido (width). La explicación que se da de afectación del elemento por el padding no me queda clara del todo. Gracias de antemano a los que puedan opinar.

Gracias a Dios por MDN, comparto más documentación que siempre es útil tener a la mano.
https://developer.mozilla.org/en-US/docs/Web/CSS

Siempre es bueno tenerlo a la mano y practicar mucho.

para los que quieran, este curso es excelente para animaciones web!
https://platzi.com/cursos/animaciones-web/

La implementación de animaciones o transiciones con css han sido supremamente simples, genial !!

muy buena información, siempre es de utilidad para la consulta.

Ahora recueren que hay un curso de animación con css 😄

Hola! tengo una pregunta, el outline, por más que resalte un elemento, no estaría incluido en el box-model verdad?

Con compartir un buen PDF sobre el tema se salteaban estas tres clases. 😦

Documentación😣
Soy más fan de lo practico

Siempre hay que tomarse un tiempo de leer un poco de documentación cada día

Mucho texto

awasome!!!

Que bien explicado está

Excelente

Exelente resumen

Muy buena documentación.

La propiedad animation es muy interesante y se pueden hacer cosas muy geniales con ella, les dejo el link de un vídeo de Leonidas Esteban donde explica como usarla, es muy interesante y pueden ver el repositorio del proyecto https://www.youtube.com/watch?v=2SMCZBBNjGg

Recomiendo la pagina https://www.w3schools.com/ para documentarse sobre HTML y CSS, hay muchos ejercicios y las explicaciónes son amigables y faciles de entender.

Encantado con este contenido!

Muchísimas gracias por este valioso aporte.

MUY BUEN APORTE MUCHAS GRACIAS

se agradece todo el material brindado

Para establecer un valor de border o padding distinto al resto se puede hacer algo como.

.elemento {
            margin: 20px;
            margin-bottom: 10px;
            padding: 20px;
            padding-left: 10px;
            /* propiedad: valor general */
            /* propiedad-sentido: valor especifico */

        }

Con esta clase al fin entendí lo de los colores con el rgba y del margin y el padding 🙃🙃🙃

w3school tiene toda una seccion de retos para que puedan practicar las lecciones ahi. Aqui les dejo los ejercicios. Son BUENISIMOS

https://www.w3schools.com/css/exercise.asp?filename=exercise_selectors1

Buenos aportes.

No conocía Outline y me cambió la vida.

Podemos expresar el Outline en una sola linea, tal como el border.

outline: 4px solid red;

Me encanto las nuevas herramientas de color tambien, que yo no conocía. Facilita mucho la elección de paleta de colores.

Excelente informacion!

Informacion muy util!

ERROR: en el ejemplo de background con url dentro del paréntesis comienza la ruta con un punto y coma. Eso a mi parecer daría error a no ser que el nombre de la imagen empezara con punto y coma, qué dicen?
background: url(’;puppy.png’😉;.

buen aporte el de transiciones y animaciones

Bua, amigos informcen bien sobre las animaciones y transiciones son super importantes

Funciones que aprendi y no sabia que exitian: opacidad:

tampoco sabi que extian funciones como

visibility:
que es muy diferente a display

Sigamos!

A practicar transitions y animations :3

Gracias por este gran aporte!!!

interesante la propiedad box-sizing: border-box;

Muchas gracias por el resumen de estas propiedades, mas adelante explicaran como hacer uso del transition y el animation? Gracias

excelente

Wao, lo último de animaciones está genial!

Gracias!

Interesante lista de propiedades, a practicarlas todas!

muy buen resumen gracias!!! me toco leer con detalle pero muy didactico…

El outline no me quedo tan claro

Lofi de fondo

Excelente Resumen!!

Que buenas funcionalidades que hay, son bastantes y muy llamativas!! me encanta 😃

wow no tenia idea que eso se podia hacer con CSS - animaciones y transiciones me refiero.
Buen aporte

Excelente…!

Muchas gracias por la lectura.

Excelente Informacion

Muchas gracias por la información, que bueno saber lo de las animaciones o:

Gracias querida profesora Estefany Aguilar.

Está buena la información, pero me esperaba algo más dinámico que esto, alguna infografía o capturas.

Curiosamente muchos de los frontend developer conocen estas cosas y aun que son buenos es recomendable tener las bases o almenos comprenderlas

Gracias

excelente

Con el border-radius pasa lo mismo se hace en orden de las manecillas del reloj para cada esquina de un cuadrado