Angular 16 for Juniors: Building Real World Application

Focused View

Fadi Nouh

10:11:44

68 View

1. Introduction

1. Introduction.mp4

03:50

2. What is Angular.mp4

05:08

3. Course Requirements.mp4

02:47

4. This is Angular Modules, Components and Services.mp4

02:55

5. If You Get stuck and Having Errors.html

2. Environment and Development Tools

1. Mac Installing HomeBrew.mp4

01:47

2. Installing NodeJS - NVM.mp4

06:15

3. Installing Angular.mp4

02:08

4. Creating the Project.mp4

03:31

5. Running the Application.mp4

02:26

6. Installing Code Editor.mp4

02:49

7. Project Architecture.mp4

08:07

8. Installing Prettier.mp4

09:23

9. Installing ESLint.mp4

08:53

10. Extensions To Speed Up The Coding Productivity.mp4

02:01

3. Project API

1. What is API.mp4

02:20

2. JSON Format.mp4

03:22

3. Getting the Movies data - API Registration.mp4

07:47

4. Triggering APIs Requests via ThunderClient.mp4

06:14

5. Different APIs Resources.mp4

03:44

4. Application Initialization

1. Design Overview and Page Structure.mp4

01:47

2. Installing and Configuring Fonts.mp4

09:06

3. Styles Initialization - Important.mp4

07:03

4. Installing Grid System - PrimeFlex.mp4

05:10

5. Application Header Component.mp4

11:01

6. Application Logo and Navigation.mp4

10:06

7. Application Footer Component - Date Pipe.mp4

10:43

8.1 Application Initialization.zip

8.2 homepage-banners.zip

8. Section Code.html

5. Application Home Page

1. Home Page Component and Routing.mp4

10:30

2. Slider Component.mp4

03:51

3. Slider Component Layout.mp4

04:50

4. Slider Styling.mp4

14:24

5. Install Icons Library - Prime Icons.mp4

07:56

6. Getting Popular Movies.mp4

13:31

7. Show the Data in Frontend.mp4

06:14

8. Wrap in a Service.mp4

11:31

9. Use Async Pipe.mp4

04:33

10. Loop Over Items using ngFor.mp4

06:24

11. ngIf for Conditional Rendering.mp4

03:35

12. Loop Over the Movies ngFor To Create the Slides.mp4

10:52

13. Define Movie Model.mp4

10:25

14. Create Slides With Real Data.mp4

07:06

15. Getting the Images in Movies API.mp4

05:17

16. Change Slide Every 5 Seconds.mp4

08:45

17. Slider Animation - Animation Basics.mp4

14:55

18. Code Refactoring.mp4

10:13

19.1 application-homepage.zip

19. Section Code.html

6. Home Page Movies and TV Shows Banners

1. Banner Component.mp4

08:59

2. Show Item Component.mp4

15:52

3. Get The Required Services.mp4

04:47

4. Use Inputs for Components.mp4

06:37

5. Call the Banners for Different Movies Types.mp4

09:25

6. Code Refactoring for Services.mp4

02:52

7. Use RxJS Map to Stream Different output.mp4

05:03

8. Limit to Specific Amount of Movies.mp4

03:03

9. TV Shows Banner.mp4

06:09

10. TV Shows Type and Use Same Banner Component.mp4

11:11

11.1 homepage-banners.zip

11. Section Code.html

7. Movie and TV Show Detail Page

1. Show Detail Component and Routing.mp4

06:34

2. Routing by Movie - TVShow Id.mp4

04:21

3. Reading Route Parameter Value.mp4

07:19

4. Get Movie By Id.mp4

07:16

5. Reuse Slider Component as Header.mp4

08:16

6. Disable Slider Switching for Header Use.mp4

03:06

7. Install PrimeNG Component library.mp4

04:14

8. Resolving Dependency Versions - Update Angular.mp4

06:22

9. Continue Library Installation and Use Tab View Component.mp4

05:03

