1
00:00:00,270 --> 00:00:00,980
Welcome back.

2
00:00:01,000 --> 00:00:03,720
In this video I want to run through the entire syllabus.

3
00:00:03,730 --> 00:00:09,090
Of course we're not going to talk about things in much detail but I do want to introduce you to everything

4
00:00:09,090 --> 00:00:10,210
we're going to talk about.

5
00:00:10,320 --> 00:00:16,350
And there's quite a bit as you can see this is a very long course lots material very comprehensive to

6
00:00:16,350 --> 00:00:17,370
start off.

7
00:00:17,430 --> 00:00:20,020
We do our course basics which is where you are right now.

8
00:00:20,100 --> 00:00:23,190
It's definitely the least substantial unit in this entire course.

9
00:00:23,200 --> 00:00:28,740
It discovers things about the syllabus and how the Course works and gives you some advice and then we

10
00:00:28,740 --> 00:00:30,820
really get going with introduction to front end.

11
00:00:30,960 --> 00:00:35,210
So we talk about what front end development is what back in development is how they're different what

12
00:00:35,260 --> 00:00:38,130
HDMI is what CSSA is what javascript is.

13
00:00:38,190 --> 00:00:43,170
But you still don't write a whole lot of code until this unit when we actually talk about aged him out

14
00:00:43,190 --> 00:00:43,460
.

15
00:00:43,710 --> 00:00:49,560
So there are two units on each team all introduction and intermediate aged him out and then once you've

16
00:00:49,560 --> 00:00:54,650
finished that and move on to see assess which is how we can make things look nice we add some style

17
00:00:54,660 --> 00:00:54,910
.

18
00:00:55,080 --> 00:00:57,820
So that's where the projects start to get a little more exciting.

19
00:00:57,960 --> 00:01:03,180
Have you make an image gallery for photography portfolio site and we also have you make a blog site

20
00:01:04,020 --> 00:01:06,690
so to units on CSSA intro and advanced.

21
00:01:06,720 --> 00:01:13,140
We talk about things like typography fonts including custom fonts using Google fonts forms validations

22
00:01:13,440 --> 00:01:14,550
lots of topics.

23
00:01:14,670 --> 00:01:20,160
Then we talk about Bootstrap which is a C S S and Javascript framework that helps to make nice looking

24
00:01:20,160 --> 00:01:22,120
Web sites really quickly and easily.

25
00:01:22,320 --> 00:01:28,800
And in that unit we make a few projects including a portfolio site and a startup landing page or a home

26
00:01:28,800 --> 00:01:30,350
page for a startup.

27
00:01:30,540 --> 00:01:34,890
Then we hit javascript and that's where things in my opinion at least start to get really interesting

28
00:01:34,890 --> 00:01:35,810
and exciting.

29
00:01:35,820 --> 00:01:41,340
We start talking about our first real programming language javascript so we start with the basics and

30
00:01:41,440 --> 00:01:47,040
there's a lot to talk about with javascript so you can see pretty much takes up from here down to the

31
00:01:47,040 --> 00:01:47,360
end.

32
00:01:47,460 --> 00:01:53,070
Everything involves javascript and to be fair Everything involves H-2 mounts assess as well but javascript

33
00:01:53,070 --> 00:01:54,260
becomes the focus.

34
00:01:54,270 --> 00:01:59,130
That's how we start making robust Web applications not just simple web sites.

35
00:01:59,140 --> 00:02:01,270
And I'll expand on that difference in the next unit.

36
00:02:01,470 --> 00:02:02,700
But let's keep moving.

37
00:02:03,030 --> 00:02:04,330
So jobs for basics.

38
00:02:04,350 --> 00:02:10,160
Then we talk about something called control flow which is how we add basic logic into our applications

39
00:02:10,170 --> 00:02:11,070
with Job scripts.

40
00:02:11,340 --> 00:02:16,560
And then something called functions javascript arrays and objects to different data structures.

