FRONT-END WEB
DEVELOPMENT
INTRODUCTIONS



WELCOME TO
GENERAL
ASSEMBLY
FRONT-END WEB DEVELOPMENT INFO SESSION   3

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
INTRODUCTIONS


ABOUT GENERAL ASSEMBLY
Front-end Web Dev (HK) Info Session
INTRODUCTIONS


OUR CORE VALUES
CORE VALUES


PEOPLE BEFORE THE
MACHINE.
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.
CORE VALUES


LEARNING BY DOING.
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.
CORE VALUES


JOURNEY OVER DESTINATION.
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.
INTRODUCTIONS


MEET YOUR INSTRUCTORS
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
INTRODUCTIONS


WHAT IS WEB
DEVELOPMENT?
WHAT IS WEB DEVELOPMENT?   14
WHAT IS WEB DEVELOPMENT?                                   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
INTRODUCTIONS


POWERED BY WEB
DEVELOPMENT
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.
WHY LEARN WEB DEVELOPMENT?	
   20

Top languages
INTRODUCTIONS


WHY LEARN WEB
DEVELOPMENT?
WHY LEARN WEB DEVELOPMENT?                             22

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  
FRONT-END WEB DEVELOPMENT


WHAT CAN I EXPECT TO
LEARN?
FRONT-END WEB DEVELOPMENT     24

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

UNIT 1: HTML & CSS
‣    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
THE SYLLABUS                                 26

UNIT 2: JAVASCRIPT
‣    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
THE SYLLABUS                                               27

YOU’LL BE ABLE TO….
Ø    HTML5           Ø    SEO
Ø    CSS3            Ø    FTP
Ø    JavaScript      Ø    Version control using GitHub
Ø    jQuery          Ø    Best Practices
Ø    JSON            Ø    Project Planning
                      Ø    Professional Workflow
FRONT-END WEB DEVELOPMENT


WHAT WILL
WE CREATE?
PREVIOUS GRADUATES’ CREATIONS                                29

‣    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#
INTRODUCTIONS


WHAT DOES IT MEAN TO
BE A GA STUDENT?
GA STUDENT PERKS                                       31

COMMUNITY
  •    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
FRONT-END WEB DEVELOPMENT                               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…
FRONT-END WEB DEVELOPMENT   35


Q&A

More Related Content

PDF
The Frontend Developer Landscape Explained and the Rise of Advanced Frontend ...
PDF
Intro js-nov-7
PDF
Beginner's Guide to Frontend Development: Comparing Angular, React, Ember, an...
PDF
Intro js-la-12-18
PDF
Intro js-la-jan-4
KEY
Web education, and the Opera web standards curriculum
KEY
RailsBridge Presentation
PDF
Portfolio121109
The Frontend Developer Landscape Explained and the Rise of Advanced Frontend ...
Intro js-nov-7
Beginner's Guide to Frontend Development: Comparing Angular, React, Ember, an...
Intro js-la-12-18
Intro js-la-jan-4
Web education, and the Opera web standards curriculum
RailsBridge Presentation
Portfolio121109

What's hot (20)