10. Styling the Tab View.mp4

12:39

11. Overview Tab.mp4

14:39

12. Videos Tab - Videos Service.mp4

11:42

13. Videos Tab - Video Embed Component.mp4

04:45

14. Videos Tab - Bypass URL Security.mp4

09:52

15. Photos Tab - Image Preview on Click.mp4

09:00

16. Cast - Use Carousel Component to Display Actors.mp4

15:16

17. If..else in HTML of Component - Default Actor Image.mp4

04:53

18. Exercise - Get Similar Movies.html

19. Exercise - TV Shows Detail Page.html

20.1 movie-and-tvshow-detail-page.zip

20. Section Code.html

8. Movies List Page

1. Section Overview.mp4

01:13

2. Discover Search MoviesTV Shows API.mp4

02:33

3. Create Search Movies Service.mp4

03:31

4. Create Shows List Component.mp4

02:50

5. Show Search API Results and Use Show Item.mp4

07:10

6. Use Search Component.mp4

02:28

7. Data Binding - ngModel.mp4

04:06

8. Component Events - onChange.mp4

02:18

9. Use Search Value in Search Service.mp4

03:34

10. Use Popular Movies as Default Search Value.mp4

05:38

11. Add Pagination Component.mp4

05:13

12. Pass Page Number to API from Paginator.mp4

04:55

13. Keep Search Value on Pagination.mp4

02:14

14. Get Total Results Value To Paginator.mp4

04:32

15.1 08-movies-list-page.zip

15. Section Code.html

16. Exercise - TV Shows List.html

9. Genres Page

1. Genres Page Component.mp4

02:58

2. Genres API & Service.mp4

02:45

3. Genres Page Layout.mp4

03:53

4. Display the Genres from API.mp4

04:19

5. Get Movies By Genre API and Service.mp4

06:02

6. Display Movies on Clicked Genre.mp4

04:01

7. Routing to Specific Genre.mp4

07:30

8. Reroute to same component with different Id.mp4

05:15

9. Homework.html

10.1 09-genres-page.zip

10. Section Code.html

10. Application Deployment

1. Application Build.mp4

04:23

2. Deploy to a Standard Host Using FTP.mp4

02:49

3. Deploy to Github Pages.mp4

05:42

4. Fix Github Pages - Base URL.mp4

04:16

11. Welcome to Angular World!

1. Final Words and Next Steps.mp4

01:06

2. Bonus Lecture.html

Description

Harness the Power of Angular 16 with Real World App and RxJS with TypeScript for Seamless Web Development

What You'll Learn?

Fundamentals of Web Development
Introduction to Angular
Building Full Real-World Project for Your Portfolio
Use PrimeNG library
Services and Dependency Injection
Routing and Navigation
HTTP and API Integration
Deployment and Hosting
Best Practices and Industry Standards
TypeScript and Fully Typed Application
Purchase by adults only (+18)

Who is this for?

High School Students

College Freshmen

Coding Bootcamp Graduates

Junior Web Developers

Self-taught Programmers

Career Changers, People looking to change their career paths and enter the field of web development

Designers with Coding Interest

Tech-Savvy Teachers

Adults Only (+18)

What You Need to Know?

Basic Computer Skills

Web Fundamentals: A basic understanding of HTML, CSS, and JavaScript is beneficial.

Motivation and Enthusiasm

More details

Description
Are you ready to embark on an exciting journey into the world of web development? Our "Introduction to Angular for Juniors" course is the perfect starting point for young learners interested in building dynamic and interactive web applications. Designed with beginners in mind, this course will equip students with the essential skills to create modern web experiences using Angular, one of the most popular front-end frameworks in the industry.
The course is intended for purchase by adults only (+18) due to the possibility of display adult content during project development

