1 files changed, 112 insertions, 0 deletions
diff --git a/files/ca/learn/css/estilitzar_text/composició_pàgina_inici/index.html b/files/ca/learn/css/estilitzar_text/composició_pàgina_inici/index.html
new file mode 100644
index 0000000000..2619be67e7
--- /dev/null
+++ b/files/ca/learn/css/estilitzar_text/composició_pàgina_inici/index.html
@@ -0,0 +1,112 @@
+---
+title: Composició d'una pàgina d'inici de l'escola comunitaria
+slug: Learn/CSS/Estilitzar_text/Composició_pàgina_inici
+tags:
+  - Assessment
+  - Beginner
+  - CSS
+  - CodingScripting
+  - Link
+  - Styling text
+  - font
+  - list
+  - web font
+translation_of: Learn/CSS/Styling_text/Typesetting_a_homepage
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</div>
+
+<p class="summary">En aquesta avaluació, comprovarem la comprensió de totes les tècniques d'estil de text que hem cobert al llarg d'aquest mòdul, que us permetrà personalitzar el text de la pàgina d'inici d'una escola comunitària. Podríeu tindra una mica de diversió durant el camí.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Requisits previs:</th>
+   <td><span id="result_box" lang="ca"><span>Abans d'intentar aquesta avaluació, hauríeu d'haver treballat tots els articles d'aquest mòdul.</span></span></td>
+  </tr>
+  <tr>
+   <th scope="row">Objectiu:</th>
+   <td>Provar la comprensió de les tècniques d'estil de text CSS.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Punt_de_partida"><span id="result_box" lang="ca"><span>Punt de partida</span></span></h2>
+
+<p>Per començar aquesta avaluació, heu de:</p>
+
+<ul>
+ <li>Aneu i agafeu els fitxers <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-start/index.html">HTML</a> i <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-start/style.css">CSS</a> per a l'exercici i la <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-start/external-link-52.png">icona de l'enllaç extern proporcionada</a>.</li>
+ <li>Feu una còpia d'ells a l'ordinador local.</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: Com a alternativa, podeu utilitzar un lloc com <a class="external external-icon" href="http://jsbin.com/">JSBin</a> o <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> per fer la vostra avaluació. Podeu enganxar el codi HTML i omplir el CSS en un d'aquests editors en línia i utilitzar <a href="http://mdn.github.io/learning-area/css/styling-text/typesetting-a-homepage-start/external-link-52.png">aquest URL</a> per indicar la imatge de fons. Si l'editor en línia que esteu utilitzant no té cap panell CSS separat, no dubteu a posar-lo en un element <code>&lt;style&gt;</code> a la capçalera del document.</p>
+</div>
+
+<h2 id="Resum_del_projecte"><span id="result_box" lang="ca"><span>Resum del projecte</span></span></h2>
+
+<p>Us hem proporcionat un codi HTML sense format per a la pàgina d'inici d'una universitat comunitària imaginària, a més d'alguns estils CSS de la pàgina en un disseny de dues columnes, proporcionant un estil rudimentari. Heu d'escriure els vostres afegits CSS a sota del comentari a la part inferior del fitxer CSS, per assegurar-vos que sigui fàcil marcar les parts que heu realitzat. No us preocupeu si alguns dels selectors són repetitius; en aquest cas us deixarem.</p>
+
+<p>Fonts:</p>
+
+<ul>
+ <li>Primer de tot, descarregueu un parell de fonts gratuïtes. Com que es tracta d'una escola, les fonts s'haurien d'escollir per donar a la pàgina un sensació bastant seriosa, formal i de confiança - una font serif per el lloc a tot el cos del text general, juntament amb una sans-serif o una serif recta per als encapçalaments, podria ser agradable.</li>
+ <li>Utilitzeu un servei adequat per generar un codi font <code>@face-face</code> blindat per a aquestes dues fonts.</li>
+ <li>Apliqueu la font del cos a la pàgina sencera i la font d'encapçalament a les capçaleres</li>
+</ul>
+
+<p><span id="result_box" lang="ca"><span>Estil de text general</span></span> :</p>
+
+<ul>
+ <li>Doneu a la pàgina un <code>font-size</code> de <code>10px</code> a tot el lloc.</li>
+ <li>Doneu els encapçalaments i altres tipus d'elements les mides de font apropiades definides amb una unitat relativa adequada.</li>
+ <li>Doneu al text del cos una alçada de línia (<code>line-height</code>) adequada.</li>
+ <li>Centreu el encapçalament de nivell superior a la pàgina.</li>
+ <li>Doneu als encapçalaments una mica d'espaiat a les lletres (<code>letter-spacing</code>) perquè no estiguin massa atapeïdes, i deixeu que les lletres respiren una mica.</li>
+ <li>Doneu al text del cos una mica d'espaiat entre lletres (<code>letter-spacing</code>) i espaiat entre paraules (<code>word-spacing</code>) , segons correspong</li>
+ <li>Doneu el primer paràgraf després de cada encapçalament  en la <code>&lt;section&gt;</code> una mica de sagnat al text (<code>text-indentation</code>), diguem 20px.</li>
+</ul>
+
+<p>Enllaços:</p>
+
+<ul>
+ <li>Doneu als estats de l'enllaç, visitad, enfocament i desplaçamen per damunt alguns colors que van amb el color de les barres horitzontals en la part superior i inferior de la pàgina.</li>
+ <li>Feu que els enllaços estiguin subratllats de manera predeterminada, però quan es passa el cursor per damunt o els enfoca, el subratllat desapareix.</li>
+ <li>Elimineu el contorn d'enfocament predeterminat de TOTS els enllaços de la pàgina.</li>
+ <li>Proporcioneu a l'estat actiu un estil notablement diferent, per la qual cosa es destaca molt bé, però cal que encaixi amb el disseny general de la pàgina.</li>
+ <li>Feu que els enllaços externs tinguin la icona de l'enllaç extern inserida al seu costat.</li>
+</ul>
+
+<p>Llistes:</p>
+
+<ul>
+ <li>Assegureu-vos que l'espaiat de les vostres llistes i elements de llista funcionan bé amb l'estil de la pàgina general. Cada element de la llista hauria de tenir la mateixa alçada de línia (<code>line-height</code>) que una línia de paràgraf, i cada llista hauria de tenir el mateix espai en la part superior i inferior que hi ha entre els paràgrafs.</li>
+ <li>Doneu als elements de la llista una bonica vinyeta, apropiada per al disseny de la pàgina. Depenent de si trieu una imatge de vinyeta personalitzada o una altra cosa.</li>
+</ul>
+
+<p><span id="result_box" lang="ca"><span>Menú de navegació</span></span></p>
+
+<ul>
+ <li>El estil del menú de navegació que tingui un aspecte adequat per a l'aparença de la pàgina.</li>
+</ul>
+
+<h2 id="Consells_i_suggeriments">Consells i suggeriments</h2>
+
+<ul>
+ <li>No cal que editeu l'HTML de cap manera per a aquest exercici.</li>
+ <li>No necessàriament heu de fer que el menú de navegació es vegi com botons, però ha de ser una mica més alt per tal que no sembli una tonteria al costat de la pàgina; Recordeu, també, que heu de fer d'aquest un menú vertical de navegació.</li>
+</ul>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>La següent captura de pantalla mostra un exemple del que podria semblar el disseny final:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12994/example2.png" style="display: block; height: 1106px; margin: 0px auto; width: 1533px;"></p>
+
+<h2 id="Avaluació">Avaluació</h2>
+
+<p>Si seguiu aquesta avaluació com a part d'un curs organitzat, hauríeu de poder lliurar el vostre treball al vostre professor/mentor per qualificar-ho. Si esteu en auto-aprenentatge, podreu obtenir la guia de qualificacions amb força facilitat preguntant sobre el tema <a href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">en el fil de conversa en l'àrea d'aprenentatge</a>, o en el canal IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a> en <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Intenteu primer l'exercici - no es guanya res fent trampes!</p>
+
+<p>{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</p>