Skip to content

revision of exercises #12

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Dec 1, 2020
Merged

revision of exercises #12

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8d7fc2b
revision of exercises
ElviraQDP Nov 11, 2020
4f55d30
revision of exercises
ElviraQDP Nov 11, 2020
15c0011
Merge branch 'checks' of https://github.com/ElviraQDP/css-tutorial-ex…
ElviraQDP Nov 11, 2020
65b2cc4
test and exerises checked
ElviraQDP Nov 11, 2020
2199cb9
ALe's comments added
ElviraQDP Nov 18, 2020
File filter

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions .learn/resets/04.1-Combined-Rules/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
.what {
width: 50px;
height: 50px;
padding-top: 10px;
padding-left: 30px;
padding-right: 190px;
padding-bottom: 50px;
/* padding: 10px 30px 50px 190px; */
background: rgb(189, 189, 189);
background-image: url(https://assets.breatheco.de/apis/img/funny/baby.jpg);
background-position-x: 100px;
background-repeat: no-repeat;
background-size: contain;
}
13 changes: 13 additions & 0 deletions .learn/resets/04.2-Apply-several-classes/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="./styles.css" />
<title>
04 Class selector
</title>
</head>

<body>
<div class="card spades">9</div>
</body>
</html>
13 changes: 13 additions & 0 deletions .learn/resets/04.3-id-Selector/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="./styles.css" />
<title>
04.3 ID selector
</title>
</head>

<body>
<span>I should look like a button</span>
</body>
</html>
5 changes: 5 additions & 0 deletions .learn/resets/04.3-id-Selector/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
#button1 {
background: #BDBDBD;
border: #5E5E5E;
border-radius: 5px;
}
18 changes: 18 additions & 0 deletions .learn/resets/05-Specificity/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" type="text/css" href="./styles.css" />
<title>05 Specificity</title>
</head>
<body>
<ul>
<li>My first item of the list</li>
<li>My second item of the list</li>
<li id="thirditem">My third item of the list</li>
<li>My forth item of the list</li>
<li>My fifth item of the list</li>
</ul>
</body>
</html>
9 changes: 9 additions & 0 deletions .learn/resets/05-Specificity/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
ul li{
background: blue;
}

#thirditem{
background: yellow;
}
/****** DON NOT EDIT ANYTHING ABOVE THIS LINE ****/

1 change: 1 addition & 0 deletions .learn/resets/06-Practicing-Rules/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
//nothing to see here
Empty file added .learn/resets/06-Practicing-Rules/styles.css
View file
Open in desktop
Empty file.
82 changes: 82 additions & 0 deletions .learn/resets/07-Very-Specific-Rules/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" type="text/css" href="./styles.css" />
<title>07 Very Specific Rules</title>
</head>
<body>
<h1>The learning essay</h1>
<h2>3 reasons you know you are learning</h2>
<p id="id1">
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.
</p>
<ol>
<li>You are able to complete the exercises by yourself.</li>
<li>You understand what the teacher is talking about</li>
<li>Your are able to have conversations about the topic</li>
</ol>
<h2>3 reasons you know love what you are learning</h2>
<ul>
<li>Time passes fast.</li>
<li>You are anxious to finish this excercise and start the next one.</li>
<li>Is 12am and you don't want to go to sleep.</li>
</ul>
<p>
If you can't sleep, what better than watching videos of cats?
<a href="https://www.youtube.com/watch?v=WEgWMOzQ8IE">click here</a>
</p>

<table>
<tr>
<td>Age</td>
<td>Gender</td>
</tr>
<tr>
<td>12 years</td>
<td>Male</td>
</tr>
<tr>
<td>22 years</td>
<td>Female</td>
</tr>
<tr>
<td>11 years</td>
<td>Male</td>
</tr>
<tr>
<td>21 years</td>
<td>Male</td>
</tr>
<tr>
<td>22 years</td>
<td>Female</td>
</tr>
<tr>
<td>10 years</td>
<td>Male</td>
</tr>
<tr>
<td>13 years</td>
<td>Female</td>
</tr>
<tr>
<td>13 years</td>
<td>Male</td>
</tr>
<tr>
<td>10 years</td>
<td>Male</td>
</tr>
<tr>
<td>11 years</td>
<td>Male</td>
</tr>
<tr>
<td>11 years</td>
<td>Male</td>
</tr>
</table>
</body>
</html>
15 changes: 15 additions & 0 deletions .learn/resets/07-Very-Specific-Rules/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
/** Insert your code here **/

/*********** READ ONLY BLOCK ******
You CAN NOT UPDATE anything from here on,
only add lines of code on top of this lines
**/

body {
color: blue;
}

ul li,
ol li {
color: green;
}
13 changes: 13 additions & 0 deletions .learn/resets/08-Rounded-Image/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" type="text/css" href="./styles.css" />
<title>08 Rounded Image</title>
</head>

<body>
<img class="rounded" src="https://assets.breatheco.de/apis/img/funny/einstein.png" />
</body>
</html>
6 changes: 6 additions & 0 deletions .learn/resets/08-Rounded-Image/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
body {
background: #bdbdbd;
}
.rounded {
border-radius: 100%;
}
13 changes: 13 additions & 0 deletions .learn/resets/09-Anchor-Styles/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" type="text/css" href="./styles.css" />
<title>09 Anchor Styles</title>
</head>

