In this lesson we will be creating the front end side that will look like this.
This is what I made using Jake where are you mobile.
Let's see what this page will look like when we see it through a smartphone device.
We can change the settings by clicking on the dots on the right corner choose more tools and click on
developer tools.
On the left corner you will see a button showing pixel to excel.
You can change it to other devices like iPhone or iPads.
Now let's go back to the regular screen and get on with the codes.
We will start creating an index HDMI all file first right click on the template directory and choose
new.
Then choose HDMI all file and name the spell index and hit.
OK.
Check the templates folder to see if the index HDMI Alpha has been created.
You will see some codes written in the file already.
These codes will be set as default.
Now we need to invoke this HDMI all from the server.
P Why file before we go to the server P Why file.
Let's check on the config P why you will see that we set templates to drone app slash templates.
Static to drone apps less static.
We also set flask which already has figured out where the templates are.
Now we can go to the server IP rifle.
Here we can easily invoke the HDMI Alpha.
First we need to import from flask import render template.
In our previous lesson we set the site to return Hello World.
Here we can change this to return render template followed by index age TMM.
When you go to the link hello world will no longer show but you will be able to see the things we sent
in the index age.
GM Alpha.
Let's go back to the HDMI M.L. file and start writing as we talked in our previous lesson.
We will be writing based on J.
Query mobile.
For those of you who want to know more details on the J query mobile you can follow their documents
as well.
We'll start the metadata.
Name will be viewport and content will be width equals device width followed by initial skill set to
1 by setting this the site will be stretched out to fit nicely in the mobile screen for the link we
want to invoke the CSX.
So we set the RTL to style sheet now for the H ref.
Remember we set the CSX file from J quarry and the static folder to load this.
We will set slash static slash CSX slash J.
Query dot mobile hyphen one point four point five men dot CSX for the script we need to set the source
to load the javascript first we need static J S query hyphen one point one one point one point Min Doc
J is.
We also need to load the J.
Query Mobile's script as well so let's copy and rewrite the file name to J query mobile one point four
point five.
Let's check on the files open the project tab and go to the static folder.
Click on the J S folder and you will see the two files we set.
Here you can also see the CSX file.
Also under the static folder.
Now let's go on decoding the body the language is set to English if you wish to change.
You can change it to whatever language you desire.
I'll be deleting it so it doesn't confuse you.
Go to the body.
This is the site we are planning on making.
So let's have it on the right side so we can have it.
As an example first we need to set Div 2 data row to page.
This is a Jake worry mobile rule where we need to set the site category.
Once we set this we can go on and write the script on the top.
We'll be div data rule header to set a header a draft will be set to a slash so the top page will be
loaded next.
I want you to set the data icon to home in the J query Mobile C Ss under the image folder.
You can see multiple icons preloaded by setting the data icon to home.
We will be using the home icon from the images once we click on the link.
There is an option to cache the data in this lesson we will set it to false.
Now let's close the tag next we go onto the h1 tag and set the text drawn world.
This will be the text in the header you can see on the site.
Now let's go on to making the site content.
First we need to set Div 2 data roll equals content.
From here we set the contents.
We will align the texts in the center then set a title again.
It could be anything.
Let's say drone world again.
The following image will be set to width 100 percent and the source will be the drone image that we
downloaded earlier which is set in static image.
Drone being below we will set a unordered list U L data roll will be set to list.
View let's use ally tag.
This list is the list here that says controller in the ally tag.
We need to set the links.
We haven't created any links yet so we'll just set a h ref to controller for the actual site.
We want to link to a page where we can control the drone.
So let's set the name controller and we'll come back to set the link later.
Once we create the page up sorry I just realized that I didn't close this row.
Once you complete the script you can go on and run this code.
I'll run this code too and click on this link you can see that the exact same site will show up on the
right side.
Congratulations you've just completed making the top page see you all in the next lesson.