In this video, I will provide you with a quick explanation about what identity design is, and how it relates to every project you create. In short, identity design is more than just a logo design. So, watch to learn more!

Let's learn how to design a wordmark, which is the type portion of a logo. We will identify some methods of finding appropriate fonts and then step into Adobe Illustrator to finalize our wordmark.

Now that our wordmark is complete, let's focus on creating abstract, yet relevant symbolism for our CodePost project.

In this video, we're going to export the necessary graphic assets in SVG format. Such as the logo in SVG and the back button.

In this video, I will provide you with a quick explanation about the importance of prototyping and creating mockups for your app projects. Never go straight to HTML and CSS without first creating a mockup/prototype!

In this video, we will design the header portion of our UI prototype, using Adobe Experience Design (XD). This will include placing the logo and a call-to-action button in the header.

In this video, we will focus solely on the containers for each tutorial. This will include designing the title, an SVG external-link graphic, a description and a "More info" call-to-action button.

In this video, we are going to duplicate the artboard and create a details page, which will feature specific information about a given tutorial once clicked.

When a user clicks on the "Post Tutorial" button in the header, they will be taken to a form page. This form page will allow them to submit a specific tutorial. So, in this video, we will design the layout for this page in Adobe XD.

In Adobe XD, we're going to take our 3 artboards and create an interactive prototype using the prototyping tab. This will allow us to simulate how the app will behave based on user interaction.

In this quick section introduction video, I will describe what we will be doing. This includes setting up Angular, Express, MongoDB and a basic API file.

In this lesson, we're going to use the Angular CLI to install a new Angular project. Then, we're going to use npm to install other dependencies needed for our express server. Finally, we will create a server.js file that will serve as the basis for our express server.

In this lesson, we will use a free account at mLab.com to setup a new MongoDB database. This is a database as a service, which makes setting up a MongoDB database very quick and easy.

We need a way to communicate and issue commands to our MongoDB. We do this by creating an API, which is what we will do in this video.

This is a quick video that will let you know what we will be focusing on in this section, as well as the other sections going forward. This will include working almost exclusively in Angular to develop the rest of our web app.

In this video, we will use the Angular CLI to generate a service which will be responsible for communicating with our API.

In this video, we will first integrate the front-end framework Foundation for structuring the layout of our app. Then, we will write the HTML necessary for the nav component, which includes our logo and a button for submitting tutorials.

In this video, we will first generate a new component. We will also create a class for our Post fields. Then, we will work briefly in the Angular routing file, and finally, focus on coding the home component to fetch tutorials from the API.

In this video, we will focus on writing the necessary HTML for our home component. This HTML will primarily be based on the tutorials listing and their associated containers.

In this video, we will focus on writing CSS (SCSS) for the overall layout and the home component. So, we will focus on writing CSS in a global styles.css file, our nav CSS and the home CSS.

In this video, we're going to generate a details component, add a new method to our data.service.ts file, and then work within the details component to fetch the tutorial information.

In this video, we will focus on writing the HTML that's associated with displaying specific tutorials. We will also access the router parameters to fetch the specific tutorial ID.

In this video, we're going to write the SCSS for our details layout. This will also involve using Adobe Photoshop to create a blurred background image. If you don't have Photoshop, I have provided the blurred image in the project files.

In this video, we're going to generate a Post component for the tutorial submission form. Then, we will route it up in the routing file, create a method in the data service, and work in the post component.

In this video, we will structure the post layout with HTML and also work in form submission and validation. 

In this video, we only have a little bit of CSS work to complete -- which will finish off styling the submission form to look more accurate based on our mockup in Adobe XD.

Working in Angular page transition animations is exciting, as it makes an app fun and exciting to use when visiting different components.

In this video, we're going to use inline SVG along with CSS to animate our SVG arrow icon based on a hover event.

Learn how to use the Angular CLI to create a production build of your app. Also, I will demonstrate the tremendous file-size reduction based on using the standard "ng build" command vs the "ng build --prod" command.

In this video, we're going to take our logo symbol and make it animate based on a loop. This graphic will serve as the loading symbol that shows up while the app is loading in the browser or on a mobile device.

In this day and age, your app must be responsive! So, I will show you how to do just, using media queries; which will make the layout of the app adjust according to the viewport width.