How to Create a Portfolio Website in Vue.JS
- Project length: 7h 06m
This tutorial will cover all the details (resources, tools, languages etc) that are necessary to build a complete and operational Personal Portfolio Website. You will be guided through all the steps and concepts, starting from the basic ones like setting up the right tools and frameworks to the more advanced topics related to the website’s development. And ultimately, you will be able to create your own dating website without any difficulty.
What are the requirements?
- Basic knowledge of frameworks: Vue.js, SASS, Cypress, and Jest
Who is the target audience?
- You want to learn the basics of scripting, styling and testing your websites
- Learners who want to enhance their knowledge
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
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
- HTML, CSS, SASS, Vue.js, Cypress, Jest, Node, NPM