Skip to content

Commit d858f82

Browse files
alesanchezralesanchezr
authored
Merge pull request 4GeeksAcademy#131 from learnpack/master
added new exercise and update first step to make it about inline styles
2 parents 6a7faa0 + 1916a2a commit d858f82

File tree

26 files changed

+208
-32
lines changed

26 files changed

+208
-32
lines changed

‎exercises/03-Inline-Styles/README.es.md renamed to ‎exercises/00.1-Inline-Styles/README.es.md

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
# `03` Inline Styles
22

3-
Los estilos `inline` (estilos en línea) son una muy mala idea a menos que no tengas otra opción (y esa es una situación muy poco común). Lamentablemente, tenemos que enseñarte cómo hacerlo porque existe la posibilidad de que necesites usarlos en algún momento.
3+
4+
CSS trata sobre agregar estilos (styles) y diseños a tus etiquetas y elementos HTML.
5+
6+
Como siempre en la vida, hay varias formas de aplicar estilos: Utilizar "inline styles" o "estilos en linea" es una manera inicialmente sencillas de hacerlo, pero no se recomienda porque termina siendo mas compleja mas adelante. Sin embargo, vamos a mostrarte algunos ejemplos porque es un conocimiento que debes manejar y todavia se utiliza en algunos casos como los correos electrónicos.
47

58
Para usar estilos inline, en lugar de declarar una etiqueta `<style>` en el `<head>` del documento, debes establecer el atributo `style` de cualquier elemento con el código CSS que necesitas aplicar a ese elemento específico.
69

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

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
---
2+
tutorial: "https://www.youtube.com/watch?v=rbtHLA813pU"
3+
---
4+
# `01` Hello World in CSS
5+
6+
CSS is about adding styles to our HTML elements.
7+
8+
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:
9+
10+
```HTML
11+
<a href="google.com" style="color: red; font-size: 14px;">Go to google</a>
12+
```
13+
14+
This will set the text color of the link above to red, and the font size to 14 pixels.
15+
16+
In contemporary web design this way of applying styles is **discouraged**, because it is not efficient - you have to apply styles tag by tag. But you will run into examples of it and need to be familiar with it.
17+
18+
To apply styles you always have to follow thеse steps:
19+
20+
1. Read the HTML and pick what element you want to decorate to apply CSS to it.
21+
2. Apply the style with the `style` attribute as above.
22+
23+
That is it! The rest is just semantics! 😁
24+
25+
26+
## 📝 Instructions
27+
28+
1. Within the `index.html` file, create the basic structure of an html page with the appropriate `<html>`, `<head>` and `<body>` tags.
29+
2. Inside of the body of the page, create an `<h1>` tag that reads "HELLO WORLD!!!".
30+
1. Set an inline style to change the text color of the tag to `color: orangered` and give it a solid red border of 1px.
31+
32+
33+
### 💡 Hint:
34+
35+
- 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.
36+
- Read how to apply borders here: https://www.w3schools.com/css/css_border_shorthand.asp
37+
- For this exercise, do NOT use `styles.css` file or `<style>` tag.

‎exercises/03-Inline-Styles/index.html renamed to ‎exercises/00.1-Inline-Styles/index.html

File renamed without changes.

‎exercises/03-Inline-Styles/solution.hide.html renamed to ‎exercises/00.1-Inline-Styles/solution.hide.html

File renamed without changes.

‎exercises/03-Inline-Styles/tests.js renamed to ‎exercises/00.1-Inline-Styles/tests.js

File renamed without changes.

‎exercises/01-Hello-World/README.es.md renamed to ‎exercises/01-Style-tag/README.es.md

File renamed without changes.

‎exercises/01-Hello-World/README.md renamed to ‎exercises/01-Style-tag/README.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@ tutorial: "https://www.youtube.com/watch?v=rbtHLA813pU"
55

66
CSS is about styles. To apply styles you always have to follow these steps:
77

8-
1. Read the HTML and pick what element you want to decorate or apply styles to.
8+
1. Read the HTML and pick what element (tag) you want to decorate or apply styles to.
99

