Haced una web parecida a esta:
Categoría: CSS
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:
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
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:
Creación de rejilla:
Generador de botones:
https://cssbuttongenerator.com/
Generador de cajas:
Varios:
https://html-css-js.com/css/generator/
De olas:
De radios:
https://9elements.github.io/fancy-border-radius/#30.30.64.30–.
De todo:
https://www.smashingmagazine.com/2021/03/css-generators/
https://www.codu.co/articles/transform-your-css-game-bookmark-these-10-css-generators-mwdcv_0k
Flipadas CSS
https://codepen.io/finnhvman/pen/xXpzVN
https://webkit.org/blog-files/3d-transforms/morphing-cubes.html
https://github.com/xieranmaya/blog/issues/12
Probar SASS
SASS
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
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.
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:
https://css-tricks.com/a-complete-guide-to-calc-in-css/
Aplicar máscaras a imágenes:
Variables, muy útiles para no tener que cambiar valores (por ejemplo, colores) en cada sitio. Algo que ya nos daban precompiladores como SASS:
La función 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:
Las más comunes:
Un artículo muy bueno sobre uso de media query.
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;}
}