Full-Stack JavaScript Techdegree Portfolio Overview

[MUSIC] 0:00 Hi everyone. 0:09 I'm Laura, a JavaScript teacher here at Treehouse. 0:10 And I wanna show you the cool projects you'll build taking our job ready tech 0:14 degree programs. 0:17 We have many tech degree programs. 0:18 But in this video I'm gonna focus on the projects you'll 0:20 build taking our full stack JavaScript tech degree. 0:24 This is a tech degree I took when I was a student here at Treehouse. 0:27 I came out of the tech degree with a portfolio of professional quality projects 0:31 that demonstrated all the skills Treehouse has taught me. 0:35 Let me show you my personal portfolio that landed me this role. 0:38 My portfolio website showcases the great projects I've built. 0:42 The portfolio itself is actually one of the projects you'll build in the middle of 0:46 the tech degree. 0:50 Your portfolio will contain a modern landing page. 0:53 An about page, where you will have a chance to share contact info, 0:56 practice your elevator pitch, and a series of project pages to show off and 0:59 detail your projects from this tech degree. 1:03 To create this page, we'll teach you how to use Node.JS, 1:10 Express, and Pug templates. 1:15 If any of these technologies don't sound familiar to you, don't worry. 1:17 We will teach you all you need to know to build these projects. 1:22 All right, let's take a look at the very first project you'll tackle. 1:26 It's a fun one. 1:29 You get to create an app that displays random famous quotes each time a button 1:31 is clicked. 1:34 You get to select your own quotes from famous historical figures, artists, 1:36 scientists, celebrities, anything you like. 1:40 I'm a Game of Thrones fan. 1:42 So all my quotes are lines for my favorite character. 1:44 To complete this project, you'll learn some key JavaScript skills, 1:47 like variables, arrays, and functions. 1:51 In Project 2, you'll dive deeper into the power of JavaScript. 1:56 You'll take a static web page with a long list of students and 2:00 improve it by adding JavaScript to make the web page dynamic and responsive. 2:04 You'll write JavaScript and use a common web development 2:09 technique known as pagination to enhance the usability of a web page. 2:12 You'll use the DOM, a document object model, 2:17 to interact with the HTML so that now at the bottom of the page you'll have 2:20 pagination buttons to navigate through the list of students. 2:24 To take the project further, you can even add a feature to search all 2:30 the students and find just the ones that match. 2:34 In the third project, you'll get to tackle forms. 2:37 Forms are everywhere on the web. 2:41 Whether you order a product, or sign up for a service, you'll use a form. 2:43 JavaScript can help you make forms smarter and responsive to what your users do. 2:48 For this project you will use your skills to enhance a form so 2:54 that it's engaging, interactive, and easy to use. 2:57 You'll use what you learned about regular expressions to validate what users 3:01 enter in the form's input fields. 3:06 You'll manipulate the DOM to adjust the actual form based on what the user does. 3:08 For example, if the user selects an other job role, an input field will show up. 3:12 Once they select their T shirt design, 3:17 they're able to select their T shirt color. 3:19 And for activities, you wanna make sure to disable interfering activities. 3:22 For the payment info section, 3:27 you wanna adjust the form based on what the user picks as a payment method. 3:28 Project 4 is one of my favorite projects we build in the full stack 3:33 JavaScript type degree. 3:37 You'll use object oriented programming principles to build an interactive browser 3:39 based word guessing game. 3:43 The player tries to guess the phrase by selecting individual letters from 3:46 the onscreen keyboard. 3:50 If a player clicks a letter, and it's not there, 3:52 they will lose one of their heart points. 3:54 In this unit you really learn how to organize your JavaScript code in a way 3:58 that's easy to read, and uses professional best practices. 4:02 Project 5 asks you to take your JavaScript skills a step further, and 4:08 use Ajax to create an employee directory by communicating with a third party API. 4:13 You use the random user generator API that provides data 4:19 on random users like photo, name, email, and location. 4:24 Refreshing the page pings the API again, and brings in new data. 4:29 You'll also write some JavaScript to add modal dialog boxes to focus on 4:34 one individual and their information. 4:39 If you're up for the challenge, 4:43 you can even add navigation buttons to step through each listing. 4:45 Next, you'll use your newly developed knowledge of API's and 4:53 the very popular and in demand React library to create an image gallery app. 4:56 You'll create an application that dynamically retrieves images 5:03 from Flickers API that are tagged with different categories, 5:08 like cats, dogs, and computers. 5:13 The search bar allows the user to type in any term that they want. 5:16 Let's try flowers. 5:21 When we hit Send, a new request is sent to Flicker, 5:24 which sends back a new collection of images. 5:28 This app is built on a style of modern single page applications to keep it fast, 5:31 modular, and in sync with the current web development trends. 5:35 You'll dive into database work in the next project, and 5:40 create an app that can store, retrieve, and update data. 5:44 Databases are critical to a web application. 5:47 They store information about businesses, users, products, and 5:50 all the data needed to make a website run. 5:55 You'll use SQL to communicate with the database 5:58 in order to display a list of books stored in the library database. 6:01 You can also update, 6:05 Or even delete books in a database. 6:14 In the process, you'll work with routes, create middleware, and 6:18 spin up a web server. 6:23 This is a fun and challenging project. 6:24 The last two projects come together to create a complete full stack 6:28 JavaScript application with a server side API, and a React frontend. 6:33 First you'll use the popular Express web application framework and 6:38 SQL database to create a rest API that will provide a way to administer 6:43 a school data base containing information about users and courses. 6:48 Then you'll build a React frontend for the API you just built. 6:53 Your web application will display a list of courses and details on each course. 6:58 You will also include a layer of authentication so 7:04 that only logged in users can add new courses or delete and update a new course. 7:07 Let me show you how that works. 7:12 If I try to add a new course, it's gonna request that I sign in. 7:15 So let me sign in. 7:20 Once I sign in I'm able to create a course. 7:25 So you can see here a new course has popped up. 7:34 You can see when I'm the owner of the course we have three buttons, 7:37 an update button, a delete course button, and a return to list. 7:41 You can see that these buttons are not visible on courses that I'm not 7:45 an owner of. 7:49 I'm gonna delete this course. 7:53 And there you go. 7:56 You just built your first full stack JavaScript application. 7:57 I know these projects could look intimidating at first. 8:02 But don't worry, here at Treehouse we'll teach you all you need to know to build 8:05 everything you've just seen. 8:09 We also have an amazing Slack community of students and 8:11 moderators to help and empower you along the way. 8:16 You'll come out of the full stack JavaScript tech degree job ready with your 8:20 own personal portfolio of all of these amazing projects that you can show off to 8:24 employers. 8:29 Start your free trial today at teamtreehouse.com. 8:31 Can't wait to see you there! 8:35 Happy coding. 8:36 [BLANK AUDIO] 8:38