Ejercicio bootstrap

Con el ejercicio del otro día (acordeón galería de imágenes) vamos a modificarlo para incorporar Bootstrap poniendo:

La barra de navegación con navbar.
El acordeón el de bootstrap.
Crear un botón ‘login’ que nos abra un modal con dos cajas de texto usuario y contraseña.

Bootstrap

Para empezar, nuestra amiga w3schools:

https://www.w3schools.com/bootstrap4/default.asp

https://www.w3schools.com/bootstrap5/index.php

https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-get-started.php

Ahí encontraremos la explicación de todos los elementos de bootstrap muy bien explicados, pero también podemos ir a las fuentes:

https://getbootstrap.com/docs/4.6/getting-started/introduction/

https://getbootstrap.com/docs/5.0/getting-started/introduction/

Novedades de 5.0 respecto a 4:

https://www.pedrodelanube.com/bootstrap-5-que-hay-de-nuevo/

Aquí encontraremos diferentes bootstraps tuneados:

https://bootswatch.com/

Y aquí templates listos para usar:

https://colorlib.com/wp/free-bootstrap-templates/

En trifulcas hay código de muchos ejemplos:

https://trifulcas.com/ejemplos-bootstrap/

https://trifulcas.com/ejemplo-bootstrap-2/

https://codepen.io/ajaypatelaj/pen/prHjD

Un análisis exhaustivo del grid de bootstrap:

https://trifulcas.com/analisis-del-grid-de-bootstrap/

Ejemplos del grid de bootstrap:

https://coreui.io/docs/layout/grid/

https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-grid-system.php

https://freefrontend.com/bootstrap-grid-examples/

SASS

https://sass-lang.com/

https://www.w3schools.com/sass/default.php

https://medium.com/@kish.siva/how-to-start-using-sass-in-visual-studio-code-5469787f18bf

https://tutorialzine.com/2016/01/learn-sass-in-15-minutes

https://www.tutorialspoint.com/sass/index.htm

https://css-tricks.com/the-sass-ampersand/

Tutorial muy bueno con ejemplos

https://scotch.io/tutorials/getting-started-with-sass

http://www.tutorialsteacher.com/sass

CSS avanzado

Usamos los pseudoelementos, principalmente, para insertar contenido antes y después de los elementos ¿Con que objeto? Para hacer flipadas.

Pseudoelementos

Ejemplos de uso

Más ejemplos

Si los usamos junto con hover se consiguen cosas increíbles:

Tutorial pseudoelementos y animaciones

CSS3 incorpora funciones matemáticas que nos permiten poner valores que sean el resultado de un cálculo:

Funciones matemáticas

Explicadas con ejemplos

Algunos casos prácticos

Aplicar máscaras a imágenes:

mask-image

Algunos ejemplos

Variables, muy útiles para no tener que cambiar valores (por ejemplo, colores) en cada sitio. Algo que ya nos daban precompiladores como SASS:

Css variables

Css variables

Guía con ejemplos

Usarlas como un PRO

La función attr:

Css attr

Css attr

En content funciona en todos los navegadores, pero de momento no está completamente implementada para usarla en otros sitios.

Ejercicio efectos y animaciones

Vamos a hacer una página para manejar una galería de fotos.

Al entrar veremos una cabecera con logo y menú y solo veremos textos gordos con estilo acordeón:

https://codepen.io/vinsongrant/full/qbGKed

Al ampliar los elementos del acordeon veremos una galería de imágenes de 4 imágenes de ancho.

Al ponerse encima de cada imagen deberíamos ver un efecto como los de tympanus:

https://tympanus.net/Tutorials/OriginalHoverEffects/index1.html

Cada imagen con su texto.

En la cabecera tendremos como menú los mismos textos que en el acordeón, al pulsarlos se ampliará su sección de acordeón.

Cada texto del acordeón debería tener una animación ‘to guapa’. Ejemplos:

https://alvarotrigo.com/blog/css-text-animations/

Los enlaces son ejemplos para ver, no tienen que usarse eso.

Se valorará que la web quede bien, recordad que menos es más.

Utilidades CSS

Cargadores con CSS
https://cssloaders.github.io/

Formas geométricas
https://css-tricks.com/the-shapes-of-css/

Sombras:
https://cssdeck.com/labs/16-box-shadows-to-save-your-time

https://www.hongkiat.com/blog/creative-css-shadows/

UI:

https://uxdesign.cc/how-to-improve-your-product-ui-designers-checklist-58510947e6ab

https://www.refactoringui.com/

100 animaciones increíbles y fáciles de usar:

https://dev.to/afif/another-100-underline-overlay-animations-the-extended-css-collection-574c

https://www.webdesignerdepot.com/2014/05/8-simple-css3-transitions-that-will-wow-your-users/

https://daneden.github.io/animate.css/

https://1stwebdesigner.com/css-effects/

100.000 iconos gratis, nada menos:

https://www.iconshock.com/freeicons/