Skip to content

Commit 0c966b0

Browse files
gmihov001gmihov001
committed
Changes in ex 01 and 03
1 parent 67601c1 commit 0c966b0

File tree

6 files changed

+96
-54
lines changed

6 files changed

+96
-54
lines changed

‎.learn/resets/03-Inline-Styles/index.html

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

‎.learn/resets/03-List-styling/index.html

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>03 List styling</title>
5+
</head>
6+
7+
<body>
8+
<h2>Your favorite drinks</h2>
9+
<h4>Coca Cola drinks</h4>
10+
<ul class="cocacola">
11+
<li>Coca Cola</li>
12+
<li>Dr. Pepper</li>
13+
<li>Fanta</li>
14+
</ul>
15+
16+
<h4>Pepsi drinks</h4>
17+
<ul class="pepsi">
18+
<li>Pepsi Cola</li>
19+
<li>Mountain Dew</li>
20+
<li>Gatorade</li>
21+
</ul>
22+
23+
<h4>Healthy drinks</h4>
24+
<ul class="healthy">
25+
<li>Kombucha</li>
26+
<li>Kale juice</li>
27+
<li>Sparkling Water</li>
28+
</ul>
29+
30+
<h4>Web-developer drinks</h4>
31+
<ul class="dev-drinks">
32+
<li>Coffee</li>
33+
<li>COFFEE</li>
34+
<li>COFFEE!!!</li>
35+
</ul>
36+
</body>
37+
</html>

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

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,28 +4,35 @@ tutorial: "https://www.youtube.com/watch?v=jIMPLzpryuI"
44

55
# `03` List styling
66

7-
Inline styles are a very bad idea unless you have no other choice (and that's a very uncommon situation). Sadly, we have to teach you how to do it because you may need to use them at some point.
7+
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.
88

9-
To use inline styles, instead of declaring a <style> tag in the header of the document, you have to set the "style" attribute of any element with the CSS code you need to apply to that specific element.
9+
We have CSS control over what these lists look like, what bullets or numbers they use, etc.
1010

1111
For example:
1212

13-
```html
14-
<a href="google.com" style="color: red; font-size: 14px;">Go to google</a>
13+
```HTML
14+
ul {
15+
list-style-type: none;
16+
margin: 0;
17+
padding: 0;
18+
}
1519
```
1620

17-
Will set the color of that specific link to red and the font-size to 14px
21+
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.
1822

1923
**Note:**
2024

21-
You can append as many CSS rules as you want, within the same line, separated by semi-colon.
2225

2326
## 📝 Instructions:
2427

2528

26-
1. Set an inline style to change the background color of the table to green. For this exercise, do NOT use styles.css :(
27-
29+
1. Make the Coca Cola drink numbers into lower case letters.
30+
2. Make the Pepsi drink numbers into square bullets.
31+
3. Make the Healthy drink bullets into Armenian numbers. :)
32+
4. Completely remove the bullets and extra spacing from the Web-developer drinks.
2833

2934
### 💡 Hint:
3035

31-
- How to use the background-size: http://lmgtfy.com/?q=css+inline+style
36+
- How to work with CSS list styles: https://www.w3schools.com/css/css_list.asp
37+
- 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.
38+
- `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: 28 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,40 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4+
<link rel="stylesheet" type="text/css" href="./styles.css" />
45
<title>03 List styling</title>
56
</head>
67

78
<body>
8-
<h2>Your favorite drinks</h2>
9-
<h4>Coca Cola drinks</h4>
10-
<ul class="cocacola">
11-
<li>Coca Cola</li>
12-
<li>Dr. Pepper</li>
13-
<li>Fanta</li>
14-
</ul>
9+
<div class="container">
10+
<h2>Your favorite drinks</h2>
11+
<h4>Coca Cola drinks</h4>
12+
<ol class="cocacola">
13+
<li>Coca Cola</li>
14+
<li>Dr. Pepper</li>
15+
<li>Fanta</li>
16+
</ol>
1517

16-
<h4>Pepsi drinks</h4>
17-
<ul class="pepsi">
18-
<li>Pepsi Cola</li>
19-
<li>Mountain Dew</li>
20-
<li>Gatorade</li>
21-
</ul>
18+
<h4>Pepsi drinks</h4>
19+
<ol class="pepsi">
20+
<li>Pepsi Cola</li>
21+
<li>Mountain Dew</li>
22+
<li>Gatorade</li>
23+
</ol>
2224

23-
<h4>Healthy drinks</h4>
24-
<ul class="healthy">
25-
<li>Kombucha</li>
26-
<li>Kale juice</li>
27-
<li>Sparkling Water</li>
28-
</ul>
25+
<h4>Healthy drinks</h4>
26+
<ul class="healthy">
27+
<li>Kombucha</li>
28+
<li>Kale juice</li>
29+
<li>Sparkling Water</li>
30+
</ul>
2931

30-
<h4>Web-developer drinks</h4>
31-
<ul class="dev-drinks">
32-
<li>Coffee</li>
33-
<li>COFFEE</li>
34-
<li>COFFEE!!!</li>
35-
</ul>
32+
<h4>Web-developer drinks</h4>
33+
<ul class="dev-drinks">
34+
<li>Coffee</li>
35+
<li>COFFEE</li>
36+
<li>COFFEE!!!</li>
37+
</ul>
38+
</div>
3639
</body>
3740
</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/04-Class-Selector/index.html

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,7 @@
22
<html>
33
<head>
44
<link rel="stylesheet" type="text/css" href="./styles.css" />
5-
<title>
6-
04 Class selector
7-
</title>
5+
<title>04 Class selector</title>
86
</head>
97

108
<body>

0 commit comments

Comments
 (0)