Qué aprenderás sobre HTML y CSS1

Existen tres estándares importantes para generar productos web. Estos son los lenguajes o estándares
que entiende todo navegador web:

 HTML

 CSS

 JavaScript

HTML

Estructura de los documentos que se visualizan en los navegadores (Chrome, Edge, Firefox, Safari,
Opera, entre otros). Es el lenguaje con el que clasificamos o etiquetamos cada parte del documento,
dejándole saber al navegador qué información va a visualizar y qué valor tiene para nosotros. De esa
manera, presentamos: Barras de Navegación, Secciones, artículos, listas, títulos de diferentes tamaños,
audios, videos, imágenes, entre otros.

CSS

Es el lenguaje con el que le damos estilos a todo el contenido previamente etiquetado con HTML. Es el
encargado o usado para darle todo el aspecto visual de manera profesional, usando estándares de
diseño de documentos y logrando así la correcta visualización de textos y recursos audiovisuales en
formatos digitales o, en nuestro caso, las páginas web.

JavaScript

Es lenguaje que se emplea para crear o brindar a las páginas web la capacidad de interactuar con el
usuario y los recursos asociados a una página web, como lo son: bases de datos, servidores de diversa
índole, información derivada de la interacción de cada página en sí.

Diferencias entre HTML, CSS y JavaScript

 HTML es la estructura, como si fuese el esqueleto de un ser humano o los cimientos de un

edificio. Por ejemplo: una página web que funciona, pero sin interactividad, colores ni diseño.

 CSS corresponde a lo estético, como la piel de ser humanos. La pintura y adornos de los edificios
o la manera en que es posible que la estructura del html se vea mejor para los usuarios.

 JavaScript equivale a los músculos, lo que da esa interactividad a las personas para moverse y
realizar acciones como correr.

¿Qué es el Frontend?2
Frontend es la parte de un programa o dispositivo a la que un usuario puede acceder directamente. Son
todas las tecnologías de diseño y desarrollo web que corren en el navegador y que se encargan de la
interactividad con los usuarios.
Un programador Frontend debe saber de código que entienda el navegador (HTML, CSS y JavaScript)
para poder usar algunos frameworks o librerías que expanden sus capacidades para crear cualquier tipo
de interfaces de usuarios. React, Redux, Angular, Bootstrap, Foundation, LESS, Sass, Stylus y PostCSS son
algunos de ellos.

Herramientas que maneja un frontend

Debido a que un frontend es el desarrollador que va a manejar las cosas del lado del cliente, las
tecnologías con las que va a trabajar son:

 HTML: https://devdocs.io/html/

 CSS: https://devdocs.io/css/
JavaScript: https://devdocs.io/javascript/

Frameworks de CSS para frontend:

 Bootstrap: https://getbootstrap.com/

 Foundation CSS: https://get.foundation/

 Materialize CSS: https://materializecss.com/

Los frameworks de JavaScript para frontend:

 React JS: https://es.reactjs.org/

 Angular JS: https://angular.io/

 Vue JS: https://vuejs.org/

Preprocesadores de CSS:

 Stylus: https://stylus-lang.com/

 SASS: https://sass-lang.com/

Compiladores / empaquetadores de JS:

 BABEL: https://babeljs.io/

 Webpack: https://webpack.js.org/

Perfiles de un Web Developer

1. Front-end: Es alguien que se dedica al desarrollo en el lado del cliente, estas pueden ser las
interacción que tienes en una página web, las animaciones y los estilos son cosas que suceden
en el cliente.
Los Front-end utilizan las tecnologías de HTML, CSS y JS, que son estándares que entiende el
navegador.
También utilizan Frameworks de CSS, lo cual nos puede facilitar fragmentos de CSS ya
construidos para que podamos agregarlos a nuestros sitios web! ¡Es una ayuda para acortar
tiempos de desarrollo!
 Y espera! También tenemos los Frameworks y librerías de JS, los cuales nos permitirán construir
productos que puedan escalar más rápido y que tengan una interacción mayor.
Y por si fuera poco. Tenemos los Preprocesadores de CSS, podríamos decir que es CSS con super
poderes!
Para terminar tenemos compiladores / empaquetadores de JS como Babel y Webpack

¿Qué es Backend?3
Backend en programación corresponde al lado opuesto a un Front-end en un sitio web o aplicación, ya
que el Backend trabaja en el lado del servidor, mientras el Frontend lo hace en el lado del cliente. Es el
responsable de manejar toda la lógica que hay detrás de una petición dada por el navegador hacia el
servidor.

Una característica que lo diferencia del Frontend es que no tiene estándares, puesto que tiene varios
lenguajes de programación (Node.js, Python, PHP, Ruby, GO, Java, .NET entre otros) con los que debe
trabajar. Cada uno de estos lenguajes tiene sus propios frameworks como:

 Django (Python)

 Lavarel (PHP)

 Rails (Ruby)

 Express (JavaScript)

 Spring (Java)

El Backend también tiene en cuenta la infraestructura donde va a realizarse el deploy de su aplicación

(esto también puede ser tarea de un DevOps, un perfil dedicado a la infraestructura), con tecnologías
como:

 Google Cloud

 DigitalOcean

 AWS

 Heroku, entre otras.

¿Qué es deploy?

Deploy es un término famoso entre los desarrolladores web. Puede significar muchas cosas,
dependiendo del ambiente y de la tecnología usada. Sin embargo, los significados que más se refieren a
la práctica y pueden resumir su función son: implantar, colocar en posición, habilitar para uso o,
simplemente, publicar.

Por último, entramos en bases de datos, que son las encargadas de almacenar toda la información del
proyecto. Los principales tipos son:

 Bases de datos relacionales (como MySQL)

 Bases de datos no relacionales (como mongoDB).

¿Qué significa la palabra DEPLOY?:
Deploy es un término famoso entre los desarrolladores web. Puede significar muchas cosas,
dependiendo del ambiente y de la tecnología usada. Sin embargo, los significados que más se refieren a
la práctica y pueden resumir su función son: implantar, colocar en posición, habilitar para uso o,
simplemente, publicar.
Imagina que has creado un sitio web en tu computador, y lo has dejado estático sin publicar. En el
momento en que incorporas tu página a un servidor de web hosting, este proceso será considerado un
deploy.

¿Qué es FullStack?4
Fullstack es un término utilizado para describir a los desarrolladores que conocen tanto los lenguajes de
frontend como de backend. Principalmente, el desarrollo full stack se refiere al uso de JavaScript en el
backend y de HTML/CSS/JavaScript en el frontend.

El nacimiento de tecnologías que funcionan entre el front-end y el back-end ha dado lugar a la

proliferación de frameworks y herramientas de desarrollo “full stack”, que permiten a los
desarrolladores construir sus propias aplicaciones web completas utilizando un solo lenguaje de
programación, como Ruby on Rails o Django para Python.

Qué es un desarrollador fullstack

Los desarrolladores fullstack son profesionales que se encargan tanto de la parte visual y de interacción
de un sitio (frontend), como de su lógica y funcionamiento del lado del servidor (backend). Un stack (en
inglés: pila o montón) hace referencia al grupo de tecnologías que componen un sitio web en todos sus
aspectos (desde la base de datos, hacia el manejo lógico y la interfaz visual). Un desarrollador fullstack
en teoría es capaz de manejar la pila completa de un sitio y por ende entiende de tecnologías tanto de
frontend como de backend, además del manejo de su base de datos.

Ventajas de un desarrollador o desarrolladora Fullstack