PDF
NodeConfLondon - Making ES6 happen with ChakraCore and Node
PPTX
Lessons learned as a Shell Oil Project Communication Consultant
PPTX
Build a better(reactive) word press
PDF
[DevDay2018] Javascript on the Rise - By Trang Tran, Co-founder & Manager at ...
PDF
Turning a community into evangelism helpers - Devrelconf 2016
PDF
JavaScript is a buffet - Scriptconf 2017 keynote
PDF
Progressive Web Apps – the return of the web? Goto Berlin 2016
PDF
Turning huge ships - Open Source and Microsoft
PDF
Real solutions, no tricks
PPTX
Real World Windows 8 Apps in JavaScript
PDF
Welcome to the RIAworld
PDF
웹(web)의 현재와 미래(1)
PPTX
The Final Frontier
PDF
J2EE6_DevelopWebServices_00_Preample
PDF
Thinkful FrontEnd Crash Course - HTML & CSS
PDF
Frontend Crash Course
ODP
Starting a Software Developer Career
PDF
Thinkful DC FrontEnd Crash Course - HTML & CSS
PPTX
How to Win Friends and Influence Standards Bodies
PDF
Frontend Crash Course
NodeConfLondon - Making ES6 happen with ChakraCore and Node
Lessons learned as a Shell Oil Project Communication Consultant
Build a better(reactive) word press
[DevDay2018] Javascript on the Rise - By Trang Tran, Co-founder & Manager at ...
Turning a community into evangelism helpers - Devrelconf 2016
JavaScript is a buffet - Scriptconf 2017 keynote
Progressive Web Apps – the return of the web? Goto Berlin 2016
Turning huge ships - Open Source and Microsoft
Real solutions, no tricks
Real World Windows 8 Apps in JavaScript
Welcome to the RIAworld
웹(web)의 현재와 미래(1)
The Final Frontier
J2EE6_DevelopWebServices_00_Preample
Thinkful FrontEnd Crash Course - HTML & CSS
Frontend Crash Course
Starting a Software Developer Career
Thinkful DC FrontEnd Crash Course - HTML & CSS
How to Win Friends and Influence Standards Bodies
Frontend Crash Course
Ad

Viewers also liked (20)

PPTX
Basics of Front End Web Dev PowerPoint
PDF
League of extraordinary front end dev tools
DOCX
Anyanwu Emmanuel Stock Handler
PPT
Introduction to AngularJS
PPT
Introduction to JavaScript
PDF
BMSHanna_N_CV
PPTX
Trends and innovations in web development course
PDF
Front-End Frameworks: a quick overview
PPTX
Complete Web Development Course - Make Cash Earning Websites
PDF
Introduction to Front End Engineering
PPTX
Front-end Engineering Concepts
PDF
Professional Front End Development
PDF
Modern Front-End Development
PDF
Introduction to Design Pattern
PDF
Website Redesign Presentation
PPT
Class 1 - World Wide Web Introduction
PPT
Class 2 - Introduction to PHP
PDF
Understand front end developer
PDF
reveal.js 3.0.0
PPTX
Web Application Performance
Basics of Front End Web Dev PowerPoint
League of extraordinary front end dev tools
Anyanwu Emmanuel Stock Handler
Introduction to AngularJS
Introduction to JavaScript
BMSHanna_N_CV
Trends and innovations in web development course
Front-End Frameworks: a quick overview
Complete Web Development Course - Make Cash Earning Websites
Introduction to Front End Engineering
Front-end Engineering Concepts
Professional Front End Development
Modern Front-End Development
Introduction to Design Pattern
Website Redesign Presentation
Class 1 - World Wide Web Introduction
Class 2 - Introduction to PHP
Understand front end developer
reveal.js 3.0.0
Web Application Performance
Ad

Similar to Front-end Web Dev (HK) Info Session (20)

