El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Projecte Final: Crea el Teu Propi Disseny Responsive

Fi!

En aquest projecte final, aplicaràs tots els coneixements adquirits al llarg del curs per crear un lloc web completament responsive. Aquest projecte et permetrà demostrar la teva comprensió dels conceptes clau del disseny responsive i la teva capacitat per implementar-los en un projecte real.

Objectius del Projecte

  • Dissenyar i desenvolupar un lloc web que s'adapti a diferents dispositius i mides de pantalla.
  • Utilitzar media queries per ajustar el disseny segons els punts de trencament definits.
  • Implementar dissenys flexibles utilitzant CSS Flexbox i CSS Grid.
  • Optimitzar imatges i contingut per a un rendiment òptim en dispositius mòbils.
  • Assegurar l'accessibilitat del lloc web per a tots els usuaris.

Requisits del Projecte

  1. Estructura HTML:

    • Crea una estructura HTML semàntica que inclogui capçalera, seccions, articles, i peu de pàgina.
    • Utilitza etiquetes HTML5 adequades per a cada part del contingut.

  2. Estilització CSS:

    • Aplica estils CSS per donar format al contingut, assegurant-te que el disseny sigui atractiu i funcional.
    • Utilitza el model de caixa de CSS per gestionar marges, farcits i dimensions.

  3. Media Queries:

    • Defineix punts de trencament per a dispositius mòbils, tauletes i escriptoris.
    • Ajusta el disseny i la disposició del contingut utilitzant media queries.

  4. Dissenys Flexibles:

    • Implementa CSS Flexbox per a la disposició de components en línia i columnes.
    • Utilitza CSS Grid per a la creació de dissenys de graella complexos.

  5. Optimització i Accessibilitat:

    • Optimitza les imatges per a una càrrega ràpida i un ús eficient de l'ample de banda.
    • Assegura't que el lloc sigui accessible, utilitzant atributs ARIA i comprovant el contrast de colors.

Guia de Desenvolupament

Pas 1: Planificació

  • Esbossa el disseny del lloc web en paper o utilitzant eines de disseny digital.
  • Defineix els punts de trencament que utilitzaràs per a les media queries.

Pas 2: Estructura HTML

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lloc Web Responsive</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>El Meu Lloc Web Responsive</h1>
        <nav>
            <ul>
                <li><a href="#inici">Inici</a></li>
                <li><a href="#sobre">Sobre</a></li>
                <li><a href="#contacte">Contacte</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section id="inici">
            <h2>Benvinguts</h2>
            <p>Aquesta és la pàgina d'inici del meu lloc web responsive.</p>
        </section>
        <section id="sobre">
            <h2>Sobre Nosaltres</h2>
            <p>Informació sobre la nostra empresa i serveis.</p>
        </section>
        <section id="contacte">
            <h2>Contacte</h2>
            <p>Formulari de contacte i informació de contacte.</p>
        </section>
    </main>
    <footer>
        <p>&copy; 2023 El Meu Lloc Web Responsive</p>
    </footer>
</body>
</html>

Pas 3: Estilització CSS

/* Estils bàsics */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

header {
    background: #333;
    color: #fff;
    padding: 10px 0;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin-right: 10px;
}

main {
    padding: 20px;
}

footer {
    background: #333;
    color: #fff;
    text-align: center;
    padding: 10px 0;
}

/* Media Queries */
@media (max-width: 768px) {
    nav ul li {
        display: block;
        margin: 5px 0;
    }
}

Pas 4: Proves i Optimització

  • Prova el lloc web en diferents dispositius i navegadors per assegurar-te que el disseny és consistent.
  • Optimitza el rendiment comprimint imatges i minimitzant els fitxers CSS i JavaScript.

Conclusió

Aquest projecte final és una oportunitat per consolidar els teus coneixements en disseny responsive. Assegura't de seguir els requisits i la guia de desenvolupament per crear un lloc web que no només sigui visualment atractiu, sinó també funcional i accessible. Un cop completat, tindràs un exemple pràctic que podràs afegir al teu portafoli professional. Bona sort!

◄ Anterior
◄
Fi!
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats