create your first website in a few hours

How to

and learn HTML, CSS and JavaScript at the same time... ; )

Anne Collet

workshop Outline

Free tools setup‪
Theoretical intro
Live-code demo (we code, you don't)
Your turn (you code, we don't)

Ask for help when needed & have fun!

setup free Tools

to build a website :

Install Google Chrome (web browser)
Install Sublime Text 2 (text editor)

working with sublime

On your desktop, create a folder named my_first_website
Open Sublime Text and a new black window will be displayed
Drag & drop my_first_website folder into the SublimeText window

your first website

In SublimeText, right-click on my_first_website folder
Add a new HTML file named index.html
Add a new CSS file named style.css
Open your HTML file in the browser
Now don't move! You're ready to code!

The Technologies

behind any website

The Web

(world wide web)

is a service...

that relies on the Internet infrastructure

(interconnected networks)

= a serie of interconnected servers

http Request/ http response

static website

(aka site vitrine)

+ browser

http Request/ http response

dynamic website

(aka web application)

+ browser

Page built

On the server-side

Computers are machines
that can be told what to do

softwares are telling them
what you want them to do

binary instructions 1001101001001010100

nicer programming languages

back-end languages

The fizzbuzz example

0. Enumerate numbers until a defined stopper ('N')

1. Start by considering 'number' is equal to 1

2. If 'number' is a multiple of 3, say Fizz

3. If 'number' is a multiple of 5, say Buzz

4. If 'number' is a multiple of both, say FizzBuzz

5. Else say the current value of 'number'

6. Increment the value of 'number' by 1

7. Repeat until the value of 'number' is equal to 'N'

The fizzbuzz example

http://rosettacode.org/wiki/FizzBuzz

ASSEMBLY

The fizzbuzz example

http://rosettacode.org/wiki/FizzBuzz

RUBY

The fizzbuzz example

JAVA

The lego game

we could program everything from scratch...

...but it's boring & non productive

So we decided to

create re-usable blocks

of functionalities

pre-packaged libraries

within a specific framework

up to Build anything !

web services

more & more websites today
are using third-party web services
(Google maps, Facebook authentication,...)

web services

can be integrated into your website

by copy/pasting a snippet of code, i.e. a call to their

API (application programming interface), in your HTML file

<!--
    You need to include this script on any page that has a Google Map.
    When using Google Maps on your own site you MUST signup for your own API key at:
        https://developers.google.com/maps/documentation/javascript/tutorial#api_key
    After your sign up replace the key in the URL below or paste in the new script tag that Google provides.
-->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCukr6vo0mkusgzjemMGVI83TDUo-oqpzw&sensor=false"></script>

<script type="text/javascript">
    // When the window has finished loading create our google map below
    google.maps.event.addDomListener(window, 'load', init);

    function init() {
        // Basic options for a simple Google Map
        // For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
        var mapOptions = {
            // How zoomed in you want the map to start at (always required)
            zoom: 15,

            disableDefaultUI: true,
            panControl: false,
            zoomControl: true,
            mapTypeControl: false,
            scaleControl: false,
            streetViewControl: false,
            overviewMapControl: false,
            scrollwheel: false,


            // The latitude and longitude to center the map (always required)
            center: new google.maps.LatLng(48.864848, 2.379853),

            // How you would like to style the map.
            // This is where you would paste any style found on Snazzy Maps.
            styles: [{"featureType":"all","stylers":[{"saturation":0},{"hue":"#e7ecf0"}]},{"featureType":"road","stylers":[{"saturation":-70}]},{"featureType":"transit","stylers":[{"visibility":"off"}]},{"featureType":"poi","stylers":[{"visibility":"off"}]},{"featureType":"water","stylers":[{"visibility":"simplified"},{"saturation":-60}]}]
        };

        // Get the HTML DOM element that will contain your map
        // We are using a div with id="map" seen below in the <body>
        var mapElement = document.getElementById('map');

        // Create the Google Map using out element and options defined above
        var map = new google.maps.Map(mapElement, mapOptions);

        var myMarker = new google.maps.Marker({
          position: new google.maps.LatLng(48.864848, 2.379853),
          map: map
        });
    }
</script>

Example: script to insert a Google Map

It has never been so easy to make software !

on the Client-side

Front-end languages

content (-> SEO)
+ structure

style / appearance

dynamic behaviour
+ animation
+ usability

HTML is a markup language.

It structures the content of a web page.

Cause in order to design and animate its elements,

we have to tag them first!

html skeleton

<!DOCTYPE html>












<!-- end of file -->

html skeleton

<!DOCTYPE html>
<html>


  <!-- your content (text, images,...) 
  and all the other html tags 
  to structure this content goes here -->


</html>
<!-- end of file -->

html skeleton

<!DOCTYPE html>
<html>
  <head>

    <!-- intelligence (meta-data) -->

  </head>
  <body>

    <!-- stuff to be displayed on your web page -->

  </body>
</html>
<!-- end of file -->

html skeleton

<!DOCTYPE html>
<html>
  <head>
    <title>Hello world</title> 
    <!-- text appearing in the tab + used by Google in its search results -->
    <meta charset="utf-8"/> 
    <!-- to display properly the special characters -->
  </head>
  <body>

    <!-- stuff to display in the page -->

  </body>
</html>
<!-- end of file -->

html skeleton

<!DOCTYPE html>
<html>
  <head>
    <title>Hello world</title> 
    <!-- Text appearing in the tab + used by Google in its search results -->
    <meta charset="utf-8"/> 
    <!-- To display properly the special characters -->
  </head>
  <body>
    <h1>Hello buddies!</h1>

    <!-- Stuff to display in the page -->

  </body>
</html>
<!-- end of file -->

html syntax

<element_name attribute_name="attribute_value">element_content</element_name>

opening tag

closing tag

-------------------------------------------

---------------

html syntax

result => Le Wagon

QUIZZ:

What is the element name?
What is the element content?
What are the 2 attributes (name and value)?

html elements

<h1>[...]</h1>  <!-- Only one per page! SEO important -->

<h2>[...]</h2>

<h3>[...]</h3>

<h4>[...]</h4>

<h5>[...]</h5>

<h6>[...]</h6>

titles

html elements

<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  Veritatis laboriosam mollitia autem at ab omnis iure quis
  asperiores inventore eos nam aut iusto officiis deserunt
  nihil, sequi tempore impedit quae?
</p>

paragraphs

html elements

<h2>Shopping List</h2>
<ul>
  <li>Milk</li>
  <li>Butter</li>
</ul>

<h2>World Cup 2014</h2>
<ol>
  <li>Germany</li>
  <li>Argentina</li>
  <li>Netherlands</li>
  <li>Brazil</li>
</ol>

lists

html elements

<img src="logo.png" alt="Le Wagon logo"/>

images

html elements

<a href="http://www.lewagon.org" target="_blank">Le Wagon</a>

links

html elements

<form name="input" action="/subscribe" method="post">
  .
  input elements
  .
</form>

forms

html elements

<form name="input" action="/subscribe" method="post">

    Username: <input type="text" name="firstname">

</form>

input - type: text

html elements

<form name="input" action="/subscribe" method="post">

    Username: <input type="text" name="firstname"><br>
    <input type="radio" name="sex" value="male">Male<br>
    <input type="radio" name="sex" value="female">Female

</form>

input - type: radio

html elements

<form name="input" action="/subscribe" method="post">

    Username: <input type="text" name="firstname"><br>
    <input type="radio" name="sex" value="male">Male<br>
    <input type="radio" name="sex" value="female">Female<br>
    <input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
    <input type="checkbox" name="vehicle" value="Car">I have a car

</form>

input - type: checkbox

html elements

<form name="input" action="/subscribe" method="post">

    Username: <input type="text" name="firstname"><br>
    <input type="radio" name="sex" value="male">Male<br>
    <input type="radio" name="sex" value="female">Female<br>
    <input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
    <input type="checkbox" name="vehicle" value="Car">I have a car<br>
    <input type="submit" value="Submit">

</form>

input - type: submit

we need to configure a server

on the back-end side of our website

to receive and store these user inputs

html elements

resources

HTML Cheat Sheet

HTML5 Doctor

CSS is used to add some style properties

to specific & properly selected HTML elements

css power

What would this website surfingla.fr look like without any CSS ?

css power

Well, let's neutralise the CSS by deleting the head of the HTML document in the browser inspector!

css power

Here is the result ! Quite different, isn't it ? ; )

css link

For your CSS stylesheet to be taken into account, you need to

add a link to it in the head of the HTML document

css syntax

css properties

/* syntax 1 : color name in English */

body {
  color: orange;
}

color

css properties

/* syntax 2 : hexadecimal color reference */

body {
  color: #FFA500;
}

color

css properties

/* syntax 3-a : RGB color reference */

body {
  color: rgb(255, 165, 0);
}

color

css properties

/* syntax 3-b : RGBA color & opacity reference */

body {
  color: rgba(255, 165, 0, 0.8);
}

color

RGBA has a 4th parameter: opacity

(which may vary between 0 and 1)

css properties

color tools

Choose a good color scheme with Adobe Color CC
Add & use the ColorZilla plug-in to pick nice colors on-the-fly
A nice tool to help you to select your colors: material palette
You can pick them among the trendy flat colors :)

css properties

text color vs
background color

css properties

background image

css properties

fonts - family (1)

css properties

fonts - family (2)

css properties

fonts - family (3)

css properties

fonts - size & spacing

css properties

fonts - color

css properties

fonts - decoration

css properties

fonts - alignment

css properties

fonts tools

Choose nice free fonts with Google Fonts
You can identify any web font with the Fontface Ninja (or WhatFont) plugin
Good practices: 3 fonts max per website/webpage
Use sans-serif fonts (such as, Open-Sans for basic text, PillsGothic for h1, h2, Museo-Slab for secondary titles (h3, h4))

icons resources

<link 
    rel="stylesheet" 
    href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

textual icons

Font Awesome

A font for icons (hence, to change their color, size, etc. => use CSS!)
Paste the following code into the <head> section of your HTML file

Then choose icons from the Font Awesome set
And integrate each of them in your html file, where you want each of them to be displayed, by adding the <i>...</i> tag provided by Font Awesome

<h1><i class="fa fa-cutlery"></i> MY RESTAURANT</h1>

icons resources

graphical icons

The Noun Project

You can get these icons both in :

PNG format = with a transparent background
SVG format = perfectly resizable and customisable!

Pictures resources

Flickr
FreePik
Unsplash (high-res)
other sources here, here and here

Be careful about the picture/file's size :
too small, it will be blurred;
too big, it will slow down your page load!

=> to compress your pictures: ImageOptim

Select your pictures according to specific criteria (free of rights, landscape, min width 1024 px,...) :

css properties

picture size & shape

Play with HTML elements & CSS properties !

coding is about practice

Change the colors, background, sizes and radius
Add a new Google font to all the texts of your body
Add another Google font of your choice for your titles
Make live-experiments on your CSS using Chrome dev tool

html elements

divisions and box model

Any modern website...

html elements

... is made of <div>

divisions and box model

html elements

=> structure your HTML code with <div> elements,
to group all the contents that fits together

divisions and box model

css properties

the box model

CSS PROPERTIES

the box model

CSS PROPERTIES

syntax and shorcuts

css properties

div{
  border-top: 1px solid red;
  border-right: 2px dotted black;
  border-bottom: 1px dashed green;
  border-left: 2px dotted black;
}

borders

divisions and box model

div{
  background: white;
  border: 1px solid lightgrey;
  padding: 20px;
  margin: 30px;
}

you can make the box structure more visible
by adding some CSS rules on this <div>

css properties

id and class

Name your html tags

To add some style only to :

a specific unique html element, use the id attribute
a specific set of html elements, use the class attribute

id and class

Name your html tags

in your HTML file

id and class

Name your html tags

1  #logo {
2     width: 30%;
3  }
4  
5  .staff {
6      border-radius: 50%;
7  }

