Course introduction to "Build a Vue.js Resume"

Why you should learn Vue.js

Introduction

Project setup for building a Vue.js resume

Basic markup and styling

Component state and rendering data from it

Project setup & rendering the resume

Editing the resume content

Improving the code structure

Adding and removing entries

Toggling edit mode

Making the resume editable

Make styling configurable

Configuring the photo

Configurable resume styling

Export resume as PDF

Save the resume configuration

Where to take it from here

Exporting the pdf, saving the configuration, further steps

A resume that you created on a **Vue.js Resume Builder**, a Vue.js Resume Builder that **YOU** created! Now **THAT’s** the good stuff. That’s that stuff that distinguishes **YOU** from the flock of **“Word” and “PDF”**.

### 5 Reason for Creating your Resume Builder in Vue

1. Vue.js is very **performant**: It works with a virtual DOM, a lightweight representation of the actual DOM. It allows Vue to optimize updates and significantly improves performance.

2. With its component-based development, Vue helps **structure code**, which makes maintaining it easier.

3. Vue.js simplifies the **rendering of content** immensely: When your data changes, the connected part of the DOM automatically re-renders.

4. Vue is a **progressive framework**: That means you can introduce Vue into an existing project. You don't have to rewrite everything, instead, you can only use Vue for a specific page or section of your project.

5. It is **open-source**, and you can be sure that it will be continued due to its popularity.

### Overcoming Challenges in Vue and Developing a Resume Builder

If you are already familar with CSS, HTML, and JavaScript, with the gentlest learning curve, Vue is your doorway into a fully-fledged front-end or even a full-stack web developer.

Mastering Vue can present a learning curve for absolute beginners unfamiliar with CSS, HTML, and JavaSrcript, this is due to its extensive features and concepts like data properties, methods, computed properties, custom events, and lifecycle hooks. While Vue offers excellent [documentation](https://vuejs.org/guide/introduction.html), it can be challenging for developers to get a deeper understanding without a structured learning path.

The best way to familarize yourself with a new framework is to work on a portfolio project, and this course is exactly that. You won't find anything about creating a portfolio project in any offical documentation. This course also provides a **structured learning path**, breaking down complex concepts into manageable lessons.

Our aim is to ensure that you progressively build your understanding of Vue, starting from the basics and advancing to more complex topics. And thus, this course is tailored for Vue.js beginners, leveraging the Options API in Vue 3 for its **beginner-friendly** approach.

We emphasize practical application as the most effective way to become familiar with the material, ensuring you apply newly introduced concepts from the course's very first lesson. Instead of practicing on simple to-do list apps, you have the opportunity to create a substantial portfolio project that you can showcase to friends, potential employers, and even use for yourself to create a Developer Resume.

### Course Content Overview
Course Overview:
Total Modules: **5**
Total Lessons: **14**
Total Video Runtime: **1 hour, 30 minutes**

Enhance your Portfolio with a Kickass Vue 3 Resume Builder

“**Word” or “PDF” resume pfft!** You’re better than that and you know it. In this course, you will create a **customizable developer resume from scratch in Vue.js** with features and tools to make meaningful changes in the content and the design of your developer resume.

This course will also teach you all the fundamental concepts of Vue, with code-along video lessons, detailed explanations, and hands-on exercises. By the end of the course, you'll have a deep **understanding of Vue**, a **stylish developer resume**, and a **portfolio project** that demonstrates your Vue knowledge.

Interactive Vue.js Resume Builder

Creating a highly configurable and customizable Resume Bilder in Vue

Setting up Vue projects with the Single File Components architecture

Component reactivity and dynamic data rendering with Vue directives

Computed properties and component methods

Communication between components via props and custom events

Conditional styling through class and inline style bindings

We set up the project in the previous lesson, so we now have a local development server that serves our Vue app. Now we can really get started, and we will start by creating the markup and some styling for the resume builder.

The code editor contains the final code from the previous lesson. Feel free to use it as a starting point to dive into this lesson.

We want to structure our code by creating one component per file. This Single-File Component setup requires us to have either a template or a script tag. If we don't have that, we will get an error.

In Vue, all that should be rendered goes in between the template tags.

<template>
	// markup goes here
</template>

You can write normal HTML in there. The magic of Vue, however, is that you can do more than that. You can render data from the component's state and display other components as child components of your current component. That means whatever the child components template contains will be displayed in the parent component's template.

For now, we only have one component, our App, that resides in the App.vue file. We can add some markup already. We will add the tag 

 as a wrapper for all content and give it the class 

. Next, we add the wrapper for the resume. Let's add a 

You see, I added an id and a class here. But where do we add the CSS rule for those? There are many ways to add styling in Vue: We could write everything in a separate CSS file that applies to every component. With our setup, we can use the main.css file for that. Styling can also be applied inline, but this could clutter the HTML. We can also add 

. That means that the styling will only get applied to the elements of the component of the current file (in a Single-File Component setup).

We will be using both. Scoped style, for styling specific to a single component and simple styling that should be global, we add to the main.css. Feel free to copy the styling code snippets from the course transcript below.

 class we added in our template should give the element a 

 as well as center the content by setting 

 to auto. Since this is a general styling, we add it in the main.css. We also add 

.container {
  margin: 40px auto;
  max-width: 1200px;
}

To distinguish our resume from the background, we give it a box-shadow. We also set the height and width according to the international A4 standard that specifies the size of a page. It is commonly used for resumes in many parts of the world. In North America, the most common paper size standard for letter-sized documents is known as "Letter" or "US Letter”. Which one you choose is up to you here.

#resume {
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
  /* DIN A4 standard paper size. commonly used for resumes
  For North America letter size use width: 8.5in; height: 11in; */
  height: 297mm;
  width: 210mm;
}

