Curso Definitivo de HTML y CS1

Curso Definitivo de HTML y CSS
FRONTEND (CLASE 2)
Perfiles de un Web Developer
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
Frameworks de CSS
Bootstarp
Materialize
Foundation
Los front-end también trabajan con algo que se llama frameworks ya que estos
traen ciertos fragmentos de css ya construidos y nos ahorra tiempo en
construcción de nuestro producto.
Frameworks y librerias de JS
Al momento de que un front-end maneje perfectamente javascript puede
escoger un framework o librería para construir productos que puedan escalar
más rápido y poder tener una interacción mucho mayor depende de producto o
página que queramos construir.
React
Angular
Vue
Preprocesadores de CSS
Es una forma diferente de hacer css tiene reglas distintas, hay desarrolladores
que dicen que es manejar css con poderes, aunque css evoluciona y trae
ciertas características al estándar sin tener que utilizar preprocesadores,
algunas vacantes requieren saber de estos para trabajar de manera diferente
con css.
Sass
Stylus
{less
Backend (clase 3)
Un backend trabaja del lado del servidor, quiere decir que va a manejar toda la
lógica al momento del que navegador hace una petición.
No tiene un estándar y tiene más tecnologías. Ej:
-Python
-PHP
-NodeJS
-Ruby
-Java
-Go
-.Net
También tiene sus frameworks ej:
-Django: la gente que trabaja python

-Laravel: para la gente que trabaja PHP
-Rails: gente que trabaja ruby
-Express: gente que trabaja con javascript
-Spring: gente que trabaja con java
Además un backend tiene que ver dónde va subir el deploy de su aplicación y

de ahí sale un DEVOPS que es gente que se especializa en trabajar servicios
como:
 Google Cloud
 AWS
 Digital Ocean
 Heroku

Pero un backend también tiene que entender cómo funciona, y cómo conectan
lo que están haciendo y su base de datos para poder hacer un deploy de su
aplicación conectados con la parte del Front.
Fullstack (clase 4)
Un Desarrollador Fullstack es alguien que tiene conocimientos tanto del Front-

end como del Back-end, es alguien que entiende cómo funciona un producto web
desde principio a fin. Desde la idea hasta la producción!
Sin dudas tiene un alto conocimiento acerca de una aplicación web.
Pero Hey! Ellos tienen sus áreas de especialización, ya sea Front-end o Back-end

Espero ver sus aportes relacionados a un Desarrollador Fullstack, es a mi
parecer, un mundo bastante amplio!
Paginas Estáticas vs. Dinámicas (clase 5)
Sitos Web Estáticos: La información que contiene, se mantiene constante y estática.

No se actualiza con la interacción del usuario.
Conveniente para landing pages (Páginas informativas) o Blogs.

Serán siempre iguales para todos los usuarios.
.
Sitios Web Dinámicos (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.
Index y su estructura básica: head (clase 7)
En el head van todos los archivos importantes para que nuestro proyecto
funcione correctamente, algunos como: Estilos, fuentes, descripciones,
librerías… Es la parte no visible de nuestra página.
<!DOCTYPE html>

<htmllang="es">

<head>
<metacharset="UTF-8" />

<metaname="description"content="Esta página te mostrará fotos de

gatos" />

<metaname="robots"content="index,follow" />

<title>Mi página</title>

<metaname="viewport"content="width=device-width, initial-
scale=1.0" />

<linkrel="stylesheet"href="./css/style.css">

</head>
Index y su estructura básica: body (clase 8)
body es la parte visible de nuestro website 😃. 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.
<body>
<header>
<nav></nav>
</header>
<main>
<section>

<article>

</article>
</section>
<ul>

<li></li>
</ul>
<ol></ol>
</main>
<footer>
</footer>
<p>Soy un texto</p>
<h1>Soy un titulo</h1>

<ahref="#">Soy un link</a>

</body>
Tipos de imágenes
Optimización de imágenes
Tamaño máximo recomendado para una imagen:
 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.
En promedio una imagen debe de pesar alrededor de 70 kb a 100 kb, no puede pasar
más de 1 Mb. Tienes dos opciones para cumplir esto:
• Mejora el tamaño de tus imágenes: Tiny PNG, con esta página tú puedes agarrar una
imagen, puedes ponerla en la pagina y la pagina se va a encargar de comprimirla y
regresarte ya con un tamaño mucho más óptimo. Es mucho más funcional con
imágenes JPG.
• Retira metadatos de tus imágenes: Verexif: cuando tu tomas una fotografía con tu
celular, el celular le agrega ciertos datos que se llama metadatos a esta imagen, esta
fotografía va llevar como metadatos la hora en la que se tomó, el lugar en donde se
tomó y otro tipo de información que tu celular le va a agregar a esta imagen, lo que
tenemos que hacer es quitarle esos datos. Así que en esta pagina cuando tu tomes
una fotografía con el celular o te pasen una fotografía que viene de alguna cámara tu
puedes limpiar esos metadatos para quitar ese peso extra que en tu proyecto no lo vas
a necesitar.
Etiqueta Figure
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. Si bien se relaciona con el flujo principal, su posición es independiente
de éste. 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.
La forma correcta de colocar una imagen es con la etiqueta figure
SINTAXIS:
<figure>
<img
src="./pics/tinified/small.jpg"
alt="Es una imagen de un perrito"
/>
<figcaption>Es una imagen de un perrito</figcaption>
</figure>
<figcaption><figcaption/>
Esta etiqueta nos ayuda a darle una descripción a la imagen (autor, tipo, año,
etc…) y sera visible en la parte de abajo de la imagen
Etiqueta de Video
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.
loop: reproduce continuamente el vídeo, es decir, una vez acabada la reproducción

comienza de nuevo a reproducirse.
poster: URL de la imagen a mostrar cuando el vídeo no está disponible, está cargando y
no ha comenzado su reproducción. Por defecto es el primer frame del vídeo.
<body>
<main>
<section>
<video controls preload="auto">
<sourcesrc="./miVideo.mp4#t=10,60" />
<sourcesrc="./miVideo.mpv#t=10,60" />
</video>
</section>
</main>
</body>
Etiqueta from e input
Es importante utilizar la etiqueta <form></form> para indicar que utilizaremos un

formulario, además de la semántica y buenas practicas.
Dentro de estas etiquetas indicaremos los elementos del Formulario como lo son…
<label></label> que sera como nuestro “Contenedor” en esta ocasión. Dentro de el
pondremos la etiqueta <span></span> (No es necesario) para colocar un texto
haciendo alusión al contenido esperado (nombre, contraseña, fecha etc…) y viene una
de las etiquetas importantes la cual es <input> aquí es importante aclarar que hay
muchos tipos de Input, los que verán en este ejemplo son text, password, date,
time pero hay muchos más…
También está el atributo placeholder para colocar un texto como guía dentro de la

caja (Input) y este al hacer click sobre el se eliminara.
y Creo que es lo más rescatable!
Calender (clase 17)
<form action="">
<labelfor="calendario">
<span>calendario</span>
<inputtype="datetime-local" id="calendario"
name="calendario">
</label>
<inputtype="submit">
</form>
El elemento HTML <input> se usa para crear controles interactivos para formularios

basados en la web con el fin de recibir datos del usuario.Hay disponible una amplia
variedad de tipos de datos de entrada y widgets de control, que dependen del
dispositivo y el agente de usuario (user agent).El elemento <input> es uno de los más
potentes y complejos en todo HTML debido a la gran cantidad de combinaciones de
tipos y atributos de entrada.
Autocomplete y require (clase 18)
 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>
<main>
<formaction="">
<labelfor="nombre">
<span>Cual es tu nombre?</span>
<inputtype="text"id="nombre"name="nombre"autocomplete="name
"required>
</label>
<labelfor="correo">
<span>Cual es tu correo?</span>
<inputtype="email"id="correo"name="correo"autocomplete="ema
il"required>
</label>
<labelfor="pais">
<span>De que país nos escribes?</span>
<inputtype="text"id="pais"name="pais"autocomplete="country"
required>
</label>
<labelfor="cp">
<span>Codigo Postal</span>
<inputtype="text"id="cp"name="cp"autocomplete="postal-
code"required>
</label>
<inputtype="submit">
</form>
</main>
Select (CLASE 19)
Para crear inputs con una lista de varias opciones, se puede desarrollar de dos maneras
diferentes:
.
1. Etiqueta <select>: Esta permite crear la lista, con las etiquetas <option>:
2. Etiqueta <input list = “”>: De este modo, se puede utilizar una

etiqueta <datalist> con etiquetas <option> dentro del input. De este modo, el usuario
puede escribir dentro del input, y filtrar los resultados de la lista:
Input type submit vs. Button tag (CLASE 20)
Pseudo clases y pseudo elementos (clase 23)
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.
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
Algunos Pseudo-classes:
:root{}
Representa elemento HTML, con la especificidad de clase
usado para anidar variables CSS
:active
Se activa al hacer clic down
:visited
Cambio visual cuando se visita un enlace
:hover
Permite cambiar el estado de un elemento cuando el mause se
sobrepone sobre él
:first-child para afectar solo al primer hijo - se coloca

en el padre (ul) para afectar a su primer hijo (li)
:last-child para afectar solo al último hijo
:not negar una condiciones (ignorar una condición) ejemplo

.clase:not(last-child)
Afecto a todos menos el último
:empty
Ayuda a detectar cuando un elemento esta vacío. -
ejemplo .class:empty{background:yellow;} //resaltar
:nth-child()
tag:nth-child(2){} - afectara al segundo elemento
p::first-letter {
color: red;
font-size: 20px;
}
Toma solo la primera letra de un elemento, no todo su
contenido. Solo la primera letra.
Anatomia de una Regla de CSS (CLASE 24)

MODELO DE CAJA (CLASE 25)
HERENCIA (CLASE 26)

Especificidad en selectores (CLASE 27)
Demo de especificidad y orden en selectores (clase 28)
Combinadores: Abjacent Siblings (combinators) (clase 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.
Medidas (clase 33)
Medida absoluta: el valor de este no cambia y siempre será el mismo así la página
cambie su tamaño, las medidas absolutas son:
.
mm = milímetros
cm = centímetros
in = pulgada
pc = picas
px = pixel
.
las medidas relativas: estas medidas heredan el tamaño o se basan en algún tamaño que
se allá seleccionado y el valor ira cambiando según si la página cambia de tamaño, las
medidas relativas son :
.
%
em
rem
Medidas em EM (CLASE 34)
EM = es un acrónimo de elemento y lo que hace es tomar el tamaño de fuente

que tenga el padre directo ejemplo:
.container {
font-size: 20px
}
.container div {
Font-size: 2em;
}
Aquí los el tamaño del div que está dentro de la clase container tendrá un
tamaño de 40px, ya que
1em = 20px
Y como estamos asignándole 2 em sería como 20px + 20px
Y si por ejemplo tenemos el siguiente caso:
.container {
font-size: 20px
}
.container div {
Font-size: 2em;
}
.container div p {
font-size: 1.5em
}
a continuación veremos que la etiqueta p tendrá un tamaño de fuente de 60px

ya que toma como referencia el tamaño de su padre ( 40px ) y haría la siguiente
operación 40*1.5 que es igual a 60, es por eso que la etiqueta p tomo el valor de 60px
REM (CLASE 35)
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 así que siempre
.
1 REM = 16PX
Si queremos aplicar rem de una forma más sencilla para no tener que hacer
tantos cálculos asemos lo siguiente.
Vamos a reescribir en css nuestro html
html {
font-size: 62.5%;
}
Esto lo que hará es darle a el html un valor de 10px ya que 16px - 62.5% =
10px
Ahora si por ejemplo a una etiqueta le asignamos 2rem este hará referencia a
20px, o si por ejemplo le damos un valor de 1.5rem su valor será de 15px
Max/Min width (clase 36)
Una regla importante cuando vayamos a utilizar el min y el max en el width,

necesitamos tener un width base y casi siempre este va a ser en porcentaje.
Lorem*8 sirve para agregar texto en párrafo.
Problema de overflow, quiere decir que tenemos más texto contenido que el mismo
espacio del contenedor padre.
POSITION (CLASE 37)
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.
DISPLAY (clase 38)
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
Display Flex (clase 40)
Flexbox
Este display es muy útil/usado, este se lo asignamos a un contenedor display:flex; y
todos sus hijos directos se volverán flex items es decir estarán listos para usarlos en flex.
Direction
El flex direction indica hacia donde se irán colocando los elementos, puede ser
row(derecha), column(abajo) o row/column + (-reverse) que son sus opuestos, todos
tienen un start y un end que es su dirección con sentido.
Default
Sus valores por defecto son:

flex-direction es row
Los ítems empiezan desde start sobre el eje principal.
Los ítems no crecen en la dirección principal
Los ítems se ajustarán para llenar el tamaño del eje cruzado.
flex-basis es auto.
flex-wrap es nowrap.
Wrap
Esta propiedad define si uno puede usarse otra dimensión ya que si no hay los objetos se
saldrán del flexbox porque solo siguen una dirección. Si le añadimos los objetos se
moverán a la línea siguiente, si es rojo se irá a la línea de abajo, si es columna se irá a
una “columna” a un lado. No usar esta opción es nowrap activarla es wrap
Flex-flow
La propiedad flex flow junta la dirección y el wrap colocando primero la dirección y
luego el wrap.
Distribución del espacio

Elementos
Los elementos pueden distribuirse creciendo, disminuyendo su tamaño o quedándose
igual
Esto se hace con 3 propiedades basis: define el tamaño que debe tener el elemento,
grow: define la proporción que tendrá en caso de haber espacio de sobra, si tenemos 3
elementos con esta propiedad en 1,1,1 tendrán el mismo tamaño si el espacio se los
permite, shrink: define cuánto puede reducir su espacio un elemento.
Estas 3 propiedades se juntan en flex:grow shrink basis;

Espacio sobrante
Si hay espacio sobrante de manera horizontal tenemos los siguientes valores para
Justify-content:
Space-evenly: deja el mismo espacio entre cada elemento y los bordes
Flex-start(por defecto): lleva a todos los elementos al start
Flex-end: lleva a los elementos al end
Center: lleva a todos los elementos al centro
Space-around: deja el mismo espacio a la derecha e izquierda de cada elemento
Space-between: deja el mismo espacio entre los elementos
Si el espacio es vertical usaremos align items con alguno de los siguientes:
Stretch(por defecto): los elementos crecerán hasta ocupar el espacio
Flex-start:los elementos se pegaran al start
Flex-end:los elementos se pegaran al end
Center: los elementos se alinearan al centro

Curso Definitivo de HTML y CS1

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Curso Definitivo de HTML y CS1

Cargado por

Copyright:

Formatos disponibles

Curso Definitivo de HTML y CSS

Front-end: Es alguien que se dedica al desarrollo en el lado del cliente, estas

Los Front-end utilizan las tecnologías de HTML, CSS y JS, que son

También utilizan Frameworks de CSS, lo cual nos puede facilitar fragmentos

Y espera! También tenemos los Frameworks y librerías de JS, los cuales nos

Y por si fuera poco. Tenemos los Preprocesadores de CSS, podríamos decir

Para terminar tenemos compiladores / empaquetadores de JS como Babel y

También tiene sus frameworks ej:

-Django: la gente que trabaja python

Además un backend tiene que ver dónde va subir el deploy de su aplicación y

Un Desarrollador Fullstack es alguien que tiene conocimientos tanto del Front-

Sin dudas tiene un alto conocimiento acerca de una aplicación web.

Pero Hey! Ellos tienen sus áreas de especialización, ya sea Front-end o Back-end

Sitos Web Estáticos: La información que contiene, se mantiene constante y estática.

Conveniente para landing pages (Páginas informativas) o Blogs.

Serán diferentes, dependiendo del usuario que la use.

Index y su estructura básica: head (clase 7)

<metaname="description"content="Esta página te mostrará fotos de

Index y su estructura básica: body (clase 8)

body es la parte visible de nuestro website 😃. Es muy importante usar HTML

<header>

<nav></nav><!--Sección de navegación de nuestro website, siempre

<main><!--Main es el contenido central de nuestro website, "la

<ul>

<ol></ol>

<footer>

<p>Soy un texto</p>

 Tiny PNG: Comprime el tamaño de una imagen, para hacerla más

El elemento HTML <figure> representa contenido independiente, a menudo con

La etiqueta <video>, tiene algunos atributos como:

2. preload = auto: hace que el navegador descargue el video, en el

loop: reproduce continuamente el vídeo, es decir, una vez acabada la reproducción

Etiqueta from e input

Es importante utilizar la etiqueta <form></form> para indicar que utilizaremos un

También está el atributo placeholder para colocar un texto como guía dentro de la

El elemento HTML <input> se usa para crear controles interactivos para formularios

 El atributo autocomplete = “tipo-del-input” hace que el navegador

 El atributo require, evita que se envíe información del formulario, si el

2. Etiqueta <input list = “”>: De este modo, se puede utilizar una

Pseudo clases y pseudo elementos (clase 23)

Al igual que las pseudo-classes, los pseudo-elementos se añaden a los selectores,

:first-child para afectar solo al primer hijo - se coloca

:last-child para afectar solo al último hijo

:not negar una condiciones (ignorar una condición) ejemplo

Anatomia de una Regla de CSS (CLASE 24)

HERENCIA (CLASE 26)

Combinadores: Abjacent Siblings (combinators) (clase 30)

El combinador hermano adyacente ( +) separa dos selectores y coincide con el

EM = es un acrónimo de elemento y lo que hace es tomar el tamaño de fuente

Y como estamos asignándole 2 em sería como 20px + 20px

Y si por ejemplo tenemos el siguiente caso:

a continuación veremos que la etiqueta p tendrá un tamaño de fuente de 60px

Vamos a reescribir en css nuestro html

Max/Min width (clase 36)

Una regla importante cuando vayamos a utilizar el min y el max en el width,

Static: Posición por defecto de los elementos, conservan la posición y espacio de

En un elemento con display:inline no puedo usar margin ni

En un elemento con display:block el contenido del elemento

En un elemento con display:inline-block, se puede usar

Etiquetas como p y div vienen por Default con un

Display Flex (clase 40)

Sus valores por defecto son:

Distribución del espacio

Estas 3 propiedades se juntan en flex:grow shrink basis;