Learn Angular From Scratch - Complete Guide Design to Deploy

Explore the vscode interface with file explorer, search, source control, and terminal. Learn four ways to open a folder: open folder, window, right-click open with code, or use code.

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.

Install the vector mono s font, download and install the zip, then set vscode editor font family to vector mono s and adjust size and letter spacing for better readability.

Install node.js and the node package manager (npm) to set up an Angular development environment, download the recommended version, and verify node and npm versions.

Configure your development environment for Angular by setting up the code editor, applying optional theme and font tweaks, and installing Node.js with npm to run Angular projects.

Explore Figma as a free, web-based design and prototyping tool that you can access from any device, and compare it with Sketch and Adobe XD, noting pricing and platform differences.

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.

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.

Create and customize a Figma frame by selecting a desktop frame size, renaming the frame in the layers panel, and adjusting layout, width, height, border radius, color, stroke, and shadows.

Learn how to create color swatches in Figma, define primary and secondary colors, contextual colors, use color picker, label colors, and apply colors to shapes and text.

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.

Explore Figma components by creating a parent component and child components to apply color changes across multiple elements; see how updating the parent propagates to all children.

Discover how to create reusable Figma components, including primary and secondary color sheets and text components, to establish a consistent Angular design theme.

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 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.

Design the subscription form as a reusable component on a secondary color background. Add a drop shadow, name and email fields, and a subscribe button within a subscription card.

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.

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 a comment form in a UI workflow by creating labeled name and comment input fields, a text area, and a submit button, then organize elements with grouping.

Design the comment preview area in Angular, building a shadowed rectangle container with a primary text label, author name John Doe, a timestamp, dummy comments, and a reply text area.

Designs the about us page by duplicating header and footer, adding a primary color frame with centered bold about us text, and inserting lorem ipsum content and a call-to-action button.

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.

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.

Prototype the homepage by linking postcard cards to the single post page, group postcards into category and latest post lists, and clean up links to ensure smooth navigation.

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.

Design and prototype a blog website using Figma, create a web prototype, reuse components and constraints, and seek feedback to improve and prepare for the next section.

Discover how the Bootstrap framework uses pre-built classes to build responsive, mobile-first websites, enabling styling like turning text red with the text-danger class without writing CSS.

Learn how to import the booster framework into a project using three methods - direct download, CDN, and npm - and set up a simple index with minified files.

Learn the second bootstrap import method by copying a link into index.html, and paste it into the head and the body, then link dependencies from the app download page.

Learn how to import bootstrap in an angular project using npm, install dependencies like mousetrap, inspect node_modules, and correctly link assets to enable a working setup.

Design a responsive bootstrap grid by building a container, rows, and multiple columns with varying sizes up to twelve, using md breakpoints and utility classes for borders, backgrounds, and margins.

Apply bootstrap contextual colors to text and backgrounds with classes like text-primary and bg-primary, then explore secondary, success, danger, and warning variants.

Create and style bootstrap tables in Angular from scratch, applying default styles and variants such as striped, bordered, borderless, responsive, and small tables to achieve a clean, adaptable layout.

Create an image tag in the bootstrap container, paste a royalty-free image from pixels.com into src, and apply bootstrap styles for rounded corners, circle, and thumbnails with image-fluid for responsiveness.

Master bootstrap buttons from styling basics to color variants like primary, secondary, danger, warning, and info, using outline and block styles, and applying to anchors and inputs.

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.

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.

Explore how a single page application loads without page refresh, delivering fast, responsive user experiences. Learn how JavaScript powers SPAs and how Angular can build them.

Install the Angular CLI globally using npm, set up the node package manager, and verify access from any directory to streamline Angular development.

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.

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.

Learn how Angular loads components in the browser by using component selectors inside the main app component to render child components like notebook.

Explore how an Angular component uses a selector and template within the component decorator to render template values, then applies styles with the style decorator, including multiline definitions via backticks.

Generate a new Angular component with Angular CLI using ng generate component, creating the files, selector, template, and style, then render it via its selector.

Implement the ngOnInit lifecycle hook to run code after the component is fully initialized and loaded into the dom, distinguishing it from the constructor.

Learn to connect parent and child components in Angular by building a post list and a list component, passing data between them via string interpolation, with practice and persistence.

Learn to share data from a child component to a parent in Angular using the output decorator and event emitter, emitting on button clicks and displaying in the parent.

Explore how to display data using Angular data binding methods, including two-way data binding, and handle events such as click, preventing default actions, and applying filtering.

Discover property binding in Angular as a cleaner way to assign dynamic properties, demonstrated by binding an image source instead of string interpolation.

Explore style binding in Angular by applying a style object to dynamically set text color with a boolean condition, using a ternary operator and style object properties like color.

Learn two-way data binding in Angular by binding an input field to a component variable with ngModel, ensure FormsModule is imported, and reflect user input in the component.

Design a simple angular form with post title, post details, and post image, rendering a live post preview using string interpolation, property binding, and class binding. Toggle a yellow background.

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.

Learn about Angular directives, how to use directives in the template, and the differences highlighted in the section intro on directives.

Explore how Angular directives manipulate dom elements to dynamically change appearances and behaviors. Identify the four directive types—component, structural, attributes, and custom—and how they extend components.

Learn to render dynamic lists with the ngFor directive in Angular, looping over an array and printing each value using template interpolation and indices.

Bind a click event to add and delete posts, then rely on Angular change detection to update the dom in real time.

Explore ng-template usage in Angular to conditionally render data with structural directives, show a no data message, and switch templates for loaded and empty states.

Learn how to use the ngStyle directive for conditional style binding in Angular, applying color and text-transform based on an active flag, and refactoring to a cleaner object-based style binding.

Master the ngClass directive to conditionally apply css classes in Angular by binding an object of class names to boolean conditions.

Create a simple Angular app with a name, email, and text area form, a save button, and a table of entries with delete actions to demonstrate data binding.

Learn how to build and bind a simple angular form with ngModel, capture name, email, and address, and save entries to an array for console verification.

Learn angular directives in detail, focusing on structural directives like ngIf and ngSwitchCase and on execute directives, and understand the difference between structural and execute directives.

Learn how to format numbers in Angular using the number pipe, control integer and decimal digits, set minimum and maximum digits, and apply string interpolation to display rounded values.

Learn how to use Angular's currency pipe to display prices with symbols or codes, switch currencies (USD, CAD, JPY), and control decimal digits for precise formatting.

Create a date variable from a plain JavaScript date object, display it in an h1 with string interpolation, and format it with the date pipe using short date options.

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.

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.

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.

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.

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 an Angular service manually by adding a service file in a service folder, exporting a class, and sharing a simple post list data array with components.

Inject the post service into the component using Angular dependency injection, replacing manual new with a constructor parameter for cleaner access to the post list.

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.

Learn how the post component creates a new post object, passes it to the post service, and updates the post list, demonstrating clean data handling in Angular.