Learn Angular From Scratch – Complete Guide Design to Deploy

Learn Angular From Scratch - Complete Guide Design to Deploy

Learn Angular From Scratch – Complete Guide Design to Deploy

Master Angular Frontend Framework and Learn to build a Complete Modern World App From Scratch using Bootstrap, Firestore

Language: english

Note: 4.6/5 (40 notes) 877 students

Instructor(s): Hashmath Rz

Last update: 2022-04-05

What you’ll learn

  • Establish yourself as a skilled professional developer
  • Benefits of Design & Prototyping, and you will learn how to design a complete web app using Figma Design Tool
  • Develop modern world web applications with Angular Frontend framework
  • Master fundamental concepts behind structuring Angular applications
  • Integrate Bootstrap CSS Framework
  • Troubleshoot common Angular errors
  • Write clean and elegant code like a professional developer
  • Master the best practices

 

Requirements

  • Basic level knowledge of HTML, CSS, JavaScript is needed.
  • You don’t need familiarity with TypeScript or any previous versions of Angular. You’re going to learn both TypeScript and Angular from scratch in this course.

 

Learn Angular From Scratch - Complete Guide Design to Deploy

Easter egg bunny plush DIY (Etsy)

Description

Angular App From Scratch – Complete Guide Design to Deploy

A few years back I’m also a student or learner like you finding the best resources to master Angular, I struggled a lot to find a tutorial that cover design to deploy all in one, and I know you also struggling with the same problem, so I decided to come up with a brand new course that covers All the Essentials part that you want to build a full modern Angular App from Design to Deploy.


so in this course will build a complete Angular Blog Application, using Angular framework, Firestore database, and Bootstrap CSS Framework, this blog apps comes with two main parts the front end view and the backend dashboard,

so we will develop this Full Fledge Real-world Modern Lookin Angular web app with 3 major steps,


Design  Develop and Deploy


Design section,

In this section we will learn how to design a Website idea, into a graphical design using a design tool called Figma, using this tool we will design all the sections and pages of our angular blog site, once it done we will learn to make these graphical designs into a web prototype so then we can get the overall idea off what we are building.


Development stage,

In this Section will learn a to z all the core concepts, features technologies used in Angular from basic to advance, with this will learn,

Components, services, directives, pipes, Angular Forms, routers, Authentication, and so on,

Once we learned all the fundamentals of Angular, will start to build our Final Blog App from scratch, for this will take the advantage of bootstrap CSS framework, so will learn all the fundamentals of Bootstrap as well,


As a backend solution for our Angular app will use Google’s Firebase, as  the database will use the Cloud Firestore, as the Cloud Storage will use the Firebase Storage, For Authentications system Will Use the Firebase Authentication, and for the Last Deployment, will use the Firebase Host as our Hosting Space, will learn all about these firebase features from scratch one by one,


Actually, in this course, you will not only learn about Angular, but you will also get an overall idea of how to build a real-world modern App From scratch.


This course is well organized from Basic to advanced topics so anyone can follow up on this course even if you are Beginner.


by the end of this course, if you followed my instructions exactly, you will gain the knowledge and Confidence to build any kind of real-world app on your own from scratch.


and finally, if your get stuck with anything, or if you have any questions, I will be always there for you 🙂


Pay once, benefit a lifetime!

Don’t lose any time, gain an edge and start developing now!


 

Learn Angular From Scratch - Complete Guide Design to DeployLearn Angular From Scratch - Complete Guide Design to Deploy

Who this course is for

  • Developers who want to upgrade their skills and get better job opportunities
  • Front-end developers who want to stay up-to-date with the latest technology
  • Back-end developers who want to learn front-end development and become full-stack developers
  • Hobbyist developers who are passionate about working with new frameworks

 

