Important: Coneixements Previs Abans de començar a treballar en aquest projecte, és important tenir coneixements en els següents àmbits:
Bootstrap 5, incloent-hi el sistema de columnes, validacions, media queries, i components com el navbar, tabs, accordion, entre d'altres. Consideracions Importants Assegura't de seguir aquestes consideracions durant el desenvolupament per evitar errors comuns:
Evita afegir etiquetes de Bootstrap innecessàries als divs. Respecta l'estructura container -> row -> col. Mantén l'aspecte gràfic de la web respectant el disseny proporcionat, evitant ser excessivament creatiu. Molts components de Bootstrap requereixen el fitxer JavaScript "bootstrap.bundle.min.js". Personalitza el tema de Bootstrap utilitzant SASS per adaptar-lo als estils de la teva web. Exercici 1: Barra de Navegació i Contingut Principal En aquest exercici, començarem per implementar la barra de navegació superior fixa i el contingut principal de la web.
Instal·lar Bootstrap al projecte sense fer servir CDN. Fer servir el component navBar de Bootstrap. Utilitzar el grid responsive de Bootstrap per al contingut principal. Modificar els colors principals i secundaris de Bootstrap amb SASS. Exercici 2: Funcionalitats del Producte Ara toca crear la part de funcionalitats del producte que estem venent, incloent l'apartat "Features" amb tabs personalitzats.
Utilitzar el component tabs de Bootstrap, adaptant-los als estils de la web. Assegurar que sigui responsive. Exercici 3: Àrea de Descàrregues En aquest exercici, construirem l'àrea de descàrregues de la web, personalitzant les cards de Bootstrap o creant-ne de noves.
Assegurar que sigui responsive. Fer servir botons de Bootstrap amb el color principal definit en l'exercici 1. Exercici 4: FAQS Desenvolupa l'apartat de FAQS fent servir el component "Accordion" de Bootstrap i personalitzant les classes segons el disseny.
Assegurar que sigui responsive. Fer servir el botó de Bootstrap. Exercici 5: Footer Construeix el bloc del footer fent servir els formularis de Bootstrap i implementant validació de formularis amb missatges d'error.
Assegurar que sigui responsive. Fer servir els formularis de Bootstrap. Implementar la validació de formularis amb Bootstrap. Exercici 6: Modificació d'Estat Modifica els estats actius dels botons, links, tabs i avisos de la web per afegir estils quan es passi el cursor per sobre.