Merge pull request #131 from learnpack/master

added new exercise and update first step to make it about inline styles
4GeeksAcademy · Feb 1, 2024 · d858f82 · d858f82
2 parents 6a7faa0 + 1916a2a
commit d858f82
Show file tree

Hide file tree

Showing 26 changed files with 208 additions and 32 deletions.
diff --git a/exercises/03-Inline-Styles/README.es.md → exercises/00.1-Inline-Styles/README.es.md b/exercises/03-Inline-Styles/README.es.md → exercises/00.1-Inline-Styles/README.es.md
@@ -1,6 +1,9 @@
 # `03` Inline Styles
 
-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.
+
+CSS trata sobre agregar estilos (styles) y diseños a tus etiquetas y elementos HTML.
+
+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.
 
 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.
 

diff --git a/exercises/00.1-Inline-Styles/README.md b/exercises/00.1-Inline-Styles/README.md
@@ -0,0 +1,37 @@
+---
+tutorial: "https://www.youtube.com/watch?v=rbtHLA813pU"
+---
+# `01` Hello World in CSS
+
+CSS is about adding styles to our HTML elements. 
+
+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:
+
+```HTML
+<a href="google.com" style="color: red; font-size: 14px;">Go to google</a>
+```
+
+This will set the text color of the link above to red, and the font size to 14 pixels.
+
+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.   
+
+To apply styles you always have to follow thеse steps:
+
+1. Read the HTML and pick what element you want to decorate to apply CSS to it.
+2. Apply the style with the `style` attribute as above. 
+
+That is it! The rest is just semantics! 😁
+
+
+## 📝 Instructions
+
+1. Within the `index.html` file, create the basic structure of an html page with the appropriate `<html>`, `<head>` and `<body>` tags.
+2. Inside of the body of the page, create an `<h1>` tag that reads "HELLO WORLD!!!".
+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. 
+
+
+### 💡 Hint:
+
+- 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. 
+- Read how to apply borders here: https://www.w3schools.com/css/css_border_shorthand.asp
+- For this exercise, do NOT use `styles.css` file or `<style>` tag.
diff --git a/exercises/03-Inline-Styles/index.html → exercises/00.1-Inline-Styles/index.html b/exercises/03-Inline-Styles/index.html → exercises/00.1-Inline-Styles/index.html
diff --git a/...cises/03-Inline-Styles/solution.hide.html → ...ses/00.1-Inline-Styles/solution.hide.html b/...cises/03-Inline-Styles/solution.hide.html → ...ses/00.1-Inline-Styles/solution.hide.html
diff --git a/exercises/03-Inline-Styles/tests.js → exercises/00.1-Inline-Styles/tests.js b/exercises/03-Inline-Styles/tests.js → exercises/00.1-Inline-Styles/tests.js
diff --git a/exercises/01-Hello-World/README.es.md → exercises/01-Style-tag/README.es.md b/exercises/01-Hello-World/README.es.md → exercises/01-Style-tag/README.es.md
diff --git a/exercises/01-Hello-World/README.md → exercises/01-Style-tag/README.md b/exercises/01-Hello-World/README.md → exercises/01-Style-tag/README.md
@@ -5,11 +5,11 @@ tutorial: "https://www.youtube.com/watch?v=rbtHLA813pU"
 
 CSS is about styles. To apply styles you always have to follow these steps:
 
-1. Read the HTML and pick what element you want to decorate or apply styles to.
+1. Read the HTML and pick what element (tag) you want to decorate or apply styles to.
 
-2. Programmatically select the element you want to style using CSS Selectors.
+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).
 
