1
00:00:00,000 --> 00:00:09,875
[MUSIC]

2
00:00:09,875 --> 00:00:10,751
Hi everyone.

3
00:00:10,751 --> 00:00:14,150
I'm Laura,
a JavaScript teacher here at Treehouse.

4
00:00:14,150 --> 00:00:17,993
And I wanna show you the cool projects
you'll build taking our job ready tech

5
00:00:17,993 --> 00:00:18,965
degree programs.

6
00:00:18,965 --> 00:00:20,967
We have many tech degree programs.

7
00:00:20,967 --> 00:00:24,348
But in this video I'm gonna
focus on the projects you'll

8
00:00:24,348 --> 00:00:27,526
build taking our full stack
JavaScript tech degree.

9
00:00:27,526 --> 00:00:31,350
This is a tech degree I took when
I was a student here at Treehouse.

10
00:00:31,350 --> 00:00:35,679
I came out of the tech degree with a
portfolio of professional quality projects

11
00:00:35,679 --> 00:00:38,970
that demonstrated all the skills
Treehouse has taught me.

12
00:00:38,970 --> 00:00:42,921
Let me show you my personal
portfolio that landed me this role.

13
00:00:42,921 --> 00:00:46,160
My portfolio website showcases
the great projects I've built.

14
00:00:46,160 --> 00:00:50,543
The portfolio itself is actually one of
the projects you'll build in the middle of

15
00:00:50,543 --> 00:00:51,507
the tech degree.

16
00:00:53,290 --> 00:00:56,179
Your portfolio will contain
a modern landing page.

17
00:00:56,179 --> 00:00:59,802
An about page, where you will have
a chance to share contact info,

18
00:00:59,802 --> 00:01:03,878
practice your elevator pitch, and
a series of project pages to show off and

19
00:01:03,878 --> 00:01:06,354
detail your projects
from this tech degree.

20
00:01:10,860 --> 00:01:15,510
To create this page,
we'll teach you how to use Node.JS,

21
00:01:15,510 --> 00:01:17,937
Express, and Pug templates.

22
00:01:17,937 --> 00:01:22,350
If any of these technologies don't
sound familiar to you, don't worry.

23
00:01:22,350 --> 00:01:26,096
We will teach you all you need
to know to build these projects.

24
00:01:26,096 --> 00:01:29,800
All right, let's take a look at
the very first project you'll tackle.

25
00:01:29,800 --> 00:01:31,119
It's a fun one.

26
00:01:31,119 --> 00:01:34,767
You get to create an app that displays
random famous quotes each time a button

27
00:01:34,767 --> 00:01:36,140
is clicked.

28
00:01:36,140 --> 00:01:40,070
You get to select your own quotes from
famous historical figures, artists,

29
00:01:40,070 --> 00:01:42,621
scientists, celebrities,
anything you like.

30
00:01:42,621 --> 00:01:44,010
I'm a Game of Thrones fan.

31
00:01:44,010 --> 00:01:47,342
So all my quotes are lines for
my favorite character.

32
00:01:47,342 --> 00:01:51,820
To complete this project,
you'll learn some key JavaScript skills,

33
00:01:51,820 --> 00:01:54,590
like variables, arrays, and functions.

34
00:01:56,020 --> 00:02:00,031
In Project 2, you'll dive deeper
into the power of JavaScript.

35
00:02:00,031 --> 00:02:04,134
You'll take a static web page
with a long list of students and

36
00:02:04,134 --> 00:02:09,376
improve it by adding JavaScript to make
the web page dynamic and responsive.

37
00:02:09,376 --> 00:02:12,780
You'll write JavaScript and
use a common web development

38
00:02:12,780 --> 00:02:17,490
technique known as pagination to
enhance the usability of a web page.

39
00:02:17,490 --> 00:02:20,254
You'll use the DOM,
a document object model,

40
00:02:20,254 --> 00:02:24,466
to interact with the HTML so that now
at the bottom of the page you'll have

41
00:02:24,466 --> 00:02:28,153
pagination buttons to navigate
through the list of students.

42
00:02:30,710 --> 00:02:34,913
To take the project further,
you can even add a feature to search all

43
00:02:34,913 --> 00:02:37,876
the students and
find just the ones that match.

