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

HOME

En aquesta secció, configurarem l'entorn de treball per al projecte final del curs, on construirem un lloc web responsiu. Aquesta configuració inclou la creació de l'estructura de carpetes, la configuració dels fitxers necessaris i la instal·lació d'eines que ens ajudaran en el desenvolupament.

Estructura de Carpetes

Comencem per crear una estructura de carpetes organitzada per mantenir el nostre projecte net i fàcil de gestionar. La següent estructura és una bona pràctica per a projectes web:

projecte-lloc-web
│
├── index.html
├── css
│   └── styles.css
├── js
│   └── scripts.js
├── images
│   └── (imatges del projecte)
└── fonts
    └── (fonts personalitzades)

Explicació de l'Estructura:

index.html: El fitxer principal HTML del lloc web.
css/styles.css: El fitxer CSS on escriurem els nostres estils.
js/scripts.js: El fitxer JavaScript per a qualsevol funcionalitat interactiva.
images/: Carpeta per a les imatges utilitzades al lloc web.
fonts/: Carpeta per a les fonts personalitzades que utilitzarem.

Creació de Fitxers

Ara crearem els fitxers necessaris dins de l'estructura de carpetes. Pots fer això manualment o utilitzar un editor de codi com Visual Studio Code per crear-los ràpidament.

Fitxer HTML Bàsic

Crea un fitxer anomenat index.html dins de la carpeta principal del projecte i afegeix el següent codi HTML bàsic:

<!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="css/styles.css">
</head>
<body>
    <header>
        <h1>Benvingut al nostre Lloc Web</h1>
    </header>
    <main>
        <p>Aquest és el nostre projecte final del curs CSS.</p>
    </main>
    <footer>
        <p>&copy; 2023 Lloc Web Responsiu</p>
    </footer>
    <script src="js/scripts.js"></script>
</body>
</html>

Fitxer CSS Bàsic

Crea un fitxer anomenat styles.css dins de la carpeta css i afegeix el següent codi CSS bàsic:

/* Reset bàsic */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    padding: 20px;
}

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

header h1 {
    font-size: 2em;
    color: #333;
}

footer p {
    text-align: center;
    color: #777;
}

Fitxer JavaScript Bàsic

Crea un fitxer anomenat scripts.js dins de la carpeta js i afegeix el següent codi JavaScript bàsic:

document.addEventListener('DOMContentLoaded', function() {
    console.log('El lloc web està carregat i llest!');
});

Instal·lació d'Eines

Per facilitar el desenvolupament, podem utilitzar algunes eines com preprocessadors de CSS (Sass) i frameworks (Bootstrap). En aquesta secció, instal·larem Sass i Bootstrap.

Instal·lació de Sass

Sass és un preprocessador CSS que ens permet utilitzar característiques avançades com variables, mixins i funcions. Per instal·lar Sass, necessitem tenir npm (Node Package Manager) instal·lat.

Obre el terminal i navega a la carpeta del projecte.
Executa el següent comandament per inicialitzar un projecte Node:

npm init -y

Instal·la Sass utilitzant npm:

npm install sass --save-dev

Afegeix un script al fitxer package.json per compilar Sass automàticament:

"scripts": {
    "sass": "sass --watch css/styles.scss:css/styles.css"
}

Instal·lació de Bootstrap

Bootstrap és un framework CSS popular que ens ajuda a crear dissenys responsius ràpidament.

Descarrega Bootstrap des del lloc oficial (https://getbootstrap.com/) o instal·la'l utilitzant npm:

npm install bootstrap

Inclou Bootstrap al teu fitxer index.html:

<head>
    <!-- Altres etiquetes -->
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
    <!-- Contingut -->
    <script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body>

Executar el Projecte

Per veure el nostre projecte en acció, simplement obre el fitxer index.html en un navegador web. Si has instal·lat Sass, pots executar el següent comandament per compilar els fitxers Sass a CSS:

npm run sass

Conclusió

Ara que hem configurat l'entorn de treball, estem preparats per començar a construir el nostre lloc web responsiu. En la següent secció, començarem a crear el disseny del lloc web utilitzant les tècniques i eines que hem après al llarg del curs.

Configuració del Projecte

Estructura de Carpetes

Explicació de l'Estructura:

Creació de Fitxers

Fitxer HTML Bàsic

Fitxer CSS Bàsic

Fitxer JavaScript Bàsic

Instal·lació d'Eines

Instal·lació de Sass

Instal·lació de Bootstrap

Executar el Projecte

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