Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,180 --> 00:00:02,340
It's time to start working on the app.
2
00:00:02,370 --> 00:00:06,880
Whenever you're building an app, it can be daunting to decide on where to begin.
3
00:00:06,900 --> 00:00:11,700
We can move on to the next step, which is to add the HTML CSS.
4
00:00:11,730 --> 00:00:18,960
In this lecture, we're going to take a static HTML template and add it to our project in the resource
5
00:00:18,960 --> 00:00:20,400
section of this lecture.
6
00:00:20,430 --> 00:00:23,340
I provide a zip file with everything you'll need.
7
00:00:23,370 --> 00:00:28,590
It's the HTML, CSS and JavaScript that make our template functional.
8
00:00:28,620 --> 00:00:31,140
This template was built with tailwind.
9
00:00:31,170 --> 00:00:34,080
If you're not familiar with Tailwind, that's fine.
10
00:00:34,110 --> 00:00:38,640
Tailwind is a thesis framework for designing and building sites.
11
00:00:38,670 --> 00:00:42,990
It provides a set of classes that makes it easier to present content.
12
00:00:43,380 --> 00:00:48,210
The code and the zip file I'm providing you does not have any Vue related code.
13
00:00:48,240 --> 00:00:52,320
I will walk you through every step to convert it into a view app.
14
00:00:52,350 --> 00:00:56,270
Keep in mind that this is not an HTML and CSS course.
15
00:00:56,280 --> 00:00:59,340
You are fully expected to know both languages.
16
00:00:59,370 --> 00:01:02,910
Once you've downloaded the zip file, keep it in hand.
17
00:01:03,090 --> 00:01:07,740
Next inside the project, create a directory called Template.
18
00:01:10,060 --> 00:01:17,320
This directory isn't a special directory related to view or the CLI where creating it to store the contents
19
00:01:17,320 --> 00:01:18,480
of the zip file.
20
00:01:18,490 --> 00:01:23,020
I'm going to drag and drop the files from the zip file into this directory.
21
00:01:25,370 --> 00:01:28,230
We're adding the template files for reference.
22
00:01:28,250 --> 00:01:30,760
This directory is only temporary.
23
00:01:30,770 --> 00:01:36,740
You will want to delete it once you've completed the project with the template at our disposal.
24
00:01:36,740 --> 00:01:39,110
Let's add it to the view application.
25
00:01:39,110 --> 00:01:41,300
Inside the source directory.
26
00:01:41,300 --> 00:01:44,420
We're going to focus solely on the app component.
27
00:01:44,600 --> 00:01:48,020
The components directory will have a few components.
28
00:01:48,020 --> 00:01:49,550
We're not going to need them.
29
00:01:49,550 --> 00:01:51,710
Let's delete these components.
30
00:01:51,710 --> 00:01:54,530
Do not delete the tests directory.
31
00:01:54,530 --> 00:01:57,560
This directory will be necessary for the future.
32
00:01:59,850 --> 00:02:03,170
In the app component, we're given a basic setup.
33
00:02:03,180 --> 00:02:07,740
We're going to start fresh, completely delete the script lock.
34
00:02:09,830 --> 00:02:12,560
Next, empty the template block.
35
00:02:14,600 --> 00:02:17,210
Lastly, delete the style block.
36
00:02:19,030 --> 00:02:21,360
We're left with a bare bones component.
37
00:02:21,370 --> 00:02:25,450
That's fine because we'll want to add in the HTML from our template.
38
00:02:25,480 --> 00:02:31,480
Let's begin the process of moving the HTML from the static template into the app component.
39
00:02:31,870 --> 00:02:36,520
Inside the template directory, we have numerous HTML files.
40
00:02:36,550 --> 00:02:37,900
Don't be alarmed.
41
00:02:37,930 --> 00:02:41,380
Every template uses the same markup and stylings.
42
00:02:41,380 --> 00:02:43,660
We won't have to copy every file.
43
00:02:43,690 --> 00:02:45,590
That would be counterproductive.
44
00:02:45,610 --> 00:02:49,300
Instead, we only have to focus on a few sections.
45
00:02:49,480 --> 00:02:52,750
Usually we'll want to start with the home page.
46
00:02:52,750 --> 00:02:55,010
Then we would work our way down.
47
00:02:55,030 --> 00:03:00,970
At least that's the process I usually go through and the process I recommend you go through.
48
00:03:01,000 --> 00:03:05,440
The home page can be found inside the index html file.
49
00:03:05,470 --> 00:03:08,310
This file consists of a few sections.
50
00:03:08,320 --> 00:03:10,900
I'm going to minimize some of the sections.
51
00:03:10,900 --> 00:03:14,650
We want to be able to view the overall structure of the file.
52
00:03:17,020 --> 00:03:21,550
I want to review some of this code to understand better what we're trying to build.
53
00:03:21,580 --> 00:03:26,830
There's a lot of code, but I've taken the liberty of adding some comments before each section.
54
00:03:26,860 --> 00:03:32,770
Be sure to look out for them whenever grabbing the HTML from the templates they'll make searching for
55
00:03:32,770 --> 00:03:34,180
sections easier.
56
00:03:34,450 --> 00:03:37,200
The first section is the head section.
57
00:03:37,210 --> 00:03:38,540
It's pretty standard.
58
00:03:38,560 --> 00:03:41,860
I want you to focus on the style sheets being included.
59
00:03:41,890 --> 00:03:45,160
I'm loading the style sheets for the tailwind framework.
60
00:03:45,190 --> 00:03:49,780
Tailwind is a popular framework for rapidly building modern sites.
61
00:03:49,810 --> 00:03:53,140
Below it, I'm loading in a font called Roboto.
62
00:03:53,170 --> 00:03:57,730
If you want to use a different font family, then by all means do so.
63
00:03:57,760 --> 00:04:01,340
Up next, I'm loading an icon set called font.
64
00:04:01,360 --> 00:04:02,150
Awesome.
65
00:04:02,170 --> 00:04:06,940
While not necessary, icons can make an app look aesthetically pleasing.
66
00:04:06,970 --> 00:04:09,760
The icons are used for the audio player.
67
00:04:10,150 --> 00:04:16,300
Lastly, I'm loading in a custom style sheet I created for additional styles that aren't covered by
68
00:04:16,300 --> 00:04:17,170
Tailwind.
69
00:04:17,350 --> 00:04:21,940
This file mainly contains the stylings for the player and the colors of the site.
70
00:04:21,970 --> 00:04:27,640
If you want to customize how the website appears, then this is the file you will want to modify.
71
00:04:27,670 --> 00:04:32,410
We won't be editing any of the CSS as it's fine just the way it is.
72
00:04:32,440 --> 00:04:35,930
None of the stylings being provided are related to view.
73
00:04:35,950 --> 00:04:38,410
It's completely plain CSS.
74
00:04:38,560 --> 00:04:41,260
The next section is the header.
75
00:04:43,360 --> 00:04:46,690
This section is where the navigation menu will exist.
76
00:04:46,720 --> 00:04:49,750
It'll contain the links to other pages of the site.
77
00:04:49,780 --> 00:04:51,360
There's even a search form.
78
00:04:51,370 --> 00:04:53,270
The search form is not functional.
79
00:04:53,290 --> 00:04:56,560
We'll make it functional in a future lecture with you.
80
00:04:56,860 --> 00:04:59,990
Afterward, we have a section called Introduction.
81
00:05:00,010 --> 00:05:05,710
The purpose of the Introduction section is to give a brief overview of what the page is about.
82
00:05:05,860 --> 00:05:08,140
Not all pages have this section.
83
00:05:08,260 --> 00:05:11,120
It even comes with a simple scroll animation.
84
00:05:11,140 --> 00:05:15,580
You can preview the home page if you're curious about what it looks like.
85
00:05:15,610 --> 00:05:21,610
This section is unnecessary, but it'll give us the opportunity to practice writing components.
86
00:05:21,880 --> 00:05:25,450
The next section is the main content section.
87
00:05:25,510 --> 00:05:27,880
Every page will have this section.
88
00:05:28,030 --> 00:05:31,640
It's the section we'll see often throughout this course.
89
00:05:31,660 --> 00:05:36,250
The HTML for this section will vary depending on the template you're viewing.
90
00:05:36,460 --> 00:05:39,730
Moving right along, we have the player section.
91
00:05:39,760 --> 00:05:44,350
This section is the audio player the user can use to play or pause a song.
92
00:05:44,380 --> 00:05:47,000
It'll display information about the song.
93
00:05:47,020 --> 00:05:48,950
It's a basic audio player.
94
00:05:48,970 --> 00:05:55,750
You won't find many features that most modern players have, such as a loop forward or backward button.
95
00:05:55,780 --> 00:06:00,490
I decided not to add those features because adding them in would distract away from view.
96
00:06:00,520 --> 00:06:02,080
I want to keep it simple.
97
00:06:02,320 --> 00:06:06,640
The next section we have is the authentication modal section.
98
00:06:06,670 --> 00:06:10,340
This section will hold the login and registration forms.
99
00:06:10,360 --> 00:06:13,120
We'll be spending a lot of time on both forms.
100
00:06:13,150 --> 00:06:17,290
It'll be the main focus of this and the next few sections.
101
00:06:17,320 --> 00:06:21,640
This will allow us to learn about authentication and form validation.
102
00:06:21,940 --> 00:06:24,810
There isn't JavaScript attached to the template.
103
00:06:24,820 --> 00:06:28,840
The template is completely made up of HTML and CSS.
104
00:06:28,870 --> 00:06:32,650
We'll be writing the JavaScript code for making it functional.
105
00:06:32,890 --> 00:06:33,600
All right.
106
00:06:33,610 --> 00:06:35,760
That's a basic overview of things.
107
00:06:35,770 --> 00:06:42,090
Let's start adding in the HTML to the app component inside the index static template.
108
00:06:42,100 --> 00:06:47,470
We're going to copy everything from the header section to the authentication modal section.
109
00:06:47,470 --> 00:06:54,040
Search for the comment that says header or the NAV tag to find the header section, copy everything
110
00:06:54,040 --> 00:06:56,920
down to the end of the authentication section.
111
00:06:59,140 --> 00:07:05,230
Switch over to the app component will replace the entire contents of the template block.
112
00:07:07,550 --> 00:07:10,370
Obviously this won't work, but it's a start.
113
00:07:10,400 --> 00:07:13,280
Let's verify everything works in the browser.
114
00:07:13,550 --> 00:07:17,450
If you haven't already start the server, it should always be running.
115
00:07:17,480 --> 00:07:21,050
Nothing will appear on the page to understand why.
116
00:07:21,080 --> 00:07:24,530
Open the console panel from the developer tools.
117
00:07:24,560 --> 00:07:27,710
A couple of messages should appear in the console.
118
00:07:27,740 --> 00:07:32,840
The message we're interested in is the error related to the home component.
119
00:07:32,870 --> 00:07:39,950
This component is utilizing components from the components directory, which we deleted earlier to fix
120
00:07:39,950 --> 00:07:40,830
this issue.
121
00:07:40,850 --> 00:07:42,980
This component should be updated.
122
00:07:43,010 --> 00:07:47,870
Head back to the editor in the source Slash View's directory.
123
00:07:47,900 --> 00:07:49,730
Open the home component.
124
00:07:51,920 --> 00:07:54,770
Let's remove all code from this file.
125
00:07:56,920 --> 00:07:59,470
It's perfectly fine to have an empty component.
126
00:07:59,470 --> 00:08:01,620
File view will not complain.
127
00:08:01,630 --> 00:08:04,150
Let's refresh the page in the browser.
128
00:08:06,300 --> 00:08:07,760
It's an absolute mess.
129
00:08:07,770 --> 00:08:10,700
That's because we haven't loaded the CSIS yet.
130
00:08:10,710 --> 00:08:13,080
That's what we'll tackle in the next lecture.
12016
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.