in your CSS file

id and class

Name your html tags

example

The Growth Hacking Approach

implies a conversion-driven landing page !

a landing page

tells visitors about your offer

collects new interested contacts

makes them "buy" you "something"

is a home page that usually

a conversion-driven landing page

maximizes the visitors' following move

kjhlkjhk

Example

Lyft

Example

Take Eat Easy

Example

Netflix

Conversion rate

is the number of users
who have completed an action on your website
(bought a product, registered to an event, subscribed to a newsletter,...)
divided by the total number of your website visitors

Conversion rate

conversion rate = DESIRE − FRICTION

addictive message
honest promise
appealing look
user-friendly layout

DESIRE
FRICTION
DESIRE
FRICTION

to maximize this rate, pay attention to your landing page's ...

... content

... design

BUILDING Options

hire a dev + a designer (found in your network, on oDesk,...)
use an all-in service (LaunchRock, KickoffLabs, Unbounce,...)
do it yourself !

for crafting your landing page :

Why DIY

because then you can :

start immediately
operate freely & independently
test & adjust design continuously
add & optimize content on the fly

Some practical landing tips

Be prepared

before launching your idea / product / service

on the market

a target audience clearly defined
1 clear action you want them to complete
success metrics trackers in place

make sure that you have :

content

1 catchy/striking headline
1 explicite subhead, with your unique value proposition (UVP)
1 simple call-to-action (CTA)
1 image rather than a long text to set the context
message & keywords
consistent & coherent
+ tested & selected carrefully

