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.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..1b87ed9d 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..d7cf32a7 100644 --- a/exercises/02-Separate-Stylesheet/styles.css +++ b/exercises/02-Separate-Stylesheet/styles.css @@ -1,4 +1,3 @@ -/* your styles here: - 1. Select the body tag. - 2. Add the background rule equal to blue. - */ +body { + background-color: 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..4753103a 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..60e1d67f 100644 --- a/exercises/04-Class-Selector/index.html +++ b/exercises/04-Class-Selector/index.html @@ -2,13 +2,11 @@ - + -

Hello!

-

World!

+

Hello!

+

World!

diff --git a/exercises/04.1-Combined-Rules/index.html b/exercises/04.1-Combined-Rules/index.html index 2af5a24c..50078b73 100644 --- a/exercises/04.1-Combined-Rules/index.html +++ b/exercises/04.1-Combined-Rules/index.html @@ -2,9 +2,7 @@ - + diff --git a/exercises/04.1-Combined-Rules/styles.css b/exercises/04.1-Combined-Rules/styles.css index 6313a1bc..a5a9bbf0 100644 --- a/exercises/04.1-Combined-Rules/styles.css +++ b/exercises/04.1-Combined-Rules/styles.css @@ -1,14 +1,10 @@ .myBox { width: 50px; height: 50px; - padding-top: 10px; - padding-left: 30px; - padding-right: 190px; - padding-bottom: 50px; - background: rgb(189, 189, 189); - background-image: url(https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/3a2d1dd03f58167a5a4894155af2d3aa4d41d647/.learn/assets/baby.jpg?raw=true); - background-position-x: 100px; - background-repeat: no-repeat; + padding: 10px 30px 50px 190px; + + background: rgb(189, 189, 189) no-repeat 100px + url(https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/3a2d1dd03f58167a5a4894155af2d3aa4d41d647/.learn/assets/baby.jpg?raw=true); 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..20b473e9 100644 --- a/exercises/04.2-Apply-several-classes/index.html +++ b/exercises/04.2-Apply-several-classes/index.html @@ -2,12 +2,10 @@ - + -

9

+

9

diff --git a/exercises/04.3-id-Selector/index.html b/exercises/04.3-id-Selector/index.html index 5b9a773d..c98c7cc3 100644 --- a/exercises/04.3-id-Selector/index.html +++ b/exercises/04.3-id-Selector/index.html @@ -2,12 +2,10 @@ - + - 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/styles.css b/exercises/05-Specificity/styles.css index db471c2b..112d1a7a 100644 --- a/exercises/05-Specificity/styles.css +++ b/exercises/05-Specificity/styles.css @@ -1,9 +1,12 @@ -ul li{ +ul li { background: blue; } -#thirditem{ +#thirditem { background: yellow; -} +} /****** DON NOT EDIT ANYTHING ABOVE THIS LINE ****/ - \ No newline at end of file + +body > ul > li#thirditem { + background: green; +} diff --git a/exercises/06-Practicing-Rules/index.html b/exercises/06-Practicing-Rules/index.html index 4119acb5..db2eb563 100644 --- a/exercises/06-Practicing-Rules/index.html +++ b/exercises/06-Practicing-Rules/index.html @@ -21,9 +21,7 @@

3 reasons you know you are learning

3 reasons you know love what you are learning

• Time passes fast.
-
• - You are anxious to finish this excercise and start the next one. -
+
• You are anxious to finish this excercise and start the next one.
• Is 12am and you don't want to go to sleep.

@@ -31,4 +29,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..7a744d9f 100644 --- a/exercises/06-Practicing-Rules/styles.css +++ b/exercises/06-Practicing-Rules/styles.css @@ -1 +1,28 @@ -/* add your styles here */ \ No newline at end of file +* { + font-family: "Times New Roman", Times, serif; +} + +body { + background-image: url(https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/master/.learn/assets/background-vertical.jpg?raw=true); + background-repeat: repeat-y; + padding-left: 20px; +} +h1 { + font-family: "Courier New", Courier, monospace; + color: red; + text-align: center; +} + +h2 { + text-decoration: underline; +} + +a:hover { + color: green; + text-decoration: none; +} + +p#id1 { + background-color: rgba(255, 255, 255, 0.2); + padding: 5px; +} diff --git a/exercises/07-Very-Specific-Rules/styles.css b/exercises/07-Very-Specific-Rules/styles.css index defdb77a..a405056d 100644 --- a/exercises/07-Very-Specific-Rules/styles.css +++ b/exercises/07-Very-Specific-Rules/styles.css @@ -1,5 +1,15 @@ /** Insert your code here **/ +body > ul > li { + color: red; +} + +ol > li:nth-child(2) { + background-color: green; +} +tr:nth-child(odd) { + background-color: yellow; +} /*********** READ ONLY BLOCK ****** You CAN NOT UPDATE anything from here on, only add lines of code on top of this lines diff --git a/exercises/08-Rounded-Image/styles.css b/exercises/08-Rounded-Image/styles.css index 62006948..41c6d3a0 100644 --- a/exercises/08-Rounded-Image/styles.css +++ b/exercises/08-Rounded-Image/styles.css @@ -3,4 +3,8 @@ body { } .rounded { border-radius: 100%; + width: 200px; + height: 200px; + object-fit: cover; + object-position: 0px 0px; } 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 @@ - + Click me diff --git a/exercises/09-Anchor-Styles/styles.css b/exercises/09-Anchor-Styles/styles.css index 7eaa9bea..f977060d 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 #aaa #000; +} diff --git a/exercises/10-Your-Own-Font/index.html b/exercises/10-Your-Own-Font/index.html index a0e7f25a..4d37c739 100644 --- a/exercises/10-Your-Own-Font/index.html +++ b/exercises/10-Your-Own-Font/index.html @@ -1,15 +1,16 @@ - - - - + + + + + + + - - - - - -

My unique font

- + + + +

My unique font

+ diff --git a/exercises/10-Your-Own-Font/styles.css b/exercises/10-Your-Own-Font/styles.css index de7160fd..4b3212c3 100644 --- a/exercises/10-Your-Own-Font/styles.css +++ b/exercises/10-Your-Own-Font/styles.css @@ -1,3 +1,4 @@ .myTitle { /*your code here*/ + font-family: "Viaoda Libre", cursive; } diff --git a/exercises/11-Font-Awesome-Icons/index.html b/exercises/11-Font-Awesome-Icons/index.html index a619ff63..9cda9922 100644 --- a/exercises/11-Font-Awesome-Icons/index.html +++ b/exercises/11-Font-Awesome-Icons/index.html @@ -1,14 +1,17 @@ - - - - - - - -

-
• Hello
-

- + + + + + + + + +

+
• Hello
+
• Witch
+
• Frog
+

+ diff --git a/exercises/12-Relative-Length-EM-REM/styles.css b/exercises/12-Relative-Length-EM-REM/styles.css index bfba63b9..c524cf3e 100644 --- a/exercises/12-Relative-Length-EM-REM/styles.css +++ b/exercises/12-Relative-Length-EM-REM/styles.css @@ -6,3 +6,10 @@ } /* YOUR CODE BELOW THIS LINE */ +h2 { + font-size: 0.8em; +} + +h3 { + font-size: 0.8rem; +} diff --git a/exercises/13-Anchor-Like-Button/styles.css b/exercises/13-Anchor-Like-Button/styles.css index 93996cbd..c8e5b414 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: rgb(255, 174, 0); + text-decoration: none; + color: white; } .orange-btn:hover { /*YOUR CODE HERE FOR THE HOVER STATE*/ + padding: 9px; + border-radius: 4px; + background-color: rgb(214, 146, 0); + text-decoration: none; + color: white; }

Hello