better readme

Author: Papillard

03-box-model/README.md

@@ -10,7 +10,7 @@ Here is [your objective](http://lewagon.github.io/html-css-challenges/03-box-mod
 - You should start with the following structure for your page
 
 ```html
-<div class="container">
+<div id="container">
   <div class="card"></div>
   <div class="card"></div>
   <div class="card"></div>

04-advanced-selectors/README.md

@@ -51,8 +51,16 @@ To design your lists of icons, you'll have to change the `block` behavior of lis
 Here are the corresponding CSS rules.
 
 ```css
-.list-inline > li{
+.list-inline > li {
   display: inline-block;
   width: 90px;
 }
+```
+
+**Another CSS trick**: even inline, a list keeps a left padding that you should kill.
+
+```css
+.list-inline {
+  padding-left: 0px;
+}
 ```

05-fixed-sidebar/README.md

@@ -1,25 +1,27 @@
 ## Background & Objectives
 
-Build a cool layout with fixed sidebar and scrollable page content.
+Build a nice layout with a fixed sidebar and a scrollable page content.
 
 ## Specs
 
 Here is [your objective](http://lewagon.github.io/html-css-challenges/05-fixed-sidebar/).
 
 ## Tips & Resources
 
-Sometimes you need internal links, refering to sections of your current page, not to other pages. You can code them like this:
+Sometimes you need internal links, referring to sections of your page, not to other pages of your site. Here is how you do that:
 
 ```html
 <!-- In your nav list -->
 <a href="#summary">Infos</a>
 <a href="#favorite-movies">Movies</a>
 <a href="#help">Infos</a>
 
+<!-- [...] -->
+
 <!-- Now in your page content -->
 <div id="summary">your summary</div>
 <div id="favorite-movies">your favorite movies</div>
 <div id="help">some help section</div>
 ```
 
-Later on we will add smoothscroll animations on internal links. That will be good stuff!
+Later on, we will add a nice smoothscroll effect on such links. But wait for next week!

05-fixed-sidebar/style.css

@@ -48,7 +48,7 @@ a:hover{
 .card{
   background: white;
   text-align: center;
-  padding: 20px;
+  padding: 30px 50px;
   margin-bottom: 20px;
   border-radius: 4px;
   box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
@@ -110,11 +110,9 @@ a:hover{
 /* Fixed sidebar layout */
 
 #content{
-  width: 80%;
-  padding-left: 5%;
-  padding-right: 5%;
   position: relative;
-  left: 10%;
+  margin-left: 120px;
+  padding: 20px 60px;
 }
 
 #sidebar {
@@ -123,7 +121,7 @@ a:hover{
   background-color: #384047;
   top: 0px;
   bottom: 0px;
-  width: 10%;
+  width: 120px;
   text-align: center;
 }
 

06-profile-dashboard/README.md

@@ -1,16 +1,25 @@
 ## Background & Objectives
 
 Create a cool profile dashboard by inserting your infos into a nice 2D layout. You'll
-have to use most standard CSS positionning techniques.
+have to use a lot of CSS positionning techniques.
 
 ## Specs
 
 Here is [the objective](http://lewagon.github.io/html-css-challenges/06-profile-dashboard/). Before inserting your different profile informations into the layout, start by building this layout step-by-step :
 
-1. Create and position the main centered container.
-1. Then, add two floating `<div>` into this container. In order to get the main container wrap these two div, you'll have to use a third div with `clear: both;` CSS property (this is a classic CSS trick).
-1. Below the two floating div, add the bottom footer division. Notice the absolute position of the icon list at bottom-right of this footer div. You will have to use a `relative > absolute` CSS pattern to get this result.
+- Create and center the main container.
+- Add two floating `<div>` into this container. In order to get the main container wrap these two div, you'll have to use a third div with `clear: both;` CSS property after the two floating ones (this is a classic CSS trick).
 
-## Deploy
 
-Your turn! Don't forget to **commit and deploy your code using Github app**.
+```html
+<div id="container">
+  <div id="left"></div>
+  <div id="right"></div>
+  <div class="clear"></div>
+  <div id="footer">
+    <ul class="list-inline"></ul>
+  </div>
+</div>
+```
+
+- Finally, add the bottom footer division. Notice the absolute position of the icon list at bottom-right of this footer div. You will have to use a `relative > absolute` CSS pattern to obtain such result.

06-profile-dashboard/index.html

@@ -10,22 +10,18 @@
   <body>
 
     <div id="wrapper">
-
       <div id="left-container">
         <div class="card text-center">
           <img src="../shared/images/boris.jpg" alt="Boris Paillard" id="img-profile" class="img-circle">
           <h1>Boris Paillard</h1>
           <h2>CEO @Le Wagon</h2>
-
           <p>
             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.
           </p>
-
           <a href="" class="btn-danger">more infos <i class="fa fa-angle-double-right"></i></a>
         </div>
-
         <div class="card text-center">
-          <ul class="nav-icons">
+          <ul class="list-inline">
             <li class="text-center">
               <a href="#">
                 <i class="fa fa-facebook"></i> <br>Facebook
@@ -44,7 +40,6 @@ <h2>CEO @Le Wagon</h2>
           </ul>
         </div>
       </div>
-
       <div id="right-container" class="card">
         <h2>My Favorite movies</h2>
         <table id="movies">
@@ -79,35 +74,29 @@ <h3>Alien</h3>
           </tbody>
         </table>
       </div>
-
       <div class="clear">
       </div>
-
       <div class="card" id="footer">
         <h2>About this page</h2>
         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.
-        <div class="share">
-          <ul class="nav-icons">
-           <li>
-             <a href="#">
-               <i class="fa fa-heart"></i>
-             </a>
-           </li>
-           <li>
-             <a href="#">
-               <i class="fa fa-share"></i>
-             </a>
-           </li>
-           <li>
-             <a href="#">
-               <i class="fa fa-star"></i>
-             </a>
-           </li>
-          </ul>
-        </div>
+        <ul class="list-inline" id="share">
+         <li>
+           <a href="#">
+             <i class="fa fa-heart"></i>
+           </a>
+         </li>
+         <li>
+           <a href="#">
+             <i class="fa fa-share"></i>
+           </a>
+         </li>
+         <li>
+           <a href="#">
+             <i class="fa fa-star"></i>
+           </a>
+         </li>
+        </ul>
       </div>
-
     </div>
-
   </body>
 </html>

06-profile-dashboard/style.css

@@ -77,16 +77,16 @@ a:hover{
   text-align: center;
 }
 
-.nav-icons {
+.list-inline {
   padding-left: 0;
 }
 
-.nav-icons li {
+.list-inline li {
   display: inline-block;
   width: 90px;
 }
 
-.nav-icons li i{
+.list-inline li i{
   font-size: 25px;
 }
 
@@ -132,7 +132,7 @@ a:hover{
   padding: 10px 400px 60px 20px;
 }
 
-.share{
+#share{
   position: absolute;
   text-align: center;
   bottom: 10px;