Skip to content

Commit c67374c

Browse files
josemoracardjosemoracard
committed
fixed 01-inline-styles, added tests, fixed numbers and casing of all exercises
1 parent 2acf1a2 commit c67374c

File tree

132 files changed

+288
-233
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

132 files changed

+288
-233
lines changed

‎.learn/resets/01-inline-styles/index.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>01 Inline Styles</title>
5+
</head>
6+
7+
<body>
8+
<table>
9+
<tr>
10+
<td>Hello</td>
11+
</tr>
12+
<tr>
13+
<td>My brother</td>
14+
</tr>
15+
</table>
16+
</body>
17+
</html>

‎.learn/resets/02-style-tag/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<!-- Your code here -->

exercises/00-Welcome/README.es.md renamed to exercises/00-welcome/README.es.md

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,8 @@ Como te habrás dado cuenta, HTML solo te permite crear sitios web básicos. Nad
2727

2828
Muchas gracias a estas personas maravillosas ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):
2929

30-
1. [Alejandro Sanchez (alesanchezr)](https://github.com/alesanchezr), contribución: (programador) :computer: (idea) 🤔, (run-tests) :warning:, (pull-request-review) :eyes: (run-tutorial) :white_check_mark: (documentation) :book:
31-
1. [Paolo Lucano (plucodev)](https://github.com/plucodev), contribución: (programador), (run-tests) :warning:
30+
1. [Alejandro Sanchez (alesanchezr)](https://github.com/alesanchezr), contribución: (programador) 💻, (idea) 🤔, (run-tests) ⚠️, (pull-request-review) 👀, (run-tutorial) ✅, (documentación) 📖
31+
2. [Paolo Lucano (plucodev)](https://github.com/plucodev), contribución: (programador) 💻, (run-tests) ⚠️
32+
3. [Charly Chacon (charlytoc)](https://github.com/charlytoc), contribución: (tutoriales, correcciones), 🤖
3233

33-
Este proyecto sigue las especificaciones
34-
[all-contributors](https://github.com/kentcdodds/all-contributors)
35-
¡Todas las contribuciones son bienvenidas!
34+
Este proyecto sigue las especificaciones [all-contributors](https://github.com/kentcdodds/all-contributors) ¡Todas las contribuciones son bienvenidas!

exercises/00-Welcome/README.md renamed to exercises/00-welcome/README.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@ intro: "https://www.youtube.com/watch?v=AuXnQHKhjxw"
66

77
My name is Alejandro Sanchez [@alesanchezr](https://twitter.com/alesanchezr). I'm really excited to have you here !! 🎉 😂
88

9-
Learning to code is hard, you will probably need coaching! DM me on twitter if you have any questions.
9+
Learning to code is hard; you will probably need coaching! DM me on Twitter if you have any questions.
1010

11-
During this course you will be learning the following concepts:
11+
During this course, you will be learning the following concepts:
1212

1313
1. How to apply CSS to your website in 3 different ways: Inline, by grouping them together inside a `<style>` tag, or using an external stylesheet `<link>`,
1414

@@ -20,14 +20,14 @@ During this course you will be learning the following concepts:
2020

2121
5. Learn the most popular CSS Tricks.
2222

23-
As you may have noticed, HTML allows you to create only basic websites. Nobody wants to see a white website with some horrible text on it. So it's time to learn what CSS is all about! Learn CSS to make your website beautiful. Let's make it shine!
23+
As you may have noticed, HTML allows you to create only basic websites. Nobody wants to see a white website with some horrible text on it. So, it's time to learn what CSS is all about! Learn CSS to make your website beautiful. Let's make it shine!
2424

2525
## Contributors
2626

2727
Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):
2828

29-
1. [Alejandro Sanchez (alesanchezr)](https://github.com/alesanchezr), contribution: (coder) :computer: (idea) 🤔, (run-tests) :warning:, (pull-request-review) :eyes: (run-tutorial) :white_check_mark: (documentation) :book:
30-
2. [Paolo Lucano (plucodev)](https://github.com/plucodev), contribution: (coder), (run-tests) :warning:
29+
1. [Alejandro Sanchez (alesanchezr)](https://github.com/alesanchezr), contribution: (coder) 💻, (idea) 🤔, (run-tests) ⚠️, (pull-request-review) 👀, (run-tutorial) ✅, (documentation) 📖
30+
2. [Paolo Lucano (plucodev)](https://github.com/plucodev), contribution: (coder) 💻, (run-tests) ⚠️
3131
3. [Charly Chacon (charlytoc)](https://github.com/charlytoc), contribution: (tutorials, corrections), 🤖
3232

3333
This project follows the

‎exercises/00.1-Inline-Styles/README.es.md‎

Lines changed: 0 additions & 34 deletions
This file was deleted.

‎exercises/00.1-Inline-Styles/index.html‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎exercises/00.1-Inline-Styles/solution.hide.html‎

Lines changed: 0 additions & 10 deletions
This file was deleted.

‎exercises/01-Style-tag/index.html‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎exercises/01-inline-styles/README.es.md‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
---
2+
tutorial: "https://www.youtube.com/watch?v=c5JeXOnI-Sg"
3+
---
4+
5+
# `01` Inline styles
6+
7+
El CSS se trata de agregar estilos a nuestros elementos HTML.
8+
9+
La forma más **básica** de aplicar un estilo a un elemento HTML es usar el atributo `style` dentro de la etiqueta HTML. Esto se llama "estilos en línea" (*inline style*) y funciona así:
10+
11+
```html
12+
<a href="google.com" style="color: red; font-size: 14px;">Ir a Google</a>
13+
```
14+
15+
Esto establecerá el `color` del texto del enlace anterior a rojo y el tamaño de fuente (`font-size`) en 14 píxeles.
16+
17+
En el diseño web contemporáneo, esta forma de aplicar estilos se desaconseja porque no es eficiente: tienes que aplicar estilos etiqueta por etiqueta. Pero te encontrarás con ejemplos de esto y necesitarás estar familiarizado con ello.
18+
19+
Para aplicar estilos, siempre tienes que seguir estos pasos:
20+
21+
1. Leer el HTML y seleccionar qué elemento deseas decorar para aplicarle CSS.
22+
2. Aplicar el estilo con el atributo `style` como se muestra arriba.
23+
24+
## 📝 Instrucciones:
25+
26+
1. Establece un estilo en línea para cambiar el color de fondo (`background-color`) de la tabla a verde.
27+
28+
## 💡 Pista:
29+
30+
- Cómo usar `background-color`: https://www.w3schools.com/cssref/pr_background-color.php

exercises/00.1-Inline-Styles/README.md renamed to exercises/01-inline-styles/README.md

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
---
22
tutorial: "https://www.youtube.com/watch?v=h9WPp8gPMS8"
33
---
4-
# `00.1` Inline styles
4+
# `01` Inline styles
55

66
CSS is about adding styles to our HTML elements.
77

88
The most **basic** way to apply a style to an HTML element is to use the html `style` attribute within the tag. This is called "inline styles" and works like this:
99

1010
```HTML
11-
<a href="google.com" style="color: red; font-size: 14px;">Go to google</a>
11+
<a href="google.com" style="color: red; font-size: 14px;">Go to Google</a>
1212
```
1313

1414
This will set the text color of the link above to red, and the font size to 14 pixels.
@@ -22,12 +22,10 @@ To apply styles you always have to follow thеse steps:
2222

2323
That is it! The rest is just semantics! 😁
2424

25-
2625
## 📝 Instructions:
2726

28-
1. Set an inline style to change the background color of the table to green (green). For this exercise, DO NOT use the styles.css :(
27+
1. Set an inline style to change the `background-color` of the table to green.
2928

29+
## 💡 Hint:
3030

31-
### 💡 Hint:
32-
- How to use background-color: https://www.w3schools.com/cssref/pr_background-color.php
33-
- A convenient way to import the basic html structure of your web page is to just type an exclamation mark `!` and select the emmet option that will pop up in VSCode.
31+
- How to use `background-color`: https://www.w3schools.com/cssref/pr_background-color.php

0 commit comments

Comments
 (0)