<body>
<a class="threeDimension" href="#">Click me</a>
</body>
</html>
16 changes: 16 additions & 0 deletions .learn/resets/09-Anchor-Styles/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@

.threeDimension {
display: block;
border: 1px solid;
border-color: #aaa #000 #000 #aaa;
width: 8em;
background: #fc0;
text-decoration: none;
text-align: center;
color: black;
}

a.threeDimension:active {
/* your code here*/

}
15 changes: 15 additions & 0 deletions .learn/resets/10-Your-Own-Font/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<!--your code here -->

<link rel="stylesheet" type="text/css" href="./styles.css" />

<title>10 Your Own Font</title>
</head>
<body>
<h1 class="myTitle">My unique font</h1>
</body>
</html>
3 changes: 3 additions & 0 deletions .learn/resets/10-Your-Own-Font/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.myTitle {
/*your code here*/
}
14 changes: 14 additions & 0 deletions .learn/resets/11-Font-Awesome-Icons/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" type="text/css" href="./styles.css" />
<title>11 Font Awesome</title>
</head>
<body>
<ul>
<li><i class="fa fa-camera-retro"></i> Hello</li>
</ul>
</body>
</html>
3 changes: 3 additions & 0 deletions .learn/resets/11-Font-Awesome-Icons/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
li {
list-style: none;
}
21 changes: 21 additions & 0 deletions .learn/resets/12-Relative-Length-EM-REM/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" type="text/css" href="./styles.css" />
<title>12 Relative Length EM REM</title>
</head>
<body>
<div id="my-first-div">
<h2>First h2 heading</h2>
<h3>First h3 heading</h3>
<p>Here is some nice fake content</p>
</div>
<div id="the-second-one">
<h2>Second h2 heading</h2>
<h3>Second h3 heading</h3>
<p>More fake content but now in the second container</p>
</div>
</body>
</html>
8 changes: 8 additions & 0 deletions .learn/resets/12-Relative-Length-EM-REM/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
#my-first-div {
font-size: 15px;
}
#the-second-one {
font-size: 25px;
}

/* YOUR CODE BELOW THIS LINE */
12 changes: 12 additions & 0 deletions .learn/resets/13-Anchor-Like-Button/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" type="text/css" href="./styles.css" />
<title>13 Anchor Like Button</title>
</head>
<body>
<a href="#" class="orange-btn">Beautiful Button</a>
</body>
</html>
7 changes: 7 additions & 0 deletions .learn/resets/13-Anchor-Like-Button/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
.orange-btn {
/*your code here*/
}

.orange-btn:hover {
/*YOUR CODE HERE FOR THE HOVER STATE*/
}
31 changes: 31 additions & 0 deletions exercises/00-Welcome/README.es.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
---
intro: "https://www.youtube.com/watch?v=BDKdUPDez-U"
---

# ¡¡Bienvenido a los ejercicios de CSS!!

Mi nombre es Alejandro Sanchez [@alesanchezr](https://twitter.com/alesanchezr) ¡Estoy muy contento de que estén aquí! 🎉 😂
Aprender a programar es dificil ¡Necesitas coaching! Envíame un DM vía Twitter si tienes alguna pregunta.

Durante este curso aprenderás los siguientes conceptos:

1. Cómo aplicar CSS a tu sitio web de tres formas diferentes:
Inline, agrupando todo dentro de la etiqueta `<style>` o usando una hoja de estilos externa `<link>`,
2. Seleccionar elementos HTML para tu sitio web para aplicarle estilos,
3. Aplicarle reglas CSS (estilos) a esos elementos,
4. A usar las reglas CSS más populares,
5. Aprender los trucos más populares de CSS.

Como te habrás dado cuenta, HTML sólo te permite crear sitios web básicos. Nadie quiere ver un sitio web en blanco con un texto horrible. ¡Así que es hora de aprender CSS! Aprende CSS para que tu sitio web sea hermoso ¡Hagámos que brille!

## Colaboradores

Muchas gracias a estas personas maravillosas ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):

1. [Alejandro Sanchez (alesanchezr)](https://github.com/alesanchezr), contribución: (programador) :computer: (idea) 🤔, (build-tests) :warning:, (pull-request-review) :eyes: (build-tutorial) :white_check_mark: (documentation) :book:
1. [Paolo Lucano (plucodev)](https://github.com/plucodev), contribución: (programador), (build-tests) :warning:

Este proyecto sigue las especificaciones
[all-contributors](https://github.com/kentcdodds/all-contributors)
¡Todas las contribuciones son bienvenidas!

2 changes: 1 addition & 1 deletion exercises/00-Welcome/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ Learning to code is hard, you need coaching! DM me on twitter if you have any qu

During this course you will be learning the following concepts:

1. Using how to apply CSS to your website in 3 different ways: Inline, by grouping them together inside a `<style>` tag or using an exeternal stylesheet `<link>`,
1. How to apply CSS to your website in 3 different ways: Inline, by grouping them together inside a `<style>` tag or using an exeternal stylesheet `<link>`,
2. Selecting HTML Elements from your website to apply the styles to.
3. Apply CSS Rules (styles) to those elements.
4. Use the most popular CSS Rules.
Expand Down
Loading