Front-End Developer Curso en Barcelona: HTML, CSS y Bootstrap desde ceroCurs a Barcelona: HTML, CSS i Bootstrap des de zero

PasosPassos

1. Crea una carpeta para el ejercicio y, dentro, un archivo llamado index.html.
2. Escribe la estructura básica: <!DOCTYPE html>, <html lang="es">, <head> y <body>. En VS Code puedes teclear ! y pulsar Tab.
3. Dentro de <head> comprueba que están <meta charset="UTF-8"> y la etiqueta viewport, y cambia el <title> por «Pan con tomate · Receta».
4. En el <body>, escribe un <h1> con el nombre de la receta. Solo habrá un h1 en toda la página.
5. Añade un <p> de introducción y marca *pa amb tomàquet* con <em>, porque es una expresión en otro idioma que queremos destacar con la voz.
6. Escribe otro <p> con raciones, tiempo y dificultad. Pon cada etiqueta (Raciones:, Tiempo:, Dificultad:) dentro de <strong>.
7. Crea un <h2>Ingredientes</h2> y debajo una lista <ul> con un <li> por ingrediente. Usamos ul porque el orden da igual.
8. Repite lo mismo con un <h2>Utensilios</h2> y su <ul>.
9. Crea un <h2>Preparación</h2> y debajo una lista <ol> con los pasos. Usamos ol porque el orden importa y así el navegador los numera solo.
10. En la sección <h2>Consejos</h2>, crea un <ul> y, dentro del primer <li>, abre otro <ul> con los acompañamientos. Ciérralo antes de cerrar ese </li>.
11. Añade un párrafo final que combine <strong> y <em> uno dentro del otro, cerrándolos en orden inverso al de apertura.
12. Guarda, abre el archivo en el navegador y revisa la indentación: cada etiqueta interior debe estar desplazada hacia la derecha respecto a su contenedora.

1. Crea una carpeta per a l'exercici i, a dins, un fitxer anomenat index.html.
2. Escriu l'estructura bàsica: <!DOCTYPE html>, <html lang="es">, <head> i <body>. Al VS Code pots teclejar ! i prémer Tab.
3. Dins de <head> comprova que hi ha <meta charset="UTF-8"> i l'etiqueta viewport, i canvia el <title> per «Pan con tomate · Receta».
4. Al <body>, escriu un <h1> amb el nom de la recepta. Només hi haurà un h1 a tota la pàgina.
5. Afegeix un <p> d'introducció i marca *pa amb tomàquet* amb <em>, perquè és una expressió en una altra llengua que volem destacar amb la veu.
6. Escriu un altre <p> amb racions, temps i dificultat. Posa cada etiqueta (Raciones:, Tiempo:, Dificultad:) dins de <strong>.
7. Crea un <h2>Ingredientes</h2> i a sota una llista <ul> amb un <li> per ingredient. Fem servir ul perquè l'ordre no importa.
8. Repeteix el mateix amb un <h2>Utensilios</h2> i la seva <ul>.
9. Crea un <h2>Preparación</h2> i a sota una llista <ol> amb els passos. Fem servir ol perquè l'ordre sí que importa i així el navegador els numera sol.
10. A la secció <h2>Consejos</h2>, crea una <ul> i, dins del primer <li>, obre una altra <ul> amb els acompanyaments. Tanca-la abans de tancar aquest </li>.
11. Afegeix un paràgraf final que combini <strong> i <em> l'un dins de l'altre, tancant-los en ordre invers al d'obertura.
12. Desa, obre el fitxer al navegador i revisa la indentació: cada etiqueta interior ha d'estar desplaçada cap a la dreta respecte a la que la conté.

PasosPassos

