Ui / UX developer crashcourse

UI / Ux for startups
FRONTENDDEVELOPMENT
AGENDA
Day 1 “ Introduction to Web World”
What is the WEB (www)
Web Industry Career Options
What does a Front End Developer do
What IS the Front End Developer Tools
Getting started HTML5 “ hello World i am a UI Developer ”
Best resources & Practice

FRONTENDDEVELOPMENT
AGENDA
Day 2 “ layout and animation ”
What Is CSS
CSS Syntax
Selectors
How and where to write CSS
Whats new in CSS3 “let’s animate”

FRONTENDDEVELOPMENT
AGENDA
Day 3 “Responsive Trend”
What Is the frameworks
What is the responsive layout
Mobile Adaptive & responsive
How to Build responsive layout using “Bootstrap”

FRONTENDDEVELOPMENT
AGENDA
Day 4 “Let’s do more..”
What is Jquery
Jquery Syntax
Working with the common events
Retriving and manipulating page content
Jquery animation and effects

1- What Is the Web
The World Wide Web has percolated into our lives almost
completely. It is now difficult to imagine our lives without
the effects of social media, the internet and essential
services such as E-Mail.
UI / Ux for startupsFRONTENDDEVELOPMENT
”
“

So how does it all work ??

Web UsersWeb Servers
All Computers must have ID in the internet world
Every device on internet must have an address IP address
ISP (internet Service Provider
200.16.240.100
164.121.15.20
164.121.15.40

you type URL in browser
www.google.com
the browser send request to
ISP
The ISP check the domain
server to find the ip address
The request is forworded over
the internet to the Google’s
webserver
It sent back toy your Your browser shows up the
website that you are requested
Google.com fetches the content
from it’s datacenter
To live in the internet world
you must have id (IP)
and talk the same language (HTTP)

With so many connected devices and an exponential number
of them getting added every second, there is an urgent and
massive demand for content creators.

2- What Is the Web industry
Resources Products
Operating systems
Programing languages
Frameworks
Platforms
Man power
Websites
Web applications
Smart devices applications
Online Games

All of this products have the same concept
back ENDFront END

FRONT END TECHNOLOGIES

Back END TECHNOLOGIES

2.2- Career options
Web Designers
Photoshop + Illustrator + Fireworks
Web Developers
PHP + MySQL / MS.net + MS SQL Server
UI/UX Designers
Photoshop + Illustrator
+ HTML5 + CSS3 + JS
Front End Developers
HTML5 + CSS3 + Javascript
Mobile App Developers
Objective C / Java / HTML5+CSS3+JS
Database Designers
MySQL / MS SQL Server
Graphic Designers & Animators
Photoshop + Illustrator
+ HTML5 + CSS3 + Javascript
Copywriters
A Very strong command on the English
language and strong verbal + writing
skills
Technology Specialists
Specialists in specific technologies /
implementations

What is the
difference
between UI
and UX?

The same diffrent
between look
And feel

3- What does a Front End Developer do
Create clear, easy, fast user interfaces
Basically everything that you as a user of the website can see

4- What is the Front End Developer Tools
www.sublimetext.com/

‫ﺍﻟﺸﻐﻞ‬ ‫ﺗﻈﺒﻴﻂ‬ ‫ﺍﻟﺸﻐﻞ‬ ‫ﻣﻦ‬ ‫ﺍﻫﻢ‬

Client name
Project name
Assets

"The world is moving to HTML5"
—Steve Jobs, Apple
5- Why HTML?
"The Web has not seen this level of transformation, this level of acceleration, in the past ten
years… we're betting big on HTML5"
—Vic Gundotra, VP of Engineering, Google
“If you want to do something universal, there is no question, the world is going HTML5. That is
clear...The world is just pushing down this HTML5 path and so are we.
—Steve Ballmer, CEO Microsoft

HTML5" is the #1 job trend - the fastest growing keyword found in online job postings”

5.2- History of HTML5?
December 1997: HTML 4.0 is published by the W3C
February - March 1998: Extensible Markup Language - XML 1.0 is published
December 1999 - January 2000: XHTML 1.0 (Basically HTML tags
reformulated in XML) and, HTML 4.01 recommendations are published
May 2001: XHTML 1.1 recommendation is published
August 2002: XHTML 2.0 first working draft is released.
December 2002: XHTML 2.0 second working draft published.
January 2008: First W3C working draft of HTML5 is published!!

5.3- Vision of HTML5?
84% of Developers Plan to Adopt Key HTML5 Features
The key to understanding HTML5 is that it is not one, but a group of
technologies. Within HTML5, developers have a tremendous amount
of choice regarding what they use and what they don’t use
The power of HTML5 being ready for prime-time can be seen in Mi-
crosoft’s choice to utilize it in Windows 8

5- Getting started HTML 5
Hello World am a UI Developer

5- Getting started HTML 5
DOCTYPE HTML
HTML Syntax
Container Tags
Content tags
Atributes
HTML5 Semantic Elements

6- Best Resources
www.w3schools.com
www.html5rocks.com
www.caniuse.com

Thank You

Ui / UX developer crashcourse

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (10)

Similar to Ui / UX developer crashcourse

Similar to Ui / UX developer crashcourse (20)

Recently uploaded

Recently uploaded (20)

Ui / UX developer crashcourse