1
00:00:01,080 --> 00:00:06,350
In this lesson we will be creating the front end side in this lesson we will be using J.

2
00:00:06,380 --> 00:00:07,600
Quarry.

3
00:00:07,740 --> 00:00:12,150
In general we would be using JavaScript to create the dynamic parts.

4
00:00:12,150 --> 00:00:18,510
But in this lesson we will be using J query which is a tool to easily create a javascript.

5
00:00:18,510 --> 00:00:26,500
This is the sample codes this code will show next stop HDMI all on the button element.

6
00:00:26,700 --> 00:00:29,640
This code is to hide a button.

7
00:00:29,640 --> 00:00:34,330
This code is to send data to the back end using objects.

8
00:00:34,650 --> 00:00:38,550
You can easily understand the codes if you read it from the top.

9
00:00:38,580 --> 00:00:41,940
There is another javascript library called react.

10
00:00:41,970 --> 00:00:47,780
This is also becoming very popular if you wish to work deeper with JavaScript.

11
00:00:47,790 --> 00:00:54,660
You can start with react although I do have to warn you that the entire library has quite a volume.

12
00:00:54,660 --> 00:01:00,450
If you have some knowledge on javascript frameworks you may be able to understand if you are new to

13
00:01:00,450 --> 00:01:00,840
it.

14
00:01:00,840 --> 00:01:06,340
I wouldn't advise you to start with react since it is for more advanced developers.

15
00:01:06,390 --> 00:01:13,950
For example we can look into the tutorial here scroll down you'll see code settings classes or using

16
00:01:13,980 --> 00:01:15,840
elements to be returned.

17
00:01:15,960 --> 00:01:22,080
You might not understand it just by reading the code from the top but once you do understand how to

18
00:01:22,080 --> 00:01:27,050
use react you will be able to develop a great page very quickly.

19
00:01:27,120 --> 00:01:29,610
Here you can see react component.

20
00:01:29,850 --> 00:01:34,720
If we go through all this in this course it'll take too much of the time.

21
00:01:35,070 --> 00:01:38,940
So you have the pros and cons about react if you wish to use it.

22
00:01:38,970 --> 00:01:44,810
That's fine if you are quite new to framework you can follow me with Jake worry.

23
00:01:44,820 --> 00:01:50,580
Also the site we will create won't be such a complicated one so you wouldn't need to go through the

24
00:01:50,580 --> 00:01:52,790
hassle and using ranked.

25
00:01:52,980 --> 00:01:59,040
Even with J query I will not be explaining each script in detail will be copy and pasting the codes

26
00:01:59,040 --> 00:02:01,450
we need to create the site.

27
00:02:01,470 --> 00:02:04,460
Now let's start in J query.

28
00:02:04,460 --> 00:02:11,510
We have four types of projects for user interface mobile queue unit and sizzle.

29
00:02:12,290 --> 00:02:13,250
Let's look into the J.

30
00:02:13,250 --> 00:02:15,610
Query user interface.

31
00:02:15,620 --> 00:02:18,090
Let's see the demos for example.

32
00:02:18,120 --> 00:02:19,270
Dragon Ball.

33
00:02:19,400 --> 00:02:24,140
This code will enable you to drag the object around the screen.

34
00:02:24,140 --> 00:02:25,940
Let's see the source code.

35
00:02:25,940 --> 00:02:30,630
You can click on View Source to see the sample code and the div.

36
00:02:30,650 --> 00:02:33,740
We have the square with these three codes.

37
00:02:33,740 --> 00:02:36,450
We can set the square to be dragged around.

38
00:02:36,890 --> 00:02:42,420
There's so many more things we can do let's look at date picker.

39
00:02:42,460 --> 00:02:47,980
I bet you've seen one of these in registration sites or travel agency sites.

40
00:02:47,980 --> 00:02:54,780
You can create a box that will show you a small calendar for you to choose a specific date very easily.

41
00:02:54,820 --> 00:02:57,030
Let's check out the source code.

42
00:02:57,130 --> 00:02:58,890
It's very short and simple.

43
00:02:58,930 --> 00:03:05,150
You create a date picker with a p tag then you set the date picker as a function.

44
00:03:05,170 --> 00:03:07,820
There is a lot you can do with the user interface.

45
00:03:07,870 --> 00:03:12,820
You don't have to go through each and every code but it's always good to take some time to look into

46
00:03:12,820 --> 00:03:14,410
the options you have.

47
00:03:14,410 --> 00:03:16,410
Now let's go back to the top.

48
00:03:16,630 --> 00:03:25,790
The Q unit is for unit testing and sizzle is a factor in this lesson we will be using the J Cory mobile.

49
00:03:25,960 --> 00:03:27,550
Let's look into it.

50
00:03:27,700 --> 00:03:32,960
Go to demos will choose the demo on the top.

51
00:03:32,980 --> 00:03:38,260
The purpose of the J query mobile is to optimize the site to a mobile friendly interface.

52
00:03:39,430 --> 00:03:40,820
Let's see a sample.

53
00:03:41,020 --> 00:03:42,650
Click on buttons.

54
00:03:43,030 --> 00:03:46,090
We're looking at this site through a regular browser.

55
00:03:46,120 --> 00:03:52,240
If you are using Chrome you can click on the dots on the right hand corner choose more tools and click

56
00:03:52,240 --> 00:04:00,510
on developers tools once we click on it you will see this small window open up on the left top corner

57
00:04:00,570 --> 00:04:06,780
you will see a small smartphone looking button if you click on this button the screen will be minimized

