Create a MEAN App by Example - Full Stack Course
4.2 (52 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
531 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Create a MEAN App by Example - Full Stack Course to your Wishlist.

Add to Wishlist

Create a MEAN App by Example - Full Stack Course

Go from Design to Code and Build a Beautiful Web App
4.2 (52 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
531 students enrolled
Created by Gary Simon
Last updated 5/2017
English
Current price: $10 Original price: $50 Discount: 80% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 3.5 hours on-demand video
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Design a logo
  • Interactive UI Mockup Design in Adobe Experience Design
  • Starting an Angular 4+ Project with the Angular CLI
  • Setting up an Express Server
  • Setting up MongoDB
  • Creating a RESTful API
  • Performing CRUD operations from Angular
  • Working with Angular Services & Components
  • Page Transition Animations
  • SVG-Based Animations
  • Make your Angular App Responsive
  • Creating an Animated Loading Logo
  • ...plus much more
View Curriculum
Requirements
  • Understand HTML
  • Understand CSS
  • Basic understanding of Javascript
  • Basic understanding of Angular
Description

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:

  • MongoDB
  • Express
  • Angular (version 4)
  • Nodejs

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?

  • Logo Design
  • Interactive UI Mockup Design in Adobe Experience Design (XD)
  • Starting an Angular 4+ Project with the Angular CLI
  • Setting up an Express Server
  • Setting up MongoDB
  • Creating a RESTful API
  • Performing CRUD operations from Angular
  • Working with Angular Services & Components
  • Page Transition Animations
  • SVG-Based Animations
  • Make your Angular App Responsive
  • Creating an Animated Loading Logo
  • ...plus much more

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.

  • Adobe Illustrator for Logo Design
  • Adobe Experience Design (XD) for Prototyping
  • Code Editor (Visual Studio Code is Free)

Let's get started!

Who is the target audience?
  • Aspiring Designers
  • Aspiring Developers
  • Aspiring Full Stack Developers
Compare to Other Web App Development Courses
Curriculum For This Course
33 Lectures
03:33:06
+
Welcome
1 Lecture 04:02

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.

Download the Project Files
+
Identity Design
4 Lectures 25:03

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!

Preview 01:00

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.

Wordmark Design
08:46

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

Symbol Design
10:33

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.

Exporting Assets
04:44
+
UI Design
6 Lectures 37:32

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!

Preview 01:07

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.

Header Design
05:27

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.

Tutorials List UI
14:51

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.

Details UI
05:04

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.

Form UI
06:05

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.

Prototype Interaction
04:58
+
Development Setup
4 Lectures 20:59

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.

Preview 00:22

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.

Setup Angular & Express
06:52

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.

Setup a MongoDB Database
05:12

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.

Create a RESTful API
08:33
+
Home Page
6 Lectures 40:01

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.

Preview 00:24

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

Preview 04:18

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.

Nav Component
07:05

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.

Home Component
03:19

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.

Home Template
12:14

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.

Styling
12:41
+
Details Page
3 Lectures 26:53

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.

Details Component
08:54

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.

Details Template
05:28

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.

Styling
12:31
+
Posts Page
3 Lectures 24:41

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.

Post Component
10:33

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

Post Template
10:28

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.

Styling
03:40
+
Final Adjustments
5 Lectures 33:55

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

Page Transition Animations
09:34

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

Animating the SVG Arrow
04:57

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.

Production Build
02:58

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.

Bonus: Create a Custom Loading Animation
08:58

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.

Bonus: Make your App Responsive
07:28
About the Instructor
Gary Simon
4.4 Average rating
3,181 Reviews
48,931 Students
11 Courses
Professional Freelance Designer & Course Instructor

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:

  • Web Design
  • Graphic Design
  • Mobile / GUI Design
  • 3D
  • Motion Graphics

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:

  • HTML & CSS (Responsive)
  • JavaScript & jQuery
  • XML
  • PHP
  • MySQL

He is also an expert with the following software:

  • Adobe Photoshop
  • Adobe Illustrator
  • Adobe After Effects

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.