Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Learn Angular From Scratch - Complete Guide Design to Deploy

Name: Learn Angular From Scratch - Complete Guide Design to Deploy
Rating: 4.4 (290 reviews)

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

Created byHashmath Rz

Last updated 9/2024

English

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

Course content

23 sections • 374 lectures • 23h 11m total length

Course Promo3:59
Introduction1:41
Master designing, prototyping, and deploying a modern Angular web application from scratch, using Bootstrap, fundamental concepts, debugging practices, and Firebase services like Firestore, Storage, and Authentication.
App Demo (Frontend View)3:09
App Demo (Backend Dashboard)5:33
Course Structure (Fundamentals)4:11
Course Structure (Design & Develop)3:49
design and build a complete angular blog app, creating modular components and an admin dashboard, while implementing firebase features like firestore, storage, authentication, and crud operations, deploying to production.
How to get most of the course2:27
Course New Updates0:41
Updates0:41

Section Intro (Environment Setup)0:47
Environment Setup Introduction
Code Editor Setup (Vscode)3:13
First Look Vscode4:15
Vscode Theme Setup3:06
Learn to change the code editor theme and font using the themes panel, install new themes from the library, and observe syntax colors in a typescript file.
Vscode Font Setup3:19
Useful Vscode plugins4:37
Installing Nodejs and NPM2:51
Section End (Environment Setup)0:57

Section Intro(Design and Prototype)0:26
What is Figma1:53
Advantages of designing & prototyping3:38
Designing and prototyping with design tools like Figma helps you preview layouts, colors, and typography, gather client feedback, and design fast and efficiently before coding.
Get Start With Figma5:20
Sign up for a free Figma account using Google, then explore the dashboard, drafts, and community projects. Create a desktop blog frame in the editor.
Figma Frames2:35
Figma Shape Tools3:10
Figma Text Tool1:31
Figma Colors3:58
Figma Constraints5:23
Learn how to use Figma constraints to fix element positions within a frame, keeping logos at the bottom or top while scrolling, and to adapt layouts as frame height changes.
Figma Components3:38
Making Figma Parent Components1:44
Discover how to create reusable Figma components, including primary and secondary color sheets and text components, to establish a consistent Angular design theme.
Editing Figma Components2:57
Design Header Logo3:01
Design Cateogory Navbar3:27
Design Footer Area2:18
Design the Featured Post Area1:40
Design the home page featured post area by creating a child component, adding a centered white heading and text with font sizes 36 and 14, and organizing into a group.
Design the Post Cards7:52
Design the Latest Post Area2:58
Design the latest post area by creating a post section, displaying latest post text in font size 36, and centering a load more button under three postcards in a row.
Task !!! (Design the subscription Form)1:20
Solution (Design the Subscription Form)4:23
Usage of Figma Components1:00
Discover how Figma components are used in action to customize a main component and its children, adjusting primary and secondary colors from red to lighter tones.
Design the Single Category Page2:59
Create single category page by duplicating header, footer and subscription form into a frame, then add a post section with white 48px title, white 14px body and load more button.
Design the Single Post Page3:56
Design the Comment Form5:04
Design the Comment Preview Area4:44
Design the About us Page3:57
Design the Terms & Condition Page1:23
Design the terms and conditions page by duplicating the about us page, renaming it, updating the group name, and placing it in the frame, then design the contact us page.
Task !!!! (Design the Contact us Page)1:45
Solution (Design the Contact us Page)4:21
Designs the contact us page in a new frame, adds header, logo, nebula, and footer, and places a centered primary color rectangle with a name, email, and message form.
Get Start with Prototype in Figma3:10
Home Page Prototype Connections.3:08
Single Category Page Prototype Connection.2:17
Prototype Options in FIgma3:57
Learn how to add and customize prototype animations in Figma, including on click actions, navigate to targets, move in animation, direction and behavior, and applying animations across frames.
Prototype All other Pages Part I4:57
Prototype All Other Pages Part II2:52
End (Design and Prototype Section.)1:06

Section Intro (Bootstrap Fundamentals)0:29
Bootstrap V5 update1:14
What is Bootstrap1:58
Bootstrap Import Part I7:41
Bootstrap Import Part II1:35
Bootstrap Import Part III3:11
Bootstrap Container2:59
Bootstrap Container-Fluid1:23
Bootstrap Grid System5:10
Bootstrap Columns8:49
Bootstrap Responsive Columns3:36
Bootstrap Typography6:20
Bootstrap Contextual Colors3:47
Bootstrap Tables5:16
Bootstrap Images3:30
Bootstrap Buttons6:49
Bootstrap Spinner2:39
Bootstrap Cards7:30
Bootstrap Inputs4:54
Bootstrap Utility Classes.5:01
Section End1:13

Section Intro (Angular & Angular CLI)0:31
Discover Angular from scratch by defining what Angular is, and learn to set up, generate an Angular app, and understand the project file structure with Angular CLI.
What is Angular5:11
Learn how Angular, a front-end framework built with JavaScript by Google, enables fast, robust web apps with DOM manipulation, class binding, and prebuilt methods that speed design and deployment.
What is Angular5:07
What is SPA (Single Page Application)2:04
What is Angular Cli1:07
Angular CLI setup1:54
First Angular App2:51
Angular File Structure Part I4:46
Angular File Structure Part II1:39
Explore the angular file structure part ii, detailing the slc folder with assets, environment variables, index, main entry point, app modules, browser support scripts, and the test entry.
Angular File Structure Part III3:11
End (Angular & Angular CLI)0:33
Explore the core Angular concepts and file structure covered in this introduction, and prepare for deeper learning as questions arise in the Q&A ahead.

Section Intro (Angular Component)0:34
What is Angular Component2:40
Create an Angular Component9:24
How Loads Components Inside the Browser3:33
Template & Styles Component Properties5:17
Better Approach for Template & Styles5:35
Generate Angular Component using Angular CLI4:48
NgOnInit Lifecycle Hook2:04
Data Binding3:32
Sharing Data Between Components2:13
Parent Child Relationship in Components3:09
@Input Decorator4:23
Task !!!1:22
Solution !!!4:25
@ViewChild Decorator7:52
@Output Decorator & Event Emitter8:38
Section End (Angular Components)0:51

Section Intro (Data Binding & Events Handling)0:26
String Interpolation4:47
Property Binding3:37
Class Binding2:47
Style Binding5:32
Event Binding4:57
Event Filtering6:28
Template Variable3:06
Two Way Data Binding4:30
Two Way VS One Way Data Binding6:26
Task !!!2:17
Solution I5:33
Solution II7:50
End (Data Binding & Event Handling)0:48
Explore data binding in Angular with string interpolation, property binding, class binding, and style binding, then apply it in a small task and learn event handling.

Section Intro (Directives)0:42
Learn about Angular directives, how to use directives in the template, and the differences highlighted in the section intro on directives.
What is Directive2:12
ngFor Directive6:37
Fetching Object Array Using NgFor5:41
Angular Change Detection5:14
ngFor Directive Index2:53
ngIF Directive4:54
ngTemplate4:22
ngSwitchCase Directive7:11
ngStyle Directive4:29
ngClass Directive3:15
Master the ngClass directive to conditionally apply css classes in Angular by binding an object of class names to boolean conditions.
Structural Directive Vs Attribute Directive4:14
Directive Task !!!1:31
Solution I5:24
Solution II6:35
Section End (Directives)0:43

Section Intro (Pipes)0:26
What is angular Pipe & Types of pipes1:08
Uppercase lowercase pipe2:16
Number pipe3:56
Currency Pipe3:41
Date pipe2:11
JSON Pipe1:47
Create a simple object in an angular component and display it with string interpolation, then convert it to a json string using the json pipe for browser rendering.
Percent Pipe1:15
Explore how the percentage pipe formats values as percentages in Angular, using the pipe operator to display numbers as percentages and control decimal and total digit precision.
Slice Pipe2:12
Discover how to use the angular slice pipe to display the first three values of an array by passing start and end indices, and see updates in the browser.
Custom Pipe I5:15
Custom Pipe II2:56
Create and register a custom pipe in Angular, define value and optional args parameters, implement logic to prepend the city name to values, and declare the pipe in the module.
Create Custom Pipe using Angular CLI2:06
Custom Pipe With Arguments4:01

Section Intro (Angular Service)0:35
What is Angular Service2:27
Use an Angular service to share data and methods between unrelated components, reducing duplication by centralizing a post array and common on click logic.
Create Angular Service (Manual)2:10
Dependency Injection6:17
Dependency Injection Providers and Injectable Decorator7:13
Generate Angular Service using Angular CLI1:50
Generate an Angular service using the Angular CLI by creating a user service inside a services folder, producing the service file and its unit test spec.
Usage of Angular Services3:43
Angular Interface7:34
End (Angular Service)0:21

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.

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!

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

Learn Angular From Scratch - Complete Guide Design to Deploy

What you'll learn

Explore related topics

Course content

Welcome to the Course9 lectures • 26min

Development Environment Setup8 lectures • 23min

Design and Prototyping.36 lectures • 1hr 54min

Bootstrap Fundamentals21 lectures • 1hr 25min

Get Start with Angular & Angular CLI11 lectures • 29min

Angular Components17 lectures • 1hr 10min

Data Binding & Events Handling14 lectures • 59min

Angular Directives16 lectures • 1hr 6min

Angular Pipes13 lectures • 33min

Angular Service9 lectures • 32min

Requirements

Description

Who this course is for: