front-end web dev (hk) info session

FRONT-END WEB DEVELOPMENT

WELCOME TO GENERAL ASSEMBLY

INTRODUCTIONS

AGENDA ‣  About GA

‣  Meet the Instructor(s)

‣  What is Web Development?

‣  What can I expect to learn?

‣  What will we create?

‣  Student Experience

‣  Q & A

3 FRONT-END WEB DEVELOPMENT INFO SESSION

ABOUT GENERAL ASSEMBLY

INTRODUCTIONS

OUR CORE VALUES INTRODUCTIONS

PEOPLE BEFORE THE MACHINE.

CORE VALUES

While we value powerful ideas and innovative startups, the lifeblood of any community is the individuals involved. We believe in empathy and reciprocity — and that community can enable individual pursuits.

LEARNING BY DOING.

CORE VALUES

We believe that self-actualization is gained through applied, hands- on experience. We are here not to seek or to hope for the future, but actively construct it with our hands. If we get it wrong, we modify and try again; real progress only comes through reflection and relentless iteration.

JOURNEY OVER DESTINATION.

CORE VALUES

General Assembly is about the shared experience of fellow builders taking risks — about embracing failure as much as success. When great companies fail, they’re gone forever. When great people fail, they learn from their experiences and go on to pursue new ventures with a greater chance of success.

MEET YOUR INSTRUCTORS INTRODUCTIONS

INTRODUCTIONS

11

YING KIT YUEN, INSTRUCTOR

‣  Founder of QPon ‣  Freelancer ‣  Best practice engineer ‣  Travelers

INTRODUCTIONS

12

MART VAN DE VEN, INSTRUCTOR

‣  Data Architect ‣  MSc Information Design ‣  Facebook Apps ‣  G.U.I.D.E. ‣  Analytics Dashboard

WHAT IS WEB DEVELOPMENT?

INTRODUCTIONS


14


15

Basic components of web development (Building a website)

• HTML - The code of a webpage • CSS - The style of a webpage • Javasctipt - Make you webpage more dynamic

• CodePen

WHAT IS WEB DEVELOPMENT? 16

Web development also requires

• A web server ‣  A computer which serves your website to the public through internet

WHAT IS WEB DEVELOPMENT? 17

BUILDING A WEB APPLICATION

• Server side scripting language ‣  PHP ‣  Ruby ‣  Python ‣  … etc

• GA offers ‣  Backend web development ‣  Intro to Rails

POWERED BY WEB DEVELOPMENT

INTRODUCTIONS

WHY LEARN WEB DEVELOPMENT? 19

• Liberty to work, to work at liberty ‣  Global employability ‣  Many multinationals, NGOs and Governments have their own

web departments

• Transforming from a thinker to a creator

• Lead the charge for any initiative with a web strategy.

• Learn from and collaborate with the open source community.


Top languages

WHY LEARN WEB DEVELOPMENT?

INTRODUCTIONS


JavaScript is the programming lingua franca.

• FutureProof • Transferable Programming Concepts / Syntax • Interact just about any third-party API • Customise the applications of the future • Build native apps for Windows 8 / Windows Phone 8 • Apps for Android and Iphone • Server-side language : Node.JS

WHAT CAN I EXPECT TO LEARN?



24

STOP TALKING, START MAKING. ‣  Theory ‣  Hands-on exercises ‣  Assessments ‣  Quizzes ‣  Final Projects ‣  Homework ‣  Office Hours ‣  Private instruction

‣  Lecture 1: Overview and HTML ‣  Lecture 2: HTML Basics & CSS ‣  Lecture 3: Advanced CSS ‣  Lecture 4: Page Layout ‣  Lecture 5: Page Layout ‣  Lecture 6: Navigation & Sprites ‣  Lecture 7: Lab Project: Busy Hands ‣  Lecture 8: Grid Based Design / Typography ‣  Lecture 9: HTML5 & CSS3 ‣  Lecture 10: Responsive Design & Midterm Project Code Review

25 THE SYLLABUS

UNIT 1: HTML & CSS

‣  Lecture 11: Variables and Data Types ‣  Lecture 12: Conditional Logic ‣  Lecture 13: JavaScript Objects ‣  Lecture 14: Functions ‣  Lecture 15: The DOM and Selectors ‣  Lecture 16: jQuery ‣  Lecture 17: Events ‣  Lecture 18: External Services ‣  Lecture 19: Final Project Lab ‣  Lecture 20: Final Project Lab & Review

26 THE SYLLABUS

UNIT 2: JAVASCRIPT

Ø  HTML5

Ø  CSS3

Ø  JavaScript

Ø  jQuery

Ø  JSON

Ø  SEO

Ø  FTP

Ø  Version control using GitHub

Ø  Best Practices

Ø  Project Planning

Ø  Professional Workflow

27 THE SYLLABUS

YOU’LL BE ABLE TO….

WHAT WILL WE CREATE?


‣  Useful ‣  The Reddit Edit - http://www.redditedit.com/#

‣  Beautiful ‣  The Dressing Room -

https://dl.dropbox.com/u/5800749/Flipp/index.html ‣  Technical

‣  CSSettlers of Catan - http://lenli.github.com/CSSettlers/index.html#

29 PREVIOUS GRADUATES’ CREATIONS

WHAT DOES IT MEAN TO BE A GA STUDENT?

INTRODUCTIONS

•  Outcome focused: build a website from scratch •  Practical, dynamic content

•  Strong, diverse community of makers

•  Personalized instruction and support •  3 free classes to supplement your coursework

•  Permanent access to all course resources

31 GA STUDENT PERKS COMMUNITY


32

THE DETAILS ‣  April 8th – June 12th, 2013 ‣  Meets Mondays and Wednesdays from 7-10pm at CoCoon ‣  Tuition is $25,000HKD ‣  Payment plans are available ‣  No pre-requisites ‣  Maximum class size of 20 people ‣  Registration ends April 1st

FRONT-END WEB DEVELOPMENT 33

SYSTEM REQUIREMENTS ‣  Laptops are required. ‣  Mac is preferred, PC is also OK. ‣  Chrome Browser ‣  Text Editor

THE EARLY BIRD…

Q&A 35 FRONT-END WEB DEVELOPMENT

front-end web dev (hk) info session

Technology