design

focus attention on CTA with color contrast, encapsulation frame, space,...
1 single button to click on : the one with your CTA on it
fully-responsive layout
fully-scrollable content & thumb-friendly buttons/links
many more tips here & here

CLEAR & CONCISE !

FOCUSED & USER-FRIENDLY !

Example

work gradually

start minimal
and then test adding things one by one
to understand how they impact your conversion rate

lean approach

beyond conversion

Do not develop conversion obsession ! ^^

Some visitors will only come for :

browsing products/services "serendipidly"
finding information (contact details, opening hours,...)

=> make every journey on your site as pleasant as possible !

Now let's build your website !

Prerequisites : dev' tool belt

text editor
Sublime Text 3

to work efficiently

browser
+ dev' tools plug-in
Google Chrome

opened

simultanuously

on your screen

Prerequisites : basic knowledge

content (-> SEO)
+ structure

to customize front-end code

style / appearance

dynamic behaviour
+ animation
+ usability

Front-end framework

to rapidly & smoothly set up
a fully-responsive front-end (html, css, js)

Foundation

WrapBootstrap

Bootstrap

web services

select the best ones
already widely tested & acclaimed
for their usability & functionality

Stripe (payment)

G oogle Map (maps)

MailChimp (e-mailing)

set up the front-end theme

selected & downloaded from WrapBootstrap

set up the front-end theme

copied-pasted in the editor & revealed in the browser

customize content & design

of your landing page

add background image to contextualize

customize content & design

of your landing page

update favicon & logo

customize content & design

of your landing page

update title, description, headline & subhead

customize content & design

of your landing page

update call-to-action

customize content & design

of your landing page

reset countdown

Add a form to collect user inputs

Remember the form tag in HTML

<form name="input" action="/subscribe" method="post">

    Username: <input type="text" name="firstname"><br>
    <input type="radio" name="sex" value="male">Male<br>
    <input type="radio" name="sex" value="female">Female<br>
    <input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
    <input type="checkbox" name="vehicle" value="Car">I have a car<br>
    <input type="submit" value="Submit">

</form>

we need to configure a server

on the back-end side of our website

to receive and store these user inputs

or...

use great web services

MailChimp

(to collect user inputs & manage contacts)

use great web services

MailChimp

(to collect user inputs & manage contacts)

use great web services

MailChimp

(to collect user inputs & manage contacts)

<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
  <form action="http://8thcolor.us4.list-manage.com/subscribe/post?u=506ea88e9f457f1a4960a3310&id=868a950c07" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    ...
  </form>
</div>

Snippet of code to copy & paste from MailChimp

