Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
1
00:00:01,859 --> 00:00:03,230
Welcome back.
2
2
00:00:03,230 --> 00:00:07,167
We are finally going to start building our killer web page.
3
3
00:00:07,167 --> 00:00:08,583
Great.
4
4
00:00:08,583 --> 00:00:10,534
But before diving right in,
5
5
00:00:10,534 --> 00:00:12,577
you got to have a very clear plan
6
6
00:00:12,577 --> 00:00:15,224
of exactly what we're gonna do.
7
7
00:00:15,224 --> 00:00:17,790
With a good plan, you're already halfway
8
8
00:00:17,790 --> 00:00:19,373
to a great website.
9
9
00:00:20,892 --> 00:00:24,689
Because building a website is not just writing some code,
10
10
00:00:24,689 --> 00:00:26,546
it's much more than that.
11
11
00:00:26,546 --> 00:00:27,939
It's a whole process
12
12
00:00:27,939 --> 00:00:29,565
from complete scratch
13
13
00:00:29,565 --> 00:00:32,607
to a completely functional website.
14
14
00:00:32,607 --> 00:00:35,939
And I'm going to reveal the seven real world steps
15
15
00:00:35,939 --> 00:00:38,865
of that process right now.
16
16
00:00:38,865 --> 00:00:41,535
Every good website in the world needs to follow
17
17
00:00:41,535 --> 00:00:44,334
at least these seven steps.
18
18
00:00:44,334 --> 00:00:47,306
You should definitely take some notes of these.
19
19
00:00:47,306 --> 00:00:48,306
So let's go.
20
20
00:00:50,510 --> 00:00:54,272
Start off by defining the goal of your project.
21
21
00:00:54,272 --> 00:00:57,453
This can be showing your portfolio to the world,
22
22
00:00:57,453 --> 00:01:01,620
selling an e-book, building a blog, or whatever you want.
23
23
00:01:03,119 --> 00:01:05,569
Also define your audience.
24
24
00:01:05,569 --> 00:01:08,936
Ask yourself which is the typically user
25
25
00:01:08,936 --> 00:01:11,186
that will visit my website.
26
26
00:01:12,117 --> 00:01:15,241
This is important because you should always design
27
27
00:01:15,241 --> 00:01:18,241
with your goal and audience in mind.
28
28
00:01:20,791 --> 00:01:23,148
Once your project is defined,
29
29
00:01:23,148 --> 00:01:25,540
plan your content carefully.
30
30
00:01:25,540 --> 00:01:29,707
This includes text, images, videos, icons, et cetera.
31
31
00:01:33,169 --> 00:01:36,420
Remember what I told you about visual hierarchy
32
32
00:01:36,420 --> 00:01:39,067
in the web design section?
33
33
00:01:39,067 --> 00:01:42,132
It plays an important role when you start thinking
34
34
00:01:42,132 --> 00:01:44,291
about what you want on your website
35
35
00:01:44,291 --> 00:01:46,590
and what you don't.
36
36
00:01:46,590 --> 00:01:50,271
Defining the content before actually starting the design
37
37
00:01:50,271 --> 00:01:53,354
is called the content-first approach.
38
38
00:01:54,288 --> 00:01:57,028
It means that you should design for the content,
39
39
00:01:57,028 --> 00:01:58,955
instead of designing a webpage
40
40
00:01:58,955 --> 00:02:01,955
and then filling it with some stuff.
41
41
00:02:03,890 --> 00:02:06,364
Also define the navigation
42
42
00:02:06,364 --> 00:02:09,348
and the site structure in this step.
43
43
00:02:09,348 --> 00:02:12,518
You can draw a side map in this step if we're talking
44
44
00:02:12,518 --> 00:02:14,435
about a bigger project.
45
45
00:02:17,138 --> 00:02:20,203
Now it's time to get inspired
46
46
00:02:20,203 --> 00:02:22,536
and think about your design.
47
47
00:02:23,385 --> 00:02:26,766
Then get the ideas our of your head.
48
48
00:02:26,766 --> 00:02:28,261
And by that I mean
49
49
00:02:28,261 --> 00:02:31,969
sketch your ideas before you start designing.
50
50
00:02:31,969 --> 00:02:35,498
It will help you explore ideas and create a concept
51
51
00:02:35,498 --> 00:02:37,681
of what you want to build.
52
52
00:02:37,681 --> 00:02:40,908
Using pencils and paper is a great way
53
53
00:02:40,908 --> 00:02:44,325
of quickly retaining your valuable ideas.
54
54
00:02:45,297 --> 00:02:48,746
And make as many sketches as you want,
55
55
00:02:48,746 --> 00:02:51,903
but don't spend too much time perfecting anything.
56
56
00:02:51,903 --> 00:02:53,854
Once you have an initial idea
57
57
00:02:53,854 --> 00:02:56,130
you can concentrate on the details
58
58
00:02:56,130 --> 00:02:58,713
when designing in HTML and CSS.
59
59
00:03:00,820 --> 00:03:04,164
I advise you to never ever start designing
60
60
00:03:04,164 --> 00:03:08,088
without having an idea of what you want to build.
61
61
00:03:08,088 --> 00:03:11,653
Getting inspiration is very important in this phase
62
62
00:03:11,653 --> 00:03:14,820
and I already told you how to do that.
63
63
00:03:17,006 --> 00:03:20,965
Now after sketching start to design your website
64
64
00:03:20,965 --> 00:03:23,682
using all the guidelines and tips you've learned
65
65
00:03:23,682 --> 00:03:25,849
in the web design section.
66
66
00:03:26,770 --> 00:03:29,719
You will do that using HTML and CSS
67
67
00:03:29,719 --> 00:03:32,668
which is called designing in the browser.
68
68
00:03:32,668 --> 00:03:35,779
So designing in the browser is basically designing
69
69
00:03:35,779 --> 00:03:39,228
and developing at the same time.
70
70
00:03:39,228 --> 00:03:41,655
There are actually more and more designers
71
71
00:03:41,655 --> 00:03:45,045
leaving traditional design programs such as Photoshop
72
72
00:03:45,045 --> 00:03:47,344
and start designing in the browser
73
73
00:03:47,344 --> 00:03:50,037
such as we are going to do.
74
74
00:03:50,037 --> 00:03:51,675
The biggest reason for this
75
75
00:03:51,675 --> 00:03:55,785
is that you can't design responsive websites in Photoshop.
76
76
00:03:55,785 --> 00:03:58,368
It also saves you tons of time.
77
77
00:03:59,872 --> 00:04:03,680
And in this phase you'll use your sketches, content,
78
78
00:04:03,680 --> 00:04:05,984
and planning decisions you've made in steps
79
79
00:04:05,984 --> 00:04:07,651
one, two, and three.
80
80
00:04:09,859 --> 00:04:12,320
This step is of course the biggest part
81
81
00:04:12,320 --> 00:04:14,131
of building a website.
82
82
00:04:14,131 --> 00:04:15,850
But don't forget,
83
83
00:04:15,850 --> 00:04:20,017
all the other steps are also very, very important.
84
84
00:04:21,783 --> 00:04:25,243
Now before you can launch your beautiful masterpiece
85
85
00:04:25,243 --> 00:04:26,938
for the world to see it,
86
86
00:04:26,938 --> 00:04:29,680
we have to optimize it's performance
87
87
00:04:29,680 --> 00:04:33,325
and for search engines such as Google.
88
88
00:04:33,325 --> 00:04:36,878
You don't want a slow website or one that no one can find.
89
89
00:04:36,878 --> 00:04:37,711
Right?
90
90
00:04:40,833 --> 00:04:45,365
Your optimized website is then finally ready to launch.
91
91
00:04:45,365 --> 00:04:47,873
All you need for this is a web server
92
92
00:04:47,873 --> 00:04:51,960
that will host your website and deliver it to the world.
93
93
00:04:51,960 --> 00:04:55,877
I will later show you a way to do exactly that.
94
94
00:04:56,918 --> 00:05:01,400
But the launch of your website is not the end of the story.
95
95
00:05:01,400 --> 00:05:04,884
Now it's time to monitor your users' behavior
96
96
00:05:04,884 --> 00:05:09,051
and make some changes to your website if necessary.
97
97
00:05:10,109 --> 00:05:13,383
You should also update your content regularly
98
98
00:05:13,383 --> 00:05:17,818
in order to show your users that your website is alive.
99
99
00:05:17,818 --> 00:05:21,985
For instance a blog can be a very great way of doing that.
100
100
00:05:24,688 --> 00:05:28,047
These steps I just showed you are so incredibly important
101
101
00:05:28,047 --> 00:05:30,903
that I also included them in the course e-book
102
102
00:05:30,903 --> 00:05:34,015
so that you always know where to find them.
103
103
00:05:34,015 --> 00:05:36,801
Also in the e-book is the link to a document
104
104
00:05:36,801 --> 00:05:40,668
called The Periodic Table of Web Design Process,
105
105
00:05:40,668 --> 00:05:42,770
if you want an even deeper understanding
106
106
00:05:42,770 --> 00:05:46,717
of the complete web design and development process.
107
107
00:05:46,717 --> 00:05:49,134
So make sure to check it out.
108
108
00:05:50,154 --> 00:05:52,243
Now over the rest of the course
109
109
00:05:52,243 --> 00:05:53,418
we're going to put these
110
110
00:05:53,418 --> 00:05:56,335
seven real world steps into action.
111
111
00:05:57,225 --> 00:05:59,918
After that we will have a fully functional,
112
112
00:05:59,918 --> 00:06:04,074
beautiful designed and developed website on the internet.
113
113
00:06:04,074 --> 00:06:06,324
Excited? So let's start it.
9660
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.