SlideShare a Scribd company logo
1 of 35
Download to read offline
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
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

What's hot

NodeConfLondon - Making ES6 happen with ChakraCore and Node
NodeConfLondon - Making ES6 happen with ChakraCore and NodeNodeConfLondon - Making ES6 happen with ChakraCore and Node
NodeConfLondon - Making ES6 happen with ChakraCore and NodeChristian Heilmann
 
Lessons learned as a Shell Oil Project Communication Consultant
Lessons learned as a Shell Oil Project Communication ConsultantLessons learned as a Shell Oil Project Communication Consultant
Lessons learned as a Shell Oil Project Communication Consultantleadchangeagent
 
Build a better(reactive) word press
Build a better(reactive) word pressBuild a better(reactive) word press
Build a better(reactive) word pressBhushan Jawle
 
[DevDay2018] Javascript on the Rise - By Trang Tran, Co-founder & Manager at ...
[DevDay2018] Javascript on the Rise - By Trang Tran, Co-founder & Manager at ...[DevDay2018] Javascript on the Rise - By Trang Tran, Co-founder & Manager at ...
[DevDay2018] Javascript on the Rise - By Trang Tran, Co-founder & Manager at ...DevDay.org
 
Turning a community into evangelism helpers - Devrelconf 2016
Turning a community into evangelism helpers - Devrelconf 2016Turning a community into evangelism helpers - Devrelconf 2016
Turning a community into evangelism helpers - Devrelconf 2016Christian Heilmann
 
JavaScript is a buffet - Scriptconf 2017 keynote
JavaScript is a buffet - Scriptconf 2017 keynoteJavaScript is a buffet - Scriptconf 2017 keynote
JavaScript is a buffet - Scriptconf 2017 keynoteChristian Heilmann
 
Progressive Web Apps – the return of the web? Goto Berlin 2016
Progressive Web Apps – the return of the web? Goto Berlin 2016Progressive Web Apps – the return of the web? Goto Berlin 2016
Progressive Web Apps – the return of the web? Goto Berlin 2016Christian Heilmann
 
Turning huge ships - Open Source and Microsoft
Turning huge ships - Open Source and MicrosoftTurning huge ships - Open Source and Microsoft
Turning huge ships - Open Source and MicrosoftChristian Heilmann
 
How to Apply Agile Framework by Product Manager Assigned at ESPN
 How to Apply Agile Framework by Product Manager Assigned at ESPN How to Apply Agile Framework by Product Manager Assigned at ESPN
How to Apply Agile Framework by Product Manager Assigned at ESPNProduct School
 
Real World Windows 8 Apps in JavaScript
Real World Windows 8 Apps in JavaScriptReal World Windows 8 Apps in JavaScript
Real World Windows 8 Apps in JavaScriptDomenic Denicola
 
Welcome to the RIAworld
Welcome to the RIAworldWelcome to the RIAworld
Welcome to the RIAworldSergio Brito
 
웹(web)의 현재와 미래(1)
웹(web)의 현재와 미래(1)웹(web)의 현재와 미래(1)
웹(web)의 현재와 미래(1)mosaicnet
 
J2EE6_DevelopWebServices_00_Preample
J2EE6_DevelopWebServices_00_PreampleJ2EE6_DevelopWebServices_00_Preample
J2EE6_DevelopWebServices_00_PreampleMichael Mountrakis
 
Thinkful FrontEnd Crash Course - HTML & CSS
Thinkful FrontEnd Crash Course - HTML & CSSThinkful FrontEnd Crash Course - HTML & CSS
Thinkful FrontEnd Crash Course - HTML & CSSTJ Stalcup
 
Starting a Software Developer Career
Starting a Software Developer CareerStarting a Software Developer Career
Starting a Software Developer CareerAleksejs Truhans
 
