14 files changed, 296 insertions, 0 deletions
diff --git a/files/ca/learn/css/building_blocks/a_cool_looking_box/index.html b/files/ca/learn/css/building_blocks/a_cool_looking_box/index.html
new file mode 100644
index 0000000000..3a4df8a2b2
--- /dev/null
+++ b/files/ca/learn/css/building_blocks/a_cool_looking_box/index.html
@@ -0,0 +1,85 @@
+---
+title: Una caixa d'aspecte interessant
+slug: Learn/CSS/Caixes_estil/Caixa_aspecte_interessant
+tags:
+  - Assessment
+  - Beginner
+  - CSS
+  - Learn
+  - backgrounds
+  - borders
+  - box
+  - box model
+  - effects
+translation_of: Learn/CSS/Building_blocks/A_cool_looking_box
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}</div>
+
+<p class="summary">En aquesta avaluació, obtindreu una mica més de pràctica a l'hora de crear caixes d'aspecte interessant, intentant crear una caixa atractiva.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Rrequisits 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ó del model de caixa CSS i altres característiques relacionades amb la caixa, com ara les vores i els fons.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Punt_de_partida">Punt de partida</h2>
+
+<p><span id="result_box" lang="ca"><span>Per començar aquesta avaluació, heu de:</span></span></p>
+
+<ul>
+ <li><span id="result_box" lang="ca"><span>Feu còpies locals del codi</span></span> <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/cool-information-box-start/index.html">HTML</a> i <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/cool-information-box-start/style.css">CSS</a> - <span id="result_box" lang="ca"><span>deseu-les com</span></span> <code>index.html</code> and <code>style.css</code> <span id="result_box" lang="ca"><span>en un directori nou</span></span>.</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: Com a alternativa, podeu utilitzar un lloc com <a class="external-icon external" href="http://jsbin.com/">JSBin</a> o <a class="external-icon external" 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. Si l'editor en línia que esteu utilitzant no té cap panell CSS independent, no dubteu a posar-lo en un element &lt;<code>style</code>&gt; al capdavant del document.</p>
+</div>
+
+<h2 id="Resum_del_projecte">Resum del projecte</h2>
+
+<p>La vostra tasca és crear una caixa genial i de luxe i explorar que  podem tenir de divertit amb CSS.</p>
+
+<h3 id="Tasques_generals">Tasques generals</h3>
+
+<ul>
+ <li>Apliqueu el CSS a l'HTML.</li>
+</ul>
+
+<h3 id="L'estil_de_la_caixa">L'estil de la caixa</h3>
+
+<p>Ens agradaria que dissenyéssiu<br>
+ el {{htmlelement("p")}} proporcionat, donant-li el següent:</p>
+
+<ul>
+ <li>Un ample raonable per a un botó gran, diguem al voltant de 200 píxels.</li>
+ <li>Una alçada raonable per a un botó gran, centrant el text verticalment en el procés.</li>
+ <li>Text centrat.</li>
+ <li>Un lleuger augment de la grandària de la font, al voltant de 17-18px d'estil, calculat. Utilitzeu rems. Escriviu com a treballar, el valor, en un comentari.</li>
+ <li>Color base per al disseny. Doneu a la caixa a aquest color com a color de fons.</li>
+ <li>El mateix color per al text; Feu que sigui llegible usant una ombra negre del text.</li>
+ <li>Una vora de radi bastant subtil.</li>
+ <li>Una vora sòlida de 1 píxel amb un color similar al color base, però una ombra una mica més fosca.</li>
+ <li>Un gradient lineal semitransparent negre, que es dirigeix cap a la cantonada superior esquerra. Feu que sigui completament transparent al principi, gradat al voltant de 0,2 d'opacitat en un 30% al llarg i romandre en el mateix color fins al final.</li>
+ <li>Múltiples ombres de caixa. Doneu-li una ombra de caixa estàndard, per fer que la caixa es vegi lleugerament aixecada de la pàgina. Les altres dues haurien de ser ombres de caixa d'inserció: una ombra blanca semitransparent prop de la part superior esquerra i una ombra semitransparent negre a la part inferior dreta, per afegir-li el bonic aspecte 3D de la caixa.</li>
+</ul>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p><span id="result_box" lang="ca"><span>La següent captura de pantalla mostra un exemple del que podria semblar el disseny final</span></span>:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13148/fancy-box.png" style="display: block; height: 76px; margin: 0px auto; width: 228px;"></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 class="external-icon external" 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 class="external-icon external" 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_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}</p>
diff --git a/files/ca/learn/css/building_blocks/fons_i_vores/index.html b/files/ca/learn/css/building_blocks/backgrounds_and_borders/index.html
index 2e2ce4727c..2e2ce4727c 100644
--- a/files/ca/learn/css/building_blocks/fons_i_vores/index.html
+++ b/files/ca/learn/css/building_blocks/backgrounds_and_borders/index.html
diff --git a/files/ca/learn/css/building_blocks/cascada_i_herència/index.html b/files/ca/learn/css/building_blocks/cascade_and_inheritance/index.html
index 09a5e368eb..09a5e368eb 100644
--- a/files/ca/learn/css/building_blocks/cascada_i_herència/index.html
+++ b/files/ca/learn/css/building_blocks/cascade_and_inheritance/index.html
diff --git a/files/ca/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html b/files/ca/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html
new file mode 100644
index 0000000000..2623d6d0dd
--- /dev/null
+++ b/files/ca/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html
@@ -0,0 +1,97 @@
+---
+title: Creació d'una carta amb encapçalat de fantasia
+slug: Learn/CSS/Caixes_estil/Creació_carta
+tags:
+  - Assessment
+  - Background
+  - Beginner
+  - CSS
+  - CodingScripting
+  - border
+  - borderBoxes
+  - letter
+  - letterhead
+  - letterheaded
+  - paper
+translation_of: Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Learn/CSS/Styling_boxes")}}</div>
+
+<p class="summary">Si voleu fer una impressió correcta, escriviu una carta amb un bon paper i una capçalera agradable pot ser un començament realment bo. En aquesta avaluació, us desafiarem a crear una plantilla en línia per aconseguir-ho.</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ó del model de caixa CSS i altres característiques relacionades amb la caixa, com ara la implementació de fons.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Punt_de_partida"><span id="result_box" lang="ca"><span>Punt de partida</span></span></h2>
+
+<p><span id="result_box" lang="ca"><span>Per començar aquesta avaluació, heu de:</span></span></p>
+
+<ul>
+ <li><span id="result_box" lang="ca"><span>Feu còpies locals del codi</span></span> <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/letterheaded-paper-start/index.html">HTML</a> i <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/letterheaded-paper-start/style.css">CSS</a> — <span id="result_box" lang="ca"><span>deseu-les com</span></span> <code>index.html</code> i <code>style.css</code> <span id="result_box" lang="ca"><span>en un directori nou</span></span>.</li>
+ <li><span id="result_box" lang="ca"><span>Deseu còpies locals de les imatges</span></span> <a href="https://raw.githubusercontent.com/mdn/learning-area/master/css/styling-boxes/letterheaded-paper-start/top-image.png">top</a>, <a href="https://raw.githubusercontent.com/mdn/learning-area/master/css/styling-boxes/letterheaded-paper-start/bottom-image.png">bottom</a> i <a href="https://raw.githubusercontent.com/mdn/learning-area/master/css/styling-boxes/letterheaded-paper-start/logo.png">logo</a> <span id="result_box" lang="ca"><span>en el mateix directori que els fitxers de codi.</span></span></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. Si l'editor en línia que esteu utilitzant no té cap panell CSS independent, no dubteu a posar-lo en un element &lt;<code>style</code>&gt; al capdavant del document.</p>
+</div>
+
+<h2 id="Resum_del_projecte">Resum del projecte</h2>
+
+<p>Se us ha donat els fitxers necessaris per crear una plantilla de paper amb capçalera. Només cal que col·loqueu els fitxers junts. Per arribar-hi, heu de:</p>
+
+<h3 id="La_carta_principal">La carta principal</h3>
+
+<ul>
+ <li>Apliqueu el CSS a l'HTML.</li>
+ <li>Afegiu una declaració de fons a la carta que:
+  <ul>
+   <li>Fixeu la imatge superior a la part superior de la carta</li>
+   <li>Fixeu la imatge inferior a la part inferior de la carta</li>
+   <li>Afegiu un gradient semitransparent a la part superior de tots dos fons anteriors que dóna una mica de textura a la lletra. Feu que sigui lleugerament fosc a la part superior i inferior, però que sigui completament transparent per a una gran part del centre.</li>
+  </ul>
+ </li>
+ <li>Afegiu una altra declaració de fons, que només afegeixi la imatge superior a la part superior de la carta, com a alternativa per a navegadors que no admetin la declaració anterior.</li>
+ <li>Afegiu un color de fons blanc a la carta.</li>
+ <li>Afegiu una vora sòlida superior i inferior de 1 mm a la carta, en un color que es mantngui amb la resta del esquema de color.</li>
+</ul>
+
+<h3 id="El_logotip"><span id="result_box" lang="ca"><span>El logotip</span></span></h3>
+
+<ul>
+ <li>A {{htmlelement("h1")}}, afegiu el logotip com a imatge de fons.</li>
+ <li>Afegiu un filtre al logotip per donar-li una ombra subtil.</li>
+ <li>Ara comenteu el filtre i implementeu l'ombra en un mode diferent (una mica més compatible amb el navegador creuat), que encara segueix la forma de la imatge rodona.</li>
+</ul>
+
+<h2 id="Consells_i_suggeriments">Consells i suggeriments</h2>
+
+<ul>
+ <li>Recordeu que pofeu crear una alternativa per als navegadors més antics, posant la versió alternativa com a primera declaració, seguida de la versió que funciona només en els navegadors més recents. Els navegadors més antics aplicaran la primera declaració i ignoraran la segona, mentre que els nous exploradors aplicaran la primera i després la reemplaçaran amb la segona</li>
+ <li>No dubteu a crear els vostres propis gràfics per a l'avaluació si ho voleu.</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/13144/letterhead.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<p> </p>
+
+<h2 id="Avaluació"><span id="result_box" lang="ca"><span>Avaluació</span></span></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 class="external external-icon" 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 class="external external-icon" href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Intenteu primer l'exercici - no es guanya res fent trampes!</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Learn/CSS/Styling_boxes")}}</p>
diff --git a/files/ca/learn/css/building_blocks/depurar_el_css/index.html b/files/ca/learn/css/building_blocks/debugging_css/index.html
index 273468969e..273468969e 100644
--- a/files/ca/learn/css/building_blocks/depurar_el_css/index.html
+++ b/files/ca/learn/css/building_blocks/debugging_css/index.html
diff --git a/files/ca/learn/css/building_blocks/fundamental_css_comprehension/index.html b/files/ca/learn/css/building_blocks/fundamental_css_comprehension/index.html
new file mode 100644
index 0000000000..34a654269a
--- /dev/null
+++ b/files/ca/learn/css/building_blocks/fundamental_css_comprehension/index.html
@@ -0,0 +1,114 @@
+---
+title: Comprensió CSS fonamental
+slug: Learn/CSS/Introducció_a_CSS/Comprensió_CSS_fonamental
+tags:
+  - Assessment
+  - Beginner
+  - CSS
+  - CodingScripting
+  - Selectors
+  - Style
+  - Syntax
+  - box model
+  - comments
+  - rules
+translation_of: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}</div>
+
+<p class="summary">Heu cobert molt en aquest mòdul, de manera que us heu de sentir bé d'haver arribat al final!. El pas final abans de continuar és intentar l'avaluació del mòdul: això implica una sèrie d'exercicis relacionats que s'han de completar per crear el disseny final - un perfil de targeta de visita/targeta de jugador/perfil social.</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><span id="result_box" lang="ca"><span>Comprovar la comprensió de la teoria CSS fonamental, la sintaxi i la mecànica</span></span></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Punt_de_partida"><span id="result_box" lang="ca"><span>Punt de partida</span></span></h2>
+
+<p><span id="result_box" lang="ca"><span>Per començar aquesta avaluació, heu de:</span></span></p>
+
+<ul>
+ <li>Aneu i agafeu el <a href="https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/index.html">fitxer HTML per a l'exercici</a>, i el <a href="https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/chris.jpg">fitxer d'image associat</a>, i deseu-los en un directori nou a l'ordinador local. Si voleu utilitzar el vostre propi fitxer d'imatge i ompliu el vostre nom, podeu fer-ho: simplement assegureu-vos que la imatge sigui quadrada.</li>
+ <li>Agafa el <a href="https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/style-resources.txt">fitxer de text de recursos CSS</a> - aquest conté un conjunt de selectors i regles que necesitaràs estudiar i combinar per respondre part d'aquesta avaluació.</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: D'altra banda, 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/introduction-to-css/fundamental-css-comprehension/chris.jpg">aquest URL</a> per indicar a l'element &lt;img&gt; el fitxer d'imatge. 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> al capdavant del document.</p>
+</div>
+
+<h2 id="Resum_del_projecte"><span id="result_box" lang="ca"><span>Resum del projecte</span></span></h2>
+
+<p>Se us ha proporcionat un mica d'HTML sense processar i una imatge, i heu d'escriure el CSS necessari per d'introduir una mica d'estil bonic en una targeta de negocis en línia, que potser es pot duplicar com a targeta de jugador o perfil de xarxes socials. <span id="result_box" lang="ca"><span>Les següents seccions descriuen el que heu de fer.</span></span></p>
+
+<p><span id="result_box" lang="ca"><span>Configuració bàsica:</span></span></p>
+
+<ul>
+ <li>En primer lloc, creeu un nou fitxer al mateix directori que el vostre fitxer HTML i d'imatge. Nomeneu-ho alguna cosa realment imaginativa com <code>style.css</code>.</li>
+ <li>Enllaceu el vostre CSS al vostre fitxer HTML a través d'un element <code>&lt;link&gt;</code>.</li>
+ <li>Els dos primers conjunts de regles del fitxer de recursos CSS són vostres, GRATIS! Després d'haver acabat d'alegrar-se amb la vostra bona fortuna, copieu-los i enganxeu-los a la part superior del vostre nou fitxer CSS. Utilitzeu-les com a prova per assegurar-vos que el vostre CSS s'apliqui correctament al vostre HTML.</li>
+ <li>A sobre de les dues regles, afegiu un comentari CSS amb algun text dins d'ell per indicar que es tracta d'un conjunt d'estils generals per a la pàgina general. Faríeu "Estils de pàgina general". També afegiu tres comentaris més a la part inferior del fitxer CSS per indicar els estils específics de la configuració del contenidor de la targeta, els estils específics del encapçalament i el peu de pàgina, i els estils específics per el contingut principal de la targeta  de visita. A partir d'ara, els estils posteriors afegits al full d'estils s'han d'organitzar en un lloc adequat.</li>
+</ul>
+
+<p>Tingueu cura dels selectors i els conjunts de regles proporcionats:</p>
+
+<ul>
+ <li>A continuació, ens agradaria que consultéssiu els quatre selectors i calculéssiu l'especificitat de cadascun d'ells. Escriviu-les en algun lloc on es pugui trobar més endavant, com ara un comentari a la part superior del vostre CSS.</li>
+ <li>Ara és el moment de posar el selector adequat al conjunt de regles correctes! Teniu quatre parells de selector i un conjunt de regles perquè coincideixin amb els vostres recursos CSS. Feu això ara i afegiu-los el vostre fitxer CSS. Necessitareu:
+  <ul>
+   <li>Doneu al contenidor principal de la targeta una amplada/alçada fixa, un color de fons sòlid, una vora i un radi de vora (cantonades arrodonides), entre d'altres.</li>
+   <li>Doneu a la capçalera un degradat de fons que va des de més fosc a més clar, a més cantonades arrodonides que encaixen amb les cantonades arrodonides establertes al contenidor principal de la targeta.</li>
+   <li>Doneu al peu de pàgina un degradat de fons que va des de més clar a més fosc, a més de cantonades arrodonides que encaixen amb les cantonades arrodonides establertes al contenidor principal de la targeta.</li>
+   <li>Floteu la imatge a la dreta per tal que s'adhereixi al costat dret dels continguts principals de la targeta de visita i li proporcioneu una alçada màxima (max-height) del 100% (un truc intel·ligent que assegura que creixerà/disminuirà per mantenir la mateixa alçada que el seu contenidor principal, independentment de l'alçada que es faci).</li>
+  </ul>
+ </li>
+ <li><span id="result_box" lang="ca"><span>Aneu amb compte!</span> <span>Hi ha dos errors en els conjunts de regles proporcionats.</span> <span>Usant qualsevol tècnica que coneixeu, seguiu-los i solucioneu-los abans de continuar</span></span>.</li>
+</ul>
+
+<p>Nou conjunt de regles que necessiteu escriure :</p>
+
+<ul>
+ <li>Escriviu un conjunt de regles que apunti tant a l'encapçalat de la targeta com al peu de la targeta, donant-los una alçada total de 50 px, que inclou una alçada de contingut de 30px i un farcit de 10px en tots els costats. Però expressat en <code>em</code>s.</li>
+ <li>El marge predeterminat aplicat als elements <code>&lt;h2&gt;</code> i <code>&lt;p&gt;</code> per el navegador interfereix amb el nostre disseny, així que escriviu una regla que apunti a tots aquests elements i estableixi el seu marge a 0.</li>
+ <li>Per evitar que la imatge es vessi fos del contingut principal de la targeta de visita (l'element <code>&lt;article&gt;</code>), hem de donar-li una alçada específica. Establiu l'alçada de <code>&lt;article&gt;</code> a 120px, expressada en <code>em</code>s. A més, doneu-li un color de fons negre semitransparent, resultant una ombra lleugerament més fosca, que permet que el color vermell de fons resplendeixi molt més.</li>
+ <li>Escriviu un conjunt de regles que doni a <code>&lt;h2&gt;</code> una mida efectiva de font de 20px (però expressat en <code>em</code>s) i una alçada de línia adequada per col·locar-la al centre de la caixa de contingut del encapçalament. Recordeu que anteriorment, l'alçada de contingut de la caixa hauria de ser de 30px - això us proporcionarà tots els números que necessiteu per calcular l'alçada de la línia.</li>
+ <li>Escriviu un conjunt de regles que doni a <code>&lt;p&gt;</code> dins del peu de pàgina una mida de font efectiva de 15px (però expressat en <code>em</code>s) i una alçada de línia adequada per col·locar-la al centre de la caixa de contingut del peu de pàgina. Recordeu que anteriorment, l'alçada de la caixa de contingut hauria de ser de 30px - això us proporcionarà tots els números que necessiteu per calcular l'alçada de la línia..</li>
+ <li>Com a últim toc, doneu el paràgraf dins de <code>&lt;article&gt;</code> un valor de farcit adequat de manera que la seva vora esquerra s'alineï amb el paràgraf <code>&lt;h2&gt;</code> i el peu de pàgina, i establiu el seu color per que sigui prou clar per facilitar la seva lectura.</li>
+</ul>
+
+<p>Altres coses a pensar:</p>
+
+<ul>
+ <li>Obtindreu bonificacions si escriviu el vostre CSS amb la màxima llegibilitat, amb una declaració independent en cada línia.</li>
+ <li>Haureu d'incloure <code>.card</code> al principi de la cadena del selector a totes les vostres regles, de manera que aquestes regles no interfereixin amb l'estil de qualsevol altre element si la targeta de visita es col·loqués en una pàgina amb una càrrega d'un altre contingut</li>
+</ul>
+
+<h2 id="Consells_i_suggeriments">Consells i suggeriments</h2>
+
+<ul>
+ <li>No cal que editeu l'HTML de cap manera, excepte per aplicar el CSS a l'HTML.</li>
+ <li>Per tractar d'esbrinar el valor <code>em</code>, que necessiteu, per representar una determinada longitud de píxels, penseu en la mida de font base que té l'element arrel (<code>&lt;html&gt;</code>) i el que necessita ser multiplicat per obtenir el valor desitjat. Això us donarà el seu valor <code>em</code>, almenys en un cas senzill com aquest.</li>
+</ul>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p><span id="result_box" lang="ca"><span>La següent captura de pantalla mostra un exemple del que hauria de tenir el disseny acabat:</span></span></p>
+
+<p><img alt="A view of the finished business card, show a reader header and footer, and a darker center panel containing the main details and image." src="https://mdn.mozillademos.org/files/12616/business-card.png" style="display: block; margin: 0 auto;"></p>
+
+<p> </p>
+
+<h2 id="Avaluació"><span id="result_box" lang="ca"><span>Avaluació</span></span></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 en el <a href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">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/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}</p>
diff --git a/files/ca/learn/css/building_blocks/desbordament_de_contingut/index.html b/files/ca/learn/css/building_blocks/overflowing_content/index.html
index 2ee0dc6129..2ee0dc6129 100644
--- a/files/ca/learn/css/building_blocks/desbordament_de_contingut/index.html
+++ b/files/ca/learn/css/building_blocks/overflowing_content/index.html
diff --git a/files/ca/learn/css/building_blocks/selectors_css/selectors_atribut/index.html b/files/ca/learn/css/building_blocks/selectors/attribute_selectors/index.html
index 6ab61828f8..6ab61828f8 100644
--- a/files/ca/learn/css/building_blocks/selectors_css/selectors_atribut/index.html
+++ b/files/ca/learn/css/building_blocks/selectors/attribute_selectors/index.html
diff --git a/files/ca/learn/css/building_blocks/selectors_css/combinadors/index.html b/files/ca/learn/css/building_blocks/selectors/combinators/index.html
index 175379f986..175379f986 100644
--- a/files/ca/learn/css/building_blocks/selectors_css/combinadors/index.html
+++ b/files/ca/learn/css/building_blocks/selectors/combinators/index.html
diff --git a/files/ca/learn/css/building_blocks/selectors_css/index.html b/files/ca/learn/css/building_blocks/selectors/index.html
index 4bd7b005de..4bd7b005de 100644
--- a/files/ca/learn/css/building_blocks/selectors_css/index.html
+++ b/files/ca/learn/css/building_blocks/selectors/index.html
diff --git a/files/ca/learn/css/building_blocks/selectors_css/pseudo-classes_and_pseudo-elements/index.html b/files/ca/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html
index b28cb4873a..b28cb4873a 100644
--- a/files/ca/learn/css/building_blocks/selectors_css/pseudo-classes_and_pseudo-elements/index.html
+++ b/files/ca/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html
diff --git a/files/ca/learn/css/building_blocks/selectors_css/selectors_de_tipus_classe_i_id/index.html b/files/ca/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html
index 2cdbdc244a..2cdbdc244a 100644
--- a/files/ca/learn/css/building_blocks/selectors_css/selectors_de_tipus_classe_i_id/index.html
+++ b/files/ca/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html
diff --git a/files/ca/learn/css/building_blocks/dimensionar_elements_en_css/index.html b/files/ca/learn/css/building_blocks/sizing_items_in_css/index.html
index 5ff34b8d93..5ff34b8d93 100644
--- a/files/ca/learn/css/building_blocks/dimensionar_elements_en_css/index.html
+++ b/files/ca/learn/css/building_blocks/sizing_items_in_css/index.html
diff --git a/files/ca/learn/css/building_blocks/valors_i_unitats_css/index.html b/files/ca/learn/css/building_blocks/values_and_units/index.html
index b754bd27ac..b754bd27ac 100644
--- a/files/ca/learn/css/building_blocks/valors_i_unitats_css/index.html
+++ b/files/ca/learn/css/building_blocks/values_and_units/index.html