PPTX
Web Development
PDF
Do Try This At Home Ajax Bookmarking, Cross Site Scripting, And Other Web 2 ...
PDF
Decoupled Drupal and Gatsby in the Real World
PDF
Mastering Web Development_ The Ultimate Course.pdf
PDF
Stapling and patching the web of now - ForwardJS3, San Francisco
PDF
Progressing JavaScript and Apps the Web way…
DOCX
Mastering the Future with Web Development
PPTX
Web-Development-ppt.pptx for the student
PPTX
Web-Development-ppt (1).pptx
PDF
Quo vadis, JavaScript? Devday.pl keynote
PPTX
nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn
PDF
Modern Webapps
PPTX
html css presentation for the btech cse students
PPTX
Introduction to HTML, CSS, and JavaScript for Web Development
PPTX
amanWeb.ppt.pptx
PDF
Design Based Dev
PDF
Ottawa Drupalcamp 2024 Keynote: Chart Your Drupal Journey
PPTX
A COMPREHENSIVE GUIDE TO WEB DEVELOPMENT 2.pptx
PPTX
Web Development Agency in Noida in 2024 1
PPTX
best Web Development Institute in Noida.pptx
Web Development
Do Try This At Home Ajax Bookmarking, Cross Site Scripting, And Other Web 2 ...
Decoupled Drupal and Gatsby in the Real World
Mastering Web Development_ The Ultimate Course.pdf
Stapling and patching the web of now - ForwardJS3, San Francisco
Progressing JavaScript and Apps the Web way…
Mastering the Future with Web Development
Web-Development-ppt.pptx for the student
Web-Development-ppt (1).pptx
Quo vadis, JavaScript? Devday.pl keynote
nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn
Modern Webapps
html css presentation for the btech cse students
Introduction to HTML, CSS, and JavaScript for Web Development
amanWeb.ppt.pptx
Design Based Dev
Ottawa Drupalcamp 2024 Keynote: Chart Your Drupal Journey
A COMPREHENSIVE GUIDE TO WEB DEVELOPMENT 2.pptx
Web Development Agency in Noida in 2024 1
best Web Development Institute in Noida.pptx

More from Allison Baum (7)

PDF
Top 5 Reasons To Go Global
PDF
3 Ingredients for an Ed Tech Ecosystem
PDF
Ed Tech in Asia: Key Trends and Opportunities
PDF
Business Models in Education
PDF
Seven Things You Didn't Know About Hong Kong
PDF
UXD HK Info Session
PDF
Digital Marketing @ GA HK
Top 5 Reasons To Go Global
3 Ingredients for an Ed Tech Ecosystem
Ed Tech in Asia: Key Trends and Opportunities
Business Models in Education
Seven Things You Didn't Know About Hong Kong
UXD HK Info Session
Digital Marketing @ GA HK

Recently uploaded (20)

PDF
Child-friendly e-learning for artificial intelligence education in Indonesia:...
PDF
Revolutionizing recommendations a survey: a comprehensive exploration of mode...
PDF
“Introduction to Designing with AI Agents,” a Presentation from Amazon Web Se...
PPTX
Information-Technology-in-Human-Society (2).pptx
PDF
Addressing the challenges of harmonizing law and artificial intelligence tech...
PDF
The Digital Engine Room: Unlocking APAC’s Economic and Digital Potential thro...
PPTX
Information-Technology-in-Human-Society.pptx
PDF
Examining Bias in AI Generated News Content.pdf
PDF
Ebook - The Future of AI A Comprehensive Guide.pdf
PPTX
AQUEEL MUSHTAQUE FAKIH COMPUTER CENTER .
PDF
NewMind AI Journal Monthly Chronicles - August 2025
PDF
【AI論文解説】高速・高品質な生成を実現するFlow Map Models(Part 1~3)
PDF
Fitaura: AI & Machine Learning Powered Fitness Tracker
PDF
1_Keynote_Breaking Barriers_한계를 넘어서_Charith Mendis.pdf
PPTX
How to use fields_get method in Odoo 18
PDF
CCUS-as-the-Missing-Link-to-Net-Zero_AksCurious.pdf
PDF
Advancements in abstractive text summarization: a deep learning approach
PDF
TicketRoot: Event Tech Solutions Deck 2025
PDF
Domain-specific knowledge and context in large language models: challenges, c...
PDF
Uncertainty-aware contextual multi-armed bandits for recommendations in e-com...
Child-friendly e-learning for artificial intelligence education in Indonesia:...
Revolutionizing recommendations a survey: a comprehensive exploration of mode...
“Introduction to Designing with AI Agents,” a Presentation from Amazon Web Se...
Information-Technology-in-Human-Society (2).pptx
Addressing the challenges of harmonizing law and artificial intelligence tech...
The Digital Engine Room: Unlocking APAC’s Economic and Digital Potential thro...
Information-Technology-in-Human-Society.pptx
Examining Bias in AI Generated News Content.pdf
Ebook - The Future of AI A Comprehensive Guide.pdf
AQUEEL MUSHTAQUE FAKIH COMPUTER CENTER .
NewMind AI Journal Monthly Chronicles - August 2025
【AI論文解説】高速・高品質な生成を実現するFlow Map Models(Part 1~3)
Fitaura: AI & Machine Learning Powered Fitness Tracker
1_Keynote_Breaking Barriers_한계를 넘어서_Charith Mendis.pdf
How to use fields_get method in Odoo 18
CCUS-as-the-Missing-Link-to-Net-Zero_AksCurious.pdf
Advancements in abstractive text summarization: a deep learning approach
TicketRoot: Event Tech Solutions Deck 2025
Domain-specific knowledge and context in large language models: challenges, c...
Uncertainty-aware contextual multi-armed bandits for recommendations in e-com...