Thinkful DC FrontEnd Crash Course - HTML & CSS
Thinkful DC FrontEnd Crash Course - HTML & CSSThinkful DC FrontEnd Crash Course - HTML & CSS
Thinkful DC FrontEnd Crash Course - HTML & CSSTJ Stalcup
 
How to Win Friends and Influence Standards Bodies
How to Win Friends and Influence Standards BodiesHow to Win Friends and Influence Standards Bodies
How to Win Friends and Influence Standards BodiesDomenic Denicola
 

What's hot (20)

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

Viewers also liked

Basics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPointBasics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPointSahil Gandhi
 
League of extraordinary front end dev tools
League of extraordinary front end dev toolsLeague of extraordinary front end dev tools
League of extraordinary front end dev toolsSherif Tariq
 
Anyanwu Emmanuel Stock Handler
Anyanwu Emmanuel Stock HandlerAnyanwu Emmanuel Stock Handler
Anyanwu Emmanuel Stock HandlerEmmanuel Anyanwu
 
Introduction to AngularJS
Introduction to AngularJSIntroduction to AngularJS
Introduction to AngularJSAnass90
 
Introduction to JavaScript
Introduction to JavaScriptIntroduction to JavaScript
Introduction to JavaScriptAnass90
 
Trends and innovations in web development course
Trends and innovations in web development course Trends and innovations in web development course
Trends and innovations in web development course Dr. Shikha Mehta
 
Front-End Frameworks: a quick overview
Front-End Frameworks: a quick overviewFront-End Frameworks: a quick overview
Front-End Frameworks: a quick overviewDiacode
 
Complete Web Development Course - Make Cash Earning Websites
Complete Web Development Course - Make Cash Earning WebsitesComplete Web Development Course - Make Cash Earning Websites
Complete Web Development Course - Make Cash Earning Websitesbuenosdias1989
 
Introduction to Front End Engineering
Introduction to Front End EngineeringIntroduction to Front End Engineering
Introduction to Front End EngineeringMark Meeker
 
Front-end Engineering Concepts
Front-end Engineering ConceptsFront-end Engineering Concepts
Front-end Engineering ConceptsSameer Karve
 
Professional Front End Development
Professional Front End DevelopmentProfessional Front End Development
Professional Front End Developmentnelsonmenezes
 
Modern Front-End Development
Modern Front-End DevelopmentModern Front-End Development
Modern Front-End Developmentmwrather
 
Introduction to Design Pattern
Introduction to Design  PatternIntroduction to Design  Pattern
Introduction to Design PatternSanae BEKKAR
 
Website Redesign Presentation
Website Redesign PresentationWebsite Redesign Presentation
Website Redesign Presentationjoanat
 
Class 1 - World Wide Web Introduction
Class 1 - World Wide Web IntroductionClass 1 - World Wide Web Introduction
Class 1 - World Wide Web IntroductionAhmed Swilam
 
Class 2 - Introduction to PHP
Class 2 - Introduction to PHPClass 2 - Introduction to PHP
Class 2 - Introduction to PHPAhmed Swilam
 
Understand front end developer
Understand front end developerUnderstand front end developer
Understand front end developerHsuan Fu Lien
 
Web Application Performance
Web Application PerformanceWeb Application Performance
Web Application PerformanceCodeFireTech
 

Viewers also liked (20)

Basics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPointBasics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPoint
 
League of extraordinary front end dev tools
League of extraordinary front end dev toolsLeague of extraordinary front end dev tools
League of extraordinary front end dev tools
 
Anyanwu Emmanuel Stock Handler
Anyanwu Emmanuel Stock HandlerAnyanwu Emmanuel Stock Handler
Anyanwu Emmanuel Stock Handler
 
Introduction to AngularJS
Introduction to AngularJSIntroduction to AngularJS
Introduction to AngularJS
 
Introduction to JavaScript
Introduction to JavaScriptIntroduction to JavaScript
Introduction to JavaScript
 
BMSHanna_N_CV
BMSHanna_N_CVBMSHanna_N_CV
BMSHanna_N_CV
 
