Le Wagon HTML/CSS workshop

0. Welcome aboard!

Please install SublimeText now. It's free.
Programmers do not use Word or PPT, they need a text editor for code, markup and way more...
Let's make your first web page, like the examples below. Go Go Go!!
👉Example #1: Personal page

👉Example #2: Business 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
Then start with this HTML code in index.html

<html>
  <head>
    <meta charset="utf-8">
    <title>Xnode playground landing</title>
  </head>
  <body>
    <h1>Xnode is so much more than a co-working space</h1>
    <p>This is also a place to learn to code..</p>

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

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

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

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

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

Go further at home

You can pick your icons on The Noun Project or IconMonstr.
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 (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: rgb(245,245,245);
  color: green;
  font-size: 15px;
  font-family: Helvetica;
}
h1{
  font-family: Courier;
  color: red;
  font-weight: lighter;
  font-size: 25px;
}
h2 {
  font-family: Courier;
  color: pink;
  font-weight: lighter;
  font-size: 18px;
}
img {
  width: 150px;
}
a {
  color: yellow;
}
a:hover {
  text-decoration: none;
  color: purple;
}

4. Wrap with `div`

Wrap different sections in different div

  <!-- header -->
  <div>
    <h1>Xnode is so much more than a co-working space</h1>
    <p>This is also a place to learn to code..</p>
  </div>
  <!-- features -->
  <div>
    <h2>Open seats</h2>
    <p>A very, <strong>very</strong> open space</p>
    <img src="images/open.png" alt="picture description">
  </div>
  <div>
    <h2>Meetings</h2>
    <p>A meeting place <strong>for your business</strong></p>
    <img src="images/meeting.png" alt="picture description">
  </div>
  <div>
    <h2>Offices</h2>
    <p>A workspace <strong>to rent</strong> for your team</p>
    <img src="images/office.png" alt="picture description">
  </div>
  <div>
    <h2>Events</h2>
    <p>A cool space <strong>to run your events</strong></p>
    <img src="images/event.png" alt="picture description">
  </div>
  <!-- footer -->
  <div>
    <p>This is a playground landing ©Le Wagon</p>
  </div>

5. Name your tags

Name your header and footer with ids like id="header" and id="footer"
Name your features with classes like class="card"
Then add this nice CSS code to your stylesheet

#header{
  text-align: center;
  background-image: url("https://kitt.lewagon.com/placeholder/cities/shanghai");
  background-size: cover;
  padding: 150px;
  color: white;
  text-shadow: 1px 1px 5px black;
}

.card{
  padding: 50px;
  font-weight: lighter;
}

#footer{
  padding: 30px;
  background: rgb(30, 30, 30);
  color: lightgrey;
}

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;
}

7. Have fun with HTML&CSS!

We recommend you continue back home and complete this free 101 course
Want to learn much more, fast? Applications start here
If you appreciate this workshop, leave us a review on meetup!♥

We need your feedbacks!

Our workshops are driven by your comments and suggestions.
Space, instructor, content, time... Please tell us what you think!

👆 If you'd like today's slides, please take 2 minutes to fill up this form! We'll send them over email. Win-win.

Web development crash course