[skillup] front-end course - 1

8/10/2019 [SkillUp] Front-End Course - 1

1/25

Skillup.c

om.u

a

Front-end development

Trainer: Alex RiabtsevTbilisi, December, 2014 - March-2015


2/25

Skillup.c

om.u

a

Blocks: Overview HTML Fundamentals

CSS CMS Javascript DHTML

jQuery AngularJS Creating web-sites Advanced

Course Program


3/25

Skillup.c

om.u

a

Overview

Introduction to Front-End Development

Web Programming Fundamentals

HTTP Protocol

Request-Response Model

HTTP Status Codes

Cookies

Development Tools (Firebug, IE Developer Toolbar,

Fiddler)


4/25

Skillup.c

om.u

a

HTML Fundamentals

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


5/25

Skillup.c

om.u

a

Cascading Style Sheets

Creating and Using CSS Styles Selectors

Style Definitions Fonts Backgrounds Borders

Alignment Positioning CSS 3


6/25

Skillup.c

om.u

a

CMS Systems

Content Management Systems(CMS) Overview

Working with WordPress, Joomla,

Drupal


7/25

Skillup.c

om.u

a

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

Javascript


8/25

Skillup.c

om.u

a

The Building Blocks: Data Types, Literals, andVariables

Data Types

Variables Bugs to Watch For Dialog Boxes Interacting with the User

Operators About JavaScript Operators and Expressions Datatype Conversion Special Operators

Javascript (more)


9/25

Skillup.c

om.u

a

Under Certain Conditions

Control Structures, Blocks, andCompound Statements Conditionals Loops

Functions Debugging

Javascript (even more)


10/25

Skillup.c

om.u

a

Javascript (still...)

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, andFrames

JavaScript and the Browser Object Model The Document Objects: Forms, Images, and Links

The Document Object Model


11/25

Skillup.c

om.u

a

Javascript (thats all)

Handling Events Event Handlers as JavaScript Methods

The event Object Regular Expressions and PatternMatching

Getting ControlThe Metacharacters

Form Validation with RegularExpressions

Creating a Cookie with JavaScript


12/25


13/25

Skillup.c

om.u

a

jQuery framework

Introduction to jQuery jQuery Selectors and DOM Manipulation

jQuery Events and Chaining AJAX Requests jQuery Templating jQuery UI

Effects Interactions Widgets


14/25

Skillup.c

om.u

a

AngularJS 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


15/25

Skillup.c

om.u

a

AngularJS (more)

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


16/25

Skillup.c

om.u

a

Creating web-sites

Creating XHTML Web site from PSDWeb Design (Slide and Dice) Building Web Front-End Applications with

HTML 5, CSS,

SVG, JavaScript, jQuery and AJAX


17/25

Skillup.c

om

.ua

Advanced

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


18/25

Skillup.c

om

.ua

Overview

Introduction to Front-End Development

Web Programming Fundamentals

HTTP Protocol

Request-Response Model

HTTP Status Codes

Cookies

Development Tools (Firebug, IE Developer Toolbar,

Fiddler)


19/25

Skillup.c

om

.ua

Introduction to Web-DevelopmentWhat does web-development stand for?

In short: building and maintaining web-sites.

The key take-aways here are:

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?


20/25

Skillup.c

om

.ua

Front-end VS Back-end developers


21/25

Skillup.c

om

.ua

Web-developer VS Web-designer


22/25

Skillup.c

om

.ua

Web-sites VS Web-applications

Websitesare static, meaning they are not updated, at least

not all that often.

Web applicationsare 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.


23/25


24/25

Skillup.c

om

.ua

Web-development as Project

Web-development = Project Tasks, Resources, Quality


25/25

Skillup.c

om

.ua

Requirements and expectations

Why are you enrolled in thiscourse?

[skillup] front-end course - 1

Documents