Scribd
Cargar
40 vistas1 página

Curso Definitivo de HTML y CSS - Apuntes

Cargado por

Samuel Márquez
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
40 vistas1 página

Curso Definitivo de HTML y CSS - Apuntes

Cargado por

Samuel Márquez
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd

COSAS QUE SOLO SE

RANDOM YA LO ESTABA OLVIDANDO BUSCAN EN GOOGLE


BASES orden de las fuentes:
en tus estilos, las declaraciones al final del documento
anulan a las que sucedan antes en caso de conflicto
Y YA
Esta propiedad es lo mejor, asi de simple

pero

mira el curso de dalto para ver su explicacion

Esta propiedad es super extensa


asi que vela en la clase de curso de css Propiedad que lo que hace es modificar
de dalto el comportameinto de las cajas, no
tnato la interaccion entre las cajas, sino
o busca su documentación el comportamienot,
ve la clase
Object position

Los IDs son específicos, si se usa uno en un archivo HTML


ya no se podrá repetir más en ese mismo archivo.
Las clases si se pueden repetir en cualquier elemento.
Un estilo de etiqueta es el último valor que el navegador
tiene en cuenta antes de tomar los estilos por defecto de buscalos - son muy útiles
esa etiqueta. Display
NOTITA:
recuerda que estos se pueden sumar los unos a los otros El patrón Layout Shifter:
en este orden se cargan al momento usar varios en uno solo se inicia en un diseño
los estilos: vertical y al crecer la
1 (estilo del navegador) pantalla se
1.- importancia
2 declaraciones de la re reposicionan los
2.- especificidad
hoja de estilo del elementos para dar un
3.- orden de las fuentes
developer layout diferente
(lo que esta al final de la
3 declaraciones con PATRONES
cascada)
!important (en la la hoja RESPONSIVE PQ SON
de estilo del developer) SELECTORES especificidad MUY UTILES
!important 1.0.0.0.0 (evítalos)
inline styles 0.1.0.0.0 (evítalos) Otras propiedades
filter
#id 0.0.1.0.0
cómo se controla el .class 0.0.0.1.0
orden al declarar cosas tag 0.0.0.0.1
pseudo classes
importancia :class OJO
más a la izq = más importante para navegador
sirven para estar a la escucha define el asi creas ubna vairbale llocal solo
estilo de un estado especial de un elemento disponilbel apra elementos p

CSS
WTFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF LOs primeros dos d la lista de aqui no
pero por que se tiene qeu usar lo de funcionan con inline pseudo clases y elementos:
pseudo elemento
content pero hay un pequeño detalle, mira,tu
especificidad: manera mediante la cual los navegadores elemento que no es eleemento pq no forma
deciden qué valores de una propiedad CSS son más parte del dom pero si c se ven cambio puedes declara runa vaiable de
relevantes para un elemento y, por lo tanto, serán Los pseudo elemeots que requieren de la visual, es como el outline manera global pero, si la pones a ujn
aplicados. etiqeuta content no forman parte del dom ::elemento elemeneto en especifico y le cambias
AQUI TENOG DUDA el valor es valido eso se veria, pero eso
define el estilo de una parte específica de
un elemento si solo funcionarai al aplicarselo a esos
elementos en especifico
cuando se crean un elemento after lo qeu
OUTLINE: se haces es que se crean elementos hijos
shorthand porpertie, es como un border, del elemento al que lo aplicamos
genera un border pero sin afectar a las
RESPONSIVE DESIGN demas cajas, no ocupa un espaico rela en el
especificidad en los
DOM - ve la clase del curso de CSS de
selectores
Media Queries: dalto
breakpoints:
se agregan: variables
esta dimensión en el viewport o el width de la
pantalla - que vas a generar un cambio - este
@media (min-width: tu ya sabes
cambio va a ser donde puedo posicionar OJO
480px) pero si la pones en el root es global
ciertos elementos o redimensionar pa q c
pueda vea bien sin importar el aparato si hay 2 o mas reglas aplicadas a un solo elemento es importante entender cul toma la presedencia Object fit Ubicar elementos
ese px es el breakpoint
si los dos selectores son iguales el ultimo de los dos toma la prescedencia. como en el i

CSS
si uno de los selectores es mas especifico que otro el que es mas especifico tomara la presendencia
heredaciones
etiqueta important: se puede añadir despues de caulquier valor de propiedad para indicar que debe de ser considerado mas importante
que otras reglas en ese same statement
<!DOCTYPE html>
MOBILE FIRST: es comenzar haciéndolo adaptado a cascade
<html lang="en"> backgorund
celular y luego lo haces crecer a más Esta propiedad es lo mejor, asi de simple
USA LA CALCULADORA DE ESPECIFICIDAD <head>
<meta charset="UTF-8"> ve la clase
pero
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
mira el curso de dalto para ver su explicacion
<!DOCTYPE html>
<html lang="en"> <link rel="stylesheet" href="style.css">
/*hay dos tipos de metodologías cuando usamos
<head> <title>Document</title>
responsive
<title>Document</title> </head>
mobile first
<link href="styles.css" type="text/css" rel="stylesheet"> <body>
desktop first
<style>
recomendado mobile-first /* si especificas propiedades como font family o color en el <div class="contenedor">
body estas se van a aplciar al los hijos y te salva de tener <div class="caja1"> </div>
también está content first: no es responsive como tal pero que aplicarle estas propiedades a muchos elementos */ <div class="caja3 "> </div>
es una metodología que dice, vamos a agarrar el /* propiedades como background color o border no son <div class="caja4 "> </div>
contenido y lo vamos a estructurar*/ heredadas */ </div>
/* se peude obligar a unas porpiedades a ser heredadas */
el root hace referencia al body { <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> Cubic bezier
html font-family: Arial, Verdana, sans-serif;
Overflow color: #982398; <div class="con2"> OJO, google
Variables es como la raíz el punto padding: 100px; <div class="elemento"> </div>
nada mas sepas que de partida del proyecto } </div>
existe y que tiene sus .page {
propiedqades las Variables van es esta border: 1px solid #971429; </body>
etiqueta background-color: #478129; </html>
padding: inherit;
tiene su pqqueñitas }
deferencias html{
background-color: black;
Animaciones
solo googlealas y ya }
</style>
OJO, solo ve la clase del curso cuando lo
</head> .contenedor { Transition

CSS
necesites, no es del todo necesario tomar
<body> width: 1000px;
notas aqui
<div class="page"> height: 1000px; OJO, la verdad entiendo poco de esto asi
Transform
<h1> patatas </h1> background-color: black; que cuando lo uso o para que????? ve la
<p> hay varias variedades de esta </p> border: 2px solid salmon; clase del curso por que aun asi, no la
OJO, bastante util google
<p> sueles ser describidas como duras y suaves, pero las } necesito cada 2 x 3
duras son las mas ricas </p> PROPIEDAD GOOOOOOOOOOOOOOOOD clip path
</div>
normalize .caja1 { OJO, bastante util -google
Normalize CSS corrige algunos bugs que
</body> width: 100px;
existen en las estilizaciones estándares de
</html> height: 100px;
los navegadores.
position: relative;
margin: 50px;
background-color: white;

/*rigth y botom no son muy usados*/


top: 100px;
left: 10px;
} lo que hacen es transofmrar el
elemento objeto de varias forma
.caja3 { propiedad que nos permite realizar
el clip path es algo bastante util para
width: 100px; trnasiciones dentro de los elementos
generar formas
height: 100px; trancisiones: ir mostrando todos los
margin: 50px; frames de diferencia entre un estado
ANATOMÍA DE UNA REGLA DE CSS
u otro
(Estructura)
background-color: white;

/*hace lo que hace relative pero deja que las demas cajas se corran para dejar que ocupen el
espacio que esta ocupava*/
position: absolute;
top: 250px;
left: 20px;
}

