+ 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. +

Hello!

World!

+
• My first item of the list
+
• My second item of the list
+
• My third item of the list
+
• My forth item of the list
+
• My fifth item of the list
+

The learning essay

3 reasons you know you are learning

+ We are going to explain in this pharagraph the 3 most comon signs that you should look into yourself to recognize if you are learning. +

+
1. You are able to complete the exercises by yourself.
+
2. You understand what the teacher is talking about
+
3. Your are able to have conversations about the topic
+

3 reasons you know love what you are learning

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

+ If you can't sleep, what better than watching videos of cats? + click here +

The learning essay

3 reasons you know you are learning

+ We are going to explain in this pharagraph the 3 most comon signs that you should look into yourself to recognize if you are learning. +

+
1. You are able to complete the exercises by yourself.
+
2. You understand what the teacher is talking about
+
3. Your are able to have conversations about the topic
+

3 reasons you know love what you are learning

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

+ If you can't sleep, what better than watching videos of cats? + click here +

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 2dec7923..3907bb3c 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..2172e465 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-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..c966009c 100644 --- a/exercises/04-Class-Selector/index.html +++ b/exercises/04-Class-Selector/index.html @@ -2,13 +2,12 @@ - + -

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..d7c97c80 100644 --- a/exercises/04.1-Combined-Rules/styles.css +++ b/exercises/04.1-Combined-Rules/styles.css @@ -5,10 +5,14 @@ padding-left: 30px; padding-right: 190px; padding-bottom: 50px; + padding: 10px 190px 50px 30px; - background: rgb(189, 189, 189); + 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; background-size: contain; + background: rgb(189, 189, 189) + url(https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/3a2d1dd03f58167a5a4894155af2d3aa4d41d647/.learn/assets/baby.jpg?raw=true) + 100px no-repeat; } 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..fa9b8a90 100644 --- a/exercises/05-Specificity/styles.css +++ b/exercises/05-Specificity/styles.css @@ -1,9 +1,9 @@ -ul li{ +ul li { background: blue; } -#thirditem{ +#thirditem { background: yellow; -} + background-color: green !important; +} /****** DON NOT EDIT ANYTHING ABOVE THIS LINE ****/ - \ No newline at end of file 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..308a5ee8 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 +/* add your styles here */ +body { + background: url("../../.learn/assets/background-vertical.jpg?raw=true") repeat-y; + padding-left: 20px; + font-family: "Times New Roman", Times, serif; +} + +h1 { + color: red; + text-align: center; + font-family: "Courier New", Courier, monospace !important; +} + +h2 { + text-decoration: underline; +} + +#id1 { + background: rgba(255, 255, 255, 0.2); + padding: 5px 5px 5px 5px; +} + +a:hover { + color: green; + text-decoration: none; +} diff --git a/exercises/07-Very-Specific-Rules/styles.css b/exercises/07-Very-Specific-Rules/styles.css index defdb77a..5ee48ece 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 **/ +ul { + color: red !important; +} + +ol > li:nth-child(2) { + background-color: green; +} +tr:nth-child(2) { + background-color: yellow; +} /*********** READ ONLY BLOCK ****** You CAN NOT UPDATE anything from here on, only add lines of code on top of this lines From 86de257aaa7e989df5cfd8e911b07b05450d93e9 Mon Sep 17 00:00:00 2001 From: David Inostroza Date: Wed, 30 Mar 2022 15:15:01 +0000 Subject: [PATCH 2/2] ejercicios css 2 --- .learn/resets/08-Rounded-Image/index.html | 13 +++++++++++ .learn/resets/09-Anchor-Styles/index.html | 13 +++++++++++ .learn/resets/10-Your-Own-Font/index.html | 15 +++++++++++++ .../resets/11-Font-Awesome-Icons/index.html | 15 +++++++++++++ .../12-Relative-Length-EM-REM/index.html | 21 ++++++++++++++++++ .../resets/13-Anchor-Like-Button/index.html | 12 ++++++++++ exercises/07-Very-Specific-Rules/styles.css | 6 ++--- exercises/08-Rounded-Image/styles.css | 4 ++++ exercises/09-Anchor-Styles/index.html | 2 +- exercises/09-Anchor-Styles/styles.css | 5 ++--- exercises/10-Your-Own-Font/index.html | 22 +++++++++---------- exercises/10-Your-Own-Font/styles.css | 2 +- exercises/11-Font-Awesome-Icons/index.html | 2 ++ .../12-Relative-Length-EM-REM/styles.css | 8 +++++++ exercises/13-Anchor-Like-Button/index.html | 2 +- exercises/13-Anchor-Like-Button/styles.css | 8 ++++++- 16 files changed, 129 insertions(+), 21 deletions(-) create mode 100644 .learn/resets/08-Rounded-Image/index.html create mode 100644 .learn/resets/09-Anchor-Styles/index.html create mode 100644 .learn/resets/10-Your-Own-Font/index.html create mode 100644 .learn/resets/11-Font-Awesome-Icons/index.html create mode 100644 .learn/resets/12-Relative-Length-EM-REM/index.html create mode 100644 .learn/resets/13-Anchor-Like-Button/index.html diff --git a/.learn/resets/08-Rounded-Image/index.html b/.learn/resets/08-Rounded-Image/index.html new file mode 100644 index 00000000..95931a07 --- /dev/null +++ b/.learn/resets/08-Rounded-Image/index.html @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/.learn/resets/09-Anchor-Styles/index.html b/.learn/resets/09-Anchor-Styles/index.html new file mode 100644 index 00000000..984ca01e --- /dev/null +++ b/.learn/resets/09-Anchor-Styles/index.html @@ -0,0 +1,13 @@ + + + + + + + + + + + Click me + + diff --git a/.learn/resets/10-Your-Own-Font/index.html b/.learn/resets/10-Your-Own-Font/index.html new file mode 100644 index 00000000..a0e7f25a --- /dev/null +++ b/.learn/resets/10-Your-Own-Font/index.html @@ -0,0 +1,15 @@ + + + + + + + + + + + + +

My unique font

+ + diff --git a/.learn/resets/11-Font-Awesome-Icons/index.html b/.learn/resets/11-Font-Awesome-Icons/index.html new file mode 100644 index 00000000..b3533f72 --- /dev/null +++ b/.learn/resets/11-Font-Awesome-Icons/index.html @@ -0,0 +1,15 @@ + + + + + + + + + + +

+
• Hello
+

+ + diff --git a/.learn/resets/12-Relative-Length-EM-REM/index.html b/.learn/resets/12-Relative-Length-EM-REM/index.html new file mode 100644 index 00000000..60a98594 --- /dev/null +++ b/.learn/resets/12-Relative-Length-EM-REM/index.html @@ -0,0 +1,21 @@ + + + + + + + + + +

+

First h2 heading

+

First h3 heading

+

Here is some nice fake content

+

+

+

Second h2 heading

+

Second h3 heading

+

More fake content but now in the second container

+

+ + diff --git a/.learn/resets/13-Anchor-Like-Button/index.html b/.learn/resets/13-Anchor-Like-Button/index.html new file mode 100644 index 00000000..aaaa7740 --- /dev/null +++ b/.learn/resets/13-Anchor-Like-Button/index.html @@ -0,0 +1,12 @@ + + + + + + + + + + Beautiful Button + + diff --git a/exercises/07-Very-Specific-Rules/styles.css b/exercises/07-Very-Specific-Rules/styles.css index 5ee48ece..9773a922 100644 --- a/exercises/07-Very-Specific-Rules/styles.css +++ b/exercises/07-Very-Specific-Rules/styles.css @@ -1,13 +1,13 @@ /** Insert your code here **/ -ul { +ul li { color: red !important; } -ol > li:nth-child(2) { +ol li:nth-child(2) { background-color: green; } -tr:nth-child(2) { +tr:nth-child(2n + 1) { background-color: yellow; } /*********** READ ONLY BLOCK ****** diff --git a/exercises/08-Rounded-Image/styles.css b/exercises/08-Rounded-Image/styles.css index 62006948..0ffd2972 100644 --- a/exercises/08-Rounded-Image/styles.css +++ b/exercises/08-Rounded-Image/styles.css @@ -3,4 +3,8 @@ body { } .rounded { border-radius: 100%; + object-fit: cover; + object-position: 50% 0%; + width: 300px; + height: 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 @@ - + Click me diff --git a/exercises/09-Anchor-Styles/styles.css b/exercises/09-Anchor-Styles/styles.css index 7eaa9bea..9856049d 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; @@ -12,5 +11,5 @@ a.threeDimension:active { /* your code here*/ - -} \ No newline at end of file + border-color: #000 #aaa #aaa #000; /* cuando esta activo lo hago */ +} diff --git a/exercises/10-Your-Own-Font/index.html b/exercises/10-Your-Own-Font/index.html index a0e7f25a..2f10a051 100644 --- a/exercises/10-Your-Own-Font/index.html +++ b/exercises/10-Your-Own-Font/index.html @@ -1,15 +1,15 @@ - - - - + + + + - - - - - -

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..78966405 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: Hurricane; /* acá llamo a la google font para la clase myTitle */ } diff --git a/exercises/11-Font-Awesome-Icons/index.html b/exercises/11-Font-Awesome-Icons/index.html index b3533f72..bc76cd39 100644 --- a/exercises/11-Font-Awesome-Icons/index.html +++ b/exercises/11-Font-Awesome-Icons/index.html @@ -10,6 +10,8 @@

• Hello
+
• Kernel panic
+
• Peter veneno

diff --git a/exercises/12-Relative-Length-EM-REM/styles.css b/exercises/12-Relative-Length-EM-REM/styles.css index bfba63b9..87e9d6f1 100644 --- a/exercises/12-Relative-Length-EM-REM/styles.css +++ b/exercises/12-Relative-Length-EM-REM/styles.css @@ -6,3 +6,11 @@ } /* YOUR CODE BELOW THIS LINE */ + +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..3c0ee9cf 100644 --- a/exercises/13-Anchor-Like-Button/index.html +++ b/exercises/13-Anchor-Like-Button/index.html @@ -7,6 +7,6 @@ - Beautiful Button + Beautiful Button diff --git a/exercises/13-Anchor-Like-Button/styles.css b/exercises/13-Anchor-Like-Button/styles.css index 93996cbd..21409866 100644 --- a/exercises/13-Anchor-Like-Button/styles.css +++ b/exercises/13-Anchor-Like-Button/styles.css @@ -1,7 +1,13 @@ .orange-btn { /*your code here*/ + padding: 10px 10px 10px 10px; /*padding de 10px a cada lado, recordar que parte clockwise */ + border-radius: 4px; /*redondeo*/ + background-color: rgb(243, 156, 18); /*color según color picker */ + text-decoration: none; /*sin subrayado*/ + color: white; /*color del texto*/ } .orange-btn:hover { - /*YOUR CODE HERE FOR THE HOVER STATE*/ + /*selector hover*/ + background-color: darkorange; /*más oscuro*/ }

Hello