Front-end Web Dev (HK) Info Session

  • 3. FRONT-END WEB DEVELOPMENT INFO SESSION 3 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
  • 7. CORE VALUES PEOPLE BEFORE THE MACHINE. 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.
  • 8. CORE VALUES LEARNING BY DOING. 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.
  • 9. CORE VALUES JOURNEY OVER DESTINATION. 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.
  • 11. INTRODUCTIONS 11 YING KIT YUEN, INSTRUCTOR ‣  Founder of QPon ‣  Freelancer ‣  Best practice engineer ‣  Travelers
  • 12. INTRODUCTIONS 12 MART VAN DE VEN, INSTRUCTOR ‣  Data Architect ‣  MSc Information Design ‣  Facebook Apps ‣  G.U.I.D.E. ‣  Analytics Dashboard
  • 14. WHAT IS WEB DEVELOPMENT? 14
  • 15. WHAT IS WEB DEVELOPMENT? 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
  • 16. WHAT IS WEB DEVELOPMENT? 16 Web development also requires • A web server ‣  A computer which serves your website to the public through internet
  • 17. 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
  • 19. 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.
  • 20. WHY LEARN WEB DEVELOPMENT? 20 Top languages
  • 22. WHY LEARN WEB DEVELOPMENT? 22 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  
  • 23. FRONT-END WEB DEVELOPMENT WHAT CAN I EXPECT TO LEARN?
  • 24. FRONT-END WEB DEVELOPMENT 24 STOP TALKING, START MAKING. ‣  Theory ‣  Hands-on exercises ‣  Assessments ‣  Quizzes ‣  Final Projects ‣  Homework ‣  Office Hours ‣  Private instruction
  • 25. THE SYLLABUS 25 UNIT 1: HTML & CSS ‣  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
  • 26. THE SYLLABUS 26 UNIT 2: JAVASCRIPT ‣  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
  • 27. THE SYLLABUS 27 YOU’LL BE ABLE TO…. Ø  HTML5 Ø  SEO Ø  CSS3 Ø  FTP Ø  JavaScript Ø  Version control using GitHub Ø  jQuery Ø  Best Practices Ø  JSON Ø  Project Planning Ø  Professional Workflow
  • 29. PREVIOUS GRADUATES’ CREATIONS 29 ‣  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#
  • 30. INTRODUCTIONS WHAT DOES IT MEAN TO BE A GA STUDENT?
  • 31. GA STUDENT PERKS 31 COMMUNITY •  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
  • 32. FRONT-END WEB DEVELOPMENT 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
  • 33. FRONT-END WEB DEVELOPMENT 33 SYSTEM REQUIREMENTS ‣  Laptops are required. ‣  Mac is preferred, PC is also OK. ‣  Chrome Browser ‣  Text Editor