Curso de HTML y CSS

Curso de
Bagde HTML y
del
curso CSS
Diego De Granda
@degranda10
@degranda
Web
Developer
Fundamentals
Cosas que debes saber en el
mundo del Desarrollo
W eb
Perfiles de un
Web
Developer
Front-
end
(Cliente)
Estándare
s
Frameworks de
CSS
Frameworks y librerías de
JS
Preprocesadores de
CSS
Compilador /
Empaquetador de
JS
Back-
end
(Servidor)
Lenguajes de
programación
Framework
s
Infraestructur
a
Bases de
datos
Full
Stack
Páginas
estáticas vs
dinámicas
Páginas estáticas vs
dinámicas Static
Server Client/browser
Dynamic
Web Database
Serve Server Client/browser
r
Páginas
estáticas
(Landing pages)
Páginas
estáticas
(Landing pages)
Páginas
dinámicas
(Web Apps)
Páginas
dinámicas
(Web Apps)
HTML
Hypertext Markup
Language
Anatomía de
una Página
Web
CONTAINE
R
LOGO
HEADER
NAVIGATION
MAIN SIDEBA
CONTENT R
FOOTER
Anatomía
Platzi
(Web Apps)
Index y su
estructura
básica
Anatomía
de una
etiqueta
Opening
Tag
Attribute Attribute
Name Value
<a href=”http://dabrook.org”>Visit
DaBrook</a>
Attribute
Element
Etiquetas
multimedia
Si tiene un
subtítulo
Tipos de
imágenes
Lossy vs
Lossless
Con pérdida / Sin pérdida
Existen dos tipos de imágenes, sin

pérdida o con pérdida, y esto depende
de cómo el formato maneja las
imágenes.
Lossles
sin pérdida
S
Los formatos de imagen sin pérdida

capturan todos los datos de su archivo
original. No se pierde nada del archivo
original, foto o obra de arte, de ahí el
término "sin pérdida". El archivo aún
puede estar comprimido, pero todos los
formatos sin pérdida podrán reconstruir
su imagen a su estado original.
Loss
yon pérdida
C
Los formatos de imagen con pérdida se

aproximan a su imagen original. Por
ejemplo, una imagen con pérdida podría
reducir la cantidad de colores en su
imagen o analizar la imagen en busca de
datos innecesarios. Estos reducirá el
tamaño del archivo, aunque pueden
reducir la calidad de su imagen.
Por lo general, los archivos con pérdida
son mucho más pequeños que los
archivos sin pérdida, lo que los hace
ideales para usar en línea donde el
tamaño del archivo y la velocidad de
descarga son vitales.
GIF -
Lossless
Graphics Interchange Format
PNG 8 -
Lossless
Portable Network Graphics
PNG 24 -
Lossless
Portable Network Graphics
JPG / JPEG -
Lossy
Photographic Experts Group
SVG -
Vector/Lossless
Scalable Vector Graphics
Tabla de
diferenciasCategoría Paleta Uso
● Animaciones simples
GIF Lossless Máximo 256 colores
● Gráficos con colores planos
● Uso de transparencia
PNG-8 Lossless Máximo 256 colores ● Sin animación
● Ideal para íconos
● Similar a PNG-8
PNG-24 Lossless Colores ilimitados ● Maneja imágenes fijas de
más colores y transparencia
● Imágenes fijas
JPEG Lossy Millones de colores
● Fotografía
● Gráficos / logotipos para web