41
00:02:16,920 --> 00:02:22,590
And then we move on to my favorite topic which is dominant emulation which is how we actually interact

42
00:02:22,590 --> 00:02:25,290
with each team around to assess using javascript.

43
00:02:25,290 --> 00:02:29,790
So some of you that might just be a bunch of random words you've never heard in your life or that you

44
00:02:29,790 --> 00:02:31,070
can't really make sense of.

45
00:02:31,290 --> 00:02:33,800
Basically it's how we start making things exciting.

46
00:02:33,840 --> 00:02:38,910
When I click on a page something happens we can start changing colors animating things moving things

47
00:02:38,910 --> 00:02:39,930
across the screen.

48
00:02:39,930 --> 00:02:41,870
It's very visual and fun.

49
00:02:42,000 --> 00:02:47,430
Then we have another unit on Dom events which is some other dumb manipulation that we can focus on.

50
00:02:47,700 --> 00:02:53,220
And then we have a color game project which is a substantial and pretty complex game that we make together

51
00:02:53,240 --> 00:02:53,390
.

52
00:02:53,520 --> 00:02:56,360
It's an entire unit it's eight or nine videos creating this game.

53
00:02:56,370 --> 00:02:58,610
So it's it's a pretty legit project.

54
00:02:58,770 --> 00:03:03,350
And then we move on to a really popular library called Jay Querrey and we focus on that forward three

55
00:03:03,360 --> 00:03:09,540
units introduction to Jay Querrey advanced Jay query and then we build a really nice looking responsive

56
00:03:09,540 --> 00:03:12,770
to do this project together so that Sokoto along as well.

57
00:03:12,820 --> 00:03:15,970
It's an entire unit seven or eight videos there too.

58
00:03:16,380 --> 00:03:22,410
And then we have a big switch so everything up until this point excluding the first course basics unit

59
00:03:22,680 --> 00:03:28,140
talks about front end web development which we talk about what that means and what the differences front

60
00:03:28,140 --> 00:03:29,370
and back and full stack.

61
00:03:29,370 --> 00:03:31,220
All that stuff in the next unit.

62
00:03:31,650 --> 00:03:34,670
But I'll just point out this is all front end.

63
00:03:34,950 --> 00:03:37,420
This is all back.

64
00:03:37,890 --> 00:03:41,140
So right here there is a big line where things shift.

65
00:03:41,250 --> 00:03:46,430
So we moved back and we start by talking about the very basics just like we did appear for front it

66
00:03:46,430 --> 00:03:46,790
.

67
00:03:46,800 --> 00:03:50,370
So what is the back and what are the different things that are involved.

68
00:03:50,460 --> 00:03:55,290
We talked we had some diagrams we draw some things out and I show you some examples of sites and how

69
00:03:55,290 --> 00:04:00,120
the back end is set up on some popular Web sites and then we talk about the command line.

70
00:04:00,150 --> 00:04:02,670
How do you navigate through the command line or the terminal.

71
00:04:02,670 --> 00:04:04,560
What are the different commands you enter.

72
00:04:04,560 --> 00:04:07,640
Definitely the most tacker looking thing that we cover.

73
00:04:07,740 --> 00:04:12,720
If you've ever seen like a stereotypical hacker scene in a movie they're usually typing things into

74
00:04:12,720 --> 00:04:13,520
the command line.

75
00:04:13,560 --> 00:04:17,030
So we will be talking about that and using that for the rest of the course.

76
00:04:17,190 --> 00:04:20,640
Then we talk about no G-S and this is an introduction to no.

77
00:04:20,670 --> 00:04:21,370
Yes.

78
00:04:21,510 --> 00:04:26,970
And then an introduction to express which is a node framework that we'll be using again and no that's

79
00:04:26,970 --> 00:04:31,710
just a bunch of words but it's a node framework will be using to create our Web applications.