Trends and innovations in web development course
Trends and innovations in web development course Trends and innovations in web development course
Trends and innovations in web development course
 
Front-End Frameworks: a quick overview
Front-End Frameworks: a quick overviewFront-End Frameworks: a quick overview
Front-End Frameworks: a quick overview
 
Complete Web Development Course - Make Cash Earning Websites
Complete Web Development Course - Make Cash Earning WebsitesComplete Web Development Course - Make Cash Earning Websites
Complete Web Development Course - Make Cash Earning Websites
 
Introduction to Front End Engineering
Introduction to Front End EngineeringIntroduction to Front End Engineering
Introduction to Front End Engineering
 
Front-end Engineering Concepts
Front-end Engineering ConceptsFront-end Engineering Concepts
Front-end Engineering Concepts
 
Professional Front End Development
Professional Front End DevelopmentProfessional Front End Development
Professional Front End Development
 
Modern Front-End Development
Modern Front-End DevelopmentModern Front-End Development
Modern Front-End Development
 
Introduction to Design Pattern
Introduction to Design  PatternIntroduction to Design  Pattern
Introduction to Design Pattern
 
Website Redesign Presentation
Website Redesign PresentationWebsite Redesign Presentation
Website Redesign Presentation
 
Class 1 - World Wide Web Introduction
Class 1 - World Wide Web IntroductionClass 1 - World Wide Web Introduction
Class 1 - World Wide Web Introduction
 
Class 2 - Introduction to PHP
Class 2 - Introduction to PHPClass 2 - Introduction to PHP
Class 2 - Introduction to PHP
 
Understand front end developer
Understand front end developerUnderstand front end developer
Understand front end developer
 
reveal.js 3.0.0
reveal.js 3.0.0reveal.js 3.0.0
reveal.js 3.0.0
 
Web Application Performance
Web Application PerformanceWeb Application Performance
Web Application Performance
 

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

Do Try This At Home Ajax Bookmarking, Cross Site Scripting, And Other Web 2 ...
Do Try This At Home  Ajax Bookmarking, Cross Site Scripting, And Other Web 2 ...Do Try This At Home  Ajax Bookmarking, Cross Site Scripting, And Other Web 2 ...
Do Try This At Home Ajax Bookmarking, Cross Site Scripting, And Other Web 2 ...jward5519
 
Decoupled Drupal and Gatsby in the Real World
Decoupled Drupal and Gatsby in the Real WorldDecoupled Drupal and Gatsby in the Real World
Decoupled Drupal and Gatsby in the Real WorldMediacurrent
 
Stapling and patching the web of now - ForwardJS3, San Francisco
Stapling and patching the web of now - ForwardJS3, San FranciscoStapling and patching the web of now - ForwardJS3, San Francisco
Stapling and patching the web of now - ForwardJS3, San FranciscoChristian Heilmann
 
Progressing JavaScript and Apps the Web way…
 Progressing JavaScript and Apps the Web way…  Progressing JavaScript and Apps the Web way…
Progressing JavaScript and Apps the Web way… Christian Heilmann
 
Web-Development-ppt (1).pptx
Web-Development-ppt (1).pptxWeb-Development-ppt (1).pptx
Web-Development-ppt (1).pptxRaihanUddin57
 
Quo vadis, JavaScript? Devday.pl keynote
Quo vadis, JavaScript? Devday.pl keynoteQuo vadis, JavaScript? Devday.pl keynote
Quo vadis, JavaScript? Devday.pl keynoteChristian Heilmann
 
Introduction to HTML, CSS, and JavaScript for Web Development
Introduction to HTML, CSS, and JavaScript for Web DevelopmentIntroduction to HTML, CSS, and JavaScript for Web Development
Introduction to HTML, CSS, and JavaScript for Web DevelopmentQurinom Solutions
 
A COMPREHENSIVE GUIDE TO WEB DEVELOPMENT 2.pptx
A COMPREHENSIVE GUIDE TO WEB DEVELOPMENT 2.pptxA COMPREHENSIVE GUIDE TO WEB DEVELOPMENT 2.pptx
A COMPREHENSIVE GUIDE TO WEB DEVELOPMENT 2.pptxdeepakkumar17808
 
Web Development Agency in Noida in 2024 1
Web Development Agency in Noida in 2024 1Web Development Agency in Noida in 2024 1
Web Development Agency in Noida in 2024 1NadeemAnsari576752
 
Web-Development-ppt.pptx
Web-Development-ppt.pptxWeb-Development-ppt.pptx
Web-Development-ppt.pptxEleenaJha
 
[DevDay2019] Web Development In 2019 - A Practical Guide - By Hoang Nhu Vinh,...
[DevDay2019] Web Development In 2019 - A Practical Guide - By Hoang Nhu Vinh,...[DevDay2019] Web Development In 2019 - A Practical Guide - By Hoang Nhu Vinh,...
[DevDay2019] Web Development In 2019 - A Practical Guide - By Hoang Nhu Vinh,...DevDay.org
 
How to Become a Front-End Developer? Step-by-Step Guide by Careervira
How to Become a Front-End Developer? Step-by-Step Guide by CareerviraHow to Become a Front-End Developer? Step-by-Step Guide by Careervira
How to Become a Front-End Developer? Step-by-Step Guide by CareerviraCareervira
 
It is a sunny day
It is a sunny dayIt is a sunny day
It is a sunny daybcoder
 
Friday final test
Friday final testFriday final test
Friday final testbcoder
 

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

Web Development
Web DevelopmentWeb Development
Web Development
 
Do Try This At Home Ajax Bookmarking, Cross Site Scripting, And Other Web 2 ...
Do Try This At Home  Ajax Bookmarking, Cross Site Scripting, And Other Web 2 ...Do Try This At Home  Ajax Bookmarking, Cross Site Scripting, And Other Web 2 ...
Do Try This At Home Ajax Bookmarking, Cross Site Scripting, And Other Web 2 ...
 
Decoupled Drupal and Gatsby in the Real World
Decoupled Drupal and Gatsby in the Real WorldDecoupled Drupal and Gatsby in the Real World
Decoupled Drupal and Gatsby in the Real World
 
Stapling and patching the web of now - ForwardJS3, San Francisco
Stapling and patching the web of now - ForwardJS3, San FranciscoStapling and patching the web of now - ForwardJS3, San Francisco
Stapling and patching the web of now - ForwardJS3, San Francisco
 
Progressing JavaScript and Apps the Web way…
 Progressing JavaScript and Apps the Web way…  Progressing JavaScript and Apps the Web way…
Progressing JavaScript and Apps the Web way…
 
Web-Development-ppt (1).pptx
Web-Development-ppt (1).pptxWeb-Development-ppt (1).pptx
Web-Development-ppt (1).pptx
 
Quo vadis, JavaScript? Devday.pl keynote
Quo vadis, JavaScript? Devday.pl keynoteQuo vadis, JavaScript? Devday.pl keynote
Quo vadis, JavaScript? Devday.pl keynote
 
Modern Webapps
Modern WebappsModern Webapps
Modern Webapps
 
Introduction to HTML, CSS, and JavaScript for Web Development
Introduction to HTML, CSS, and JavaScript for Web DevelopmentIntroduction to HTML, CSS, and JavaScript for Web Development
Introduction to HTML, CSS, and JavaScript for Web Development
 
amanWeb.ppt.pptx
amanWeb.ppt.pptxamanWeb.ppt.pptx
amanWeb.ppt.pptx
 
Design Based Dev
Design Based DevDesign Based Dev
Design Based Dev
 
