0. Welcome aboard!

  • Please install SublimeText
  • Programmers do not use Word or PPT, they need a text editor for code, markup and way more...
  • Join our private WeChat Group: code 0420
  • Let's make your first landing page.

1. Let's set up

  1. Start Sublime Text. It will open a new black window.
  2. Create a folder landing on your Desktop. Drag & drop this folder in the Sublime Text window.
  3. 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
  4. 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
  • Then start with this HTML code in index.html

  <html>
    <head>
      <meta charset="utf-8">
      <title>KrSpace x Le Wagon</title>
    </head>
    <body>
      <img src="images/KrLogo-sm.png" alt="KrSpace Logo">
      <h1>We Help Startups & Entrepreneurs Create the Future...</h1>
      <p>KrSpace is also a place to learn to code...</p>

      <img src="images/open.png" alt="picture description">
      <h2>Open seats</h2>
      <p>A very, <strong>very</strong> open space</p>

      <img src="images/meeting.png" alt="picture description">
      <h2>Meetings</h2>
      <p>A meeting place <strong>for your business</strong></p>

      <img src="images/office.png" alt="picture description">
      <h2>Offices</h2>
      <p>A workspace <strong>to rent</strong> for your team</p>

      <img src="images/event.png" alt="picture description">
      <h2>Events</h2>
      <p>A cool space <strong>to run your events</strong></p>

      <p>This is a playground landing ©Le Wagon x KrSpace</p>
    </body>
  </html>

Go further at home

3. CSS for fonts & colors

Link your stylesheet style.css in the head section of your HTML


  <head>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Montserrat|Open+Sans" 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 (Requires VPN) - Google now directly serves the css and font files from Google’s servers in Beijing, which means Google Fonts are much more stable and faster to users in China now.
  • For colors use Colorzilla Chrome plugin to pick colors from other websites
  • You can also find beautiful colors on Coolors or Color Hunt

/* style.css */
body{
  background: #FFFFFF;
  color: green;
  font-size: 15px;
  font-family: Helvetica;
  margin: 0 auto;
}
h1{
  font-family: Courier;
  color: red;
  font-weight: bolder;
  font-size: 30px;
}
h2 {
  font-family: Courier;
  color: pink;
  font-weight: lighter;
  font-size: 20px;
}
a {
  color: yellow;
}
a:hover {
  text-decoration: none;
  color: purple;
}

4. Wrap with div

Wrap different sections in different div


    <div>
      <img src="images/KrLogo-sm.png" alt="KrSpace Logo">
    </div>
    <div>
      <h1>We Help Startups & Entrepreneurs Create the Future...</h1>
      <p>KrSpace is also a place to learn to code...</p>
      <div>
        <form action="">
          <input type="text" placeholder="Email here">
          <input type="submit" value="Book a tour!">
        </form>
      </div>
    </div>
      <img src="images/open.png" alt="picture description">
      <h2>Open seats</h2>
      <p>A very, <strong>very</strong> open space</p>
    <div>
      <img src="images/meeting.png" alt="picture description">
      <h2>Meetings</h2>
      <p>A meeting place <strong>for your business</strong></p>
    </div>
    <div>
      <img src="images/office.png" alt="picture description">
      <h2>Offices</h2>
      <p>A workspace <strong>to rent</strong> for your team</p>
    </div>
    <div>
      <img src="images/event.png" alt="picture description">
      <h2>Events</h2>
      <p>A cool space <strong>to run your events</strong></p>
    </div>
    <div>
      <p>This is a playground landing ©Le Wagon x KrSpace</p>
    </div>

5. Name your tags

  • Name your header and footer with id like <div id="header"> and <div id="footer">
  • Name your features with class like <div class="card">
  • Name your buttons with class like class="btn" and use the class .input
  • Then add this nice CSS code

/****************/
/* navbar */
/****************/

.navbar {
  background:white;
  padding:10px;
  text-align: center;
}

/****************/
/* header */
/****************/

#header{
  text-align: center;
  background-image: linear-gradient(-225deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.6) 50%), url("images/tianfu-square.jpg");
  background-size: cover;
  padding: 150px;
  color: white;
}

#header p {
  font-size: 25px;
  margin:40px;
}

#header a.btn {
  padding:15px;
  text-decoration: none;
}

/****************/
/* content */
/****************/

.container {
  padding:20px 0px;
  background-color: #F3F3F3;
  display:flex;
  justify-content: space-around;
  text-align: center;
}

.card{
  padding: 50px;
  font-weight: lighter;
  background-color: white;
  text-align:center;
  width:200px;
}

.card img {
  width:100px;
}

/****************/
/* footer */
/****************/

#footer{
  padding: 50px;
  background: #1E1E1E;
  color: lightgrey;
  text-align: center;
  line-height: 2;
}
#footer a {
  color: lightgrey;
  font-size: 20px;
}
#footer a:hover {
  color: white;
}

#footer ul {
  padding-left:0;
  list-style: none;
}

#footer li {
  display: inline-block;
  padding:0px 10px;
}

/****************/
/* forms */
/****************/

.input {
  font-size: 18px;
  height:50px;
  padding:0px 15px;
  background:white;
  border:1px solid lightgray;
  width:200px;
  border-radius:3px;
}

.btn {
  background:#008AD1;
  color:white;
  font-weight: bolder;
  width:150px;
  border:1px solid #0083C4;
}

.btn:hover {
  background: #0083C4;
  color:white;
}

6. Fontawesome

In your head, it's in your head!


  <head>
    <link rel="stylesheet" href="https://apps.bdimg.com/libs/fontawesome/4.1.0/css/font-awesome.min.css">
  </head>

And then in the footer


  <ul>
    <li><a href="#"><i class="fa fa-weibo"></i></a></li>
    <li><a href="#"><i class="fa fa-weixin"></i></a></li>
    <li><a href="#"><i class="fa fa-twitter"></i></a></li>
    <li><a href="#"><i class="fa fa-github"></i></a></li>
  </ul>

With a bit of CSS style


  #footer a {
    color: lightgrey;
    font-size: 15px;
  }
  #footer a:hover {
    color: white;
  }

9. Have fun with HTML&CSS!