1
00:00:00,540 --> 00:00:06,870
Let's get into specifics in this video you'll learn how WordPress websites fit with domain name registration

2
00:00:06,930 --> 00:00:12,840
and hosting on a server and get all the other pieces together on your computer outside of Wordpress

3
00:00:12,840 --> 00:00:15,360
that you'll use to run your Web site Business.

4
00:00:15,360 --> 00:00:20,760
You'll gather all the tools you need for this course including setting up your students sandbox at W.P.

5
00:00:20,880 --> 00:00:26,400
of course dot com giving you access to premium tools you can use in your business.

6
00:00:26,400 --> 00:00:31,230
By the end of this video you'll have everything you need to run a WordPress website business starting

7
00:00:31,230 --> 00:00:32,400
from the ground up.

8
00:00:32,640 --> 00:00:34,130
Let's start with hosting.

9
00:00:34,240 --> 00:00:39,540
Since a Web site needs to have files and database that are accessible to the public through their Internet

10
00:00:39,540 --> 00:00:42,650
access it needs a physical place to be.

11
00:00:42,660 --> 00:00:44,860
This is called a hosting account.

12
00:00:44,910 --> 00:00:49,920
There are lots of different levels and types of hosting and we'll go over these in detail in the next

13
00:00:49,920 --> 00:00:51,020
section.

14
00:00:51,300 --> 00:00:57,180
For now just know that a hosting company provides a server connected to the Internet in such a way that

15
00:00:57,180 --> 00:01:04,050
allows many web site visitors at a time to load the Web site fast when a web site visitor wants to visit

16
00:01:04,050 --> 00:01:04,920
a Web site.

17
00:01:05,070 --> 00:01:10,560
They either click or type an address or a URL to get there you are.

18
00:01:10,560 --> 00:01:19,340
L stands for universal resource locator and it's just a quick way to say web address or domain name.

19
00:01:19,410 --> 00:01:23,710
An example of a URL is Google dot com.

20
00:01:23,850 --> 00:01:29,580
One of the requirements of having a public Web site is ownership of a domain name which has a specific

21
00:01:29,760 --> 00:01:36,960
URL that you or your clients can register using a company called a domain name registrar.

22
00:01:36,960 --> 00:01:40,200
Some examples of a registrar are GoDaddy dot com.

23
00:01:40,380 --> 00:01:43,920
Network Solutions dot com and many others.

24
00:01:43,920 --> 00:01:50,190
You rent or register a domain name for a specific period of time and then point the domain name to your

25
00:01:50,190 --> 00:01:56,460
server or hosting account so that your web site can have its own Jarrell or web address.

26
00:01:56,460 --> 00:02:02,970
When we are developing a web site locally or before our client has a domain name yet we can use a temporary

27
00:02:02,970 --> 00:02:09,420
domain and when the website is finished we can change the website slightly to take it live under the

28
00:02:09,420 --> 00:02:10,740
real domain name.

29
00:02:11,070 --> 00:02:17,150
During this course you can use real domain names that you register yourself or just use testing yourself

30
00:02:17,190 --> 00:02:21,010
to create the Web sites will make during the learning process.

31
00:02:21,090 --> 00:02:26,760
If you do use a real domain name you'll have to have a paid or trial hosting account to which you can

32
00:02:26,760 --> 00:02:32,520
point your domain name and will learn how to set up hosting servers and development environments in

33
00:02:32,520 --> 00:02:33,390
the next section.

34
00:02:34,350 --> 00:02:39,510
In the last section you learned about how WordPress works with a file structure and a database to output

35
00:02:39,510 --> 00:02:40,440
a Web site.

36
00:02:40,800 --> 00:02:46,470
You also saw how themes and plugins can be added to design a look and feel as well as provide specific

37
00:02:46,470 --> 00:02:48,550
functionality for your web sites.

38
00:02:49,690 --> 00:02:55,270
In this course you'll have an opportunity to use a whole bunch of premium themes and plug ins to create

