HTML / CSS

pour TOUS

® Alex DUVAL

https://html4all.now.sh

VOUS

en 45 sec

Prénom

HTML - CSS oui/non

POURQUOI - ATTENTES

ALEX DUVAL

FULL STACK Dev

my PLAN for YOU

Tools

Google Chrome

VisualStudioCode

Extensions:

Emmet - Material Icon

GitHub

Collaboration tools - Versioning - Backup

Web serve access

WEB

BASICS knowledge

MARKUP language

( === structure )

LIVECODE

HTML SKELETON

<html>
  <head>


  </head>
  <body>

  </body>
</html>

HEAD TAG

DEMO

BODY TAG

<a href="http://lemug-coworking.fr/" target="_blank">
  Le Mug
</a>

EXAMPLE

Le Mug

le lien

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

<h2>[...]</h2>
<h3>[...]</h3>
<h4>[...]</h4>
<h5>[...]</h5>
<h6>[...]</h6>

TILTES

<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


<ul>
  <li>Google chrome</li>
  <li>Sketch</li>
  <li>AppStore</li>
</ul>

<h2>World Cup 2018</h2>
<ol>
  <li>FRANCE</li>
  <li>Croatia</li>
  <li>Belgium</li>
  <li>....losers</li>
</ol>

LISTS

<img src="logo.png" alt="Mon logo">

IMAGES

<p>
  You can emphasize <em>some words</em>,
  and even <strong>more if needed</strong>
</p>

EMPHASIZE

<table>
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alex</td>
      <td>DUVAL</td>
    </tr>
    [...]
  </tbody>
</table>

TABLES

<form>
  <input type="email">
  <input type="password">
  <input type="submit" value="Log in">
</form>

FORMS

LIVECODE

COLORS

color: #FF530D;
color: rgb(255, 83, 13);
color: rgba(255, 83, 13, 1.0);

Shades of grey

color: rgb(20, 20, 20);
or
color: rgb(102, 102, 102);
color: rgb(x, x, x);

LIVECODE

MDN web docs

DEVDOCS.io

BOX MODEL

DIV concept

demo

Properties

width

height

padding

margin

boder

border-radius

box-shadows

...

UNITS

pixels

LIVECODE

FEEDBACK

https://html4all.now.sh