ui / ux developer crashcourse

UI / Ux for startupsFRONT END DEVELOPMENT

AGENDA

Day 1 “ Introduction to Web World”What is the WEB (www)Web Industry Career OptionsWhat does a Front End Developer doWhat IS the Front End Developer ToolsGetting started HTML5 “ hello World i am a UI Developer ”Best resources & Practice


AGENDA

Day 2 “ layout and animation ”What Is CSSCSS SyntaxSelectorsHow and where to write CSSWhats new in CSS3 “let’s animate”Best resources & Practice


AGENDA

Day 3 “Responsive Trend”What Is the frameworksWhat is the responsive layoutMobile Adaptive & responsiveHow to Build responsive layout using “Bootstrap”Best resources & Practice


AGENDA

Day 4 “Let’s do more..”What is JqueryJquery SyntaxWorking with the common eventsRetriving and manipulating page contentJquery animation and effectsBest resources & Practice

1- What Is the Web

The World Wide Web has percolated into our lives almostcompletely. It is now difficult to imagine our lives withoutthe effects of social media, the internet and essentialservices such as E-Mail.


”

“

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 browserwww.google.com

the browser send request toISP

The ISP check the domainserver to find the ip address

The request is forworded overthe internet to the Google’swebserver

It sent back toy your Your browser shows up thewebsite that you are requested

Google.com fetches the contentfrom 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 numberof them getting added every second, there is an urgent and

massive demand for content creators.


2- What Is the Web industry

Resources ProductsOperating 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 thedifferencebetween UIand UX?


The same diffrentbetween 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?

“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

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

Internet