Cajas
.caja4 {
sepas que margin auto solo sirve de que
width: 100px;
para centrar, OJO los elementos bloque y
height: 100px;
que no estan posicinados
margin: 50px;
propiedad que nos permite realizar
background-color: white; trnasiciones dentro de los elementos
Nota R border box: solo le hace caso a el width y
/*aqui nos lo toma desde la ventana pero con este aunque le hagas un scroll no se va a mover*/ trancisiones: ir mostrando todos los
Sepas que existe una propiedad llamada order height
/*si le pones un static a position estas quedan invalidad y no les hara caso */ frames de diferencia entre un estado
con la que puedes cambiar el orden html de los Selectores u otro
position: fixed;
ebjetos content box: los va a sumar
top: 400px;
left: 30px;

/*suponeniedno que pones float: left para que le aplique a todos, todos se pondran alineados en
horizontal*/
}

Postion
.con2 {
width: 1000px;
height: 1000px;
En linea background-color: blue;
Selectores que no conocia selectores que ya conocia
}
<address> En bloque
Información de contacto. b, big, i, small, tt
Combinadores .elemento {
<article> abbr, acronym, cite, code, dfn, em, kbd,
width: 100px;
Contenido de Articulo. strong, samp, time, var
height: 100px;
<aside> a, bdo, br, img, map, object, q, script,
Lo que hace es posiconar los elementos, margin: 50px;
Contenido adicional. span, sub, sup
universal selector: aplicaa todos los elementos del documento: esto siginifica que adquiere nuevas background-color: orange;
<audio> button, input, label, select, textarea
child selector: * {} propeidades las porpeideades qeu adquiere
Reproductor de audio /*no sirve para vertical*/
matches un elemtno que es directamente un targets all elements on the page cuando posicona nos dejasn ahcer varias
<blockquote> /* margin: 0 auto; */
child de otro el asteristo literalemnte lo selecciona todo cosas ej top right left bottom z-index
Bloque de "cita".
li>a {} <canvas>
nos permiten combinar múltiples selectores y crear /*de esta manera no le importa el contendor, se basa en la ventana*/
targetea cualquier elemento <a> que son Dibujo canvas.
una mayor especificidad type selector: valores position: absolute;
childrens d eun <li> elemento <dd>
con este selccionas uno solo que este alli de esle elemneto matches element names: static - el que es por defecto (o sea top: 50%;
(pero no otros elementos a en la pagina) Descripción de definición.
tendremos una especificidad más alta y certera y nos plate apple:only-of-type h1, h2, h3 {} A los elementos en linea, no se les puede dar basicamnete no ceunta, asi que efocate en left: 50%;
<div> height y tampoco width transform: translate(-50%, -50%);
ayudará a no tener id's o etiquetas lso demas 4)
División de documento.
con ellos no vamos a tener que estar usando tanta adjacent sibling selector (o sea al siguiente): <dl> a los elementos en bloque si se les puede dar /*tambien se puede centrar con flex*/
clase y así matches an element that is the next sibling of plate orange:first-child{ } class selector: relative: el espacio se conserva, pero al fin y
Lista de definición. height y width
the another une elementos cuyos atributos de clase tiene un valor que une al cabo ya se pueden usar las 4
<fieldset> /*y tambien se puede de esta forma*/
h1+p {} especificamente despues de un periodo propiedades
Etiqueta de conjunto de campos. /* display: grid; */
targetea el primer elemento p despues de asi seleccionas a lso elementos que tengas ciertas atributo .note{}
<figcaption>
cualquier lemento h1 [href]{} (targets any elements whose class atributte tiene un valor de note)
Leyenda de figura. }
p.note {} OJO - CON ASBOLUTE VUELVE A VER LA
<figure>
general sibling selector: (targets only elemntos p que tengas el atributo clase con valor note) CLASE DEL CAUSO DE CSS DE LUCAS
Grupos contenido multimedia con una leyenda (ver
matches an element that is a sibling of .padre div:nth-child(3){ DALTO
hermanos adyacentes: <figcaption>). .grid .grid-item {
another, althoungh no tiene que ser el width: 500px; Display: ya lo conoces absolute: el espacio no se conserva,
p + img <footer> align-self: center;
elemento directamente anterior. height: 500px; id selector: literalmente comienza a volar
todos los img que aparezcan después de un elemento p Sección o pie de página. justify-self: center;
h1~p {} background: blue; matches an eleement whose id attribute has a value that matches el que
<form> }
si tienes dos p que son hermanos dle h1 eta } esta especificado despues del pound o has simbolo tu le puedes poner position absolute a un
elementos hijos: Formulario de entrada.
regla aplica a ambos #introduction {} elemento (ojito que no esta en la esquina
article > p <h1> (en-US), <h2> (en-US), <h3> (en-US), <h4> (en-US), <h5>
targetea un leemnto cuyo valor del atributo id es introduction superior izquierda) y le pones top 0 bueno
esto aplica en los hijos directos o sea el primero (en-US), <h6> (en-US)
si le pones un 2 no te hara nada pq no va aa encontrar un bento en la segunda posicon de ahi se va a ir hasta esa esquina superior
Niveles de cabecera 1-6.
asi que le debes de poner en el tres pq si hay peror hasta el 3 y izquierda ojo si esta en un contendor se wa
hermanos generales: <header>
es que aparte cuenta del uktimo para atras descendant selector: a esa esquina del contenedor
p ~ img Sección o cabecera de página.
bento:nth-last-child(3) matches elemntos que son descendientes de otro elementos
todos los img que estan despues de un p <hgroup>
especificados
Grupos información de encabezado. Padding - ya lo conoces
p a {} fixed :. igual que abolute pero queda fijado
<hr>
existe: targetea un cualquier elemento a que ese dentore de una etiqueta p tambien sudede que el bloque se ajusta al
Regla Horizontal (línea divisoria).
plate:nth-of-type(odd) incluso si hay other element nested between them contenido, Cuando tu hagas animaciones
<li>
e OJITO, hay un detallito con repesscto a SIEMPRE PERO SIEMPRE TOMA EN
Elemento de lista.
plate:nth-of-type(even) esto, esta en el minuto 2:43:45 CUENTA QUE DEBES DE USAR
<main>
div h2, div h3{ EL
Engloba el único contenido central del documento.
color: rgb(211, 175, 32) TRANSFORM: TRANSLATE
<nav>
googlea de este por que la verdad no lo entiendo } sticky: conserva el espacio, pero se queda
Contiene enlaces de navegación. NOTA: OJO
bento_empty pegado es como un fixed peron no pierde ESTO NO CONSUME CASI RECUERSOS
<noscript> height con el z-index
su espacio y tambien se comporta como un
Contenido para ser usado si los scripts no son soportados width si tu quieres poner un elmento hijo por arriba
fixed cuando llegamos al punto en el que le
o permitidos. ya los conces de su padre, o sea el contenedor del
apple:not(.small) decimos
<ol>
Lista ordenada. te acuerdas de la propiedad box sizzing: (el contendor o padre contiene al hijo )
caund posicnamos un elemento hacemos
<output> (en-US)
que adquiera 4 propiedades nuevas
Formulario de salida. sirve para definir si va a sumar tanto el le pones position relative a los dos, tanto al
top // mas improtante se le hace mas caso
<p> height con su padding y el width con su padre como al hijo
a estas
Párrafo. padding y en el padre NO le vas a definir el z index
rigth // si top y left no estan esta
<pre>
propeidade si funcionan
Texto preformateado. border box: solo le hace caso a el width y EN el hijo si se lo va sa poner
left // mas importante se le hace mas caso
<section> height pero OJO le va sa poner un valor de -1
a estas
Sección de una página web.
botoom // si top y left no estan esta
<table> content box: los va a sumar
preopiedead si funciona
Tabla.
<tfoot> (en-US)
Pie de tabla.
caundo un elementos est poscionado
<ul>
singifica que va a afectar el flujo, el flujo de
Lista no ordenada.
html orden en el que ponemos todos los
<video>
elemntos
Reproductor de vídeo. NOTA:
border: es una shorthand porpertie para colo
forma y grosor no se le da mediads como tla
OJO y lo quiero volver a decir
el Z-index solo funciona cuando las cajas
estan posicionadas tmabien top left right y
bottom