SVG Vector / Lossless Colores ilimitados ● Retina / pantallas de
alta resolución
Optimizand
o
imágenes
Tamaño
promedio
Opciones para
trabajar las imágenes
● Mejora el tamaño de tus
imágenes
○ Tiny PNG
● Retira metadatos de tus
imágenes
○ Verexif
Etiqueta img y
figure
Etiqueta
video
Formulario
s
El mejor
formulario, es
cuando no lo hay
El
usuario
Etiqueta form e
input
Input type
submit vs.
Button
CS
S
Cascading Style
Sheets
¿Qué es
CSS?
¿Cómo inicio con
CSS?
Pseudo clases y
Pseudo
elementos
BEM
(Para nombrar clases en css)
Diferencia
s
Pseudo classes
Define el estilo de un estado especial de un elemento.
:class
Pseudo elementos
Define el estilo de una parte específica de un elemento.
::element
Anatomía de
una regla en
CSS
Selector
P {
color red
:Property ;
{
Property
value
Declaration
Modelo de
caja
TOP
MARGIN
BORDER
PADDING
HEIGHT
LEFT CONTENT RIGHT
WIDTH
BOTTO
M
MARGEN COLOR IMAGEN RELLENO BORDE CONTENIDO
(Transparente) DE DE (Transparente)
FONDO FONDO
Herenci
a
Herenci
a
Código
Orden de
declaración
¿Cómo se controla el
orden al declarar
CSS?
1. Importancia
2. Especificidad
3. Orden en las
fuentes
La importancia es uno de los conceptos
más… pues… importantes (haha, ya sé!).
Si dos declaraciones tienen la misma
importancia, la especificidad de las
reglas decidirá cuál se debe aplicar. Si
las reglas tienen la misma
especificidad, el orden de las fuentes
controla el resultado final.
Importanci
a
1. Hoja de estilo de agente de
usuario (Estilos del navegador)
2. Declaraciones normales en hojas
de estilo de autor (Nuestro .css)
3. Declaraciones importantes en hojas
de estilos de autor (utilizar el !
important)
Especificida
d
Selectores Especificidad
!important 1,0,0,0,0
Inline styles 0,1,0,0,0
#id 0,0,1,0,0
.class 0,0,0,1,0
tag 0,0,0,0,1
Reglas de
cascada
No No No
¿Los
Conflicto Diferente Utiliza las
en la
¿Tiene selectores
declaraciones que
origen tienen una
declaració algún vienen en su fuente
o especificidad
n Inline original
! diferente?
style?
important
Sí Sí Sí
Utiliza la declaración
Utiliza las Utiliza las
con el origen de
Inline declaraciones con
mayor prioridad
declaration mayor especificidad
Orden de las
fuentes
En tus estilos, las declaraciones al final
del documento anularán a las que
sucedan antes en caso de conflicto.
Demo de Especificidad
y orden
Combinadores
(combinators)
Los
combinadores
Combinators
Nos permiten combinar múltiples
selectores y crear una mayor
especificidad.
Hermano adyacente o cercano Hermano general
Adjacent sibling General sibling
div + p { div ~ p {
... ...
} }
Hijo Descendiente
Child Descendant
div > p { div p {

... ...
} }
Medidas
(Absolutas vs.
Relativas)
Medida
s
Absolutas Relativas
px %
em
rem (root em)
max-width / max-height
min-width / min-height
vw (viewport width)
vh (viewport height)
Positio
n
Posicionamiento de
elementos
<html>
<body> Position
static Por defecto

<div
> absolute
relative
<div fixed
> sticky
<div
>
Desafí
o
Texto
ejemplo
Algo de texto ejemplo que irá de éste lado del

contenedor, Lorem ipsum, dolor sit amet
consectetur adipisicing elit. Officiis corrupti
expedita eius illo minima, at dolorem similique
facere omnis voluptate, incidunt assumenda
vitae ratione. Adipisci placeat similique
veritatis fuga mollitia!
Displa
y
Display
Flex
Variables
(custom
properties)
Font
s
Generic-
families
Genericas Fuentes
serif Times New Roman Georgia
sans-serif Helvetica Verdana
cursive Dancing Script Great Vibes
monospace Courier New Roboto Mono

Web
Fonts
Buena
práctica
● Solo cargar 1 fuente por proyecto
● Importarlas siempre en la etiqueta
head
Responsive
Design
Multiplataforma
Media
Queries
Mobile First /
Only
Mobile First /
Only
Patrones de
maquetación
Responsive
Design
Mostly
Fluid
Layout
Shifter
Column
Drop
Recomendació
n
Separa siempre tus archivos de
CSS por break point
● mobile.css / style.css
● tablet.css
● desktop.css
Responsive
Imágenes
Imágines
responsivas
width:100%; /* Es tu mejor amigo!

*/
Accesibilida
d
¡Productos para
todos!
Semántic
a
CONTAINE
R
LOGO
HEADER
NAVIGATION
MAIN SIDEBA
CONTENT R
FOOTER
Texto
s
Labels, alt y
titles
Keyboar
d
(outline)
Contraste de
colores
Felicidades!!
🎉
Próximos
pasos
¿Y ahora
qué?
Curso Mobile
First
Próximos
cursos
● Curso de Grid layout

● JavaScript Básico
● Curso de V8 y el
navegador
● Curso de Chrome Dev
Tools
● Curso de ES6
Diego De
Granda
@degranda10 @degrand
a

Curso de HTML y CSS

Cargado por

Copyright:

Formatos disponibles

Curso de HTML y CSS

Cargado por

Información del documento

Descripción original:

Título original

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 de HTML y CSS

Cargado por

Copyright:

Formatos disponibles

Curso de

Existen dos tipos de imágenes, sin

Los formatos de imagen sin pérdida

Los formatos de imagen con pérdida se

● Gráﬁcos / logotipos para web

Inline styles 0,1,0,0,0

div > p { div p {

rem (root em)

static Por defecto

Algo de texto ejemplo que irá de éste lado del

serif Times New Roman Georgia

sans-serif Helvetica Verdana

cursive Dancing Script Great Vibes

monospace Courier New Roboto Mono

width:100%; /* Es tu mejor amigo!

● Curso de Grid layout

También podría gustarte