Course Highlights:
Learn the Basics: We'll begin with a solid foundation in web development, covering HTML, CSS, and JavaScript fundamentals to ensure every student is on the same page.
Master Angular Concepts: Dive into Angular's powerful features, including components, templates, data binding, and more, through hands-on exercises and real-world projects.
Build Real-World Application: What sets our course apart is the opportunity to work on real-world project. You won't just be learning theory; you'll be building practical, hands-on web applications that can be showcased in your portfolio.
Collaborative Learning: Engage with your peers, share ideas, and work on group projects to foster teamwork and problem-solving skills.
Instructor Guidance: Our experienced instructors are dedicated to your success. They'll provide clear explanations, answer questions, and offer valuable insights throughout the course.
Prepare for the Future: Gain skills that are in high demand in the tech industry, setting a strong foundation for future career opportunities.

Here's a breakdown of what they can expect to learn:

Fundamentals of Web Development:
Understanding the basics of HTML, CSS, and JavaScript.
Setting up a development environment.
Introduction to Angular:
What Angular is and its importance in modern web development.
The Angular architecture and key concepts.
Components and Templates:
Creating components and templates to build the user interface of web applications.
Using data binding to connect components and templates.
Directives and Pipes:
Understanding directives like ngIf and ngFor.
Using pipes for data transformation and formatting.
Services and Dependency Injection:
Creating and using services to manage data and application logic.
Implementing dependency injection to make services available to components.
Routing and Navigation:
Setting up routing to create multi-page applications.
Implementing navigation between different views.
HTTP and API Integration:
Making HTTP requests to fetch data from external sources.
Handling responses and displaying data in the application.
Testing and Debugging:
Debugging Angular applications effectively.
Optimization and Performance:
Strategies for Optimizing Angular applications for speed and efficiency.
Deployment and Hosting:
Deploying Angular apps to web hosting services or platforms like GitHub Pages.
Real-World Projects:
Applying learned concepts to build real-world web application.
Encouraging students to work on projects that interest them.
Best Practices and Industry Standards:
Teaching coding best practices and adherence to industry standards in Angular development.
Join me on this exciting journey into the world of web development with Angular. Whether you're just starting or looking to expand your skills, this course will empower you to create dynamic and engaging web applications while actively working on real-world projects that demonstrate your proficiency. Enroll now and take your first step towards becoming a web development pro!
Who this course is for:
High School Students
College Freshmen
Coding Bootcamp Graduates
Junior Web Developers
Self-taught Programmers
Career Changers, People looking to change their career paths and enter the field of web development
Designers with Coding Interest
Tech-Savvy Teachers
Adults Only (+18)

User Reviews

Rating

average 0

Total votes0

Focused display

Angular

Fadi Nouh

Instructor's Courses

I, Fadi, am a full-stack web developer residing in the vibrant city of Prague, located in the heart of Europe!I am an individual who wears multiple hats as a full-stack web developer and designer. My true passion lies in crafting exquisite creations from the ground up. Since 2008, I have been diligently constructing websites and applications. Moreover, I possess a distinguished Master's degree in Software Engineering, bestowed upon me by the esteemed Universidad de Sevilla in Spain.During my collegiate years, a newfound love for instructing and aiding others blossomed within me. This ardor led me to become an esteemed educator, both at my university and prestigious private institutions.Machinery captivates me, and I have a particular affinity for programmable logic controllers (PLC) and human-machine interfaces (HMI). My endeavors perpetually strive to facilitate seamless communication between humans and machines.Over the course of more than a decade since my graduation, I have distilled my professional principles into the following::: Talent often receives exaggerated acclaim, while the essence of success lies in diligent toil. I ardently believe in and practice the virtues of "Hard work.":: The pursuit of knowledge knows no bounds. I perpetually harbor an insatiable curiosity for acquiring novel insights and mastering fresh skills.:: A well-rounded individual must be proficient in multiple languages. Thus, I have honed my abilities to converse in the dialects of the engineering realm, as well as those of teamwork, coordination, management, training, and presentation.:: The possession of skills is meaningless if one fails to apply them effectively, benefiting both businesses and individuals alike.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.