El beneficio para el proyecto de alguien fullstack es que entiende muy bien cómo funciona un producto
web de principio a fin, desde su diseño en mockup y deploy hasta producción.

Desventajas de ser desarrollador Fullstack

Un fullstack no maneja por completo todas las tecnologías de ambas partes, pues cada una requiere
conocimiento profundo. De hecho, no es recomendado y no es sano. El desarrollo web evoluciona muy
rápido y cada dos o tres meses tenemos algo nuevo, tanto en backend como en frontend.

Páginas Estáticas vs. Dinámicas5

Los sitios web se comportan de forma diferente dependiendo de la forma en que fueron diseñados
desde su concepción, tomando en cuenta la interacción con el usuario. Aquí veremos las diferencias
entre sitios web estáticos y dinámicos:
Sitos Web Estáticos

La información que contiene se mantiene constante y estática. No se actualiza con la interacción del
usuario. Es conveniente para realizar landing pages (páginas informativas o de aterrizaje) o blogs. Se
mostrarán siempre iguales para todos los usuarios.

Sitios Web Dinámicos

También conocidos como aplicaciones web, actualizan su información con respecto a la interacción del
usuario. Dependen de una base de datos, de donde extrae e ingresa información. Serán diferentes,
dependiendo del usuario que la use y la información que se ingrese.

Ejemplo de páginas estáticas:

 Menú de un restaurante

 Blog de viajes

 Página informativa de un negocio

Ejemplo páginas dinámicas:

 Sistema de reporte de ventas

 Linkedin

 Banca en línea

HTML: anatomía de una página web6

HTML (HyperText Markup Language) es un lenguaje de marcado de texto. Se utiliza para darle una
estructura al sitio web que estás visitando.

Estructura básica de HTML en una página Web

 Container: contenedor principal

 Header: cabecera de la página. Aquí usualmente encuentras el logo y el menú de navegación del
sitio.

 Main content: estructura principal. Por ejemplo, el feed o lista de publicaciones de una red
social.

 Sidebar: contenido secundario de una página, que usualmente se encuentra a los lados del
contenido principal (o main).

 Footer: pie de página. Esto se encuentra al fondo del sitio web, salvo en casos de sitios web
donde el scroll (o navegación hacia abajo) es infinito, por ende, no tendría sentido ponerlo al
fondo.

Las etiquetas en HTML nos ayudan a diferenciar en qué parte del contenido nos encontramos.

