• 1) CSS grid

• 2) Grid Container

• 3) Grid item

• 4) MDN Grid layout

• CSS GRID (ejemplos)

• 7) JavaScript HTML DOM Events

• 8) JavaScript HTML DOM EventListener

• 9) JavaScript HTML DOM Navigation

• 10) JavaScript HTML DOM Elements (Nodes)

• 11) JavaScript HTML DOM Collections

• 12) JavaScript HTML DOM Node Lists

Crear layout desde cero

1. 1) "Vaciado": Lo mínimo de un fichero, a partir del cual podemos empezar a construir nuestro documento HTML
2. 2)"Cimientos":Todo documento HTML tiene que tener un ❬head❭ y un ❬body❭. Dentro del head establecemos información importante para el navegador y para los buscadores. Dentro del body establecemos en primer lugar las grandes divisiones horizontales (Cabecera, centro y footer)
3. 3) "Paredes"Tenemos que compartimentar nuestras "habitaciones". Para ello, primero se les da estilo a las grandes divisiones horizontales (cabecera, centro, footer, etc...) y luego se hacen las divisiones verticales dentro de cada una de ellas. De momento utilizamos colores chillones de fondo y bordes para detectar que cada elemento está donde debe.
4. 4) "Plantilla1":Ahora me creo una plantilla que en principio va a ser para el index. En ella coloco aquellos elementos que van a ser comunes a todas las páginas como Logos, banners, etc...
5. 5) "Plantilla2":Las siguientes plantillas las genero a partir de Plantilla-1 quitando elementos y cambiando las propiedades de algunos (ancho, alto, etc...). De esta forma, en 10 minutos cambio la disposición de la página
6. 6) Ahora hago una copia de cada una de las plantillas y le doy el nombre de la página que quiero hacer. Por ejemplo, hago una copia de plantilla-1 y la llamo index.html. Hago una copia de plantilla-2.html y la llamo work.html y así con el resto de páginas
7. 7) Termino de dar estilo y añadir contenido a cada una de las páginas.
8. 8) No se pueden olvidar de generar la navegación. Todos los elementos de menú que pongan deben llevarnos a la página correspondiente y deben volver a la página principal pinchando en el logo. No deben tener "enlaces rotos" (enlaces que cuando los pinchos no me llevan a ninguna parte y dan error)

• Botones de alerta

• Botones con borde

• Botones divididos

• Botones animados

• Botones que cambian de color

• Botones de redes sociales

• Efecto "Leer más"

• Botones de carga

• Botones de descarga

• Botones redondeados

• Botones de notificación

• Botones de iconos

• Botones de texto