Now, before we go any further - how do we want to structure our resume? If you google 

 you find countless examples of different layouts. There are lots of inspirations. Even though we are going to make many styling choices configurable, we do have to decide on the layout. Many layouts divide the resume into two columns: a small column on the left and a bigger one on the right. This gives the resume a good structure, so we will do the same.

We add a left and right column inside the resume for that.

By default, they will be underneath each other because 

 elements are block-level elements, which means they will take up the full width. We need to set the parent to display 

. We are not using Bootstrap in this app because we will barely need it. There are some really useful classes Bootstrap provides when it comes to layout and spacing. But instead of loading Bootstrap's entire stylesheet to use them, we will create some useful classes ourselves. In our main.css we add 

 now, and the columns will be next to each other.

We want the left column smaller than the right one, so we set 

Before adding more styling, we will add the main resume markup with placeholder content. This way, we can get an idea about the structure and style.

A good place to start is by adding headlines. In the left column, we will add "About me", "Contact", "Skills", "Certifications". In the right one, "Experience" and "Education". These names are just placeholders because we will allow the user to edit them. 

<div class="left-col">
  <h4 class="section-headline">
    About me
  </h4>
  <h4 class="section-headline">
    Contact
  </h4>
  <h4 class="section-headline">
    Skills
  </h4>
  <h4 class="section-headline">
    Certifications
  </h4>
</div>
<div class="right-col">
  <h4 class="section-headline">
    Experience
  </h4>
  <h4 class="section-headline">
    Education
  </h4>
</div>

Most importantly, the resume needs a name and a position title. We add this to the top of the right column.

<div class="right-col">
  <div class="personal-name">
    Your name
  </div>
  <div class="personal-title">
    Job title
  </div>

  <h4 class="section-headline">
    Experience
  </h4>
  <h4 class="section-headline">
    Education
  </h4>
</div>

Let's fill in some placeholder content in the left column. I have generated some placeholder content, you can copy it from the course transcript if you like. Underneath the “About me” headline, we add a paragraph with a small introduction. Contact gets a phone number, an email, and an address. Let’s also add a few qualifications and certifications.