BOX MODEL:
1 - content
2 - padding
Padding: ya lo conoces 3 - border
border-radius: ya lo conoces 50% (circulo 4 - marign
total )
box-shadow: ya lo conoces googlea todos tienen una rango de jerarquia y se aplican uno por
encima del otro
transform: rotate - esa no estan !facil - es
solo para rotar elementos content: modificado por el line height

padding: padding
yo solo digo que OJITO CON ESTA MANERA DE SELECCIONAR border: border
marign: margin

GIF - sin pérdida


ocupa gama de 256 colores - no c puede
hacer mas ligera (no comprimible)
graphics interchange format

PNG 8 - sin pérdida


logotipos o iconos
ocupa hasta 256 colores - no c pierde
mucho pq no hay tanto color en la imagen

PNG 24 - sin pérdida


hay más de 256

JPG/JPEG - con pérdida


formato para fotografía - no logotipos o
iconos
ligero

SVG vector - sin pérdida


muy ligero

Formatos

Lossy
tiene pérdidas de calidad (nos ayudan a
perder calidad)
pero mejora el tamaño y el tiempo de carga
Lossless (sin pérdida):
no pierde calidad en general archivos con perdida son mas
pero puede ser pesada y tarda en cargar pequeños que los que no tienen perdida los
que las hace buenas para el usarlas en linea
todo lo que necesita el navegador para que
y cargan rapido al navegador
el proyecto pueda cargar en la forma que
le dijimos. el usuario no ve lo que hay en el
entonces usas las de perdida
head
(su título y enlaces a scripts y hojas de
estilos y metadatos)

etiquetas meta: le dan cierta información al


navegador para que sepan como tratar
nuestro proyecto
Que va en el head:
Tipos de imágenes:

!facil
HTML
4 tipos de media queries:
all: apto para todos los dispositivos

HTML
print: destinado a material impreso y (al fin y al cabo son condicionales)
ayudan a consultar:
visualización de documentos en una
ancho y alto ventana y dispositivo
pantalla en el modo de vista previa de @Media: se usa en consultas de medios
orientación (la tableta o teléfono esta
impresión para aplicar diferentes estilos para
en horizontal o vertical?) facil
screen: destinado principalmente a las diferentes tipos/ dispositivos de medios
resolución Media Queries
pantallas
speech: destinado a sintetizadores de
voz

semántica de html:

////////////////////////////////// main
for the main content of a webpage, unique to that page

////////////////////////////////// section
defines a section in a document (bloglist contact info)
puedes tener muchas

////////////////////////////////// article
composición independiente en un documento

////////////////////////////////// aside
The <aside> element defines some content aside from the content it is placed in (like a sidebar).

The <aside> content should be indirectly related to the surrounding content. relaciones entre
ejes de padres e hijos
////////////////////////////////// header alineamiento inmediatos
The <header> element represents a container for introductory
content or a set of navigational links.

contains:
one or more heading elements (<h1> - <h6>)
logo
authorship information
Note: You can have several <header> elements in one HTML document. However, <header> cannot be
placed within a <footer>, <address> or another <header> element.

Similitudes
////////////////////////////////// footer:
The <footer> element defines a footer for a document or section.

A <footer> element typically contains:

authorship information
copyright information
contact information
sitemap
back to top links
related documents
You can have several <footer> elements in one document.

////////////////////////////////// nav
The <nav> element defines a set of navigation links.

////////////////////////////////// figure - figcaption


The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code listings,
etc.
representa contenido independiente,

The <figcaption> tag defines a caption for a <figure> element. The <figcaption> element can be
placed as the first or as the last child of a <figure> element.

<!-- HTML semantico:


la principal ventaja de usar HTML semántico reside en que el contenido del sitio web estará
correctamente estructurado. Esto, claramente, repercute en aspectos de posicionamiento,
accesibilidad
y relación con los motores de búsqueda, tal y como verás a continuación.

definir la estructura del documento y permiten que las páginas web sean mejor indexadas por
los
buscadores. Una etiqueta se califica como semántica si tiene que ver el significado, es decir,
si nos informa sobre l--> para los
componentes de
una aplicación y
diseños de pequeña grid para diseños
escala de mayor escala. ej

cuando trabajar
cuando trabajar
con flexbox
con grid

etiquetas contenedoras:
llevan más etiquetas adentro y ayudan a RECOMENDACIONES Conceptos datos / cosas extras
generar la estructura de la página EJEMPLO

<!DOCTYPE html>
las de contenido: <html lang="en">
son las que llevan el texto las imagenes, <head> tokens: menos es más
videos y cualquier cosas que se pueda <title>Document</title> https://www.atsistemas.com/es/bl a veces miestras mas simple es orden por el que deberías de comenzar a maquetar
renderizar en el proyecto <link href="style.css" type="text/css" rel="stylesheet"> og/que-son-tokens-diseno mejor
<style> block: ilustraciones animadas
juega al papel de usuario con tus flujo normal planifica antes de escribir código microinteracciones (cambios
.contact-form__input:first-child{ https://www.shopify.com/blog/sea se extienden masonry layout: Pero, ¿para que sirve Feature Query?
propios bocetos cómo se jerarquía visuales detalles visuales)
color:blue; rch?q=design ocupando todo el Layout: diseño - es un layout en el que están acomodados los Pues sencillamente le dice al navegador
se tu tester comportan los contraste vistas 3d
} espacio disponible organizacion de los elementos como en pinterest - busca su que si soporta cierta propiedad o
elementos de html proximidad realidad virtual
https://polaris.shopify.com/design/ para ellos elementos documentacion para uqe veas valor CSS, lo aplique. Si no la soporta,
por defecto balance realidad aumentada
/* los quiones medios dicen son todos los imputs uqe esten adentro de un contact form design pues no leerá absolutamente nada de lo
perohay uno que es especial*/ inline... neomorfismo
que le diga el Feature Query. Por lo que recomendaciones de UI
.contact-form__input--active{ jugar con layouts asimetricos
lee mucho se ahorra el verificar toda esa cascada
color:green; como este
en: de información inútil.
}
bloque: smashing magazine
etiquetas de contenido y etiquetas medium
elemento autonomo reusable en caulquier </style>
contenedoras: usa la regla de 4 mdn
otro sitio de la pagina (que probablemente </head> BFC display
BEM: block element modifier (en medidas múltiplos de 4 ) método ayudar
anatomía de una etiqueta html: reusaras) Es un layout desplegar/ colocar a la vista/ exhibir/ sistema de diseño
pequeño, dentro de mostrar distribuit espacio
que permite alinear
nuestro layout define el tipo de visualización de un elemento en el layout y los detalles son importantes pero una vez tengas la estructura
modifcadors: <body> elementos en
principal. esa visualización tanto interna como interna mejorar la no desde el comienzo principal haces el html
classe que puedes añadir para cambiar // la metodlogia bem se hace por bloque o contenedores consulta de caracreristicas columnas y filas
alineación resalta partes importantes de un
apariencia o comportamineto de bloqeus y <div class="contact-form"> es bidireccional
este es diseño planifica antes de diseñar y antes
elementos usados para difenrencias las <input type="text" class="contact-form__input ">
unidireccional y luego te enfocas en los detalles de escribir cualquier línea de
metodologia:conjunto de distintas vartiables de un bloque o elemento <input type="text" class="contact-form__input ">
de alto nivel código
reglas para que las sigamos y <input type="text" class="contact-form__input--active "> usa frameworks de css - tailwind @supports otorga la habilidad de
metodologia y metodologia preugntate: usar la guia de shopify
creamos codigo mas <input type="text" class="contact-form__input "> realizar consultas que comprueben si
bem este torzo de pagina web se usaria por si para lo que es el design system
limpio/organizado/matenible/si <input type="password" class="contact-form__input"> ciertas funcionalidades están
n afectar otras cosas mismo? si, tonces es un bloque </div> disponibles (feature query).
cajas permite la reutilizacion y evita que si el trozo depende de otro o no tiene sentido
linea y bloques repitas codigo por si mismo - es un elemento grid
añade especificidad consistente a <div class="contact"> tendencias de

