Session 1: Setting-up the Environment

Setting up the programming environment for windows

Setting up Vue.js

Tour of the default application skeleton

Session 2: Front-End - Basic structure of a website and also how to style it with multiple themes. The languages or frameworks that we will use are:

HTML, CSS, SASS

JavaScript

Vue.js

Session 3: Navigation bar and multiple language support aka translations

Here we'll look into how to make a fixed navigation bar, how to style it, and also how to enable multiple language support with Vue.js

Session 4: Creating a side-bar component, with the help of slots and events in Vue.js. Language and Theme commands.

Change language and theme with events through Vue.js

How to use slots, to get dynamic components

Session 5: Creating the modal component for our site, which should be responsible for changing themes and language

Session 5.1: Modals/Dialogs, creating the modal component

Session 5.2: Continuation of the modal component

Session 6: In this part you will learn how to use flex/flexbox to create the layout of our website

Session 6.1: Creating the layout of our site

Session 6.2: Flex basics

Session 6.3: Layout and styling

Session 6.4: Styling

Session 7: Embed an HTML5 Video player

How to script the common playback controls, and volume controls, and create your own controls and how to style them.

Session 7.1: Playback controls

Session 7.2: Volume controls and seek controls

Session 8: In this part we are going to create a page that lists skills. You will learn how to use HTTP library axios to retrieve data from a JSON file and how to style the list items.

Session 8.1: Skills view, how to list skills

Session 8.2: Skills view, rating element. Creating a rating element for the skills, and learn how to sort and filter the list

Session 9: Contact form, and data-binding the form

Create a contact view, where we data-bind the contact form and some styling

Session 10: Unit, and E2E testing

In this last part we're doing some unit tests, and then some end to end (E2E) testing

Tools: