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/

Repaso final plantilla

1.- Comprobad que todo lo que se ha pedido esté.
2.- Que el suscribirse desaparezca solo o al darle un botón de cerrar.
3.- EL tema responsive, que los anchos de las imágenes queden bien y no pequeños y montados
4.- Poned un menú hamburguesa para el menú (lo tenéis en el apartado de media querie o podéis buscar uno propio)
5.- Si a alguien le da tiempo, sed creativos y libres.

Generadores de CSS

Códigos predefinidos:

https://csslayout.io/

Creación de rejilla:

https://grid.layoutit.com/

Generador de botones:

https://cssbuttongenerator.com/

Generador de cajas:

https://cssarrowplease.com/

Varios:

https://html-css-js.com/css/generator/

De olas:

https://getwaves.io/

De radios:

https://9elements.github.io/fancy-border-radius/#30.30.64.30–.

De todo:

https://uiverse.io/

https://www.smashingmagazine.com/2021/03/css-generators/

https://www.codu.co/articles/transform-your-css-game-bookmark-these-10-css-generators-mwdcv_0k

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

Ejercicio media query

En la plantilla del landscape añadid un media query para que cuando la resolución sea menor de 768 todos los flex tengan orientación columna. Probad a hacer pequeña la pantalla y comprobad que funciona bien.

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

https://css-tricks.com/a-complete-guide-to-calc-in-css/

Explicadas con ejemplos

Algunos casos prácticos

Tipografía fluida con clamp

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.

Media queries para dispositivos

En w3school:

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Ejemplos:

https://www.w3schools.com/css/css3_mediaqueries_ex.asp

Tutorial bastante completo:

https://www.adictosaltrabajo.com/2012/10/11/css3-media-queries/

En css trick:

https://css-tricks.com/a-complete-guide-to-css-media-queries/

Lista de resoluciones para todos los dispositivos:

Media Queries for Standard Devices

Las más comunes:

https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints/

Un artículo muy bueno sobre uso de media query.

https://www.toptal.com/designers/responsive/introduction-to-responsive-web-design-pseudo-elements-media-queries

 

Qué es el diseño responsive:

https://i.workana.com/glosario/que-es-el-diseno-responsive/

Ejemplos responsive:

https://web.dev/responsive-web-design-basics/

9 principios del diseño responsive:

https://blog.froont.com/9-basic-principles-of-responsive-web-design/

Menú hamburguesa solo CSS:

https://codepen.io/alvarotrigo/pen/MWEJEWG

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .example {background: red;}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  .example {background: green;}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  .example {background: blue;}
} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  .example {background: orange;}
} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  .example {background: pink;}
}

Modificación ejercicio

En la plantilla que ya casi tenemos acabamos lo que nos quede (si es que queda algo) y añadimos:

– Transiciones para las fotos al hacer hover. Podéis buscar inspiración en alguno de los ejemplos que hemos visto.
– Una animación para el texto de color verde en el primer párrafo. Que aparezca de alguna manera (a vuestro gusto) y se coloque en su sitio.
– Un div en plan ‘Suscríbete a nuestra newsletter’ que aparezca a los 5 segundos de entrar en la página. Puede, simplemente, aparecer, o bien os podéis flipar y meterle una animación guapa.