Course content

  • Welcome to the Course
    • Course Promo
    • Introduction
    • App Demo (Frontend View)
    • App Demo (Backend Dashboard)
    • Course Structure (Fundamentals)
    • Course Structure (Design & Develop)
    • How to get most of the course
    • Course Updates
  • Development Environment Setup
    • Section Intro (Environment Setup)
    • 2. Code Editor Setup (Vscode)
    • First Look Vscode
    • Vscode Theme Setup
    • Vscode Font Setup
    • Usuful Vscode plugins
    • Installing Nodejs and NPM
    • Section End (Environment Setup)
  • Design and Prototyping.
    • Section Intro(Design and Prototype)
    • What is Figma
    • Advantages of designing & prototyping
    • Get Start With Figma
    • Figma Frames
    • Figma Shape Tools
    • Figma Text Tool
    • Figma Colors
    • Figma Constraints
    • Figma Components
    • Making Figma Parent Components
    • Editing Figma Components
    • Design Header Logo
    • Design Cateogory Navbar
    • Design Footer Area
    • Design the Featured Post Area
    • Design the Post Cards
    • Design the Latest Post Area
    • Task !!! (Design the subscription Form)
    • Solution (Design the Subscription Form)
    • Usage of Figma Components
    • Design the Single Category Page
    • Design the Single Post Page
    • Design the Comment Form
    • Design the Comment Preview Area
    • Design the About us Page
    • Design the Terms & Condition Page
    • Task !!!! (Design the Contact us Page)
    • Solution (Design the Contact us Page)
    • Get Start with Prototype in Figma
    • Home Page Prototype Connections.
    • Single Category Page Prototype Connection.
    • Prototype Options in FIgma
    • Prototype All other Pages Part I
    • Prototype All Other Pages Part II
    • End (Design and Prototype Section.)
  • Bootstrap Fundamentals
    • Section Intro (Bootstrap Fundamentals)
    • Bootstrap V5 update
    • What is Bootstrap
    • Bootstrap Import Part I
    • Bootstrap Import Part II
    • Bootstrap Import Part III
    • Bootstrap Container
    • Bootstrap Container-Fluid
    • Bootstrap Grid System
    • Bootstrap Columns
    • Bootstrap Responsive Columns
    • Bootstrap Typography
    • Bootstrap Contextual Colors
    • Bootstrap Tables
    • Bootstrap Images
    • Bootstrap Buttons
    • Bootstrap Spinner
    • Bootstrap Cards
    • Bootstrap Inputs
    • Bootstrap Utility Classes.
    • Section End
  • Get Start with Angular & Angular CLI
    • Section Intro (Angular & Angular CLI)
    • What is Angular
    • What is SPA (Single Page Application)
    • What is Angular Cli
    • Angular CLI setup
    • First Angular App
    • Angular File Structure Part I
    • Angular File Structure Part II
    • Angular File Structure Part III
    • End (Angular & Angular CLI)
  • Angular Components
    • Section Intro (Angular Component)
    • What is Angular Component
    • Create an Angular Component
    • How Loads Components Inside the Browser
    • Template & Styles Component Properties
    • Better Approach for Template & Styles
    • Generate Angular Component using Angular CLI
    • NgOnInit Lifecycle Hook
    • Data Binding
    • Sharing Data Between Components
    • Parent Child Relationship in Components
    • @Input Decorator
    • Task !!!
    • Solution !!!
    • @ViewChild Decorator
    • @Output Decorator & Event Emitter
    • Section End (Angular Components)
  • Data Binding & Events Handling
    • Section Intro (Data Binding & Events Handling)
    • String Interpolation
    • Property Binding
    • Class Binding
    • Style Binding
    • Event Binding
    • Event Filtering
    • Template Variable
    • Two Way Data Binding
    • Two Way VS One Way Data Binding
    • Task !!!
    • Solution I
    • Solution II
    • End (Data Binding & Event Handling)
  • Angular Directives
    • Section Intro (Directives)
    • What is Directive
    • ngFor Directive
    • Fetching Object Array Using NgFor
    • Angular Change Detection
    • ngFor Directive Index
    • ngIF Directive
    • ngTemplate
    • ngSwitchCase Directive
    • ngStyle Directive
    • ngClass Directive
    • Structural Directive Vs Attribute Directive
    • Directive Task !!!
    • Solution I
    • Solution II
    • Section End (Directives)
  • Angular Pipes
    • Section Intro (Pipes)
    • What is angular Pipe & Types of pipes
    • Uppercase lowercase pipe
    • Number pipe
    • Currency Pipe
    • Date pipe
    • JSON Pipe
    • Percent Pipe
    • Slice Pipe
    • Custom Pipe I
    • Custom Pipe II
    • Create Custom Pipe using Angular CLI
    • Custom Pipe With Arguments
  • Angular Service
    • Section Intro (Angular Service)
    • What is Angular Service
    • Create Angular Service (Manual)
    • Dependency Injection
    • Dependency Injection Providers and Injectable Decorator
    • Generate Angular Service using Angular CLI
    • Usage of Angular Services
    • Angular Interface
    • End (Angular Service)
  • Angular Forms I (Template Driven Form)
    • Section Intro (Template Driven Form)
    • Angular Forms Types
    • Creating a Bootstrap Form
    • NgForm Directive
    • NgForm Explained & FormGroup Class
    • NgModel & FormControl Class
    • Form Validation
    • Styling Invalid Inputs
    • Form Validation Types
    • Validating Email Input Field
    • Validating Text Area
    • Quick Fix Required not found Error
    • Styling All invalid input fields Validation Error
    • Form Submission
    • Disabling the Submit button when form is invalid
    • Section End (Template Driven Form)
  • Angular Forms II (Reactive Forms)
    • Section Intro (Angular Forms II (Reactive Forms)
    • Reactive Form Setup
    • Creating the Reactive Form Controls Programmatically
    • Reactive Form Basic Validation
    • Reactive Form Adding Multiple Validations
    • Complete all Validations
    • Reactive Form Submit and Getting Form Values
    • Nested Form Groups
    • Reactive Form Array
    • Reactive Form Builder
    • Adding Custom Validations I
    • Adding Custom Validations II
    • Section End (Angular Forms II (Reactive Forms))
  • Angular Routing & Navigation
    • Section Intro (Angular Routing & Navigation)
    • What is Angular Routing & Navigation
    • How to implement Angular Routing & Navigation
    • Create New Angular App
    • Configure Angular Router
    • Angular Router Outlet
    • Angular Router Link
    • Angular Base URL
    • Angular Base Router
    • Router Vs Href
    • Angular RouterLinkActive
    • Router Parameter Variables
    • Get Router Parameters
    • What is Observable
    • Observable Subscribe
    • Observable Next
    • Observable Vs Functions
    • Synchronous Vs Asynchronous Programming
    • Observable Subscribe & Unsubscribe
    • Multiple Router Parameters
    • Query Parameters
    • Separate Module for Angular Routing
    • Navigate Programmatically
    • Wild Card Routers
    • Section End (Angular Routing & Navigation)
  • Design The Blog Front End I – Preparing
    • Section Intro (Design The Blog Front End I – Preparing)
    • Blog App Components planning
    • Creating New Angular App
    • Generate Components I
    • Generate Components II
    • Static routing and navigation
    • Install and link Bootstrap
    • Common Theme Global CSS Variables
    • Declare CSS Variables
    • Define Global Styles
    • Section End (Design The Blog Front End I – Preparing)
  • Design The Front End View II – Main Common Components
    • Section Intro (Design The Front End View II – Main Common Components)
    • Design Header Component
    • Design Category Navbar Component
    • Design Footer Component
    • Design Postcard Component I
    • Design postcard Component II
    • Design Subscription Card Component I
    • Design Subscription Card Component II
    • Subscription Card Input Design Error Fix
    • Section End (Design The Front End View II – Main Common Components)
  • Design The Front End View III – All Pages Design
    • Section Intro (Design The Front End View III – All Pages Design)
    • Prepare the App Component
    • Design Home Page I – Featured Area
    • Design Home Page II – Latest Post Area
    • Design Single Category Page
    • Design Single Post Page
    • Design Comments Form Components
    • Design Comment Form List Component
    • Design About Us Page
    • Design Terms & Conditions Page
    • Section End (Design The Front End View III – All Pages Design)
  • Get Start With Admin Area & Firebase Firestore
    • Section Intro
    • Design the backend dashboard as a separate Angular App,
    • Backend Design Plan and components
    • Connect Bootstrap
    • Importing Global Styles
    • Design the Header Component
    • Design the Footer Component
    • Design the Backend Dashboard component
    • What is Firebase?
    • What is Cloud Firestore ?
    • Connect Firestore with Angular App I
    • Connect Firestore with Angular App II
    • Section End
  • Admin area – CRUD Operation I (Category CRUD)
    • Section intro (Admin area – CRUD Operation I (Category CRUD))
    • Setup The Category Component
    • Design The Add New Category Form
    • Make The Form as a Template-Driven Form
    • Task !!!
    • Solution !!!
    • Save Categories in Cloud Firestore PT I
    • Save Categories in Cloud Firestore PT II
    • Firestore Features Explained
    • Programmatically Save Sub Collection in Cloud Firestore
    • Simplifying the Firestore Sub Collections Level Query
    • Form Validation
    • Setup a Separate Service
    • Setup Interface for category object
    • Setup Toastr Message
    • Read and Retrieve categories from Cloud Firestore I
    • Read and Retrieve categories from Cloud Firestore II
    • Update Categories to cloud Firestore I
    • Update Categories to cloud Firestore II
    • Delete Categories
    • Update and Delete Query Simplifying With the Query Path
    • Section End (Admin area – CRUD Operation I (Category CRUD))
  • Admin area – CRUD Operation II (POST CRUD)
    • Section Intro (20. Admin area – CRUD Operation II (POST CRUD))
    • Post Component Planning
    • All Posts Component Design
    • Add new Post form Design
    • What is Permalink?
    • Automate the Permalink
    • Setup Post Image Preview
    • Load Post Categories
    • Convert Text Area Input to wsywig Editor
    • Turn HTML Form to Angular Reactive Form
    • Form Validation I
    • Form Validation II
    • Submit Form and Get Values
    • Create Post Interface
    • Getting Category ID and Category Name
    • Upload the Image to Firebase Cloud Storage I
    • Upload the Image to Firebase Cloud Storage II
    • Upload the Image to Firebase Cloud Storage III
    • Insert Post To Cloud Firestore I
    • Insert Post To Cloud Firestore II
    • Load The Posts I
    • Load The Post II
    • Prepare the New Post Form for Edit Posts
    • Clearing Some Questions
    • Load One Document Firestore Query
    • SanpshotChanges Vs ValueChanges
    • Load the Post Document for Edit
    • Update Post
    • Form Builder Form Group Initialization Error (Fix)
    • Save post Form Builder Error
    • Delete Post I
    • Delete Post II
    • Making a Post Featured and None Featured I
    • Making a Post Featured and None Featured II
    • Section End (20. Admin area – CRUD Operation II (POST CRUD))
  • Authentication & Authorization
    • Sections Intro(Authentication & Authorization)
    • Generate Login Component & Setup Routers
    • Design The Login Component
    • Make The Login Form Template-Driven
    • Add Form Validations
    • Capture The Forms Values
    • What is Firebase Authentication & How to Use That
    • Angular FIreauth Module Setup
    • Write Login Query I
    • Write Login Query II
    • Getting Loggedin User Data I
    • Getting Loggedin User Data II
    • Logout Query
    • Remove The Email and Logout Button From Login View I
    • Remove The Email and Logout Button From Login View II
    • BehaviorSubject Explained
    • What is Router Guard
    • Implement Router Guard I
    • Implement Router Guard II
    • Add Router Guard to All Other Routers
    • Section End (Authentication & Authorization)
  • Make Front End blog view Dynamic
    • Section Intro (Make Fornt End blog view Dynamic)
    • Connect the App to Firebase
    • Load Categories I
    • Load Categories II
    • Load Featured Posts
    • WHERE Clause in Firestore Query
    • Show the Featured posts card in browser
    • Send post data to postcard child component
    • LIMIT Firestore Query
    • Load Latest Post and ORDERBY Filter I
    • Load Latest Post and ORDERBY Filter II
    • Make Single Category Page Dynamic I
    • Make Single Category Page Dynamic II
    • Make Single Category Page Dynamic III
    • Make Single Category Page Dynamic IV
    • Make Single Post Component Page Dynamic I
    • Make Single Post Component Page Dynamic II
    • Make Single Post Component Page Dynamic III
    • Load Similar Posts
    • Count The Posts Views (Field Increment)
    • Show The Featured tag Conditionally
    • Section End (Make Fornt End blog view Dynamic)
  • User Subscription
    • Section Intro (User Subscription)
    • Make the subscription form as a Template Driven Form
    • Subscription Form Validations
    • Capture The Subscribe Forms Values
    • Subscription Data Interface
    • Subscription Data Save Query
    • Prevent Email Duplication I
    • Prevent Email Duplication II
    • Handling Error Message and Success Message
    • Load Subscribed Users Inside the Backend Dashboard I
    • Load Subscribed Users Inside the Backend Dashboard II
    • Load Subscribed Users Inside the Backend Dashboard III
    • Section End (User Subscription)
  • Build and Deploy
    • Section Intro
    • Prepare the App for Final Steps
    • Build the App to Production (Frontend Blog)
    • Firebase Host and Configurations
    • Deploy Angular App to the firebase host I
    • Deploy Angular App to the firebase host II
    • Deploy the Backend Dashboard App to Firebase Host I
    • Deploy the Backend Dashboard App to Firebase Host II

 


Time remaining or 924 enrolls left

 

Don’t miss any coupons by joining our Telegram group 

Udemy Coupon Code 100% off | Udemy Free Course | Udemy offer | Course with certificate