Course introduction to "Build a Vue.js Resume"

Course introduction to "Build a Vue.js Resume". Prerequisites, course content, and a look at the final product.

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

  • |

Lesson Transcript

  • [00:00 - 00:15] Welcome! In this course, you will create a resume builder with UJS. With this resume builder, you can easily create your resume, customize the styling to your preference, and avoid the headache of a standard word-free-made resume.

  • [00:16 - 00:31] On top of that, you will learn all the essential concepts of UJS by applying them directly in this project. You will have a stylish resume to show your potential employers and project that demonstrates your view knowledge.

  • [00:32 - 00:41] My name is Katty, and I am a web developer who has been working with UJS for several years. UJS is my preferred JavaScript framework.

  • [00:42 - 00:52] I currently work as a freelance developer, a technical writer, and an installer . This course only requires prior knowledge and HTML, JavaScript, and CSS.

  • [00:53 - 01:04] The course is for developers who are at a beginner or intermediate level in their UJS journey. I will explain the important concepts in a way that somebody with no prior view experience should be able to follow.

  • [01:05 - 01:14] I will always link to the relevant view documentation so that you can read up on more details if you are interested. If you have any questions, you can comment, inline, or ask in Discord.

  • [01:15 - 01:22] You can find the link in the notes below. To create the resume builder, we will be using view3 with the options API.

  • [01:23 - 01:32] The course is structured into four modules with 12 lessons in total. First, we will set up the project and add basic markup and styling for our resume.

  • [01:33 - 01:46] In this module, you will learn about the template style and script section and a single file component in view. We will introduce Reactive State with the data function and render content using this Reactive State.

  • [01:47 - 01:55] In this context, you will learn about text interpolation and template directives. In the second module, we will make the resume content editable.

  • [01:56 - 02:09] Here you will learn about further important template directives, such as Emodel , Vian, as well as about component methods. We will learn about view components and break our app apart into several components to improve its structure.

  • [02:10 - 02:26] Besides components, you will learn about slots, props, and custom events, essential for interacting between components. As a second step to making the resume content editable, we will add functionality for adding and removing entries.

  • [02:27 - 02:36] Here, you will learn about conditional rendering. In this module's last lesson, we will enable the user to target edit mode on or off.

  • [02:37 - 02:46] In this lesson, you will learn about class bindings. In module 3, we will make the resume styling configurable.

  • [02:47 - 03:01] In the first lesson of the module, we will make the styling such as the colors configurable. Afterward, we will enable the user to choose between displaying a picture or hiding it, and make the photo replaceable by adding an upload functionality.

  • [03:02 - 03:14] In this module, you will learn about inline style binding and computed properties. In the fourth and last module, we will enable the user to export the resume as a PDF, as well as save the resume.

  • [03:15 - 03:23] You will learn about working with life cycle methods here. We will wrap up by looking at some ideas of how you can customize the resume maker further on your own.

  • [03:24 - 03:30] I am so excited to have you here and create a resume builder with Vue.js with me. Let's get started.