Skip to content

Commit 35f4128

Browse files
alesanchezralesanchezr
authored
Merge pull request #60 from josemoracard/jose1-00-Welcome
ejercicios revisados
2 parents 3223abf + f4cb157 commit 35f4128

File tree

39 files changed

+447
-249
lines changed

39 files changed

+447
-249
lines changed

‎README.md‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,21 @@
55
<a href="https://twitter.com/alesanchezr"><img src="https://img.shields.io/twitter/follow/alesanchezr?style=social&logo=twitter" alt="follow on Twitter"></a>
66
<a href="https://gitpod.io#https://github.com/4GeeksAcademy/bootstrap-exercises.git"><img src="https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod" /></a>
77

8+
Hi! I'm Alejandro Sanchez @alesanchezr, really excited to have you here! 🎉 😂 Learning to code is hard, you need coaching! DM me on Twitter if you have any question.
89

9-
Hi! I'm Alejandro Sanchez @alesanchezr, really excited to have you here! 🎉 😂 Learning to code is hard, you need coaching! DM me on Twitter if you have any question. You'll be learning the following concepts:
1010
<!-- endhide -->
1111

12+
## You'll be learning the following concepts:
13+
1214
1. How to apply Bootstrap to your website.
1315

14-
2. Selecting HTML Elements from your website to apply the Bootstrap styles to.
16+
2. Selecting HTML Elements from your website to apply the Bootstrap styles.
1517

1618
3. Apply Bootstrap classes to those elements.
1719

18-
4. Use the most popular Bootstrap Rules.
20+
4. Use the most popular Bootstrap rules.
1921

20-
5. Learn the most popular Bootstrap Tricks.
22+
5. Learn the most popular Bootstrap tricks.
2123

2224
<!-- hide -->
2325
#### Before we start... other related tutorials

‎exercises/00-Welcome/README.es.md‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,26 @@
11
# Bienvenido a los Ejercicios de Bootstrap!!
22

3-
Mi nombre es Alejandro Sanchez @alesanchezr. Estoy realmente emocionado de tenerte aquí !! 🎉 😂 Aprender a programar es dificil, necesitas apoyo! Si tienes una pregunta enviame un directo por twitter o slack.
3+
Mi nombre es [Alejandro Sanchez](https://twitter.com/alesanchezr). Estoy realmente emocionado de tenerte aquí!! 🎉 😂 Aprender a programar es difícil, necesitas apoyo! Si tienes una pregunta envíame un mensaje directo por Twitter o Slack.
44

55
Durante este curso vas a aprender los siguientes conceptos:
66

7-
1. Como aplicar Bootstrap a tu sitio web (website).
7+
1. Como aplicar Bootstrap a tu sitio web.
88

9-
2. Seleccionar Elementos de HTML de tu website para aplicarle los estilos de Bootstrap.
9+
2. Seleccionar elementos HTML de tu website para aplicarle los estilos de Bootstrap.
1010

1111
3. Aplicar a esos elementos las clases de Bootstrap.
1212

13-
4. Usa las reglas más populares de Bootstrap.
13+
4. Uso de las reglas de Bootstrap más populares.
1414

1515
5. Aprender los trucos más populares de Bootstrap.
1616

17-
Como habrás notado, HTML solo te permite crear website básicos. Nadie quiere ver un website blanco con algún horrible texto en él. Entonces es tiempo de aprender sobre que trata Bootstrap! Aprender Bootstrap para hacer bonito tu website. Vamos a hacerlo brillar!
17+
Como habrás notado, HTML solo te permite crear websites básicos. Nadie quiere ver un website blanco con un montón de texto en él. ¡Entonces es tiempo de aprender sobre que trata Bootstrap! Aprender Bootstrap para hacer bonito tu website. ¡Vamos a hacerlo brillar!
1818

1919
## Colaboradores
2020

2121
Gracias a estas maravillosas personas ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):
2222