80
00:04:31,890 --> 00:04:34,620
And we continue with those two things for the rest of the course.

81
00:04:34,830 --> 00:04:40,020
So then we talk about intermedia express basically some more advanced topics and then we get to something

82
00:04:40,020 --> 00:04:40,590
different.

83
00:04:40,830 --> 00:04:47,110
Yo camp basics and you'll notice there's a few different instances of Yotam the UPCAT basics you know

84
00:04:47,120 --> 00:04:53,090
camp data persistence you know camp comments you have camp adding art and you know camp cleaning up

85
00:04:53,330 --> 00:04:57,050
and you know camp definitely starts to sound weird after you repeat it enough times.

86
00:04:57,230 --> 00:05:02,660
But what it is is a complex application that we create together and it's one that we keep revisiting

87
00:05:02,660 --> 00:05:02,760
.

88
00:05:02,760 --> 00:05:08,810
So rather than one off small projects where it's really hard to get to something substantial with just

89
00:05:08,810 --> 00:05:14,990
one unit or just a few videos this is a big project that we continually revisit and don't worry we have

90
00:05:14,990 --> 00:05:16,730
plenty of shorter smaller projects.

91
00:05:16,730 --> 00:05:22,070
I'm a really strong believer that you should start by seeing a small instance of something working making

92
00:05:22,070 --> 00:05:26,890
a small project and then apply it to something big so that you get both end to that spectrum.

93
00:05:26,960 --> 00:05:31,660
You're not just thrown into the deep end immediately making a huge project but you're also not stuck

94
00:05:31,730 --> 00:05:34,130
making these tiny toys for your entire course.

95
00:05:34,160 --> 00:05:38,540
I want you to have something that you can be proud of and something that is really really complex by

96
00:05:38,540 --> 00:05:39,680
the end of the course.

97
00:05:39,740 --> 00:05:47,450
So yo camp is a yelp like clone for campground campsites and outdoor activities so you can create campgrounds

98
00:05:47,450 --> 00:05:52,070
have photos leave comments all sorts of fun things log in authentication.

99
00:05:52,070 --> 00:05:57,650
We talked about authorization and every time we learn a new feature we go added into UPCAT.

100
00:05:58,190 --> 00:06:00,020
So we start there you know camp basics.

101
00:06:00,020 --> 00:06:04,170
That's the first time we see the app and we set up the very basic structure.

102
00:06:04,370 --> 00:06:09,680
Then we talk about databases and we talk about Mongo DB which is the particular database that we'll

103
00:06:09,680 --> 00:06:17,330
use and we make a small project there and then we go back to camp and add in Mangu D-B so that we now

104
00:06:17,330 --> 00:06:23,120
have a database connected to Brokamp and then we talk about a really important topic called restful

105
00:06:23,120 --> 00:06:23,870
routing.

106
00:06:23,900 --> 00:06:29,600
This is an architecture it's a way of planning our applications a pattern that we follow called rest

107
00:06:29,960 --> 00:06:35,630
and we build a nice looking blog app using restful routes and a new CSSA javascript framework called

108
00:06:35,620 --> 00:06:42,470
semantic UI which is similar to bootstrap which we learn earlier in the course right here.

109
00:06:43,000 --> 00:06:46,240
And the idea there is just to expose you to another technology.

110
00:06:46,250 --> 00:06:47,920
Another popular framework.

111
00:06:48,050 --> 00:06:52,280
Hopefully you start to see some of the similarities and draw some comparisons there.

112
00:06:52,430 --> 00:06:56,400
Then we move on to one of the more important Unix Database associations.

113
00:06:56,420 --> 00:07:01,580
So how do we have multiple things in our database that are connected like users and comments or blog

114
00:07:01,610 --> 00:07:07,370
posts and comments and tags and votes and how are they all interrelated and connected to one another

115
00:07:07,380 --> 00:07:07,740
.

116
00:07:08,300 --> 00:07:11,620
And then we go back to camp and we add in comments.