HTML
flexbox
todo el proyecto <p class="contact__p"> diseño UI/UX
aumenta indipendencia del codigo <h2 class="contact__p-h2"> </h2>
</p> plan maestro
</div> fuente de toda la
usa figma como github para
</body> verdad
diseñador e igual pinterest
</html> referencia para
asegurarse de que
todos hacemos la
anatomía de una página web:
CSS feature queries @supports misma página
header
En linea anatomía de una página web main content ej
sidebar 1 mejor trabajar con componentes estos componentes
<address> En bloque footer tienen una guia clara para poder trabajarlos - design
quiero hacer un reproductor
Información de contacto. b, big, i, small, tt system
musical mobile first
<article> abbr, acronym, cite, code, dfn, em, kbd, las empresas crean los suyos
2

FLEXBOX
Contenido de Articulo. strong, samp, time, var antes de hacer un diseño usan colección componente reusables color logotipos
hacer un boceto (wireframe)
<aside> a, bdo, br, img, map, object, q, script, 1 saber lo que quiero encabezados pies de página formularios código etc
3 pensar en guia de estilos Basada en
Contenido adicional. span, sub, sup páginas estáticas/ dinamicas: 2 hacer un boceto usando conjunto de estándares guían esos componentes -
&&&& dinámicas (igual conocidas como webapps): neomorfismo necesidades de un
<audio> button, input, label, select, textarea (wireframe) consenso de cómo diseñar
También conocidos como aplicaciones web, actualizan design system equipo y producto
Reproductor de audio 3 pensar en la guia
Front-end y su información con respecto a la interacción del tem
<blockquote>
backend: usuario. wireframes y comunicación
Bloque de "cita".
Dependen de una base de datos, de donde extrae e visual simple intuitiva y

Y GRID
<canvas>
ingresa información. atractiva
Dibujo canvas.
Serán diferentes, dependiendo del usuario que la use y
<dd>
la información que se ingrese.
Descripción de definición. A los elementos en linea, no se les puede dar
<div> se hace un inventario
height y tampoco width colores logotipos encabezados pies de página formularios
División de documento.
<dl> código
a los elementos en bloque si se les puede dar se llega a un consenso de cómo diseñar
Lista de definición. height y width
<fieldset> &&&& Front-end: uno de ellos trabaja del lado Todos los hijos van
&&&& estáticas a respetar el z
Etiqueta de conjunto de campos. del cliente o del navegador. a los &&&& Back-end: esto trabaja del lado del La información que contiene se index del padre y
<figcaption> navegadores se les conoce como cliente servidor. mantiene constante y estática. no serán mayores DIsplay
Leyenda de figura. tecnologías que trabaja: esto no tiene un estándar y tiene varios No se actualiza con la interacción del que los hermanos BFC (block
<figure> los estándares: HTML CSS JS lenguajes de programación usuario. mayores formatting
Grupos contenido multimedia con una leyenda (ver frameworks de css: bootstrap estos lenguajes también tiene sus Es conveniente para realizar landing context)
<figcaption>). frameworks de js react angular vue frameworks pages (páginas informativas o de
<footer> preprocesadores de CSS: less sass stylus infraestructura ejemplo:
aterrizaje) o blogs.
Sección o pie de página. compilador/empaquetador de JS: babel bases de datos display grid:
Se mostrarán siempre iguales para
<form> webpack lo que de verdad decimos:
todos los usuarios. apilamiento z index block e inline
Formulario de entrada. display:block grid
definen:
<h1> (en-US), <h2> (en-US), <h3> (en-US), <h4> (en-US), <h5> está solicitando un contenedor grid a nivel
el valor externo de
(en-US), <h6> (en-US) bloque
es un layout visualización
Niveles de cabecera 1-6. pequeño dentro de el valor interno de
<header> un layout grande visualización
Sección o cabecera de página. o sea tenemos mini
<hgroup> estructuras dentro display: inline flex
Grupos información de encabezado. de una estructura
<hr> 12 formas de tener general En este caso, flex es el comportamiento
Primer valor:
Regla Horizontal (línea divisoria). un contexto de interno del contenedor, mientras que inline
Comportamiento
<li> apilamiento es el comportamiento externo del
externo de un
Elemento de lista. contenedor ante todo el HTML. Lo mismo
contenedor.
<main> pasa con inline-grid y también con grid y
Segundo valor:
Engloba el único contenido central del documento. flex (que en realidad son block-grid y block-
flex box - contexto Comportamiento
<nav> flex).
de formato flexible para arreglarlo interno de un
Contiene enlaces de navegación.
(significa que flex-box y css grid usamos un contenedor.
<noscript>
participa en un crean algo overflow auto
Contenido para ser usado si los scripts no son soportados
diseño flexible) parecido a un BFC position absolute
o permitidos.
pero se llaman position fixed
<ol>
diferente
Lista ordenada.
<output> (en-US)
el inline block es usado para un logo en lo que es muy útil
Formulario de salida.
<p> para css grid -
Párrafo. contexto de
<pre> formato de
Texto preformateado. cuadrícula (el
<section> elemento participa
Sección de una página web. en un diseño de
inline-block: crea un BFC en una caja en línea
<table> cuadrículas)
pero tiene un hermano
Tabla.
que es
<tfoot> (en-US)
flow-root: crea un BFC en una caja de bloque
Pie de tabla.
<ul>
Lista no ordenada.
<video>
Reproductor de vídeo.

Margin collapsing
Conceptos

display define el tipo de


visualización de un
elemento
arquitecturas: bem
(por ejemplo) performance
Herramientas utiles

pre y post
procesadores
diseño de componentes (como atomic (usalo) design)
Recomendaciones

recuerda que puedes literalmente dibujar con lineas


el diseño de un sitio web (con umn plumon en una
hoja) (hacer la grid completa)
ojo

toma en cuenta esta propiedades para los arabes y todos esos

existe una propiedad llamada writing mode (investiga de ella pq es


util)
las propiedades de esta son aptas para todo ecxepto para tablas

direction (con ltr y rtl)


breakpoints
GRID
1920
puede tener 2 valores inner text-orientation
768
or outer
460
FLEX-BOX:
flex-direction (row o column)
justify-content: (flex-start flex-end)
Una de las desventajas de usar este tipo de
alienación es que necesitamos ser exactos con las para grid
medidas (px), por lo que si queremos trabajar con grid-column-end: 2;
evergreen responsive o medidas relativas… buena suerte grid-column-start: 1;

