El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

En aquesta secció, aprendrem a crear el disseny d'un lloc web responsiu utilitzant les tècniques i conceptes apresos en els mòduls anteriors. Ens centrarem en estructurar correctament el nostre HTML i aplicar CSS per aconseguir un disseny net i funcional.

Estructura HTML Bàsica

Comencem per crear una estructura HTML bàsica per al nostre lloc web. Aquesta estructura inclourà els elements principals com el capçal, el menú de navegació, el contingut principal i el peu de pàgina.

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lloc Web Responsiu</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>El Meu Lloc Web</h1>
        <nav>
            <ul>
                <li><a href="#home">Inici</a></li>
                <li><a href="#about">Sobre Nosaltres</a></li>
                <li><a href="#services">Serveis</a></li>
                <li><a href="#contact">Contacte</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section id="home">
            <h2>Benvinguts</h2>
            <p>Aquesta és la pàgina d'inici del nostre lloc web.</p>
        </section>
        <section id="about">
            <h2>Sobre Nosaltres</h2>
            <p>Informació sobre la nostra empresa.</p>
        </section>
        <section id="services">
            <h2>Serveis</h2>
            <p>Detalls dels serveis que oferim.</p>
        </section>
        <section id="contact">
            <h2>Contacte</h2>
            <p>Com posar-se en contacte amb nosaltres.</p>
        </section>
    </main>
    <footer>
        <p>&copy; 2023 El Meu Lloc Web. Tots els drets reservats.</p>
    </footer>
</body>
</html>

Estilització Bàsica amb CSS

Ara afegirem alguns estils bàsics per donar forma al nostre lloc web. Començarem per establir estils globals i després estilitzarem cada secció per separat.

2.1. Estils Globals

/* Reset CSS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Estils Globals */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f4f4f4;
    padding: 20px;
}

header, main, footer {
    margin-bottom: 20px;
}

h1, h2 {
    color: #444;
}

2.2. Estilització del Capçal i el Menú de Navegació

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

header h1 {
    margin-bottom: 10px;
}

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

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

nav ul li a {
    color: #fff;
    text-decoration: none;
}

nav ul li a:hover {
    text-decoration: underline;
}

2.3. Estilització del Contingut Principal

main {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

section {
    margin-bottom: 20px;
}

section h2 {
    margin-bottom: 10px;
}

section p {
    margin-bottom: 10px;
}

2.4. Estilització del Peu de Pàgina

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

Disseny Responsiu

Per assegurar-nos que el nostre lloc web es veu bé en tots els dispositius, afegirem algunes consultes de mitjans per ajustar el disseny en pantalles més petites.

/* Consultes de Mitjans */
@media (max-width: 768px) {
    nav ul li {
        display: block;
        margin-bottom: 10px;
    }

    main {
        padding: 10px;
    }
}

@media (max-width: 480px) {
    header h1 {
        font-size: 1.5em;
    }

    nav ul li a {
        font-size: 1em;
    }
}

Exercici Pràctic

Exercici: Afegiu una nova secció al lloc web amb el títol "Blog" i una breu descripció. Estilitzeu aquesta secció de manera similar a les altres seccions.

Solució:

HTML

<section id="blog">
    <h2>Blog</h2>
    <p>Les últimes notícies i articles del nostre blog.</p>
</section>

CSS

#blog {
    margin-bottom: 20px;
}

#blog h2 {
    margin-bottom: 10px;
}

#blog p {
    margin-bottom: 10px;
}

Conclusió

En aquesta secció, hem après a crear el disseny d'un lloc web responsiu utilitzant HTML i CSS. Hem establert una estructura HTML bàsica, aplicat estils globals i específics per a cada secció, i hem afegit consultes de mitjans per assegurar-nos que el lloc es veu bé en diferents dispositius. Ara estem preparats per passar a la següent fase del projecte, on estilitzarem els components del lloc web.

Crear el Disseny

Estructura HTML Bàsica

Estilització Bàsica amb CSS

2.1. Estils Globals

2.2. Estilització del Capçal i el Menú de Navegació

2.3. Estilització del Contingut Principal

2.4. Estilització del Peu de Pàgina

Disseny Responsiu

Exercici Pràctic

HTML

CSS

Conclusió

Domini del CSS: De Principiant a Avançat

Mòdul 1: Introducció al CSS

Mòdul 2: Estilització de Text i Fonts

Mòdul 3: Model de Caixa i Disseny

Mòdul 4: Posicionament i Flotació

Mòdul 5: Flexbox

Mòdul 6: CSS Grid

Mòdul 7: Tècniques Avançades de CSS

Mòdul 8: Disseny Responsiu

Mòdul 9: Preprocessadors i Frameworks

Mòdul 10: Millors Pràctiques i Optimització

Mòdul 11: Projecte: Construir un Lloc Web Responsiu