Description

Responsible for the visual ergonomics and functional ergonomics of a website, the Front-End application developer must have both Web Design and development skills. This cycle will provide you with all the skills in HTML 5, CSS 3 and JavaScript necessary for developing responsive sites. You will gain efficiency during your development by implementing AngularJS, the benchmark for client-side JavaScript infrastructures. You will also discover the tools that will allow you to industrialize your developments.

Who is this training for ?

For whom ?

Web Developers and Project Managers.

Prerequisites

• Know the principles of the Internet and the basics of development. Practice in a programming language will be a plus.

Training objectives

Design and develop modern and dynamic web applications in HTML 5 and CSS 3

Make the web pages of a site Responsive Design

Integrate advanced aspects of the JavaScript language into rich application development

Manage asynchronous Ajax exchanges Develop high-performance web applications with AngularJS

Optimize development times by mastering modern utilities

Training program

• Web technologies
  • The composite structure of an HTML document: images, CSS, JavaScript.
  • The document model (DOM).
  • The HTTP protocol.
  • HTTP client/server interaction.
  • Interpretation of HTML by the browser.
• HTML 5 tags
  • The traditional elements structuring an HTML document (doctype, html, head, body, meta).
  • The HTML 5 structuring elements (nav, section, article, aside, header, footer) .
  • Content categories (Metadata content, Flow content, Sectioning content.
  • ).
  • New tags: , , ,

    .

  • Microformats.
  • Presentation and SEO advantages.
  • New form fields: range, autofocus, placeholder .
  • Video and audio management with the new
  • SVG images for vector drawing.
  • Canvases for drawing "bitmap".
  • Practical work Setting up and validating the structure of an HTML 5 document.
  • Creation of HTML 5 templates.
  • Creating a multimedia player.
• CSS 3 selectors
  • Syntax reminder: selectors, rules.
  • Repetition, target, only child and prior sibling selectors.
  • Media Queries for conditional loading of CSS according to the resolution or orientation of the terminal.
  • Colors.
  • The hsl and hsla models.
  • The opacity property.
  • Text formatting.
  • Management of overflows.
  • Management of sequences.
  • Multicolumn modes with column-count, column-width.
  • Formatting boxes.
  • Shadows.
  • Rounded corners.
  • Formatting backgrounds.
  • The background gradients.
  • The backgrounds adjusted to the containers.
  • The transformations: translations, rotations, scaling.
  • Animations: animations, transitions.
  • Practical work Application of colors.
  • Formatting texts.
  • Applying shadows and rounding.
  • Animations and transition effects.
• Advanced aspects of the JavaScript language
  • The main new features of ES6/2015 JavaScript supersets: TypeScript, Babel, Traceur.
  • Operation and integration of the jQuery Framework.
  • jQuery for Ajax exchanges and forms management.
  • JavaScript and Object-Oriented Programming.
  • Methods.
  • Inheritance.
  • Scope private and public data.
  • Mapping and serialization.
  • Structure and syntax of a regular expression.
  • Mastering the debugging environment.
  • Embedded data storage solution: SQLite, LocalStorage, Cookies.
  • Understand the notion of server-side JavaScript with Node.
  • js JavaScript programming under HTML5 .
  • Practical work Create a jQuery Plug-in.
  • Putting OOP into practice.
  • Performance optimization with ChromeDevtools.
  • Calling Web services.
  • Using an embedded database.
  • Handling HTML5 JavaScript APIs.
• With the AngularJS Framework
  • Features and general principles.
  • AngularsJS guidelines, HTML compiler.
  • Expressions.
  • Bidirectional Data-Binding.
  • Filters.
  • Creation and use of controllers.
  • Context management, the $scope variable.
  • Propagation of events.
  • API.
  • Dirty Checking.
  • Principle of dependency injection.
  • Notion of module.
  • Configuration.
  • Definition of routes: Routing.
  • API ($routeProvider).
  • The "deep linking".
  • Data functionality, Server Exchange.
  • Testing utilities: Jasmine.
  • Angular-scenario.
  • Test: controllers, services.
  • Use with Karma .
  • Practical work Preparation of an HTML mockup to develop with AngularJS.
  • Modularization of the application.
  • Creation of a " Single Page Application".
• Le Responsive Web Design
  • Types of terminals (mobile, tablet.
  • ) and their resolution.
  • Devices, OS, browsers.
  • Design approach: Marcotte's concept, Mobile First.
  • Adaptation of CSS to the characteristics of the terminal.
  • MediaQueries.
  • Flexible, fluid grid principle.
  • Break points.
  • Principle of boxes, layout with CSS3.
  • Responsive content: text break, multicolumns.
  • Hyphenation and cutting.
  • Responsive frameworks and libraries (BootStrap, Less.
  • ).
  • Practical work Construction of CSS according to portrait/landscape modes, terminal resolution .
  • Building ergonomics based on a flexible grid.
• Industrialisation du Front-End
  • Components of a Web application, the "JavaScript SuperSet".
  • Choose the development environment (SublimeText, Eclipse, Cloud 9.
  • ) .
  • "Version" with GIT.
  • Organize development branches.
  • Node.
  • js as a development utility .
  • The Node Package Manager and Bower.
  • Task automation with GRUNT.
  • Automated testing integration.
  • Testing utilities : Jasmine, Mocha.
  • Create a project template.
  • Which utilities: Yeoman, Lineman?rnPractical work rnCustomize the SublimeText IDE.
  • Create a module to configure project dependencies.
  • Unit testing with Jasmine.
  • Automation with Karma.