La web se conforma de tres conceptos:

  URL: Uniform Resource Locator. El identificador único del sitio en el navegador (por
ejemplo: https://platzi.com).

 HTTP: Protocolo de transferencia de hipertexto. Es el estándar que se utiliza para enviar datos a
través de paquetes entre el cliente y el servidor.

 HTML: es el código que se emplea para estructurar el contenido de tu web, y darle sentido y
propósito.

HTML son siglas que corresponden a Hyper Text Markup Language (Lenguaje de Marcado de
Hipertexto).

 Hyper Text significa que el texto tiene interactividad, conexión con otros documentos.

 Markup significa que le pone etiquetas a los elementos. Por eso también se le conoce como un
lenguaje de etiquetas.
HTML es un lenguaje interpretado. Además, HTML es un estándar, así que no importa desde qué
navegador o dispositivo se ejecute, el código sigue siendo el mismo en cualquier sitio.

Index y su estructura básica: head7

Tu primer archivo html siempre tiene que llamarse index.html. Index va ser nuestra pagina inicial que el
servidor va a buscar al momento que tenga que abrir un proyecto. Si esta pagina no existe nosotros
tendríamos que decirle al servidor cual es la pagina que tiene que tomar en cuenta como que es su
página de inicio.
Vamos a generar una línea de código que le va a decir al navegador que el código que está leyendo es
html5 y esta es la línea de <!DOCTYPE html>, esta línea le dice al navegador todo lo que viene aquí es
html5 así que entiende todas las etiquetas por html5. Existen etiquetas que se auto cierran.
Después tenemos que hacer un contenedor principal al que se le conoce como contenedor padre que es
<html Lang=”es”></html>, este contenedor va a llevar todas las etiquetas que tengamos en nuestro
proyecto y este lleva un atributo especial que se llama lang=”es”, que es lo que le dice al navegador cual
es el lenguaje que tiene este proyecto ya sea inglés, español, etc.
Generaremos dos contenedores más, <head></head> y <body></body>. Estas dos etiquetas son
contenedores hermanos, en la etiqueta head va a ir todo lo que es importante para el navegador para
poder cargar el proyecto de la forma en la que nosotros lo construimos pero que no es visual para el
usuario final. Esto quiere decir todas las dependencias, algunas librerías externas, por ejemplo, las
fuentes, nuestro CSS tienen que ir ligados en el head, aquí es donde los vamos a mandar a llamar.
El usuario va a ver todo lo que esta adentro del body, va a ir todo el texto, todas las imágenes, todos los
videos, todas estas cosas interactivas que va a tener el proyecto con el usuario va ir a dentro de el body.
En el head colocamos la etiqueta meta, esta etiqueta le va a dar cierta información al navegador para
que sepa como tratar nuestro proyecto. Esta etiqueta se cierra sola. Esta etiqueta va a llevar un atributo
que se llama charset, que va a llevar un valor que es UTF-8, que nos va a ayudar para que el navegador
pueda entender caracteres especiales (ñ, ü, acentos, etc)
<meta charset=“UTF-8” />

Otro meta que vamos a utilizar es el meta name description, esta parte del description es importante y
esto nos va a ayudar, es parte de SEO, porque nos va a ayudar a que el navegador ayude a que cuando la
gente busque cierta información en internet en la descripción que tengamos en nuestra pagina pueda
salir esa información. Por ejemplo, podemos ponerle tipo content que es qué tipo de descripción
queremos poner y nosotros podemos poner la descripción de nuestra página. Por ejemplo, si ponemos
“Esta pagina te mostrara fotos de gatos” y si lo guardas es justo lo que te va a salir en la descripción
cuando vayas a Google y busques la página.
<meta name=“description” content=“Esta página te mostrara fotos de gatos” />

Tenemos otro meta, nos va a ayudar para la parte de los robots de posicionamiento de los navegadores,
es decir cuando tu estas utilizando Google y estás haciendo una búsqueda si pones js o si pones
aprendizaje en línea hay ciertos robots que nos ayudan a posicionar las paginas que tenga que ver con
relación a esto, y nosotros podemos decirle a nuestro proyecto que le autorizamos a los robots poder
ayudarnos a acomodar nuestra pagina para ese tipo de búsquedas, ese meta se va a llamar meta name
robots, hablamos de muchos porque no solo existe el robot de Google existen otros buscadores en otro
tipo de navegadores que podemos utilizar para poder hacer búsquedas específicas. Es decirles a todos
los robots de los buscadores que estamos autorizando que puedan ayudar a colocar nuestra página con
relación a la búsqueda que se hace. La forma de autorizarle es content index, follow. Quiere decir que
en nuestro index tienes autorización de poder ayudarme a colocar nuestra pagina si hay alguna
búsqueda que tenga que ver con nuestro contenido, esto es importante, si no queremos que esto salga
se le pone un unfollow para que el robot no siga nuestro index.
<meta name=“robots” content=“index, follow” />

Tenemos otro atributo que se llama title, es importante porque cuando vamos al navegador y entramos
a una página, en la parte de arriba podemos ver el titulo de ese proyecto, ese titulo se coloca con el title.
<title>Es mi página</title>

Tenemos otro meta, es muy importante para los proyectos que son responsive y actualmente todos los
proyectos que tu hagas, todos los proyectos web tienen que ser 100% responsive, este meta es <meta
name=””viewport”/>, viewport es simplemente el tamaño de la pantalla, es el widht de la pantalla
completa y en la parte de content le vamos a decir al navegador que queremos que el widht sea igual a
device-widht, initial-scale=1.0, es importante cuando inicies un proyecto ese meta exista, ya que nos va
a ayudar a que si el proyecto se abre desde una pagina web pueda escalarse un poco el texto de las
imágenes y la gente pueda verlo mejor desde un dispositivo mobile, si no tenemos esta línea y abrimos
nuestra pagina en un dispositivo mobile se va a ver una letra muy chiquita y vamos a tener que darle
zoom, esa es una super mala experiencia para el usuario.
<meta name=“viewport” content=“widht=device-widht, initial-scale=1.0” />

Existen otras etiquetas que utilizamos para poder agregar el CSS, esa etiqueta se llama link, link va a
tener dos atributos, el rel que le va a decir que el documento que va a cargar es una hoja de estilos y
href que significa la referencia, en donde se encuentra ese documento, le ponemos la ruta. De esta
forma ya tengo mi hoja de estilo incorporada a mi index.
<link rel=“stylesheet” href="./css/style.css" />

Index y su estructura básica: body8

body es la etiqueta que identifica la parte visible de nuestro sitio web. Dentro del body, se añadirán las
etiquetas para marcar los elementos visuales del sitio web, como logotipo, menús de navegación,
contenido principal, entre otrs. Es muy importante usar HTML semántico y no llenar todo de <div> para
que nuestro sitio sea mejor interpretado por el navegador y, por lo tanto, más accesible.

Etiquetas del cuerpo del documento (body):

 article: diferencia partes del contenido que pueden vivir por sí mismas.

 nav: para hacer menús de navegación.

 aside: contenido menos relevante, como publicidad, etc.

 section: sirve para diferenciar las secciones principales del contenido.

 header: cabecera del documento.

 footer: pie de página del documento.

 h1 - h6: títulos de nuestro sitio web.

 table: tablas de contenidos, similar a la estructura de las hojas de calculo.

 ul y ol: listas de items.

 div: cualquier división para organizar el contenido.

 h1 a h6: son etiquetas para indicar títulos con un estilo que destaca del resto.

 article: es la parte de nuestro contenido que puede vivir por sí mismo. Pueden haber tantos
artícle como proyectos o eventos tenga nuestro portafolio.

 p: define el texto de un párrafo.

 small: aplica una apariencia de texto reducido en tamaño.

 strong: aplica al texto un formato de negritas.

 a: corresponde a un ancla o enlace a una url interna o externa del documento.

 img: con esta etiqueta podemos enlazar imágenes en el documento.

 figure: le da un contexto semántico a las imágenes.

Anatomía de una etiqueta de HTML10

Una etiqueta HTML puede tener tantos atributos como desees, y cada atributo tiene su propia función.
En el siguiente ejemplo, veremos la forma en la que se compone una etiqueta HTML:

 No todas las etiquetas llevan una etiqueta de cierre. Las que llevan un cierre son aquellas que
albergan un contenido que nos dice a dónde nos va a llevar (nombre de la página, nombre del
link).
  Lo que va dentro de la etiqueta de apertura es un atributo (nombre del atributo = href y el valor
del atributo es la url).

 El contenido + la etiqueta = Elemento

Tipos de imágenes11
Las imágenes representan una pieza fundamental al momento de mostrar contenido para web. Aquí
conoceremos los principales tipos de imágenes web y sus formatos.

Tipos de imágenes para web

Lossless (sin pérdida):

 Capturan todos los datos del archivo original.

 No se pierde nada del archivo original.

 Puede comprimirse, pero podrá reconstruir su imagen al estado original

Lossy (con pérdida):

 Se aproximan a su imagen original.

 Podría reducir la cantidad de colores en su imagen o analizar la imagen en busca de datos

innecesarios.

 Por consiguiente puede reducir su tamaño, lo que mejora el tiempo de carga de la página, pero
pierde su calidad.

 Los archivos tipo lossy son mucho más livianos que los archivos tipo lossless, por lo que son
ideales para usar en sitios en donde el tamaño del archivo y la velocidad de descarga son
importantes.

Formatos de imagen para web

 GIF (Graphics Interchange Format): Formato de imagen sin pérdida, no se puede comprimir

 PNG 8 (Portable Network Graphics): Formato de imagen sin pérdida, uso de colores de 256, se
utiliza para logotipos e iconos para la página.

 PNG 24 (Portable Network Graphics): Formato de imagen sin pérdida, utilización de colores
ilimitados, alta calidad, si intentamos comprimir no ayudará demasiado por la gran cantidad de
colores.

 JPG / JPEG (Photographic Experts Group): Formato de imagen con pérdida, perdemos calidad a
la hora de comprimirlas, pero llegan a ser óptimas para la carga en la página web.

 SVG - Vector (Scalable Vector Graphics): Formato de imagen muy ligero sin pérdida, con svg no
perdemos calidad, ya que está compuesta por vectores.
  WebP: Es un formato gráfico en forma de contenedor que sustenta tanto compresión con
pérdida como sin ella. Fue desarrollado por Google.

Optimización de imágenes12
El tamaño optimo para cargar una imagen debe pesar 70kb o menos, entre mas pesada sea la
imagen, mas tardara en cargar la imagen
mejora el tamaño de la imagen
https://tinypng.com/
retira meta data “de los teléfonos mayor mente cuando tomamos una fotos se quedan anclado metas
datos donde guarda, la hora, el día que se tomó etc”

https://www.verexif.com/

Etiqueta img13
El elemento HTML <img> incrusta una imagen dentro de un documento. A continuación, veremos cómo
funciona.

La etiqueta <img> va siempre dentro del contenedor <body>, pues es un elemento visible.

Funcionamiento de la etiqueta alt:

<img src=“ubicación de la imagen” alt=“descripción de la imagen”>

Con esta misma estructura, podemos utilizar el siguiente ejemplo de un estudiante cansado:

<img src=“https://www.ipp.edu.pe/blog/wp-content/uploads/2020/05/shutterstock_1489158410.jpg”
alt=“estudiante cansado”>

Al añadir el código que acabamos de crear a un documento, la imagen que se mostrará en el navegador
es la siguiente:

Atributos de la etiqueta img

La etiqueta img cuenta con dos atributos, el atributo “src” y el segundo atributo es “alt”. Ambos son
importantes.

El atributo de “src” es para mostrar en dónde se encuentra la imagen que vamos a incrustar. Las
imágenes se pueden obtener de alguna carpeta o una URL que obtengamos de internet.

 En caso de que el nombre de tu imagen lleve algún espacio, deberás sustituir ese espacio con un
guion o guion medio. Caso contrario, el navegador no podrá reconocer la ubicación.

alt sirve para agregar una descripción a nuestra imagen. Esto es útil por cuestiones de SEO y también
para accesibilidad (por ejemplo para personas con visión reducida).
  <img/>, a diferencia de la gran mayoría de las demás etiquetas de HMTL, no necesita una
etiqueta de cierre.

Etiqueta figure14
Figure <figure><img /> </figure> es una etiqueta que permite almacenar una imagen en su interior. Es
una mejor práctica comparada con usar solamente un contenedor div. Como complemento al
contenedor figure, se utiliza la etiqueta figcaption <figcaption></figcaption>, que permite darle una
pequeña descripción a la imagen, como el autor, fuente o algo por el estilo, que se mostrará usualmente
abajo de la imagen.

Figcaption se diferencia del atributo Alt porque esta última muestra su descripción en texto en el

navegador solamente al pasar el mouse por encima de la imagen (de ahí su utilidad para personas con
discapacidad visual).

Es importante considerar que la etiqueta figure no es únicamente para imágenes:

El elemento HTML <figure> representa contenido independiente, a menudo con un título. Por lo
general, se trata de una imagen, una ilustración, un diagrama, un fragmento de código, o un esquema al
que se hace referencia en el texto principal, pero que se puede mover a otra página o a un apéndice sin
que afecte al flujo principal.

Etiqueta video16
La etiqueta <video>, tiene algunos atributos como:
.

1. controls: agrega al video los controles necesarios para reproducir, pausar y adelantar.

2. preload = auto: hace que el navegador descargue el video, en el momento en el que se acceda a

la página.

.
La etiqueta <source>, se puede colocar dentro de una etiqueta <video> varias veces, para especificar
diferentes rutas. Esto para asegurar que cualquier navegador pueda mostrar el video.

Etiqueta form e input17

Resumen

- <Form>; Es una etiqueta fundamentalmente para tener una mejor semántica.

**- <Label>; Etiqueta que representa la interfaz del usuario.

 for=" "; Permite asociar un control, en el se le dará un nombre personalizado

 <Input>; Elemento donde el usuario da sus datos para el formulario.

 type=“text”; Se aclara que los datos serán tipos textos (por ejemplo, nombre y apellido).
  type=“date”; Da una apariencia diferente al input más un calendario donde el usuario podrá
poner una fecha mediante los números o facilitándose llenarlo con ayuda del calendario.

 type=“time”; También da una apariencia diferente pero para un horario.

 id=" "; Se le da un nombre (por así decirlo) al elemento para poder asociarlo junto al mismo
nombre que el label en el que se le da al atributo de valor de for.

 <span>; Es para aplicar estilo al texto o agrupación de elementos. Lo que haría en si es que se
colocará arriba o abajo (dependiendo donde lo pongas en el editor de código) donde obtendrá
un texto.

Calendario17
1. Seleccionas la parte que quieres copiar, luego con SHIFT + ALT + FLECHA ABAJO copias
todo abajo, presiona la flecha segun cuantas copias quieras realizar.
2. Selecciona una palabra y con CTRL+D seleccionas la siguiente igual y sucesivamente,
luego escribe lo que necesites.
3. Con ALT+CLICK puedes crear multicursores, manten presionado ALT y da click donde
desees el otro cursor.

Autocomplete y require18
 El atributo autocomplete = “tipo-del-input” hace que el navegador auto-complete los
formularios, según el tipo de input. El atributo se coloca en la etiqueta <input>.
 El atributo require, evita que se envíe información del formulario, si el input está vacío.
El atributo se coloca en la etiqueta <input>.
Valores autocomplete:
- “off”:
El navegador no puede ingresar o seleccionar automáticamente un valor para este campo. Es
posible que el documento o la aplicación proporcione su propia función de autocompletar, o
que los problemas de seguridad requieran que el valor del campo no se ingrese
automáticamente.
- “on”:
El navegador puede completar automáticamente la entrada. No se proporciona ninguna
orientación sobre el tipo de datos que se esperan en el campo, por lo que el navegador puede
usar su propio criterio.
- “name”:
El campo espera que el valor sea el nombre completo de una persona. Generalmente se
prefiere usar “nombre” en lugar de dividir el nombre en sus componentes porque evita tratar
con la amplia diversidad de nombres humanos y cómo están estructurados; sin embargo, puede
usar los siguientes valores de autocompletar si necesita dividir el nombre en sus componentes:
1. "honorific-prefix"
Prefijo tipo “Mrs.”, “Mr.”, “Miss”, “Ms.”, “Dr.”, or “Mlle.”.
2. "given-name"
Primer nombre (first name)
3. "additional-name"
Segundo nombre (middle name)
4. "family-name"
Apellido (last name)
5. "honorific-suffix"
Sufijo tipo “Jr.”, “B.Sc.”, “PhD.”, “MBASW”, or “IV”.
6. "nickname"
Un apodo.
- "email"
Dirección de correo electrónico
- “username”:
Nombre de usuario
- “new-password”:
Una nueva contraseña. Al crear una nueva cuenta o cambiar contraseñas, este es el campo
“Ingrese su nueva contraseña”, a diferencia de cualquier campo “Ingrese su contraseña actual”
que pueda estar presente. Esto puede ser utilizado por el navegador tanto para evitar ingresar
accidentalmente una contraseña existente como para ofrecer ayuda para crear una contraseña
segura.
- “current-password”:
La contraseña actual del usuario.
-“organization-title”:
Un puesto de trabajo, o el título que tiene una persona dentro de una organización, como
“Escritor técnico senior”, “Presidente” o “Líder asistente de tropa”.
- “organization”:
El nombre de una empresa u organización, como “Acme Widget Company” o “Girl Scouts of
America”.
- “street-address”:
Una dirección postal. Puede ser varias líneas de texto y debe identificar completamente la
ubicación de la dirección dentro de su segundo nivel administrativo (generalmente una ciudad
o pueblo), pero no debe incluir el nombre de la ciudad, el código postal o el nombre del país.
- “address-line1”, “address-line2”, “address-line3”:
Cada línea individual de la dirección postal. Estos solo deberían estar presentes si la “dirección
postal” también está presente.
- “address-level4”:
El nivel administrativo más detallado, en direcciones que tienen cuatro niveles.
- “address-level3”:
El tercer nivel administrativo, en domicilios con al menos tres niveles administrativos.
- “address-level2”:
El segundo nivel administrativo, en domicilios con al menos dos de ellos. En países con dos
niveles administrativos, normalmente sería la ciudad, pueblo, aldea u otra localidad en la que
se encuentra la dirección.
- “address-level1”:
El primer nivel administrativo en la dirección. Esta suele ser la provincia en la que se encuentra
la dirección. En los Estados Unidos, este sería el estado. En Suiza, el cantón. En el Reino Unido,
la ciudad postal.
- “country”:
Código de país
- “country-name”:
Nombre del país
- “postal-code”:
Código postal o ZIP
- “cc-name”:
El nombre completo tal como está impreso o asociado con un instrumento de pago, como una
tarjeta de crédito. Por lo general, se prefiere utilizar un campo de nombre completo en lugar de
dividir el nombre en pedazos.
- “cc-given-name”:
Nombre (first name) en un instrumento de pago como una tarjeta de crédito.
- “cc-additional-name”:
Un segundo nombre (middle name) como se indica en un instrumento de pago o tarjeta de
crédito.
- “cc-family-name”:
Un apellido, tal como figura en una tarjeta de crédito.
- “cc-number”:
Un número de tarjeta de crédito u otro número que identifique un método de pago, como un
número de cuenta.
- “cc-exp”:
Una fecha de vencimiento del método de pago, generalmente en el formato “MM / YY” o
“MM / YYYY”.
- “cc-exp-month”:
El mes en el que vence el método de pago
- “cc-exp-year”:
El año en el que vence el método de pago
- “cc-csc”:
El código de seguridad del instrumento de pago; en las tarjetas de crédito, este es el número de
verificación de 3 dígitos que se encuentra en el reverso de la tarjeta.
- “cc-type”:
El tipo de instrumento de pago (como “Visa” o “Master Card”).
- “transaction-currency”:
La moneda en la que se realizará la transacción.
- “transaction-amount”:
La cantidad, dada en la moneda especificada por “transacción-moneda”, de la transacción, para
un formulario de pago.
- “language”:
Un idioma preferido, dado como una etiqueta de idioma BCP 47 válida.
- “bday”:
Una fecha de nacimiento, como una fecha completa.
- “bday-day”:
El día del mes de una fecha de nacimiento.
- “bday-month”:
El mes de una fecha de nacimiento.
- “bday-year”:
El año de una fecha de nacimiento.
**
- “sex”:
Una identidad de género (como “Mujer”, “Fa’afafine”, “Hombre”), como texto de forma libre
sin nuevas líneas
- “tel”:
Un número de teléfono completo, incluido el código del país. Si necesita dividir el número de
teléfono en sus componentes, puede usar estos valores para esos campos:
1. “tel-country-code”:
El código de país, como “1” para Estados Unidos, Canadá y otras áreas de América del
Norte y partes del Caribe.
2. "tel-national"
El número de teléfono completo sin el componente de código de país, incluido un
prefijo interno del país. Para el número de teléfono “1-855-555-6502”, el valor de este
campo sería “855-555-6502”
3. “tel-area-code”:
El código de área, con cualquier prefijo interno del país aplicado si corresponde.
4. “tel-local”:
El número de teléfono sin el código de país o área. Esto se puede dividir en dos partes,
para los números de teléfono que tienen un número de intercambio y luego un número
dentro del intercambio. Para el número de teléfono “555-6502”, utilice “tel-local-prefix”
para “555” y “tel-local-suffix” para “6502”.
5. “tel-extension”:
Un código de extensión de teléfono dentro del número de teléfono, como un número
de habitación o suite en un hotel o una extensión de oficina en una empresa.
- “impp”:
Una URL para un punto final de protocolo de mensajería instantánea, como
“xmpp: [email protected]”.
- “url”:
Una URL, como una página de inicio o la dirección del sitio web de la empresa, según
corresponda, dado el contexto de los otros campos del formulario.
- “photo”:
La URL de una imagen que representa a la persona, la empresa o la información de contacto
proporcionada en los otros campos del formulario.

Select19
Input type submit vs. Button tag20
Input type=”submit”

Para enviar formulario

Button tag

En caso que requiera uso de un botón

Apuntes de CSS3
CSS
Cascading style sheet (css) es la herramienta con la que le damos estilo a nuestra pagina ya sea color,
tamaño, espacios, lugares de posición y más.

¿Cómo utilizamos CSS?: por etiqueta, selector, class y

por ID 22
Cascading style sheet (css) es la herramienta con la que le damos estilo a nuestra pagina ya sea color,
tamaño, espacios, lugares de posición y más.

Cómo implementar CSS en nuestro HTML

Archivo CSS
esta es la mejor práctica en especial cuando tendremos mucho CSS, tendremos un archivo *.css y en el
head del html pondremos las etiqueta <link rel=”stylesheet” href=”la direccion”>
y se aplicará el css de nuestro archivo
Etiqueta style
si tendremos poco css es posible usar la etiqueta style y directamente usarlo ahi
CSS embebido
esto no es muy bueno hacerlo pero se puede hacer si solo aplicaremos pocos atributos a pocas etiquetas
con el atributo style en la etiqueta

Sintaxis CSS
Se comenta con /* contenido*/
la sintaxis es la siguiente
(cosa a modificar)
{
atributo: valor ;
atributo2: valor2;
…
}

Selector por elemento

Se indican con etiqueta{} en CSS (ejemplo p{} o h1{})
en html se aplicará a todas las etiquetas del tipo indicado
Esto es útil si queremos darle el mismo estilo a todos los elementos de un tipo como párrafo o titulos
Clases
se generan con .nombre{} en CSS
en html se indican con el atributo class=”nombre”
Esto sirve para dar el mismo estilo a muchos elementos distintos
Id
se generan con #nombre en CSS
en html se indica con el atributo id=””
Esto es útil si sólo lo usaremos con una etiqueta

css
 border-top-left-radius: Define la esquina superior izquierda.

 border-top-right-radius: Define la esquina superior derecha.

 border-bottom-right-radius: Define la esquina inferior derecha.

 border-bottom-left-radius: Defina la esquina inferior izquierda.

Por ejemplo, si modificamos el valor de las cuatro esquinas:

border-radius: 20px;

Importante: Para que las esquinas redondeadas aparezcan correctamente en todos los navegadores,
hay que añadir una línea específica para cada uno:

 Para Chrome de Google y Safari de Apple: -webkit-border-radius.

 Para Firefox de Mozilla: -moz-border-radius.

Aplicando un poco de estilo a las esquinas redondeadas

Una vez que ya sabemos como hacer bordes redondeados con CSS, es el turno de darle un poco
de estilo, para ello usaremos la propiedad border-style.

Tenemos varios estilos disponibles que son los siguientes:

 solid: para un borde sólido.

 dotted: para ponerlo punteado.

 dashed: si lo queremos con guiones.

 double: un borde doble

 groove: nos saldrá ranurado.

 inset: un borde por dentro.

 outset: el borde tiene efecto por fuera.

Y ahora vamos con el ejemplo práctico, vamos a generar un contenedor con un borde doble y

Manejando el espacio entre las columnas

Otra cosa que podemos hacer con nuestras columnas es definir el espacio entre
columnas (usando column-gap) o incluso ponerle un filete separador (una línea entre las columnas) con
la propiedad column-rule (sin olvidarnos de los prefijos):

Pseudo clases y pseudo elementos

Cómo nombrar las clases

Metodología **BEM😗* cómo nombrar correctamente las clases.

Solo usa clases. Las nombra siguiendo el siguiente patrón: BLOQUE__ELEMENTO—MODIFICADOR (son

2 guiones, se usa 1 guión para separar palabras).

 Bloque: sección que puede funcionar por sí sola.

 Elemento: forma una de las partes del bloque.

 Modificador: variaciones de un mismo bloque/elemento.

<!-- BLOQUE -->

<main class="Padre">

<!-- BLOQUE__ELEMENTO -->

<section class="Padre__Hijo">

<!-- BLOQUE__ELEMENTO--MODIFICADOR -->

<article class="Padre__Hijastro--Mayor"></article>

<article class="Padre__Hijastro--Menor"></article>

</section>

</main>

Crear estilos a etiquetas dentro de clases

Si tienes etiquetas dentro de la etiqueta a la que le estás aplicando estilos y le pones una clase, puedes
aplicar estilos únicamente a las etiquetas dentro de esa clase de la siguiente manera: .clase etiqueta {}

/* Estilos a etiqueta "a" dentro de una clase */

.main-nav__item a {

color: white;

Usa  background-color  para ver las cajas de los elementos.

Pseudo clases

Define el estilo de un estado especial de un elemento.

Agregar al final de la clase :nombreAccion

/* Pseudo clase */

.main-nav__item a:hover {

color: darkblue;

.main-nav__item a:active {

color: darkcyan;

Lista de Pseudo Clases

Pseudo Elementos

Define el estilo de una parte específica de un elemento.

Agregar al final de la clase ::nombreAccion

/* Pseudo elemento */

.main-nav__item a::after {

content: " | "; /* despues del elemento, agrega esto */

1. ¿Por qué se recomienda el uso de CSS?

Existen 4 ventajas clave:

 Implica menos código: los desarrolladores usan CSS para aplicar el mismo estilo a múltiples
páginas y elementos en todo un sitio web, lo que reduce el tiempo y la probabilidad de errores.

 Brinda más posibilidades de estilo: con CSS puedes hacer mucho más que lo que te permite el
HTML. Con el conocimiento suficiente, y algo de paciencia, tu sitio lucirá tal y como deseas.

 El poder de la estandarización: debido a que CSS es un lenguaje uniforme, cualquier

desarrollador o diseñador puede comprender el estilo de un sitio al revisar los archivos CSS.

 Mejor desempeño: CSS reduce la cantidad de código repetido. Menos código significa archivos
más pequeños, y archivos más pequeños se traducen en tiempos más de carga menores para tus
páginas.
2. ¿Puedes diseñar una página web sin CSS?

Debido a que el lenguaje HTML es el que se encarga de estructurar los contenidos de una página web,
técnicamente sería lo único que necesitarías para mostrar texto, imágenes, secciones y videos a tus
visitantes. Sin embargo, CSS es el lenguaje que se encarga de que el diseño sea atractivo, ordenado y
que dé una buena experiencia de usuario.

¿Quieres saber cómo luce una página sin CSS? Mira la siguiente imagen, extraída de una publicación de
nuestro blog:

Te dejamos a continuación el aspecto que tiene con CSS. Cambia mucho, ¿no crees?

3. ¿Qué es cascada CSS? 

Mira el siguiente código. Se ve como si tuviéramos dos reglas dirigidas a la propiedad de color de fondo
para el elemento p:

Esto representa un conflicto, pues el mismo elemento no puede tener distintos colores de fondo. En
este caso, CSS se queda con azul debido a la forma en que operan las cascadas.

En términos más sencillos, cascada significa que CSS considera el orden de las reglas cuando le da estilo
a los elementos. La regla de la cascada dicta que si la propiedad CSS de un elemento tiene asignados
diferentes valores, el navegador tomará el valor que fue procesado al final. En nuestro ejemplo, el
valor rojo se colocó primero y azul  está después, así que aplica el último.

La cascada resuelve reglas conflictivas dentro de la misma hoja de estilo o en varias de ellas; es decir,
las reglas que se procesaron en hojas de estilo posteriores anulan las reglas conflictivas en páginas
previas. La regla de la cascada también aplica cuando se trata de CSS interno, externo y en línea: en
línea anula interno e interno anula externo. 

La cascada es central para las funciones de CSS: es la «C» de su nombre. De cualquier modo, no tienes
por qué preocuparte, ya que si la comprendes de forma adecuada podrás utilizarla correctamente.

4. ¿Qué es especificidad CSS? 

Existe otro escenario: tu etiqueta p tiene un id. Según el CSS, ¿tu párrafo será rojo o azul?

Según la regla de la cascada, se supone que el valor azul anula al rojo. Sin embargo, no pasó eso. ¿Por
qué? El problema con este ejemplo es que los selectores CSS son de diferentes tipos, pero describen el
mismo elemento. En casos así, CSS designa algunos selectores como «más específicos» que otros; a esto
se le conoce como «especificidad CSS». Combinadas con la cascada, las reglas de especificidad CSS
eligen cuál estilo aplicar en caso de un conflicto.

CSS dice que los selectores de clase son más «específicos» que los selectores de elementos; y  los
selectores de identidad son más «específicos» que los selectores de clase. En el ejemplo anterior, la
primera regla CSS utiliza un selector de identidad, por lo que el valor de rojo prevalece, ya que es más
específico que el valor del elemento.

5. ¿Qué es herencia CSS? 

Herencia significa que algunas declaraciones CSS aplicadas a un elemento «padre» se pasan a elementos
«hijo». 

Podemos ver herencia con una propiedad como tamaño de fuente: 

Sin embargo, no todas las propiedades heredan valores de elementos «padre». Como en el caso
anterior: el estilo solo está aplicado al elemento «padre». La declaración tamaño de fuente se hereda,
pero no la del borde. 

6. ¿Qué es padding?

Algunas propiedades aceptan múltiples valores. La propiedad padding (relleno) es una de ellas. Acepta
hasta cuatro valores que establecen el espacio de arriba, abajo,  a la derecha y a la izquierda de un
elemento. 

7. ¿Qué es marging?

Al igual que padding, la propiedad de marging (margen), define el espacio alrededor de un

elemento fuera del borde; solamente que no tiene color de fondo y es transparente.

8. ¿Qué es hover?

Es una pseudoclase que se utiliza cuando un visitante interactúa con un elemento utilizando el cursor.

Aunque no siempre activará el elemento, sí habrá un cambio perceptible, como tamaño de la fuente o
color de fondo. Como cuando pasas puntero del mouse sobre el enlace de una página, y este cambia de
color para llamar tu atención e invitarte a hacer clic.

9.¿Cuál es la diferencia entre id  y class?

Ambos son atributos HTML, aunque tienen diferentes funciones. Id asigna un nombre a un elemento
determinado, por lo que no puede utilizarse en otro. Y class asigna un elemento a una clase; tampoco
puede haber dos elementos con la misma clase. Pero con CSS puedes aplicar estilos tanto a un id como a
una clase.

Si usas un estilo de id, restringes las reglas de estilo a un bloque o elemento concreto. Si usas un estilo
de class, aplicas las reglas de estilo a una determinada clase de bloques y elementos.

10. ¿Cómo se restaura el valor por defecto de la propiedad de un elemento?

Antes no era posible simplemente escribir una palabra clave para regresar el valor de un elemento a su
estado original. Sin embargo, ya existe una: initial. Para hacerlo, debes escribir la regla de este modo,
suponiendo que quieres indicar que el h1 de un artículo sea otra vez de color negro una vez que lo
cambiaste a azul:

/* Heading default color is black */ h1 { color: blue; } h1 { color: initial; }

Hay muchísimas más cosas que puedes hacer con CSS. Esto es apenas una pequeña muestra de todo ese
mundo. Esperamos que comiences a informarte más sobre el tema y que este contenido te motive a
diseñar el sitio web ideal que impulse a tu negocio a llegar lejos. Una vez que CSS se convierta en un
lenguaje familiar para ti, no habrá limites.

Pseudo clases y pseudo elementos23

Una pseudoclase CSS es una palabra clave que se añade a los selectores y que especifica un
estado especial del elemento seleccionado. Por ejemplo,  :hover aplicará un estilo cuando el
usuario haga hover sobre el elemento especificado por el selector.

La pseudo-clase :visited de CSS  representa enlaces que el usuario ya ha visitado. Por motivos

de privacidad, los estilos que se pueden modificar con este selector son muy limitados.

La pseudo-clase :checked de CSS representa cualquier radio (<input type="radio"> (en-

US)), checkbox (<input type="checkbox">) u option (<option> en un elemento <select>) que está
marcado o conmutado a un estado on.

Pseudoelementos
Al igual que las pseudo-classes, los pseudo-elementos se añaden a los selectores, pero en cambio, no
describen un estado especial sino que, permiten añadir estilos a una parte concreta del documento. Por
ejemplo, el pseudoelemento ::first-line selecciona solo la primera línea del elemento especificado por el
selector.

Sintaxis
selector::pseudo-elemento { propiedad: valor; }
Modelo de caja26
En la web los elementos se piensan en forma de rectángulos. A esto se le conoce como Modelo
de caja.
Las cajas tienen parámetros que podemos editar en nuestro CSS
Margin
Espacio que hay del borde de la caja hacia afuera. Visualmente, permite separar a la caja de
elementos externos.
Padding
Espacio que hay del borde de la caja hacia adentro. Visualmente, permite separar a la caja de
elementos internos.
Border
Es el borde de la caja. Por defecto, a partir de ahí medimos las distancias de nuestra caja con
elementos internos o externos.

Pensandolo como una casa:

 El margin es el jardin o la acera que te aleja de las otras casas.
 El border son tus paredes.
 El padding es el espacio que tienen tus paredes con tus muebles.
 El content son tus muebles.

Cuando hablamos de Modelo de Caja o Box Model es posible que nos

encontremos con el término Layout.
–
Layout se refiere a la geometría de los elementos, define como, con que tamaño, con que cual
separación, y en que posición se dibujaran los elementos en pantalla.
El modelo de caja es el algoritmo por el el navegador dibuja las cajas en pantalla.
En este modelo tenemos tres cajas internas:
 content box
 padding box (separación del borde con el contenido.)
  border box
Y de último una caja externa invisible:
 margin box
Este último es un margen que separa dicho elemento del resto de elementos.
Nota: Tener en cuenta que los porcentajes son relativos al tamaño del elemento padre. En este
caso como usamos un ancho 100% en main, y su padre es body, por eso tomo todo el ancho de
la pantalla, Si previamente a body le hubiéramos declarado ancho de 50px, el 100%
de main serian 50px.

box-sizing
La propiedad CSS box-sizing como el user agent (en-US) debe calcular el ancho y alto total de
un elemento.

Herencia26
 Herencia, es código css que el elemento padre heredará al hijo.
 Inherit, Indica que heredará los estilos de su elemento padre
 Initial, Indica que obtendrá los valores predeterminados del navegador.
 upset, combinación de inherit + initial, intentará heredar los estilos de su elemento
padre, si no esta disponible obtendrá los valores predeterminados.
Por defecto el navegador tiene un font-size:16px

Especificidad en selectors 27
CASCADAS
La cascada se usa cuando hay dos o mas declaraciones que afectan a un elemento, es decir, cuando
hay mas de dos reclas que afectan a una etiqueta html, cuando esto ocurre la cascada determinara
cual de estas es tiene mayor importancia, y la de mayor importancia sera la que se aplicara. L forma
de calcular el peso de una regla no se hace de forma arbitraria, se calculan en base a 3 criterios:

1.- Importancia -----> Las declaraciones importantes son las declaraciones que van seguidas de una
directiva llamada: !important. Cualquier otra declaracion sin !important son consideradas
declaraciones normales.

2.- Especificidad -----> La regla dice que el selector mas especifico sera el que se tome en cuenta. La
forma para calcular la especificidad de un selector se hace con la siguiente formula.

se juntan todos los bloques obtenidos, a mayor numero mayor especificidad, y sera tomado en cuente
la regla con mayor especificidad.
3.-Orden ------> Podemos definir los estilos en hojas externas, en la cabecera de la pagina y en la
misma etiqueta (estilos en linea), el navegador lee el contenido de una pagina de arriba hacia bajo y
los ultimos estilos definidos seran los que se tomaran en cuenta.

Demo de especificidad y orden en selectores28

1. Los !important estarán por encima de los demás estilos. Sin embargo, son mala práctica y no se
deberían usar.

2. Los estilos embebidos en el HTML, es decir inline styles están por encima de las clases y IDs. Sin
embargo, también se deberían evitar.

3. Los IDs están por encima de las clases. Los IDs son específicos, si se usa uno en un archivo HTML
ya no se podrá repetir más en ese mismo archivo. Mientras que las clases si se pueden repetir
en cualquier elemento.

4. Un estilo de etiqueta es el último valor que el navegador tiene en cuenta antes de tomar los
estilos por defecto de esa etiqueta. Los estilos de etiqueta son los que menos peso tienen.

Más sobre selectores29

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

Combinadores: Adjacent Siblings (combinators)30

El combinador hermano adyacente ( +) separa dos selectores y coincide con el segundo
elemento solo si sigue inmediatamente al primer elemento, y ambos son hijos del mismo padre
element.

Combinadores: General Sibling31

general sibling combinator (~) separa dos selectores y coincide con el segundo elemento solo si
sigue al primer elemento (aunque no necesariamente inmediatamente), y ambos son hijos del
mismo elemento padre .

Combinadores: Hijo y Descendiente32

The child combinator (>) se coloca entre dos selectores CSS. Solo coincide con los elementos
que coinciden con el segundo selector que son hijos directos de los elementos que coinciden
con el primero.
.
.
The descendant combinator , típicamente representado por un único carácter de espacio ( ),
combina dos selectores de modo que los elementos que coinciden con el segundo selector se
seleccionan si tienen un elemento antepasado (padre, padre del padre, padre del padre, etc.)
que coincida con el primer selector. Los selectores que utilizan un combinador descendiente se
denominan selectores descendientes .

Medida33
medida absoluta: el valor de este no cambia y siempre sera el mismo asi la pagina cambie su
tamaño, las medidas absolutas son:
.
mm = milimetros
cm = centimetros
in = pulgada
pc = picas
px = pixel
.
las medidas relativas: estas medidas heredan el tamaño o se basan en algun tamaño que se alla
seleccionado y el valor ira cambiando segun si la pagina cambia de tamaño, las medidas
relativas son :
.
%
em
rem

medida: em 34
es una medida que toma el tamaño de padre: ejem. Main = 20px p 1em=20px p 2em=40px

Medidas REM35
REM : funciona igual que el em, con la diferencia que es relativo al valor de la fuente del elemento html,
y no tiene en cuenta el valor heredado o del elemento que lo contiene.

Por defecto el html viene con un tamaño de fuente de 16px asi que siempre
.
1 REM = 16PX
.
Si queremos aplicar rem de una forma mas sencilla para no tener que hacer tantos calculos asemos lo
siguiente

Max/Min width36
Min-height: se utiliza para definir la altura mínima de un elemento dado. Impide que el valor de
la propiedad height llegue a ser más pequeña que la especificada en la altura mínima ( min-
height ). Se refiere a la altura del bloque contenedor.
Max-height: se utiliza para definir la altura máxima de un elemento dado. Impide que el valor
de la altura pueda llegar a ser más grande que la de max-height . Porcentajes: se refiere a la
altura del bloque contenedor.
Min-width: se usa para determinar la anchura mínima de un elemento. Previene que la
propiedad width pueda ser inferior que min-width . Aplicable a: elementos de tipo bloque.
Porcentajes: se refieren a la anchura del bloque contenedor.
Max-width: define el ancho máximo que un elemento puede tener, max-width cambia el
tamaño del elemento si el valor de width es mayor que el de max-width.

Position37
Valores de position
Static: Posición por defecto de los elementos, conservan la posición y espacio de donde son
colocados (estáticos). No se puede usar top, right, bottom y left en esta posición.
Absolute: Permanecen en la posición de donde fueron colocados pero pierden su espacio físico
(se sobreponen a los elementos que ocupan dicho espacio), se los puede posicionar mediante
las propiedades top, right, bottom y left.
Importante: Al aplicar las propiedades top, right, bottom y left se tomará de referencia al
contenedor más cercano con posición relativa.
Relative: Conservan su posición original y espacio físico pero se los puede posicionar mediante
las propiedades top, right, bottom y left sin perder dicho espacio físico.
Fixed: Pierden su espacio físico y permanecen de forma fija (siguen el scroll, se colocan al lado
izquierdo del viewport), se los puede posicionar mediante las propiedades de top, right, bottom
y left.
Sticky: Conservan su espacio físico pero cuando el scroll los alcanza lo siguen (sin perder dicho
espacio físico), es muy usado para barras de navegación y se lo puede posicionar con las
propiedades top, right, bottom y left.

Display38
En un elemento con display:inline no puedo usar margin ni padding arriba ni abajo, solo
derecha e izquierda. Tampoco se puede aplicar width o height.
En un elemento con display:block el contenido del elemento toma el 100% del width, se puede
usar margin y padding por todos los lados.
En un elemento con display:inline-block, se puede usar margin y padding por todos lados, así
como darle width y height, y el contenido es del mismo tamaño que el elemento.
Etiquetas como p y div vienen por Default con un display:block Etiquetas como span viene por
Default con un display:inline
En esta clase vimos los 3 tipos de display Base.
Los cuales fueron:
Block: Estos toman el 100% del width, por lo que un elemento no puede posicionarse a un lado
de el.
Se le puede poner el width deseado, height deseado, añadir margin, padding sin problema.
Pero recordando que ocupara este elemento todo el largo de una Fila por asi decirlo.
Inline: Estos elementos solo ocuparan el ancho dependiento de su contenido. Por lo tanto estos
elementos si permiten que si un elemento cabe a lado suyo, se posicione este ahi.
Las *desventajas es que no se les puede modificar el width, height, ni colocar margin u padding
tanto top, como bottom.
inline-block: Este tiene la combinación de los 2 anteriores. Haciéndolo un mejor candidato para
usarlo.
Permite modificar su width, height, añadirle margin, padding sin problemas y lo mejor es que
mientras que haya espacio a un lado suyo, este permitirá posicionar mas elementos ahi.
código CSS. Guía a esta rana hacia la hoja de lirio en la derecha, usando la propiedad justify-
content, la cual alinea elementos horizontalmente y acepta los siguientes valores:
 flex-start: Alinea elementos al lado izquierdo del contenedor.
 flex-end: Alinea elementos al lado derecho del contenedor.
 center: Alinea elementos en el centro del contenedor.
 space-between: Muestra elementos con la misma distancia entre ellos.
 space-around: Muestra elementos con la misma separación alrededor de ellos.

Flexbox layouts41
Flex es un tipo de display que permite que el contenedor padre sea flexible a los cambios que
puedan tener los elementos hijos en su alineación.
Una vez tengamos el elemento padre con display: flex tenemos otras propiedades que
podremos usar para nuestro beneficio.
 Flex-direction: Te permite elegir la alineación de los elementos hijos sea en vertical
(column) u horizontal (row), esta alineación viene por defecto.
 Justify-content: Esta propiedad nos permite alinear el contenido de forma horizontal
o Valores:
  Flex-start: Alinear items del flex desde el comienzo.
 Flex-end: Alinear items desde el final.
 Center: Alinear items en el centro del contenedor.
 Space-between: Distribuir items uniformemente, el primer items al
inicio, el último al final.
 Space-around: Distribuir items uniformemente, estos tienen el mismo
espacio a su alrededor.
 Space-evenly: Distribuye uniformemente el espacio entre los items y su
alrededor.
 Align-items: Sirve para alinear los elementos hijos de forma vertical.
o Valores:
 Flex-start: Se alinean desde arriba.
 Flex-end: Se alinean desde abajo.
 Center: Alinea los item al centro del eje y del contenedor.
 Stretch: Estira el alto de los elementos hijos al 100% del alto del
elemento padre.
 Baseline: Escala el alto del elemento al tamaño de su contenido.
 Flex-wrap: Permite que un elemento cuyo tamaño sea mayor al de la página haga un
salto de línea sin salirse del contenedor, pues este se agranda.
 Order: Especifica el orden utilizado para disponer los elementos en su contenedor
flexible. Los elementos estarán dispuestos en orden ascendente según el valor de order.
 Flex-grow: Especifica qué cantidad del espacio restante dentro del contenedor flexible,
debería ocupar el ítem en cuestión según su dirección principal, esta última
determinada por flex-direction.
 Flex-basis: Especifica el tamaño inicial de un elemento flexible.
Ahora usa align-items para ayudar a las ranas a llegar al fondo del estanque. Esta propiedad CSS
alinea elementos verticalmente y acepta los siguientes valores:
 flex-start: Alinea elementos a la parte superior del contenedor.
 flex-end: Alinea elementos a la parte inferior del contenedor.
 center: Alinea elementos en el centro (verticalmente hablando) del contenedor.
  baseline: Muestra elementos en la línea base del contenedor
 stretch: Elementos se estiran para ajustarse al contenedor.
Las ranas necesitan ponerse en el mismo orden que sus hojas de lirio usando flex-direction.
Esta propiedad CSS define la dirección de los elementos en el contenedor, y acepta los
siguientes valores:
 row: Elementos son colocados en la misma dirección del texto.
 row-reverse: Elementos son colocados en la dirección opuesta al texto.
 column: Elementos se colocan de arriba hacia abajo.
 column-reverse: Elementos se colocan de abajo hacia arriba.
Ayuda a las ranas a encontrar sus hojas de lirio usando flex-direction y justify-content.
Nota que cuando es una columna, justify-content cambia a vertical y align-items a horizontal.
A veces, invertir el orden de una fila o columna de un contenedor no es suficiente. En esos
casos, nosotros podemos aplicar la propiedad order a elementos individuales. Por defecto, los
elementos tienen un valor 0, pero nosotros podemos usar esta propiedad para establecerlo a
un número entero positivo o negativo.
Usa la propiedad order para reordenar las ranas de acuerdo a sus hojas de lirio.
Otra propiedad que puedes aplicar a elementos individuales es align-self. Esta propiedad
acepta los mismos valores de align-items y sus valores son usados para un elemento específico.
la propiedad flex-wrap, la cual acepta los siguientes valores:
 nowrap: Cada elemento se ajusta en una sola línea.
 wrap: los elementos se envuelven alrededor de líneas adicionales.
 wrap-reverse: Los elementos se envuelven alrededor de líneas adicionales en reversa.
Las dos propiedades flex-direction y flex-wrap son usadas a menudo en conjunto con la
propiedad abreviada flex-flow, la cual fue creada para combinarlas. Esta propiedad abreviada,
acepta un valor de cada una separada por un espacio.
Por ejemplo, puedes usar flex-flow para establecer filas y envolverlas.
flex-flow: column wrap;
Trata de usar flex-flow para volver a realizar el nivel anterior.
Puedes usar align-content para establecer como múltiples líneas están separadas una de otra.
Esta propiedad acepta los siguientes valores:
  flex-start: Las líneas se posicionan en la parte superior del contenedor.
 flex-end: Las líneas se posicionan en la parte inferior del contenedor.
 center: Las líneas se posicionan en el centro (verticalmente hablando) del contenedor.
 space-between: Las líneas se muestran con la misma distancia entre ellas.
 space-around: Las líneas se muestran con la misma separación alrededor de ellas.
 stretch: Las líneas se estiran para ajustarse al contenedor.
Esto puede ser confuso, pero align-content determina el espacio entre las líneas, mientras
que align-items determina como los elementos en su conjunto están alineados dentro del
contenedor. Cuando hay solo una línea, align-content no tiene efecto.