-3. Write the styling that you want by using CSS rules.
+3. Write the styling that you want by using [CSS property rules](https://4geeks.com/lesson/what-is-css-learn-css#properties).
 
 That is it! The rest is just semantics! 😁
 

diff --git a/exercises/01-Hello-World/index.html → exercises/01-Style-tag/index.html b/exercises/01-Hello-World/index.html → exercises/01-Style-tag/index.html
diff --git a/exercises/01-Hello-World/solution.hide.html → exercises/01-Style-tag/solution.hide.html b/exercises/01-Hello-World/solution.hide.html → exercises/01-Style-tag/solution.hide.html
diff --git a/exercises/01-Hello-World/test.js → exercises/01-Style-tag/test.js b/exercises/01-Hello-World/test.js → exercises/01-Style-tag/test.js
diff --git a/exercises/01.1-The-Style-Tag/README.es.md → exercises/01.1-Add-a-style-tag/README.es.md b/exercises/01.1-The-Style-Tag/README.es.md → exercises/01.1-Add-a-style-tag/README.es.md
diff --git a/exercises/01.1-The-Style-Tag/README.md → exercises/01.1-Add-a-style-tag/README.md b/exercises/01.1-The-Style-Tag/README.md → exercises/01.1-Add-a-style-tag/README.md
diff --git a/exercises/01.1-The-Style-Tag/index.html → exercises/01.1-Add-a-style-tag/index.html b/exercises/01.1-The-Style-Tag/index.html → exercises/01.1-Add-a-style-tag/index.html
diff --git a/...ses/01.1-The-Style-Tag/solution.hide.html → ...s/01.1-Add-a-style-tag/solution.hide.html b/...ses/01.1-The-Style-Tag/solution.hide.html → ...s/01.1-Add-a-style-tag/solution.hide.html
diff --git a/exercises/01.1-The-Style-Tag/test.js → exercises/01.1-Add-a-style-tag/test.js b/exercises/01.1-The-Style-Tag/test.js → exercises/01.1-Add-a-style-tag/test.js
diff --git a/exercises/01.2-Your-First-Style/README.es.md → exercises/01.2-RGBA-colors/README.es.md b/exercises/01.2-Your-First-Style/README.es.md → exercises/01.2-RGBA-colors/README.es.md
diff --git a/exercises/01.2-Your-First-Style/README.md → exercises/01.2-RGBA-colors/README.md b/exercises/01.2-Your-First-Style/README.md → exercises/01.2-RGBA-colors/README.md
diff --git a/exercises/01.2-Your-First-Style/index.html → exercises/01.2-RGBA-colors/index.html b/exercises/01.2-Your-First-Style/index.html → exercises/01.2-RGBA-colors/index.html
diff --git a/.../01.2-Your-First-Style/solution.hide.html → ...cises/01.2-RGBA-colors/solution.hide.html b/.../01.2-Your-First-Style/solution.hide.html → ...cises/01.2-RGBA-colors/solution.hide.html
diff --git a/exercises/01.2-Your-First-Style/tests.js → exercises/01.2-RGBA-colors/tests.js b/exercises/01.2-Your-First-Style/tests.js → exercises/01.2-RGBA-colors/tests.js
diff --git a/exercises/03-Inline-Styles/README.md b/exercises/03-Inline-Styles/README.md
diff --git a/exercises/03-list-styling/README.es.md b/exercises/03-list-styling/README.es.md
@@ -0,0 +1,29 @@
+# `03` Estilo de listas
+
+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.
+
+Tenemos control mediante CSS sobre cómo se ven estas listas, qué viñetas o números usan, etc.
+
+Por ejemplo:
+
+```HTML
+ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+```
+
+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.
+
+**Nota:**
+
+Construye el código existente primero para ver cómo se ve originalmente la página.
+Luego, realiza los cambios a continuación y construye de nuevo.
+
+## 📝 Instrucciones:
+
+1. Convierte los números de las bebidas Coca Cola en letras minúsculas.
+2. Convierte los números de las bebidas Pepsi en viñetas cuadradas.
+3. Convierte las viñetas de las bebidas Saludables en números armenios. :)
+4. Elimina completamente las viñetas y el espacio extra de Web-developer drinks.
diff --git a/exercises/03-list-styling/README.md b/exercises/03-list-styling/README.md
@@ -0,0 +1,36 @@
+# `03` List styling
+
+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.  
+
+We have CSS control over what these lists look like, what bullets or numbers they use, etc.
+
+For example:
+
+```HTML
+    ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+```
+
+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.
+
+**Note:** 
+
+Build the existing code first to see what the page originally looks like.
+Then make the changes below and build again.  
+
+## 📝 Instructions:
+
+
+1. Make the Coca Cola drink numbers into lower case letters. 
+2. Make the Pepsi drink numbers into square bullets.
+3. Make the Healthy drink bullets into Armenian numbers. :) 
+4. Completely remove the bullets and extra spacing from the Web-developer drinks. 
+
+### 💡 Hint:
+
+- How to work with CSS list styles: https://www.w3schools.com/css/css_list.asp
+- 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. 
+- `armenian` is an actual possible value of `list-style-type`: https://www.w3schools.com/cssref/pr_list-style-type.asp
diff --git a/exercises/03-list-styling/index.html b/exercises/03-list-styling/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8" />
+		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<link rel="stylesheet" type="text/css" href="./styles.css" />
+		<title>03 List styling</title>
+	</head>
+
+	<body>
+		<div class="container">
+			<h2>Your favorite drinks</h2>
+			<h4>Coca Cola drinks</h4>
+			<ol class="cocacola">
+				<li>Coca Cola</li>
+				<li>Dr. Pepper</li>
+				<li>Fanta</li>
+			</ol>
+
+			<h4>Pepsi drinks</h4>
+			<ol class="pepsi">
+				<li>Pepsi Cola</li>
+				<li>Mountain Dew</li>
+				<li>Gatorade</li>
+			</ol>
+
+			<h4>Healthy drinks</h4>
+			<ul class="healthy">
+				<li>Kombucha</li>
+				<li>Kale juice</li>
+				<li>Sparkling Water</li>
+			</ul>
+
+			<h4>Web-developer drinks</h4>
+			<ul class="dev-drinks">
+				<li>Coffee</li>
+				<li>COFFEE</li>
+				<li>COFFEE!!!</li>
+			</ul>
+		</div>
+	</body>
+</html>
diff --git a/exercises/03-list-styling/styles.css b/exercises/03-list-styling/styles.css
@@ -0,0 +1,14 @@
+body {
+	height: 100vh;
+	background: rgb(189, 189, 189);
+}
+
+.container {
+	font-family: "Comic Sans MS", "Comic Sans", cursive;
+	margin: 0 auto;
+	width: 70vw;
+	box-shadow: 3px 5px 20px #312f2f;
+	background-color: white;
+	padding: 120px;
+	width: 300px;
+}
diff --git a/exercises/03-list-styling/test.js b/exercises/03-list-styling/test.js
@@ -0,0 +1,42 @@
+const fs=require("fs");
+const path=require("path");
+const html=fs.readFileSync(path.resolve(__dirname, "./index.html"), "utf8");
+
+jest.dontMock("fs");
+
+describe("The lists should be modified accordingly", function() {
+  beforeEach(() => {
+    //here I import the HTML into the document
+    document.documentElement.innerHTML = html.toString();
+  });
+  afterEach(() => {
+    jest.resetModules();
+  });
+
+  it("You should not change the existing head tag elements", function () {
+    let head = document.querySelector('head');
+    let title = head.querySelector('title').innerHTML;
+
+    expect(title).toBe('03 List styling')
+  })
+
+  // Test in progress:
+  // it("The lists should be correctly styled", function() {
+  //   const uls = document.querySelectorAll("ul");
+  //   const ols = document.querySelectorAll("ol");
+  //   console.log(uls);
+  //   console.log(ols);
+
+  //   var style1 = window.getComputedStyle(ols[0]);
+  //   var style2 = window.getComputedStyle(uls[0]);
+  //   var style3 = window.getComputedStyle(ols[1]);
+  //   var style4 = window.getComputedStyle(uls[1]);
+
+
+  //   expect(style1["listStyleType"]).toBe("lower-alpha");
+  //   expect(style2["listStyleType"]).toBe("square");
+  //   expect(style3["listStyleType"]).toBe("armenian");
+  //   expect(style4["listStyleType"]).toBe("none");
+
+  // });
+});