Responsive single-page design

Bootstrap 4 layouts: Responsive single-page design

• Building a header and footer

Primeramente, se explican las columnas que existen en html como <article>

<section> <div>, explica como se acceden a los documentos y los folders que se deben de

crear para así que el programa sea más eficaz y tengamos más orden a la hora de empezar a

programar. Luego, el curso nos enseña cómo crear una navegación usando html, y con el

código <nav> creando asi un menú como el home, las columnas, un carousel, los iconos, y

mas características indispensables que trae una navegación en el header. Para añadir estilos

a nuestro proyecto el instructor del curso se va a Google fonts y los customiza, extrae el

código para luego pegarlo en Bootstrap y por medio de los filtros los personaliza más

cambiándole el color, tamaño, entre otras cosas. Para crear una navegación de responsive

design nos muestra los componentes para realizarlo, luego efectivamente muestra el

resultado que lo realiza creando un menú de hamburguesa. Finalmente en este capítulo crea

un menú en el header de la página y columnas.

• Bootstrap Layout components

Crea un formato multicolumna, enseña cuales códigos son necesarios para lograrlo,

trabaja con los components graficos, explicando como insertarlos utilizando html luego

crea un grid de fotos, trabaja más a fondo con los carruseles que son las imágenes en

rotación que aparecen en las páginas, crea un layout con su respectivo icon y elementos.

• Adding interactivity

Lo que el instructor hace es reusar plantillas ya existentes, le agrega las funciones y

los nuevos códigos y al final logra una pequeña interactividad con las imágenes que cuando

uno le da click entonces se abre la imagen para una mejor visualización. Luego, utiliza

scrollspy que lo que logra es que la barra del menú se quede siempre estática en la parte

superior de la página. Vuelve al menú de hamburguesa con el fin de tener el responsive

design y añade un color a las letras para que cuando el mouse este encima esta cambie y se

vea más interactiva.

• Creating Animations

Anima el menú haciendo que cuando el mouse este encima de el texto este brille y

se subraye. Enseña una librería de animaciones existentes que se llama animate.css donde

ofrece muchos códigos para lograr estas animaciones entonces es mas fácil porque solo lo

copia y lo pega. De nuevo utiliza scrollspy de nuevo un texto rotativo que aparece

solamente cuando uno llega a ese lado de la página.

...