Course: Front-end-Development
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
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 immediately. The lab enviromentconsist of complete networks containing for example, clients, servers,etc. This is the ultimate way to gain extensive hands-on experience.
Sign In
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
Een zakelijk account aanmaken
Wanneer u besteld namens uw bedrijf doet u er goed aan om aan zakelijk account bij ons aan te maken. Tijdens het registratieproces kunt u hiervoor kiezen. U heeft vervolgens de mogelijkheden om de bedrijfsgegevens in te voeren, een referentie en een afwijkend factuuradres toe te voegen.
Betaalmogelijkheden
U heeft bij ons diverse betaalmogelijkheden. Bij alle betaalopties ontvangt u sowieso een factuur na de bestelling. Gaat uw werkgever betalen, dan kiest u voor betaling per factuur.

Cursisten aanmaken
Als u een zakelijk account heeft aangemaakt dan heeft u de optie om cursisten/medewerkers aan te maken onder uw account. Als u dus meerdere trainingen koopt, kunt u cursisten aanmaken en deze vervolgens uitdelen aan uw collega’s. De cursisten krijgen een e-mail met inloggegevens wanneer zij worden aangemaakt en wanneer zij een training hebben gekregen.
Voortgangsinformatie
Met een zakelijk account bent u automatisch beheerder van uw organisatie en kunt u naast cursisten ook managers aanmaken. Beheerders en managers kunnen tevens voortgang inzien van alle cursisten binnen uw organisatie.
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.

FAQ
Niet gevonden wat je zocht? Bekijk alle vragen of neem contact op.