FLEXBOX
frameworks accesibilidad grid-row-end: 2;
browsers
grid-row-start: 1;

El colapso de márgenes solo sucede con los márgenes de top y de


bottom, y esto solo sucede cuando dos márgenes verticales se tocan,

para evitar esto


deberiamos de añadir un padding border o espacio a los elementos

aling

pues basicamente estan


las mismas propiedades
que para el contendor
samuel marquez
pero cada una para cosas
diferentes (una para el
vertical y otra para el
hotizontal)
propieades del los elementos hijos
samuel marquez

justify

y pues esta igual place

place self

place items

sirve para alinear FILAS O place content


COLUMNAS dependiendo
de su usas align o justify que es el short hand propertie
aling content
ojito ahi con esas
propiedades de around

RD
between etc
que pedo?
samuel marquez samuel marquez samuel marquez

samuel marquez OJITO


OJO con hacer
Estas son propiedades que
propiedad
sirven para poner adentro
ORDER
del contenedor

sirve para alinear LOS


samuel marquez samuel marquez items ELEMENTOS dependiendo
justify de su usas align o justify

grid template:

propiedad grid samuel marquez samuel marquez samuel marquez


grid template
siempre volvemos al flujo normal de documento
OJO Alineacion en grid y control de flujo
el flujo normal del documento es que: que los abrevia grid rows porpiedades que sirven de shorthand
con flex basis grow y shrink
elementos tiene un comportameinto por defecto (ya diferencia entre inline y block
Grid shorthands
sea inline o block) inline va a tomar el ancho de sus grid row / grid column / grid areas pero investiga
hijos, es decir, es como si el por que dalto no las recomienda
contenedor se desinflara y mucho y la verdad pueden llegar a
acabara midiendo lo mismo que samuel marquez marear un poco
miden los contenedores hijos, en
cambio, los block son como un
contenedor completamente
inflado que se extiende a más no
🤔
poder .

es el grid que tiene columnas, estruturas autoajustables, y mas


samuel marquez
mira la parte del curso, es que propiedades que si las columnas o las filas que cambien mutuamente
basicamente, es practica y no
necesita notas que digamos I ntroducción a Flexbox ejemplos de estos:
esta muy sencillo
repeat OJO, la mayoria de estas funciones suelen ser usadas como valores
min max fill - auto fit - fit content para la funcion repeat (no valores, osea uqe se ponen en el repeat)
ve la clase
auto fill: arregla la fila con tantas columnas como puedan nombrar las grid lines
caber minmax() - sirve para definir cuanot es lo minimo y cuanto es lo
auto fit: encaja columnas disponibles actualmente en el maximo que va a medir esta
espacio para que se ocupe todo maxcontent()

CSS GRID
auto mincontent()
auto fill: podemos hace que se ajuste o siga generando columnas y
La alternativa con HTML sería usar img de toda la vida, pero o filas, crece y nos la mete, rece y nos la mete, crece y lo mete
implementando la propiedad object-fit y object-position en GRID dinamico auto fit: escala los elementos, no se nota casi la diferencia
CSS te dejo la documentación respectiva hay donde esta el 100 px
Object Fit y el 1 fr puede ir el min

CSS
object-position ten en cuenta que puden existir lo que son content y el max content
mira la parte del curso, es que grid flex block inline y otros
basicamente, es practica y no Menu responsivo pero

CSS
necesita notas que digamos tu le puedes poner
samuel marquez
inline-grid (y sera un elemnto en linea que adentro
toma en cuenta esta
tiene un grid)
característica:
place self es la unión de estas ultimas 2 block-flex (elemento en bloque que adentro tienen un para esto surgen ciertas porpeidades como
<html lang="en"> a los elementos bloque les
flex) grid-auto-rows
<head> puedes
bueno toma en cuenta esta tabla que te dice el grid-auto-columns
<meta charset="UTF-8"> poner width - height - margin - le pones al grid container
valor intrinseco al tu ya decir algo las filas y las columnas como ya sabes grid explicito que funcionan igual que grid-template-rows y grid-template-columns
<link rel="stylesheet" type="text/css" href="style.css"> padding
Auto fill y auto fit como solo el decir grid ya implica el block son grid tracks grid areas imagina que tu creas tu grilla y cuando tu le das grid-row: 1 / 4 a una
<title>CSS grid</title> grid template areas: de las celdas la que se va para abajo ya forma parte del grid implicito
<style> aqui es donde le das el diseño pero sirven para programar al grid implicito
y tambein estan lso areas Grid auto
.container { que son un conjunto consecutivo de lo defines para que tenga 3 filas pero la cuartas se crea igual, sinedo
ReapeatGrid Implícito y Explícito OJO el repeat no funciona con el el grid-auto-rows
display: grid; celdas, puede que esten disparejas parte de grid implicito
grid-gap: 20px; ahora al elemento le vas a dar pero de preferencia que sean
alinear los elementos en contenedor y BUENO, LA VERDAD, VE LA CLASE DE GRID AUTO,
/*auto-fill rellena toda nuestra fila con todas las columnas que pueda tal propiedad disparejas
adentro
poner dentro y va a crear columnas implicitas en caso de que quepan grid-areas: el nombre que le hayas minimo para que sea un areas tienen ha propiedades que se crean cuando aparace este grid implicito
y si no cabe te la va a poner debajo*/ tipos de valores inline y block asignado que ser dos
grid-template-columns: repeat(auto-fit, minmax (100px, 1fr)) ; para display
/*auto fit lo que nos hace es rellenar todo el contenedor con las Ejes
Conceptos Básicos de Responsive columnas que tenemos disponibles*/ para darle las medidas en el
} contenedor
Display flex
</style> le das las propiedades
</head> (alinear la grid en su contenedor)
<body> justify items grid template rows/columns
align items crear filas y
<div class="header"> place items columnas y le puedes dar un height al contendor
<p> CSS drid auto fill y fit </p> espaciado para que sea del un tamaño en
</div> (alinear lo que esta por dentro) los hijos van a tener especifico
justify content el concepto
Conceptos de Grid
<div class="container"> align content cells
<div class="item1">1</div> place content grid row samuel marquez
Reapeat
conceptos de Flex box <div class="item2">2</div> grid column
RD: Display Grid
<div class="item3">3</div> grid axis

CSS GRID
concepto que lo que hace es trabajar lo que sucede al darle display flex
<div class="item4">4</div> Es una forma de trabajo o técnica que sirve para adaptar todo el
con las distintas resoluciones es que las cajas se estan adaptando al contenedor y en base a su
contenido de nuestra pagina web a distintas resoluciones
adapatar una we a distintas contenido se posicionan una al lado de la otra pero la altua siempre .container { Los valores que recibe la hay otra técnica de
resoluciones Propiedades de los items es la misma place-content: <align-content> / <justify-content>; Translate
</div> función translate se calculan alineamiento usando calc(), y objetivo: uqe se vea vien en cada resolucion
} Grid:
con base en el tamaño del sería de la siguiente manera:
en base al contenido mantiene la altura estilo de layout, formar con la que
</body> elemento. Esto significa que si .elemento1{
trabajas el layout, trabajasmos en el
</html> definiciones formales: el elemento tiene un width de position: absolute;
layout atraves de grillas Ya sabes
Las celdas son cada cuadro de la grilla, como lo son 60px, al usar transform: top: calc(50% - 30px);
en una tabla, como la de exel. translate(-100%, 0) sería lo left: calc(50% - 30px);
propiedades de grid container: pero ojito con esta mamera de escribirlo, es queb no lo ahbai visto
Las lineas son cada división de las columnas y los row, mismo que si pusiéramos }
padres e hijos es el contenedor completo a ver cuando tu le das el display grid antes, y terminara haciendo de que uno si otro no uno si otro...
todas ellas se pueden nombrar. transform: translate(-60px,
0). pues por defecto por ahora solamente lo que pasa es que, te crea
Un track es prácticamente una columna o un row, y el padre va a tener grid item:
flex requiere de dos cosas Aplica de igual forma para el una sola columna tipos de media queries:
se declara con su grueso. los conceptos cada uno de los elementos que forme
flex item estas propiedades se le dan a item eje Y con respecto al height. RD
Un area es la combinación de celdas delimitada por el lines parte del conateiner es parte de los
flex conteiner es que va a contener align-self
usuario por sus especificaciones en celdas, líneas y track Positions comparados items
el o los item que seran contenidos alineacin en el cross axis
tracks. area
por el contenedor flex ¿sirve para tiar una caja hacia abajo?
axis es la alineación del contenido dentro o items o gutters grid cell: es como ese dibujo, esos
Mas porpiedades de flex para hace rque tenga columnas lo que se debe de ahce res trabajar
celdas de nuestra grid grid axis cuadraditos, esas divisiones
de por si cuando le pones flex a algo OJITITO con
gutters se traduce como canalones, y son los
el margin dentro de una caja flexible o fisico vs logico 4 técnicas de grid-template-rows

CSS
este elemento se va a comportar espacios entre celdas. Se parece al margin
sea una caja con display flex se alineamiento sin grid tracks: grid-template-columns
como un bloque correspondiente a las o celdas de nuestra grid.
comporta de una manera muy distinta grid es una fila entera o una columna a estos valores los pones con px
place content entera, conceptualmente es un track
como que agarra ese margin y hace o los mas conocidos o mejores
todo lo contrario pero las vamos a conocer pro filas o FR
JUEGA AQUI - todo bien chaval rows y culumnas o columns AUTO
aqui en flexbox tenemos el
cross axis (eje y) Para que la altura siempre este mantenida se puede usqar la
y el rpopeidad
flex-grow: agarra el espaico sobrante flex growth grid area: grid gap - esta es una shothand propertie
main axis (eje x)
y lo reparte entre las cajas que quedan areas que seleccionamos y a su vez se divide en estas
estos dos tienen direcciones a las que
si te lo preguntas si, a una caja el son consecutivas tanto vertical como grid-row-gap
apuntan
puedes dar Flex direction pues ya sabes, si tienes duda solo ves la documentacion margin align-content (CSS-Tricks). horizontalmente grid-column-gap
flex-grow: 2 line height justify-content (CSS-Tricks). pues la realidad es que esta propeidad sirve para separa los
y a la otra table - cell Para que la propiedad align-content nos funcione como deseamos es necesario estas areas las definimso nosotros elementos andetro de la grilla
flex-grow: 1 flex wrap: para que los elementos se vayan para abajo positions que los containers contengan la declaración: flex-wrap: wrap;. Esta lo que y OJASO
lo que hacemos con css es cambiar el
produce es que los elementos hijos de un flex-container puedan saltar a la SE LE APLICA AL GRID CONTAINER
flujo de lo que esta aca
OJITO siguiente línea o columna si su ancho o su alto excede el contenedor. Por grid line: es bastante autodescriptivo
existe una porpiedad llamada flex-flow defecto la propiedad flex-wrap tiene como valor no-wrap, lo cual impide ese
OJITO con las direcciones
flex- shrink: lo que hace es decir que la cual sirve para acortar flex direction y flex wrap “salto”.
espacio va a ocupar cada uno flex-direction: flex direction - flex wrap Para que se cumpla la condición de que sea con una sola declaración, se puede
esas son las direcciones por defecto
bastrante util - pero la neta ve la pros y contras de las técnicas: agregar el flex-wrap únicamente al selector .container, eso hará que todos los
cuando trabajamos con CSS
explicacion en el vurso de css lucas justify- content : sirve para alinear el contenido en el main axis margin: containers se vean afectados, ya que utilizan su regla por el @extend.
dalto, es que es un poco !sencillo de ventaja: el valor auto alinea horizontalmente cualquier @extend es un “superpoder” que le da SASS a CSS, que permite transferir
lo que hacemos con flexbox es invertir
xplkicar por escrito align items: alinea en el cross axis elemento con cualquier ancho las reglas de un selector a otro/s. En este caso se podría hacer lo mismo con
esto, cambiar las direcciones
desventaja: alinear verticalmente ya que en cada CSS puro, utilizando selectores de atributo.
align content: sirve para alinear en el cross axis, pero este es usado caso deberán calcularse esto valores
OJO : flex-basis, es solamente como un width cuando HAY MULTIPLES LINEAS
los flex item son solo los hios directos pero le da mas importancia, mucha -------------------- haz la prueba de estos dos ultimos y veras line-height:
mas ventaja correcta alineación Solo encontré una propiedad llamada place-content que engloba a justify-
desventaja: si el texto ocupa más de una línea el content y align-content en una sola propiedad, y lo mismo para place-items que
elemento toma un alto mas grande que lo necesario engloba a justify-items y align-items en una sola propiedad, pero no encontré
para los cálculos ninguna que englbe a justify-content y align-items en una sola propiedad… 🤔
asignacion de espacios
RESUMEN: flex table-cell:
entonces propiedades de un flex pues esta solo agrupa a todas estas ventaja: la alineación vertical no está condicionada
container: flex-shrink flex-basis flex-grow por fuentes, tamaños de fuentes o alturas de línea
display: flex desventajas: vertical align se aplica solo elementos
flex-wrap inline
justify-content order
align-content es como el z-index la mayor limitante:
es lo mismo pero en el main axis propiedades físicas: grid-column: la columna que quieres / la columna que quieres
es el order, pero no se trata de si uno margin-top grid-row: la columna que quieres / la columna que quieres
queda encima de otro sino el orden en padding-bottom
el qeu aparecen en el main axis border-right estas dos porpeidades sirven para decir donde acaba la celda y
left donde termina
hoy en dia esto ya no debe de ser así y debes de traducir OJO
esto a propiedades lógica son un shorthand porpertie de
por que debemos de dejar de pensar de esta manera grid-column-start
gird-column-end
y
grid-row-start
gird-row-end

