that's Right, you need to be connected

Different ways to connect

You're connected. What next?

you need An  Address

to send your  Message To...

A  server

Close by, in sT Ghislain, bElgium

What's the server's Answer?

http Request/ http response

static website

 (aka site vitrine)

+ browser

http Request/ http response

dynamic website

 (aka web application)

+ browser

Page built

Front-end languages

back-end languages

Computers are machines 
that can be told what to do

binary instructions  1001101001001010100

    vs

nicer programming 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

JAVA

The fizzbuzz example

http://rosettacode.org/wiki/FizzBuzz

RUBY

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,...)

© Client-side APIs

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

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 syntax

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 

Prerequisites : dev' tool belt

to work efficiently

opened

simultanuously

on your screen

Prerequisites : basic knowledge

to customize front-end code

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)

Google Map (maps)

MailChimp (e-mailing)

set up the front-end theme

selected & downloaded from Start Bootstrap

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

Once you become Pro

- Add a form to collect user inputs (you need to configure a server on the back-end side of our website to receive and store these user inputs or use services like MailChimp)

- Add some animation (you need Javascript)

- Publish online and get a domain name

- Work with a Version Control System like