39
00:02:55,330 --> 00:03:03,040
advanced functionality in your website projects your students sandbox at W.P. of course dot com contains

40
00:03:03,040 --> 00:03:08,630
your development sandbox and all the premium tools will be learning in this course.

41
00:03:08,650 --> 00:03:12,760
Let's compile all the other tools you need for building websites for clients.

42
00:03:12,760 --> 00:03:15,760
First go get a text or code editor.

43
00:03:15,910 --> 00:03:21,880
You can use the simple text editor that comes with your computer notepad on Windows or text it on the

44
00:03:21,880 --> 00:03:22,420
Mac.

45
00:03:22,630 --> 00:03:28,120
But as I said in the last section you'd be better served by getting a code editor that formats the code

46
00:03:28,120 --> 00:03:32,280
for the documents you'll be editing in a more readable way for Windows.

47
00:03:32,410 --> 00:03:40,210
You can try notepad plus plus or atom that IO but don't rely on word pad that comes with Windows or

48
00:03:40,210 --> 00:03:42,770
any word processor like Microsoft Word.

49
00:03:42,940 --> 00:03:46,990
These don't do the same thing and can insert formatting characters that aren't part of the code you

50
00:03:46,990 --> 00:03:48,680
need on the Mac.

51
00:03:48,820 --> 00:03:52,830
There's text Wrangler and Adam works as well.

52
00:03:52,840 --> 00:03:56,960
I love the look and feel of ADOM and it's available at Adamkus.

53
00:03:56,980 --> 00:03:59,160
I know all these options are free.

54
00:03:59,380 --> 00:04:05,110
Here's what the Wordpress config file looks like in ADOM and here's what it looks like in Notepad plus

55
00:04:05,110 --> 00:04:13,090
plus for Windows but here's what it looks like in Notepad itself not formatted and not as good looking

56
00:04:13,090 --> 00:04:16,640
or easy to edit as it looks like an atom.

57
00:04:17,110 --> 00:04:21,070
Download one of these code editors now and install one on your computer.

58
00:04:21,170 --> 00:04:25,390
You are L's to all these code editors are in the resource document in the next section.

59
00:04:27,220 --> 00:04:33,820
FCP stands for file transfer protocol install one of these programs on your computer so that you can

60
00:04:33,820 --> 00:04:40,350
communicate with a live server like site ground or flywheel and manage your files on the server.

61
00:04:40,390 --> 00:04:48,010
I prefer files Zilah which from the link on that resource page after this video shows you a list of

62
00:04:48,010 --> 00:04:50,210
downloadable files.

63
00:04:50,310 --> 00:04:55,210
I recommended one for either windows or your Mac are right here.

64
00:04:55,240 --> 00:04:59,210
You can install those as if they were any other program.

65
00:04:59,210 --> 00:05:02,030
Another great free FCP program is called.

66
00:05:02,060 --> 00:05:07,630
FCP client light and it's an extension for the chrome browser.

67
00:05:07,940 --> 00:05:13,640
If you open Chrome you can open up the extensions tab by going to your settings over on the right hand

68
00:05:13,640 --> 00:05:15,620
side and then under more tools.

69
00:05:15,800 --> 00:05:17,230
Click extensions.

70
00:05:17,450 --> 00:05:22,530
It opens the extension tab where you can search for extensions and see the ones that you have installed.

71
00:05:22,730 --> 00:05:29,120
If you search for s FGP it will probably come up with this free one and you can click install.

72
00:05:29,120 --> 00:05:34,670
I already have it installed and you can see it in my chrome apps tab.

73
00:05:34,670 --> 00:05:43,520
You can get here by typing chrome colon slash slash apps or they hide the apps tab button inside the

74
00:05:43,520 --> 00:05:48,990
bookmarks toolbar so if you don't have the bookmarks showing in Chrome you can get them again.

75
00:05:49,010 --> 00:05:54,890
Over here on the side under bookmarks and then click Show bookmarks bar.

76
00:05:54,890 --> 00:06:00,920
When you have that bookmarks bar showing the far far left shows the app's button.

77
00:06:01,160 --> 00:06:07,850
Then when you click as FTB client light it opens a window as if it were a standalone program and you

78
00:06:07,850 --> 00:06:09,730
can set up FTB that way.

79
00:06:09,740 --> 00:06:15,720
This is a great free program and an alternative to files Zyla in the last section.

80
00:06:15,740 --> 00:06:20,770
I introduce you to a whole bunch of options for compressing and resizing images.

81
00:06:20,780 --> 00:06:25,200
Let's take a look at two of them and try optimizing an image for the web yourself.

82
00:06:25,310 --> 00:06:33,380
If you have Adobe Photoshop follow along in the next section and if not open up Pichler dot com and

83
00:06:33,380 --> 00:06:39,800
optimize your image using the steps for pixel or dot com using the Pichler editor in the next section.

84
00:06:39,820 --> 00:06:46,690
First let's get a large image that's too big in terms of both file size and image size and place it

85
00:06:46,690 --> 00:06:48,860
in a folder on your computer.

86
00:06:49,120 --> 00:07:01,520
There's one you can download and use at W.P. of course dot com slash big image dot J peg.

87
00:07:01,630 --> 00:07:09,970
If you don't have one of your own ready you can just use this right click the image and say save image

88
00:07:10,060 --> 00:07:20,090
as find a place on your computer where you want to save it and there you go this image is straight out

89
00:07:20,090 --> 00:07:28,220
of my camera for 3.6 megabytes in size and more than 3400 pixels wide for any image on a Web site.

90
00:07:28,220 --> 00:07:35,630
The file size should be largest less than 300 K or kilobytes and less than 2000 pixels wide even for

91
00:07:35,630 --> 00:07:37,470
full screen images.

92
00:07:37,550 --> 00:07:40,950
I like to make my web images 6500 pixels wide.

93
00:07:41,300 --> 00:07:49,010
And I try to get them as small as possible under 200 K in file size if possible image editing programs

94
00:07:49,010 --> 00:07:53,200
can do this with most photos without losing any image quality.

95
00:07:53,390 --> 00:07:58,340
These smaller compressed images will load faster for web site visitors making for a better web site

96
00:07:58,370 --> 00:08:00,290
viewing experience.

97
00:08:00,380 --> 00:08:06,080
Watch as I open this image in Photoshop and if you have the program follow along and do this to your

98
00:08:06,080 --> 00:08:08,040
own image.

99
00:08:08,120 --> 00:08:17,150
Once I have the image opened in Photoshop I'll click image image size and under the width I'll put 6900

100
00:08:17,570 --> 00:08:18,880
and just hit OK.

101
00:08:19,220 --> 00:08:21,170
Now it's showing it to me at 25 percent.

102
00:08:21,180 --> 00:08:27,560
If I look at it at 100 percent you can see it's plenty large for a full screen background image.

103
00:08:27,570 --> 00:08:32,160
Now I'll click file save for web and devices.

104
00:08:32,160 --> 00:08:37,140
This will optimize the image and show me an optimized version if I like.

105
00:08:37,140 --> 00:08:42,390
I can go up here and click JPEG you'll show me the image at full size so I can browse around to the

106
00:08:42,390 --> 00:08:46,880
part that's in focus and I can look under jpeg at my settings.

107
00:08:46,890 --> 00:08:52,990
If I hit medium I can see that that will be an 84 K image and the quality is very good.

108
00:08:53,010 --> 00:08:56,810
Nice and small if I want to get a little bit higher quality.

109
00:08:56,880 --> 00:08:59,740
I might go up to high and that's 2:21.

110
00:08:59,760 --> 00:09:01,260
In fact I think it looks really good.

111
00:09:01,260 --> 00:09:07,200
Under medium right here and then I'll click save when I save this file on my computer.

112
00:09:07,240 --> 00:09:09,800
I'll have a small optimized image for my web site.

113
00:09:11,880 --> 00:09:20,340
Pichler editor at peculier dot com is very much like Photoshop but opens within a browser window instead

114
00:09:20,340 --> 00:09:22,680
of being a standalone program.

115
00:09:22,680 --> 00:09:28,380
If you navigate to pixel or dot com you can launch the web app under Pichler editor you can use the

116
00:09:28,380 --> 00:09:34,680
welcome pop up to click open an image from your computer and you'll see your image pop up much like

117
00:09:34,680 --> 00:09:37,010
it does in Photoshop.

118
00:09:37,020 --> 00:09:38,180
That's fun my image here.

119
00:09:38,190 --> 00:09:38,870
Big image

120
00:09:41,540 --> 00:09:47,400
click image and then image size right here.

121
00:09:47,410 --> 00:09:56,270
I can put 6500 pixels as I did before and leave the constrained proportions box checked.

122
00:09:56,290 --> 00:09:59,060
That means that it won't distort or stretch the image at all.

123
00:09:59,100 --> 00:10:00,920
It'll keep it in the same proportions.

124
00:10:02,060 --> 00:10:09,440
Now that that's a smaller image in pixel or I can click File Save and in the dialog box it'll give me

125
00:10:09,440 --> 00:10:11,660
a quality slider.

126
00:10:11,660 --> 00:10:16,960
I can see that this will be 211 kilobytes if I pull it down just a little bit.

127
00:10:18,480 --> 00:10:20,070
I get 158.

128
00:10:20,400 --> 00:10:21,330
Great.

129
00:10:21,720 --> 00:10:24,470
Let's go ahead and save that in this web folder.

130
00:10:26,250 --> 00:10:30,140
And we can go and see what it looks like after it's finished working.

131
00:10:30,570 --> 00:10:31,380
And here it is.

132
00:10:31,380 --> 00:10:33,270
Big image.

133
00:10:33,270 --> 00:10:34,520
Let's take a look.

134
00:10:34,890 --> 00:10:40,320
Unlike Photoshop it doesn't give you a live optimized version that you can look at but you can experiment

135
00:10:40,320 --> 00:10:47,170
with quality and file size balance to get yourself a nice image optimized for a web site.

136
00:10:47,880 --> 00:10:54,060
If you use Microsoft Office with Excel spreadsheets you can use existing templates for quotations and

137
00:10:54,060 --> 00:10:54,990
invoices.

138
00:10:56,190 --> 00:11:06,400
Open a new document in Excel and look around under the available templates old file new and you can

139
00:11:06,400 --> 00:11:13,480
see I can open just a blank splodge spreadsheet or some other templates here under business searching

140
00:11:13,480 --> 00:11:21,190
office dot com since I'm online where you can use the search bar and you can see that there's a whole

141
00:11:21,190 --> 00:11:23,210
bunch of templates that you can choose from.

142
00:11:23,260 --> 00:11:29,510
If I search for invoice I can find the one that I usually use invoice that calculates total.

143
00:11:30,100 --> 00:11:36,500
And then you can download it and it'll save it as a template in Excel.

144
00:11:36,510 --> 00:11:45,650
I also use one for price quotations and proposals if you search for quotation I use one called price

145
00:11:45,650 --> 00:11:47,570
quotation without tax.

146
00:11:47,600 --> 00:11:56,390
Very similar to the invoice so I can keep my branding the same but it's a quotation you can experiment

147
00:11:56,390 --> 00:11:58,480
to find what works for you.

148
00:11:58,790 --> 00:12:03,240
But either of these can use a logo and can be customized for your business.

149
00:12:03,260 --> 00:12:11,100
Once I've created an invoice for a client I just click File Save As and save the document as a PTF

150
00:12:14,430 --> 00:12:20,740
then it can't be edited and the class can open it up and pay using the methods I specify.

151
00:12:20,820 --> 00:12:27,960
You can also do this using the free Google Drive documents navigate the drive at Google dot com and

152
00:12:27,960 --> 00:12:31,620
log in with a free Google account or sign up if you don't have one.

153
00:12:31,770 --> 00:12:34,380
If you go back to their welcome page after signing in.

