` que acabamos de añadir no tiene estilos; cambiemos eso.
4 |
5 | Para comenzar a darle vida a tu sitio web, debes empezar por añadir un archivo `styles.css`. Este contendrá todo el código de estilos de tu sitio web.
6 |
7 | ## 📝 Instrucciones
8 |
9 | 1. Crea un archivo `styles.css` en la raíz del proyecto y añade el siguiente contenido:
10 |
11 | ```css
12 | body{
13 | background: black;
14 | }
15 | ```
16 |
--------------------------------------------------------------------------------
/.learn/exercises/08-adding-styles/README.md:
--------------------------------------------------------------------------------
1 | ---
2 | tutorial: https://www.youtube.com/watch?v=EbkgFTqpRxc
3 | ---
4 |
5 | # `08` Adding styles
6 |
7 | If you `build` your website right now, you will see that it only says "Hello". That is because the `
` we just added is invisible; let's change that.
8 |
9 | To start bringing your website to life, we must begin by adding a `styles.css` file. This will contain all our website styling code.
10 |
11 | ## 📝 Instructions:
12 |
13 | 1. Create a `styles.css` file on the root of your project and add the following content to it:
14 |
15 | ```css
16 | body{
17 | background: black;
18 | }
19 | ```
--------------------------------------------------------------------------------
/.gitpod.yml:
--------------------------------------------------------------------------------
1 | image:
2 | file: .gitpod.Dockerfile
3 |
4 | # List the ports you want to expose and what to do when they are served. See https://www.gitpod.io/docs/config-ports/
5 | ports:
6 | - port: 3000
7 | onOpen: ignore
8 |
9 | vscode:
10 | extensions:
11 | - learn-pack.learnpack-vscode
12 |
13 | github:
14 | prebuilds:
15 | # enable for the master/default branch (defaults to true)
16 | master: true
17 | # enable for pull requests coming from this repo (defaults to true)
18 | pullRequests: false
19 | # add a "Review in Gitpod" button as a comment to pull requests (defaults to true)
20 | addComment: false
21 |
--------------------------------------------------------------------------------
/.learn/exercises/11.2-header-styles/test.js:
--------------------------------------------------------------------------------
1 | const fs = require("fs");
2 | const path = require("path");
3 | const { fromFile, fromHTML } = require("../../utils/dom");
4 | let dom = fromFile();
5 |
6 | test("In your CSS create a .postcard-header class that will apply styles to the .postcard-header
", function(){
7 | dom = dom.withStylesheet();
8 | dom.selector('.postcard-header');
9 | expect(dom).toBeTruthy();
10 | })
11 |
12 | test("The .postcard-header
must have a display:flex to allow its childs to display horizontally", function(){
13 | dom = dom.withStylesheet();
14 | dom.selector('.postcard-header').hasStyles({
15 | display: "flex",
16 | })
17 | })
18 |
--------------------------------------------------------------------------------
/.learn/exercises/08.1-red-borders/README.md:
--------------------------------------------------------------------------------
1 | # `08.1` Red Borders
2 |
3 | To be able to debug better the application, we strongly recommend to include certain styles inside your `styles.css`.
4 |
5 | ## 📝 Instructions:
6 |
7 | 1. Copy and paste into your `styles.css` file, the following code:
8 |
9 | ```css
10 | * {
11 | border: 1px dashed red;
12 | min-height: 10px;
13 | }
14 | ```
15 |
16 | ## 💡 Hint:
17 |
18 | + This code is going to add a red dashed border to every element in the website, making them easier to see and debug.
19 |
20 | 
21 |
22 | ## 🔎 Important:
23 |
24 | + This code will be removed once you finish your postcard.
25 |
--------------------------------------------------------------------------------
/.learn/exercises/08.1-red-borders/README.es.md:
--------------------------------------------------------------------------------
1 | # `08.1` Red Borders
2 |
3 | Para poder depurar mejor la aplicación, te recomendamos incluir ciertos estilos dentro de tu `styles.css`.
4 |
5 | ## 📝 Instrucciones:
6 |
7 | 1. Copia y pega dentro de tu archivo `styles.css`, el siguiente código.
8 |
9 | ```css
10 | * {
11 | border: 1px dashed red;
12 | min-height: 10px;
13 | }
14 | ```
15 |
16 | ## 💡 Pista:
17 |
18 | + Este código añadirá un borde rojo con una línea punteada a cada elemento del sitio web, así podrás visualizar y depurar todo más fácilmente.
19 |
20 | 
21 |
22 | ## 🔎 Importante:
23 |
24 | + Este código se eliminará luego de que termines tu postcard.
25 |
--------------------------------------------------------------------------------
/.learn/exercises/06-lets-start-building/test.js:
--------------------------------------------------------------------------------
1 | const fs = require("fs");
2 | const path = require("path");
3 | const { fromFile, fromHTML } = require("../../utils/dom");
4 | const dom = fromFile();
5 |
6 | test("Make sure you have your index.html", function(){
7 | const indexExists = fs.existsSync(`./index.html`);
8 | expect(indexExists).toBe(true);
9 | })
10 |
11 | test("The tag must exist and it must be properly formatted", function(){
12 | const found = dom.tagExists('html')
13 | expect(found).toBe(true);
14 | })
15 |
16 | test("Make sure there is a tag inside the <head> tag", function(){
17 | const found = dom.insideTags('head').insideTags('title')
18 | expect(found).not.toBe(null);
19 | })
--------------------------------------------------------------------------------
/.learn/exercises/11.1-header-content/solution.hide.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html>
2 | <html lang="en">
3 | <head>
4 | <meta charset="UTF-8" />
5 | <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 | <link rel="stylesheet" href="./styles.css" />
7 | <title>Document
8 |
9 |
10 |
11 |
21 |
22 |
12 | 
17 |
18 |
19 |
20 | My Postcard
13 |
17 |