<div class="left-col">
  <h4 class="section-headline">
    About me
  </h4>
  <div>
    From data cleaning to data analysis to machine learning,
    I am passionate about everything data.
  </div>

  <h4 class="section-headline">
    Contact
  </h4>
  <ul>
    <li>15713909584</li>
    <li>contact@gmail.com</li>
    <li>Main St 100, 19777 NY</li>
  </ul>

  <h4 class="section-headline">
    Skills
  </h4>
  <ul>
    <li>Python</li>
    <li>Pandas</li>
    <li>SQL</li>
    <li>R</li>
    <li>Machine Learning</li>
  </ul>

  <h4 class="section-headline">
    Certifications
  </h4>
  <ul>
    <li>Natural Language Processing with Python (Coursera)</li>
    <li>Recommendation Systems with TensorFlow on GCP (Google)</li>
  </ul>
</div>

Next, we add placeholder content for the right column. For experience, we want to add job title, company, location, time range, and a few description points regarding what we did there. The education entries we structure similarly. Each education entry needs the name of the degree, the university name, and the location, time range, and some description bullet points. With this we can highlight courses, achievements, or activities.

<div class="right-col">
  <div class="personal-name">
    Michaela Scarn
  </div>
  <div class="personal-title">
    Senior Data Scientist
  </div>
  <h4 class="section-headline">
    Experience
  </h4>

  <div>Senior Data Scientist</div>
  <div>ABC Analytics Inc., London, 2022 - Present</div>

  <ul>
    <li>
      Led a team of data scientists in developing advanced machine learning models for predictive analytics
    </li>
    <li>
      Designed and implemented a recommendation system that boosted cross-selling, leading to a 20% increase in revenue
    </li>
  </ul>

  <div>Data Scientist</div>
  <div>XYZ Data Solutions, London, 2022 - Present</div>

  <ul>
    <li>
      Developed and deployed machine learning models for fraud detection, reducing fraudulent transactions by 18%
    </li>
    <li>
      Conducted in-depth exploratory data analysis to identify key trends and insights
    </li>
  </ul>

  <h4 class="section-headline">
    Education
  </h4>

  <div>Master of Science in Data Science</div>
  <div>StellarTech University, Starville, 2020-2022</div>
  <ul>
    <li>
        Coursework included advanced machine learning, statistical modeling, and data visualization techniques.
    </li>
    <li>
        Thesis: 'Predictive Modeling for Customer Churn in E-commerce using Random Forest.'
    </li>
  </ul>

  <div>Bachelor of Science in Computer Science</div>
  <div>Evergreen State University, Springdale, 2012-2015</div>
  <ul>
    <li>Relevant coursework in database management, algorithms, and programming languages.</li>
    <li>Senior project: 'Development of a Recommender System for Movie Ratings.'</li>
  </ul>
</div>

Now that we understand how the resume will be structured let's add the rest of the styling. In the main.css we add CSS variables for the main colors we will use. We will make those adjustable for the user in a later lesson.

:root {
  --highlight-color-left: #82C0CC;
  --background-color-left: #3943B7;
  --text-color-left: #ffffff;
  --highlight-color-right: #3943B7;
  --background-color-right: #ffffff;
  --text-color-right: #000505;
}

We give the left column a background color and a border to the right so that we can distinguish them properly. We also give both columns some padding.

.left-col {
  background-color: var(--background-color-left);
  color: var(--text-color-left);
  border-right: 1px solid var(--highlight-color-left);
  width: 30%;
  padding: 30px;
}

.right-col {
  background-color: var(--background-color-right);
  color: var(--text-color-right);
  width: 70%;
  padding: 30px;
}

The section headlines will also get some styling to distinguish the headline from the normal text better.

.section-headline {
  font-size: 20px;
  font-weight: var(--headline-weight);
  margin-bottom: 15px;
  margin-top: 0;
}

.right-col .section-headline {
  color: var(--highlight-color-right);
}

