+ 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, + math,writing, and confidence. +
diff --git a/.learn/resets/01.2-Your-First-Style/index.html b/.learn/resets/01.2-Your-First-Style/index.html new file mode 100644 index 00000000..39661132 --- /dev/null +++ b/.learn/resets/01.2-Your-First-Style/index.html @@ -0,0 +1,14 @@ + + + + + + + Hello! I am an anchor in red, change my color to yellow + + diff --git a/.learn/resets/01.3-Your-Second-Style/index.html b/.learn/resets/01.3-Your-Second-Style/index.html new file mode 100644 index 00000000..998d973a --- /dev/null +++ b/.learn/resets/01.3-Your-Second-Style/index.html @@ -0,0 +1,11 @@ + + + + + + + Hello! My background should be blue! + + diff --git a/.learn/resets/02-Separate-Stylesheet/index.html b/.learn/resets/02-Separate-Stylesheet/index.html new file mode 100644 index 00000000..a7be7a61 --- /dev/null +++ b/.learn/resets/02-Separate-Stylesheet/index.html @@ -0,0 +1,9 @@ + + + + + + + My background should be blue. + + diff --git a/.learn/resets/02-Separate-Stylesheet/styles.css b/.learn/resets/02-Separate-Stylesheet/styles.css new file mode 100644 index 00000000..780be166 --- /dev/null +++ b/.learn/resets/02-Separate-Stylesheet/styles.css @@ -0,0 +1,4 @@ +/* your styles here: + 1. Select the body tag. + 2. Add the background rule equal to blue. + */ diff --git a/.learn/resets/02.1-Background/index.html b/.learn/resets/02.1-Background/index.html new file mode 100644 index 00000000..ce03ce24 --- /dev/null +++ b/.learn/resets/02.1-Background/index.html @@ -0,0 +1,10 @@ + + + + +| Hello | +
| My brother | +
Hello!
+World!
+ + diff --git a/.learn/resets/04-Class-Selector/styles.css b/.learn/resets/04-Class-Selector/styles.css new file mode 100644 index 00000000..ffec43c5 --- /dev/null +++ b/.learn/resets/04-Class-Selector/styles.css @@ -0,0 +1,3 @@ +.b-blue { + background: blue; +} diff --git a/bc.json b/bc.json index fc7f686a..7b33f333 100644 --- a/bc.json +++ b/bc.json @@ -1,5 +1,28 @@ { + "port": 3000, + "address": "https://fe81f30d-2a49-4f03-903a-a1926d51c5f9.ws-us03.gitpod.io", + "editor": "gitpod", + "configPath": { + "config": "bc.json", + "base": ".learn", + "exercises": "./exercises", + "output": ".learn/dist" + }, + "outputPath": "./.learn/dist", + "publicPath": "/preview", + "grading": "isolated", + "ignoreRegex": {}, + "webpack_template": null, + "disable_grading": true, + "onCompilerSuccess": "open-browser", "language": "css", + "compiler": "webpack", + "tester": "jest", + "actions": [ + "build", + "test", + "reset" + ], "preview": "https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/master/preview.png?raw=true", "repository": "https://github.com/4GeeksAcademy/css-tutorial-exercises-course", "title": "Learn CSS Interactively", @@ -8,5 +31,239 @@ "duration": 8, "difficulty": "easy", "video-solutions": true, - "graded": true -} + "graded": true, + "session": 4399060493723165700, + "exercises": [ + { + "slug": "00-Welcome", + "title": "00-Welcome", + "done": false, + "path": "exercises/00-Welcome", + "translations": [ + "es", + "us" + ], + "graded": false + }, + { + "slug": "01-Hello-World", + "title": "01-Hello-World", + "done": false, + "path": "exercises/01-Hello-World", + "translations": [ + "es", + "us" + ], + "graded": false + }, + { + "slug": "01.1-The-Style-Tag", + "title": "01.1-The-Style-Tag", + "done": false, + "path": "exercises/01.1-The-Style-Tag", + "translations": [ + "es", + "us" + ], + "graded": false + }, + { + "slug": "01.2-Your-First-Style", + "title": "01.2-Your-First-Style", + "done": false, + "path": "exercises/01.2-Your-First-Style", + "translations": [ + "es", + "us" + ], + "graded": true + }, + { + "slug": "01.3-Your-Second-Style", + "title": "01.3-Your-Second-Style", + "done": false, + "path": "exercises/01.3-Your-Second-Style", + "translations": [ + "es", + "us" + ], + "graded": true + }, + { + "slug": "02-Separate-Stylesheet", + "title": "02-Separate-Stylesheet", + "done": false, + "path": "exercises/02-Separate-Stylesheet", + "translations": [ + "es", + "us" + ], + "graded": true + }, + { + "slug": "02.1-Background", + "title": "02.1-Background", + "done": false, + "path": "exercises/02.1-Background", + "translations": [ + "es", + "us" + ], + "graded": true + }, + { + "slug": "03-Inline-Styles", + "title": "03-Inline-Styles", + "done": false, + "path": "exercises/03-Inline-Styles", + "translations": [ + "es", + "us" + ], + "graded": true + }, + { + "slug": "04-Class-Selector", + "title": "04-Class-Selector", + "done": false, + "path": "exercises/04-Class-Selector", + "translations": [ + "es", + "us" + ], + "graded": false + }, + { + "slug": "04.1-Combined-Rules", + "title": "04.1-Combined-Rules", + "done": false, + "path": "exercises/04.1-Combined-Rules", + "translations": [ + "es", + "us" + ], + "graded": true + }, + { + "slug": "04.2-Apply-several-classes", + "title": "04.2-Apply-several-classes", + "done": false, + "path": "exercises/04.2-Apply-several-classes", + "translations": [ + "us", + "us" + ], + "graded": false + }, + { + "slug": "04.3-id-Selector", + "title": "04.3-id-Selector", + "done": false, + "path": "exercises/04.3-id-Selector", + "translations": [ + "es", + "us" + ], + "graded": false + }, + { + "slug": "05-Specificity", + "title": "05-Specificity", + "done": false, + "path": "exercises/05-Specificity", + "translations": [ + "es", + "us" + ], + "graded": true + }, + { + "slug": "06-Practicing-Rules", + "title": "06-Practicing-Rules", + "done": false, + "path": "exercises/06-Practicing-Rules", + "translations": [ + "es", + "us" + ], + "graded": true + }, + { + "slug": "07-Very-Specific-Rules", + "title": "07-Very-Specific-Rules", + "done": false, + "path": "exercises/07-Very-Specific-Rules", + "translations": [ + "es", + "us" + ], + "graded": true + }, + { + "slug": "08-Rounded-Image", + "title": "08-Rounded-Image", + "done": false, + "path": "exercises/08-Rounded-Image", + "translations": [ + "es", + "us" + ], + "graded": true + }, + { + "slug": "09-Anchor-Styles", + "title": "09-Anchor-Styles", + "done": false, + "path": "exercises/09-Anchor-Styles", + "translations": [ + "es", + "us" + ], + "graded": true + }, + { + "slug": "10-Your-Own-Font", + "title": "10-Your-Own-Font", + "done": false, + "path": "exercises/10-Your-Own-Font", + "translations": [ + "es", + "us" + ], + "graded": true + }, + { + "slug": "11-Font-Awesome-Icons", + "title": "11-Font-Awesome-Icons", + "done": false, + "path": "exercises/11-Font-Awesome-Icons", + "translations": [ + "es", + "us" + ], + "graded": true + }, + { + "slug": "12-Relative-Length-EM-REM", + "title": "12-Relative-Length-EM-REM", + "done": false, + "path": "exercises/12-Relative-Length-EM-REM", + "translations": [ + "es", + "us" + ], + "graded": true + }, + { + "slug": "13-Anchor-Like-Button", + "title": "13-Anchor-Like-Button", + "done": false, + "path": "exercises/13-Anchor-Like-Button", + "translations": [ + "es", + "us" + ], + "graded": true + } + ] +} \ No newline at end of file diff --git a/exercises/01-Hello-World/index.html b/exercises/01-Hello-World/index.html index 03ae0584..8e440192 100644 --- a/exercises/01-Hello-World/index.html +++ b/exercises/01-Hello-World/index.html @@ -1 +1,7 @@ - \ No newline at end of file + +Click me to open google.com diff --git a/exercises/01.1-The-Style-Tag/index.html b/exercises/01.1-The-Style-Tag/index.html index 1c51e8e0..a22c5383 100644 --- a/exercises/01.1-The-Style-Tag/index.html +++ b/exercises/01.1-The-Style-Tag/index.html @@ -1,6 +1,18 @@ -- 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, - math,writing, and confidence. -
+ + + + + + ++ 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, math,writing, and confidence. +
+ + diff --git a/exercises/01.2-Your-First-Style/index.html b/exercises/01.2-Your-First-Style/index.html index 39661132..a2a88d04 100644 --- a/exercises/01.2-Your-First-Style/index.html +++ b/exercises/01.2-Your-First-Style/index.html @@ -4,7 +4,7 @@ diff --git a/exercises/01.3-Your-Second-Style/index.html b/exercises/01.3-Your-Second-Style/index.html index 998d973a..c7010cc0 100644 --- a/exercises/01.3-Your-Second-Style/index.html +++ b/exercises/01.3-Your-Second-Style/index.html @@ -2,7 +2,9 @@ diff --git a/exercises/02-Separate-Stylesheet/styles.css b/exercises/02-Separate-Stylesheet/styles.css index 780be166..5250e305 100644 --- a/exercises/02-Separate-Stylesheet/styles.css +++ b/exercises/02-Separate-Stylesheet/styles.css @@ -2,3 +2,6 @@ 1. Select the body tag. 2. Add the background rule equal to blue. */ +body { + background: blue; +} diff --git a/exercises/02.1-Background/styles.css b/exercises/02.1-Background/styles.css index afdf956f..5c3a529e 100644 --- a/exercises/02.1-Background/styles.css +++ b/exercises/02.1-Background/styles.css @@ -1,5 +1,5 @@ body { background-image: url(https://4geeksacademy.github.io/exercise-assets/img/bg/small-mosaic.jpg); - background-size: cover; - background-repeat: no-repeat; + background-size: contain; + background-repeat: inherit; } diff --git a/exercises/03-Inline-Styles/index.html b/exercises/03-Inline-Styles/index.html index ab36cc54..2d78dd68 100644 --- a/exercises/03-Inline-Styles/index.html +++ b/exercises/03-Inline-Styles/index.html @@ -5,7 +5,7 @@ -| Hello |