Ironhack - Intro webdev

Introduction au wwwebdev

Antoine Bernier

https://youtu.be/Qz68ytJH4cc

🎤

💬

✋

🎤

💬

✋

muted

🎤

💬

✋

chat ouvert

🎤

💬

✋

raise your hand

webdev freelance

teacher Ironhack

Bootcamp webdev

fulltime / partime
full-stack JS
certifiante bac+3/4

🙋🏼‍♀️ j e candidate

INSTALL

VScode

Chrome

https://code.visualstudio.com/download

https://www.google.com/chrome

open in figma

C'est parti !

ironcv

Sur le bureau, créons un nouveau dossier

Glissons le dossier dans VScode

ironcv

🤚🏻

🦴 HTML

Voir la spec

1993

Tim Berners-Lee

https://www.w3.org/People/Berners-Lee/

Hyper

HTML

Text

HTML

Markup

HTML

Language

HTML

Hyper

Text

Markup

Language

HyperText

💬 chat

Document A

APPRENDRE v. tr. [61] (lat. apprehendere) 1. Acquérir la connaissance, la pratique de ; Apprendre un métier, les mathématiques. 2. Faire acquérir un savoir, une information ; Apprendre le dessin à un enfant. Il m'a appris la nouvelle.

Document B

MATHÉMATIQUES n.f. [58] Science qui étudie par le moyen du raisonnement déductif les propriétés d'êtres abstraits (nombres, figures géométriques, fonctions, espaces, etc.) ainsi que les relations qui s'établissent entre eux.

Hyper Lien

APPRENDRE v.t. [61] (lat. apprehendere) 1. Acquérir la connaissance, la pratique de ; Apprendre un métier, les mathématiques. 2. Faire acquérir un savoir, une information ; Apprendre le dessin à un enfant. Il m'a appris la nouvelle.

Doc. A

Doc. B

Markup

HTML

💬 chat

texte

<a>

</a>

texte

<a>

</a>

balise ouvrante

texte

<a>

</a>

balise fermante

texte

</a>

attribut

texte

</a>

valeur

<a href="http://example.org/doc">texte</a>

URL

balise auto-fermante

Écrivons notre premier document HTML

👩🏽‍💻 code

Bonjour !

👩🏽‍💻 code

Bonjour !

👩🏽‍💻 code

↲
↲
↲
Bonjour !

👩🏽‍💻 code

<!DOCTYPE html>


Bonjour !

👩🏽‍💻 code

<!DOCTYPE html>
<title>hello</title>

Bonjour !

👩🏽‍💻 code

<!DOCTYPE html>
<title>hello</title>

Bonjour !

👩🏽‍💻 code

html5.validator.nu

👩🏽‍💻 code

✅ This is HTML

👩🏽‍💻 code

hello.html

👩🏽‍💻 code

💾

Transformons ce fichier

HTML en page web

Format HTML

DOCTYPE
TITLE

Pages web

d'autres
choses...

Étape 0 : point de départ

<!DOCTYPE html>
<title>hello</title>

Bonjour !

hello.html

👩🏽‍💻 code

Étape 1/3 : <html> wrapper

<!DOCTYPE html>
<html>
  <title>hello</title>
  
  Bonjour !
</html>

hello.html

👩🏽‍💻 code

hello.html

Étape 1/3 : <html> wrapper

<!DOCTYPE html>
<html>
  <title>hello</title>
  
  Bonjour !
</html>

👩🏽‍💻 code

TAB

aparte : Indentation

<html>
  <title>hello</title>

👩🏽‍💻 code

<!DOCTYPE html>
<html>
  <meta charset="utf-8">
  <title>hello</title>
  
  Bonjour !
</html>

Étape 2/3 : jeu de caractères

hello.html

👩🏽‍💻 code

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>hello</title>
  </head>
  <body>
    Bonjour !
  </body>
</html>