58
00:04:06,780 --> 00:04:12,660
as if you are looking at the site with the smartphone you can see that the buttons have been optimized

59
00:04:14,540 --> 00:04:16,690
here I went back to the previous page.

60
00:04:17,060 --> 00:04:22,460
Let's check on slider you can see the slider which fits nicely in the mobile screen.

61
00:04:23,450 --> 00:04:29,970
Let's clear the settings and go back to the site so that was a quick look at what Jake worry mobile

62
00:04:29,970 --> 00:04:31,600
can do.

63
00:04:31,710 --> 00:04:36,290
Again we will be using Jake worry and Jake worry mobile.

64
00:04:36,510 --> 00:04:38,930
The website is a TTP.

65
00:04:38,930 --> 00:04:41,080
S call on slash slash.

66
00:04:41,130 --> 00:04:41,530
J.

67
00:04:41,600 --> 00:04:42,620
Query mobile.

68
00:04:42,630 --> 00:04:45,750
Dot com go to downloads.

69
00:04:45,860 --> 00:04:47,340
You will find Jake worry.

70
00:04:47,370 --> 00:04:54,700
Mobile one point 4.5 zip file on the top I will include this in our source code.

71
00:04:54,710 --> 00:05:00,500
So you do not have to individually download this file if you prefer to download it.

72
00:05:00,510 --> 00:05:07,920
Now you can do so from this Web site lets start downloading the zip file.

73
00:05:07,920 --> 00:05:13,350
Once we've finished downloading I want you to see these codes telling us what else we need to prepare

74
00:05:14,580 --> 00:05:17,190
the first code is included in the zip file.

75
00:05:17,370 --> 00:05:19,170
The second code is showing the J.

76
00:05:19,180 --> 00:05:24,580
Query one point one one point one which is not included in the zip file.

77
00:05:24,750 --> 00:05:28,220
This last one is also included in the zip file.

78
00:05:28,230 --> 00:05:30,300
This means we need to download the J.

79
00:05:30,300 --> 00:05:35,090
Query one point one one point one copy the link and open the site.

80
00:05:36,140 --> 00:05:40,690
Now we will directly save the site once we save the site.

81
00:05:40,730 --> 00:05:42,610
We can close the browser.

82
00:05:43,190 --> 00:05:47,480
You can see the zip file in the Minjae s on the desktop.

83
00:05:47,480 --> 00:05:55,750
We're going to move it into the project right click on static folder choose new and click directory.

84
00:05:56,060 --> 00:05:58,130
Name it C S S and hit.

85
00:05:58,160 --> 00:05:59,640
OK.

86
00:05:59,720 --> 00:06:04,220
We also need to create a directory to save the image file.

87
00:06:04,220 --> 00:06:09,890
So right click on static again and choose new click directory and name it.

88
00:06:09,980 --> 00:06:11,360
I m g and hit.

89
00:06:11,380 --> 00:06:16,720
OK again go through the process to create another directory.

90
00:06:16,840 --> 00:06:20,650
We'll use this to set the JavaScript So let's name it to J.

91
00:06:20,680 --> 00:06:26,200
S drag then men file to the J S directory hit.

92
00:06:26,230 --> 00:06:34,790
OK to this message you can see that the main file is in the J S directory unzip the zip file in this

93
00:06:34,790 --> 00:06:42,980
folder look for J carry one point 4.5 Min J S file drag this to the J is folder and hit.

94
00:06:42,990 --> 00:06:47,450
OK go back to the unzip file and look for the J query mobile.

95
00:06:47,450 --> 00:06:54,280
One point four point five men see SS file drag this file into the C S directory.

96
00:06:54,290 --> 00:07:01,880
We just made and hit ok let's close all these tabs for now as we click on the C Ss folder you can see

97
00:07:01,880 --> 00:07:06,330
that the min C S S file is in the C S S directory.

98
00:07:06,560 --> 00:07:13,190
Now look for the images folder there are some logo images that we want to access so let's drag the entire

99
00:07:13,190 --> 00:07:22,700
folder to the C Ss directory and hate OK let's quickly check the directories in the C Ss folder you

100
00:07:22,700 --> 00:07:31,040
will find the images folder and the men C Ss file and the J S folder you'll see the J query mobile one

101
00:07:31,040 --> 00:07:40,480
point four point five men J S and the J query one point one one point one men J S right click on the

102
00:07:40,480 --> 00:07:43,320
tabs and close all the tabs.

103
00:07:43,470 --> 00:07:50,810
Now we need to download some of the logo images so we need to go back to the browser Google drone and

104
00:07:50,810 --> 00:08:01,960
hit the image tab click on settings and choose advanced search set the file type as pink file filter

105
00:08:01,960 --> 00:08:07,840
the image rights to free to use share or modify even commercially.

106
00:08:07,840 --> 00:08:09,550
Now hey advanced search.

107
00:08:09,550 --> 00:08:16,630
Choose whichever image you want and download I'll choose this image here right click on the image and

108
00:08:16,630 --> 00:08:25,870
save image onto my desktop minimize your browser you can see the drone image that we downloaded let's

109
00:08:25,870 --> 00:08:35,130
change the file name to drone ping now drag the image onto the image folder hit ok we quickly went through

110
00:08:35,130 --> 00:08:40,800
the settings but I will have all this in my source code now we are all set.

111
00:08:40,980 --> 00:08:44,570
I'll see you in our next lesson where we start creating the front end.