0
1
00:00:00,450 --> 00:00:06,300
Now the second easiest way and especially if you're not making an ioS app is using something called
1

2
00:00:06,300 --> 00:00:07,340
Start bootstrap.
2

3
00:00:07,500 --> 00:00:13,710
So they basically have free for commercial use bootstrap templates and you can browse all of these by
3

4
00:00:13,710 --> 00:00:17,070
giving here and you can see various website layouts.
4

5
00:00:17,100 --> 00:00:22,860
Now once you're happy with one of these templates so you can have a look at the live preview or the
5

6
00:00:22,860 --> 00:00:25,260
demo page over here.
6

7
00:00:25,380 --> 00:00:32,310
And this is basically what your website will look like. It's got little description, links, images, get
7

8
00:00:32,310 --> 00:00:37,020
it on Google Play, get it on the Apple App Store, various icons etc.
8

9
00:00:37,020 --> 00:00:38,550
So really nice website
9

10
00:00:38,580 --> 00:00:45,540
and I'm going to show you just how easy it is to modify this so that you keep the designs but you just
10

11
00:00:45,540 --> 00:00:47,640
change the content to your own.
11

12
00:00:47,640 --> 00:00:52,380
So the first thing you want to do is going to head over to startbootstrap.com, find the template that
12

13
00:00:52,380 --> 00:00:54,950
you want and then go ahead and click download.
13

14
00:00:54,960 --> 00:01:01,170
So once the zip file has downloaded just go ahead and unzip it. And then you're going to need a code
14

15
00:01:01,170 --> 00:01:01,550
editor.
15

16
00:01:01,560 --> 00:01:07,530
Now if you have Sublime Text installed or if you have, my personal favorite, Atom installed then you can
16

17
00:01:07,530 --> 00:01:11,790
go head to just open the files in those text editors.
17

18
00:01:12,030 --> 00:01:18,270
If you don't have one, then my recommendation is to get the free Atom text editor. It's made by the same guys
18

19
00:01:18,270 --> 00:01:18,970
at GitHub
19

20
00:01:19,170 --> 00:01:22,250
and I've been using it for a while and it works beautifully.
20

21
00:01:22,440 --> 00:01:24,040
So go ahead and do that.
21

22
00:01:24,120 --> 00:01:30,450
But they do only have it for Mac. So if you're a PC guy then Sublime Text is probably the next best solution.
22

23
00:01:30,600 --> 00:01:30,860
Right.
23

24
00:01:30,870 --> 00:01:36,930
So once you've extracted that file then you'll have a folder called startbootstrap-new-age
24

25
00:01:37,140 --> 00:01:41,400
and inhere here you're going to see a file called index.html.
25

26
00:01:41,490 --> 00:01:44,210
So you right click on it to open it with Chrome.
26

27
00:01:44,220 --> 00:01:45,460
So it's my default
27

28
00:01:45,480 --> 00:01:46,680
but it might not be yours.
28

29
00:01:46,860 --> 00:01:50,160
Then you'll see this website displayed locally.
29

30
00:01:50,190 --> 00:01:51,520
But what we're going to do-
30

31
00:01:51,630 --> 00:01:55,800
So what we're going to do is we're going to keep that page open and we're going to edit it. And in order 
31

32
00:01:55,800 --> 00:01:58,550
to do that we're going to use our text editor or Atom.
32

33
00:01:58,710 --> 00:02:02,550
So I'm going to right click on index.html and open it inside
33

34
00:02:02,550 --> 00:02:03,580
Atom.
34

35
00:02:03,600 --> 00:02:09,910
So now this is the HTML file of my website essentially and I'm going to use this local version,
35

36
00:02:09,990 --> 00:02:16,270
you can tell because the URL is not www but in fact it's a file directory that I've got locally.
36

37
00:02:16,350 --> 00:02:19,110
So now we want to change our website to make it our own.
37

38
00:02:19,110 --> 00:02:24,990
So the first thing I want to do is I want to change the Start bootstrap logo to say London App Brewery or
38

39
00:02:24,990 --> 00:02:26,280
use your app name.
39

40
00:02:26,280 --> 00:02:27,170
So you're going to do it.
40

41
00:02:27,180 --> 00:02:28,520
So are you going to do is you're going to--
41

42
00:02:28,530 --> 00:02:33,120
So what you gonna do is you're going to right click on this start bootstrap part and you're going to
42

43
00:02:33,120 --> 00:02:40,040
click on inspect to look at the HTML code. Ad here it shows you what is the ID of that section
43

44
00:02:40,080 --> 00:02:42,530
and it's called navbar-brand.
44

45
00:02:42,600 --> 00:02:49,920
So we're going to head over to Atom now and we're going to go command + F in order to search for navbar
45

46
00:02:50,010 --> 00:02:53,220
-brand. Hit enter.
46

47
00:02:53,250 --> 00:02:53,680
There we go.
47

48
00:02:53,700 --> 00:02:57,240
That's that corresponding part of code that we saw over here.
48

49
00:02:57,510 --> 00:03:02,340
And we're going to change the part where it says start bootstrap to whatever it is that we want.
49

50
00:03:02,340 --> 00:03:04,060
So London App Brewery.
50

51
00:03:04,530 --> 00:03:04,950
There we go.
51

52
00:03:04,950 --> 00:03:10,980
And then I'm going to hit command s to save and if I go over here and I hit refresh then you'll see that
52

53
00:03:10,980 --> 00:03:12,830
change in the code reflected here.
53

54
00:03:12,930 --> 00:03:16,300
Now let's go ahead and change this bit as well.
54

55
00:03:16,320 --> 00:03:22,530
So remember we're going to select it, right click, inspect, see what that's called. And it's under an 
55

56
00:03:22,530 --> 00:03:25,890
h1 in the div header-content-inner.
56

57
00:03:26,160 --> 00:03:34,950
So let's go ahead and find header-content-inner and there it is and there is that h1.
57

58
00:03:34,950 --> 00:03:39,990
So to edit it you're going to select everything that is not a tag i.e. not something with angle brackets
58

59
00:03:40,350 --> 00:03:44,410
and you're going to just change that text to Hello World.
59

60
00:03:44,430 --> 00:03:47,440
This is this is how much imagination programmers have.
60

61
00:03:47,610 --> 00:03:53,250
So we've changed the text that we wanted to say and then I'm going to hit command s again to save, go
61

62
00:03:53,370 --> 00:03:56,460
here and refresh command + r to refresh.
62

63
00:03:56,520 --> 00:03:59,060
Voila! You've got a new description.
63

64
00:03:59,070 --> 00:04:00,340
Now what about the image?
64

65
00:04:00,360 --> 00:04:02,520
Let's do the same thing. Right click on the image,
65

66
00:04:02,520 --> 00:04:05,010
hit inspect and see what it's called.
66

67
00:04:05,010 --> 00:04:11,880
So the image source is in an image folder and the image name is demo-sscreen-1.jpeg.
67

68
00:04:11,880 --> 00:04:16,120
So we're going to go and change that image to something that we want displayed over there.
68

69
00:04:16,140 --> 00:04:21,450
So in my downloads folder I've got one of my apps screenshots and it's just called screenshot.
69

70
00:04:21,480 --> 00:04:28,560
Now I can find that inside Atom by just looking in my downloads folder and you can see that image screenshot
70

71
00:04:28,560 --> 00:04:29,380
right here.
71

72
00:04:29,400 --> 00:04:35,340
Now if you expand the folder called startbootstrap-new-age where all of the files that
72

73
00:04:35,340 --> 00:04:40,940
I used to create your website are located, there is that folder called image that we saw earlier.
73

74
00:04:41,160 --> 00:04:45,550
And the one that's currently being displayed is something called demo-screen-1.
74

75
00:04:45,600 --> 00:04:47,330
So that's that image over here.
75

76
00:04:47,400 --> 00:04:51,000
And what we're going to do is we're going to replace this image with our image.
76

77
00:04:51,000 --> 00:04:57,780
So in order to do that the easiest thing is for me to first rename my screenshot to demo-screen
77

78
00:04:59,370 --> 00:05:00,470
-1.
78

79
00:05:00,540 --> 00:05:01,910
I'm going to hit save.
79

80
00:05:02,070 --> 00:05:04,810
Now I'm going to delete this image.
80

81
00:05:04,860 --> 00:05:06,270
So that was the old version.
81

82
00:05:06,270 --> 00:05:11,240
Move to trash. And then I'm going to put my new demo-screen-1 in there and
82

83
00:05:11,280 --> 00:05:11,940
I'm going to hit
83

84
00:05:11,940 --> 00:05:12,340
command + s
84

85
00:05:12,350 --> 00:05:13,840
to save.
85

86
00:05:14,160 --> 00:05:19,700
And then we're going to go and refresh our website and you can see.
86

87
00:05:19,830 --> 00:05:20,680
And there we go.
87

88
00:05:20,700 --> 00:05:23,530
There's on you screenshot on our beautiful web site.
88

89
00:05:23,550 --> 00:05:28,040
So basically you can go through this bootstrap template changing anything and everything that you want.
89

90
00:05:28,110 --> 00:05:33,660
And essentially all you're doing is just right clicking on something that you want to change.
90

91
00:05:33,660 --> 00:05:38,760
So this currently is a link that just redirects back to the home page.
91

92
00:05:38,760 --> 00:05:41,760
Now we want it to go towards our download link.
92

93
00:05:41,760 --> 00:05:45,050
So let's again inspect the element.
93

94
00:05:45,240 --> 00:05:47,670
So it's called badge-link.
94

95
00:05:47,670 --> 00:05:56,150
So then we go back to our index.html and we find badge-link and you can see those two badge
95

96
00:05:56,190 --> 00:05:56,920
links.
96

97
00:05:56,970 --> 00:06:01,690
One is the image for the Google Play badge and the other one is the App Store badge.
97

98
00:06:01,800 --> 00:06:08,150
And at the moment the href or the URL is redirecting back to the top of the home page.
98

99
00:06:08,160 --> 00:06:12,870
So instead, let's do something else. Let's paste in the iTunes link for the Pokemon go app and let's
99

100
00:06:12,870 --> 00:06:21,600
hit save and let's go back over here and hit refresh and then we're going to click on this one which
100

101
00:06:21,600 --> 00:06:26,440
we edited and as you can see it redirects to the link that we wanted to go to.
101

102
00:06:26,670 --> 00:06:32,250
Okay. So once you're done with fiddling around with all of this, the next thing that we're going to do is
102

103
00:06:32,250 --> 00:06:33,920
we're going to publish it.
103

104
00:06:33,930 --> 00:06:39,420
Now you might have heard that hosting domain fees etc. are all a hassle and very difficult.
104

105
00:06:39,430 --> 00:06:45,030
Well I'm going to show you a really really easy way of getting your website published in literally four
105

106
00:06:45,030 --> 00:06:45,980
or five clicks.
106

107
00:06:46,170 --> 00:06:50,160
So the first thing you going to do is you're going to set up a GitHub account if you don't already
107

108
00:06:50,160 --> 00:06:51,120
have one.
108

109
00:06:51,120 --> 00:06:56,230
Now once you've done that, what you're going to do is you're going to create a new repository. And in this
109

110
00:06:56,250 --> 00:07:00,970
repository we're going to save all the files that are related to our website.
110

111
00:07:01,380 --> 00:07:04,710
Now the important part is how you name this repository.
111

112
00:07:04,800 --> 00:07:07,770
And the first part is putting in your username.
112

113
00:07:07,770 --> 00:07:13,700
So here it's my username and then it's .github.io.
113

114
00:07:14,070 --> 00:07:18,220
So this is going to be the URL of your website.
114