1. Crea index.html con la estructura básica, lang="es", charset y viewport. Pon como <title> el nombre del libro.
2. Escribe el <h1> con el título del libro y dale id="arriba". Debajo, un <p> con la autora en <strong> y la editorial.
3. Crea un párrafo con cuatro enlaces de ancla: <a href="#sinopsis">, #datos, #critica y #contacto. Todavía no funcionan porque los destinos no existen.
4. Añade la portada: abre <figure>, dentro pon <img> con src de picsum.photos, un alt que describa la imagen, width y height. Cierra con un <figcaption> y </figure>.
5. Escribe <h2 id="sinopsis">Sinopsis</h2> y dos párrafos. Comprueba en el navegador que el enlace «Sinopsis» del menú ya salta hasta aquí.
6. Crea <h2 id="datos"> y una lista <ul> con autora, editorial, año, páginas, género y formatos. Pon el nombre de cada dato en <strong>.
7. Debajo, un <h3> y otra lista con dos enlaces externos. Cada <a> lleva href con una URL completa (https://...), target="_blank" y rel="noopener noreferrer".
8. Escribe <h2 id="critica"> y dos <blockquote>, cada uno con su texto dentro de un <p>. Debajo de cada cita, un párrafo con quién la firma. Usa <cite> para el nombre de la publicación.
9. Crea <h2 id="contacto"> y un párrafo con un enlace mailto:. Añade ?subject= y escribe los espacios del asunto como %20.
10. Termina con <a href="#arriba">Volver arriba</a> y prueba todos los enlaces en el navegador uno por uno.

1. Crea index.html amb l'estructura bàsica, lang="es", charset i viewport. Posa com a <title> el nom del llibre.
2. Escriu l'<h1> amb el títol del llibre i dona-li id="arriba". A sota, un <p> amb l'autora dins de <strong> i l'editorial.
3. Crea un paràgraf amb quatre enllaços d'àncora: <a href="#sinopsis">, #datos, #critica i #contacto. Encara no funcionen perquè les destinacions no existeixen.
4. Afegeix la portada: obre <figure>, a dins posa <img> amb src de picsum.photos, un alt que descrigui la imatge, width i height. Tanca amb un <figcaption> i </figure>.
5. Escriu <h2 id="sinopsis">Sinopsis</h2> i dos paràgrafs. Comprova al navegador que l'enllaç «Sinopsis» del menú ja salta fins aquí.
6. Crea <h2 id="datos"> i una llista <ul> amb autora, editorial, any, pàgines, gènere i formats. Posa el nom de cada dada dins de <strong>.
7. A sota, un <h3> i una altra llista amb dos enllaços externs. Cada <a> porta href amb una URL completa (https://...), target="_blank" i rel="noopener noreferrer".
8. Escriu <h2 id="critica"> i dos <blockquote>, cadascun amb el text dins d'un <p>. A sota de cada cita, un paràgraf amb qui la signa. Fes servir <cite> per al nom de la publicació.
9. Crea <h2 id="contacto"> i un paràgraf amb un enllaç mailto:. Afegeix ?subject= i escriu els espais de l'assumpte com a %20.
10. Acaba amb <a href="#arriba">Volver arriba</a> i prova tots els enllaços al navegador un per un.

PasosPassos

1. Dibuja primero la tabla en papel: 7 columnas y una fila por franja horaria. Marca las celdas que se unen.
2. Escribe la estructura vacía: table, caption, thead con la fila de días, dos tbody (mañanas y tardes) y tfoot.
3. Rellena las filas una a una, contando que cada fila sume 7 columnas.
4. Construye la tabla de tarifas con encabezados arriba y a la izquierda.
5. Revisa en el navegador que ninguna fila se sale por la derecha.

1. Dibuixa primer la taula en paper: 7 columnes i una fila per franja horària. Marca les cel·les que s'uneixen.
2. Escriu l'estructura buida: table, caption, thead amb la fila de dies, dos tbody (matins i tardes) i tfoot.
3. Omple les files una a una, comptant que cada fila sumi 7 columnes.
4. Construeix la taula de tarifes amb encapçalaments a dalt i a l'esquerra.
5. Revisa al navegador que cap fila no surti per la dreta.

PistasPistes

• Sin CSS la tabla no tiene bordes. Añade en el <head> un <style> con th, td { border: 1px solid #555; } y table { border-collapse: collapse; } para ver las celdas.
• colspan une celdas hacia la derecha; rowspan hacia abajo. En la fila siguiente a un rowspan hay que escribir una celda menos.
• Las horas de la primera columna son encabezados de fila: usa <th scope="row">. Los días son encabezados de columna: <th scope="col">.
• Para separar mañanas y tardes puedes poner una fila con <th colspan="7" scope="rowgroup"> al principio de cada tbody.
• El sábado por la tarde está cerrado durante cuatro franjas: una sola celda con rowspan="4".

• Sense CSS la taula no té vores. Afegeix al <head> un <style> amb th, td { border: 1px solid #555; } i table { border-collapse: collapse; } per veure les cel·les.
• colspan uneix cel·les cap a la dreta; rowspan, cap avall. A la fila següent a un rowspan cal escriure una cel·la menys.
• Les hores de la primera columna són encapçalaments de fila: fes servir <th scope="row">. Els dies són encapçalaments de columna: <th scope="col">.
• Per separar matins i tardes pots posar una fila amb <th colspan="7" scope="rowgroup"> al principi de cada tbody.
• El dissabte a la tarda està tancat durant quatre franges: una sola cel·la amb rowspan="4".

PasosPassos

1. Escribe el <form> con action y method y crea los cinco fieldset vacíos, cada uno con su legend.
2. Rellena el bloque de datos de contacto con su validación.
3. Añade los campos de la reserva: fecha, hora, personas y desplegable.
4. Crea el grupo de radio y el grupo de checkbox.
5. Termina con el textarea, la casilla de condiciones y los botones, y prueba a enviar con campos vacíos o mal escritos.

1. Escriu el <form> amb action i method i crea els cinc fieldset buits, cadascun amb la seva legend.
2. Omple el bloc de dades de contacte amb la seva validació.
3. Afegeix els camps de la reserva: data, hora, persones i desplegable.
4. Crea el grup de radio i el grup de checkbox.
5. Acaba amb el textarea, la casella de condicions i els botons, i prova d'enviar amb camps buits o mal escrits.

PistasPistes

• El for de cada <label> tiene que ser idéntico al id de su campo. Comprueba que al pulsar el texto se activa la casilla.
• Los radio de un mismo grupo comparten name y se diferencian por value. Si les pones names distintos, se podrán marcar todos.
• Las fechas en min y max se escriben como AAAA-MM-DD. Para la hora, step="1800" son 30 minutos expresados en segundos.
• Para el móvil usa type="tel" con pattern="[6-7][0-9]{8}" y explica el formato en el atributo title.
• <textarea> y <select> llevan etiqueta de cierre; <input> no.

• El for de cada <label> ha de ser idèntic a l'id del seu camp. Comprova que en clicar el text s'activa la casella.
• Els radio d'un mateix grup comparteixen name i es diferencien per value. Si els poses names diferents, es podran marcar tots.
• Les dates a min i max s'escriuen com a AAAA-MM-DD. Per a l'hora, step="1800" són 30 minuts expressats en segons.
• Per al mòbil fes servir type="tel" amb pattern="[6-7][0-9]{8}" i explica el format a l'atribut title.
• <textarea> i <select> porten etiqueta de tancament; <input>, no.

PasosPassos

1. Dibuja el esqueleto con cajas: header, main (article + aside) y footer.
2. Escribe el esqueleto semántico vacío y comprueba que cada etiqueta se cierra donde toca.
3. Rellena el artículo sección a sección, con su índice de anclas.
4. Añade aside y footer, y revisa el orden de los títulos.

1. Dibuixa l'esquelet amb caixes: header, main (article + aside) i footer.
2. Escriu l'esquelet semàntic buit i comprova que cada etiqueta es tanca on toca.
3. Omple l'article secció a secció, amb el seu índex d'àncores.
4. Afegeix aside i footer, i revisa l'ordre dels títols.

PistasPistes

• header y footer pueden aparecer varias veces: los de body son de la web y los de article, del artículo.
• Si hay dos nav en la página, distínguelos con aria-label (por ejemplo «Menú principal» e «Índice del artículo»).
• <time datetime="2026-03-14"> guarda la fecha en formato máquina; el texto de dentro puede ser «14 de marzo de 2026».
• <address> solo sirve para el contacto de quien firma el artículo o la web, no para cualquier dirección postal.

• header i footer poden aparèixer diverses vegades: els de body són del web i els d'article, de l'article.
• Si hi ha dos nav a la pàgina, distingeix-los amb aria-label (per exemple «Menú principal» i «Índice del artículo»).
• <time datetime="2026-03-14"> desa la data en format màquina; el text de dins pot ser «14 de marzo de 2026».
• <address> només serveix per al contacte de qui signa l'article o el web, no per a qualsevol adreça postal.

PasosPassos

1. Crea las carpetas y los tres archivos vacíos antes de escribir nada.
2. Escribe la portada completa, con cabecera y pie incluidos.
3. Copia cabecera y pie en las otras dos páginas y adapta todas las rutas.
4. Rellena el contenido propio de servicios y de contacto.
5. Recorre todos los enlaces del sitio desde el navegador y corrige los que fallen.

1. Crea les carpetes i els tres fitxers buits abans d'escriure res.
2. Escriu la portada completa, amb capçalera i peu inclosos.
3. Copia capçalera i peu a les altres dues pàgines i adapta totes les rutes.
4. Omple el contingut propi de serveis i de contacte.
5. Recorre tots els enllaços del lloc des del navegador i corregeix els que fallin.

PistasPistes

• Desde index.html se entra en la carpeta con paginas/servicios.html. Desde dentro de paginas/ se vuelve a la portada con ../index.html.
• Entre servicios.html y contacto.html, que están en la misma carpeta, basta con el nombre del archivo.
• En un <select> obligatorio, una primera opción con value="" obliga a elegir una de verdad.
• Si pasas el ratón por encima de un enlace, el navegador muestra abajo a la izquierda la ruta completa a la que apunta: útil para cazar errores.

• Des d'index.html s'entra a la carpeta amb paginas/servicios.html. Des de dins de paginas/ es torna a la portada amb ../index.html.
• Entre servicios.html i contacto.html, que són a la mateixa carpeta, n'hi ha prou amb el nom del fitxer.
• En un <select> obligatori, una primera opció amb value="" obliga a triar-ne una de debò.
• Si passes el ratolí per sobre d'un enllaç, el navegador mostra a baix a l'esquerra la ruta completa a la qual apunta: útil per caçar errors.

PasosPassos

1. Crea un archivo vacío llamado style.css en la misma carpeta que index.html.
2. En el <head> del HTML, añade <link rel="stylesheet" href="style.css">. Escribe en style.css body { background-color: red; } y recarga: si el fondo sale rojo, el enlace funciona. Después cambia red por #f4efe6.
3. Ve a fonts.google.com, busca Playfair Display (peso 700) y Lato (pesos 400 y 700), y copia las etiquetas <link> que te da Google en el <head>, ANTES del link a style.css.
4. En body, añade color: #2f3e46, font-family: 'Lato', Arial, sans-serif, font-size: 16px, line-height: 1.5, margin: 0 y padding: 40px 16px.
5. Crea la regla .tarjeta con max-width: 420px y margin: 0 auto. Comprueba que la tarjeta queda centrada al estrechar la ventana.
6. Completa .tarjeta con background-color: #fffdf8, padding: 32px 28px, border: 2px solid #8c2f39, border-radius: 12px y text-align: center.
7. Crea .tarjeta-nombre con font-family: 'Playfair Display', Georgia, serif, font-size: 32px, color: #8c2f39 y margin: 0 0 4px.
8. Pon el lema en cursiva con .tarjeta-lema { font-style: italic; margin: 0; }.
9. Da estilo a la línea con el selector .tarjeta hr: border: none, border-top: 1px solid #8c2f39, width: 60px y margin: 20px auto.
10. En .tarjeta-datos pon font-style: normal (address sale en cursiva por defecto) y reduce el margen de sus párrafos con .tarjeta-datos p { margin: 0 0 4px; }.
11. Crea .tarjeta-horario con fondo #8c2f39, color #fffdf8, padding: 8px 12px, font-weight: 700, font-size: 14px, text-transform: uppercase, letter-spacing: 1px y border-radius: 6px.
12. Abre el inspector (F12), selecciona la tarjeta y localiza en el diagrama del modelo de caja el padding, el borde y el margen que has definido.

1. Crea un fitxer buit anomenat style.css a la mateixa carpeta que index.html.
2. Al <head> de l'HTML, afegeix <link rel="stylesheet" href="style.css">. Escriu a style.css body { background-color: red; } i recarrega: si el fons surt vermell, l'enllaç funciona. Després canvia red per #f4efe6.
3. Ves a fonts.google.com, cerca Playfair Display (pes 700) i Lato (pesos 400 i 700), i copia les etiquetes <link> que et dona Google al <head>, ABANS de l'enllaç a style.css.
4. Al body, afegeix color: #2f3e46, font-family: 'Lato', Arial, sans-serif, font-size: 16px, line-height: 1.5, margin: 0 i padding: 40px 16px.
5. Crea la regla .tarjeta amb max-width: 420px i margin: 0 auto. Comprova que la targeta queda centrada quan estretes la finestra.
6. Completa .tarjeta amb background-color: #fffdf8, padding: 32px 28px, border: 2px solid #8c2f39, border-radius: 12px i text-align: center.
7. Crea .tarjeta-nombre amb font-family: 'Playfair Display', Georgia, serif, font-size: 32px, color: #8c2f39 i margin: 0 0 4px.
8. Posa el lema en cursiva amb .tarjeta-lema { font-style: italic; margin: 0; }.
9. Dona estil a la línia amb el selector .tarjeta hr: border: none, border-top: 1px solid #8c2f39, width: 60px i margin: 20px auto.
10. A .tarjeta-datos posa font-style: normal (address surt en cursiva per defecte) i redueix el marge dels seus paràgrafs amb .tarjeta-datos p { margin: 0 0 4px; }.
11. Crea .tarjeta-horario amb fons #8c2f39, color #fffdf8, padding: 8px 12px, font-weight: 700, font-size: 14px, text-transform: uppercase, letter-spacing: 1px i border-radius: 6px.
12. Obre l'inspector (F12), selecciona la targeta i localitza al diagrama del model de caixa el padding, la vora i el marge que has definit.

PasosPassos

1. Crea style.css, enlázalo en el <head> y da al body margin: 0, background-color: #faf6f1, color: #2b2b2b y font-family: 'Nunito', Arial, sans-serif.
2. Centra el contenido con .muestrario { max-width: 760px; margin: 0 auto; padding: 32px 16px; }.
3. Crea la regla .btn con display: inline-block, padding: 12px 22px, margin: 0 8px 10px 0, font-size: 16px, font-weight: 700 y border-radius: 8px.
4. Añade a .btn font-family: inherit (los botones no heredan la fuente por sí solos), text-decoration: none (para el enlace) y border: 2px solid transparent.
5. Añade cursor: pointer a .btn y comprueba que aparece la manita al pasar por encima.
6. Escribe .btn-principal con background-color: #c8553d y color: #ffffff, y su estado .btn-principal:hover con background-color: #a3432f.
7. Repite el patrón para .btn-secundario (#2d6a6a, hover #1f4d4d) y .btn-peligro (#b3261e, hover #8c1d17).
8. Para .btn-contorno usa background-color: transparent, color: #2d6a6a y border-color: #2d6a6a. En :hover, rellena el fondo con #2d6a6a y pon el texto en blanco.
9. Añade a .btn la propiedad transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease. Pasa el ratón por los botones y nota la diferencia.
10. Escribe .btn:active { transform: translateY(2px); } y .btn:focus-visible { outline: 3px solid #f2a541; outline-offset: 3px; }. Prueba el foco recorriendo la página con el Tabulador.
11. Crea .btn-pequeno (padding: 6px 14px; font-size: 14px) y .btn-grande (padding: 16px 32px; font-size: 20px) debajo de las variantes.
12. Al final del archivo, escribe .btn[disabled] con fondo #cfc8c0, color #6b6b6b, cursor: not-allowed y transform: none.

1. Crea style.css, enllaça'l al <head> i dona al body margin: 0, background-color: #faf6f1, color: #2b2b2b i font-family: 'Nunito', Arial, sans-serif.
2. Centra el contingut amb .muestrario { max-width: 760px; margin: 0 auto; padding: 32px 16px; }.
3. Crea la regla .btn amb display: inline-block, padding: 12px 22px, margin: 0 8px 10px 0, font-size: 16px, font-weight: 700 i border-radius: 8px.
4. Afegeix a .btn font-family: inherit (els botons no hereten la font per si sols), text-decoration: none (per a l'enllaç) i border: 2px solid transparent.
5. Afegeix cursor: pointer a .btn i comprova que apareix la maneta quan hi passes per sobre.
6. Escriu .btn-principal amb background-color: #c8553d i color: #ffffff, i el seu estat .btn-principal:hover amb background-color: #a3432f.
7. Repeteix el patró per a .btn-secundario (#2d6a6a, hover #1f4d4d) i .btn-peligro (#b3261e, hover #8c1d17).
8. Per a .btn-contorno fes servir background-color: transparent, color: #2d6a6a i border-color: #2d6a6a. A :hover, omple el fons amb #2d6a6a i posa el text en blanc.
9. Afegeix a .btn la propietat transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease. Passa el ratolí pels botons i nota la diferència.
10. Escriu .btn:active { transform: translateY(2px); } i .btn:focus-visible { outline: 3px solid #f2a541; outline-offset: 3px; }. Prova el focus recorrent la pàgina amb el tabulador.
11. Crea .btn-pequeno (padding: 6px 14px; font-size: 14px) i .btn-grande (padding: 16px 32px; font-size: 20px) a sota de les variants.
12. Al final del fitxer, escriu .btn[disabled] amb fons #cfc8c0, color #6b6b6b, cursor: not-allowed i transform: none.

PasosPassos

1. Estilos de página y cabecera: colores, fuentes y centrado.
2. Lista sin aspecto de lista y elementos en horizontal.
3. Separadores con ::after y eliminación del último.
4. Estados de los enlaces: :hover, :focus-visible y clase activo.

1. Estils de pàgina i capçalera: colors, fonts i centrat.
2. Llista sense aspecte de llista i elements en horitzontal.
3. Separadors amb ::after i eliminació de l'últim.
4. Estats dels enllaços: :hover, :focus-visible i classe activo.

PistasPistes

• Para quitar viñetas y sangría necesitas tres propiedades en el <ul>: list-style, margin y padding.
• Si los <li> son inline-block, un text-align: center en la cabecera los centra igual que centraría una palabra.
• En ::after la propiedad content es obligatoria. Para el punto medio escribe content: "·". Para hacerlo desaparecer en el último elemento, content: none.
• Pon el ::after en el <li> en lugar del <a>: así el separador no forma parte del enlace ni se subraya.
• Si reservas la línea inferior desde el principio con border-bottom: 2px solid transparent, el texto no salta al aparecer la línea en :hover.

• Per treure els pics i el sagnat necessites tres propietats a l'<ul>: list-style, margin i padding.
• Si els <li> són inline-block, un text-align: center a la capçalera els centra igual que centraria una paraula.
• A ::after la propietat content és obligatòria. Per al punt volat escriu content: "·". Per fer-lo desaparèixer a l'últim element, content: none.
• Posa el ::after al <li> en lloc de l'<a>: així el separador no forma part de l'enllaç ni se subratlla.
• Si reserves la línia inferior des del principi amb border-bottom: 2px solid transparent, el text no salta quan apareix la línia a :hover.

PasosPassos

1. Regla universal con box-sizing: border-box y estilos de body.
2. Laboratorio: cajas de prueba medidas con el inspector y colapso de márgenes comprobado.
3. Tarjeta centrada y cabecera con la etiqueta en em.
4. Datos, precio y talón con atajos de padding y margin.

1. Regla universal amb box-sizing: border-box i estils del body.
2. Laboratori: caixes de prova mesurades amb l'inspector i col·lapse de marges comprovat.
3. Targeta centrada i capçalera amb l'etiqueta en em.
4. Dades, preu i taló amb dreceres de padding i margin.

PistasPistes

• Empieza con *, *::before, *::after { box-sizing: border-box; } y luego, solo en la caja de prueba que debe comportarse distinto, escribe box-sizing: content-box.
• Cuando dos márgenes verticales se tocan, el navegador se queda con el mayor. Los márgenes horizontales nunca colapsan.
• rem depende del tamaño de letra de <html> (16px por defecto); em depende del tamaño de letra del propio elemento. Para el euro, font-size: 0.5em es la mitad del tamaño del precio.
• <dd> trae margin-left de 40px y <dl> trae margen vertical: anúlalos antes de colocar tus propios espacios.
• Para quitar la línea del último dato, combina la clase del dato con :last-child.

• Comença amb *, *::before, *::after { box-sizing: border-box; } i després, només a la caixa de prova que s'ha de comportar diferent, escriu box-sizing: content-box.
• Quan dos marges verticals es toquen, el navegador es queda amb el més gran. Els marges horitzontals no col·lapsen mai.
• rem depèn de la mida de lletra de <html> (16px per defecte); em depèn de la mida de lletra del mateix element. Per a l'euro, font-size: 0.5em és la meitat de la mida del preu.
• <dd> porta margin-left de 40px i <dl> porta marge vertical: anul·la'ls abans de col·locar els teus espais.
• Per treure la línia de l'última dada, combina la classe de la dada amb :last-child.

PasosPassos

1. Base tipográfica: fuentes, tamaños, interlineado y columna centrada.
2. Portada con imagen de fondo y degradado.
3. Capitular, ficha rápida y tabla cebreada.
4. Viñetas propias, imagen, pasos y nota final.

1. Base tipogràfica: fonts, mides, interlineat i columna centrada.
2. Portada amb imatge de fons i degradat.
3. Lletra capital, fitxa ràpida i taula zebrada.
4. Pics propis, imatge, passos i nota final.

PistasPistes

• background-image admite varias capas separadas por comas: pon primero un linear-gradient con colores rgba semitransparentes y después la url() de la foto.
• Para la capitular, ::first-letter con float: left, un font-size de unas 4em y line-height por debajo de 1.
• Para filas alternas: tbody tr:nth-child(even). Para la segunda columna: td:nth-child(2).
• Viñeta propia: quita list-style, deja un padding-left en el <li> y en ::before usa content, display: inline-block, un width igual a ese padding y un margin-left negativo del mismo valor.

• background-image admet diverses capes separades per comes: posa primer un linear-gradient amb colors rgba semitransparents i després la url() de la foto.
• Per a la lletra capital, ::first-letter amb float: left, un font-size d'unes 4em i line-height per sota d'1.
• Per a files alternes: tbody tr:nth-child(even). Per a la segona columna: td:nth-child(2).
• Pic propi: treu list-style, deixa un padding-left al <li> i a ::before fes servir content, display: inline-block, un width igual a aquest padding i un margin-left negatiu del mateix valor.

PasosPassos

1. Variables en :root a partir de la paleta, las fuentes, el espacio y los radios.
2. Página, tarjeta y foto.
3. Textos de cabecera, precio y lista de características.
4. Selector de tallas con sus cuatro estados.
5. Botón de compra, texto de envío y pie.

1. Variables a :root a partir de la paleta, les fonts, l'espai i els radis.
2. Pàgina, targeta i foto.
3. Textos de capçalera, preu i llista de característiques.
4. Selector de talles amb els seus quatre estats.
5. Botó de compra, text d'enviament i peu.

PistasPistes

• Una variable se declara como --color-acento: #1d5c8c; dentro de :root y se usa como color: var(--color-acento);.
• Para que la foto respete las esquinas redondeadas de la tarjeta, pon overflow: hidden en la tarjeta. Para quitar el hueco bajo la imagen, display: block en la imagen.
• Los botones no heredan la fuente de la página: añade font-family: inherit.
• La talla agotada debe escribirse después de :hover. Las dos reglas tienen la misma especificidad, así que gana la que va más abajo.

• Una variable es declara com --color-acento: #1d5c8c; dins de :root i es fa servir com color: var(--color-acento);.
• Perquè la foto respecti les cantonades arrodonides de la targeta, posa overflow: hidden a la targeta. Per treure l'espai sota la imatge, display: block a la imatge.
• Els botons no hereten la font de la pàgina: afegeix font-family: inherit.
• La talla esgotada s'ha d'escriure després de :hover. Les dues regles tenen la mateixa especificitat, així que guanya la que va més avall.

PasosPassos

1. Crea index.html con la estructura básica (lang="es", meta charset, meta viewport) y enlaza style.css con <link rel="stylesheet" href="style.css">.
2. Dentro del <body> crea un <header class="barra"> con dos hijos: un <a class="logo"> (con un <span class="logo-icono">LT</span> y un <span class="logo-texto">La Tortuga</span>) y un <nav> que contenga una <ul class="menu"> con cuatro <li> y sus enlaces.
3. Debajo del header, añade un <main> con cuatro <section> (Inicio, Novedades, Club de lectura y Contacto) con texto suficiente para que la página tenga scroll. Incluye una imagen de https://picsum.photos/seed/libreria/900/400 con su alt.
4. En style.css, aplica box-sizing: border-box a todo con el selector * y quita el margen del body con margin: 0.
5. Escribe display: flex en .barra. Comprueba en el navegador que el logo y el menú ya aparecen en la misma fila.
6. Añade justify-content: space-between a .barra para enviar el logo a la izquierda y el menú a la derecha.
7. Añade align-items: center a .barra para centrarlos verticalmente. Ponle padding: 12px 24px y un color de fondo.
8. Convierte .menu en contenedor flex con display: flex y gap: 24px. Quita las viñetas con list-style: none y pon margin y padding a 0.
9. Haz lo mismo con .logo: display: flex, align-items: center y gap: 10px. Da a .logo-icono un tamaño de 40x40 px, border-radius: 50% y centra las letras con flex.
10. Da estilo a .menu a (color, sin subrayado, border-bottom transparente de 2px) y crea .menu a:hover y .menu a.activo con el borde inferior dorado.
11. Añade a .barra position: sticky y top: 0. Haz scroll y comprueba que la barra se queda arriba.
12. Si la imagen pasa por encima de la barra al hacer scroll, añade z-index: 10 a .barra y vuelve a comprobarlo.

1. Crea index.html amb l'estructura bàsica (lang="es", meta charset, meta viewport) i enllaça style.css amb <link rel="stylesheet" href="style.css">.
2. Dins del <body> crea un <header class="barra"> amb dos fills: un <a class="logo"> (amb un <span class="logo-icono">LT</span> i un <span class="logo-texto">La Tortuga</span>) i un <nav> que contingui una <ul class="menu"> amb quatre <li> i els seus enllaços.
3. Sota el header, afegeix un <main> amb quatre <section> (Inici, Novetats, Club de lectura i Contacte) amb prou text perquè la pàgina tingui scroll. Inclou una imatge de https://picsum.photos/seed/libreria/900/400 amb el seu alt.
4. A style.css, aplica box-sizing: border-box a tot amb el selector * i treu el marge del body amb margin: 0.
5. Escriu display: flex a .barra. Comprova al navegador que el logotip i el menú ja apareixen a la mateixa fila.
6. Afegeix justify-content: space-between a .barra per enviar el logotip a l'esquerra i el menú a la dreta.
7. Afegeix align-items: center a .barra per centrar-los verticalment. Posa-hi padding: 12px 24px i un color de fons.
8. Converteix .menu en contenidor flex amb display: flex i gap: 24px. Treu les vinyetes amb list-style: none i posa margin i padding a 0.
9. Fes el mateix amb .logo: display: flex, align-items: center i gap: 10px. Dona a .logo-icono una mida de 40x40 px, border-radius: 50% i centra les lletres amb flex.
10. Dona estil a .menu a (color, sense subratllat, border-bottom transparent de 2px) i crea .menu a:hover i .menu a.activo amb la vora inferior daurada.
11. Afegeix a .barra position: sticky i top: 0. Fes scroll i comprova que la barra es queda a dalt.
12. Si la imatge passa per sobre de la barra en fer scroll, afegeix z-index: 10 a .barra i torna-ho a comprovar.

PasosPassos

1. Crea index.html y style.css. En el HTML, añade una cabecera y un <main> con dos <section class="bloque">.
2. En la primera sección, crea un <div class="demos"> con tres <article class="demo-tarjeta">. Cada uno lleva un <h3>, un <div class="demo"> con un <div class="pieza"> dentro y un <pre><code> con el código.
3. Añade a cada <div class="demo"> una segunda clase: centrar-flex, centrar-grid y centrar-absolute.
4. En el CSS, pon .demos en fila con display: flex, flex-wrap: wrap y gap: 24px. Da a .demo-tarjeta flex: 1 1 260px.
5. Da a .demo una altura de 180px, un fondo gris y un borde discontinuo. Da a .pieza un ancho de 110px, un alto de 70px y un color de fondo.
6. Centra la primera: en .centrar-flex escribe display: flex, justify-content: center y align-items: center.
7. Centra la segunda: en .centrar-grid escribe display: grid y place-items: center.
8. Centra la tercera: pon position: relative en .centrar-absolute. En .centrar-absolute .pieza escribe position: absolute, top: 50% y left: 50%. Observa que la pieza queda desplazada hacia abajo a la derecha.
9. Corrige el desplazamiento añadiendo transform: translate(-50%, -50%) a la pieza de la tercera caja.
10. En la segunda sección, crea un <article class="tarjeta"> con un <span class="badge">Nuevo</span>, una imagen de https://picsum.photos/seed/ceramica/600/360 y un <div class="tarjeta-cuerpo"> con título, texto y precio.
11. Escribe en .badge position: absolute, top: 12px y right: 12px. Comprueba dónde aparece: si no hay padre posicionado, irá a la esquina de la página.
12. Añade position: relative a .tarjeta para que el badge se coloque respecto a la tarjeta. Termina con z-index: 2 en el badge y overflow: hidden en la tarjeta para respetar las esquinas redondeadas.

1. Crea index.html i style.css. A l'HTML, afegeix una capçalera i un <main> amb dues <section class="bloque">.
2. A la primera secció, crea un <div class="demos"> amb tres <article class="demo-tarjeta">. Cadascun porta un <h3>, un <div class="demo"> amb un <div class="pieza"> a dins i un <pre><code> amb el codi.
3. Afegeix a cada <div class="demo"> una segona classe: centrar-flex, centrar-grid i centrar-absolute.
4. Al CSS, posa .demos en fila amb display: flex, flex-wrap: wrap i gap: 24px. Dona a .demo-tarjeta flex: 1 1 260px.
5. Dona a .demo una alçada de 180px, un fons gris i una vora discontínua. Dona a .pieza una amplada de 110px, una alçada de 70px i un color de fons.
6. Centra la primera: a .centrar-flex escriu display: flex, justify-content: center i align-items: center.
7. Centra la segona: a .centrar-grid escriu display: grid i place-items: center.
8. Centra la tercera: posa position: relative a .centrar-absolute. A .centrar-absolute .pieza escriu position: absolute, top: 50% i left: 50%. Observa que la peça queda desplaçada cap avall a la dreta.
9. Corregeix el desplaçament afegint transform: translate(-50%, -50%) a la peça de la tercera caixa.
10. A la segona secció, crea un <article class="tarjeta"> amb un <span class="badge">Nou</span>, una imatge de https://picsum.photos/seed/ceramica/600/360 i un <div class="tarjeta-cuerpo"> amb títol, text i preu.
11. Escriu a .badge position: absolute, top: 12px i right: 12px. Comprova on apareix: si no hi ha cap pare posicionat, anirà a la cantonada de la pàgina.
12. Afegeix position: relative a .tarjeta perquè el badge es col·loqui respecte a la targeta. Acaba amb z-index: 2 al badge i overflow: hidden a la targeta per respectar les cantonades arrodonides.

PasosPassos

1. Maqueta el HTML: un contenedor .catalogo con seis <article class="producto">, cada uno con un bloque de imagen y un bloque de cuerpo.
2. Haz que las tarjetas se repartan en filas con flex-wrap y tamaño base de 250 px.
3. Convierte cada tarjeta en una columna flexible y lleva el precio y el botón al final.
4. Coloca la etiqueta «Oferta» sobre la imagen y unifica la altura de las fotos.
5. Añade el efecto hover con transition y transform.

1. Maqueta l'HTML: un contenidor .catalogo amb sis <article class="producto">, cadascun amb un bloc d'imatge i un bloc de cos.
2. Fes que les targetes es reparteixin en files amb flex-wrap i una mida base de 250 px.
3. Converteix cada targeta en una columna flexible i porta el preu i el botó al final.
4. Col·loca l'etiqueta «Oferta» sobre la imatge i unifica l'alçada de les fotos.
5. Afegeix l'efecte hover amb transition i transform.

PistasPistes

• flex: 1 1 250px es el atajo de flex-grow, flex-shrink y flex-basis. Pruébalo en .producto y cambia el ancho de la ventana para ver cómo se recolocan.
• Una tarjeta puede ser hijo flex del catálogo y, a la vez, contenedor flex con flex-direction: column para sus propios hijos.
• En un flex en columna, margin-top: auto en un hijo lo empuja hasta el final, porque absorbe todo el espacio libre de encima.
• Para que todas las fotos tengan la misma altura sin deformarse, combina height fijo con object-fit: cover.
• La etiqueta necesita un padre con position: relative; si no, se colocará respecto a la página.

• flex: 1 1 250px és la drecera de flex-grow, flex-shrink i flex-basis. Prova-ho a .producto i canvia l'amplada de la finestra per veure com es recol·loquen.
• Una targeta pot ser fill flex del catàleg i, alhora, contenidor flex amb flex-direction: column per als seus propis fills.
• En un flex en columna, margin-top: auto en un fill l'empeny fins al final, perquè absorbeix tot l'espai lliure de sobre.
• Perquè totes les fotos tinguin la mateixa alçada sense deformar-se, combina un height fix amb object-fit: cover.
• L'etiqueta necessita un pare amb position: relative; si no, es col·locarà respecte a la pàgina.

PasosPassos

1. Escribe el HTML semántico y envuelve main y aside en un <div class="contenido">.
2. Declara las variables en :root y consigue el footer siempre abajo con Flexbox en el body.
3. Da estilo a la versión móvil con todo apilado.
4. Añade la media query de 768 px para poner main y aside en fila.

1. Escriu l'HTML semàntic i embolcalla main i aside en un <div class="contenido">.
2. Declara les variables a :root i aconsegueix el footer sempre a baix amb Flexbox al body.
3. Dona estil a la versió mòbil amb tot apilat.
4. Afegeix la media query de 768 px per posar main i aside en fila.

PistasPistes

• Para el footer siempre abajo: body con display: flex, flex-direction: column y min-height: 100vh; el bloque central con flex: 1.
• El div que envuelve main y aside puede ser flex en columna en móvil y cambiar a flex-direction: row dentro de la media query.
• flex: 0 0 280px significa: no crecer, no encoger y medir 280 px. Para el main, flex: 1.
• Si el aside se estira hasta la altura del main y no te gusta, usa align-items: flex-start en el contenedor.
• Sin <meta name="viewport"> el móvil simula una pantalla ancha y la media query no se comporta como esperas.

• Per al footer sempre a baix: body amb display: flex, flex-direction: column i min-height: 100vh; el bloc central amb flex: 1.
• El div que embolcalla main i aside pot ser flex en columna en mòbil i canviar a flex-direction: row dins de la media query.
• flex: 0 0 280px vol dir: no créixer, no encongir-se i fer 280 px. Per al main, flex: 1.
• Si l'aside s'estira fins a l'alçada del main i no t'agrada, fes servir align-items: flex-start al contenidor.
• Sense <meta name="viewport"> el mòbil simula una pantalla ampla i la media query no es comporta com esperes.

PasosPassos

1. Estructura el HTML de la portada y la galería con elementos semánticos (article, aside, figure, figcaption).
2. Resuelve la portada en móvil con grid-template-areas y asigna cada pieza a su área.
3. Redefine solo grid-template-columns y grid-template-areas en las media queries de 768 px y 1024 px.
4. Monta la galería con auto-fit, minmax y las fotos que ocupan dos celdas.
5. Añade los efectos hover y revisa el resultado a 375, 768 y 1280 px de ancho.

1. Estructura l'HTML de la portada i la galeria amb elements semàntics (article, aside, figure, figcaption).
2. Resol la portada en mòbil amb grid-template-areas i assigna cada peça a la seva àrea.
3. Redefineix només grid-template-columns i grid-template-areas a les media queries de 768 px i 1024 px.
4. Munta la galeria amb auto-fit, minmax i les fotos que ocupen dues cel·les.
5. Afegeix els efectes hover i revisa el resultat a 375, 768 i 1280 px d'amplada.

PistasPistes

• En grid-template-areas cada cadena entre comillas es una fila. Repetir un nombre en celdas contiguas hace que el área se extienda, pero cada área debe formar un rectángulo.
• Con grid-area: principal en un hijo lo enlazas al área con ese nombre. Así, en las media queries solo cambias el «mapa» del contenedor.
• grid-column: span 2 y grid-row: span 2 hacen que un elemento ocupe dos celdas. Con grid-auto-flow: dense el grid rellena los huecos que quedan.
• Si en móvil solo cabe una columna, un span 2 fuerza una columna extra y la página desborda: activa ese span a partir de un ancho mínimo.

• A grid-template-areas cada cadena entre cometes és una fila. Repetir un nom en cel·les contigües fa que l'àrea s'estengui, però cada àrea ha de formar un rectangle.
• Amb grid-area: principal en un fill l'enllaces a l'àrea amb aquest nom. Així, a les media queries només canvies el «mapa» del contenidor.
• grid-column: span 2 i grid-row: span 2 fan que un element ocupi dues cel·les. Amb grid-auto-flow: dense la graella omple els forats que queden.
• Si en mòbil només hi cap una columna, un span 2 força una columna extra i la pàgina desborda: activa aquest span a partir d'una amplada mínima.

PasosPassos

1. Escribe todo el HTML semántico de la página y declara las variables en :root.
2. Maqueta la versión móvil completa, sección por sección, revisándola a 375 px.
3. Añade el breakpoint de 768 px: menú en una fila y tarjetas, testimonios y footer a dos columnas.
4. Añade el breakpoint de 1024 px: cuatro clases, tres planes con el destacado ampliado, tres testimonios y footer a cuatro columnas.
5. Pule transiciones, estados hover y comprueba que no hay scroll horizontal en ningún ancho.

1. Escriu tot l'HTML semàntic de la pàgina i declara les variables a :root.
2. Maqueta la versió mòbil completa, secció per secció, revisant-la a 375 px.
3. Afegeix el punt de ruptura de 768 px: menú en una fila i targetes, testimonis i footer a dues columnes.
4. Afegeix el punt de ruptura de 1024 px: quatre classes, tres plans amb el destacat ampliat, tres testimonis i footer a quatre columnes.
5. Poleix transicions, estats hover i comprova que no hi ha scroll horitzontal a cap amplada.

PistasPistes

• background-image admite varias capas separadas por comas: pon primero el linear-gradient y después la url() de la foto, y combínalo con background-size: cover.
• La propiedad order cambia la posición visual de un hijo flex o grid sin tocar el HTML: order: -1 lo pasa delante de todos.
• Para la insignia sobre el borde del plan: padre con position: relative, insignia con position: absolute, top: 0, left: 50% y transform: translate(-50%, -50%).
• Si la barra sticky tapa el título al pulsar un enlace interno, prueba scroll-padding-top en el elemento html.

• background-image admet diverses capes separades per comes: posa primer el linear-gradient i després la url() de la foto, i combina-ho amb background-size: cover.
• La propietat order canvia la posició visual d'un fill flex o grid sense tocar l'HTML: order: -1 el passa davant de tots.
• Per a la insígnia sobre la vora del pla: pare amb position: relative, insígnia amb position: absolute, top: 0, left: 50% i transform: translate(-50%, -50%).
• Si la barra sticky tapa el títol quan prems un enllaç intern, prova scroll-padding-top a l'element html.

PasosPassos

1. Crea index.html con la plantilla de Bootstrap 5.3: meta charset, meta viewport, el CSS del CDN en el head y el bundle de JavaScript al final del body.
2. Pon la clase bg-light al body para tener un fondo gris muy claro.
3. Crea un header con las clases bg-dark text-white py-5 mb-5 y, dentro, un div.container.
4. Dentro del container añade un párrafo con text-uppercase small text-white-50, un h1 con display-3 fw-bold y un párrafo con la clase lead.
5. Añade dos enlaces con aspecto de botón: btn btn-warning btn-lg me-2 y btn btn-outline-light btn-lg.
6. Crea un main.container y empieza con un div.alert.alert-info con role="alert".
7. Escribe la sección "Sobre mí" con un h2.mb-3, un párrafo con fs-5 y otro con text-secondary.
8. Escribe la sección "Servicios" con tres div que lleven bg-white border-start border-4 rounded p-4 y un color de borde distinto en cada uno (border-warning, border-primary, border-success).
9. Usa h3 con la clase h5 para los títulos de cada bloque y mb-0 en sus párrafos.
10. Crea tres span con d-inline-block text-bg-* px-3 py-2 rounded-pill me-2 mb-2 para los datos en cifras.
11. Monta la caja de contacto con text-center bg-white border rounded-3 p-5 y dos botones (btn-success y btn-outline-secondary).
12. Termina con un div.alert.alert-warning y un footer con border-top py-4 text-center text-secondary small.

1. Crea index.html amb la plantilla de Bootstrap 5.3: meta charset, meta viewport, el CSS del CDN al head i el bundle de JavaScript al final del body.
2. Posa la classe bg-light al body per tenir un fons gris molt clar.
3. Crea un header amb les classes bg-dark text-white py-5 mb-5 i, a dins, un div.container.
4. Dins del container afegeix un paràgraf amb text-uppercase small text-white-50, un h1 amb display-3 fw-bold i un paràgraf amb la classe lead.
5. Afegeix dos enllaços amb aspecte de botó: btn btn-warning btn-lg me-2 i btn btn-outline-light btn-lg.
6. Crea un main.container i comença amb un div.alert.alert-info amb role="alert".
7. Escriu la secció "Sobre mi" amb un h2.mb-3, un paràgraf amb fs-5 i un altre amb text-secondary.
8. Escriu la secció "Serveis" amb tres div que portin bg-white border-start border-4 rounded p-4 i un color de vora diferent a cadascun (border-warning, border-primary, border-success).
9. Fes servir h3 amb la classe h5 per als títols de cada bloc i mb-0 als seus paràgrafs.
10. Crea tres span amb d-inline-block text-bg-* px-3 py-2 rounded-pill me-2 mb-2 per a les dades en xifres.
11. Munta la caixa de contacte amb text-center bg-white border rounded-3 p-5 i dos botons (btn-success i btn-outline-secondary).
12. Acaba amb un div.alert.alert-warning i un footer amb border-top py-4 text-center text-secondary small.

PasosPassos

1. Parte de la plantilla de Bootstrap 5.3 y pon bg-body-tertiary al body.
2. Crea el header verde (bg-success text-white py-3) con un container-fluid y una fila con align-items-center.
3. Dentro de esa fila usa una columna col para el título y una col-auto para la fecha.
4. Debajo, abre un container-fluid py-4 y una fila con g-4.
5. Crea el aside con col-12 col-md-4 col-lg-3 order-2 order-md-1 y mete un menú nav nav-pills flex-column.
6. Crea el main con col-12 col-md-8 col-lg-9 order-1 order-md-2.
7. Dentro del main, añade una fila row-cols-1 row-cols-sm-2 row-cols-xl-4 g-3 con cuatro div.col.
8. En cada col mete una card h-100 con un card-body: rótulo pequeño, cifra con fs-2 fw-bold y una variación con text-success, text-danger o text-warning-emphasis.
9. Añade una fila gx-4 gy-3 con una columna col-lg-8 (tarjeta con list-group-flush) y otra col-lg-4 (tarjeta con lista de tareas).
10. Cierra con una fila que contenga una columna col-md-10 offset-md-1 col-xl-6 offset-xl-3 y una alerta alert-secondary centrada.
11. Reduce el ancho de la ventana poco a poco y anota en qué píxeles cambia cada bloque.

1. Parteix de la plantilla de Bootstrap 5.3 i posa bg-body-tertiary al body.
2. Crea el header verd (bg-success text-white py-3) amb un container-fluid i una fila amb align-items-center.
3. Dins d'aquesta fila fes servir una columna col per al títol i una col-auto per a la data.
4. A sota, obre un container-fluid py-4 i una fila amb g-4.
5. Crea l'aside amb col-12 col-md-4 col-lg-3 order-2 order-md-1 i posa-hi un menú nav nav-pills flex-column.
6. Crea el main amb col-12 col-md-8 col-lg-9 order-1 order-md-2.
7. Dins del main, afegeix una fila row-cols-1 row-cols-sm-2 row-cols-xl-4 g-3 amb quatre div.col.
8. A cada col posa-hi una card h-100 amb un card-body: rètol petit, xifra amb fs-2 fw-bold i una variació amb text-success, text-danger o text-warning-emphasis.
9. Afegeix una fila gx-4 gy-3 amb una columna col-lg-8 (targeta amb list-group-flush) i una altra col-lg-4 (targeta amb llista de tasques).
10. Tanca amb una fila que contingui una columna col-md-10 offset-md-1 col-xl-6 offset-xl-3 i una alerta alert-secondary centrada.
11. Redueix l'amplada de la finestra a poc a poc i anota a quants píxels canvia cada bloc.

PasosPassos

1. Plantilla con los tres enlaces del head en orden: Bootstrap, Bootstrap Icons y tu css/style.css.
2. Navbar completa con navbar-expand-lg, botón navbar-toggler, bloque collapse y desplegable.
3. Hero con una fila de dos columnas col-lg-6 alineadas al centro.
4. Sección de cursos con row-cols-1 row-cols-md-3 y tres cards h-100.
5. Footer en columnas y retoques de color en style.css.

1. Plantilla amb els tres enllaços del head en ordre: Bootstrap, Bootstrap Icons i el teu css/style.css.
2. Navbar completa amb navbar-expand-lg, botó navbar-toggler, bloc collapse i desplegable.
3. Hero amb una fila de dues columnes col-lg-6 alineades al centre.
4. Secció de cursos amb row-cols-1 row-cols-md-3 i tres cards h-100.
5. Footer en columnes i retocs de color a style.css.

PistasPistes

• El data-bs-target del botón hamburguesa lleva almohadilla (#menuPrincipal) y tiene que coincidir con el id del div collapse, que va sin almohadilla.
• Para empujar el menú a la derecha basta con ms-auto en el ul.navbar-nav.
• El desplegable necesita tres piezas: li.nav-item.dropdown, un enlace con dropdown-toggle y data-bs-toggle="dropdown", y un ul.dropdown-menu.
• Si cambias --bs-primary y los botones siguen azules, recuerda que .btn-primary usa sus propias variables --bs-btn-bg, --bs-btn-border-color y las de hover.
• Si el menú hamburguesa no se abre, comprueba que el script bootstrap.bundle.min.js está al final del body.

• El data-bs-target del botó hamburguesa porta coixinet (#menuPrincipal) i ha de coincidir amb l'id del div collapse, que va sense coixinet.
• Per empènyer el menú a la dreta n'hi ha prou amb ms-auto a l'ul.navbar-nav.
• El desplegable necessita tres peces: li.nav-item.dropdown, un enllaç amb dropdown-toggle i data-bs-toggle="dropdown", i un ul.dropdown-menu.
• Si canvies --bs-primary i els botons continuen blaus, recorda que .btn-primary fa servir les seves pròpies variables --bs-btn-bg, --bs-btn-border-color i les de hover.
• Si el menú hamburguesa no s'obre, comprova que l'script bootstrap.bundle.min.js és al final del body.

PasosPassos

1. Estructura: container, fila centrada con justify-content-center y una card con card-body.
2. Bloque de datos con row g-3 y tres form-floating.
3. Bloque de contacto con dos input-group, un form-select y un textarea flotante.
4. Bloque de material con fieldset, radios, checks en línea, switch y check obligatorio.
5. Estados is-valid / is-invalid con sus mensajes y botón final btn-lg w-100.

1. Estructura: container, fila centrada amb justify-content-center i una card amb card-body.
2. Bloc de dades amb row g-3 i tres form-floating.
3. Bloc de contacte amb dos input-group, un form-select i un textarea flotant.
4. Bloc de material amb fieldset, ràdios, caselles en línia, switch i casella obligatòria.
5. Estats is-valid / is-invalid amb els seus missatges i botó final btn-lg w-100.

PistasPistes

• Dentro de form-floating el orden importa: primero el input y después el label. Además el input necesita un atributo placeholder aunque no se llegue a ver.
• Los mensajes valid-feedback e invalid-feedback están ocultos por defecto. Solo aparecen cuando el campo que tienen justo antes lleva is-valid o is-invalid.
• Los radios de un mismo grupo deben compartir el mismo name; si no, se podrán marcar todos a la vez.
• Cada form-check-input necesita un id único y su label un for con ese mismo id. Así, al pulsar el texto también se marca la casilla.
• Un textarea dentro de form-floating sale con la altura de una línea; la utilidad h-auto junto con rows lo soluciona sin CSS propio.

• Dins de form-floating l'ordre importa: primer l'input i després el label. A més, l'input necessita un atribut placeholder encara que no es vegi.
• Els missatges valid-feedback i invalid-feedback estan amagats per defecte. Només apareixen quan el camp que tenen just abans porta is-valid o is-invalid.
• Els ràdios d'un mateix grup han de compartir el mateix name; si no, es podran marcar tots alhora.
• Cada form-check-input necessita un id únic i el seu label un for amb aquest mateix id. Així, en clicar el text també es marca la casella.
• Un textarea dins de form-floating surt amb l'alçada d'una línia; la utilitat h-auto juntament amb rows ho soluciona sense CSS propi.

PasosPassos

1. Navbar y cabecera centrada.
2. Tres tarjetas de precio en una fila row-cols-lg-3, con la central destacada.
3. Tabla de comparación dentro de table-responsive.
4. Acordeón de preguntas frecuentes.
5. Variables --bs-* en css/style.css para llevar el granate a todos los componentes.

1. Navbar i capçalera centrada.
2. Tres targetes de preu en una fila row-cols-lg-3, amb la central destacada.
3. Taula de comparació dins de table-responsive.
4. Acordió de preguntes freqüents.
5. Variables --bs-* a css/style.css per portar el granat a tots els components.

PistasPistes

• Una card admite varios card-body: uno arriba con el precio, un list-group-flush en medio y otro card-body abajo con el botón.
• La tabla va dentro de un div.table-responsive; es ese div el que genera la barra de desplazamiento.
• En el acordeón, cada botón apunta con data-bs-target al id de su panel, y todos los paneles llevan data-bs-parent con el id del acordeón para que solo haya uno abierto.
• Además de --bs-primary y --bs-primary-rgb, botones, tablas y acordeón tienen variables propias (--bs-btn-*, --bs-table-bg, --bs-accordion-active-bg). Búscalas en la documentación de cada componente, en el apartado "CSS variables".

• Una card admet diversos card-body: un a dalt amb el preu, un list-group-flush al mig i un altre card-body a baix amb el botó.
• La taula va dins d'un div.table-responsive; és aquest div el que genera la barra de desplaçament.
• A l'acordió, cada botó apunta amb data-bs-target a l'id del seu panell, i tots els panells porten data-bs-parent amb l'id de l'acordió perquè només n'hi hagi un d'obert.
• A més de --bs-primary i --bs-primary-rgb, els botons, les taules i l'acordió tenen variables pròpies (--bs-btn-*, --bs-table-bg, --bs-accordion-active-bg). Busca-les a la documentació de cada component, a l'apartat "CSS variables".

PasosPassos

1. Navbar fixed-top con data-bs-theme="dark" y botón que abre el modal.
2. Carrusel de portada con indicadores, flechas y carousel-caption.
3. Carta con nav-tabs y tab-content, y galería con row-cols y ratio-1x1.
4. Sección de ubicación con el iframe de OpenStreetMap dentro de un div.ratio, y footer con Bootstrap Icons.
5. Modal de reserva con formulario y variables de marca en css/style.css.

1. Navbar fixed-top amb data-bs-theme="dark" i botó que obre el modal.
2. Carrusel de portada amb indicadors, fletxes i carousel-caption.
3. Carta amb nav-tabs i tab-content, i galeria amb row-cols i ratio-1x1.
4. Secció d'ubicació amb l'iframe d'OpenStreetMap dins d'un div.ratio, i footer amb Bootstrap Icons.
5. Modal de reserva amb formulari i variables de marca a css/style.css.

PistasPistes

• Con fixed-top la navbar deja de ocupar sitio y tapa el principio de la página: compensa con un padding-top en el body.
• Las pestañas necesitan que cada botón tenga data-bs-toggle="tab" y un data-bs-target con el id de su tab-pane; solo un botón y un panel llevan active al empezar.
• Para el mapa, ve a openstreetmap.org, busca la Plaça del Sol, pulsa Compartir y elige HTML: obtendrás la URL export/embed.html con el bbox. Mete el iframe dentro de un div.ratio.ratio-4x3 y se adaptará solo.
• El modal puede ir al final del body. Lo abre cualquier botón con data-bs-toggle="modal" y data-bs-target apuntando a su id.

• Amb fixed-top la navbar deixa d'ocupar lloc i tapa el principi de la pàgina: compensa-ho amb un padding-top al body.
• Les pestanyes necessiten que cada botó tingui data-bs-toggle="tab" i un data-bs-target amb l'id del seu tab-pane; només un botó i un panell porten active en començar.
• Per al mapa, ves a openstreetmap.org, busca la plaça del Sol, prem Comparteix i tria HTML: obtindràs l'URL export/embed.html amb el bbox. Posa l'iframe dins d'un div.ratio.ratio-4x3 i s'adaptarà sol.
• El modal pot anar al final del body. L'obre qualsevol botó amb data-bs-toggle="modal" i data-bs-target apuntant al seu id.