154
00:12:34,500 --> 00:12:42,300
Click the menu grid at the top right and then click drive click new with the top left and open up a

155
00:12:42,300 --> 00:12:44,160
new Google sheet.

156
00:12:46,230 --> 00:12:51,870
You can do a google search for invoice for Google sheets and there are lots of templates that you can

157
00:12:51,870 --> 00:13:00,570
use for quotations and invoicing you can save a master copy in Google Drive and use the make a copy

158
00:13:00,570 --> 00:13:03,990
function when you need to make a new invoice.

159
00:13:05,140 --> 00:13:14,350
Once you have a new one finished you can click file download as and choose PTF to download a finished

160
00:13:14,350 --> 00:13:18,010
invoice to send to your clients via email.

161
00:13:18,130 --> 00:13:23,050
I receive a lot of payments from clients via check but at times you'll want to be able to take a credit

162
00:13:23,050 --> 00:13:25,910
card payment if you're just starting out.

163
00:13:25,930 --> 00:13:30,280
It can feel like a big step to accept credit cards through a merchant account at your bank.

164
00:13:30,280 --> 00:13:35,380
And if you research it it's pretty expensive and complicated with applications and credit checks to

165
00:13:35,390 --> 00:13:42,040
do Pay-Pal and Strype are two great payment processors that have made accepting credit card payments

166
00:13:42,100 --> 00:13:46,210
available to everyone without a hassle or any upfront fees.

167
00:13:47,340 --> 00:13:53,120
You can set up PayPal to take both one time and recurring payments very quickly and easily.

168
00:13:53,160 --> 00:13:54,260
They charge the seller.

169
00:13:54,270 --> 00:13:55,070
That's you.

170
00:13:55,170 --> 00:14:00,570
A small fee for processing the credit card and they take that percentage out of the payment after it's

171
00:14:00,570 --> 00:14:01,340
made.

172
00:14:01,560 --> 00:14:04,260
They don't charge the buyer at all.

173
00:14:04,260 --> 00:14:08,580
The fee isn't any more expensive than a traditional payment processing system like a merchant account

174
00:14:08,580 --> 00:14:09,470
at a bank.

175
00:14:09,660 --> 00:14:15,540
Plus your clients can feel comfortable with the security of their information as PayPal keeps it secure

176
00:14:15,750 --> 00:14:19,310
and you can't actually access their credit card information at all.

177
00:14:19,350 --> 00:14:20,960
Paypal takes care of it.

178
00:14:20,970 --> 00:14:26,070
You can also send invoices via email through paypal allowing your customers to just click a link in

179
00:14:26,070 --> 00:14:33,600
the email to pay you directly through the Paypal website go to pay pal dot com and click sign up at

180
00:14:33,600 --> 00:14:35,320
the top right.

181
00:14:35,400 --> 00:14:43,500
Choose a business account and then click continue and choose paypal payments standard.

182
00:14:43,500 --> 00:14:48,690
Follow the prompts to set up your account attach and verify a bank account for deposits and you'll be

183
00:14:48,690 --> 00:14:54,560
set to take credit cards paypal payments standard is all you need to take recurring payments for website

184
00:14:54,660 --> 00:15:01,650
maintenance or hosting for your clients as well as one time payments for web design and implementation.

185
00:15:01,890 --> 00:15:07,560
In this video we went over and compiled a lot of the tools we'll need to create our complete WordPress

186
00:15:07,560 --> 00:15:14,700
Web site business from hosting and domain registration information to the WP Div. course dot com student

187
00:15:14,710 --> 00:15:17,500
sandbox resource and lots of free tools.

188
00:15:17,550 --> 00:15:21,470
We've assembled everything you need for your website business.

189
00:15:21,480 --> 00:15:25,010
Next we'll dive deeply into how to host client web sites.

190
00:15:25,170 --> 00:15:29,880
Build your first WordPress installation manually on your computer in a local development environment

191
00:15:30,750 --> 00:15:34,260
and get your students sandbox set up and running for coursework.

192
00:15:34,260 --> 00:15:35,290
Let's get to it.