44
00:02:37,876 --> 00:02:41,280
In the third project,
you'll get to tackle forms.

45
00:02:41,280 --> 00:02:43,307
Forms are everywhere on the web.

46
00:02:43,307 --> 00:02:48,173
Whether you order a product, or
sign up for a service, you'll use a form.

47
00:02:48,173 --> 00:02:54,085
JavaScript can help you make forms smarter
and responsive to what your users do.

48
00:02:54,085 --> 00:02:57,459
For this project you will use
your skills to enhance a form so

49
00:02:57,459 --> 00:03:00,580
that it's engaging,
interactive, and easy to use.

50
00:03:01,780 --> 00:03:06,256
You'll use what you learned about regular
expressions to validate what users

51
00:03:06,256 --> 00:03:08,306
enter in the form's input fields.

52
00:03:08,306 --> 00:03:12,810
You'll manipulate the DOM to adjust the
actual form based on what the user does.

53
00:03:12,810 --> 00:03:17,965
For example, if the user selects an other
job role, an input field will show up.

54
00:03:17,965 --> 00:03:19,673
Once they select their T shirt design,

55
00:03:19,673 --> 00:03:21,650
they're able to select
their T shirt color.

56
00:03:22,850 --> 00:03:27,058
And for activities, you wanna make sure
to disable interfering activities.

57
00:03:27,058 --> 00:03:28,545
For the payment info section,

58
00:03:28,545 --> 00:03:32,100
you wanna adjust the form based on what
the user picks as a payment method.

59
00:03:33,440 --> 00:03:37,519
Project 4 is one of my favorite
projects we build in the full stack

60
00:03:37,519 --> 00:03:39,160
JavaScript type degree.

61
00:03:39,160 --> 00:03:43,929
You'll use object oriented programming
principles to build an interactive browser

62
00:03:43,929 --> 00:03:46,350
based word guessing game.

63
00:03:46,350 --> 00:03:50,958
The player tries to guess the phrase
by selecting individual letters from

64
00:03:50,958 --> 00:03:52,526
the onscreen keyboard.

65
00:03:52,526 --> 00:03:54,974
If a player clicks a letter,
and it's not there,

66
00:03:54,974 --> 00:03:57,030
they will lose one of their heart points.

67
00:03:58,330 --> 00:04:02,483
In this unit you really learn how to
organize your JavaScript code in a way

68
00:04:02,483 --> 00:04:06,110
that's easy to read, and
uses professional best practices.

69
00:04:08,420 --> 00:04:13,321
Project 5 asks you to take your
JavaScript skills a step further, and

70
00:04:13,321 --> 00:04:19,067
use Ajax to create an employee directory
by communicating with a third party API.

71
00:04:19,067 --> 00:04:24,260
You use the random user
generator API that provides data

72
00:04:24,260 --> 00:04:29,800
on random users like photo,
name, email, and location.

73
00:04:29,800 --> 00:04:34,795
Refreshing the page pings the API again,
and brings in new data.

74
00:04:34,795 --> 00:04:39,442
You'll also write some JavaScript to
add modal dialog boxes to focus on

75
00:04:39,442 --> 00:04:42,080
one individual and their information.

76
00:04:43,750 --> 00:04:45,617
If you're up for the challenge,

77
00:04:45,617 --> 00:04:49,365
you can even add navigation buttons
to step through each listing.

78
00:04:53,070 --> 00:04:56,996
Next, you'll use your newly
developed knowledge of API's and

79
00:04:56,996 --> 00:05:01,659
the very popular and in demand React
library to create an image gallery app.

80
00:05:03,700 --> 00:05:08,684
You'll create an application that
dynamically retrieves images

81
00:05:08,684 --> 00:05:13,401
from Flickers API that are tagged
with different categories,

82
00:05:13,401 --> 00:05:16,072
like cats, dogs, and computers.

83
00:05:16,072 --> 00:05:21,020
The search bar allows the user to
type in any term that they want.

84
00:05:21,020 --> 00:05:22,544
Let's try flowers.

85
00:05:24,650 --> 00:05:28,032
When we hit Send,
a new request is sent to Flicker,

86
00:05:28,032 --> 00:05:31,029
which sends back a new
collection of images.

87
00:05:31,029 --> 00:05:35,862
This app is built on a style of modern
single page applications to keep it fast,

