Camvillard/landing-page-workshop.md

## landing-page-workshop.md

      
    Raw
  

              landing-page-workshop.md
            
          
    Le Wagon workshop - Intro to HTML & CSS

What you will build in this workshop: your responsive landing page
1. LET'S SET UP


Start Sublime Text. It will open a new black window.
Create a folder landing on your Desktop. Drag & drop this folder in the Sublime Text window.
In Sublime Text left navigation:

Right click "New file"
Save it as index.html with Cmd + S or Ctrl + S
Do the same to create a style.css file
Then "New Folder" and create an images folder


Finally double click on index.html to open it with Chrome


2. ADD SOME HTML CONTENT


To save time, just right-click on the following images and save them in your images folder, renaming them as suggested below:
fast.png

trustable.png

affordable.png


Then start with this HTML code in index.html


<html>
  <head>
    <meta charset="utf-8">
    <title>My Product</title>
  </head>
  <body>
    <h1>My Product</h1>
    <p>Here you describe your value proposition...</p>
    <p>
      <a href="#">Start now</a>
    </p>

    <img src="images/fast.png" alt="picture description" width="140">
    <h2>Fast</h2>
    <p>We deliver fast, <strong>very fast</strong></p>

    <img src="images/trustable.png" alt="picture description" width="140">
    <h2>Trustable</h2>
    <p>You can trust us, <strong>like really</strong>.</p>

    <img src="images/affordable.png" alt="picture description" width="140">
    <h2>Affordable</h2>
    <p>We adapt our price to <strong>your situation</strong>.</p>

    <p>This is a website made ©Le Wagon</p>
  </body>
</html>
Extra - find nice personal icons


You can pick your icons on IconStore, The Noun Project or NucleoApp (they have a free pack).
Tips: Also stay tuned checking icon resources on Product Hunt

3. CSS FOR FONTS & COLORS

Link your stylesheet style.css in the head section of your HTML
<head>
  <link href='style.css' rel='stylesheet'>
</head>
Then copy/paste the CSS code below in style.css and fix it cause it's ugly

For fonts use Google Fonts
For colors use Colorzilla Chrome plugin to pick colors from other websites
You can also find nice colors on Coolors or Color Hunt

/*  Fonts and colors */
body {
  background: rgb(240,240,240);
  color: rgb(30,30,30);
  font-size: 18;
  font-family: Lato, sans-serif;
  margin: 0px;
  font-weight: lighter;
}

h1 {
  font-weight: bold;   
}

h2 {
  font-weight: bold;
  font-size: 24px;
  color: #6A71E1;
}

a {
  color: #6A71E1;
  text-decoration: none;
}

a:hover {
  color: black;
}
4. WRAP WITH DIV

Wrap different sections in different div
<div>
  <h1>My product</h1>
  <p>Here you describe your value proposition...</p>
</div>

<div>
    <img src="images/fast.png" alt="picture description" width="140">
    <h2>Fast</h2>
    <p>We deliver fast, <strong>very fast</strong></p>
</div>

<div>
    <img src="images/trustable.png" alt="picture description" width="140">
    <h2>Trustable</h2>
    <p>You can trust us, <strong>like really</strong>.</p>
</div>

<div>
    <img src="images/affordable.png" alt="picture description" width="140">
    <h2>Affordable</h2>
    <p>We adapt our price to <strong>your situation</strong>.</p>
</div>

<div>
  <p>This is a website made ©Le Wagon</p>
</div>
5. NAME YOUR TAGS


Name your banner, features and footer with class like <div class="banner">, <div class="card-white"> and <div class="footer">
Name your main container with id like <div id="features">
Then add this nice CSS code

/* Custom design with classes */
.banner {
  text-align: center;
  color: white;
  padding: 150px 0px;
  background-image: linear-gradient(-225deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 50%), url("https://picsum.photos/1000/600?random");
  background-size: cover;
  background-position: center;
}
.banner h1 {
  font-size: 50px;
}
.banner p {
  opacity: 0.8;
  font-size: 30px;
  font-weight: lighter;
  margin-bottom: 40px;
}

.btn-blue {
  color: white;
  background: #6772e5;
  box-shadow: 0 4px 6px rgba(50,50,93,.11);
  border-radius: 4px;
  padding: 15px 20px;
}
.btn-blue:hover {
  background: #7795f8;
  color: white;
}

.card-white {
  background-color: white;
  border-radius: 4px;
  text-align: center;
  box-shadow: 0 4px 6px rgba(50,50,93,.11);
  padding: 16px;
  margin: 16px 0px;
}

.card-white img {
  margin-bottom: 20px;
}

.footer {
  background-color: black;
  padding: 24px;
  color: white;
}

/* Adjustments with id */
#features {
  padding: 64px 0px;
}
Extra - find a cool background image


You can pick your background picture on Pexels

6. FONTAWESOME

First, you will have to create a fontawesome kit. Go to Font Awesome. Enter your email and confirm. Go to your mailbox to confirm your email address and finish the setup in Font Awesome. Once you fill in the form, they will provide a kit code. Copy the kit code and paste it in your head!
It should look like this:
<head>
  <script src="https://kit.fontawesome.com/010f2c19e5.js"></script>
</head>
And then in the footer
<ul>
  <li><a href="#"><i class="fab fa-youtube"></i></a></li>
  <li><a href="#"><i class="fab fa-facebook"></i></a></li>
  <li><a href="#"><i class="fab fa-twitter"></i></a></li>
  <li><a href="#"><i class="fab fa-github"></i></a></li>
</ul>
With a bit of CSS style
.footer a {
  color: white;
  font-size: 32px;
}

.list-inline {
  list-style: none;
  padding-left: 0px;
}
.list-inline li {
  display: inline;
  padding: 0px 8px;
}
7. BOOTSTRAP SETUP

Link Bootstrap stylesheet in the head section of your HTML before your stylesheet link
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link href='style.css' rel='stylesheet'>
</head>
Play with class="btn btn-primary" your first Bootstrap classes
8. BOOTSTRAP GRID


Inject your 3 cards div in the following responsive grid

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-lg-4">
      <!-- div class="card" -->
    </div>
    <div class="col-xs-12 col-sm-6 col-lg-4">
      <!-- div class="card" -->
    </div>
    <div class="col-xs-12 col-sm-6 col-lg-4">
      <!-- div class="card" -->
    </div>
  </div>
</div>
9. PUBLISH YOUR WEBSITE

⚠️ The following tutorial is for publishing a website called <code>my-profile</code>. You can follow exactly the same process to publish you project called <code>landing</code>.⚠️

1. Install Gihub Desktop application

To put your website online, you need first to:

Create an account on Github.
Install Github Desktop App to communicate with your Github account.

Once it’s done, you are ready to publish your website following this tutorial.
2. Create the repository

First, open Github desktop application and drag and drop you project inside

Then, click on the create a repository link and then on the Create Repositorybutton of the modal:

3. Publish it on Github

Well done! Now that the repository has been created on your computer, we need to put it on Github. Very easy, just click on Publish repository in the menu.

Your project my-profile should be on your Github profile after this step. Check that you can find it in your Github repositories.

4. Activate the “magic” setting ✨

Time to activate a Github setting that will automatically put you website online ✨✨✨. For that go to the project setting on Github.

Scroll to the Github Pages section of the settings and Save the master branch.

That’s all you need to know, normally Github will generate the automatic URL of your website and give it to you in the same section. You just have to wait a few minutes and you should see your profile page live on this URL 😎😎😎.