For the left column, we want the section headlines to have this underlined look that starts at the column separation line. So, we use a negative 

.left-col .section-headline {
  border-bottom: 1px solid var(--highlight-color-left);
  padding-bottom: 5px;
  margin-right: -30px;
  padding-right: 10px;
  color: var(--highlight-color-left);
}

To apply the same spacing to the different sections of our resume, we wrap them into a 

. Each section should contain a headline, such as “About me” and the content that belongs to it. Each section should add the same spacing at the bottom. We will add a 

<div class="left-col">
    <div class="resume-section">
        <div class="section-headline">
            About me
        </div>
        <div>
            From data cleaning to data analysis to machine learning,
            I am passionate about everything data.
        </div>
    </div>
    ...
</div>

.resume-section {
  margin-bottom: 30px;
}

In the right column, we want to improve the styling a bit. We will apply some styling to the 

, we deduct the space that the column added via padding. This way, the underline will start precisely at the column separation line.
As mentioned before, feel free to copy the CSS snippet from the course transcript if you dont want to type this line by line.

.personal-name {
  font-weight: 300;
  color: var(--highlight-color-right);
  font-size: 28px;
  border-bottom: 1px solid var(--highlight-color-right);
  margin: 0;
  margin-left: -30px;
  padding-left: 30px;
  padding-bottom: 15px;
}

.personal-title {
  border-bottom: 1px solid var(--highlight-color-right);
  margin: 0 0 20px -30px;
  padding: 15px 0 15px 30px;
  font-weight: 300;
  font-size: 20px;
}

The list items are very far indented. It is styling that is applied by the browser automatically, as we can see when we inspect the element. We want to overwrite that for all unordered lists in the resume. There is also a margin added that we want to overwrite.

#resume ul {
  padding-inline-start: 16px;
  margin-block-end: 0px;
  margin-block-start: 5px;
}

body {
  font-family: sans-serif;
  font-size: 16px;
}

Now, you can see the resume taking shape. We will give the user adjustment options, but the general structure will stay like this. It is time to move the placeholder data into the reactive component state and render data from there.

You can download the code for this lesson 

---
title: Basic markup and styling
isPublicLesson: true
privateVideoUrl: https://stream.mux.com/FC00X5SGgdStcsMOpV5xpoUPCSua202ZVs501Kq7nJw4X00.m3u8
description: Add basic markup and styling to the resume app. Learn about scoped styling in Vue.js.
code: https://gitlab.com/fullstackio/books/newline-course-apps/katharina-spiecker-build-a-vuejs-resume-app/-/tree/main/lesson-2-starting-code?ref_type=heads
useMdx: true
---

## Basic markup and styling

We set up the project in the previous lesson, so we now have a local development server that serves our Vue app. Now we can really get started, and we will start by creating the markup and some styling for the resume builder.

The code editor contains the final code from the previous lesson. Feel free to use it as a starting point to dive into this lesson.

<ReplitEmbed src="https://replit.com/@newlineauthors/module-2-lesson-2" />

We want to structure our code by creating one component per file. This Single-File Component setup requires us to have either a template or a script tag. If we don't have that, we will get an error.

In Vue, all that should be rendered goes in between the template tags.

```html
<template>
	// markup goes here
</template>
```

You can write normal HTML in there. The magic of Vue, however, is that you can do more than that. You can render data from the component's state and display other components as child components of your current component. That means whatever the child components template contains will be displayed in the parent component's template.

For now, we only have one component, our App, that resides in the App.vue file. We can add some markup already. We will add the tag `main` as a wrapper for all content and give it the class `container`. Next, we add the wrapper for the resume. Let's add a `div` for that with the id of resume. 

```html
<template>
	<main class="container">
	    <div id="resume">
		</div>
	</main>
</template>
```

