Skip to content

Commit 6f7f150

Browse files
alesanchezralesanchezr
committed
introduction and new exercise
1 parent de6e4ad commit 6f7f150

File tree

8 files changed

+213
-3
lines changed

8 files changed

+213
-3
lines changed

‎.breathecode/resets/01-Hello-World/index.html

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<!-- your code here -->
2+
<style>
3+
a {
4+
/* change this style to yellow */
5+
color: pink;
6+
}
7+
</style>
8+
<a href="https://google.com" target="_blank">Click me to open google.com</a>

‎exercises/01-Your-First-Style/index.html renamed to ‎.breathecode/resets/01-Your-First-Style/index.html

File renamed without changes.

‎bc.json

Lines changed: 148 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,151 @@
11
{
2+
"port": 3000,
3+
"address": "localhost",
4+
"editor": "gitpod",
5+
"outputPath": "./.breathecode/dist",
6+
"publicPath": "/preview",
7+
"grading": "isolated",
8+
"ignoreRegex": {},
9+
"webpack_template": null,
10+
"disable_grading": true,
11+
"onCompilerSuccess": "open-browser",
12+
"language": "css",
13+
"compiler": "webpack",
14+
"tester": "jest",
15+
"actions": [
16+
"build",
17+
"test",
18+
"reset"
19+
],
220
"title": "Learn CSS Interactively",
321
"description": "Learn CSS with an interactive and auto-graded tutorial with dozens of exercises.",
4-
"language": "css"
5-
}
22+
"exercisesPath": "./exercises",
23+
"exercises": [
24+
{
25+
"slug": "00-Welcome",
26+
"title": "00-Welcome",
27+
"path": "exercises/00-Welcome",
28+
"translations": [
29+
"us"
30+
]
31+
},
32+
{
33+
"slug": "01-Hello-World",
34+
"title": "01-Hello-World",
35+
"path": "exercises/01-Hello-World",
36+
"translations": []
37+
},
38+
{
39+
"slug": "01.1-Your-First-Style",
40+
"title": "01.1-Your-First-Style",
41+
"path": "exercises/01.1-Your-First-Style",
42+
"translations": [
43+
"us"
44+
]
45+
},
46+
{
47+
"slug": "01.2-Your-Second-Style",
48+
"title": "01.2-Your-Second-Style",
49+
"path": "exercises/01.2-Your-Second-Style",
50+
"translations": [
51+
"us"
52+
]
53+
},
54+
{
55+
"slug": "02-Background",
56+
"title": "02-Background",
57+
"path": "exercises/02-Background",
58+
"translations": [
59+
"us"
60+
]
61+
},
62+
{
63+
"slug": "03-Inline-Styles",
64+
"title": "03-Inline-Styles",
65+
"path": "exercises/03-Inline-Styles",
66+
"translations": [
67+
"us"
68+
]
69+
},
70+
{
71+
"slug": "04-Combined-Rules",
72+
"title": "04-Combined-Rules",
73+
"path": "exercises/04-Combined-Rules",
74+
"translations": [
75+
"us"
76+
]
77+
},
78+
{
79+
"slug": "05-Specificity",
80+
"title": "05-Specificity",
81+
"path": "exercises/05-Specificity",
82+
"translations": [
83+
"us"
84+
]
85+
},
86+
{
87+
"slug": "06-Practicing-Rules",
88+
"title": "06-Practicing-Rules",
89+
"path": "exercises/06-Practicing-Rules",
90+
"translations": [
91+
"us"
92+
]
93+
},
94+
{
95+
"slug": "07-Very-Specific-Rules",
96+
"title": "07-Very-Specific-Rules",
97+
"path": "exercises/07-Very-Specific-Rules",
98+
"translations": [
99+
"us"
100+
]
101+
},
102+
{
103+
"slug": "08-Rounded-Image",
104+
"title": "08-Rounded-Image",
105+
"path": "exercises/08-Rounded-Image",
106+
"translations": [
107+
"us"
108+
]
109+
},
110+
{
111+
"slug": "09-Anchor-Styles",
112+
"title": "09-Anchor-Styles",
113+
"path": "exercises/09-Anchor-Styles",
114+
"translations": [
115+
"us"
116+
]
117+
},
118+
{
119+
"slug": "10-Your-Own-Font",
120+
"title": "10-Your-Own-Font",
121+
"path": "exercises/10-Your-Own-Font",
122+
"translations": [
123+
"us"
124+
]
125+
},
126+
{
127+
"slug": "11-Font-Awesome-Icons",
128+
"title": "11-Font-Awesome-Icons",
129+
"path": "exercises/11-Font-Awesome-Icons",
130+
"translations": [
131+
"us"
132+
]
133+
},
134+
{
135+
"slug": "12-Relative-Length-EM-REM",
136+
"title": "12-Relative-Length-EM-REM",
137+
"path": "exercises/12-Relative-Length-EM-REM",
138+
"translations": [
139+
"us"
140+
]
141+
},
142+
{
143+
"slug": "13-Anchor-Like-Button",
144+
"title": "13-Anchor-Like-Button",
145+
"path": "exercises/13-Anchor-Like-Button",
146+
"translations": [
147+
"us"
148+
]
149+
}
150+
]
151+
}

‎exercises/01-Hello-World/README.md

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
# `01` Hello World in CSS
2+
3+
CSS is about styles. To apply styles you always have to follow this steps:
4+
5+
1. Read the HTML and pick in your mind what element you want to decorate or apply styles to.
6+
1. Programatically select the element you want to style using CSS Selectors.
7+
2. Write the styling that you want by using CSS rules.
8+
9+
That is it! The rest is just semantics! 😁
10+
11+
Look at this example:
12+
13+
```HTML
14+
<style>
15+
a {
16+
/* change this style to yellow */
17+
color: pink;
18+
}
19+
</style>
20+
<a href="https://google.com" target="_blank">Click me to open google.com</a>
21+
```
22+
23+
## 📝 Instructions
24+
25+
Paste this code on your website to see the results.
26+
27+
## 💻 Preview
28+
29+
It should look like this:
30+
31+
![01 Hello World Exercise Preview](https://ucarecdn.com/7e9496c0-549a-4767-b771-13b9bfc5d9c2/)

‎exercises/01-Hello-World/index.html

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<!-- your code here -->
2+
<style>
3+
a {
4+
/* change this style to yellow */
5+
color: pink;
6+
}
7+
</style>
8+
<a href="https://google.com" target="_blank">Click me to open google.com</a>

‎exercises/01-Your-First-Style/README.md renamed to ‎exercises/01.1-Your-First-Style/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# `01` Your First Style
1+
# `01.1` Your First Style
22

33
When doing CSS, the idea is to apply `css rules` to your `html elements`, you always have to select the element first, and then specify what rules you want to apply to it:
44

‎exercises/01.1-Your-First-Style/index.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width" />
6+
<style>
7+
a {
8+
/* change this style to yellow */
9+
color: red;
10+
}
11+
</style>
12+
<title>01 Your First Style</title>
13+
</head>
14+
<body>
15+
Hello! <a href="#">I am an anchor in red, change my color to yellow</a>
16+
</body>
17+
</html>

‎exercises/01-Your-First-Style/tests.js renamed to ‎exercises/01.1-Your-First-Style/tests.js

File renamed without changes.

0 commit comments

Comments
 (0)