GA | Your First Code

General Assembly 2h workshop introducing Programming through HTML, CSS and Ruby!

Transcript

1. GET STARTED PROGRAMMING YOUR FIRST CODE
2. WELCOME TO GENERAL ASSEMBLY. 2 INTRODUCTIONS
3. INTRODUCTIONS INSTRUCTOR INTRODUCTION 3 Fer Martin | fer@ga.co Web Development Immersive Instructor
4. INTRODUCTIONS 4 ⌚ INTROS: 2 MIN SHARING: 30 SEC Group in pairs and get to know each other - Name/Origin/Industry - Name a hobby or interest - Why want to learn coding? 2. Please Introduce your partner :) STRUCTURE OBJECTIVES PAIRS
5. LEARNING GOALS 5 Website development kick-off First dive: HTML/CSS Programming 101 - Application development kick-off First dive: Ruby
6. TODAY’S AGENDA 6 CS INTRO | Programming Languages , What can I build INTERNET | How does the Internet works? WEB DEVELOPMENT | Agile, Scrum WEBSITE DESIGN PROCESS | UX, IA, Visual Design, Development HTML5 DEVELOPMENT | Personal Website [DashLAB] HTML5 DEVELOPMENT | Responsive Blog Theme [DashLAB] RUBY PROGRAMMING | Our first code! [LetstryRuby.org]
7. EDUCATION IS WHAT PEOPLE DO TO YOU 7 INTRODUCTIONS
8. LEARNING IS WHAT YOU DO TO YOURSELF 8 INTRODUCTIONS
9. TODAY! WHAT IS PROGRAMMING? 9
10. WHAT IS PROGRAMMING? 10 A SET OF INSTRUCTIONS.
    A RECIPE.
    A STEP BY STEP PROCESS.
    
11. WHAT ARE PROGRAMMING LANGUAGES? 11 RUBY RUBY ON RAILS PHP JAVA JAVASCRIPT HTML CSS C++ C# OBJECTIVE C PYTHON C JQUERY NODE BACKBONE ANGULAR EMBER R DJANGO SINATRA PADRINO SCALA ERLANG HASKELL ASSEMBLY PERL SQL FORTRAN PASCAL PROCESSING SCRATCH HEROKU MONGODB MYSQL SMALLTALK LISP J2EE XSLT OCTAVE EXPRESS
12. 12 PROGRAMMING 101 | WHAT CAN I BUILD?
13. PROGRAMMING 101 | WHAT CAN I BUILD? 13
14. 14 PROGRAMMING 101 | WHAT CAN I BUILD?
15. 15 PROGRAMMING 101 | WHAT CAN I BUILD?
16. WEB DEVELOPMENT WEB DEVELOPMENT 16
17. WEB DEVELOPMENT 17 HOW THE WEB WORKS http://www.learnthenet.com/animated-internet/how-the-web-works/
18. WEB DEVELOPMENT BROWSERS 18 Percent 0 18 35 53 70 Year 2009 2010 2011 2012 2013 Internet Explorer Firefox Safari Opera Chrome
19. WEB DEVELOPMENT | FRONT-END VS. BACK-END 19 FRONT-END BACK-END PROGRAMMING LANGUAGES FRAMEWORKS PYTHON RUBY JAVASCRIPT RUBY ON RAILS DJANGO HTML JAVASCRIPT CSS Foundation BOOSTRAP ANGULAR NODEJS
20. WHAT IS PROGRAMMING? 20 WHAT DO PROGRAMS ACTUALLY DO? They automate things to make our lives easier. •Keeping track of things (Variables) •Making decisions(If -> then) •Repeating things (Loops) •Displaying things •Logs things (Log files) •Storing things(Databases) •Sharing things (Networks) “Hey program, can you change the background of your website when I click on a button?”
21. WEB DEVELOPMENT STAGES OF WEB DEVELOPMENT 21
22. INSERT CHAPTER TITLE STAGES OF WEB DEVELOPMENT 22 DESIGN DEVELOP TEST
23. WEB DEVELOPMENT PROCESS SCRUM 23
24. WEB DEVELOPMENT PROCESS AGILE 24 http://en.wikipedia.org/wiki/Agile_software_development
25. WEB DEVELOPMENT PROCESS SCRUM 25 https://www.youtube.com/watch?v=XU0llRltyFM
26. WEB DEVELOPMENT DESIGN 26
27. DESIGN 27 USER EXPERIENCE
28. DESIGN 28 WHAT IS USER EXPERIENCE? “Don’t make me think” -Steve Krug http://www.amazon.co.uk/Dont-Make-Me-Think-Usability/dp/0321344758
29. DESIGN 29 WHAT IS USER EXPERIENCE? http://theoatmeal.com/comics/restaurant_website
30. DESIGN 30 WHAT IS USER EXPERIENCE?
31. DESIGN 31 WHO DOES UX? User Researcher Identifies user behaviors, goals and needs through interviews, studies and surveys Information Architect
 (IA) Defines the structure of a system, how content is described, organized and discovered Interaction Designer 
 (IxD/UX Designer) Defines interactions, user flows, wireframes, and affordances of a system UI Developer Builds the system by interpreting the functional specification, sitemaps, wireframes while working within technical constraints
