Course: Front-end-Development

$419.00
$506.99 incl. vat

duration: 26 hours |

Language: English (US) |

access duration: 180 days |

Details

This comprehensive FSD front-end development course explores the latest features of HTML5 and CSS3, offering insights into how these advancements can simplify development processes and enhance user experiences. You will gain an understanding of critical browser features and the role of CSS preprocessors, particularly in managing styles on larger websites. Starting with the creation of custom HTML elements, the course emphasizes the pivotal role of Javascript (JS) functions in handling browser events, providing a foundational understanding of their significance in full-stack development. Learners also delve into jQuery, a powerful tool that streamlines JS code development by abstracting away complexity.

The course extends its coverage to front-end development frameworks like AngularJS, ReactJS, and VueJS, showcasing their impact on page dynamism, responsiveness, and development efficiency. ReactJS takes centre stage, guiding you through installation, configuration, and the construction of components that serve as the foundation for dynamic React applications. Node.js is introduced as a crucial backend support for Javascript web development, with exploration into the Node Package Manager (NPM) for installing essential software. Automation tools like Webpack, Browserify, Grunt, Gulp, and Yeoman are explored, along with an examination of testing frameworks such as Mocha, Chai, Enzyme, and Jest, emphasizing their role in ensuring robust Javascript applications in the full-stack development landscape.

Result

After completing this course, you will have sufficient skills to work with HTML, CSS, advanced JavaScript, user interaction technologies and build and test tools.

Prerequisites

No formal prerequisites. However, it is recommended to have some prior knowledge about HTML5, CSS, Javascript, front-end frameworks (Angular, React), and software development.

Target audience

Software Developer

Content

Front-end-Development

26 hours

FSD Front-end Development: Features of HTML5 & CSS3

In this 13-video course, learners can explore the new features of HTML5 and CSS3 that can be used to make development easier and provide a better user experience, as well as where and when these features may be applied. Begin by examining the role that HTML forms play in Full Stack Development (FSD), then looking at local storage options on the client. Learn what web workers are and how to configure them, and also the stages in the service worker lifecycle. Examine web sockets and the need for persistent communication with the server. Learn how to implement Server Sent Notifications (SSN) using NodeJS. Then explore layouts, working with columns, widths, and sizes, and CSS Flexbox, by applying flex directives to styles. Next, take a look at the various selectors in CSS, then styling forms by choosing appropriate styling for form development, and finally, how to use app-specific rules, or media queries, to make your web page responsive. The exercise involves designing a popular three-column webpage layout format.

FSD Front-end Development: Advanced CSS Browser Features

In this 13-video course, discover the browser features that are important to full stack developers and how CSS (Cascading Style Sheet) preprocessors make adding styles to a web page and web site easier, especially when the site becomes large. Begin with custom elements and creating new HTML tags. Then take a look at the Shadow DOM (Document Object Model), and avoid conflict by creating separate DOM elements. Next, explore HTML templates, and writing markup that is not rendered. Learn about Cross-Origin Resources Sharing (CORS), which leads to setting up and installing Sass preprocessor, and using variables and nesting to speed up CSS development. Learn how to set up and install LESS, a CSS preprocessor, and then examine workings of LESS variables and mixins (functions allowing reuse of properties). Discover how to use LESS Scope to confine variables, add an operation, and implement a function. Then learn how to install Stylus by using Node.js, and then write simple markup with Stylus. Close the course with an exercise on using LESS mixins to combine styles into a nest pattern.

FSD Front-End Development: Using JavaScript Functions

Browsers create events, and it is the role of Javascript (JS) to handle those events. The main unit of Javascript is the function, and this 12-video course helps identify the role of the function within JS for full stack development. Begin by learning an important application programming interface in JS, the XMLHttpRequest Object-an object allowing developers to transfer data between clients: browser and web server, for example. Next, discover how to use AJAX (Asynchronous JS and XML) to reload content in an HTML page. Take a close look at the Document Object Model (DOM), used to identify and manipulate the content of HTML elements. Learn about developing JSON objects, validating form values, and JS hoisting and scope. Examine the many different ways to use functions in JS; learn how promises work; and apply callbacks within a function. Discover how to simulate inheritance with factory functions, and how to extract variable value by using a closure. The course concludes with an exercise on building a factory function with conventions, ES6 shortcuts, and arrow functions.

FSD Front-End Development: Writing Code with jQuery

In this 12-video course, discover how using jQuery, a wrapper for Javascript functionality, can reduce the amount of code required and abstract away complexity of vanilla JS code development. Begin by exploring jQuery syntax and pattern and writing a jQuery method to perform simple tasks. Examine powerful features of jQuery events, and learn to apply methods to register behaviors for full stack development. Next, see how jQuery handles the document object model (DOM), identifying and manipulating content of HTML elements with chaining and using AJAX (Asynchronous JS and XML) to reload content in an HTML page; and adding handlers to work with deferred objects. Move on to callbacks, and how to write asynchronous code with callbacks, and requirements for jQuery plugin development. Learn to implement a jQuery validator to help validate fields in a form; then examine the relationship between CSS (Cascading Style Sheet) selectors and jQuery selectors, by selecting DOM elements using CSS-related properties. Associating arbitrary data with DOM elements is also covered. The exercise involves using AJAX to call an API on the public domain.

FSD Front-End Development: Frameworks

Discover how to add front-end development frameworks such as AngularJS, ReactJS, and VueJS to increase page dynamism and responsiveness, as well as shorten development time and handle data. Key concepts covered in this 12-video course include how to identify the main parts of an Angular app, explore two different types of forms, reactive forms and template-driven forms, and build a simple Angular 7; apply the HttpClient module to fetch data from external sources such as an API; enhance the user experience with Router; and use a content delivery network (CDN) to access the VueJS library. You will also learn to use VueJS to combine a value in a form field to an app being built; to access and get data from an external source; and to convert an existing boilerplate app into a component for full stack development. Finally, learn to install and configure the VueJS command-line interface (CLI); learn to install Bootstrap and connect it to an Angular connection; and add the Bootstrap navbar and table to an existing Angular application.

FSD Front-End Development: UI Development with ReactJS

React is a framework used to create dynamic web pages and is powered by Javascript. In this 13-video course, you will learn how to install and configure ReactJS, how components form the basis of a React application, and how to build and organize components. Key concepts covered in this course include how to install ReactJS and use create-react-app; add a simple component; configure a component for props and state; and convert a functional component to use classes. You will learn to pass data back and forth between apps and the main component; install a React router; and consolidate parts into a whole page. Next, see how to integrate existing HTML into ReactJS components; explore routing and linking of components; and add HTML to existing components; render data from an API call. Finally, learn to organize components for future scaling; link the various components; add and configure a new component; configure a form to post data; and how to access an external API in order to get and post data.

FSD Front-end Development: Server Tools

Javascript web development requires a supporting architecture, and Node provides the back-end support that most front-end development code needs. In this 12-video course, learners will explore Node Package Manager (NPM), a tool that installs supporting software for most front-end development for full stack development. To begin, NodeJSJSON package configuration will be downloaded and installed and the command NPM init will be used to create a package .json file; then a simple NodeJS server will be built. You will learn about the importance of the HTTP module and how to use Node's NPM to install a package, Express, then add routes and accept parameters with Express. Next, learn how to modularize the application with JS Files by decomposing the app with Node modules, and then implement controllers to handle the logic. In a further tutorial, you will continue working with Node.js by learning how to work with the host file system. Finally, you will discover how to work with MySQL database using Node and retrieve records. In the closing exercise, learners will build a simple NodeJS server.

FSD Front-end Development: Build Tools

Several development activities can be automated with the use of special software that is mostly built with Javascript. In this 11-video course, learners explore some of this software, including bundlers such as Webpack and Browserify, task runners such as Grunt and Gulp, and the Yeoman build tool to help with full stack development. Git and GitHub help with saving and collaborating, as well as cloud storage. Begin with setting up and configuring a Webpack in a NodeJS environment; then follow an introduction to Grunt, which is installed via NPM for the Node application, and the jsHint package to lint (check) the files. Next, learn how to install Gulp.js and create tasks. Explore Browserify for front-end development, using NPM modules in browsers; examine Scaffold with Yeoman, a scaffolding type of technology; and apply a generator to a project. You will learn how to install Git and create an account, then add a branch and merge it with the master, push files to GitHub, and clone files from GitHub. The concluding exercise directs you to install Git and work with it locally.

