Visit LEDU token page

How to Create a Portfolio Website in Vue.JS

How to Create a Portfolio Website in Vue.JS

  • English
  • Programming
  • Vue.jsVue.js
  • (3994)
  • Project length: 7h 06m

In this project, you will learn how to create a Portfolio website. We'll focus on HTML, SASS and JavaScript with the framework Vue.js. We'll be focusing on typical elements on personal portfolio websites, such as common layout components, the video player, how to list and sort data, how to data-bind and validate a contact form, and more.



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 JavaScript
  • 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

Project Outline

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:

  • 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


  • HTML, CSS, SASS, Vue.js, Cypress, Jest, Node, NPM


Average rating

5(3994 Reviews)