32. DESIGN 32 USER EXPERIENCE
33. DESIGN 33 INFORMATION ARCHITECTURE
34. DESIGN 34 VISUAL DESIGN
35. WEB DEVELOPMENT DEVELOP 35
36. DEVELOP 36 TRANSLATE DESIGN INTO CODE Design comp
37. DEVELOP PAGE SOURCE 37 Chrome Web inspector
38. DEVELOP PAGE SOURCE 38 Firefox 3D-view
39. WEB DEVELOPMENT VERSION CONTROL 39 •Keep track of the version of code. •Collaborate with others. •Keep track of who contributed. •Open-source (release it to the world for free!) •Popular tools: GitHub, BitBucket
40. WEB DEVELOPMENT TEST 40
41. TEST 41 MAKE SURE IT WORKS!
42. WEB DEVELOPMENT LET’S CODE! 42
43. CODE ALONG 43 dash.generalassemb.ly
44. CODE ALONG | GA DASH - PERSONAL WEBSITE 44 dash.generalassemb.ly
45. CODE ALONG | GA DASH - PROJECT 2 45 dash.generalassemb.ly
46. CODE ALONG | GA DASH - SECRET PROJECT 46 dash.generalassemb.ly https://dash.generalassemb.ly/projects/tumblr https://dash.generalassemb.ly/projects/tumblr
47. WEB DEVELOPMENT LET’S CODE! PUTS “WELCOME 2 RUBY” 47
48. CODE ALONG | TRYRUBY.ORG 48 dash.generalassemb.ly help Let’s start clear clears screen next skip lesson back to the future
49. REVIEW WHAT WE LEARNED: 49 CS INTRO | Programming Languages , What can I build INTERNET | How does the Internet works? WEB DEVELOPMENT | Agile, Scrum WEBSITE DESIGN PROCESS | UX, IA, Visual Design, Development [DashLAB] HTML5 DEVELOPMENT | Personal Website [DashLAB] HTML5 DEVELOPMENT | Responsive Blog Theme [LetstryRuby.org] RUBY PROGRAMMING | Our first code!
50. REVIEW RESOURCES 50 http://f3r.gitbooks.io/learn-ruby https://docs.webplatform.org https://docs.webplatform.org/wiki/beginners https://developer.mozilla.org/en-US/docs/Web/HTML/Element https://developer.mozilla.org/en-US/docs/Web/CSS http://dash.generalassemb.ly (GA HTML/CSS tutorials) https://www.ruby-lang.org/en/documentation/ http://tryruby.org/
51. THANK YOU!!