Get Started inGet Started in Web Development

Download Get Started inGet Started in Web Development

Post on 27-Feb-2018

221 views

Category:

Documents

0 download

Embed Size (px)

TRANSCRIPT

<ul><li><p>7/25/2019 Get Started inGet Started in Web Development</p><p> 1/48</p><p>GET STARTED IN</p><p>WEB DEVELOPMENT</p></li><li><p>7/25/2019 Get Started inGet Started in Web Development</p><p> 2/48</p><p>ABOUT GA</p><p>General Assemblyis an educational institution creating a gcommunity of individuals empowered to pursue work they lo</p><p>We offer full and part-time courses, workshops and eve</p><p>sought-after 21st-century skills like web development and u</p><p>experience design, data science, product management and</p><p>digital marketing.</p></li><li><p>7/25/2019 Get Started inGet Started in Web Development</p><p> 3/48</p><p>AGENDA</p><p> WHYweb development?</p><p> HOWdo I get started?</p><p> WHATdoes it all mean?!</p><p> Front-End (HTML, CSS, JavaScript)</p><p> Back-End (Ruby/Rails, Python/Django, PHP)</p><p> Other stuff (APIs, Angular.js .)</p><p> WHEREcan I learn more?</p></li><li><p>7/25/2019 Get Started inGet Started in Web Development</p><p> 4/48</p><p>WHYweb development?</p></li><li><p>7/25/2019 Get Started inGet Started in Web Development</p><p> 5/48</p><p>WHY</p><p> JOBS that offer professional development</p><p> fascinating problems</p><p> flexibility</p><p> stability</p><p> opportunities to utilise your other skill sets</p></li><li><p>7/25/2019 Get Started inGet Started in Web Development</p><p> 6/48</p><p>HOWdo I get started?</p></li><li><p>7/25/2019 Get Started inGet Started in Web Development</p><p> 7/48</p><p>HOW</p><p>You will need:</p><p>A web browser (preferably Google Chrome)</p><p>A text editor (NOT a word processing tool like Microsoft W</p><p> TextEdit(in plaintext mode)</p><p> Notepad</p><p> Notepad++</p><p> Sublime Text - free to download plus syntax highlight</p>http://www.sublimetext.com/http://notepad-plus-plus.org/http://en.wikipedia.org/wiki/Notepad_(software)http://en.wikipedia.org/wiki/TextEdit</li><li><p>7/25/2019 Get Started inGet Started in Web Development</p><p> 8/48</p><p>HOW</p><p>You may also want:Git, a versioning system that lets you (and any collaboratochanges in your code</p><p>A GitHubaccount; GitHub allows you to collaborate and s</p><p>code with other people.A Herokuaccount; Heroku offers free hosting services forapplications running in Ruby/Rails, Node.js, Python/Djang</p><p>Scala, and Clojure.</p>https://www.heroku.com/https://github.com/http://git-scm.com/</li><li><p>7/25/2019 Get Started inGet Started in Web Development</p><p> 9/48</p><p>WHATdoes it all mean?!</p></li><li><p>7/25/2019 Get Started inGet Started in Web Development</p><p> 10/48</p><p>WHAT</p><p>Lets start from the top.</p><p>What is the web?</p><p>What is a web page?</p></li><li><p>7/25/2019 Get Started inGet Started in Web Development</p><p> 11/48</p><p>WHAT</p><p>Lets start from the top.</p><p>What is the web?</p><p>A network of inter-linked documents, located on individual </p><p>that are visible to other computers around the world througinternet.</p><p>What is a web page?</p></li><li><p>7/25/2019 Get Started inGet Started in Web Development</p><p> 12/48</p><p>WHAT</p><p>Lets start from the top.</p><p>What is the web?</p><p>A network of inter-linked documents, located on individual </p><p>that are visible to other computers around the world througinternet.</p><p>What is a web page?</p><p>A document consisting of one or several files designed to on the web through a browser.</p></li><li><p>7/25/2019 Get Started inGet Started in Web Development</p><p> 13/48</p><p>WHAT</p><p>HTML content and structure</p><p>CSS style and layout</p><p>JavaScript action and behavior</p><p>Front-End</p></li><li><p>7/25/2019 Get Started inGet Started in Web Development</p><p> 14/48</p><p>WHAT</p><p>Front-End the part the user interacts with</p><p>Back-End the part the user doesnt see or directly inter</p></li><li><p>7/25/2019 Get Started inGet Started in Web Development</p><p> 15/48</p><p>WHAT HTML</p><p>HTML syntax (tags) and basic structure:</p></li><li><p>7/25/2019 Get Started inGet Started in Web Development</p><p> 16/48</p><p>LETS BUILD</p><p>Lets see it in action!</p><p>Wikipedia</p>http://www.apple.com/</li><li><p>7/25/2019 Get Started inGet Started in Web Development</p><p> 17/48</p><p>WHAT HTML</p><p>In HTML5, all page layout is done with tags (or their cousins, the &lt; tags), which divide the page into sections.</p></li><li><p>7/25/2019 Get Started inGet Started in Web Development</p><p> 18/48</p><p>WHAT CSS</p><p>CSS cascading style sheets</p><p>Designed to take styling completely out of HTML.</p><p>Think of it as a color by numbers for the browser, but mucpowerful!</p></li><li><p>7/25/2019 Get Started inGet Started in Web Development</p><p> 19/48</p><p>WHAT CSS</p><p>For the most part, CSS instructions come in three ranks:</p><p>ID instructions#id1 {color : #555555;}</p><p>Class instructions</p><p>.class1 {color: red;}</p><p>Tag instructionsp {color: black;}</p></li><li><p>7/25/2019 Get Started inGet Started in Web Development</p><p> 20/48</p><p>WHAT CSS</p><p>CSS instructions of the same rank are executed from the</p><p>CSS file to the bottom - they cascade. This means that w</p><p>are conflicting instructions, earlier ones get overwritten by </p></li><li><p>7/25/2019 Get Started inGet Started in Web Development</p><p> 21/48</p><p>WHAT CSS</p></li><li><p>7/25/2019 Get Started inGet Started in Web Development</p><p> 22/48</p><p>WHAT CSS</p><p>red</p></li><li><p>7/25/2019 Get Started inGet Started in Web Development</p><p> 23/48</p><p>WHAT CSS</p><p>CSS ideally controls all the formatting in the page:</p><p>Text color, size, and fontList formatting</p><p>Position, size, and style of all elements</p><p>And much more.</p></li><li><p>7/25/2019 Get Started inGet Started in Web Development</p><p> 24/48</p><p>LETS BUILD</p><p>Now, lets add some CSS to our previous project.</p></li><li><p>7/25/2019 Get Started inGet Started in Web Development</p><p> 25/48</p><p>WHAT JAVASCRIPT</p><p>Unlike HTML or CSS, JavaScript is a true programming la</p><p>It can be used to execute logical instructions and do things</p><p>In particular, JavaScript, like Ruby, Python, and PHP, is a </p><p>language, which means that it allows you to write scriptsprograms that execute instructions one by one, in order.</p></li><li><p>7/25/2019 Get Started inGet Started in Web Development</p><p> 26/48</p><p>WHAT JAVASCRIPT</p><p>We can play around with JavaScript using the console, on</p><p>Chromes developer tools.</p><p>3</p><p>==&gt; 3</p><p>hello</p><p>==&gt; hello</p><p>console.log(1)</p><p>==&gt; 1</p></li><li><p>7/25/2019 Get Started inGet Started in Web Development</p><p> 27/48</p><p>WHAT JAVASCRIPT</p><p>We can play around with JavaScript using the console, on</p><p>Chromes developer tools.</p><p>var x = 3;</p><p>==&gt; undefined</p><p>x</p><p>==&gt; 3</p><p>2*x + 1</p><p>==&gt; 7</p></li><li><p>7/25/2019 Get Started inGet Started in Web Development</p><p> 28/48</p><p>WHAT JAVASCRIPT</p><p>Like most programming languages, JavaScript uses variab</p><p>store data, and logical tests to make decisions.</p><p>var x = 3;</p><p>var y = 7;</p><p>if (x &lt; y) {console.log(X is smaller than Y);}</p></li><li><p>7/25/2019 Get Started inGet Started in Web Development</p><p> 29/48</p><p>WHAT JAVASCRIPT</p><p>Like most programming languages, JavaScript uses functi</p><p>use pieces of code.</p><p>function addOneTo(x) {</p><p>return x+1;</p><p>}</p><p>var y = 0;</p><p>y = addOneTo(0);</p><p>y = addOneTo(1);</p><p>console.log(y); ==&gt; 2</p></li><li><p>7/25/2019 Get Started inGet Started in Web Development</p><p> 30/48</p><p>WHAT JAVASCRIPT</p><p>JavaScript can also import and use libraries files of fun</p><p>written by other people so that you dont need to reinven</p><p>wheel.</p><p>One very commonly used JavaScript library is jQuery; jQufunctions are designed to making writing JavaScript easie</p><p>functions that act like built-in JavaScript functionality, but hsimpler syntax.</p></li><li><p>7/25/2019 Get Started inGet Started in Web Development</p><p> 31/48</p><p>WHAT JAVASCRIPT</p><p>Unlike most other programming languages, JavaScript can</p><p>interact with and affect HTML elements, using a mini-prog</p><p>the browser called the DOM (document object model).</p><p>Lets incorporate some JavaScript into our project.</p></li><li><p>7/25/2019 Get Started inGet Started in Web Development</p><p> 32/48</p><p>WHAT BACK END</p><p>While the front-end runs in the browser, and handles user </p><p>the back end runs on a server somewhere else on the web</p><p>handles:</p><p>-Interpreting data it receives from the front-end</p><p>-Data management</p><p>-Processing data to get the result you want</p><p>-(Optionally) Sending data back to the front-end for the bro</p><p>display.</p></li><li><p>7/25/2019 Get Started inGet Started in Web Development</p><p> 33/48</p><p>WHAT RUBY &amp; RAILS</p><p>Ruby is another programming language, similar to JavaSc</p><p>It has variables, logical tests, and functions (called methoRuby). And it also has its own libraries, called gems.</p></li><li><p>7/25/2019 Get Started inGet Started in Web Development</p><p> 34/48</p><p>WHAT RUBY &amp; RAILS</p><p>Rails is one such gem.</p><p>Whereas Ruby is a language, Rails is a web application f</p><p>a tool (built in Ruby) that is used to quickly produce relativsophisticated web applications.</p><p>Think of Rails as being a template for building everything a</p><p>application needs, from data management and processingend interface.</p></li><li><p>7/25/2019 Get Started inGet Started in Web Development</p><p> 35/48</p><p>WHAT RUBY &amp; RAILS</p><p>Rails is an example of an M-V-C framework</p><p>Model abstraction of the data that your application store</p><p>View visual readout, in HTML/CSS/JS, that the browser </p><p>Control logic that tells the application how to behave</p></li><li><p>7/25/2019 Get Started inGet Started in Web Development</p><p> 36/48</p><p>WHAT RUBY &amp; RAILS</p><p>In practice, though, it actually looks more like this.</p><p>Browser</p><p> Controllers</p><p>Views</p><p>Router</p><p>Rails</p><p>HTML,CSS, JSfiles</p><p>Active</p><p>Record</p><p>Renderedweb page</p><p>Useractions</p><p>Models</p></li><li><p>7/25/2019 Get Started inGet Started in Web Development</p><p> 37/48</p><p>WHAT OTHER STUFF</p><p>Angular.js, Node.js, Backbone.js, *.js</p><p>Angular.js, Node.jsand Backbone.jsare frameworks, simi</p><p>ways to Rails, but built in JavaScript.</p><p>They also perform back-end operations, but because they</p><p>in JavaScript, some of those operations can be run in the which can make the application faster/more efficient/more</p>http://backbonejs.org/http://nodejs.org/http://angularjs.org/</li><li><p>7/25/2019 Get Started inGet Started in Web Development</p><p> 38/48</p><p>WHAT OTHER STUFF</p><p>API(application programming interface)</p><p>Publicly visible interface to the application that other peop</p><p>programs can use.</p><p>Some commonly used APIs</p><p>Twitter</p><p>Facebook</p><p>Gmail</p>https://developers.google.com/google-apps/gmail/https://developers.facebook.com/https://dev.twitter.com/</li><li><p>7/25/2019 Get Started inGet Started in Web Development</p><p> 39/48</p><p>WHEREcan I learn more?</p></li><li><p>7/25/2019 Get Started inGet Started in Web Development</p><p> 40/48</p><p>WHERE ONLINE RESOURCES</p><p>W3 Schools Codecademy</p><p> StackOverflow</p><p> CodePen</p><p>Dash (General Assembly)</p>http://dash.generalassemb.ly/http://codepen.io/http://stackoverflow.com/http://www.codecademy.com/http://www.w3schools.com/</li><li><p>7/25/2019 Get Started inGet Started in Web Development</p><p> 41/48</p><p>WHERE LIVE CLASSES</p><p>FWDPast one-off classes at GA have included:Programming for Non-Programmers (offered in Python an</p><p>Creative Process for Coders</p><p>Introduction to PHP</p><p>And many others, all available at the GA website.</p>http://generalassemb.ly/</li><li><p>7/25/2019 Get Started inGet Started in Web Development</p><p> 42/48</p><p>WHERE INTENSIVE COURSES (PART-TIME)</p><p>FEWD</p><p>FRONT-END WEB DEVELOPMENT : BUILD A WEBSITE</p><p>GOAL: Learn to build a dynamic, interactive web page</p><p>You will:</p><p> Build a static template that illustrates the core concepts of HTML and CSS</p><p> Build a product showcase that expands on the more powerful functions of CSS</p><p>Make a responsive site that fits both traditional displays and mobile devices</p></li><li><p>7/25/2019 Get Started inGet Started in Web Development</p><p> 43/48</p><p>WHERE INTENSIVE COURSES (PART-TIME)</p><p>BACK-END WEB DEVELOPMENT : BUILD A RAILS APP</p><p>GOAL: Learn to build a fully functional application in Rails</p><p>You will:</p><p>Learn programming fundamentals in Ruby</p><p> Build interactive Rails applications and deploy them to Heroku.</p><p> Use Ruby gems to add functionality to your project</p><p> Implement a basic front-end for your application using Twitter Bootstrap</p><p>BEWD</p><p>S CO S S ( )</p></li><li><p>7/25/2019 Get Started inGet Started in Web Development</p><p> 44/48</p><p>WHERE IMMERSIVE COURSES (FULL-TIME)</p><p>WDI</p><p>GOAL:Develop the skills necessary to become a junior web developer.</p><p>You will:</p><p>Learn HTML5, CSS3, Ruby, Rails, Javascript, AJAX, jQuery, Git/Github, and more.</p><p> Build a portfolio of projects individually and in small groups that are ready to present to employers</p><p> Learn how to integrate external APIs</p><p> Deploy your code to Heroku</p><p>WEB DEVELOPMENT IMMERSIVE : GO FOR PRO</p></li><li><p>7/25/2019 Get Started inGet Started in Web Development</p><p> 45/48</p><p>WHENcan I start?</p></li><li><p>7/25/2019 Get Started inGet Started in Web Development</p><p> 46/48</p><p>now</p><p>WHEN? NOW</p></li><li><p>7/25/2019 Get Started inGet Started in Web Development</p><p> 47/48</p><p>WHEN? NOW.</p><p>FWDLearn more about GAsFront-End Web Developmentand</p><p>Web Development Immersivecourses.</p><p>Questions?</p>https://generalassemb.ly/education/web-development-immersivehttps://generalassemb.ly/education/front-end-web-development</li><li><p>7/25/2019 Get Started inGet Started in Web Development</p><p> 48/48</p><p>T an you.</p></li></ul>