10-
2. Programmatically select the element you want to style using CSS Selectors.
10+
2. Programmatically select the element you want to style using [CSS Selectors](https://4geeks.com/lesson/what-is-css-learn-css#wait-what-is-a-selector).
1111

12-
3. Write the styling that you want by using CSS rules.
12+
3. Write the styling that you want by using [CSS property rules](https://4geeks.com/lesson/what-is-css-learn-css#properties).
1313

1414
That is it! The rest is just semantics! 😁
1515

‎exercises/01-Hello-World/index.html renamed to ‎exercises/01-Style-tag/index.html

File renamed without changes.

‎exercises/01-Hello-World/solution.hide.html renamed to ‎exercises/01-Style-tag/solution.hide.html

File renamed without changes.

‎exercises/01-Hello-World/test.js renamed to ‎exercises/01-Style-tag/test.js

File renamed without changes.

‎exercises/01.1-The-Style-Tag/README.es.md renamed to ‎exercises/01.1-Add-a-style-tag/README.es.md

File renamed without changes.

‎exercises/01.1-The-Style-Tag/README.md renamed to ‎exercises/01.1-Add-a-style-tag/README.md

File renamed without changes.

‎exercises/01.1-The-Style-Tag/index.html renamed to ‎exercises/01.1-Add-a-style-tag/index.html

File renamed without changes.

‎exercises/01.1-The-Style-Tag/solution.hide.html renamed to ‎exercises/01.1-Add-a-style-tag/solution.hide.html

File renamed without changes.

‎exercises/01.1-The-Style-Tag/test.js renamed to ‎exercises/01.1-Add-a-style-tag/test.js

File renamed without changes.

‎exercises/01.2-Your-First-Style/README.es.md renamed to ‎exercises/01.2-RGBA-colors/README.es.md

File renamed without changes.

‎exercises/01.2-Your-First-Style/README.md renamed to ‎exercises/01.2-RGBA-colors/README.md

File renamed without changes.

‎exercises/01.2-Your-First-Style/index.html renamed to ‎exercises/01.2-RGBA-colors/index.html

File renamed without changes.

‎exercises/01.2-Your-First-Style/solution.hide.html renamed to ‎exercises/01.2-RGBA-colors/solution.hide.html

File renamed without changes.

‎exercises/01.2-Your-First-Style/tests.js renamed to ‎exercises/01.2-RGBA-colors/tests.js

File renamed without changes.

‎exercises/03-Inline-Styles/README.md

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

‎exercises/03-list-styling/README.es.md

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
# `03` Estilo de listas
2+
3+
En el desarrollo front end, a menudo tenemos que listar ítems y la forma de hacerlo es con las etiquetas `<ul>`, para listas desordenadas o con viñetas, y las etiquetas `<ol>` para listas ordenadas o numeradas.
4+
5+
Tenemos control mediante CSS sobre cómo se ven estas listas, qué viñetas o números usan, etc.
6+
7+
Por ejemplo:
8+
9+
```HTML
10+
ul {
11+
list-style-type: none;
12+
margin: 0;
13+
padding: 0;
14+
}
15+
```
16+
17+
Eliminará los números o viñetas y moverá el texto hacia la izquierda para que no haya espacio vacío donde una vez estuvieron las viñetas.
18+
19+
**Nota:**
20+
21+
Construye el código existente primero para ver cómo se ve originalmente la página.
22+
Luego, realiza los cambios a continuación y construye de nuevo.
23+
24+
## 📝 Instrucciones:
25+
26+
1. Convierte los números de las bebidas Coca Cola en letras minúsculas.
27+
2. Convierte los números de las bebidas Pepsi en viñetas cuadradas.
28+
3. Convierte las viñetas de las bebidas Saludables en números armenios. :)
29+
4. Elimina completamente las viñetas y el espacio extra de Web-developer drinks.

‎exercises/03-list-styling/README.md

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
# `03` List styling
2+
3+
In the front end we often have to list items and the way to do that is with `<ul>` tags, for unordered/bulleted lists, and `<ol>` tags for ordered/numbered lists.
4+
5+
We have CSS control over what these lists look like, what bullets or numbers they use, etc.
6+
7+
For example:
8+
9+
```HTML
10+
ul {
11+
list-style-type: none;
12+
margin: 0;
13+
padding: 0;
14+
}
15+
```
16+
17+
Will remove the numbers or bullets and will move the text to the left so there is no empty space where the bullets once were.
18+
19+
**Note:**
20+
21+
Build the existing code first to see what the page originally looks like.
22+
Then make the changes below and build again.
23+
24+
## 📝 Instructions:
25+
26+
27+
1. Make the Coca Cola drink numbers into lower case letters.
28+
2. Make the Pepsi drink numbers into square bullets.
29+
3. Make the Healthy drink bullets into Armenian numbers. :)
30+
4. Completely remove the bullets and extra spacing from the Web-developer drinks.
31+
32+
### 💡 Hint:
33+
34+
- How to work with CSS list styles: https://www.w3schools.com/css/css_list.asp
35+
- Changing bullets into numbers and vice versa means that you would need to change the type of list - ordered or unordered. Changes in the html tags may be necessary.
36+
- `armenian` is an actual possible value of `list-style-type`: https://www.w3schools.com/cssref/pr_list-style-type.asp