115
00:07:18,270 --> 00:07:23,840
Now you can leave the description blank, leave it as public, and then hit create repository.
115

116
00:07:23,850 --> 00:07:28,410
Now here is your repository. Now if you're familiar with Git and you're familiar with terminal then go
116

117
00:07:28,410 --> 00:07:33,150
ahead and set it up however you like. But if you are a beginner then just follow along with me and we're
117

118
00:07:33,150 --> 00:07:35,310
going to use a really simple way of doing this.
118

119
00:07:35,310 --> 00:07:39,040
So the first thing you need to do is download something called GitHub desktop.
119

120
00:07:39,040 --> 00:07:45,890
Now the download link for Mac is desktop.github.com and you can just go ahead and click that.
120

121
00:07:45,900 --> 00:07:49,680
Now if you're using Windows you can get it for Windows as well.
121

122
00:07:49,680 --> 00:07:53,940
Now once you've downloaded that just go ahead and extract and install it.
122

123
00:07:54,030 --> 00:07:55,250
It should be pretty simple.
123

124
00:07:55,260 --> 00:08:00,000
So next, once you've installed that you're going to have a welcome screen that helps you set up
124

125
00:08:00,000 --> 00:08:01,010
your GitHub account.
125

126
00:08:01,110 --> 00:08:03,800
So here you put in your GitHub account details.
126

127
00:08:03,810 --> 00:08:10,020
So now we're going to add all of our website files that we edited earlier on into this repository.
127

128
00:08:10,020 --> 00:08:14,130
And then you're going to choose that folder where you've got all the website files so it was called
128

129
00:08:14,130 --> 00:08:16,500
startbootstrap-new-age.
129

130
00:08:16,530 --> 00:08:22,990
So in order to commit it we're going to add a commit message which is going to be something like First
130

131
00:08:23,010 --> 00:08:28,970
commit. And then we're going to get commit to master and then we're going to go and hit publish.
131

132
00:08:29,580 --> 00:08:36,060
So once the publishing has completed then you can head over to your favorite browser then you're going
132

133
00:08:36,060 --> 00:08:39,270
to type in that repository name that you created earlier on.
133

134
00:08:39,270 --> 00:08:41,550
So it was your username,
134

135
00:08:41,700 --> 00:08:50,130
so for mine it was angelabauer.github.io and if you hit enter then magically you'll see your
135

136
00:08:50,130 --> 00:08:56,810
brand new website that you've created appear online and anybody can go there to angelabauer.github
136

137
00:08:56,820 --> 00:09:02,490
.io and see your product page and everything will be exactly as you created it.
137

138
00:09:02,490 --> 00:09:08,310
Now if you want to buy a custom domain and set it up with GitHub pages then it is also possible and
138

139
00:09:08,310 --> 00:09:13,330
I'll link to a GitHub help page for that particular feature in the text below.
139

140
00:09:13,350 --> 00:09:18,750
But essentially the point is there are so many beautiful bootstrap templates out there and you can edit
140

141
00:09:18,750 --> 00:09:24,750
them very easily with a text editor and you can get them published and online within a few minutes.
141

142
00:09:24,750 --> 00:09:30,720
So always go for the low hanging fruit and you don't need anybody to create a beautiful website for
142

143
00:09:30,720 --> 00:09:30,930
you.
143

144
00:09:30,930 --> 00:09:33,350
You can do that very easily nowadays.
144

145
00:09:33,360 --> 00:09:39,210
So if you come along with me this far, I hope you enjoyed the course and I wish you all the best for your
145

146
00:09:39,240 --> 00:09:40,410
own app launch.
146

147
00:09:40,410 --> 00:09:44,940
If you are ready to publish and launch your app, do get in touch with us and we'll try our best to spread your
147

148
00:09:44,940 --> 00:09:48,250
word far and wide and shout about it to everybody we know.
148

149
00:09:48,360 --> 00:09:52,030
So thanks for watching and I hope I'll see you on one of our other courses soon.