HTML / CSS
DAY ONE
® Alex DUVAL
One by one
Own gear ? PC - Mac - Linux
Do you code before ?
HTML / CSS ...? What's that ????
WHY
ALEX DUVAL
FULL STACK
DESIGN + CODE
my PLAN for YOU
?
PRO TIPS
DO
READ
BE CURIOUS
TODAY'OBJECTIVES
TOOLLING
Learn BASICS knowledge
FIRST WEBPAGE with simple design
DevTools
Google Chrome
VisualStudioCode
Extensions:
Emmet - Material Icon - Live server
GitHub
Collaboration tools - Versioning - Backup
Web serve access
WEB
BASICS knowledge
MARKUP language
( === structure )
demo
HTML SKELETON
<html>
<head>
</head>
<body>
</body>
</html>
HEAD TAG
demo
BODY TAG
<a href="https://www.mydigitalschool.com/" target="_blank">
My Digital School
</a>EXAMPLE
le lien
<h1>[...]</h1> <!-- Only one per page! SEO important -->
<h2>[...]</h2>
<h3>[...]</h3>
<h4>[...]</h4>
<h5>[...]</h5>
<h6>[...]</h6>HEADINGS
Titles
<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
<h2>Application List</h2>
<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="My awesome 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
BOX MODEL
DIV concept
demo
Properties
width
height
padding
margin
boder
border-radius
box-shadows
...
UNITS
pixels
%
em
livecode
HTML / CSS - Day One
By Alex Duval
HTML / CSS - Day One
My Digital School - Annecy
