Skip to content

Commit 12c9e39

Browse files
PapillardPapillard
committed
refacto
1 parent 29acb35 commit 12c9e39

File tree

15 files changed

+573
-214
lines changed

15 files changed

+573
-214
lines changed

‎01-profile-content/README.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
## Background & Objectives
22

3-
A simple challenge to manipulate basic HTML tags and create a profile page with headers/texts/images/tables.
3+
A simple challenge to manipulate basic HTML tags and create a profile page with headers/texts/lists/images/tables.
44

55

66
## Specs
@@ -10,13 +10,13 @@ Build a simple HTML page with the following elements (use the right HTML tags):
1010
- an image of yourself
1111
- a header and sub-header with your name and position
1212
- a description of yourself
13-
- your social links
13+
- a list of your social links
1414
- a table of your favorite movies, sport teams, recipes, etc... depending on your hobbies.
1515

16-
A picture is worth a thousand words, [here is what you should build](http://lewagon.github.io/html-css-challenges/01-profile-content/)
16+
A picture is worth a thousand words, [here is what you should build in this challenge](http://lewagon.github.io/html-css-challenges/01-profile-content/)
1717

1818
## Tips & Resources
1919

20-
- You can use [Font Awesome](http://fortawesome.github.io/Font-Awesome/) to find nice social network icons. It is very convenient since it is a **font of icons**, hence it will be very easy to resize these icons, change their color, and add animations on them!
20+
- You can use [Font Awesome](http://fortawesome.github.io/Font-Awesome/) to find nice icons (e.g. for social networks). It is a very convenient library since it is a **font** of icons (hence it will be very easy to resize these icons, change their color, and add animations on them!)
2121

2222
- Don't forget the page `<title>` in the `<head>` section, and other important metatags like `<meta charset="utf-8">`.

‎01-profile-content/index.html‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,5 @@ <h2>About this page</h2>
9393
</li>
9494
</ul>
9595

96-
97-
9896
</body>
9997
</html>

‎02-fonts-colors/README.md‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,21 @@ Add simple CSS rules to design fonts and colors of your profile page.
66

77
[This is an example](http://lewagon.github.io/html-css-challenges/02-fonts-colors/) of what you should reproduce. Here is a list of CSS rules to write:
88

9-
- Pick a nice background color for the `<body>`, for headers (`<h1>`, `<h2>`, `<h3>`) and for standard texts (`<p>`, `<a>`, `<li>`, etc...)
10-
- Pick a nice font-family for headers and another one for basic texts.
11-
- Choose nice `font-size` and `line-height` for header and basic texts.
9+
10+
### Body
11+
- Pick a nice background color, font family/color/size and line-height for the `<body>`. Setting font properties at the body-level will apply it on all basic texts (`<p>`, `<li>`, etc...).
12+
13+
### Headers
14+
- Choose a nice color and font-family for headers (`<h1>`, `<h2>`, `<h3>`)
15+
- Choose harmonious `font-size` and `line-height` for headers
1216
- Resize image `width`
17+
18+
### Links
19+
- Change links colors & text decoration
1320
- Add some hover effects on links using the pseudo-class `a:hover`.
1421

1522
## Tips & Resources
1623

17-
- Use Colorzilla plugin to pick nice colors from other websites.
24+
- Use Colorzilla plugin to pick nice colors from other websites. You can find inspiration [here](http://www.flatuicolorpicker.com/).
1825
- Pick your fonts on [google fonts](https://www.google.com/fonts)
19-
- For your typo knowledge, **Open Sans** is the standard choice for core texts. **Varela**, **Montserrat** are elegant candidates for headers.
26+
- On Google fonts, **Open Sans** is the standard choice for core texts. **Varela** & **Montserrat** are elegant candidates for headers.

‎03-box-model/README.md‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,18 +7,29 @@ Play with the box model (`margin/border/padding/width/height`) by splitting your
77

88
Here is [your objective](http://lewagon.github.io/html-css-challenges/03-box-model/).
99

10-
- Add `<div>` around profile informations that fit together.
11-
- Adjust the box model (`margin/padding/width`) of your divisions and center them.
12-
- Add a nice touch to your boxes thanks to `background`, `border`, `border-radius` and `box-shadow` CSS properties.
10+
- You should start with the following structure for your page
11+
12+
```html
13+
<div class="container">
14+
<div class="card"></div>
15+
<div class="card"></div>
16+
<div class="card"></div>
17+
<div class="card"></div>
18+
</div>
19+
```
20+
21+
- The `<div id="container">` is here to center its content so that you don't have a full-screen page (which is very ugly).
22+
- The `<div class="card"></div>` are here to display nicely each group of infos that fit together.
23+
- Add a nice touch to these divs thanks to `background`, `border`, `border-radius` and `box-shadow` CSS properties.
1324

1425

1526
## Tips & Resources
1627

17-
Here is the div centering technique
28+
Here is the div centering technique for the main container
1829

1930
```css
2031
div{
21-
width: 300px;
22-
margin: 0 auto;
32+
width: 500px;
33+
margin: 0 auto; /* you can change 0 if your want top-bottom margin */
2334
}
2435
```

‎03-box-model/index.html‎

Lines changed: 84 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -9,93 +9,95 @@
99

1010
<body>
1111

12-
<div>
13-
<img src="../shared/images/boris.jpg" alt="Boris Paillard">
14-
<h1>Boris Paillard</h1>
15-
<h2>CEO @Le Wagon</h2>
12+
<div class="container">
13+
<div class="card">
14+
<img src="../shared/images/boris.jpg" alt="Boris Paillard">
15+
<h1>Boris Paillard</h1>
16+
<h2>CEO @Le Wagon</h2>
1617

17-
<p>
18-
Boris got bored from financial markets and <strong>took the plunge in web-development</strong>. He perfectly understands what beginners need. He founded Le Wagon, and built its site and pedagogical platforms.
19-
</p>
18+
<p>
19+
Boris got bored from financial markets and <strong>took the plunge in web-development</strong>. He perfectly understands what beginners need. He founded Le Wagon, and built its site and pedagogical platforms.
20+
</p>
2021

21-
<a href="">more infos <i class="fa fa-angle-double-right"></i></a>
22-
</div>
22+
<a href="">more infos <i class="fa fa-angle-double-right"></i></a>
23+
</div>
2324

24-
<div>
25-
<ul>
26-
<li>
27-
<a href="#">
28-
<i class="fa fa-facebook"></i> Facebook
29-
</a>
30-
</li>
31-
<li>
32-
<a href="#">
33-
<i class="fa fa-linkedin"></i> Linkedin
34-
</a>
35-
</li>
36-
<li>
37-
<a href="#">
38-
<i class="fa fa-twitter"></i> Twitter
39-
</a>
40-
</li>
41-
</ul>
42-
</div>
25+
<div class="card">
26+
<ul>
27+
<li>
28+
<a href="#">
29+
<i class="fa fa-facebook"></i> Facebook
30+
</a>
31+
</li>
32+
<li>
33+
<a href="#">
34+
<i class="fa fa-linkedin"></i> Linkedin
35+
</a>
36+
</li>
37+
<li>
38+
<a href="#">
39+
<i class="fa fa-twitter"></i> Twitter
40+
</a>
41+
</li>
42+
</ul>
43+
</div>
4344

44-
<div>
45-
<h2>My Favorite movies</h2>
46-
<table>
47-
<tbody>
48-
<tr>
49-
<td>
50-
<img src="../shared/images/space-odyssey.jpg" alt="space odyssey">
51-
</td>
52-
<td>
53-
<h3>2001 - Space Odyssey</h3>
54-
<p>Humanity finds a mysterious, obviously artificial, object buried beneath the Lunar surface and, with the intelligent computer H.A.L. 9000, sets off on a quest.</p>
55-
</td>
56-
</tr>
57-
<tr>
58-
<td>
59-
<img src="../shared/images/monsieur-hulot.jpg" alt="monsieur hulot">
60-
</td>
61-
<td>
62-
<h3>Monsieur Hulot</h3>
63-
<p>Monsieur Hulot comes to a beachside hotel for a vacation, where he accidentally (but good-naturedly) causes havoc.</p>
64-
</td>
65-
</tr>
66-
<tr>
67-
<td>
68-
<img src="../shared/images/alien.jpg" alt="alien">
69-
</td>
70-
<td>
71-
<h3>Alien</h3>
72-
<p>The commercial vessel Nostromo receives a distress call from an unexplored planet. After searching for survivors, the crew heads home only to realize that a deadly bioform has joined them.</p>
73-
</td>
74-
</tr>
75-
</tbody>
76-
</table>
77-
</div>
45+
<div class="card">
46+
<h2>My Favorite movies</h2>
47+
<table>
48+
<tbody>
49+
<tr>
50+
<td>
51+
<img src="../shared/images/space-odyssey.jpg" alt="space odyssey">
52+
</td>
53+
<td>
54+
<h3>2001 - Space Odyssey</h3>
55+
<p>Humanity finds a mysterious, obviously artificial, object buried beneath the Lunar surface and, with the intelligent computer H.A.L. 9000, sets off on a quest.</p>
56+
</td>
57+
</tr>
58+
<tr>
59+
<td>
60+
<img src="../shared/images/monsieur-hulot.jpg" alt="monsieur hulot">
61+
</td>
62+
<td>
63+
<h3>Monsieur Hulot</h3>
64+
<p>Monsieur Hulot comes to a beachside hotel for a vacation, where he accidentally (but good-naturedly) causes havoc.</p>
65+
</td>
66+
</tr>
67+
<tr>
68+
<td>
69+
<img src="../shared/images/alien.jpg" alt="alien">
70+
</td>
71+
<td>
72+
<h3>Alien</h3>
73+
<p>The commercial vessel Nostromo receives a distress call from an unexplored planet. After searching for survivors, the crew heads home only to realize that a deadly bioform has joined them.</p>
74+
</td>
75+
</tr>
76+
</tbody>
77+
</table>
78+
</div>
7879

79-
<div>
80-
<h2>About this page</h2>
81-
This page has been coded during the front-end kit <a href="http://lewagon.org" target="_blank">@LeWagon</a> and that was probably the best experience during my entire life.
82-
<ul>
83-
<li>
84-
<a href="#">
85-
<i class="fa fa-heart"></i>
86-
</a>
87-
</li>
88-
<li>
89-
<a href="#">
90-
<i class="fa fa-share"></i>
91-
</a>
92-
</li>
93-
<li>
94-
<a href="#">
95-
<i class="fa fa-star"></i>
96-
</a>
97-
</li>
98-
</ul>
80+
<div class="card">
81+
<h2>About this page</h2>
82+
This page has been coded during the front-end kit <a href="http://lewagon.org" target="_blank">@LeWagon</a> and that was probably the best experience during my entire life.
83+
<ul>
84+
<li>
85+
<a href="#">
86+
<i class="fa fa-heart"></i>
87+
</a>
88+
</li>
89+
<li>
90+
<a href="#">
91+
<i class="fa fa-share"></i>
92+
</a>
93+
</li>
94+
<li>
95+
<a href="#">
96+
<i class="fa fa-star"></i>
97+
</a>
98+
</li>
99+
</ul>
100+
</div>
99101
</div>
100102

101103
</body>

‎03-box-model/style.css‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -50,12 +50,16 @@ table{
5050
line-height: 1.6em;
5151
}
5252

53-
div{
54-
background: white;
53+
#container{
5554
width: 500px;
55+
margin: 30px auto;
56+
}
57+
58+
.card{
59+
background: white;
5660
text-align: center;
5761
padding: 20px;
58-
margin: 30px auto;
62+
margin-bottom: 20px;
5963
border-radius: 4px;
6064
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
6165
}

‎04-advanced-selectors/README.md‎

Lines changed: 40 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,54 @@ Use advanced selectors (id, class, grouping, descendant selectors) to fine-tune
44

55
## Specs
66

7-
Here is [your objective](http://lewagon.github.io/html-css-challenges/04-advanced-selectors/). Any time you want to name an element of your page, ask yourself:
7+
Here is [your objective](http://lewagon.github.io/html-css-challenges/04-advanced-selectors/). Any time you want to **name** an element of your page, ask yourself:
88

9-
- Should I use a `class` or an `id`?
9+
- Should I use a `class` or an `id`? Is is unique or re-usable?
1010
- What name should I pick for my class?
11+
- Should I split this design into different classes
1112

12-
Try to use **generic class names** as much as you can. Think **modularity** & **re-usability**. Try to step back from the page you're coding when choosing class names. Consider each CSS class as nice re-usable design that is not only linked to your current page but that will be re-used everywhere on your website. Getting this mindset is often the main difficulty for CSS beginners.
13+
Herebelow is an example of **very poor** CSS choices:
14+
15+
```css
16+
#home-page-first-image {
17+
border-radius: 50%;
18+
}
19+
.card{
20+
text-align: center;
21+
background: white;
22+
padding: 30px;
23+
border: 1px solid lightgrey;
24+
}
25+
```
26+
27+
And here is the **good version** of it
28+
29+
```css
30+
.img-circle {
31+
border-radius: 50%;
32+
}
33+
.text-center{
34+
text-align: center;
35+
}
36+
.card {
37+
background: white;
38+
padding: 30px;
39+
border: 1px solid lightgrey;
40+
}
41+
```
42+
43+
Making an image circle and centering texts are very common design tasks. They deserve their own re-usable classes!
44+
45+
Don't repeat yourself. Try to use **generic class names** as much as you can. Consider each CSS class as a nice re-usable design that is not only linked to the current page but that you can also use everywhere on your website. Getting this mindset is often the main difficulty for CSS beginners.
1346

1447
## Tips & Resources
1548

16-
To design your lists of icons, you should change the `block` behavior of list items by inlining them. The problem with 100% `inline` elements is that their width automatically fits their content so that you cannot change it. To keep control on list item width, make them `inline-block` elements. Such elements cumulate inline behavior but and box model properties (like `width`), yeah! Here are the corresponding CSS rules.
49+
To design your lists of icons, you'll have to change the `block` behavior of list items by **inlining them**. The problem with `inline` elements is that their width automatically fits their content and cannot be set. To keep control on list item width, make them `inline-block` elements. `inline-block` elements cumulate inline behavior (no line-breaks before and after) and block properties (like `width`), yeah!
50+
51+
Here are the corresponding CSS rules.
1752

1853
```css
19-
ul > li{
54+
.list-inline > li{
2055
display: inline-block;
2156
width: 90px;
2257
}

0 commit comments

Comments
 (0)