OJASO:
flex-shrink flex-basis flex-grow
son como hermanos

OJITO CON EL SPAN


el span sirve para decir, ocupa esta cantidad de lineas o columnas
ej:
aqui dice ocupa 3 filasy columnas
grid-column: 1 / span 3;
grid-row: 1 / span 3

MDN NOTAS XD
samuel marquez

Cubic Bezier

busca todos los selectores

Sepas que existe


text decoration

normalize - mira el curso de dalto investigar sobre todo tipo de unidades

diferencia entre usar como selector el html o el *

recuerda la ACCESIBILIDAD modificar los estilos de una lista

darle estilos a una tabla

piramide de la jerarquia de etiquetas

Buscar cuáles son la propiedades que se pueden heredar y cuáles no l

juega con object fit y object position

HTML CSS

What's in the head? Metadata in HTML HTML text fundamentals

samuel marquez samuel marquez

hay una ettiqueta paa citar


SI VAS A HACE UN TITULO LO TIENES QUE HACER CON UN h
<cite >

si no no
usa lo de meta utf-8

pero se le puedes cambiar el tamaño


meta name: description content: ...

meta name: author content: ...


solo un h1 por pagina
Make sure you use the headings in the correct order in the
hierarchy. Don't use <h3> elements to represent subheadings,
MAS DE META
followed by <h2> elements to represent sub-subheadings—that
doesn't make sense and will lead to weird results.
Los metadatos son datos que proporcionan información sobre otros
Of the six heading levels available, you should aim to use no more
datos. En el contexto de HTML, los elementos <meta> se utilizan para
than three per page, unless you feel it is necessary. Documents with
proporcionar información adicional sobre la página web, pero no se
many levels (for example, a deep heading hierarchy) become
muestran directamente al usuario. Esta información es útil
unwieldy and difficult to navigate. On such occasions, it is advisable
principalmente para:
to spread the content over multiple pages if possible.
1. Motores de búsqueda (como Google) para entender mejor el
contenido y el propósito de la página.
2. Navegadores web para interpretar correctamente el contenido y
-------------------------------------------------------------------
adaptarse mejor a los dispositivos.
3. Aplicaciones externas (como redes sociales) que podrían utilizar
estos datos para generar resúmenes, previsualizaciones o
<em> (emphasis)
determinar cómo compartir el contenido.
ib

span
----------------------------------------
strong
FAVICON:
<link rel="icon" href="favicon.ico" type="image/x-icon" />

Here's the best rule you can remember: It's only appropriate to use <b>,
(Mira que el tamaño del favicon varia segun los dispositivos, asi qeu los
<i>, or <u> to convey a meaning traditionally conveyed with bold, italics,
puedes cambiar sin problema)
or underline when there isn't a more suitable element; and there usually
----------------------------------------
is. Consider whether <strong>, <em>, <mark>, or <span> might be more
appropriate.
mira, asi deberias de cargar tu js
Always keep an accessibility mindset. The concept of italics isn't very
<script src="my-js-file.js" defer></script>
helpful to people using screen readers, or to people using a writing
system other than the Latin alphabet.
y asi tu css:
<link rel="stylesheet" href="my-css-file.css" />

samuel marquez

BASICO:
<head>
<!-- Meta Charset: Define la codificación de caracteres, es esencial para evitar problemas con caracteres
especiales -->
<meta charset="UTF-8">

<!-- Meta Viewport: Asegura que la página sea responsive en dispositivos móviles -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Título de la página: El texto que aparecerá en la pestaña del navegador -->
<title>Tu Título Aquí</title>

<!-- Descripción meta: Importante para SEO (optimización en motores de búsqueda) -->
<meta name="description" content="Descripción breve de tu página web">

<!-- Palabras clave meta: Aunque no tiene tanto impacto en SEO hoy en día, puede ser útil -->
<meta name="keywords" content="palabras, clave, relacionadas, con, tu, página">

<!-- Autor meta: Puede ser útil si quieres especificar el autor del contenido -->
<meta name="author" content="Tu Nombre">

<!-- Favicon: Icono que aparece en la pestaña del navegador -->


<link rel="icon" href="ruta/de/tu/favicon.ico" type="image/x-icon">

<!-- Hojas de estilo CSS: Donde enlazas tus archivos CSS -->
<link rel="stylesheet" href="styles.css">

<!-- Enlace a fuentes externas (opcional): Ejemplo con Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

<!-- JavaScript externo (opcional): Si quieres cargar scripts en el head -->


<script src="script.js" defer></script>
</head>

samuel marquez

También podría gustarte