117
00:07:11,660 --> 00:07:18,260
So we'll learn about database associations in a smaller project and then we added in the UPCAT then

118
00:07:18,250 --> 00:07:24,140
we move on to authentication user log in signing up signing out and locking in all of that.

119
00:07:24,200 --> 00:07:25,650
Using a tool called passport.

120
00:07:25,690 --> 00:07:28,700
Yes and we add that into our own application.

121
00:07:28,700 --> 00:07:34,220
We make an application with log in a smaller application and then just like before we go back to your

122
00:07:34,370 --> 00:07:40,630
camp and we add in authentication so that you now have to log in and log out to use the UPCAT or at

123
00:07:40,630 --> 00:07:42,390
least to use some features.

124
00:07:42,680 --> 00:07:47,480
And then we have another unit of our camp where at this point we've covered so much that we need to

125
00:07:47,480 --> 00:07:53,690
go back and clean some things up refactor which basically means move some code around rewrite some code

126
00:07:53,840 --> 00:07:58,660
so that it's cleaner shorter more modular so you'll see exactly what I mean in that unit.

127
00:07:58,750 --> 00:08:04,630
But it's devoted to reorganizing this large app because at that point it's gotten very large and then

128
00:08:04,630 --> 00:08:10,470
we talk about authorization which is another important topic which is basically user permissions.

129
00:08:10,630 --> 00:08:13,530
Different levels of things that users are allowed to do.

130
00:08:13,580 --> 00:08:16,580
So authentication is just letting people log in.

131
00:08:16,700 --> 00:08:24,110
Authorization is making sure that when I'm logged in I can only delete photos that belong to me or edit

132
00:08:24,110 --> 00:08:29,690
comments that I created I can't screw with somebody else's comments or someone else's posts unless I

133
00:08:29,690 --> 00:08:30,790
have permission to do that.

134
00:08:30,880 --> 00:08:32,180
So we talk about how that works.

135
00:08:32,300 --> 00:08:33,970
And we added into our camp.

136
00:08:34,190 --> 00:08:37,700
There's definitely a lot of stuff that we cover a lot of technologies.

137
00:08:37,750 --> 00:08:42,740
But the key point is that we go through this in a very logical and well-thought out order.

138
00:08:42,760 --> 00:08:47,980
I've taught all of these technologies multiple times over to tons different classes different students

139
00:08:47,990 --> 00:08:48,260
.

140
00:08:48,250 --> 00:08:53,330
It's much less intimidating that it might seem you don't have to be thinking ahead the entire time.

141
00:08:53,480 --> 00:08:58,690
But what I will do rather than just going straight ahead and just doing one unit at a time.

142
00:08:58,850 --> 00:09:04,430
We do have certain lectures that are optional these lessons that are looking ahead and looking back

143
00:09:04,420 --> 00:09:04,560
.

144
00:09:04,580 --> 00:09:09,790
So basically at certain points in the course I'll take a moment to say here's what we've covered here's

145
00:09:09,790 --> 00:09:14,160
where ever going so that you can start to have a mental map of of where we are.

146
00:09:14,180 --> 00:09:19,430
Often I found that students get lost sometimes and they don't have a big picture vision in their head

147
00:09:19,420 --> 00:09:20,200
of where they are.

148
00:09:20,270 --> 00:09:23,440
They just put their head down and focus on what's immediately in front of them.

149
00:09:23,720 --> 00:09:28,300
So that is important but it's also important to come up for air occasionally and talk about where we've

150
00:09:28,310 --> 00:09:32,260
come and how much further we have to go and basically draw that line.

151
00:09:32,300 --> 00:09:32,640
OK.

152
00:09:32,650 --> 00:09:36,550
So there's a lot of really exciting material lots of fun projects if we get to.

153
00:09:36,640 --> 00:09:40,430
Let's go ahead and get started by talking about an introduction to front and web development