A COMPREHENSIVE GUIDE TO WEB DEVELOPMENT 2.pptx
A COMPREHENSIVE GUIDE TO WEB DEVELOPMENT 2.pptxA COMPREHENSIVE GUIDE TO WEB DEVELOPMENT 2.pptx
A COMPREHENSIVE GUIDE TO WEB DEVELOPMENT 2.pptx
 
Web Development Agency in Noida in 2024 1
Web Development Agency in Noida in 2024 1Web Development Agency in Noida in 2024 1
Web Development Agency in Noida in 2024 1
 
A Period of Transition
A Period of TransitionA Period of Transition
A Period of Transition
 
Web-Development-ppt.pptx
Web-Development-ppt.pptxWeb-Development-ppt.pptx
Web-Development-ppt.pptx
 
[DevDay2019] Web Development In 2019 - A Practical Guide - By Hoang Nhu Vinh,...
[DevDay2019] Web Development In 2019 - A Practical Guide - By Hoang Nhu Vinh,...[DevDay2019] Web Development In 2019 - A Practical Guide - By Hoang Nhu Vinh,...
[DevDay2019] Web Development In 2019 - A Practical Guide - By Hoang Nhu Vinh,...
 
Hinting at a better web
Hinting at a better webHinting at a better web
Hinting at a better web
 
How to Become a Front-End Developer? Step-by-Step Guide by Careervira
How to Become a Front-End Developer? Step-by-Step Guide by CareerviraHow to Become a Front-End Developer? Step-by-Step Guide by Careervira
How to Become a Front-End Developer? Step-by-Step Guide by Careervira
 
It is a sunny day
It is a sunny dayIt is a sunny day
It is a sunny day
 
Friday final test
Friday final testFriday final test
Friday final test
 

More from Allison Baum

Top 5 Reasons To Go Global
Top 5 Reasons To Go GlobalTop 5 Reasons To Go Global
Top 5 Reasons To Go GlobalAllison Baum
 
3 Ingredients for an Ed Tech Ecosystem
3 Ingredients for an Ed Tech Ecosystem3 Ingredients for an Ed Tech Ecosystem
3 Ingredients for an Ed Tech EcosystemAllison Baum
 
Ed Tech in Asia: Key Trends and Opportunities
Ed Tech in Asia: Key Trends and OpportunitiesEd Tech in Asia: Key Trends and Opportunities
Ed Tech in Asia: Key Trends and OpportunitiesAllison Baum
 
Business Models in Education
Business Models in EducationBusiness Models in Education
Business Models in EducationAllison Baum
 
Seven Things You Didn't Know About Hong Kong
Seven Things You Didn't Know About Hong KongSeven Things You Didn't Know About Hong Kong
Seven Things You Didn't Know About Hong KongAllison Baum
 
UXD HK Info Session
UXD HK Info SessionUXD HK Info Session
UXD HK Info SessionAllison Baum
 
Digital Marketing @ GA HK
Digital Marketing @ GA HKDigital Marketing @ GA HK
Digital Marketing @ GA HKAllison Baum
 

More from Allison Baum (7)

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

Recently uploaded

Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesUnblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesSinan KOZAK
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slidevu2urc
 
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersEnhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersThousandEyes
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationRadu Cotescu
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking MenDelhi Call girls
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationSafe Software
 
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | DelhiFULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhisoniya singh
 
SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024Scott Keck-Warren
 
Maximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptxMaximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptxOnBoard
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfEnterprise Knowledge
 
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitectureUnderstanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitecturePixlogix Infotech
 
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...shyamraj55
 
Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Allon Mureinik
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘RTylerCroy
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Igalia
 
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountPuma Security, LLC
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024Results
 
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...HostedbyConfluent
 

Recently uploaded (20)

Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesUnblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen Frames
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersEnhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | DelhiFULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
 
SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024
 
Maximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptxMaximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptx
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
 
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitectureUnderstanding the Laravel MVC Architecture
Understanding the Laravel MVC Architecture
 
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
 
Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
 
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024
 
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
 

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
  • 5.
  • 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