Media is too big
VIEW IN TELEGRAM
50. Prettier
Anjana installs another developer tool, Prettier, responsible for consistent code formatting in a project. Prettier ensures any developers contributing to a project follow the same set of formatting rules.
#lesson
Anjana installs another developer tool, Prettier, responsible for consistent code formatting in a project. Prettier ensures any developers contributing to a project follow the same set of formatting rules.
#lesson
Media is too big
VIEW IN TELEGRAM
51. VS Code Tooling
Anjana demonstrates the tooling provided by Visual Studio Code to aid developers in their workflow. The Source Control panel provides a basic UI for git-related operations. Extensions for ESLint and Prettier are also shared.
#lesson
Anjana demonstrates the tooling provided by Visual Studio Code to aid developers in their workflow. The Source Control panel provides a basic UI for git-related operations. Extensions for ESLint and Prettier are also shared.
#lesson
Media is too big
VIEW IN TELEGRAM
52. Deployment & Configuring Vite
Anjana compares development and production environments and shares an example vite.config.js file containing configuration for both environments. Static hosting options are also discussed in this lesson, including GitHub Pages, Netlify, and Vercel.
#lesson
Anjana compares development and production environments and shares an example vite.config.js file containing configuration for both environments. Static hosting options are also discussed in this lesson, including GitHub Pages, Netlify, and Vercel.
#lesson
Media is too big
VIEW IN TELEGRAM
53. Configuring GitHub Actions
Anjana looks at the configuration options for deploying a project using GitHub Pages. The finished selfie-cam repo is used as an example. Adding a YAML file to a repo's .github/workflows folder allows developers to configure custom GitHub actions for any automation tasks, including deploying a Vite project to GitHub pages. The code in the selfie-cam project linked below can be used as a starting point for this lesson.
- https://github.com/vakila/selfie-cam
#lesson
Anjana looks at the configuration options for deploying a project using GitHub Pages. The finished selfie-cam repo is used as an example. Adding a YAML file to a repo's .github/workflows folder allows developers to configure custom GitHub actions for any automation tasks, including deploying a Vite project to GitHub pages. The code in the selfie-cam project linked below can be used as a starting point for this lesson.
- https://github.com/vakila/selfie-cam
#lesson
Media is too big
VIEW IN TELEGRAM
54. Viewing GitHub Actions
Anjana looks at existing GitHub actions in the project and walks through each step displayed in the log. A successful action will have a green confirmation when it's completed. Failed actions are shown in red, and inspecting the logs helps developers understand why the action failed.
#lesson
Anjana looks at existing GitHub actions in the project and walks through each step displayed in the log. A successful action will have a green confirmation when it's completed. Failed actions are shown in red, and inspecting the logs helps developers understand why the action failed.
#lesson
Media is too big
VIEW IN TELEGRAM
55. Project Code Tour: Modal and Form
Anjana walks through the final Meme Me application, which contains elements from the quick-win projects earlier in the course and the selfie cam module. The Modal component is reused multiple times in this project. The Form module is also explored.
- https://github.com/vakila/meme-me
#lesson
Anjana walks through the final Meme Me application, which contains elements from the quick-win projects earlier in the course and the selfie cam module. The Modal component is reused multiple times in this project. The Form module is also explored.
- https://github.com/vakila/meme-me
#lesson
Media is too big
VIEW IN TELEGRAM
56. Project Code Tour: Camera and Text
Anjana continues exploring the Meme Me application. The camera module has additional functionality using setInterval to continuously update the camera image, simulating a live camera feed. A Text module has been added to draw the meme text on a separate canvas, making it more flexible when the text is updated.
- https://github.com/vakila/meme-me
#lesson
Anjana continues exploring the Meme Me application. The camera module has additional functionality using setInterval to continuously update the camera image, simulating a live camera feed. A Text module has been added to draw the meme text on a separate canvas, making it more flexible when the text is updated.
- https://github.com/vakila/meme-me
#lesson
Media is too big
VIEW IN TELEGRAM
57. Hackathon: Fork the Project
Anjana challenges students to fork the Meme Me application and add their own customizations. The customized project can then be deployed to GitHub pages. Code for the hackathon and detailed instructions for deployment can be found in the repo linked below.
- https://github.com/vakila/meme-me
#lesson
Anjana challenges students to fork the Meme Me application and add their own customizations. The customized project can then be deployed to GitHub pages. Code for the hackathon and detailed instructions for deployment can be found in the repo linked below.
- https://github.com/vakila/meme-me
#lesson
Media is too big
VIEW IN TELEGRAM
58. Community Projects
Anjana shares a few projects submitted by users during the course. If you would like to showcase your project, share a link in our Discord.
#lesson
Anjana shares a few projects submitted by users during the course. If you would like to showcase your project, share a link in our Discord.
#lesson
Media is too big
VIEW IN TELEGRAM
59. Q&A
Anjana answers questions about how junior developers can continue to grow their skills and shares some advice for career transitions.
#lesson
Anjana answers questions about how junior developers can continue to grow their skills and shares some advice for career transitions.
#lesson
Media is too big
VIEW IN TELEGRAM
60. Wrapping Up
Anjana wraps up the course with a summary of the accomplishments achieved through the projects and provides some additional resources.
#lesson
Anjana wraps up the course with a summary of the accomplishments achieved through the projects and provides some additional resources.
#lesson
Title: Angular 17+ Fundamentals
Description: Discover the power of Angular‘s ’latest features, including clean control flow in your component templates and performance features like signals and deferrable views. Equip yourself with modern Angular foundations and see what the Angular Renaissance is all about!
Link: https://frontendmasters.com/courses/angular-fundamentals/
Time: 4 hours, 35 minutes
Lessons: 22 / 22
Tags: #course #frontendmasters #720p
Description: Discover the power of Angular‘s ’latest features, including clean control flow in your component templates and performance features like signals and deferrable views. Equip yourself with modern Angular foundations and see what the Angular Renaissance is all about!
Link: https://frontendmasters.com/courses/angular-fundamentals/
Time: 4 hours, 35 minutes
Lessons: 22 / 22
Tags: #course #frontendmasters #720p
Frontendmasters
Angular 17+ Development: Build Efficient, Scalable Web Apps
Discover the power of Angular‘s ’latest features, including clean control flow in your component templates and performance features like signals and deferrable views. Equip yourself with modern Angular foundations and see what the Angular Renaissance is all…
Media is too big
VIEW IN TELEGRAM
1. Introduction
Mark Techson introduces themself and gives an overview of what will be covered in the course. They explain that the focus will be on the fundamentals of Angular and building an application. The topics that will be covered include components, routing, forms, dependency injection, and optimizations. The instructor also emphasizes the importance of scalability and confidence in using Angular.
- https://static.frontendmasters.com/assets/courses/2024-01-29-angular-fundamentals/angular-fundamentals-slides.pdf
- https://github.com/MarkTechson/angular-fundamentals-lessons
#lesson
Mark Techson introduces themself and gives an overview of what will be covered in the course. They explain that the focus will be on the fundamentals of Angular and building an application. The topics that will be covered include components, routing, forms, dependency injection, and optimizations. The instructor also emphasizes the importance of scalability and confidence in using Angular.
- https://static.frontendmasters.com/assets/courses/2024-01-29-angular-fundamentals/angular-fundamentals-slides.pdf
- https://github.com/MarkTechson/angular-fundamentals-lessons
#lesson
Media is too big
VIEW IN TELEGRAM
2. Hello Angular
Mark guides students through the process of accessing the Angular playground on angular.dev and changing the code to display "Hello Universe" instead of "Hello World". The instructor also provides instructions for setting up the project on the students' local machines and installing the necessary dependencies. The lesson concludes with a confirmation step where students are asked to check if they can access the application on localhost 4200.
#lesson
Mark guides students through the process of accessing the Angular playground on angular.dev and changing the code to display "Hello Universe" instead of "Hello World". The instructor also provides instructions for setting up the project on the students' local machines and installing the necessary dependencies. The lesson concludes with a confirmation step where students are asked to check if they can access the application on localhost 4200.
#lesson
Media is too big
VIEW IN TELEGRAM
3. Project Structure Tour
Mark provides an overview of an Angular project structure. They explain the purpose of various files and folders, such as angular.json, package.json, and main.ts. They also discuss the use of TypeScript in Angular and highlight the simplicity of the project structure to reduce the learning curve for beginners.
- https://github.com/MarkTechson/angular-fundamentals-lessons
#lesson
Mark provides an overview of an Angular project structure. They explain the purpose of various files and folders, such as angular.json, package.json, and main.ts. They also discuss the use of TypeScript in Angular and highlight the simplicity of the project structure to reduce the learning curve for beginners.
- https://github.com/MarkTechson/angular-fundamentals-lessons
#lesson
Media is too big
VIEW IN TELEGRAM
4. Creating a Component
Mark explains the three main parts that are needed to work with Angular: TypeScript, HTML, and CSS and discuss decorators and how they are used to add behavior to classes in Angular. The instructor demonstrates how to create a component in Angular and provides an example of creating an ordered list with favorite songs, movies, and books. They also show how to apply styles to the ordered list using CSS. Finally, the instructor demonstrates how to run the Angular project and view the changes in the browser.
#lesson
Mark explains the three main parts that are needed to work with Angular: TypeScript, HTML, and CSS and discuss decorators and how they are used to add behavior to classes in Angular. The instructor demonstrates how to create a component in Angular and provides an example of creating an ordered list with favorite songs, movies, and books. They also show how to apply styles to the ordered list using CSS. Finally, the instructor demonstrates how to run the Angular project and view the changes in the browser.
#lesson
Media is too big
VIEW IN TELEGRAM
5. Dynamic Values in Components
Mark teaches about displaying dynamic values in components using string interpolation in Angular. They explain how to define class properties in the component class and link them to the template using double curly braces. They also address some common issues and provide examples for better understanding.
#lesson
Mark teaches about displaying dynamic values in components using string interpolation in Angular. They explain how to define class properties in the component class and link them to the template using double curly braces. They also address some common issues and provide examples for better understanding.
#lesson
Media is too big
VIEW IN TELEGRAM
6. Component Composition
Mark explains the concept of component composition in Angular. They use the analogy of building with blocks to illustrate how components can be combined to create a full application. The instructor demonstrates how to import and reference a component in another component's template, and guides the students through creating a new component and updating the existing component to use it. They also address questions from the students about CSS selectors and component naming conventions.
#lesson
Mark explains the concept of component composition in Angular. They use the analogy of building with blocks to illustrate how components can be combined to create a full application. The instructor demonstrates how to import and reference a component in another component's template, and guides the students through creating a new component and updating the existing component to use it. They also address questions from the students about CSS selectors and component naming conventions.
#lesson
Media is too big
VIEW IN TELEGRAM
7. Template Conditionals
Mark introduces the concept of control flow in Angular templates using the
#lesson
Mark introduces the concept of control flow in Angular templates using the
*ngIf syntax. They explain how to conditionally display elements or components based on a true or false expression. They also demonstrate how to use the else and else if statements to handle different conditions. The instructor then guides the students through an exercise where they need to fill in missing information in a credit card component and conditionally display the membership level based on the data. They also show an alternative approach using the switch statement for conditional rendering.#lesson
Media is too big
VIEW IN TELEGRAM
8. Template Loops
Mark demonstrates how to use a loop in Angular to render a list of items in a template. They explain the syntax of the loop and the benefits of using it, including improved rendering performance. They also show how to access and display properties of each item in the loop. Additionally, they discuss the use of the "track by" syntax to optimize rendering and handle dynamic changes in the list.
#lesson
Mark demonstrates how to use a loop in Angular to render a list of items in a template. They explain the syntax of the loop and the benefits of using it, including improved rendering performance. They also show how to access and display properties of each item in the loop. Additionally, they discuss the use of the "track by" syntax to optimize rendering and handle dynamic changes in the list.
#lesson
Media is too big
VIEW IN TELEGRAM
9. Properties, Events & Output
Mark explains the concepts of property binding, event binding, inputs, and outputs in Angular components. They demonstrate how to dynamically set values for properties of elements in a template using property binding, and how to respond to events in the template using event binding. They also show how to pass data into a component using inputs and emit data out of a component using outputs.
#lesson
Mark explains the concepts of property binding, event binding, inputs, and outputs in Angular components. They demonstrate how to dynamically set values for properties of elements in a template using property binding, and how to respond to events in the template using event binding. They also show how to pass data into a component using inputs and emit data out of a component using outputs.
#lesson