Designers, coders, full stack dev's, get in here!
This course has something for everyone. You're going to learn how to build a beautiful web app using the MEAN stack.
This app is based on:
This, of course, is referred to as the MEAN stack. The MEAN stack is one of the most popular stacks to develop, so I'm showing you how to build an app called CodePost from scratch.
What will you learn?
This course is absolutely packed with a tremendous amount of useful information that you will most certainly use on other projects.
What software do I need?
This course is structured so that you can jump in and follow along at any point. If you're not interested in design, you won't need Illustrator or Adobe XD.
Let's get started!
To use the project files, download this zip and inside, you will find a series of M2, M3, M4 etc.. files. Each of these aligns with the sections here on Udemy. Within, you will find an "Exercise Files" folder, which contains a beginning and end state of most of the lessons.
Some lessons contain the actual development project. To install, simply extract these files and folders to a project folder, and then in the console/command line (in the same project folder), run npm install. This will install all of the dependencies needed.
This will require having node.js with npm installed.
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.
Gary Simon is a professional freelance graphics and web designer with well over a decade of experience. Having served over a thousand clients, Gary understands many facets of the design industry.
He has also been a course instructor for several of the top online education websites, teaching a wide range of topics including:
Gary began designing websites in 2000, and just a few years later started focusing on identity design. From that point on, Gary grew a large clientele that allowed him to fully develop skills that extend beyond design alone.
The following is a list of web technologies in which Gary is proficient:
He is also an expert with the following software:
Gary began teaching his skills to others after releasing a single logo design tutorial, which has since garnered over a million views. In 7 years, Gary has released over 200 video tutorials and 20+ video courses. On his Youtube channel alone, his videos receive a half million views monthly. He enjoys connecting with students and helping them develop their skills on an on-going and frequent basis.