Original subtitles

Welcome to this section.

In this section, we're going to create a quiz application, will utilize some of what we've learned

in the past few sections by breaking our app down into components.

We'll throw in some animations to make things more exciting.

It's going to be a lot of fun, so I hope you're ready.

We're going to need to prepare the project.

I've gone ahead with preparing some starter files.

In the resource section of this lecture.

You'll find a zip file with everything you'll need.

There are a total of three files which are app, text, data, text and 60 C.

Keep the zip file in handy.

We'll need it in just a moment.

Pause the video and download it.

I'm providing starter files because I want to focus solely on Vue.

The zip file contains HTML, CSS and some data.

We'll need to create a new project in the command line.

Run the following command.

This command will start a new project.

The name of the project should be called Quiz.

As usual, select no for all questions.

After a while, a new project should be generated.

Move into the project directory after Vue is finished downloading everything.

Next, let's install the dependencies with the NPM install command.

It's not necessary to have some of the default code you'll find in the project.

For example, the files in the components directory can be emptied out.

I'll do that now.

The code in the app component file can be reduced to.

We'll empty out the three blocks in the component.

Lastly, let's export an object from the script block with a property called name.

The name of the component will be called App.

Your app component file should look similar to mine.

Other than making these changes will be good to go.

Our first objective is to add in the HTML and CSS we downloaded from the zip file.

They have the overall structure and styles will be aiming for in this section.

We'll start with the HTML.

Inside the app text file, you'll find some basic HTML markup.

Nothing in here is related to view.

I haven't added any directives or expressions to it.

Those are things we'll add later.

Copy everything inside the text file.

Paste the code you've copied into the template block of the app component.

Next, we need to add in the case there are two options available to us.

We can add the CSIS to the CSIS block in the component file.

The second option is to load the CSIS in an external file.

Either solution is valid.

It's completely up to you.

The first option is the easiest because it's just a copy and paste.

However, I feel like this will be a great opportunity to show you how to load an external CSS file.

It's not hard at all.

Neither solution is wrong, but we'll be looking at how to put CSIS in one file.

We don't need component specific CSIS at this time.

Navigate to the public directory in the project.

Any files we create inside this directory will ship with our application.

They won't be bundled into a single file, but you can still deploy them with your application.

We'll create a file called Main CSIS.

The contents of the file will be filled with the code inside the CSIS text file.

It's very basic CSS.

Nothing in this file should be anything new to you.

With that said, let's preview what we have.

I have my app running using the NPM Run Dev command.

Upon refreshing the page, you should have what I have.

It's a basic quiz app with some dummy questions and answers.

We even have a dummy result below.

There's a progress bar to let the user know how far they are into the quiz.

We'll be using components and animations to make this look nice.

Keep in mind, this is one way of handling static assets in the resource section of this lecture.

I provide a link to the Static Assets Handling Documentation page.

There's more information you'll find on this page about including static assets.

I recommend reading it over.

We'll definitely talk about some of this stuff as the course progresses.

The HTML and CSS are ready.

The next step is to add view into the mix.

We'll cover that in the following lecture.