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

  - n'as pas encore du programme