Trainer: Alex Riabtsev

Tbilisi, December, 2014 - March-2015

Skillup.com.ua

Front-end development

Blocks:
Overview
HTML Fundamentals
CSS
CMS
Javascript
DHTML
jQuery
AngularJS
Creating web-sites
Advanced

Skillup.com.ua

Course Program

Introduction to Front-End Development

Web Programming Fundamentals
HTTP Protocol
Request-Response Model
HTTP Status Codes
Cookies
Development Tools (Firebug, IE Developer Toolbar,
Fiddler)

Skillup.com.ua

Overview

HTML Language
Syntax
Markup and Semantics
Metadata
HTML Tables and Forms
Frames
Introduction to HTML 5
Structure Tags
Forms UI
Forms Validation
Playing Video and Audio
Captioning, Canvas and SVG Graphics

Skillup.com.ua

HTML Fundamentals

Creating and Using CSS Styles

Selectors
Style Definitions
Fonts
Backgrounds
Borders
Alignment
Positioning
CSS 3

Skillup.com.ua

Cascading Style Sheets

 Content Management Systems

(CMS) Overview
Working with WordPress, Joomla,
Drupal

Skillup.com.ua

CMS Systems

Introduction to JavaScript
JavaScript and Events
What Versions? What Browsers?
JavaScript and Old or Disabled Browsers
JavaScript from External Files
Script Setup
The HTML Document and JavaScript
Syntactical Details
Generating HTML and Printing Output
Debugging

Skillup.com.ua

Javascript

 The Building Blocks: Data Types, Literals, and

Variables
Data Types
Variables
Bugs to Watch For
Dialog Boxes
Interacting with the User
Operators
About JavaScript Operators and Expressions
Datatype Conversion
Special Operators

Skillup.com.ua

Javascript (more)

 Under Certain Conditions

Control Structures, Blocks, and
Compound Statements
Conditionals
Loops
Functions
Debugging

Skillup.com.ua

Javascript (even more)

Objects
User-Defined Objects
Manipulating Objects
JavaScript Core Objects
Array Objects
Array Properties and Methods
The Date Object
The Math Object
The Browser Objects: Navigator, Windows, and
Frames
JavaScript and the Browser Object Model
The Document Objects: Forms, Images, and Links
The Document Object Model

Skillup.com.ua

Javascript (still...)

Handling Events
Event Handlers as JavaScript Methods
The event Object
Regular Expressions and Pattern
Matching
Getting ControlThe Metacharacters
Form Validation with Regular
Expressions
Creating a Cookie with JavaScript

Skillup.com.ua

Javascript (thats all)

 What Is Dynamic HTML?

What Is a Style Sheet?
Types of Style Sheets

Skillup.com.ua

DHTML. Style Sheets, the DOM,

and JavaScript

Introduction to jQuery
jQuery Selectors and DOM Manipulation
jQuery Events and Chaining
AJAX Requests
jQuery Templating
jQuery UI
Effects
Interactions
Widgets

Skillup.com.ua

jQuery framework

Getting Started
Install the required software
Error Handling
Output Handling
The search button
Issuing the search
Processing the search results
Running the application
Models, Views and Controllers
AngularJS Filters

Skillup.com.ua

AngularJS framework

Unit Testing
Watching expressions
The AngularJS Digest Cycle
Data binding
Input changes trigger the digest cycle
Changing a scope variable triggers a digest cycle
The $apply function
AngularJS Services
The HTTP service
End-to-End (E2E) Testing
Inter-controller communication
AngularJS Routing to the rescue
Directives

Skillup.com.ua

AngularJS (more)

 Creating XHTML Web site from PSD

Web Design (Slide and Dice)
Building Web Front-End Applications with
HTML 5, CSS,
SVG, JavaScript, jQuery and AJAX

Skillup.com.ua

Creating web-sites

Client Side Caching

Cross-Browser Issues
Client Side Performance Tuning
Search Engine Optimization (SEO)
Accessibility
Raster graphics with Canvas API
Vector graphics with SVG and Raphael
Creating charts and graphs in HTML with gRaphael and dojox.charting
More HTML5 APIs
Persisting data with local storage
Geolocation services
Future of AJAX/Comet with web socket
Background JavaScript tasks with web workers
Future of crossdomain messaging
Creating offline apps
JavaScript software engineering techniques
The feature detection pattern & modernizr
Organizing code for large JS projects
Unit and functional testing
Testing of async interactions

Skillup.com.ua

Advanced

Introduction to Front-End Development

Web Programming Fundamentals
HTTP Protocol
Request-Response Model
HTTP Status Codes
Cookies
Development Tools (Firebug, IE Developer Toolbar,
Fiddler)

Skillup.com.ua

Overview

Introduction to Web-Development
What does web-development stand for?
In short: building and maintaining web-sites.

Developers often work on behalf of clients who are trying to get their
product or service out onto the web.

The work is typically very project-focused and involves collaborating with a

team of people who help coordinate the client's needs with the end
product.

Not all devs work for external clients... The "client" could just be your tech
company, organization, government etc. who needs a website or web

application built

It's a lot of fun, you actually get to build things that people use, and you get
to play with lots of new toys. What's not to love?

Skillup.com.ua

The key take-aways here are:

Skillup.com.ua

Front-end VS Back-end developers

Skillup.com.ua

Web-developer VS Web-designer

Web-sites VS Web-applications
Websites are static, meaning they are not updated, at least

Web applications are built with HTML, CSS & JavaScript,

but they also use programming languages like PHP, Ruby,
or Python, and frameworks like Rails, Django, and
CakePHP. Web applications almost always use databases,
and because of that they are called dynamic.

Skillup.com.ua

not all that often.

In-person:
meetups
hackathons
hack nights
conferences
hacker spaces
school clubs
Online:
Hacker News
StackOveflow
GitHub
IRC
Reddit
Blogs

Skillup.com.ua

How to do even more

Web-development as Project

Skillup.com.ua

Web-development = Project
Tasks, Resources, Quality

Skillup.com.ua

Requirements and expectations

Why are you enrolled in this
course?