Étape 3/3 : <head> & <body>

hello.html

👩🏽‍💻 code

<!DOCTYPE html>
<html>
  <head>
    {💆🏻‍♀️Tête}
  </head>
  <body>
    {🧥Corps}
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    {💆🏻‍♀️Tête}
  </head>
  <body>
    {🧥Corps}
  </body>
</html>

Définitions (👁 invisible)

charset
title
etc ...

<!DOCTYPE html>
<html>
  <head>
    {💆🏻‍♀️Tête}
  </head>
  <body>
    {🧥Corps}
  </body>
</html>

Contenu

<!DOCTYPE html>
<html>
  <head>
    {💆🏻‍♀️Tête}
  </head>
  <body>
    {🧥Corps}
  </body>
</html>

<head>

<body>

<html>

<!DOCTYPE html>
<html>
  <head>
    {💆🏻‍♀️Tête}
  </head>
  <body>
    {🧥Corps}
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>hello</title>
  </head>
  <body>
    Bonjour !
  </body>
</html>

Résultat final

hello.html

👩🏽‍💻 code

Les éléments de contenu web

Chiara PHILLIPS
graphics & web development

Récemment diplomée de l’école Ironhack Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare ipsum sed blandit semper. Morbi suscipit lorem et lacus porttitor, non aliquam metus mollis. Nullam id lobortis leo, eget suscipit diam. Sed at ante quam. Fusce mattis, urna a vestibulum vestibulum, erat lectus ultricies lectus, non dignissim tellus justo non massa.

Expérience

Webdev bootcamp
Ironhack | Barcelone | 2019 – 2020

Maecenas egestas ut eros ut tempor. Proin dapibus eget felis id auctor. Donec
tempor risus nisi, quis bibendum nibh sollicitudin sed.

- Maecenas egestas ut eros ut tempor. Proin dapibus eget felis
- Phasellus convallis arcu sed dui faucibus : vel, semper
- Donec ex risus, faucibus ut porttitor

ART DIRECTION
Publicis | Paris | 2014 – 2019

Cras lobortis nec mauris sit amet condimentum. Suspendisse pretium eros sapien.

- Curabitur porta viverra odio
- Proin varius justo

Contact
06 08 40 44 18 – cphillips@gmail.com – https://cphillips.me

Texte brut :

Image avatar :
https://s3-us-west-2.amazonaws.com/s.cdpn.io/67030/backpackgirl_300x300.jpg

Texte brut

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse est velit, suscipit eget nisi nec, gravida dapibus justo. Sed pretium lacus arcu, vel fermentum odio maximus vitae.

Vestibulum efficitur urna quis massa vulputate sollicitudin. Mauris at mauris tellus.

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Integer non fermentum tortor. In hac habitasse platea dictumst.

Nulla a ipsum sagittis, tincidunt sapien volutpat, facilisis arcu. Nullam venenatis eu tellus vitae bibendum. Donec imperdiet odio est, a imperdiet velit placerat ut. Mauris turpis massa, mattis vitae nibh vitae, blandit molestie urna.

Paragraphe

<p>
  Je suis un
  paragraphe
</p>

Titres

<h1>Gros titre</h1>

<h2>titre niveau 2</h2>

<h3>titre niveau 3</h4>

<h4>titre niveau 4</h4>

<h5>titre niveau 5</h5>

<h6>titre niveau 6</h6>

Lien

<a href="http://google.com">
  Rechercher
</a>

👆🏻

"click"

Image

<img src="dog.png"/>

Liste à puces

<ul>
  <li>element A</li>
  <li>element B</li>
  <li>element C</li>
</ul>

Groupe

<div>
  <p>Lorem amet…</p>
  <p>Ipsum sit…</p>
</div>

Et bien d'autres...

Objectifs / finalités

Donner du sens aux différents éléments de la page (cf. SEO)

🧠

🍱

Grouper / structurer le contenu (cf. styles)

