Original subtitles

It's time to start working on the app.

Whenever you're building an app, it can be daunting to decide on where to begin.

We can move on to the next step, which is to add the HTML CSS.

In this lecture, we're going to take a static HTML template and add it to our project in the resource

section of this lecture.

I provide a zip file with everything you'll need.

It's the HTML, CSS and JavaScript that make our template functional.

This template was built with tailwind.

If you're not familiar with Tailwind, that's fine.

Tailwind is a thesis framework for designing and building sites.

It provides a set of classes that makes it easier to present content.

The code and the zip file I'm providing you does not have any Vue related code.

I will walk you through every step to convert it into a view app.

Keep in mind that this is not an HTML and CSS course.

You are fully expected to know both languages.

Once you've downloaded the zip file, keep it in hand.

Next inside the project, create a directory called Template.

This directory isn't a special directory related to view or the CLI where creating it to store the contents

of the zip file.

I'm going to drag and drop the files from the zip file into this directory.

We're adding the template files for reference.

This directory is only temporary.

You will want to delete it once you've completed the project with the template at our disposal.

Let's add it to the view application.

Inside the source directory.

We're going to focus solely on the app component.

The components directory will have a few components.

We're not going to need them.

Let's delete these components.

Do not delete the tests directory.

This directory will be necessary for the future.

In the app component, we're given a basic setup.

We're going to start fresh, completely delete the script lock.

Next, empty the template block.

Lastly, delete the style block.

We're left with a bare bones component.

That's fine because we'll want to add in the HTML from our template.

Let's begin the process of moving the HTML from the static template into the app component.

Inside the template directory, we have numerous HTML files.

Don't be alarmed.

Every template uses the same markup and stylings.

We won't have to copy every file.

That would be counterproductive.

Instead, we only have to focus on a few sections.

Usually we'll want to start with the home page.

Then we would work our way down.

At least that's the process I usually go through and the process I recommend you go through.

The home page can be found inside the index html file.

This file consists of a few sections.

I'm going to minimize some of the sections.

We want to be able to view the overall structure of the file.

I want to review some of this code to understand better what we're trying to build.

There's a lot of code, but I've taken the liberty of adding some comments before each section.

Be sure to look out for them whenever grabbing the HTML from the templates they'll make searching for

sections easier.

The first section is the head section.

It's pretty standard.

I want you to focus on the style sheets being included.

I'm loading the style sheets for the tailwind framework.

Tailwind is a popular framework for rapidly building modern sites.

Below it, I'm loading in a font called Roboto.

If you want to use a different font family, then by all means do so.

Up next, I'm loading an icon set called font.

Awesome.

While not necessary, icons can make an app look aesthetically pleasing.

The icons are used for the audio player.

Lastly, I'm loading in a custom style sheet I created for additional styles that aren't covered by

Tailwind.

This file mainly contains the stylings for the player and the colors of the site.

If you want to customize how the website appears, then this is the file you will want to modify.

We won't be editing any of the CSS as it's fine just the way it is.

None of the stylings being provided are related to view.

It's completely plain CSS.

The next section is the header.

This section is where the navigation menu will exist.

It'll contain the links to other pages of the site.

There's even a search form.

The search form is not functional.

We'll make it functional in a future lecture with you.

Afterward, we have a section called Introduction.

The purpose of the Introduction section is to give a brief overview of what the page is about.

Not all pages have this section.

It even comes with a simple scroll animation.

You can preview the home page if you're curious about what it looks like.

This section is unnecessary, but it'll give us the opportunity to practice writing components.

The next section is the main content section.

Every page will have this section.

It's the section we'll see often throughout this course.

The HTML for this section will vary depending on the template you're viewing.

Moving right along, we have the player section.

This section is the audio player the user can use to play or pause a song.

It'll display information about the song.

It's a basic audio player.

You won't find many features that most modern players have, such as a loop forward or backward button.

I decided not to add those features because adding them in would distract away from view.

I want to keep it simple.

The next section we have is the authentication modal section.

This section will hold the login and registration forms.

We'll be spending a lot of time on both forms.

It'll be the main focus of this and the next few sections.

This will allow us to learn about authentication and form validation.

There isn't JavaScript attached to the template.

The template is completely made up of HTML and CSS.

We'll be writing the JavaScript code for making it functional.

All right.

That's a basic overview of things.

Let's start adding in the HTML to the app component inside the index static template.

We're going to copy everything from the header section to the authentication modal section.

Search for the comment that says header or the NAV tag to find the header section, copy everything

down to the end of the authentication section.

Switch over to the app component will replace the entire contents of the template block.

Obviously this won't work, but it's a start.

Let's verify everything works in the browser.

If you haven't already start the server, it should always be running.

Nothing will appear on the page to understand why.

Open the console panel from the developer tools.

A couple of messages should appear in the console.

The message we're interested in is the error related to the home component.

This component is utilizing components from the components directory, which we deleted earlier to fix

this issue.

This component should be updated.

Head back to the editor in the source Slash View's directory.

Open the home component.

Let's remove all code from this file.

It's perfectly fine to have an empty component.

File view will not complain.

Let's refresh the page in the browser.

It's an absolute mess.

That's because we haven't loaded the CSIS yet.

That's what we'll tackle in the next lecture.