le wagon - 2h landing
TRANSCRIPT
![Page 1: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/1.jpg)
2h-landing
@bpapillard
![Page 2: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/2.jpg)
Landing page
Clear proposition value Clean design Call-to-Action CRM first milestone
![Page 3: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/3.jpg)
Landing page tools
![Page 4: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/4.jpg)
Let’s build from scratch
![Page 5: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/5.jpg)
Coding language
![Page 6: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/6.jpg)
CSS libraries
![Page 7: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/7.jpg)
Workshop outline
Theoretical intros Basic concepts to understand
Live-code demos We code, you don't Your turn Copy / paste our snippets & have fun
![Page 8: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/8.jpg)
Setup
![Page 9: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/9.jpg)
Sublime kick-off
Create a folder Sublime Text > New fileDrag & drop folder
![Page 10: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/10.jpg)
New file playground.htmlNew file style.css New folder images
Create files/folders
![Page 11: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/11.jpg)
Open HTLM file with browser
![Page 12: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/12.jpg)
Front-end languages
![Page 13: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/13.jpg)
Structure
Structure your content
![Page 14: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/14.jpg)
Design
Design your content
![Page 15: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/15.jpg)
Animation
Animate your content
![Page 16: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/16.jpg)
HTML
Without structure, no design
![Page 17: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/17.jpg)
Different contents
![Page 18: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/18.jpg)
Tag them
![Page 19: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/19.jpg)
Browser apply defaults
![Page 20: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/20.jpg)
Over-ride with CSS
![Page 21: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/21.jpg)
Skeleton
<!DOCTYPE html>
<!-- end of file -->
![Page 22: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/22.jpg)
Skeleton
<!DOCTYPE html><html>
<!-- html code -->
</html><!-- end of file -->
![Page 23: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/23.jpg)
Head & body<!DOCTYPE html><html> <head> <!-- Intelligence (meta-data) --> </head> <body> <!-- Stuff to display--> </body></html><!-- end of file -->
![Page 24: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/24.jpg)
Title & utf-8<!DOCTYPE html><html> <head>
</head> <body> <!-- Stuff to display--> </body></html><!-- end of file -->
<title>Landing</title> <meta charset="utf-8">
![Page 25: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/25.jpg)
Head & google
<head> <title>Le Wagon - Apprendre..</title> <meta name=“description" content=“Le Wagon est la…”></head>
![Page 26: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/26.jpg)
<head>
<meta property=“og:title” content=“le Wagon - The..”><meta property=“og:image” content=“facebook-card.jpg”><meta property=“og:description” content=“Le Wagon is the…”>
<head>
Head & Facebook
![Page 27: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/27.jpg)
Core syntax
![Page 28: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/28.jpg)
Syntax example
<a href=“http://lewagon.org” target=“_blank”> Le Wagon</a>
Le WagonWhat is the tag name? What is the element content? What are the 2 attributes (name and value)?
![Page 29: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/29.jpg)
HTML - titles
<h1>[...]</h1><h2>[...]</h2><h3>[...]</h3><h4>[...]</h4><h5>[...]</h5><h6>[...]</h6>
![Page 30: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/30.jpg)
HTML - paragraph
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.Veritatis laboriosam autem at ab omnis iure quis</p>
![Page 31: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/31.jpg)
HTML - emphasize
<p>You can emphasise <em>some words</em>, and even <strong>more if needed</strong>
</p>
![Page 32: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/32.jpg)
HTML - list
<h2>Shopping list</h2><ul> <li>Milk</li> <li> Butter </li></ul>
<h2>World Cup 2014</h2><ol> <li>Germany</li> <li>Argentina</li></ol>
![Page 33: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/33.jpg)
HTML - image
<img src=“logo.png” alt=“Le Wagon logo”>
![Page 34: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/34.jpg)
Your turn - head
<title>My playground App</title> <meta charset="utf-8">
![Page 35: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/35.jpg)
Your turn - body
<h1>My playground app</h1> <p>A toy app to practice</p><h2>Quick</h2> <p>A quick app, <strong>very quick</strong> app</p> <img src=“images/quick.png” alt=“quick” width=“100”> <h2>Simple</h2> <p>A simple app, <strong>very simple</strong> app</p> <img src=“images/simple.png” alt=“simple” width=“100”>
<p>A playground footer</p>
![Page 37: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/37.jpg)
CSS
Web without CSS ? Let’s find a page and cut its head!
![Page 38: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/38.jpg)
Linking stylesheets
![Page 39: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/39.jpg)
CSS syntax
![Page 40: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/40.jpg)
CSS vocabulary
Use the good keywords on Google
![Page 41: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/41.jpg)
CSS example
![Page 42: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/42.jpg)
Colors
h2 { color: orange; color: #FF530D; color: rgb(255, 83, 13); color: rgba(255, 83, 13, 1.0);}
![Page 43: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/43.jpg)
RGB tips
![Page 44: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/44.jpg)
Text vs. Background
![Page 45: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/45.jpg)
Background images
![Page 46: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/46.jpg)
Font family
![Page 47: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/47.jpg)
Font family
![Page 48: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/48.jpg)
Font family
![Page 49: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/49.jpg)
Font size & spacing
![Page 50: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/50.jpg)
Font color
![Page 51: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/51.jpg)
Font decoration
![Page 52: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/52.jpg)
Font alignment
![Page 53: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/53.jpg)
Font weight
![Page 54: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/54.jpg)
Your turn - head
<link href=“style.css" rel="stylesheet">
![Page 55: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/55.jpg)
Your turn - CSSbody{ margin: 0px; color: green; background: rgb(245,245,245);}h1 { font-family: courier; color: rgb(212,57,43);}p { font-size: 30px; line-height: 20px;} Fix it!
![Page 56: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/56.jpg)
Your turn - todos
Change texts color to black Change paragraphs size to 16px Use coolors for <h1> color Include Open-Sans google font for body Use Montserrat for <h1> Play with Fontface Ninja
![Page 57: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/57.jpg)
Div & Box model
Real-life…
![Page 58: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/58.jpg)
Div & Box model
…is made of div
![Page 59: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/59.jpg)
Box model - content
![Page 60: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/60.jpg)
Box model - margins
![Page 61: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/61.jpg)
Box model - border
![Page 62: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/62.jpg)
Box model - border
h2 { border: 1px solid green; border: 2px dashed #FF530D;}
![Page 63: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/63.jpg)
Box model - radius
![Page 64: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/64.jpg)
Box model - radius
![Page 65: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/65.jpg)
Box model - shadow
![Page 66: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/66.jpg)
Your turn - body<div><h1>My playground app</h1> <p>A toy app to practice</p>
</div>
<div><h2>Quick</h2> <p>A quick app, <strong>very quick</strong> app</p> <img src=“images/quick” alt=“quick” width=“100”>
</div>
<div><h2>Simple</h2> <p>A simple app, <strong>very simple</strong> app</p> <img src=“images/simple.png” alt=“simple” width=“100”>
</div>
<div><p>A playground footer</p>
</div>
![Page 67: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/67.jpg)
id & class
![Page 68: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/68.jpg)
how do you resize the logo only?
![Page 69: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/69.jpg)
how do you resize the logo only?
![Page 70: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/70.jpg)
how do you style staff pictures only?
![Page 71: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/71.jpg)
how do you style staff pictures only?
![Page 72: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/72.jpg)
id or class?
![Page 73: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/73.jpg)
Combine
![Page 74: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/74.jpg)
Combine
![Page 75: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/75.jpg)
Combine
![Page 76: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/76.jpg)
Your turn - body<div id=“header”><h1>My playground app</h1> <p>A toy app to practice</p>
</div>
<div class=“feature”><h2>Quick</h2> <p>A quick app, <strong>very quick</strong> app</p> <img src=“images/quick” alt=“quick” width=“100”>
</div>
<div class=“feature”><h2>Simple</h2> <p>A simple app, <strong>very simple</strong> app</p> <img src=“images/simple.png” alt=“simple” width=“100”>
</div>
<div id=“footer”><p>A playground footer</p>
</div>
![Page 77: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/77.jpg)
Your turn - CSS
#header { text-align: center; background-image: url("http://lorempixel.com/1300/600/"); background-size: cover; padding: 150px; color: white; text-shadow: 1px 1px 3px black;}
.feature { padding: 50px; font-weight: 300px;}
![Page 78: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/78.jpg)
Fontawesome
You don’t want .png or .jpg filesYou want a font of icons
![Page 79: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/79.jpg)
Your turn - head
<link href=“http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
![Page 80: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/80.jpg)
Your turn
<ul> <li><a href=“#”><i class=“fa fa-twitter”></i></a></li> <li><a href=“#”><i class=“fa fa-facebook”></i></a></li> <li><a href=“#”><i class=“fa fa-instagram”></i></a></li> <li><a href=“#”><i class=“fa fa-github”></i></a></li></ul>
#footer a { color: lightgrey;}
#footer a:hover { color: white;}
Add social links to your footer
![Page 81: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/81.jpg)
![Page 82: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/82.jpg)
https://github.com/lewagon/bootstrap-boilerplate
Create a new index.html file Copy/paste our boilerplate
Set up
Add the link to your style.css after the link to Bootstrap Copy/paste your title and google fonts linksCopy/paste your <body> in your new page
![Page 83: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/83.jpg)
Semantic scheme
![Page 84: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/84.jpg)
Text classes
![Page 85: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/85.jpg)
Button classes
![Page 86: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/86.jpg)
List classes
![Page 87: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/87.jpg)
Image classes
![Page 88: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/88.jpg)
Your turn
“text-center” on your paragraphs (<p>) “list-inline” on your social list (<ul>) “btn btn-primary” for your subscribe button
![Page 89: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/89.jpg)
Grid system
![Page 90: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/90.jpg)
Responsive
![Page 91: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/91.jpg)
Mobile first
![Page 92: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/92.jpg)
How does it work?
![Page 93: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/93.jpg)
Container
always start with a container
![Page 94: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/94.jpg)
Rows
then insert rows
![Page 95: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/95.jpg)
Rows
then insert rows
![Page 96: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/96.jpg)
Rows
![Page 97: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/97.jpg)
How do we fill rows?
![Page 98: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/98.jpg)
Cols
the elementary block
![Page 99: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/99.jpg)
Media
xs: Extra small devices (Phones < 768px) sm: Small devices (Tablets > 768px) md: Medium devices (> 992px) lg: Large devices (Desktops > 1200px)
![Page 100: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/100.jpg)
Example - 2 cols
![Page 101: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/101.jpg)
Example - 2 cols
<div class=“container”> <div class=“row”>
<div class=“col-xs-6”></div> <div class=“col-xs-6”></div>
</div></div>
.col-xs-6 will apply on larger screens
![Page 102: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/102.jpg)
What happens?
<div class=“container”> <div class=“row”>
<div class=“col-xs-6”></div> <div class=“col-xs-6”></div> <div class=“col-xs-6”></div>
</div></div>
![Page 103: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/103.jpg)
Return on new line
![Page 104: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/104.jpg)
Responsive example
![Page 105: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/105.jpg)
Responsive example
<div class=“container”> <div class=“row”> <div class=“col-xs-6 col-sm-3”></div> <div class=“col-xs-6 col-sm-3”></div> <div class=“col-xs-6 col-sm-3”></div> <div class=“col-xs-6 col-sm-3”></div> </div></div>
![Page 106: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/106.jpg)
Your turn
<div class=“container”> <div class=“row”> <div class=“col-xs-6 col-sm-3”></div> <div class=“col-xs-6 col-sm-3”></div> <div class=“col-xs-6 col-sm-3”></div> <div class=“col-xs-6 col-sm-3”></div> </div></div>
Start with raw initial grid
<div class=“col-xs-6 col-sm-3”><div class=“feature”> ...</div>
</div>
Insert each feature in a col
![Page 108: Le Wagon - 2h Landing](https://reader033.vdocuments.net/reader033/viewer/2022051000/55d27b49bb61eb64128b46f6/html5/thumbnails/108.jpg)
Thank you!