FSD Front-end Development: Testing Tools

In this 10-video course, explore testing frameworks that are used to assist with testing Javascript (JS) applications, including Mocha, Chai, Enzyme, and Jest. Examine the different types of testing for full stack development-unit, integration, and functional-and the use of component testing in a ReactJS application with snapshots. Begin by learning more about testing JS applications and the various types of tests you can run. Then receive an overview of the browser development tools for app development and take a close look at browser developer tools, specifically the DOM (document object model) inspector, and the CSS (cascading style sheet) Manipulator, examining page styles and how to dynamically change any of these styles. Learn how to run simple tests with NodeJS, Mocha, and Chai, and to install Jest and Enzyme in a ReactJS application. Then test a custom component with Jest and Enzyme. Finally, explore snapshot testing, by using a renderer package to create a snapshot. The closing exercise involves creating and testing a boilerplate app.

FSD Front-End Development

In this practice lab, learners will be presented with a series of exercises to practice front-end development with HTML & CSS and JavaScript. Exercises include tasks such as using NodeJS to build an HTTP server, applying Flexbox, working JavaScript Closures and styling pages with browser developer tools. Learners will also practice responding to viewport sizes, posting data using ReactJS, nesting CSS code with Node-sass and creating a factory function.

Learners can also use the environment as an open sandbox. No installation or configuration is required, so you can gain immediate hands-on experience. Create new files or upload your own from a storage location of your choice, such as GitHub, and you can practice coding right away! You can even download a copy of your work when you’re done.

Whether you’re looking to dive into the code presented within our courses or you want to work on your own coding projects, this lab environment will provide you with everything you need. So, go ahead and start coding today!

Final Exam: Front-end Developer

Final Exam: Front-end Developer will test your knowledge and application of the topics presented throughout the Front-end Developer track of the Skillsoft Aspire Enterprise Developer to Full Stack Developer Journey.

Course options

We offer several optional training products to enhance your learning experience. If you are planning to use our training course in preperation for an official exam then whe highly recommend using these optional training products to ensure an optimal learning experience. Sometimes there is only a practice exam or/and practice lab available.

Optional practice exam (trial exam)

To supplement this training course you may add a special practice exam. This practice exam comprises a number of trial exams which are very similar to the real exam, both in terms of form and content. This is the ultimate way to test whether you are ready for the exam. 

Optional practice lab

To supplement this training course you may add a special practice lab. You perform the tasks on real hardware and/or software applicable to your Lab. The labs are fully hosted in our cloud. The only thing you need to use our practice labs is a web browser. In the LiveLab environment you will find exercises which you can start immediatelyThe lab enviromentconsist of complete networks containing for example, clients, servers,etc. This is the ultimate way to gain extensive hands-on experience. 

WHY_ICTTRAININGEN

Via ons opleidingsconcept bespaar je tot 80% op trainingen

Start met leren wanneer je wilt. Je bepaalt zelf het gewenste tempo

Spar met medecursisten en profileer je als autoriteit in je vakgebied.

Ontvang na succesvolle afronding van je cursus het officiële certificaat van deelname van Icttrainingen.nl

Krijg inzicht in uitgebreide voortgangsinformatie van jezelf of je medewerkers

Kennis opdoen met interactieve e-learning en uitgebreide praktijkopdrachten door gecertificeerde docenten

Orderproces

Once we have processed your order and payment, we will give you access to your courses. If you still have any questions about our ordering process, please refer to the button below.

read more about the order process

What is included?

Certificate of participation Yes
Monitor Progress Yes
Award Winning E-learning Yes
Mobile ready Yes
Sharing knowledge Unlimited access to our IT professionals community
Study advice Our consultants are here for you to advice about your study career and options
Study materials Certified teachers with in depth knowledge about the subject.
Service World's best service

Platform

Na bestelling van je training krijg je toegang tot ons innovatieve leerplatform. Hier vind je al je gekochte (of gevolgde) trainingen, kan je eventueel cursisten aanmaken en krijg je toegang tot uitgebreide voortgangsinformatie.

Life Long Learning

Follow multiple courses? Read more about our Life Long Learning concept

read more

Contact us

Need training advise? Contact us!


contact