Welcome to the

ACADEMY
Why the World needs more

Front End
DEVELOPERS
vnmocanu • viorel.mocanu@everymatrix.com
Why the World needs more
G O OD
Front End
DEVELOPERS
vnmocanu • viorel.mocanu@everymatrix.com
What’s the
Web for?
Jeffrey Zeldman Sir Tim Berners-Lee

Offering content & experiences to people

irresepective of platform and context.
A good site, built in the true spirit of the Web, works
and feels right on any platform. Ideally...
This seems obvious, doesn’t it?
That’s because building sites for
the Web involves a lot of
COMMON SENSE
That’s the main ingredient for suc-
cessful professionals in this field.
The Web for visitors:
The Web for visitors:

SITE
The Web for visitors:
SERVER
(magic!) SITE
The Web for visitors:
HTML
SERVER
CSS
(magic!)
JS
etc.
 The Web for visitors:
» HTML
» CSS
» JS
» other resources
 The Web for visitors:
» HTML formal language
defines the format of the content

» CSS
» JS
» other resources
 The Web for visitors:
» HTML
» CSS presentational language
styles the existing HTML structure

» JS
» other resources
 The Web for visitors:
» HTML
» CSS
» JS functional language
manages interactions and processes

» other resources
 The Web for visitors:
» HTML
» CSS
» JS
» other resources
graphical artifacts and other helpful elements
 What did we forget?
The Web for visitors:
» HTML
» CSS
» JS
» other resources
 What did we forget?

CONTENT
The Web for visitors:
» HTML
» CSS
» JS
» other resources
Communicating the content
must be the end goal of any
Web page. Everything revolves
around interacting with the
content and making the user
feel at ease while doing that.
Communication is a
building...
HTML
Architectural plan, structural resistance
CSS
Interior design, finishes, utilities
JS
Stairs, electricity, water, heating, furniture
So we have a course now.
So we have a course now.
Why?
Stats!
How do you
turn this...
Into this...
Into this...
Into this...
Into this?
The Web is our platform
of choice.

Hence, we need to be able to

write good HTML/CSS.
So we have a course now.
Why?
What will I learn?
HTML
 Semantics
HTML
Validation
Accessibility
Information architecture
CSS
 Photoshop 101
CSS
Basic styling
Animation & SFX
Responsive design
Real work
 Tools of the trade
Real work
Usability
Mobile-first RWD
Angular Templating
=9 weeks
The basics
can be
taught to
12 yo
kids.
Example
. .to prove to you that you can leave this
meeting with a small part of what you’ll
know after you finish the course.
The anatomy of HTML:
1. Content
<p>This is a paragraph.</p>

2. Tags
<p>This is a paragraph.</p>

3. Attributes
<p class=”Example”>This is a paragraph.</p>
HTML Semantics:
<p>This is a paragraph.</p>

<h1>This is the most important title in the page.</h1>

<div class=”vcard”>
<img class=”photo” src=”http://www.x.com/photo.jpg” />
<h1 class=”fn”>Forrest Gump</h1>
<div class=”email”>
<a class=”value” href=”mailto:fg@x.com”>fg@x.com</a>
</div>
</div>
Content:
<p>This is a paragraph.</p>

<h1>This is the most important title in the page.</h1>

<div class=”vcard”>
<img class=”photo” src=”http://www.x.com/photo.jpg” />
<h1 class=”fn”>Forrest Gump</h1>
<div class=”email”>
<a class=”value” href=”mailto:fg@x.com”>fg@x.com</a>
</div>
</div>
Form + meaning:
PARAGRAPH:
<p>This is a paragraph.</p>
TITLE:
<h1>This is the most important title in the page.</h1>
MICROFORMAT:
<div class=”vcard”>
<img class=”photo” src=”http://www.x.com/photo.jpg” />
<h1 class=”fn”>Forrest Gump</h1>
<div class=”email”>
<a class=”value” href=”mailto:fg@x.com”>fg@x.com</a>
</div>
</div>
Cascading Style Sheets:
1. Identifiers
p { color: black; }
.Example { background: red; }

2. Attributes
p { color: black; }
.Example { background: red; }
Cascading Style Sheets:
3. Cascade & specificity
p { color: black; }

<p class=”Example”>I am green</p>

Cascading Style Sheets:
3. Cascade & specificity
p { color: black; }
p { color: red; }

<p class=”Example”>I am green</p>

Cascading Style Sheets:
3. Cascade & specificity
p { color: black; }
p { color: red; }
p.Example { color: green; }

<p class=”Example”>I am green</p>

Cascading Style Sheets:
3. Cascade & specificity
p { color: black; }
p { color: red; }
p.Example { color: green; }
p { color: yellow; }

<p class=”Example”>I am green</p>

So we have a course now.
Why?
What will I learn?
Who will coordinate?
Viorel Mocanu
Design Director
Designer & Front End Developer

Helped by:
Andreea Dincă
Chairman of EM Academy
So we have a course now.
Why?
What will I learn?
Who will coordinate?
Where & for how long?
June 29th – August 28th
09:00–18:00 (Full time!)
M6, 1st Floor (EM Academy HQ)

Viorel will be with you:

1h / day (16:00–17:00) = Tutoring
1 workshop / week (Fridays)
So we have a course now.
Why?
What will I learn?
Who will coordinate?
Where & for how long?
What will you get?
 You get:
» Your own classroom
» Books
» Online resources & tutorials
» Goodies
» Homework
» A job! (if you want to change it)
So we have a course now.
Why?
What will I learn?
Who will coordinate?
Where & for how long?
What will you get?
How can you qualify?
 You need:
» A very open mind
» An appreciation for
common sense
» Interest in the Web
» To apply (details coming soon)
 Other FAQ:
» Will my team leader agree?
» Will I be able to attend only
in my spare time?
» Will this automatically mean
a job change?
» Will I get a certificate?
Best part of it is...
 Best part of it is...

it’s REALLY fun!

Thank you!
Questions?
vnmocanu • viorel.mocanu@everymatrix.com