HTML / CSS
pour TOUS
® Alex DUVAL
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 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
%
em
LIVECODE
FEEDBACK
HTML 4 ALL
By Alex Duval
HTML 4 ALL
LeMug - 10 juillet 2019