23-
1. [Alejandro Sanchez (alesanchezr)](https://github.com/alesanchezr), contribution: (coder) :computer: (idea) 🤔, (build-tests) :warning:, (pull-request-review) :eyes: (build-tutorial) :white_check_mark: (documentation) :book:
24-
1. [Paolo Lucano (plucodev)](https://github.com/plucodev), contribution: (coder), (build-tests) :warning:
23+
1. [Alejandro Sanchez (alesanchezr)](https://github.com/alesanchezr), contribution: (coder) 💻 (idea) 🤔, (build-tests) ⚠️, (pull-request-review) 👀 (build-tutorial) ✅ (documentation) 📖
24+
2. [Paolo Lucano (plucodev)](https://github.com/plucodev), contribution: (coder), (build-tests) ⚠️
2525

26-
Este proyecto sigue a
27-
[all-contributors](https://github.com/kentcdodds/all-contributors)
28-
specification. Colaboraciones de cualquier tipo son bienvenidas!
26+
Este proyecto sigue la [all-contributors](https://github.com/kentcdodds/all-contributors) specification. ¡Colaboraciones de cualquier tipo son bienvenidas!

‎exercises/00-Welcome/README.md‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Welcome to Bootstrap Exercises!!
22

3-
My name is [Alejandro Sanchez](https://twitter.com/alesanchezr). I'm really excited to have you here !! 🎉 😂 Learning to code is hard, you problably will need coaching! DM me on twitter if you have any question.
3+
My name is [Alejandro Sanchez](https://twitter.com/alesanchezr). I'm really excited to have you here!! 🎉 😂 Learning to code is hard, you probably will need coaching! DM me on Twitter if you have any question.
44

55
During this course you will be learning the following concepts:
66

@@ -10,19 +10,17 @@ During this course you will be learning the following concepts:
1010

1111
3. Apply Bootstrap classes to those elements.
1212

13-
4. Use the most popular Bootstrap Rules.
13+
4. Use the most popular Bootstrap rules.
1414

15-
5. Learn the most popular Bootstrap Tricks.
15+
5. Learn the most popular Bootstrap tricks.
1616

1717
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 Bootstrap is all about! Learn Bootstrap to make your website beautiful. Let's make it shine!
1818

1919
## Contributors
2020

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

23-
1. [Alejandro Sanchez (alesanchezr)](https://github.com/alesanchezr), contribution: (coder) :computer: (idea) 🤔, (build-tests) :warning:, (pull-request-review) :eyes: (build-tutorial) :white_check_mark: (documentation) :book:
24-
1. [Paolo Lucano (plucodev)](https://github.com/plucodev), contribution: (coder), (build-tests) :warning:
23+
1. [Alejandro Sanchez (alesanchezr)](https://github.com/alesanchezr), contribution: (coder) 💻 (idea) 🤔, (build-tests) ⚠️, (pull-request-review) 👀 (build-tutorial) ✅ (documentation) 📖
24+
2. [Paolo Lucano (plucodev)](https://github.com/plucodev), contribution: (coder), (build-tests) ⚠️
2525

26-
This project follows the
27-
[all-contributors](https://github.com/kentcdodds/all-contributors)
28-
specification. Contributions of any kind are welcome!
26+
This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind are welcome!

‎exercises/01-Add-Bootstrap-To-Your-Website/README.es.md‎

Lines changed: 14 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,35 @@
1-
# `01` Agrega Bootstrap a tu sitio web
1+
# `01` Add Bootstrap To Your Website
22

3-
Hay dos formas de agregar Bootstrap a tu sitio web: **Remoto** o **Local** (como cualquier otro archivo CSS), la única diferencia será la ruta URL que especifiques en la etiqueta <link> (para los archivos .CSS de Bootstrap) o la etiqueta <script> (para los archivos .JS de Bootstrap).
3+
Hay dos formas de agregar Bootstrap a tu sitio web: **Remoto** o **Local** (como cualquier otro archivo CSS), la única diferencia será la ruta URL que especifiques en la etiqueta `<link>` (para los archivos .CSS de Bootstrap) o la etiqueta `<script>` (para los archivos .JS de Bootstrap).
44

55
+ Así es como se realiza una importación **remota** de Bootstrap CSS:
66

77
```html
88
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
99
```
1010

11-
### :mag_right: Importante:
11+
### 🔎 Importante:
1212

13-
No te preocupes por las propiedades como `integrity` y `crossdomain`, son necesarias por razones de seguridad.
13+
No te preocupes por las propiedades como `integrity` y `crossorigin`, son necesarias por razones de seguridad.
1414

15-
Así es como agrega bootstrap desde un archivo **local** (que está en su lugar de trabajo):
15+
Así es como se agrega bootstrap desde un archivo **local** (que está en tu lugar de trabajo):
1616

1717
```html
18-
<link href="camino/hacia/tu/archivo" rel="stylesheet">
18+
<link href="ruta/hacia/tu/archivo" rel="stylesheet">
1919
```
2020

21-
### :mag_right: Importante
21+
### 🔎 Importante:
2222

2323
Es buena idea asegurarse de que tu archivo exista en esa URL, puedes probarlo abriendo una nueva pestaña del navegador y pegando la ruta en la URL del navegador (verás el contenido del archivo en tu pantalla).
2424

25+
Bootstrap se compone de 2 archivos: la hoja de estilo CSS y el código fuente JavaScript.
2526

27+
La hoja de estilos CSS de Bootstrap se pega en la etiqueta `<head>` antes que cualquier otra hoja de estilos CSS.
2628

27-
Bootstrap se compone de 2 archivos: la hoja de estilo CSS y el código fuente Javascript.
29+
Las etiquetas `<link>` del código fuente de Javascript se pegan justo antes de la etiqueta de cierre `</body>`.
2830

29-
La hoja de estilos CSS de Bootstrap se pega en la etiqueta <head> antes que cualquier otra hoja de estilos CSS.
3031

31-
Las etiquetas <link> del código fuente de Javascript se pegan justo antes de la etiqueta de cierre </body>.
32-
33-
34-
### Para más información:
35-
36-
https://getbootstrap.com/docs/5.0/getting-started/introduction/
32+
> Para más información: https://getbootstrap.com/docs/5.0/getting-started/introduction/
3733
3834

3935
## 📝 Instrucciones:
@@ -46,14 +42,14 @@ https://getbootstrap.com/docs/5.0/getting-started/introduction/
4642
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
4743
```
4844

49-
+ Código fuente Javascript:
45+
+ Código fuente JavaScript:
5046

5147
```html
5248
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
5349
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
5450
```
5551

56-
### :bulb: Pista:
52+
## 💡 Pista:
5753

58-
El anchor (enlace) debe ser un botón rojo si todo salió bien.
54+
+ El botón debe ser rojo si todo salió bien.
5955

‎exercises/01-Add-Bootstrap-To-Your-Website/README.md‎

Lines changed: 12 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,40 @@
11
# `01` Add Bootstrap To Your Website
22

33
There are two ways to add Bootstrap into your website:
4-
**Remote** or **Local** (just like any other CSS file), the only difference will be the URL path you specify on the <link> tag (for Bootstrap's .CSS files) or <script> tag (for Bootstrap's .JS files).
4+
**Remote** or **Local** (just like any other CSS file), the only difference will be the URL path you specify on the `<link>` tag (for Bootstrap's .CSS files) or `<script>` tag (for Bootstrap's .JS files).
55

6-
+ This is how you do a **Remote** CSS Bootstrap import:
6+
+ This is how you do a **remote** CSS Bootstrap import:
77

88
```html
99
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
1010
```
1111

12-
### :mag_right: Important:
12+
### 🔎 Important:
1313

14-
Don't worry about the properties like `integrity` or `crossdomain`, they are required for security purposes.
14+
Don't worry about the properties like `integrity` or `crossorigin`, they are required for security purposes.
1515

1616
+ This is how you add bootstrap from a **local** file (that is in your workplace):
1717

1818
```html
1919
<link href="path/to/your/file" rel="stylesheet">
2020
```
2121

22-
### :mag_right: Important:
22+
### 🔎 Important:
2323

2424
It's a good idea to make sure that your file exists on that URL, you can test it by opening a new browser tab and pasting the path on the browser's URL (you will see the content of the file on your screen).
2525

26+
Bootstrap is comprised of 2 files: The CSS Stylesheet and the JavaScript Source Code.
2627

28+
The Bootstrap CSS Stylesheet `<link>` is pasted in the `<head>` tag before any other CSS Stylesheets.
2729

28-
Bootstrap is comprised of 2 files: The CSS Stylesheet and the Javascript Source Code.
30+
The JavaScript Source Code `<script>` tags are pasted right before the closing `</body>` tag.
2931

30-
The Bootstrap CSS Stylesheet <link> is pasted in the <head> tag before any other CSS Stylesheets.
3132

32-
The Javascript Source Code <link> tags are pasted right before the closing </body> tag.
33+
> For more information: https://getbootstrap.com/docs/5.0/getting-started/introduction/
3334
3435

35-
### For more information:
36-
37-
https://getbootstrap.com/docs/5.0/getting-started/introduction/
38-
3936
## 📝 Instructions:
4037

41-
4238
1. Please add these links into your file to import Bootstrap successfully:
4339

4440
+ Bootstrap CSS StyleSheet:
@@ -48,13 +44,13 @@ https://getbootstrap.com/docs/5.0/getting-started/introduction/
4844
```
4945

5046

51-
+ Javascript Source Code:
47+
+ JavaScript Source Code:
5248

5349
```html
5450
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
5551
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
5652
```
5753

58-
### :bulb: Hint:
54+
## 💡 Hint:
5955

60-
The anchor should be a red button if everything went well.
56+
+ The button should be red if everything went well.

‎exercises/01-Add-Bootstrap-To-Your-Website/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@
33
<head>
44
<meta charset="utf-8" />
55
<meta name="viewport" content="width=device-width" />
6-
<!-- Your Bootstrap Link should be always before the CSS link -->
6+
<!-- Your Bootstrap Link should always be before the CSS link -->
77

88
<title>01 Add Bootstrap To Your Website</title>
99
</head>
1010
<body>
1111
<button type="button" class="btn btn-danger">This should be a red button</button>
12-
<!-- Your Bootstrap Scripts should be always before the body closes link -->
12+
<!-- Your Bootstrap Scripts should always be before the </body> closing tag -->
1313

1414
</body>
1515
</html>

‎exercises/01-Add-Bootstrap-To-Your-Website/solution.hide.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width" />
6+
<!-- Your Bootstrap Link should always be before the CSS link -->
7+
<link
8+
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
9+
rel="stylesheet"
10+
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
11+
crossorigin="anonymous"
12+
/>
13+
<title>01 Add Bootstrap To Your Website</title>
14+
</head>
15+
<body>
16+
<button type="button" class="btn btn-danger">This should be a red button</button>
17+
<!-- Your Bootstrap Scripts should always be before the </body> closing tag -->
18+
<script
19+
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
20+
integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
21+
crossorigin="anonymous"
22+
></script>
23+
<script
24+
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
25+
integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
26+
crossorigin="anonymous"
27+
></script>
28+
</body>
29+
</html>

‎exercises/01-Add-Bootstrap-To-Your-Website/tests.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ describe("All the tests should pass", function () {
1313
afterEach(() => {
1414
jest.resetModules();
1515
});
16-
it("You should not change or delete the existing elements in the head tag", function () {
16+
it("You should not change or delete the existing elements in the <head> tag", function () {
1717
let head = document.querySelector('head')
1818
expect(head).toBeTruthy();
1919

@@ -33,16 +33,16 @@ describe('1. The html code should contain the link tag and 2 Boostrap script tag
3333
document.documentElement.innerHTML=html.toString();
3434
});
3535
afterEach(() => {jest.resetModules();});
36-
it('The head tag should contain the link tag for Bootstrap', function () {
36+
it('The <head> tag should contain the <link> tag for Bootstrap', function () {
3737
let bodyContent=document.querySelector("head").innerHTML
3838
// we can read from the source code
3939
// console.log(html.toString());
4040
expect(bodyContent.toString().indexOf(`<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">`)>-1).toBeTruthy();
4141
});
42-
it('The body should contain 2 script tags before the body closing tag', function () {
42+
it('The body should contain 2 <script> tags before the </body> closing tag', function () {
4343
let scripts = document.querySelectorAll('script')
4444

4545
expect(scripts[0].src).toBe("https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js")
4646
expect(scripts[1].src).toBe("https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js")
4747
});
48-
});
48+
});

‎exercises/02-Bootstrap-Skeleton/README.es.md‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# `02` Esqueleto Bootstrap
1+
# `02` Bootstrap Skeleton
22

33
Si quieres importar Bootstrap a tu sitio web, puedes usar esta URL pública que está disponible para todo el mundo:
44

@@ -21,21 +21,20 @@ Al usar Bootstrap, debes incluir todo su contenido dentro de las siguientes clas
2121

2222
## 📝 Instrucciones:
2323

24+
1. Vincula la hoja de estilos CSS de Bootstrap con el documento usando la etiqueta `<link>` que encuentras arriba.
2425

25-
1. Vincula el hoja de estilos CSS de Bootstrap con el documento usando la etiqueta `link` que encuentras arriba.
26+
2. Introduce el contenido del sitio web dentro de un `<div>` con clases de `container` y `bg-secondary`.
2627

27-
2. Introduce el contenido del sitio web dentro de un `div` con clases de `container` y `bg-secondary`.
28+
3. **Compila** y da una **vista previa** al ejercicio y compara las diferencias.
2829

29-
3. **Compila** y luego **Vista previa** del ejercicio y compara las diferencias.
30+
4. Ahora cambia la clase del `<div>` que acabas de crear con las clases de `container-fluid` y `bg-secondary`.
3031

31-
4. Ahora cambia la clase del `div` que acabas de crear con las clases de `container-fluid` y `bg-secondary`.
32+
5. **Compila** y da una **vista previa** al ejercicio y compara las diferencias.
3233

33-
5. **Compila** y luego **Vista previa** del ejercicio y compara las diferencias.
3434

35+
## 🔎 Importante:
3536

36-
## :mag_right: Importante:
37-
38-
Para entender la diferencia entre ambas clases de `container`, debes hacer el contenedor `div` más pequeño y más grande. Hay `margin-left: auto` y `margin-right: auto` para centrar el contenedor; mientras que el contenido en la clase `container-fluid` se extiende a lo largo de todo el ancho de la página.
37+
Para entender la diferencia entre ambas clases de `container`, debes hacer el contenedor `<div>` más pequeño y más grande. Hay `margin-left: auto` y `margin-right: auto` para centrar el contenedor; mientras que el contenido en la clase `container-fluid` se extiende a lo largo de todo el ancho de la página.
3938

4039

4140

0 commit comments

Comments
 (0)