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