diff --git a/.learn/resets/01-Hello-World/index.html b/.learn/resets/01-Hello-World/index.html new file mode 100644 index 00000000..03ae0584 --- /dev/null +++ b/.learn/resets/01-Hello-World/index.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/.learn/resets/01.1-The-Style-Tag/index.html b/.learn/resets/01.1-The-Style-Tag/index.html new file mode 100644 index 00000000..1c51e8e0 --- /dev/null +++ b/.learn/resets/01.1-The-Style-Tag/index.html @@ -0,0 +1,6 @@ + +

+ 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 @@ + + + + + 02 Background + + + My background should be an image with th size "contain" + + diff --git a/.learn/resets/02.1-Background/styles.css b/.learn/resets/02.1-Background/styles.css new file mode 100644 index 00000000..afdf956f --- /dev/null +++ b/.learn/resets/02.1-Background/styles.css @@ -0,0 +1,5 @@ +body { + background-image: url(https://4geeksacademy.github.io/exercise-assets/img/bg/small-mosaic.jpg); + background-size: cover; + background-repeat: no-repeat; +} diff --git a/.learn/resets/03-Inline-Styles/index.html b/.learn/resets/03-Inline-Styles/index.html new file mode 100644 index 00000000..ab36cc54 --- /dev/null +++ b/.learn/resets/03-Inline-Styles/index.html @@ -0,0 +1,17 @@ + + + + 03 Inline Styles + + + + + + + + + + +
Hello
My brother
+ + diff --git a/.learn/resets/04-Class-Selector/index.html b/.learn/resets/04-Class-Selector/index.html new file mode 100644 index 00000000..e3abd1bd --- /dev/null +++ b/.learn/resets/04-Class-Selector/index.html @@ -0,0 +1,14 @@ + + + + + + 04 Class selector + + + + +

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 @@ - +
diff --git a/exercises/04-Class-Selector/index.html b/exercises/04-Class-Selector/index.html index e3abd1bd..317d28c5 100644 --- a/exercises/04-Class-Selector/index.html +++ b/exercises/04-Class-Selector/index.html @@ -8,7 +8,7 @@ -

Hello!

-

World!

+

Hello!

+

World!

diff --git a/exercises/04.1-Combined-Rules/styles.css b/exercises/04.1-Combined-Rules/styles.css index 3c54a57d..a21b75eb 100644 --- a/exercises/04.1-Combined-Rules/styles.css +++ b/exercises/04.1-Combined-Rules/styles.css @@ -1,6 +1,11 @@ .myBox { width: 50px; height: 50px; +<<<<<<< HEAD + padding: 10px 190px 50px 30px; + /* padding: 10px 30px 50px 190px; */ + background: rgb(189, 189, 189) url(https://assets.breatheco.de/apis/img/funny/baby.jpg) no-repeat 100px; +======= padding-top: 10px; padding-left: 30px; padding-right: 190px; @@ -10,5 +15,6 @@ background-image: url(https://assets.breatheco.de/apis/img/funny/baby.jpg); background-position-x: 100px; background-repeat: no-repeat; +>>>>>>> e836081d192c7c4d33e07bacbc80c8e63f74d6c3 background-size: contain; } diff --git a/exercises/04.2-Apply-several-classes/index.html b/exercises/04.2-Apply-several-classes/index.html index a64723af..7c820ec4 100644 --- a/exercises/04.2-Apply-several-classes/index.html +++ b/exercises/04.2-Apply-several-classes/index.html @@ -8,6 +8,6 @@ -
9
+
9
diff --git a/exercises/04.3-id-Selector/index.html b/exercises/04.3-id-Selector/index.html index 5b9a773d..a7964559 100644 --- a/exercises/04.3-id-Selector/index.html +++ b/exercises/04.3-id-Selector/index.html @@ -8,6 +8,6 @@ - I should look like a button + I should look like a button diff --git a/exercises/04.3-id-Selector/styles.css b/exercises/04.3-id-Selector/styles.css index e020d28b..2a4303b4 100644 --- a/exercises/04.3-id-Selector/styles.css +++ b/exercises/04.3-id-Selector/styles.css @@ -1,5 +1,5 @@ #button1 { - background: #BDBDBD; - border: #5E5E5E; - border-radius: 5px; + background: #bdbdbd; + border: #5e5e5e; + border-radius: 5px; } diff --git a/exercises/05-Specificity/index.html b/exercises/05-Specificity/index.html index 3d68946c..8c1a01ba 100644 --- a/exercises/05-Specificity/index.html +++ b/exercises/05-Specificity/index.html @@ -8,11 +8,11 @@ diff --git a/exercises/05-Specificity/styles.css b/exercises/05-Specificity/styles.css index db471c2b..87976217 100644 --- a/exercises/05-Specificity/styles.css +++ b/exercises/05-Specificity/styles.css @@ -1,9 +1,11 @@ -ul li{ +ul li { background: blue; } -#thirditem{ +#thirditem { background: yellow; -} +} /****** DON NOT EDIT ANYTHING ABOVE THIS LINE ****/ - \ No newline at end of file +.list { + background: green !important; +} diff --git a/exercises/06-Practicing-Rules/index.html b/exercises/06-Practicing-Rules/index.html index 4119acb5..20429582 100644 --- a/exercises/06-Practicing-Rules/index.html +++ b/exercises/06-Practicing-Rules/index.html @@ -31,4 +31,4 @@

3 reasons you know love what you are learning

click here

- \ No newline at end of file + diff --git a/exercises/06-Practicing-Rules/styles.css b/exercises/06-Practicing-Rules/styles.css index d89b1a47..65faf4bd 100644 --- a/exercises/06-Practicing-Rules/styles.css +++ b/exercises/06-Practicing-Rules/styles.css @@ -1 +1,26 @@ -/* add your styles here */ \ No newline at end of file +body { + background: url("https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/master/.learn/assets/background-vertical.jpg?raw=true"); + background-repeat: repeat-y; + font-family: "Times New Roman", Times, serif; + padding: 20px; +} + +h1 { + font-family: "Courier New", Courier, monospace; + color: red; + text-align: center; +} + +h2 { + text-decoration: underline; +} + +#id1 { + background: rgba(255, 255, 255, 0.2); + padding: 5px; +} + +a:hover { + color: green; + text-decoration: none; +} diff --git a/exercises/07-Very-Specific-Rules/index.html b/exercises/07-Very-Specific-Rules/index.html index 9c691446..c1e48a9d 100644 --- a/exercises/07-Very-Specific-Rules/index.html +++ b/exercises/07-Very-Specific-Rules/index.html @@ -19,9 +19,9 @@

3 reasons you know you are learning

3 reasons you know love what you are learning

If you can't sleep, what better than watching videos of cats? diff --git a/exercises/07-Very-Specific-Rules/styles.css b/exercises/07-Very-Specific-Rules/styles.css index defdb77a..819bde3e 100644 --- a/exercises/07-Very-Specific-Rules/styles.css +++ b/exercises/07-Very-Specific-Rules/styles.css @@ -1,4 +1,14 @@ -/** Insert your code here **/ +.r_li { + color: red; +} + +ol li:nth-child(2) { + background-color: green; +} + +table tr:nth-child(odd) { + background-color: yellow; +} /*********** READ ONLY BLOCK ****** You CAN NOT UPDATE anything from here on, diff --git a/exercises/08-Rounded-Image/index.html b/exercises/08-Rounded-Image/index.html index f8637953..dbdc0d0d 100644 --- a/exercises/08-Rounded-Image/index.html +++ b/exercises/08-Rounded-Image/index.html @@ -8,6 +8,6 @@ - +

diff --git a/exercises/08-Rounded-Image/styles.css b/exercises/08-Rounded-Image/styles.css index 62006948..0e5598e7 100644 --- a/exercises/08-Rounded-Image/styles.css +++ b/exercises/08-Rounded-Image/styles.css @@ -4,3 +4,14 @@ body { .rounded { border-radius: 100%; } + +div { + margin: auto; + width: 300px; + height: 300px; + background-image: url("https://assets.breatheco.de/apis/img/funny/einstein.png"); + background-repeat: no-repeat; + background-position-x: center; + background-position-y: 0vmin; + background-size: 300px; +} diff --git a/exercises/09-Anchor-Styles/index.html b/exercises/09-Anchor-Styles/index.html index 984ca01e..30e00691 100644 --- a/exercises/09-Anchor-Styles/index.html +++ b/exercises/09-Anchor-Styles/index.html @@ -6,7 +6,7 @@ 09 Anchor Styles - + Click me diff --git a/exercises/09-Anchor-Styles/styles.css b/exercises/09-Anchor-Styles/styles.css index 7eaa9bea..6ec6f1a1 100644 --- a/exercises/09-Anchor-Styles/styles.css +++ b/exercises/09-Anchor-Styles/styles.css @@ -1,4 +1,3 @@ - .threeDimension { display: block; border: 1px solid; @@ -11,6 +10,5 @@ } a.threeDimension:active { - /* your code here*/ - -} \ No newline at end of file + border-color: #000 #aaa #000; +} diff --git a/exercises/10-Your-Own-Font/index.html b/exercises/10-Your-Own-Font/index.html index a0e7f25a..18fe9dac 100644 --- a/exercises/10-Your-Own-Font/index.html +++ b/exercises/10-Your-Own-Font/index.html @@ -1,15 +1,15 @@ - - - - + + + + + + - - - 10 Your Own Font - - -

My unique font

- + 10 Your Own Font + + +

My unique font

+ diff --git a/exercises/10-Your-Own-Font/styles.css b/exercises/10-Your-Own-Font/styles.css index de7160fd..2b074b6d 100644 --- a/exercises/10-Your-Own-Font/styles.css +++ b/exercises/10-Your-Own-Font/styles.css @@ -1,3 +1,3 @@ .myTitle { - /*your code here*/ + font-family: "caveat", cursive; } diff --git a/exercises/11-Font-Awesome-Icons/index.html b/exercises/11-Font-Awesome-Icons/index.html index a619ff63..93eaf211 100644 --- a/exercises/11-Font-Awesome-Icons/index.html +++ b/exercises/11-Font-Awesome-Icons/index.html @@ -1,14 +1,17 @@ - - - - - 11 Font Awesome - - - - + + + + + + 11 Font Awesome + + + + diff --git a/exercises/12-Relative-Length-EM-REM/styles.css b/exercises/12-Relative-Length-EM-REM/styles.css index bfba63b9..a9f99d39 100644 --- a/exercises/12-Relative-Length-EM-REM/styles.css +++ b/exercises/12-Relative-Length-EM-REM/styles.css @@ -1,8 +1,23 @@ #my-first-div { font-size: 15px; + position: relative; + top: -37px; } #the-second-one { font-size: 25px; } -/* YOUR CODE BELOW THIS LINE */ +div { + border: solid 1px black; + display: inline-block; + padding: 5px; + margin-right: 40px; +} + +h2 { + font-size: 0.8em; +} + +h3 { + font-size: 0.8rem; +} diff --git a/exercises/13-Anchor-Like-Button/index.html b/exercises/13-Anchor-Like-Button/index.html index aaaa7740..bf4a20ee 100644 --- a/exercises/13-Anchor-Like-Button/index.html +++ b/exercises/13-Anchor-Like-Button/index.html @@ -7,6 +7,6 @@ 13 Anchor Like Button - Beautiful Button +
Beautiful Button
diff --git a/exercises/13-Anchor-Like-Button/styles.css b/exercises/13-Anchor-Like-Button/styles.css index 93996cbd..39067d29 100644 --- a/exercises/13-Anchor-Like-Button/styles.css +++ b/exercises/13-Anchor-Like-Button/styles.css @@ -1,7 +1,17 @@ .orange-btn { - /*your code here*/ + padding: 10px; + border-radius: 4px; + background-color: #ff9900; + color: white; + text-decoration: none; } .orange-btn:hover { - /*YOUR CODE HERE FOR THE HOVER STATE*/ + background-color: #cc7a00; +} + +div { + position: relative; + margin-top: 50px; + margin-left: 50px; }
Hello