Duration
32.0 hours
Regular fee
$250
Objectives of the training
The Front End development corresponds to the elements of a web application (developed with HTML, CSS and JavaScript) that a user can see and interact with directly. This e-learning course is intended for developers who wish to acquire the basics and best practices to develop a Front End web application. Possible certification: ENI Certification - Development of websites with HTML tags and CSS style sheets option: HTML5 and CSS3.Targeted audience
DevelopersPrerequisite
To follow this e-learning, knowledge in algorithmic is necessary.Trainers
Upcoming information
Course architecture
The Web and the thin client
• Objectives
• What is the Web?
• Understand the expressions of the Web
• The W3C
• History and use of the Internet in France
• Difference between static and dynamic Web pages
• Role of the client and the server
• Definition of the main elements of a Web site
• Some Internet figures
• First Web site
• Key dates of the Web
• HTTP protocol
• Thin clients: browsers and rendering engines
• Some figures on browsers
• Advantages and disadvantages of thin clients
• Demonstration - Installing Browser Tools
• Choice of browsers
• Demonstration - Installing a development tool
• Conclusion
HTML tags
• Objectives
• Designing a page
• Demonstration - Designing a page
• The history of HTML
• HTML tags, attributes and rules
• The first tags
• Obsolete HTML4 elements
• Doctype : HTML5 simplification
• The tag <html>
• The tag <head>
• The tag <title>
• The tag <meta>
• Character encoding
• The tag <body>
• Placing text on an HTML page
• The comments
• The links
• Validation of HTML code
• Layout using container elements
• Images
• Colors
• What's new in HTML5
• The tag <header>
• The tag <nav>
• The tag <section>
• The tag <aside>
• The tag <article>
• The tag <footer>
• The advantages of the new tags
• The new semantic tags
• The new attributes
• Testing the compatibility of tags according to the browser
• Coding well
• Demonstration - The main HTML tags
• Practical work statement - Zoning
• Practical work statement - Biography
HTML forms
• Objectives
• Introduction
• Basic input fields
• GET or POST method
• Improving the input
• Main form tags
• Validating a form
• Drop-down list attributes
• Global HTML attributes
• Window Events
• Form events
• Keyboard Events
• Mouse Events
• Clipboard Events
• Media Events
• Miscellaneous Events
• Demonstration - HTML Form
• Practical Learning Statement - Creating an HTML Form
Multimedia tags
• Objectives
• The tag <audio>
• The mp3 format
• The Ogg Vorbis format
• The Wav format
• The AAC format
• The compatibility of audio formats
• Examples of use of the tag <audio>
• Demonstration - The tag <audio>
• The tag <video>
• The H.264 MPEG-4 format
• The OGG format
• The H.265 MPEG-4 format
• The WebM format
• Video format compatibility
• Examples of use of the <video>. tag
• Demonstration - The <video>. tag
CSS style sheets
• Objectives of CSS
• Definition of CSS
• The basic rules
• The selectors
• Selection modes
• Cascading and inheritance of properties
• Positioning of elements
• Typography and text
• Web fonts
• Demo - Integrating Web fonts with Font Squirrel
• Demo - Integrating Web fonts with Google Font Web
• Lists
• Backgrounds
• Hyperlinks and pseudo-elements
• Box properties
• Tables
• Borders
• The page layout
• The CSS3 version
• Rounded edges (CSS3)
• Shadows (CSS3)
• Text management (CSS3)
• Multiple backgrounds (CSS3)
• Color gradients (CSS3)
• Transformations (CSS3)
• Transitions (CSS3)
• Animations (CSS3)
• 3D transformations (CSS3)
• Practical exercises - Biography with CSS tags
• Practical work-study statement - Formatting an HTML form
Responsive Web Design (Media Queries)
• Objectives
• Problems and principles of the adaptive web
• Adaptive page layout
• Principles of Responsive Web Design
• Demonstration - Display and screen resolution
• Media Queries
• Demonstration - Browser tools for developers
A CSS framework : Bootstrap
• Objectives of the framework
• Purpose and definition of a framework
• Presentation of Bootstrap
• How Bootstrap works
• Strong points of Bootstrap
• The normalize.css file
• Evolutions of Bootstrap
• Implementation of Bootstrap
• The container
• Bootstrap installation folders
• Demonstration - Installing Bootstrap
• Minification of files
• Using Bootstrap
• Examples of Bootstrap elements
• Browser Compatibility
• JavaScript scripts to add
• The Bootstrap code in brief
• Overview of the grid system
• Demonstration - Grid System
• Optimization of the grid system
• Demonstration - Offset Bootstrap
• Thinking Mobile First
• Bootstrap themes and documentation
• Presentation of the elements
• Elements of the CSS category
• Elements of the Component category
• Elements of the JavaScript category
• Interface Enhancement
• Modal Windows
• Bootstrap customization
• Demo - Customizing Bootstrap with CSS
• Jumbotron
• Case Study - My Music Application
The JavaScript language
• What we want to achieve
• History of the language
• The basics of the JavaScript language
• The arrays
• The console command
• Demonstration - The JavaScript console
• The operators
• The different equality tests
• The functions
• The events
• Object-oriented programming
• Creating a class
• The implementation of inheritance
• Demonstration - Modifying the DOM
• Practical work statement - The hangman game
• Practical work - JavaScript features on the My Music application
The jQuery framework
• Objectives of jQuery
• Introduction to jQuery
• jQuery ecosystem
• jQuery function
• jQuery installation
• The ready method
• The different selection modes
• Modifying the DOM
• Events
• Demonstration - Using jQuery
• Case study - jQuery features on the My Music application
Tips for good coding
• Objectives
• Rule 1: respect the HTML5 doctype
• Rule 2: close the tags
• Rule 3: indicate the canonical URL
• Rule 4: define the cache
• Rule #5: define JavaScript slots
• Rule #6: respect the semantics
• Rule #7: respect the title hierarchy
• Rule #8: influence the referencing
• Rule #9 : choose the right text for a link
• Rule #10 : use the nofollow attribute
• Rule #11 : put an alt attribute to each image tag
• Rule #12 : specify the size of images
• Rule #13: use the tag <time>
• Rule #14: limit the number of tags <div>
• Rule #15: use CSS instead of style attributes
• Rule #16 : use the id attribute
• Rule #17 : limit and combine files of the same type
• Rule #18: limit the number of connections to other domains
• Rule #19: ensure compatibility with Internet Explorer
• Rule #20: test the final rendering
HTML5 and CSS3 - Mastering Web Design Standards (3rd Edition)
• HTML5 and CSS 3
• Best practices
• Introduction to HTML5
• Document structure
• Semantic containers
• Text containers
• Semantic text formatting
• Links
• Tables
• Images
• Forms
• Multimedia
• Presentation of style sheets
• The syntax of CSS
• CSS properties for fonts
• CSS properties for text
• CSS properties for lists and tables
• The formatting of boxes
• The layout of boxes
• Media queries
• Printing properties
• CSS3 graphic modules in the making
• 2D drawing
• Geolocation
• Local data storage
• Offline applications
• Other HTML5 JavaScript APIs
Learning to Develop with JavaScript (2nd edition)
• Introduction to the JavaScript language
• Development using algorithms
• Basics of the JavaScript language
• Conditioning of processes
• Iterative processing (loops)
• Arrays
• Procedures and functions
• Object" approach in JavaScript
• Basic objects in JavaScript
• Data entry via forms
• DOM model
• Exploring XML streams via DOM
• Cookie management in JavaScript
• Local data storage
• Remote storage (Ajax - PHP - MySQL - XML)
• Remote storage (Ajax - PHP - MySQL - JSON)
• Geolocation
• Drawing (HTML5 CANVAS)
• Management graphics
• AngularJS Framework
• EcmaScript 6
• Node.js Framework
• Mongo DB data server
• Access to a Mongo DB server from Node.js
• Access to a Node.js server from AngularJS
jQuery - The JavaScript framework for dynamic and interactive sites (4th edition)
• Getting started with jQuery
• Selectors in jQuery
• Handling attributes and properties
• Handling CSS style sheets
• The events
• The effects
• Traversing the DOM
• Manipulating the DOM
• Filtering the DOM
• AJAX seen by jQuery
• Some utility methods
• The forms
• The jQuery plug-ins
Bootstrap - Learn how to develop responsive web interfaces
Why is it essential to develop responsive web interfaces?
• Some statistics from a real site
• A case study
• Objectives
• What is the Web?
• Understand the expressions of the Web
• The W3C
• History and use of the Internet in France
• Difference between static and dynamic Web pages
• Role of the client and the server
• Definition of the main elements of a Web site
• Some Internet figures
• First Web site
• Key dates of the Web
• HTTP protocol
• Thin clients: browsers and rendering engines
• Some figures on browsers
• Advantages and disadvantages of thin clients
• Demonstration - Installing Browser Tools
• Choice of browsers
• Demonstration - Installing a development tool
• Conclusion
HTML tags
• Objectives
• Designing a page
• Demonstration - Designing a page
• The history of HTML
• HTML tags, attributes and rules
• The first tags
• Obsolete HTML4 elements
• Doctype : HTML5 simplification
• The tag <html>
• The tag <head>
• The tag <title>
• The tag <meta>
• Character encoding
• The tag <body>
• Placing text on an HTML page
• The comments
• The links
• Validation of HTML code
• Layout using container elements
• Images
• Colors
• What's new in HTML5
• The tag <header>
• The tag <nav>
• The tag <section>
• The tag <aside>
• The tag <article>
• The tag <footer>
• The advantages of the new tags
• The new semantic tags
• The new attributes
• Testing the compatibility of tags according to the browser
• Coding well
• Demonstration - The main HTML tags
• Practical work statement - Zoning
• Practical work statement - Biography
HTML forms
• Objectives
• Introduction
• Basic input fields
• GET or POST method
• Improving the input
• Main form tags
• Validating a form
• Drop-down list attributes
• Global HTML attributes
• Window Events
• Form events
• Keyboard Events
• Mouse Events
• Clipboard Events
• Media Events
• Miscellaneous Events
• Demonstration - HTML Form
• Practical Learning Statement - Creating an HTML Form
Multimedia tags
• Objectives
• The tag <audio>
• The mp3 format
• The Ogg Vorbis format
• The Wav format
• The AAC format
• The compatibility of audio formats
• Examples of use of the tag <audio>
• Demonstration - The tag <audio>
• The tag <video>
• The H.264 MPEG-4 format
• The OGG format
• The H.265 MPEG-4 format
• The WebM format
• Video format compatibility
• Examples of use of the <video>. tag
• Demonstration - The <video>. tag
CSS style sheets
• Objectives of CSS
• Definition of CSS
• The basic rules
• The selectors
• Selection modes
• Cascading and inheritance of properties
• Positioning of elements
• Typography and text
• Web fonts
• Demo - Integrating Web fonts with Font Squirrel
• Demo - Integrating Web fonts with Google Font Web
• Lists
• Backgrounds
• Hyperlinks and pseudo-elements
• Box properties
• Tables
• Borders
• The page layout
• The CSS3 version
• Rounded edges (CSS3)
• Shadows (CSS3)
• Text management (CSS3)
• Multiple backgrounds (CSS3)
• Color gradients (CSS3)
• Transformations (CSS3)
• Transitions (CSS3)
• Animations (CSS3)
• 3D transformations (CSS3)
• Practical exercises - Biography with CSS tags
• Practical work-study statement - Formatting an HTML form
Responsive Web Design (Media Queries)
• Objectives
• Problems and principles of the adaptive web
• Adaptive page layout
• Principles of Responsive Web Design
• Demonstration - Display and screen resolution
• Media Queries
• Demonstration - Browser tools for developers
A CSS framework : Bootstrap
• Objectives of the framework
• Purpose and definition of a framework
• Presentation of Bootstrap
• How Bootstrap works
• Strong points of Bootstrap
• The normalize.css file
• Evolutions of Bootstrap
• Implementation of Bootstrap
• The container
• Bootstrap installation folders
• Demonstration - Installing Bootstrap
• Minification of files
• Using Bootstrap
• Examples of Bootstrap elements
• Browser Compatibility
• JavaScript scripts to add
• The Bootstrap code in brief
• Overview of the grid system
• Demonstration - Grid System
• Optimization of the grid system
• Demonstration - Offset Bootstrap
• Thinking Mobile First
• Bootstrap themes and documentation
• Presentation of the elements
• Elements of the CSS category
• Elements of the Component category
• Elements of the JavaScript category
• Interface Enhancement
• Modal Windows
• Bootstrap customization
• Demo - Customizing Bootstrap with CSS
• Jumbotron
• Case Study - My Music Application
The JavaScript language
• What we want to achieve
• History of the language
• The basics of the JavaScript language
• The arrays
• The console command
• Demonstration - The JavaScript console
• The operators
• The different equality tests
• The functions
• The events
• Object-oriented programming
• Creating a class
• The implementation of inheritance
• Demonstration - Modifying the DOM
• Practical work statement - The hangman game
• Practical work - JavaScript features on the My Music application
The jQuery framework
• Objectives of jQuery
• Introduction to jQuery
• jQuery ecosystem
• jQuery function
• jQuery installation
• The ready method
• The different selection modes
• Modifying the DOM
• Events
• Demonstration - Using jQuery
• Case study - jQuery features on the My Music application
Tips for good coding
• Objectives
• Rule 1: respect the HTML5 doctype
• Rule 2: close the tags
• Rule 3: indicate the canonical URL
• Rule 4: define the cache
• Rule #5: define JavaScript slots
• Rule #6: respect the semantics
• Rule #7: respect the title hierarchy
• Rule #8: influence the referencing
• Rule #9 : choose the right text for a link
• Rule #10 : use the nofollow attribute
• Rule #11 : put an alt attribute to each image tag
• Rule #12 : specify the size of images
• Rule #13: use the tag <time>
• Rule #14: limit the number of tags <div>
• Rule #15: use CSS instead of style attributes
• Rule #16 : use the id attribute
• Rule #17 : limit and combine files of the same type
• Rule #18: limit the number of connections to other domains
• Rule #19: ensure compatibility with Internet Explorer
• Rule #20: test the final rendering
HTML5 and CSS3 - Mastering Web Design Standards (3rd Edition)
• HTML5 and CSS 3
• Best practices
• Introduction to HTML5
• Document structure
• Semantic containers
• Text containers
• Semantic text formatting
• Links
• Tables
• Images
• Forms
• Multimedia
• Presentation of style sheets
• The syntax of CSS
• CSS properties for fonts
• CSS properties for text
• CSS properties for lists and tables
• The formatting of boxes
• The layout of boxes
• Media queries
• Printing properties
• CSS3 graphic modules in the making
• 2D drawing
• Geolocation
• Local data storage
• Offline applications
• Other HTML5 JavaScript APIs
Learning to Develop with JavaScript (2nd edition)
• Introduction to the JavaScript language
• Development using algorithms
• Basics of the JavaScript language
• Conditioning of processes
• Iterative processing (loops)
• Arrays
• Procedures and functions
• Object" approach in JavaScript
• Basic objects in JavaScript
• Data entry via forms
• DOM model
• Exploring XML streams via DOM
• Cookie management in JavaScript
• Local data storage
• Remote storage (Ajax - PHP - MySQL - XML)
• Remote storage (Ajax - PHP - MySQL - JSON)
• Geolocation
• Drawing (HTML5 CANVAS)
• Management graphics
• AngularJS Framework
• EcmaScript 6
• Node.js Framework
• Mongo DB data server
• Access to a Mongo DB server from Node.js
• Access to a Node.js server from AngularJS
jQuery - The JavaScript framework for dynamic and interactive sites (4th edition)
• Getting started with jQuery
• Selectors in jQuery
• Handling attributes and properties
• Handling CSS style sheets
• The events
• The effects
• Traversing the DOM
• Manipulating the DOM
• Filtering the DOM
• AJAX seen by jQuery
• Some utility methods
• The forms
• The jQuery plug-ins
Bootstrap - Learn how to develop responsive web interfaces
Why is it essential to develop responsive web interfaces?
• Some statistics from a real site
• A case study
Bootstrap: The CSS framework for responsive web
• Presentation of the mobile first framework
• Installing Bootstrap
• First steps with Bootstrap
• Presentation of the mobile first framework
• Installing Bootstrap
• First steps with Bootstrap
Laying out responsive content blocks
• Grid concept
• Creating a grid that adapts to the screen size
• Showing and hiding blocks according to the screen size
• How to put it into practice
• Grid concept
• Creating a grid that adapts to the screen size
• Showing and hiding blocks according to the screen size
• How to put it into practice
Handling the Media Queries
• Media Queries: definition of the concept
• Hands-on: Manipulating fonts using media queries
• Media Queries: definition of the concept
• Hands-on: Manipulating fonts using media queries
Creating menus and adapting images
• Creating a basic menu
• How to display a responsive image
• Creating a basic menu
• How to display a responsive image
Creating a responsive interface: Summary exercise
• Presentation of the objective
• Building the header
• Creating the menu
• Layout of the image block
• Inserting the testimonial
• Presentation of the objective
• Building the header
• Creating the menu
• Layout of the image block
• Inserting the testimonial
Private or personalized training
If you have more than 8 people to sign up for a particular course, it can be delivered as a private session right at your offices. Contact us for more details.
Request a quoteDuration
32.0 hours
Regular fee
$250
Private or personalized training
If you have more than 8 people to sign up for a particular course, it can be delivered as a private session right at your offices. Contact us for more details.
Request a quote