‎exercises/03-list-styling/index.html

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="stylesheet" type="text/css" href="./styles.css" />
8+
<title>03 List styling</title>
9+
</head>
10+
11+
<body>
12+
<div class="container">
13+
<h2>Your favorite drinks</h2>
14+
<h4>Coca Cola drinks</h4>
15+
<ol class="cocacola">
16+
<li>Coca Cola</li>
17+
<li>Dr. Pepper</li>
18+
<li>Fanta</li>
19+
</ol>
20+
21+
<h4>Pepsi drinks</h4>
22+
<ol class="pepsi">
23+
<li>Pepsi Cola</li>
24+
<li>Mountain Dew</li>
25+
<li>Gatorade</li>
26+
</ol>
27+
28+
<h4>Healthy drinks</h4>
29+
<ul class="healthy">
30+
<li>Kombucha</li>
31+
<li>Kale juice</li>
32+
<li>Sparkling Water</li>
33+
</ul>
34+
35+
<h4>Web-developer drinks</h4>
36+
<ul class="dev-drinks">
37+
<li>Coffee</li>
38+
<li>COFFEE</li>
39+
<li>COFFEE!!!</li>
40+
</ul>
41+
</div>
42+
</body>
43+
</html>

‎exercises/03-list-styling/styles.css

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
body {
2+
height: 100vh;
3+
background: rgb(189, 189, 189);
4+
}
5+
6+
.container {
7+
font-family: "Comic Sans MS", "Comic Sans", cursive;
8+
margin: 0 auto;
9+
width: 70vw;
10+
box-shadow: 3px 5px 20px #312f2f;
11+
background-color: white;
12+
padding: 120px;
13+
width: 300px;
14+
}

‎exercises/03-list-styling/test.js

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
const fs=require("fs");
2+
const path=require("path");
3+
const html=fs.readFileSync(path.resolve(__dirname, "./index.html"), "utf8");
4+
5+
jest.dontMock("fs");
6+
7+
describe("The lists should be modified accordingly", function() {
8+
beforeEach(() => {
9+
//here I import the HTML into the document
10+
document.documentElement.innerHTML = html.toString();
11+
});
12+
afterEach(() => {
13+
jest.resetModules();
14+
});
15+
16+
it("You should not change the existing head tag elements", function () {
17+
let head = document.querySelector('head');
18+
let title = head.querySelector('title').innerHTML;
19+
20+
expect(title).toBe('03 List styling')
21+
})
22+
23+
// Test in progress:
24+
// it("The lists should be correctly styled", function() {
25+
// const uls = document.querySelectorAll("ul");
26+
// const ols = document.querySelectorAll("ol");
27+
// console.log(uls);
28+
// console.log(ols);
29+
30+
// var style1 = window.getComputedStyle(ols[0]);
31+
// var style2 = window.getComputedStyle(uls[0]);
32+
// var style3 = window.getComputedStyle(ols[1]);
33+
// var style4 = window.getComputedStyle(uls[1]);
34+
35+
36+
// expect(style1["listStyleType"]).toBe("lower-alpha");
37+
// expect(style2["listStyleType"]).toBe("square");
38+
// expect(style3["listStyleType"]).toBe("armenian");
39+
// expect(style4["listStyleType"]).toBe("none");
40+
41+
// });
42+
});

0 commit comments

Comments
 (0)