Le Wagon Tokyo | Build your Landing Page in 2 hours

2h-landing page
github.com/yann.klein
info.lewagon.com/tokyo-landing-page
Register to the workshop resource👇

Landing page
Clear value proposition
Clean design
Call-to-Action
CRM ﬁrst milestone

Let’s build it from scratch
info.lewagon.com/tokyo-landing-page
First step: Register!

Coding language
Next Workshop in May/June
We’ll keep you posted!

Workshop outline
Theoretical intros
Basic concepts to understand
Live-code demos
We code, you don’t :)
Your turn
Take your time & have fun

Structure
Structure your content

Animation
Animate your content

HTML
Without structure, no design

Skeleton
<!DOCTYPE html>

Skeleton
<!DOCTYPE html>
<html>

</html>

Head & body
<!DOCTYPE html>
<html>
<head>

</head>
<body>

</body>
</html>

Title & utf-8
<!DOCTYPE html>
<html>
<head>
</head>
<body>

</body>
</html>
<title>Landing</title>
<meta charset="utf-8">

Head & google
<head>
<title>Le Wagon - Apprendre..</title>
<meta name=“description" content=“Le Wagon est la…”>
</head>

<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

Syntax example
<a href=“http://lewagon.org” target=“_blank”>
Le Wagon
</a> 
Le Wagon
What is the tag name?
What is the content?
What are the two attributes?

HTML - titles
<h1>[...]</h1>
<h2>[...]</h2>
<h3>[...]</h3>
<h4>[...]</h4>
<h5>[...]</h5>
<h6>[...]</h6>

HTML - paragraph
<p>
Lorem ipsum dolor sit amet, consectetur
adipisicing elit.Veritatis laboriosam
autem at ab omnis iure quis
</p>

HTML - emphasize
<p>
You can emphasise <em>some words</em>, and
even <strong>more if needed</strong>
</p>

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>

HTML - image
<img src=“logo.png” alt=“Le Wagon logo”>

CSS
Web without CSS ?
Let’s ﬁnd a page and cut its head!

Design tips
First the Fonts and Colors

CSS vocabulary
Use the good keywords on Google

Colors
h2 {
color: orange;
color: #FF530D;
color: rgb(255, 83, 13);
color: rgba(255, 83, 13, 1.0);
}

RGB tips
h2 {
color: rgba(255, 255, 255, 1.0);
}

Div & Box model
…is made of div
Div
Div
Div Div Div

Box model - border
h2 {
border: 1px solid green;
border: 2px dashed #FF530D;
}

how do you resize the logo only?

how do you style staﬀ pictures only?

Fontawesome
You don’t want .png or .jpg ﬁles
You want a font of icons

Your turn
“text-center” on your paragraphs
“list-inline” on your social list
“btn btn-primary” for your subscribe button

Responsive
A grid of cards has diﬀerent
layouts depending on the device!

Container
always start with a container

Cols
12
12
12
3 3 3 3 6 6
col-12

Media
col-12: Small devices (Mobiles > 576px)
col-md-6: Medium devices (Tablet > 768px)
col-lg-3: Large devices (Laptop > 992px)
col-xl-: Extra large devices ( Desktop > 1200px)

Example - 2 cols
<div class=“container”>
<div class=“row”>
<div class=“col-6”></div>
</div>
</div>
.col-6 will apply on larger screens

What happens?
</div>
</div>

Responsive example
<div class=“col-6 col-md-3”></div>
</div>
</div>

Go further
yann.klein@lewagon.org
lewagon.com/tokyo

Le Wagon Tokyo | Build your Landing Page in 2 hours

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Le Wagon Tokyo | Build your Landing Page in 2 hours

Similaire à Le Wagon Tokyo | Build your Landing Page in 2 hours (20)

Dernier

Dernier (11)

Le Wagon Tokyo | Build your Landing Page in 2 hours