Dia 42: Creant un disseny responsiu i traduït per al repte 180 Frontend Challenge. En aquest article revisem de manera pràctica com dissenyar llocs web que s'adaptin a totes les pantalles i presentem consells per portar els teus projectes a producció juntament amb serveis professionals oferts per Q2BSTUDIO.
Què és el disseny responsiu? El disseny responsiu garanteix que una pàgina web s'adapti a diferents mides de pantalla i dispositius sense trencar la seva maquetació ni la seva usabilitat. Implica utilitzar dissenys flexibles, imatges fluides que es redimensionen automàticament i media queries per ajustar estils segons punts de trencament.
Estructura de carpetes recomanada: responsive-layout/ index.html style.css images/ sample.jpg Aquesta estructura mínima t'ajuda a mantenir ordre en projectes senzills i escalar més tard.
Pas 1: Estructura HTML bàsica. Aquí tens un exemple simplificat per a una pàgina amb tres seccions. El codi es mostra amb caràcters escapats perquè puguis copiar-lo tal qual i provar-lo al teu editor. <! -- index.html --> <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial-scale=1.0 /> <title>Responsive Layout</title> <link rel=stylesheet href=style.css /> </head> <body> <header> <h1>El Meu Lloc Web Responsiu</h1> </header> <nav> <a href=#>Inici</a> <a href=#>Quant a</a> <a href=#>Projectes</a> <a href=#>Contacte</a> </nav> <main> <section class=card> <img src=images/sample.jpg alt=Sample Image> <h2>Secció 1</h2> <p>Contingut d'exemple que s'ajusta a diferents dispositius.</p> </section> <section class=card> <img src=images/sample.jpg alt=Sample Image> <h2>Secció 2</h2> <p>Els dissenys responsius mantenen el contingut accessible i llegible.</p> </section> <section class=card> <img src=images/sample.jpg alt=Sample Image> <h2>Secció 3</h2> <p>Disseny mobile first per prioritzar pantalles petites abans d'escalar cap amunt.</p> </section> </main> <footer> <p>© 2025 El Meu Lloc Web Responsiu</p> </footer> </body> </html>
Pas 2: Estils CSS essencials per a la responsivitat. Utilitza Flexbox i media queries. A continuació es mostra el CSS en format escapado perquè puguis enganxar-lo directament a style.css. /* style.css */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: system-ui, sans-serif; line-height: 1.6; background: #f8f9fa; color: #333; } header { background: #007bff; color: white; text-align: center; padding: 1.5rem; } nav { background: #222; text-align: center; } nav a { color: white; text-decoration: none; padding: 1rem; display: inline-block; } nav a:hover { background: #007bff; } main { display: flex; gap: 1rem; padding: 1rem; } .card { background: white; padding: 1rem; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); flex: 1; } .card img { max-width: 100%; border-radius: 6px; } footer { background: #222; color: white; text-align: center; padding: 1rem; margin-top: 2rem; }
Pas 3: Media queries i enfocament mobile first. Recomanem partir d'una columna per a mòbils i ampliar a diverses columnes en pantalles més grans. Exemple de media queries escapado: @media (min-width: 768px) { main { flex-direction: row; } } @media (max-width: 767px) { main { flex-direction: column; } nav a { display: block; border-top: 1px solid #333; } }
Què aprendràs amb aquest exercici: disseny mobile first començant per dispositius petits, layouts flexibles amb Flexbox, imatges fluides que no trenquen la maquetació i ús de media queries per ajustar estils en tauletes i escriptoris.
Consejos professionals per a disseny responsiu: utilitza percentatges o max-width en lloc d'amplades fixes en píxels per a més flexibilitat; prova els teus layouts en diversos dispositius i navegadors; mantén objectius tàctils prou grans per a usuaris mòbils; evita el desplaçament horitzontal en pantalles petites.
Tasques suggerides avui: 1 Construeix la maqueta exactament com es mostra. 2 Prova en viewports de mòbil, tauleta i escriptori. 3 Personalitza colors, espaiat i tipografia segons el teu estil. 4 Puja el projecte a GitHub o desplega a Netlify i comparteix el teu treball.
Potencia les teves habilitats frontend: si vols dominar disseny responsiu, CSS Grid i layouts per components, revisa recursos avançats i projectes complets. També oferim formació i consultoria tècnica especialitzada a Q2BSTUDIO.
Sobre Q2BSTUDIO: Q2BSTUDIO és una empresa dedicada al desenvolupament de programari i aplicacions a mida amb experiència en intel·ligència artificial, ciberseguretat i solucions cloud. Brindem serveis cloud aws i azure, serveis d'intel·ligència de negoci i desenvolupaments de programari a mida per a empreses que busquen transformar processos amb tecnologia. Som especialistes en intel·ligència artificial i ia per a empreses, creem agents IA personalitzats, integracions amb Power BI i pipelines de dades per a anàlisi i presa de decisions.
Serveis destacats de Q2BSTUDIO: aplicacions a mida, programari a mida, intel·ligència artificial aplicada a negoci, ciberseguretat, serveis cloud aws i azure, serveis intel·ligència de negoci, ia per a empreses, agents IA, power bi. La nostra proposta combina consultoria estratègica, disseny de solucions segures i escalables, i desenvolupament full stack per lliurar productes llestos per a producció.
Com et podem ajudar: avaluem requeriments, proposem arquitectura cloud segura a aws o azure, dissenyem i implementem aplicacions a mida integrant models d'intel·ligència artificial i pipelines de dades per a Power BI, i reforcem els teus sistemes amb pràctiques de ciberseguretat. Si necessites agents IA per automatitzar tasques o solucions d'intel·ligència de negoci, treballem juntament amb el teu equip per obtenir resultats mesurables.
Recurs recomanat: aconsegueix material avançat i exemples pràctics a https://codewithdhanian.gumroad.com/l/sxpyzb i complementa amb serveis professionals de Q2BSTUDIO per portar els teus projectes a producció.
Resum final: dominar disseny responsiu és clau per a qualsevol frontend developer. Practica amb aquest exercici, aplica els consells professionals i aprofita els serveis de Q2BSTUDIO per escalar projectes cap a solucions segures, intel·ligents i escalables amb aplicacions a mida i intel·ligència artificial.
Contacte i següent pas: si vols que avaluem el teu projecte o t'ajudem a desplegar una solució completa amb èmfasi en intel·ligència artificial i ciberseguretat, posa't en contacte amb Q2BSTUDIO i sol·licita una consultoria tècnica. Inclou al teu missatge referències a aplicacions a mida, programari a mida, intel·ligència artificial, ciberseguretat, serveis cloud aws i azure, serveis intel·ligència de negoci, ia per a empreses, agents IA i power bi perquè puguem prioritzar les teves necessitats.
