Course: Front-end-Development

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.

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.

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.

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.

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.

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.

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.

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.

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.

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 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.