You see, I added an id and a class here. But where do we add the CSS rule for those? There are many ways to add styling in Vue: We could write everything in a separate CSS file that applies to every component. With our setup, we can use the main.css file for that. Styling can also be applied inline, but this could clutter the HTML. We can also add [component specific styling](https://vuejs.org/api/sfc-css-features.html#scoped-css). That means that the styling will only get applied to the elements of the component of the current file (in a Single-File Component setup).

For that, we add the `scoped` attribute to the `<style>` tag.

```html
<style scoped>
	/* style goes here */
</style>
```

We will be using both. Scoped style, for styling specific to a single component and simple styling that should be global, we add to the main.css. Feel free to copy the styling code snippets from the course transcript below.

The `container` class we added in our template should give the element a `max-width` as well as center the content by setting `margin-left` and `margin-right` to auto. Since this is a general styling, we add it in the main.css. We also add `40px` margin to the top and bottom.

```css
.container {
  margin: 40px auto;
  max-width: 1200px;
}
```

To distinguish our resume from the background, we give it a box-shadow. We also set the height and width according to the international A4 standard that specifies the size of a page. It is commonly used for resumes in many parts of the world. In North America, the most common paper size standard for letter-sized documents is known as "Letter" or "US Letter”. Which one you choose is up to you here.

```css
#resume {
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
  /* DIN A4 standard paper size. commonly used for resumes
  For North America letter size use width: 8.5in; height: 11in; */
  height: 297mm;
  width: 210mm;
}
```

Now, before we go any further - how do we want to structure our resume? If you google `“Resume examples”` you find countless examples of different layouts. There are lots of inspirations. Even though we are going to make many styling choices configurable, we do have to decide on the layout. Many layouts divide the resume into two columns: a small column on the left and a bigger one on the right. This gives the resume a good structure, so we will do the same.

We add a left and right column inside the resume for that.

```html
<template>
  <main class="container">
    <div id="resume">
      <div class="left-col"></div>
      <div class="right-col"></div>
    </div>
  </main>
</template>
```

By default, they will be underneath each other because `div` elements are block-level elements, which means they will take up the full width. We need to set the parent to display `flex`. We are not using Bootstrap in this app because we will barely need it. There are some really useful classes Bootstrap provides when it comes to layout and spacing. But instead of loading Bootstrap's entire stylesheet to use them, we will create some useful classes ourselves. In our main.css we add `d-flex`.

```css
.d-flex {
    display: flex;
}
```

We can add this class to the resume `div` now, and the columns will be next to each other.

```html
<template>
  <main class="container">
    <div id="resume" class="d-flex">
      <div class="left-col"></div>
      <div class="right-col"></div>
    </div>
  </main>
</template>
```

We want the left column smaller than the right one, so we set `.left-col` to 30% and the `.right-col` to 70%. 

Before adding more styling, we will add the main resume markup with placeholder content. This way, we can get an idea about the structure and style.

A good place to start is by adding headlines. In the left column, we will add "About me", "Contact", "Skills", "Certifications". In the right one, "Experience" and "Education". These names are just placeholders because we will allow the user to edit them. 

We will wrap those headlines into `h4` tags and add the class `section-headline`.

```html
<div class="left-col">
  <h4 class="section-headline">
    About me
  </h4>
  <h4 class="section-headline">
    Contact
  </h4>
  <h4 class="section-headline">
    Skills
  </h4>
  <h4 class="section-headline">
    Certifications
  </h4>
</div>
<div class="right-col">
  <h4 class="section-headline">
    Experience
  </h4>
  <h4 class="section-headline">
    Education
  </h4>
</div>
```

Most importantly, the resume needs a name and a position title. We add this to the top of the right column.

```html
<div class="right-col">
  <div class="personal-name">
    Your name
  </div>
  <div class="personal-title">
    Job title
  </div>

  <h4 class="section-headline">
    Experience
  </h4>
  <h4 class="section-headline">
    Education
  </h4>
</div>
```

Let's fill in some placeholder content in the left column. I have generated some placeholder content, you can copy it from the course transcript if you like. Underneath the “About me” headline, we add a paragraph with a small introduction. Contact gets a phone number, an email, and an address. Let’s also add a few qualifications and certifications.

```html
<div class="left-col">
  <h4 class="section-headline">
    About me
  </h4>
  <div>
    From data cleaning to data analysis to machine learning,
    I am passionate about everything data.
  </div>

  <h4 class="section-headline">
    Contact
  </h4>
  <ul>
    <li>15713909584</li>
    <li>contact@gmail.com</li>
    <li>Main St 100, 19777 NY</li>
  </ul>

  <h4 class="section-headline">
    Skills
  </h4>
  <ul>
    <li>Python</li>
    <li>Pandas</li>
    <li>SQL</li>
    <li>R</li>
    <li>Machine Learning</li>
  </ul>

  <h4 class="section-headline">
    Certifications
  </h4>
  <ul>
    <li>Natural Language Processing with Python (Coursera)</li>
    <li>Recommendation Systems with TensorFlow on GCP (Google)</li>
  </ul>
</div>
```

Next, we add placeholder content for the right column. For experience, we want to add job title, company, location, time range, and a few description points regarding what we did there. The education entries we structure similarly. Each education entry needs the name of the degree, the university name, and the location, time range, and some description bullet points. With this we can highlight courses, achievements, or activities.

```html
<div class="right-col">
  <div class="personal-name">
    Michaela Scarn
  </div>
  <div class="personal-title">
    Senior Data Scientist
  </div>
  <h4 class="section-headline">
    Experience
  </h4>

  <div>Senior Data Scientist</div>
  <div>ABC Analytics Inc., London, 2022 - Present</div>

  <ul>
    <li>
      Led a team of data scientists in developing advanced machine learning models for predictive analytics
    </li>
    <li>
      Designed and implemented a recommendation system that boosted cross-selling, leading to a 20% increase in revenue
    </li>
  </ul>

  <div>Data Scientist</div>
  <div>XYZ Data Solutions, London, 2022 - Present</div>

  <ul>
    <li>
      Developed and deployed machine learning models for fraud detection, reducing fraudulent transactions by 18%
    </li>
    <li>
      Conducted in-depth exploratory data analysis to identify key trends and insights
    </li>
  </ul>

  <h4 class="section-headline">
    Education
  </h4>

  <div>Master of Science in Data Science</div>
  <div>StellarTech University, Starville, 2020-2022</div>
  <ul>
    <li>
        Coursework included advanced machine learning, statistical modeling, and data visualization techniques.
    </li>
    <li>
        Thesis: 'Predictive Modeling for Customer Churn in E-commerce using Random Forest.'
    </li>
  </ul>

  <div>Bachelor of Science in Computer Science</div>
  <div>Evergreen State University, Springdale, 2012-2015</div>
  <ul>
    <li>Relevant coursework in database management, algorithms, and programming languages.</li>
    <li>Senior project: 'Development of a Recommender System for Movie Ratings.'</li>
  </ul>
</div>
```

Now that we understand how the resume will be structured let's add the rest of the styling. In the main.css we add CSS variables for the main colors we will use. We will make those adjustable for the user in a later lesson.

```css
:root {
  --highlight-color-left: #82C0CC;
  --background-color-left: #3943B7;
  --text-color-left: #ffffff;
  --highlight-color-right: #3943B7;
  --background-color-right: #ffffff;
  --text-color-right: #000505;
}
```

We give the left column a background color and a border to the right so that we can distinguish them properly. We also give both columns some padding.

```css
.left-col {
  background-color: var(--background-color-left);
  color: var(--text-color-left);
  border-right: 1px solid var(--highlight-color-left);
  width: 30%;
  padding: 30px;
}

.right-col {
  background-color: var(--background-color-right);
  color: var(--text-color-right);
  width: 70%;
  padding: 30px;
}
```

The section headlines will also get some styling to distinguish the headline from the normal text better.

```css
.section-headline {
  font-size: 20px;
  font-weight: var(--headline-weight);
  margin-bottom: 15px;
  margin-top: 0;
}

.right-col .section-headline {
  color: var(--highlight-color-right);
}
```

For the left column, we want the section headlines to have this underlined look that starts at the column separation line. So, we use a negative `margin-right` here.

```css
.left-col .section-headline {
  border-bottom: 1px solid var(--highlight-color-left);
  padding-bottom: 5px;
  margin-right: -30px;
  padding-right: 10px;
  color: var(--highlight-color-left);
}
```

To apply the same spacing to the different sections of our resume, we wrap them into a `div` with the class `resume-section`. Each section should contain a headline, such as “About me” and the content that belongs to it. Each section should add the same spacing at the bottom. We will add a `30px` margin to the bottom of each section.

```html
<div class="left-col">
    <div class="resume-section">
        <div class="section-headline">
            About me
        </div>
        <div>
            From data cleaning to data analysis to machine learning,
            I am passionate about everything data.
        </div>
    </div>
    ...
</div>
```

```css
.resume-section {
  margin-bottom: 30px;
}
```

In the right column, we want to improve the styling a bit. We will apply some styling to the `personal-name` and `personal-title` `div`. With `margin-left: -30px`, we deduct the space that the column added via padding. This way, the underline will start precisely at the column separation line.
As mentioned before, feel free to copy the CSS snippet from the course transcript if you dont want to type this line by line.

```css
.personal-name {
  font-weight: 300;
  color: var(--highlight-color-right);
  font-size: 28px;
  border-bottom: 1px solid var(--highlight-color-right);
  margin: 0;
  margin-left: -30px;
  padding-left: 30px;
  padding-bottom: 15px;
}

.personal-title {
  border-bottom: 1px solid var(--highlight-color-right);
  margin: 0 0 20px -30px;
  padding: 15px 0 15px 30px;
  font-weight: 300;
  font-size: 20px;
}
```

The list items are very far indented. It is styling that is applied by the browser automatically, as we can see when we inspect the element. We want to overwrite that for all unordered lists in the resume. There is also a margin added that we want to overwrite.

```css
#resume ul {
  padding-inline-start: 16px;
  margin-block-end: 0px;
  margin-block-start: 5px;
}
```

In the main.css we set the `font-family` to `sans-serif` and the `font-size` to `16px`.

```css
body {
  font-family: sans-serif;
  font-size: 16px;
}
```

Now, you can see the resume taking shape. We will give the user adjustment options, but the general structure will stay like this. It is time to move the placeholder data into the reactive component state and render data from there.

:::note
You can download the code for this lesson [here](https://github.com/katharina-spiecker/vue-resume-app-course/releases/tag/lesson-2).
:::


Add basic markup and styling to the resume app. Learn about scoped styling in Vue.js.

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Interactive Vue.js Resume Builder

Module 1: Introduction

Introduction:

Start Here

Lesson 1: (3:31)

Course introduction to "Build a Vue.js Resume"

Lesson 2:

Why you should learn Vue.js

Module 2: Project setup & rendering the resume

Lesson 1: (8:14)

Project setup for building a Vue.js resume

Lesson 2: (9:20)

Basic markup and styling

Lesson 3: (13:45)

Component state and rendering data from it

Module 3: Making the resume editable

Lesson 1: (16:31)

Editing the resume content

Lesson 2: (17:15)

Improving the code structure

Lesson 3: (17:43)

Adding and removing entries

Lesson 4: (12:33)

Toggling edit mode

Module 4: Configurable resume styling

Lesson 1: (33:10)

Make styling configurable

Lesson 2: (12:05)

Configuring the photo

Module 5: Exporting the pdf, saving the configuration, further steps

Lesson 1: (22:19)

Export resume as PDF

Lesson 2: (10:50)

Save the resume configuration

Lesson 3: (2:21)

Where to take it from here

Basic markup and styling