onto your HTML body, to call & consume the MailChimp API

A form...

use great web services

MailChimp

(to collect user inputs & manage contacts)

<h2>Subscribe to our mailing list</h2>
<div class="mc-field-group">
  <label for="mce-EMAIL">Email Address </label>
  <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>

Snippet of code to copy & paste from MailChimp

onto your HTML body, to call & consume the MailChimp API

with minimal fields...

use great web services

MailChimp

(to collect user inputs & manage contacts)

<div id="mce-responses" class="clear">
  <div class="response" id="mce-error-response" style="display:none"></div>
  <div class="response" id="mce-success-response" style="display:none"></div>
</div>

Snippet of code to copy & paste from MailChimp

onto your HTML body, to call & consume the MailChimp API

with error messages...

use great web services

MailChimp

(to collect user inputs & manage contacts)

<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;">
  <input type="text" name="b_506ea88e9f457f1a4960a3310_868a950c07" tabindex="-1" value="">
</div>

Snippet of code to copy & paste from MailChimp

onto your HTML body, to call & consume the MailChimp API

with bot signup protection...

Negative Captcha

Don't !

Do !

to priviledge humans on robots

use great web services

MailChimp

(to collect user inputs & manage contacts)

<div class="clear">
  <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>

Snippet of code to copy & paste from MailChimp

onto your HTML body, to call & consume the MailChimp API

and with the action.

Google Analytics

(to monitor your website)

use great web services

(to master the tool, follow our tutorial)

Determine where your best visitors are located
Learn what people are searching for on your site
Visualize what people click on the most
Uncover your top & worst performing content
Determine where people abandon & your bounce rate
Determine your mobile traffic

why Using analytics tools

GitHub Pages

(to host your static website for free)

deploying your website

(to master the tool, follow our tutorial)

Use our tutorial

changing your domain name

Thank you.

See you soon !

Twitter - Meetup - Facebook

www.lewagon.org

free online tuto :

create your first website in a few hours

workshop Outline

setup free Tools

working with sublime

your first website

The Technologies

The Web

is a service...

that relies on the Internet infrastructure

http Request/ http response

http Request/ http response

On the server-side

Computers are machines that can be told what to do

softwares are telling them what you want them to do

binary instructions 1001101001001010100

nicer programming languages

back-end languages

The fizzbuzz example

The fizzbuzz example

The fizzbuzz example

The fizzbuzz example

The lego game

we could program everything from scratch...

...but it's boring & non productive

So we decided to

create re-usable blocks

of functionalities

pre-packaged libraries

within a specific framework

up to Build anything !

web services

web services

It has never been so easy to make software !

on the Client-side

Front-end languages

html skeleton

html skeleton

html skeleton

html skeleton

html skeleton

html syntax

html syntax

html elements

html elements

html elements

html elements

html elements

html elements

html elements

html elements

html elements

html elements

html elements

css power

css power

css power

css link

css syntax

css syntax

css syntax

css properties

css properties

css properties

css properties

css properties

css properties

css properties

css properties

css properties

css properties

css properties

css properties

css properties

css properties

css properties

icons resources

icons resources

Pictures resources

css properties

Play with HTML elements & CSS properties !

Computers are machines
that can be told what to do

softwares are telling them
what you want them to do