Now the second easiest way and especially if you're not making an ioS app is using something called 1
Start bootstrap. 2
So they basically have free for commercial use bootstrap templates and you can browse all of these by 3
giving here and you can see various website layouts. 4
Now once you're happy with one of these templates so you can have a look at the live preview or the 5
demo page over here. 6
And this is basically what your website will look like. It's got little description, links, images, get 7
it on Google Play, get it on the Apple App Store, various icons etc. 8
So really nice website 9
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
change the content to your own. 11
So the first thing you want to do is going to head over to startbootstrap.com, find the template that 12
you want and then go ahead and click download. 13
So once the zip file has downloaded just go ahead and unzip it. And then you're going to need a code 14
editor. 15
Now if you have Sublime Text installed or if you have, my personal favorite, Atom installed then you can 16
go head to just open the files in those text editors. 17
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
at GitHub 19
and I've been using it for a while and it works beautifully. 20
So go ahead and do that. 21
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
Right. 23
So once you've extracted that file then you'll have a folder called startbootstrap-new-age 24
and inhere here you're going to see a file called index.html. 25
So you right click on it to open it with Chrome. 26
So it's my default 27
but it might not be yours. 28
Then you'll see this website displayed locally. 29
But what we're going to do- 30
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
to do that we're going to use our text editor or Atom. 32
So I'm going to right click on index.html and open it inside 33
Atom. 34
So now this is the HTML file of my website essentially and I'm going to use this local version, 35
you can tell because the URL is not www but in fact it's a file directory that I've got locally. 36
So now we want to change our website to make it our own. 37
So the first thing I want to do is I want to change the Start bootstrap logo to say London App Brewery or 38
use your app name. 39
So you're going to do it. 40
So are you going to do is you're going to-- 41
So what you gonna do is you're going to right click on this start bootstrap part and you're going to 42
click on inspect to look at the HTML code. Ad here it shows you what is the ID of that section 43
and it's called navbar-brand. 44
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
-brand. Hit enter. 46
There we go. 47
That's that corresponding part of code that we saw over here. 48
And we're going to change the part where it says start bootstrap to whatever it is that we want. 49
So London App Brewery. 50
There we go. 51
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
change in the code reflected here. 53
Now let's go ahead and change this bit as well. 54
So remember we're going to select it, right click, inspect, see what that's called. And it's under an 55
h1 in the div header-content-inner. 56
So let's go ahead and find header-content-inner and there it is and there is that h1. 57
So to edit it you're going to select everything that is not a tag i.e. not something with angle brackets 58
and you're going to just change that text to Hello World. 59
This is this is how much imagination programmers have. 60
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
here and refresh command + r to refresh. 62
Voila! You've got a new description. 63
Now what about the image? 64
Let's do the same thing. Right click on the image, 65
hit inspect and see what it's called. 66
So the image source is in an image folder and the image name is demo-sscreen-1.jpeg. 67
So we're going to go and change that image to something that we want displayed over there. 68
So in my downloads folder I've got one of my apps screenshots and it's just called screenshot. 69
Now I can find that inside Atom by just looking in my downloads folder and you can see that image screenshot 70
right here. 71
Now if you expand the folder called startbootstrap-new-age where all of the files that 72
I used to create your website are located, there is that folder called image that we saw earlier. 73
And the one that's currently being displayed is something called demo-screen-1. 74
So that's that image over here. 75
And what we're going to do is we're going to replace this image with our image. 76
So in order to do that the easiest thing is for me to first rename my screenshot to demo-screen 77
-1. 78
I'm going to hit save. 79
Now I'm going to delete this image. 80
So that was the old version. 81
Move to trash. And then I'm going to put my new demo-screen-1 in there and 82
I'm going to hit 83
command + s 84
to save. 85
And then we're going to go and refresh our website and you can see. 86
And there we go. 87
There's on you screenshot on our beautiful web site. 88
So basically you can go through this bootstrap template changing anything and everything that you want. 89
And essentially all you're doing is just right clicking on something that you want to change. 90
So this currently is a link that just redirects back to the home page. 91
Now we want it to go towards our download link. 92
So let's again inspect the element. 93
So it's called badge-link. 94
So then we go back to our index.html and we find badge-link and you can see those two badge 95
links. 96
One is the image for the Google Play badge and the other one is the App Store badge. 97
And at the moment the href or the URL is redirecting back to the top of the home page. 98
So instead, let's do something else. Let's paste in the iTunes link for the Pokemon go app and let's 99
hit save and let's go back over here and hit refresh and then we're going to click on this one which 100
we edited and as you can see it redirects to the link that we wanted to go to. 101
Okay. So once you're done with fiddling around with all of this, the next thing that we're going to do is 102
we're going to publish it. 103
Now you might have heard that hosting domain fees etc. are all a hassle and very difficult. 104
Well I'm going to show you a really really easy way of getting your website published in literally four 105
or five clicks. 106
So the first thing you going to do is you're going to set up a GitHub account if you don't already 107
have one. 108
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
repository we're going to save all the files that are related to our website. 110
Now the important part is how you name this repository. 111
And the first part is putting in your username. 112
So here it's my username and then it's .github.io. 113
So this is going to be the URL of your website. 114
Now you can leave the description blank, leave it as public, and then hit create repository. 115
Now here is your repository. Now if you're familiar with Git and you're familiar with terminal then go 116
ahead and set it up however you like. But if you are a beginner then just follow along with me and we're 117
going to use a really simple way of doing this. 118
So the first thing you need to do is download something called GitHub desktop. 119
Now the download link for Mac is desktop.github.com and you can just go ahead and click that. 120
Now if you're using Windows you can get it for Windows as well. 121
Now once you've downloaded that just go ahead and extract and install it. 122
It should be pretty simple. 123
So next, once you've installed that you're going to have a welcome screen that helps you set up 124
your GitHub account. 125
So here you put in your GitHub account details. 126
So now we're going to add all of our website files that we edited earlier on into this repository. 127
And then you're going to choose that folder where you've got all the website files so it was called 128
startbootstrap-new-age. 129
So in order to commit it we're going to add a commit message which is going to be something like First 130
commit. And then we're going to get commit to master and then we're going to go and hit publish. 131
So once the publishing has completed then you can head over to your favorite browser then you're going 132
to type in that repository name that you created earlier on. 133
So it was your username, 134
so for mine it was angelabauer.github.io and if you hit enter then magically you'll see your 135
brand new website that you've created appear online and anybody can go there to angelabauer.github 136
.io and see your product page and everything will be exactly as you created it. 137
Now if you want to buy a custom domain and set it up with GitHub pages then it is also possible and 138
I'll link to a GitHub help page for that particular feature in the text below. 139
But essentially the point is there are so many beautiful bootstrap templates out there and you can edit 140
them very easily with a text editor and you can get them published and online within a few minutes. 141
So always go for the low hanging fruit and you don't need anybody to create a beautiful website for 142
you. 143
You can do that very easily nowadays. 144
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
own app launch. 146
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
word far and wide and shout about it to everybody we know. 148
So thanks for watching and I hope I'll see you on one of our other courses soon.