Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,160 --> 00:00:03,080
So this section is all
2
00:00:03,080 --> 00:00:06,320
about building a real-world project.
3
00:00:06,320 --> 00:00:08,790
Now designing and building a website
4
00:00:08,790 --> 00:00:11,810
is not simply writing some code.
5
00:00:11,810 --> 00:00:14,040
It's a lot more than that.
6
00:00:14,040 --> 00:00:17,230
So it's actually a whole development process
7
00:00:17,230 --> 00:00:21,920
that requires a lot of careful thinking and planning
8
00:00:21,920 --> 00:00:26,230
and all that before you even write a single line of code.
9
00:00:26,230 --> 00:00:29,820
And so, before we start building our project,
10
00:00:29,820 --> 00:00:33,230
let's actually learn to seven steps that are part
11
00:00:33,230 --> 00:00:35,140
of the development process,
12
00:00:35,140 --> 00:00:37,780
so that you know exactly how to proceed
13
00:00:37,780 --> 00:00:41,053
once you want to start building your own websites.
14
00:00:43,100 --> 00:00:44,840
So, as an overview,
15
00:00:44,840 --> 00:00:47,470
here we have the seven steps that are part
16
00:00:47,470 --> 00:00:49,380
of the development process
17
00:00:49,380 --> 00:00:52,650
that is behind building any website.
18
00:00:52,650 --> 00:00:57,030
So first, we need to define and to plan the project.
19
00:00:57,030 --> 00:01:00,260
Then we start thinking about the layout of the page
20
00:01:00,260 --> 00:01:02,960
and create some initial sketches.
21
00:01:02,960 --> 00:01:05,790
And only then after these three phases,
22
00:01:05,790 --> 00:01:09,870
we can finally start designing and building the website.
23
00:01:09,870 --> 00:01:13,530
Then once that is done, we need to of course test
24
00:01:13,530 --> 00:01:17,630
and optimize that page before we can actually launch it.
25
00:01:17,630 --> 00:01:20,090
But even then we are not done
26
00:01:20,090 --> 00:01:23,180
because any website that is live on the web needs
27
00:01:23,180 --> 00:01:26,750
to be maintained and updated, okay?
28
00:01:26,750 --> 00:01:29,610
And so now let's take a look at these seven steps here,
29
00:01:29,610 --> 00:01:33,960
one by one, starting with defining the project.
30
00:01:33,960 --> 00:01:35,380
And in this step,
31
00:01:35,380 --> 00:01:38,700
the first thing that we do is something very simple,
32
00:01:38,700 --> 00:01:43,290
which is to simply define who the website is actually for.
33
00:01:43,290 --> 00:01:45,760
So for example, is it for yourself?
34
00:01:45,760 --> 00:01:49,270
Or is it for a client of your freelancing business?
35
00:01:49,270 --> 00:01:52,390
Or maybe even the agency that you're working?
36
00:01:52,390 --> 00:01:53,880
So this sounds trivial,
37
00:01:53,880 --> 00:01:56,660
but it's still important to do this.
38
00:01:56,660 --> 00:02:01,240
Then after you define what the website is actually for.
39
00:02:01,240 --> 00:02:04,960
So basically, you need to decide what's the main goal
40
00:02:04,960 --> 00:02:07,400
or the main purpose of the site.
41
00:02:07,400 --> 00:02:09,640
Is it to provide information?
42
00:02:09,640 --> 00:02:11,610
Or to sell some product?
43
00:02:11,610 --> 00:02:14,480
Or is it simply to entertain the user?
44
00:02:14,480 --> 00:02:18,310
And by the way, these three purposes that I just mentioned,
45
00:02:18,310 --> 00:02:21,410
so providing information, selling something
46
00:02:21,410 --> 00:02:26,410
or entertaining are the three most common goals of websites.
47
00:02:26,640 --> 00:02:28,260
Now, based on what we learned
48
00:02:28,260 --> 00:02:30,660
in the lecture on user experience,
49
00:02:30,660 --> 00:02:34,830
defining what the website is for is basically the same thing
50
00:02:34,830 --> 00:02:39,010
as defining business and user goals, right?
51
00:02:39,010 --> 00:02:40,210
So in other words,
52
00:02:40,210 --> 00:02:43,600
this is basically what this step here is all about.
53
00:02:43,600 --> 00:02:47,480
It's about defining your business goals and user goals
54
00:02:47,480 --> 00:02:50,040
for this particular project.
55
00:02:50,040 --> 00:02:53,800
And of course you don't need to overcomplicate things here.
56
00:02:53,800 --> 00:02:57,470
So this can be something very simple and very quick.
57
00:02:57,470 --> 00:02:59,010
So let's take as an example,
58
00:02:59,010 --> 00:03:02,420
a company that produces premium dog food.
59
00:03:02,420 --> 00:03:06,120
So when this company sets out to create a new website,
60
00:03:06,120 --> 00:03:08,560
their business goal will probably be
61
00:03:08,560 --> 00:03:12,240
to sell that premium dog food, right?
62
00:03:12,240 --> 00:03:13,440
Now, on the other hand,
63
00:03:13,440 --> 00:03:16,090
when the user visits this website,
64
00:03:16,090 --> 00:03:20,660
their goal will probably be to find high-quality dog food
65
00:03:20,660 --> 00:03:23,770
and also find it for a good price.
66
00:03:23,770 --> 00:03:26,530
So you see, this is just something very simple,
67
00:03:26,530 --> 00:03:29,730
but it's still important to have this defined.
68
00:03:29,730 --> 00:03:33,450
Finally, what you also need to do during this step is
69
00:03:33,450 --> 00:03:37,030
to define a target audience for your project.
70
00:03:37,030 --> 00:03:40,200
And here, try to be really specific if you can,
71
00:03:40,200 --> 00:03:43,840
and if it makes sense for your particular project.
72
00:03:43,840 --> 00:03:46,790
And many times, actually this comes from your client
73
00:03:46,790 --> 00:03:49,520
and so then you don't need to worry about this.
74
00:03:49,520 --> 00:03:51,890
But usually when the client is smaller,
75
00:03:51,890 --> 00:03:53,910
they don't have this well-defined,
76
00:03:53,910 --> 00:03:57,700
and in this case, you should totally do this part.
77
00:03:57,700 --> 00:04:01,170
And again, this can actually be quite simple.
78
00:04:01,170 --> 00:04:05,340
So taking again, the example of the dog food company,
79
00:04:05,340 --> 00:04:09,320
here, we could say that the target audience is women,
80
00:04:09,320 --> 00:04:13,000
which are 20 to 40 years old, live in Europe,
81
00:04:13,000 --> 00:04:16,770
earn a good salary of 2000 euros a month,
82
00:04:16,770 --> 00:04:19,340
and they have a passion for dogs.
83
00:04:19,340 --> 00:04:22,160
So as you can see, here we have a really,
84
00:04:22,160 --> 00:04:24,310
really specific target audience,
85
00:04:24,310 --> 00:04:27,690
which of course you will not always be able to do,
86
00:04:27,690 --> 00:04:29,110
but if you can,
87
00:04:29,110 --> 00:04:33,300
then it is always very good to have a precise idea
88
00:04:33,300 --> 00:04:36,670
of who exactly you're building the website for.
89
00:04:36,670 --> 00:04:39,630
And actually, this is basically the whole point
90
00:04:39,630 --> 00:04:41,520
of this first step here,
91
00:04:41,520 --> 00:04:45,780
because you will to design your project with all the goals
92
00:04:45,780 --> 00:04:48,290
and the target audience in mind.
93
00:04:48,290 --> 00:04:50,410
So of course, the reason for that is
94
00:04:50,410 --> 00:04:53,900
that the better you know who you build a website for
95
00:04:53,900 --> 00:04:56,160
and what you want to achieve with it,
96
00:04:56,160 --> 00:04:59,740
the more success your project will have in the end.
97
00:04:59,740 --> 00:05:03,070
And so this step really be the foundation
98
00:05:03,070 --> 00:05:06,350
on which you will build the project later on.
99
00:05:06,350 --> 00:05:09,420
So do not just start building a website
100
00:05:09,420 --> 00:05:12,460
without this step, all right?
101
00:05:12,460 --> 00:05:16,410
Now you could go really deep in this step alone here.
102
00:05:16,410 --> 00:05:18,960
So stuff like competition research
103
00:05:18,960 --> 00:05:22,840
and user personas and all stuff like that,
104
00:05:22,840 --> 00:05:26,620
but then we're going really deep into marketing territory
105
00:05:26,620 --> 00:05:30,700
and that is of course outside the scope of this course.
106
00:05:30,700 --> 00:05:33,140
And so let's now move to the second step,
107
00:05:33,140 --> 00:05:35,510
which is planning the project.
108
00:05:35,510 --> 00:05:37,990
And this planning should of course be based
109
00:05:37,990 --> 00:05:40,680
on the business goals, user goals,
110
00:05:40,680 --> 00:05:42,170
and the target audience
111
00:05:42,170 --> 00:05:45,040
they are defined in the previous step.
112
00:05:45,040 --> 00:05:48,680
Now planning the project means to finally start thinking
113
00:05:48,680 --> 00:05:50,520
about our website.
114
00:05:50,520 --> 00:05:53,570
And so that starts with actually planning
115
00:05:53,570 --> 00:05:56,910
and gathering the content of the website.
116
00:05:56,910 --> 00:05:59,350
So things like the website copy,
117
00:05:59,350 --> 00:06:03,110
which is basically the text images, videos,
118
00:06:03,110 --> 00:06:05,960
and all other type of content.
119
00:06:05,960 --> 00:06:09,940
Now, usually this content should be provided by the client,
120
00:06:09,940 --> 00:06:13,600
but of course you can also help them to build,
121
00:06:13,600 --> 00:06:17,410
so to produce and to find this content for them.
122
00:06:17,410 --> 00:06:18,830
So when it's a big company
123
00:06:18,830 --> 00:06:21,880
then many times they do this part for you,
124
00:06:21,880 --> 00:06:25,020
but in my experience in smaller companies.
125
00:06:25,020 --> 00:06:27,490
So if you have like a smaller client,
126
00:06:27,490 --> 00:06:30,230
then they usually don't have this content yet.
127
00:06:30,230 --> 00:06:32,320
And so maybe in that case,
128
00:06:32,320 --> 00:06:34,400
you will have to write it yourself
129
00:06:34,400 --> 00:06:37,240
or even hire some other copywriter.
130
00:06:37,240 --> 00:06:40,910
Just don't do this for free for your client,
131
00:06:40,910 --> 00:06:44,510
so you should always charge a little bit extra in this case.
132
00:06:44,510 --> 00:06:48,390
Of course, if it's only about finding images, that is okay,
133
00:06:48,390 --> 00:06:50,660
because that is very easy and fast,
134
00:06:50,660 --> 00:06:54,050
but writing content is something entirely different,
135
00:06:54,050 --> 00:06:55,360
all right.
136
00:06:55,360 --> 00:06:58,010
Then if you have a bigger website,
137
00:06:58,010 --> 00:07:01,450
then it is also time to plan the sitemap.
138
00:07:01,450 --> 00:07:05,130
So basically planning what pages the site needs
139
00:07:05,130 --> 00:07:08,810
and how they relate to one another based on all the content
140
00:07:08,810 --> 00:07:10,910
that you now have.
141
00:07:10,910 --> 00:07:13,090
Now, also based on the content,
142
00:07:13,090 --> 00:07:16,020
here you can also start planning the sections
143
00:07:16,020 --> 00:07:18,410
that each of the page should have
144
00:07:18,410 --> 00:07:21,080
in order to convey the message to the user,
145
00:07:21,080 --> 00:07:23,320
as good as possible.
146
00:07:23,320 --> 00:07:26,120
And notice how I emphasized the content
147
00:07:26,120 --> 00:07:27,780
here a couple of times,
148
00:07:27,780 --> 00:07:30,860
and the reason for that is that it is the content
149
00:07:30,860 --> 00:07:33,040
who should guide the project
150
00:07:33,040 --> 00:07:36,000
and the design of the website in the end.
151
00:07:36,000 --> 00:07:40,770
So again, always have the content actually guide the project
152
00:07:40,770 --> 00:07:44,310
and the design and do not do the opposite.
153
00:07:44,310 --> 00:07:48,910
So don't come up with a pretty design and a pretty website,
154
00:07:48,910 --> 00:07:52,260
and then in the end fill it with the content.
155
00:07:52,260 --> 00:07:55,210
That is definitely the wrong way to go.
156
00:07:55,210 --> 00:07:58,780
Now, finally, based on everything you already know
157
00:07:58,780 --> 00:08:03,380
about the company and the project and all of your content,
158
00:08:03,380 --> 00:08:07,670
it is now time to also define the website personality
159
00:08:07,670 --> 00:08:10,650
that you will want to implement in your design.
160
00:08:10,650 --> 00:08:11,520
And of course,
161
00:08:11,520 --> 00:08:15,080
this is all based on the website personality framework
162
00:08:15,080 --> 00:08:17,140
that we learned about earlier.
163
00:08:17,140 --> 00:08:20,200
So by the time you need to make this decision,
164
00:08:20,200 --> 00:08:23,630
you can of course go back to our web design section
165
00:08:23,630 --> 00:08:27,890
and then remember how you can actually make that decision.
166
00:08:27,890 --> 00:08:31,870
Now okay, and with that, we wrap up the planning phase
167
00:08:31,870 --> 00:08:34,730
and can move on to the sketching phase
168
00:08:34,730 --> 00:08:38,280
where we will start thinking about the components
169
00:08:38,280 --> 00:08:41,710
and maybe some layout patterns that we're gonna need
170
00:08:41,710 --> 00:08:45,550
in order to convey the message of our content.
171
00:08:45,550 --> 00:08:48,740
And here again, keep in mind that it's the content
172
00:08:48,740 --> 00:08:52,660
who should guide the design and not the other way around.
173
00:08:52,660 --> 00:08:55,830
Now, once you have an idea about what components
174
00:08:55,830 --> 00:08:58,810
and what layouts you might want to use,
175
00:08:58,810 --> 00:09:03,060
it's time to create some sketches with pen and paper,
176
00:09:03,060 --> 00:09:07,390
or maybe even with some design software like Figma.
177
00:09:07,390 --> 00:09:10,690
And these sketches at this point should be very,
178
00:09:10,690 --> 00:09:15,690
very simple, so very low fidelity without any details.
179
00:09:15,710 --> 00:09:19,410
So you don't even have to write texts or anything like that.
180
00:09:19,410 --> 00:09:23,100
Just like draw some boxes for the images
181
00:09:23,100 --> 00:09:24,920
and for the text content,
182
00:09:24,920 --> 00:09:28,550
just to quickly get your ideas out of your head,
183
00:09:28,550 --> 00:09:30,720
because this is very, very important
184
00:09:30,720 --> 00:09:32,590
for your creative process.
185
00:09:32,590 --> 00:09:35,350
And don't worry if this sounds confusing
186
00:09:35,350 --> 00:09:37,940
because I will actually show you my process
187
00:09:37,940 --> 00:09:39,870
in the next lecture.
188
00:09:39,870 --> 00:09:44,230
But anyway, this process of sketching your initial component
189
00:09:44,230 --> 00:09:48,010
and layout ideas is really, really important.
190
00:09:48,010 --> 00:09:49,213
And just two more things
191
00:09:49,213 --> 00:09:51,560
that you need to understand about this.
192
00:09:51,560 --> 00:09:55,870
And first is that this is really an iterative process.
193
00:09:55,870 --> 00:09:58,960
So you don't have to set anything in stone yet
194
00:09:58,960 --> 00:10:00,440
at this point.
195
00:10:00,440 --> 00:10:03,500
Just keep experimenting with different ideas
196
00:10:03,500 --> 00:10:05,940
for different components and layouts
197
00:10:05,940 --> 00:10:09,060
until you arrive at a first good solution.
198
00:10:09,060 --> 00:10:11,570
But then when you implement this in code,
199
00:10:11,570 --> 00:10:14,610
you can of course change everything up again.
200
00:10:14,610 --> 00:10:17,100
So that's no problem, because again,
201
00:10:17,100 --> 00:10:21,010
this is just to get your ideas out of your head quick.
202
00:10:21,010 --> 00:10:24,390
Also, you of course don't need to spend a lot of time
203
00:10:24,390 --> 00:10:26,409
in order to sketch everything.
204
00:10:26,409 --> 00:10:29,800
So your entire design at this point.
205
00:10:29,800 --> 00:10:32,660
And of course also don't make it perfect
206
00:10:32,660 --> 00:10:34,750
as I said previously.
207
00:10:34,750 --> 00:10:38,510
So maybe in some situations you just need to sketch
208
00:10:38,510 --> 00:10:40,347
like half of your design,
209
00:10:40,347 --> 00:10:45,210
and then you're already ready to jump into HTML and CSS.
210
00:10:45,210 --> 00:10:49,660
So overall, this process of sketching is not rigid at all.
211
00:10:49,660 --> 00:10:51,620
It is quite dynamic.
212
00:10:51,620 --> 00:10:55,040
So you can jump between your sketches and your code,
213
00:10:55,040 --> 00:10:57,870
and you can try a lot of different ideas
214
00:10:57,870 --> 00:11:00,800
and experiment around until you arrive
215
00:11:00,800 --> 00:11:02,800
at what you liked the most.
216
00:11:02,800 --> 00:11:06,380
What matters most is that you don't just start designing
217
00:11:06,380 --> 00:11:10,630
in code without having a general or a rough idea
218
00:11:10,630 --> 00:11:14,570
of what you actually want to build, all right.
219
00:11:14,570 --> 00:11:16,640
And speaking of building,
220
00:11:16,640 --> 00:11:19,990
the next step is to finally actually design
221
00:11:19,990 --> 00:11:22,550
and build your website.
222
00:11:22,550 --> 00:11:26,510
So here you finally take your plan and your content
223
00:11:26,510 --> 00:11:28,750
and the sketches that you did before
224
00:11:28,750 --> 00:11:30,730
in steps one, two, three,
225
00:11:30,730 --> 00:11:33,900
and use them to design and build the project
226
00:11:33,900 --> 00:11:36,680
with HTML and CSS.
227
00:11:36,680 --> 00:11:41,020
And usually what I like to do, as I mentioned a way back,
228
00:11:41,020 --> 00:11:44,670
is using a process called "Designing in the browser."
229
00:11:44,670 --> 00:11:47,400
So basically having just the rough sketches
230
00:11:47,400 --> 00:11:49,110
that I explained before,
231
00:11:49,110 --> 00:11:52,500
and then do the actual design in code.
232
00:11:52,500 --> 00:11:55,010
And this designing includes of course,
233
00:11:55,010 --> 00:11:59,050
to now choose and apply the actual visual styles
234
00:11:59,050 --> 00:12:01,060
for your design.
235
00:12:01,060 --> 00:12:05,120
So remember, from step three you already have the layout
236
00:12:05,120 --> 00:12:06,670
and the components.
237
00:12:06,670 --> 00:12:10,710
And so again, now it's time to actually implement them
238
00:12:10,710 --> 00:12:13,670
and to design the actual visual styles
239
00:12:13,670 --> 00:12:15,770
that you were going for.
240
00:12:15,770 --> 00:12:19,010
And of course, these visual styles need to be based
241
00:12:19,010 --> 00:12:22,790
on the website personality that you selected
242
00:12:22,790 --> 00:12:24,900
and the design guidelines
243
00:12:24,900 --> 00:12:27,320
that I also showed you in that section.
244
00:12:27,320 --> 00:12:30,260
And of course, as the third ingredient
245
00:12:30,260 --> 00:12:32,520
of building a good design is that
246
00:12:32,520 --> 00:12:34,870
you need to get a lot of inspiration
247
00:12:34,870 --> 00:12:38,980
before you actually style and design your page.
248
00:12:38,980 --> 00:12:41,250
So that's basically just what we learned
249
00:12:41,250 --> 00:12:43,090
in the web design section
250
00:12:43,090 --> 00:12:46,640
and also in the last section, right?
251
00:12:46,640 --> 00:12:49,260
Now, one thing that is quite common is
252
00:12:49,260 --> 00:12:51,670
that your client will already have some kind
253
00:12:51,670 --> 00:12:55,110
of branding in place and that specially true,
254
00:12:55,110 --> 00:12:58,630
if you're working for a little bit bigger of a company.
255
00:12:58,630 --> 00:13:00,130
And so in that case,
256
00:13:00,130 --> 00:13:01,620
you should of course use
257
00:13:01,620 --> 00:13:04,550
that client's branding whenever possible.
258
00:13:04,550 --> 00:13:09,080
So usually for things like colors, typography, and icons,
259
00:13:09,080 --> 00:13:10,840
so that your web design
260
00:13:10,840 --> 00:13:14,130
of course matches the client's branding.
261
00:13:14,130 --> 00:13:16,470
So this is very, very important.
262
00:13:16,470 --> 00:13:17,990
And of course it makes your life
263
00:13:17,990 --> 00:13:20,080
as a designer a little bit easier
264
00:13:20,080 --> 00:13:23,730
because then some of these decisions have already been made.
265
00:13:23,730 --> 00:13:26,210
And so that is always good.
266
00:13:26,210 --> 00:13:30,710
And with this, I think we close up this step number four,
267
00:13:30,710 --> 00:13:33,670
which of course is the biggest step of all
268
00:13:33,670 --> 00:13:36,360
and the most fun for sure.
269
00:13:36,360 --> 00:13:40,450
But again, you should not neglect the steps one,
270
00:13:40,450 --> 00:13:41,550
two and three,
271
00:13:41,550 --> 00:13:44,760
because otherwise step four will not be built
272
00:13:44,760 --> 00:13:46,410
on a solid foundation
273
00:13:46,410 --> 00:13:50,923
and you might not end up with the ideal solution, all right?
274
00:13:51,780 --> 00:13:56,220
But anyway, now let's move on to step number five.
275
00:13:56,220 --> 00:13:59,300
So once you're done building your project,
276
00:13:59,300 --> 00:14:02,180
you need to test and you need to optimize it
277
00:14:02,180 --> 00:14:04,700
before you can actually launch it to the web
278
00:14:04,700 --> 00:14:06,700
and call it ready.
279
00:14:06,700 --> 00:14:09,260
And this includes a couple of steps
280
00:14:09,260 --> 00:14:11,328
where the first one is to ensure
281
00:14:11,328 --> 00:14:14,030
that your website actually works well
282
00:14:14,030 --> 00:14:16,290
in all the major browsers.
283
00:14:16,290 --> 00:14:21,290
So in Google Chrome, in Firefox, Safari and Microsoft Edge,
284
00:14:22,110 --> 00:14:24,900
but hopefully you will not have to test
285
00:14:24,900 --> 00:14:27,180
for the old Internet Explorer
286
00:14:27,180 --> 00:14:29,720
because then most of the things
287
00:14:29,720 --> 00:14:33,490
that I'm showing you in this course will actually not work.
288
00:14:33,490 --> 00:14:37,840
So right now, it is hopefully time for most of your clients
289
00:14:37,840 --> 00:14:41,410
to drop support for the old Internet Explorer.
290
00:14:41,410 --> 00:14:43,960
So if that's the case, then just ignore that.
291
00:14:43,960 --> 00:14:45,630
And then you can use everything
292
00:14:45,630 --> 00:14:47,770
that I'm showing you in this course.
293
00:14:47,770 --> 00:14:50,960
Next, in order to test the responsive design,
294
00:14:50,960 --> 00:14:53,420
we need to actually test the website
295
00:14:53,420 --> 00:14:55,620
on actual mobile devices
296
00:14:55,620 --> 00:14:58,650
and not just in our developer tools.
297
00:14:58,650 --> 00:15:01,203
We also need to optimize all images
298
00:15:01,203 --> 00:15:03,860
that we use in our website.
299
00:15:03,860 --> 00:15:05,990
And that means two things.
300
00:15:05,990 --> 00:15:07,710
First, we need to actually give
301
00:15:07,710 --> 00:15:10,690
them the right dimensions in pixels.
302
00:15:10,690 --> 00:15:13,360
And second, we need to compress them
303
00:15:13,360 --> 00:15:18,090
in order to not force our users to download huge images
304
00:15:18,090 --> 00:15:22,693
because Dennis just a very bad actually user experience.
305
00:15:23,540 --> 00:15:27,960
Also we need to fix some simple accessibility problems.
306
00:15:27,960 --> 00:15:31,460
So things like issues with the color contrast
307
00:15:31,460 --> 00:15:33,340
that we actually already learned about,
308
00:15:33,340 --> 00:15:35,980
I think in our design lecture.
309
00:15:35,980 --> 00:15:38,990
Another common thing that we usually do is
310
00:15:38,990 --> 00:15:40,920
to run a performance test
311
00:15:40,920 --> 00:15:43,570
in our Google Chrome developer tools,
312
00:15:43,570 --> 00:15:45,810
which is called Lighthouse.
313
00:15:45,810 --> 00:15:48,180
And I will show you how we do that
314
00:15:48,180 --> 00:15:50,400
by the end of this course.
315
00:15:50,400 --> 00:15:52,360
And also some of the other things
316
00:15:52,360 --> 00:15:54,510
that are here in this list.
317
00:15:54,510 --> 00:15:57,460
Finally, one important thing that you should do
318
00:15:57,460 --> 00:16:00,440
before launching any website is to think
319
00:16:00,440 --> 00:16:03,270
about search engine optimization.
320
00:16:03,270 --> 00:16:07,580
Now that however requires a whole course on itself.
321
00:16:07,580 --> 00:16:11,820
So that is completely outside the scope of this course here,
322
00:16:11,820 --> 00:16:14,520
and so we're not going to touch on that
323
00:16:14,520 --> 00:16:17,910
in our current project, all right.
324
00:16:17,910 --> 00:16:20,390
And once you have your project built
325
00:16:20,390 --> 00:16:23,930
and everything is nicely tested and optimized.
326
00:16:23,930 --> 00:16:27,130
And so in the end, everything is perfect,
327
00:16:27,130 --> 00:16:32,030
it's finally time to share your masterpiece with the world.
328
00:16:32,030 --> 00:16:35,820
And so basically now it's time to launch the website
329
00:16:35,820 --> 00:16:37,440
to the internet.
330
00:16:37,440 --> 00:16:38,850
So in technical terms,
331
00:16:38,850 --> 00:16:42,010
what that means is to upload your website
332
00:16:42,010 --> 00:16:44,170
to a hosting platform.
333
00:16:44,170 --> 00:16:46,720
Now there are countless options here,
334
00:16:46,720 --> 00:16:49,810
but we will use my favorite hosting platform,
335
00:16:49,810 --> 00:16:52,090
which is called Netlify.
336
00:16:52,090 --> 00:16:56,410
And Netlify has a very nice free plan as we will see
337
00:16:56,410 --> 00:16:59,690
and so it's going to be a perfect choice here.
338
00:16:59,690 --> 00:17:01,870
However, uploading the website
339
00:17:01,870 --> 00:17:05,610
to a hosting platform is not the end of the story
340
00:17:05,610 --> 00:17:09,720
because you actually also need to buy a great domain name
341
00:17:09,720 --> 00:17:11,130
for your project.
342
00:17:11,130 --> 00:17:14,340
Because otherwise users will have no way
343
00:17:14,340 --> 00:17:16,570
of finding your website.
344
00:17:16,570 --> 00:17:20,460
And when it comes to actually choosing a great domain name
345
00:17:20,460 --> 00:17:25,460
for yourself, go with one that is memorable for your users
346
00:17:25,530 --> 00:17:29,580
and that is easy to write and maybe even more importantly,
347
00:17:29,580 --> 00:17:32,600
one that of course represents the company
348
00:17:32,600 --> 00:17:36,620
or the brand that the website is for, all right.
349
00:17:36,620 --> 00:17:38,620
So, after all this
350
00:17:38,620 --> 00:17:42,370
and after finally lunching our website to the web,
351
00:17:42,370 --> 00:17:45,770
we are finally done, right?
352
00:17:45,770 --> 00:17:47,640
Well, except for the fact
353
00:17:47,640 --> 00:17:50,660
that usually we also need to maintain
354
00:17:50,660 --> 00:17:53,270
and updating the website.
355
00:17:53,270 --> 00:17:56,740
So launching the website is many times not the end
356
00:17:56,740 --> 00:17:59,430
of the story, because as I said,
357
00:17:59,430 --> 00:18:02,790
we need to actually keep the website content updated
358
00:18:02,790 --> 00:18:04,310
over time.
359
00:18:04,310 --> 00:18:06,840
Now, if you're working with a client,
360
00:18:06,840 --> 00:18:10,920
this can be a great chance to have some recurring revenue.
361
00:18:10,920 --> 00:18:14,400
So by creating a monthly maintenance contract
362
00:18:14,400 --> 00:18:16,040
with your client,
363
00:18:16,040 --> 00:18:20,260
which is something that many web developers actually do.
364
00:18:20,260 --> 00:18:22,700
Now, one thing that I didn't mention yet,
365
00:18:22,700 --> 00:18:25,490
but which is pretty important is that you should
366
00:18:25,490 --> 00:18:29,510
also install some kinds of analytics software.
367
00:18:29,510 --> 00:18:33,150
And here pretty much everyone uses Google Analytics,
368
00:18:33,150 --> 00:18:36,080
but there are also more privacy focused solutions
369
00:18:36,080 --> 00:18:37,910
such as Fathom.
370
00:18:37,910 --> 00:18:41,570
And the reason why analytics is so important is
371
00:18:41,570 --> 00:18:45,250
that it gives you stats about your website users,
372
00:18:45,250 --> 00:18:47,530
which you can then use in the future
373
00:18:47,530 --> 00:18:51,160
to adapt your site structure and the content,
374
00:18:51,160 --> 00:18:54,810
and really to do all other kinds of fine tuning
375
00:18:54,810 --> 00:18:55,970
of your website.
376
00:18:55,970 --> 00:18:59,370
And so that will then help you make it really perfect
377
00:18:59,370 --> 00:19:03,290
and really make it better and better over time.
378
00:19:03,290 --> 00:19:06,690
And finally, one aspect of many websites
379
00:19:06,690 --> 00:19:10,860
that needs to be kept up to date is a blog.
380
00:19:10,860 --> 00:19:14,720
And a blog is a great way to keep users coming back
381
00:19:14,720 --> 00:19:16,230
to your website.
382
00:19:16,230 --> 00:19:20,110
And it is also very good for search engine optimization
383
00:19:20,110 --> 00:19:22,840
if you use it with the right content.
384
00:19:22,840 --> 00:19:24,570
So if there is a blog,
385
00:19:24,570 --> 00:19:27,900
then of course that needs to be updated regularly
386
00:19:27,900 --> 00:19:30,190
because otherwise it doesn't make sense
387
00:19:30,190 --> 00:19:32,490
to have a blog in the first place.
388
00:19:32,490 --> 00:19:34,700
And so that is one more step
389
00:19:34,700 --> 00:19:38,860
or one more part of this step, number seven.
390
00:19:38,860 --> 00:19:42,630
And with this, we actually finally reached the end
391
00:19:42,630 --> 00:19:47,300
of the process that stands behind building any website.
392
00:19:47,300 --> 00:19:50,940
So as you see, there really is a lot of things
393
00:19:50,940 --> 00:19:52,630
that you need to think about
394
00:19:52,630 --> 00:19:55,450
and really a lot of aspects that go
395
00:19:55,450 --> 00:19:59,460
into building a beautiful and useful website.
396
00:19:59,460 --> 00:20:02,600
And so that's why I think that this lecture here is going
397
00:20:02,600 --> 00:20:05,420
to be really, really useful in the future
398
00:20:05,420 --> 00:20:06,857
when you start to build
399
00:20:06,857 --> 00:20:10,160
and to design your own websites.
400
00:20:10,160 --> 00:20:12,950
So hopefully you liked this lecture.
401
00:20:12,950 --> 00:20:14,040
Now in the next one,
402
00:20:14,040 --> 00:20:18,240
we will actually start implementing some of these things
403
00:20:18,240 --> 00:20:21,880
because we will finally start working on our big,
404
00:20:21,880 --> 00:20:23,800
big course project.
405
00:20:23,800 --> 00:20:26,683
So I'm very excited to see you there very soon.
30818
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.