à vous !

💬 chat

🤔

💬 chat

🤔

💬 chat

🤔

💬 chat

🤔

💬 chat

🤔

💬 chat

🤔

💬 chat

🤔

💬 chat

🤔

💬 chat

🤔

💬 chat

🤔

💬 chat

🤔

💬 chat

🤔

💬 chat

🤔

💬 chat

img

Chiara PHILLIPS
graphics & web development

Récemment diplomée de l’école Ironhack Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare ipsum sed blandit semper. Morbi suscipit lorem et lacus porttitor, non aliquam metus mollis. Nullam id lobortis leo, eget suscipit diam. Sed at ante quam. Fusce mattis, urna a vestibulum vestibulum, erat lectus ultricies lectus, non dignissim tellus justo non massa.

Expérience

Webdev bootcamp
Ironhack | Barcelone | 2019 – 2020

Maecenas egestas ut eros ut tempor. Proin dapibus eget felis id auctor. Donec
tempor risus nisi, quis bibendum nibh sollicitudin sed.

- Maecenas egestas ut eros ut tempor. Proin dapibus eget felis
- Phasellus convallis arcu sed dui faucibus : vel, semper
- Donec ex risus, faucibus ut porttitor

ART DIRECTION
Publicis | Paris | 2014 – 2019

Cras lobortis nec mauris sit amet condimentum. Suspendisse pretium eros sapien.

- Curabitur porta viverra odio
- Proin varius justo

Contact
06 08 40 44 18 – cphillips@gmail.com – https://cphillips.me

👩🏽‍💻code

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>hello</title>
</head>
<body>
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/67030/backpackgirl_300x300.jpg" alt>

  <h1>Chiara PHILLIPS</h1>
  <p>graphics & web development</p>

  <p>Récemment diplomée de l’école Ironhack Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare ipsum sed blandit semper. Morbi suscipit lorem et lacus porttitor, non aliquam metus mollis. Nullam id lobortis leo, eget suscipit diam. Sed at ante quam. Fusce mattis, urna a vestibulum vestibulum, erat lectus ultricies lectus, non dignissim tellus justo non massa.</p>

  <h2>Expérience</h2>

  <h3>Webdev bootcamp</h3>
  <p>Ironhack | Barcelone | 2019 – 2020</p>

  <p>Maecenas egestas ut eros ut tempor. Proin dapibus eget felis id auctor. Donec tempor risus nisi, quis bibendum nibh sollicitudin sed.</p>

  <ul>
    <li>Maecenas egestas ut eros ut tempor. Proin dapibus eget felis</li>
    <li>Phasellus convallis arcu sed dui faucibus : vel, semper</li>
    <li>Donec ex risus, faucibus ut porttitor</li>
  </ul>

  <h3>ART DIRECTION</h3>
  <p>Publicis | Paris | 2014 – 2019</p>

  <p>Cras lobortis nec mauris sit amet condimentum. Suspendisse pretium eros sapien.</p>

  <ul>
    <li>Curabitur porta viverra odio</li>
    <li>Proin varius justo </li>
  </ul>

  <h2>Contact</h2>

  <a href="tel:0033608404419">06 08 40 44 18</a> – <a href="mailto:cphillips@gmail.com">cphillips@gmail.com</a> – <a href="https://cphillips.me">https://cphillips.me</a>

</body>
</html>

hello.html

💅🏻 CSS

Voir la spec

Contenu
!=
Présentation

☝🏻

<balise style="color:red;">

règle CSS

<balise style=" ">

color:red;

pretty.css

<balise style=" ">

pretty.css

feuille de styles

hello.html

pretty.css

Créons une feuille de style

👩🏽‍💻code

<link rel="stylesheet" href="pretty.css">

hello.html

Dans le <head> de notre page

👩🏽‍💻code

body {
  color:red;
}

style.css

👩🏽‍💻code

