4GeeksAcademy · gmihov001 · Aug 13, 2021 · Aug 14, 2021 · Aug 14, 2021 · Aug 14, 2021
diff --git a/.learn/resets/03-Inline-Styles/index.html b/.learn/resets/03-Inline-Styles/index.html
diff --git a/.learn/resets/03-List-styling/index.html b/.learn/resets/03-List-styling/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>03 List styling</title>
+	</head>
+
+	<body>
+		<h2>Your favorite drinks</h2>
+		<h4>Coca Cola drinks</h4>
+		<ul class="cocacola">
+			<li>Coca Cola</li>
+			<li>Dr. Pepper</li>
+			<li>Fanta</li>
+		</ul>
+
+		<h4>Pepsi drinks</h4>
+		<ul class="pepsi">
+			<li>Pepsi Cola</li>
+			<li>Mountain Dew</li>
+			<li>Gatorade</li>
+		</ul>
+
+		<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>
+	</body>
+</html>
diff --git a/exercises/01-Hello-World/README.md b/exercises/01-Hello-World/README.md
@@ -3,35 +3,36 @@ tutorial: "https://www.youtube.com/watch?v=rbtHLA813pU"
 ---
 # `01` Hello World in CSS
 
-CSS is about styles. To apply styles you always have to follow this steps:
+CSS is about adding styles to our HTML elements. 
 
-1. Read the HTML and pick what element do you want to decorate or apply styles to.
-2. Programatically select the element you want to style using CSS Selectors.
-3. Write the styling that you want by using CSS rules.
-
-That is it! The rest is just semantics! 😁
-
-Look at this example:
+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
-<style>
-    a {
-        /* change this style to yellow */
-        color: pink;
-    }
-</style>
-<a href="https://google.com" target="_blank">Click me to open google.com</a>
+<a href="google.com" style="color: red; font-size: 14px;">Go to google</a>
 ```
 
-We have an HTML anchor `<a>` that takes people to google.com when clicked.
-We use CSS to tell (selected) all the anchor tags and make then pink.
+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
 
-Paste this code on your website to see the results.
+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. 
+
 
-## 💻 Preview
+### 💡 Hint:
 
-It should look like this:
+- 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 Gitpod. 
+- 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.
 
-![01 Hello World Exercise Preview](https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/master/.learn/assets/01-1.png?raw=true)
diff --git a/exercises/01.1-The-Style-Tag/README.md b/exercises/01.1-The-Style-Tag/README.md
@@ -4,8 +4,10 @@ tutorial: "https://www.youtube.com/watch?v=C5sOchuD2d4"
 
 # `01.1` The Style Tag
 
-If you want to add styles into a website by writing CSS you have to always add it within a `<style>` tag.
+A more efficient approach to adding styles into your webpages is by writing your CSS in a `<style>` tag, within the head section of your HTML code.
+
 You can have as many style tags as you want but it is recomended to have only one at the beginning of your website code.
+
 ```HTML
 <style>
     /* the website CSS Styles go here */
@@ -14,7 +16,18 @@ You can have as many style tags as you want but it is recomended to have only on
 
 ## 📝 Instructions
 
-Add a `<style>` tag into your website and using CSS select all `<p>` tags to turn their text into blue color.
+1. Add a `<style>` tag into your website
+2. Using CSS properties select all `<p>` tags to turn their text color to blue.
+3. Make the font (text) twice its original size - use the `em` units. 
+4. Give the `p` tag padding of `2rem`.
+
+### 💡 Hint
+
+- Remember that you will need the complete html structure of the page, because the `style` tags need to go inside of the `head` tags.
+
+- You can learn more about the different measurement units in CSS here:
+https://www.w3schools.com/cssref/css_units.asp
+
 
 ## 💻 Preview
 

diff --git a/exercises/01.1-The-Style-Tag/index.html b/exercises/01.1-The-Style-Tag/index.html
@@ -1,4 +1,4 @@
-<!-- add a style tag and select the p tag and make it color blue -->
+<!-- Remember you can only add a style tag within the head tags of your web page -->
 <p>
 	Coding is a basic literacy in the digital age, and it is important for kids to understand and be able to work with and understand the technology
 	around them. Having children learn coding at a young age prepares them for the future. Coding helps children with communication, creativity,

diff --git a/exercises/01.3-Your-Second-Style/tests.js b/exercises/01.3-Your-Second-Style/tests.js
@@ -26,8 +26,8 @@ describe("All the styles should be applied", function() {
     // console.log(bodyInlineStyle[0].style._values.background);
   });
   it("You should not change the existing head tag elements", function () {
-    let meta = document.querySelector('head').querySelector("meta")
+    let meta = document.querySelector('head').querySelector("meta");
 
-    expect(meta).toBe(null)
+    expect(meta).toBe(null);
   })
 });
diff --git a/exercises/02.1-Background/tests.js b/exercises/02.1-Background/tests.js
@@ -15,10 +15,13 @@ describe("All the styles should be applied", function () {
 
 
   });
+
   afterEach(() => {
     jest.resetModules();
   });
-  it("The body tag should not contains any inline style", function () {
+
+
+  it("The body tag should not contain any inline style", function () {
     document.querySelector(
       "head"
     ).innerHTML=`<style>${css.toString()}</style>`;

diff --git a/exercises/03-Inline-Styles/README.md b/exercises/03-Inline-Styles/README.md
diff --git a/exercises/03-Inline-Styles/index.html b/exercises/03-Inline-Styles/index.html
diff --git a/exercises/03-Inline-Styles/tests.js b/exercises/03-Inline-Styles/tests.js
diff --git a/exercises/03-Inline-Styles/README.es.md → exercises/03-List-styling/README.es.md b/exercises/03-Inline-Styles/README.es.md → exercises/03-List-styling/README.es.md
diff --git a/exercises/03-List-styling/README.md b/exercises/03-List-styling/README.md
@@ -0,0 +1,40 @@
+---
+tutorial: "https://www.youtube.com/watch?v=jIMPLzpryuI"
+---
+
+# `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,15 @@
+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;
+}
+