Cread una página que tenga:
1.- Una barra de navegación con Inicio nosotros productos servicios contacto
2.- Un slider de cuatro fotos con caption (las que queráis)
3.- Una barra con diferentes secciones: Nacional Internacional Destacados
Que al pinchar en cada una nos muestre una información de cada apartado. Cada apartado tendrá una foto a la izquierda y un texto a la derecha.
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
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.
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
https://codepen.io/finnhvman/pen/xXpzVN
https://webkit.org/blog-files/3d-transforms/morphing-cubes.html
https://github.com/xieranmaya/blog/issues/12
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
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.
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.
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;}
}