body {
  color:red;
}

style.css

sélecteur : qui

body {
  color:red;
}

style.css

propriété : quoi

body {
  color:red;
}

style.css

valeur : comment

p {
  color:blue;
}

style.css

s'applique à tous les p

👩🏽‍💻code

Syntaxe générale

selecteur {
  propriété1:valeur;
  propriété2:valeur;
}

selecteur1,
selecteur2 {
  propriété:valeur;
}

multi-sélecteurs

p, h1 {
  color:blue;
}

style.css

tous les p ET tous les h1

👩🏽‍💻code

Quelques propriétés CSS

color

red

#ff00ff

rgba(255, 0, 255, 0.5)

font-weight

normal;

bold;

font-size

24px

text-align

left

center

right

text-transform

none

Lorem ipsum, dolor sit amet consectetur adipisicing elit.

uppercase

LOREM IPSUM, DOLOR SIT AMET CONSECTETUR ADISPISICING ELIT.

font-family

sans-serif;

cursive;

text-decoration

underline;
none;

border

1px solid black;

3px dashed;

box model

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae mauris volutpat, placerat tortor sit amet, mollis leo.

bordure (visible ou non)

contenu

Dessine moi une balise

padding

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae mauris volutpat, placerat tortor sit amet, mollis leo.

padding : marge interne

p {
  padding:50px;
}

padding

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae mauris volutpat, placerat tortor sit amet, mollis leo.

margin

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae dolorum placerat quaerat recusandae error eaque fugit non Lorem adipiscing ipsum dolor sit amet aliquam metus mollis mauris volutpat, placerat tortor sit amet, mollis leo.

margin : marge externe

p {
  margin:20px;
}

margin

Styles par défaut du navigateur

body : margin

h1 : margin-top margin-bottom font-size

p : margin-top margin-bottom

ul : padding-left list-style

a : color text-decoration

Sélecteurs

p, ul

#xp

.location

JavaScript

<!DOCTYPE html>
<html lang="fr">
  <head>
    {Tête}
  </head>
  <body>
    {Corps}

    <script></script>
  </body>
</html>

👩🏽‍💻code

<script>
alert("bonjour!")
</script>

👩🏽‍💻code

Créons un fichier js

hello.html

style.css

program.js

👩🏽‍💻code

👩🏽‍💻code

alert("Bonjour !");

👩🏽‍💻code

Instruction1; Instruction2;

Instruction1;
Instruction2;

alert("Bonjour !");
alert("Ça va ?");

👩🏽‍💻code

program.js

commentaires

/*
je suis un commentaire
multi-lignes
*/

👩🏽‍💻code

program.js

alert("salut"); // commentaire de fin de ligne

👩🏽‍💻code

variables

Instruction1;
Instruction2;

🐟

var message = "hey";

...

alert(message);

🐟

🧠

"hey"

message

👩🏽‍💻code

program.js

Carte Google maps

voir la documentation

👩🏽‍💻code

Avant la fermeture du </body>

<script src="program.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap&key=AIzaSyBpGpPE0UBhpXIil7Og5frlvJAncWi_jTU"></script>

hello.html

👩🏽‍💻code

Dans program.js

var mapElement = document.getElementById('map');

👩🏽‍💻code

Dans program.js

var mapElement = document.getElementById('map');

// Paramétrage de la carte
var mapOptions = {
  zoom: 14,
  center: {
    lat: 48.8566,
    lng: 2.3522
  }
};

👩🏽‍💻code

var mapElement = document.getElementById('map');

// Paramétrage de la carte
var mapOptions = {
  zoom: 14,
  center: {
    lat: 48.8566,
    lng: 2.3522
  }
};

// Création de la carte
function initMap() {
  new google.maps.Map(mapElement, mapOptions);
}

https://snazzymaps.com/style/80/cool-grey

Bonus : styles map option

THE END

des questions ?