88
00:05:35,862 --> 00:05:40,770
modular, and in sync with
the current web development trends.

89
00:05:40,770 --> 00:05:44,092
You'll dive into database
work in the next project, and

90
00:05:44,092 --> 00:05:47,562
create an app that can store,
retrieve, and update data.

91
00:05:47,562 --> 00:05:50,740
Databases are critical
to a web application.

92
00:05:50,740 --> 00:05:55,434
They store information about businesses,
users, products, and

93
00:05:55,434 --> 00:05:58,328
all the data needed to make a website run.

94
00:05:58,328 --> 00:06:01,540
You'll use SQL to communicate
with the database

95
00:06:01,540 --> 00:06:05,938
in order to display a list of books
stored in the library database.

96
00:06:05,938 --> 00:06:07,926
You can also update,

97
00:06:14,230 --> 00:06:16,681
Or even delete books in a database.

98
00:06:18,540 --> 00:06:23,209
In the process, you'll work with routes,
create middleware, and

99
00:06:23,209 --> 00:06:24,665
spin up a web server.

100
00:06:24,665 --> 00:06:27,080
This is a fun and challenging project.

101
00:06:28,480 --> 00:06:33,520
The last two projects come together
to create a complete full stack

102
00:06:33,520 --> 00:06:38,924
JavaScript application with a server
side API, and a React frontend.

103
00:06:38,924 --> 00:06:43,716
First you'll use the popular Express
web application framework and

104
00:06:43,716 --> 00:06:48,506
SQL database to create a rest API
that will provide a way to administer

105
00:06:48,506 --> 00:06:53,315
a school data base containing
information about users and courses.

106
00:06:53,315 --> 00:06:58,751
Then you'll build a React frontend for
the API you just built.

107
00:06:58,751 --> 00:07:04,320
Your web application will display a list
of courses and details on each course.

108
00:07:04,320 --> 00:07:07,629
You will also include
a layer of authentication so

109
00:07:07,629 --> 00:07:12,851
that only logged in users can add new
courses or delete and update a new course.

110
00:07:12,851 --> 00:07:15,801
Let me show you how that works.

111
00:07:15,801 --> 00:07:20,000
If I try to add a new course,
it's gonna request that I sign in.

112
00:07:20,000 --> 00:07:21,407
So let me sign in.

113
00:07:25,570 --> 00:07:28,395
Once I sign in I'm able
to create a course.

114
00:07:34,360 --> 00:07:37,441
So you can see here a new
course has popped up.

115
00:07:37,441 --> 00:07:41,081
You can see when I'm the owner of
the course we have three buttons,

116
00:07:41,081 --> 00:07:45,650
an update button, a delete course button,
and a return to list.

117
00:07:45,650 --> 00:07:49,560
You can see that these buttons are not
visible on courses that I'm not

118
00:07:49,560 --> 00:07:50,312
an owner of.

119
00:07:53,380 --> 00:07:55,086
I'm gonna delete this course.

120
00:07:56,810 --> 00:07:57,556
And there you go.

121
00:07:57,556 --> 00:08:00,890
You just built your first full
stack JavaScript application.

122
00:08:02,360 --> 00:08:05,230
I know these projects could
look intimidating at first.

123
00:08:05,230 --> 00:08:09,953
But don't worry, here at Treehouse we'll
teach you all you need to know to build

124
00:08:09,953 --> 00:08:11,838
everything you've just seen.

125
00:08:11,838 --> 00:08:16,198
We also have an amazing Slack
community of students and

126
00:08:16,198 --> 00:08:20,197
moderators to help and
empower you along the way.

127
00:08:20,197 --> 00:08:24,869
You'll come out of the full stack
JavaScript tech degree job ready with your

128
00:08:24,869 --> 00:08:29,687
own personal portfolio of all of these
amazing projects that you can show off to

129
00:08:29,687 --> 00:08:31,270
employers.

130
00:08:31,270 --> 00:08:35,239
Start your free trial today
at teamtreehouse.com.

131
00:08:35,239 --> 00:08:36,637
Can't wait to see you there!

132
00:08:36,637 --> 00:08:38,128
Happy coding.

133
00:08:38,128 --> 00:08:43,356
[BLANK AUDIO]