1. You just need a github repository to host on github and make sure that you pushed the latest code.
  2. Install github pages tool for angular by using,  npm install -g angular-cli-ghpages  .
  3. Here deploying code in github pages is quite easy, Just need to make sure one thing, when you build your code, use--base-href tag. Build command here will be  ng build --prod --base-href https://<username>.github.io/<reponame>/ . 
  4. Run   angular-cli-ghpages -d dist/<project-name>/ --no-silent  to deploy your project. -d tag take the location for build stored, in dist file.
  5. This command will create a new branch gh-pages in your repository and automatically push the dist build in that branch.
  6. Just navigate to   https://<username>.github.io/<reponame>/  



 
Lifecycle Hooks




Structural Directive



Data Binding





Styling


Routing


Class Field Decorators








Pipes









 What is an API?

APIs - or Application Programming Interfaces - are defined as a set of functions (a coded procedure performing a particular task) through which two software can talk to each other without any human intermediation. An API is an abstracted point of entry to a piece of software with a description of the open interface and its behavior.

Let’s break that acronym down:

  • Application: By application, we mean a service with which a developer wants to interact. This service can be a stream of meteorological data, an image sharing app or an open data portal.
  • Interface: The interface is the entry door to the service. You have to go through that door to interact with the service capabilities (e.g., filtering meteorological data for a city, publishing pictures on Instagram…)
  • Program: The program is a set of coded procedures written by a developer. The program is designed to interact with the application, so we don’t have to. For example, the program can submit a postal address to get coordinates (think Airbnb or Google Map).

To sum it up: APIs are programs using a specific point of entry (the interface, also call an end-point) to interact with an application (or some features within this application).


APIs can easily be understood using the electricity network as a proxy
Let’s start with an electricity supplier:
  • this supplier produces and distributes a service: electricity
  • to distribute this service, the supplier relies on infrastructure: the electric network (stations, transmission lines, utility poles, sockets)
Now, let’s take a lamp that needs to consume electricity:
  • for the lamp to work, it needs to be connected to the electric grid
  • to be connected, the lamp is sold with a plug that fits standards sockets
The socket is a standardized point of entry (an interface) through which a lamp consumes electricity. An API is a standardized point of entry (an interface) through which a program consumes an application.
APIs allow developers to delegate a service they need to consume. In the same way, the lamp’s owner delegates the electricity needed by her lamp to the electricity supplier.
Let’s dig further. APIs and electrical sockets both specify how the user can consume the service. Remember our lamp? It needs to respect some conditions for using the service:
  • the number and shape of the pins
  • voltage and frequency
  • type of current
  • etc…
APIs will do the same and specify conditions to use them:
  • number of API calls for a defined lap of time
  • what you can expect to do: read and/or write
  • etc…
Thanks to the standardization of sockets, you can plug several lamps in your home without thinking twice about it. What matters is that every socket is functionally similar: it brings electricity right into your home.

Web APIs

Web APIs are APIs that can be accessed using the HTTP protocol. The API defines endpoints, and valid request and response formats. Web APIs include the APIs used to communicate with the browser (see  list). They may be services such as web notifications and web storage. Different web APIs feature varying levels of security and privacy, including open, internal and partner APIs. Multiple web APIs can be combined into a composite API - a collection of data or service APIs.

Open APIs

Open APIs, also known as external or public APIs, are available to developers and other users with minimal restrictions. They may require registration, and use of an API key, or may be completely open. They are intended for external users (developers at other companies, for example) to access data or services. As an example, take a look at the  provided by the UK government. Any developer can access it, without even registering, allowing app builders to include governmental data on restaurant standards in their apps.

Internal APIs

In contrast to open APIs, internal APIs are designed to be hidden from external users. They are used within a company to share resources. They allow different teams or sections of a business to consume each other’s tools, data and programs. Using internal APIs has several advantages over conventional integration techniques, including security and access control, an audit trail of system access, and a standard interface for connecting multiple services.

Partner APIs

Partner APIs are technically similar to open APIs, but they feature restricted access, often controlled through a third-party API gateway. They are usually intended for a specific purpose, such as providing access to a paid-for service. This is a very common pattern in software as a service ecosystem.

Composite APIs

Composite APIs allow developers to access several endpoints in one call. These could be different endpoints of a single API, or they could be multiple services or data sources. Composite APIs are especially useful in microservice architectures, where a user may need information from several services to perform a single task. Using composite APIs can reduce server load and improve application performance, as one call can return all the data a user needs.

Different  Types of API Architectures and Protocols

  • REST
  • JSON-RPC and XML-RPC
  • SOAP
REST
REST (representational state transfer) is a very popular web API architecture. To be a REST API, an API must adhere to certain architectural constraints, or principles, including:

  • Client-server architecture: the interface is separated from the backend and data storage. This allows for flexibility, and for different components to evolve independent of each other.
  • Statelessness: no client context is stored on the server between requests.
  • Cacheability: clients can cache responses, so a REST API response must explicitly state whether it can be cached or not.
  • Layered system: the API will work whether it is communicating directly with a server, or through an intermediary such as a load balancer.
JSON-RPC and XML-RPC
An RPC is a remote procedural call protocol. XML-RPC uses XML to encode its calls, while JSON-RPC uses JSON for the encoding. Both protocols are simple. A call can contain multiple parameters, and expects one result. They have a couple of key features, which require a different architecture to REST:

  • They are designed to call methods, whereas REST protocols involve the transfer of documents (resource representations). Or, to put it another way, REST works with resources, whereas RPC is about actions.
  • The URI identifies the server, but contains no information in its parameters, whereas in REST the URI contains details such as query parameters.
SOAP
SOAP (simple object access protocol) is an established web API protocol. It is intended to be extensible, neutral (able to operate over a range of communication protocols, including HTTP, SMTP, TCP and more), and independent (it allows for any programming style) The SOAP specification includes:

  • The processing model: how to process a SOAP message.
  • Extensibility model: SOAP features and modules.
  • Protocol binding rules: how to use SOAP with an underlying protocol, such as HTTP.
  • Message construct: how to structure a SOAP message.

Note that it is possible to build a RESTful API while using SOAP protocols, although the two are usually considered to be competing standards.



 
Src Folder
  • As the name implies, this folder contains all our angular project source code. Components, templates, pipes, services, images, styles etc that our angular application needs are present in this folder
  • The rest of the files and folders that are present outside this folder, are there to support building our angular application Src folder
    • assets
  • As the name implies, the assets folder contains the assets of your application like images and anything else to be copied when you build your application
    • environments
  • This folder contains the environment files. By default we have 2 environment files. environment.ts is for for development environment. Notice production property in this file is set to false.
  • environment.prod.ts is for production. Here in this file production property is set to true as expected.
  • The build system defaults to the dev environment which uses 'environment.ts', but if we do a production build environment.prod.ts will be used. The file and environment mapping is in Angular CLI configuration file (.angular-cli.json)
    • favicon.ico
  • This is the favorite icon for your application which is typically displayed in the browser address bar and next to the page name in a list of bookmarks. Angular CLI provides this favorite icon out of the box. You may replace this favicon with your own company favicon
    • index.html
  • The main visits your site is served when someone main.ts
    • main.ts
  • The main entry point for the application. This file contains the code to bootstrap the application root module (AppModule)
    • polyfills.ts
  • This Is the polyfills file. Angular is built on the latest standards of the web platform. Targeting such a wide range of browsers is challenging because not all browsers support all features of modern browsers. This can be compensated by using polyfill scripts as they implement the missing features in JavaScript.
  • So these polyfills allow us to use an API regardless of whether it is supported by a browser or not
    • styles.css
  • This file contains the global styles of our application. Styles that are local and specific to a component are often defined with in the component itself for easier maintenance
    • test.ts
    tsconfig.app.json
  • TypeScript compiler configuration for the Angular app
    • tsconfig.spec.json
  • TypeScript compiler configuration for the unit tests
    • app.component
  • The root component (AppComponent) TypeScript, HTML template, StyleSheet and Spec files
    • app.module.ts
  • This is the root application module (AppModule)

    • Git

    Git - is a version control software tool.

    version control system

    A version control system, or VCS, tracks the history of changes as people and teams collaborate on projects together. As the project evolves, teams can run tests, fix bugs, and contribute new code with the confidence that any version can be recovered at any time. Developers can review project history to find out:

    • Which changes were made?
    • Who made the changes?
    • When were the changes made?
    • Why were changes needed?
    Today, you write 10 lines of code - lets call that version-1. Tomorrow, you edit 2 lines and add 5 more lines of code - now its version-2. Later, You/Someone else, will add/update another few lines of code - now its version-3. Now you want to go back to version-1 (or any other version), We dont need to remember and delete the new code modified after version 1 but it is possible with Version Control Software/Tool.
    Finally We Don't need to create folders each day to say Day1_code, Day2_Code,...


    Github /Gitlab/ Bitbucket ?

    These are  Repositories. Mainly used for code/projects.

    What’s a repository?


    A repository, or Git project, encompasses the entire collection of files and folders associated with a project, along with each file’s revision history. The file history appears as snapshots in time called commits, and the commits exist as a linked-list relationship, and can be organized into multiple lines of development called branches. Because Git is a DVCS, repositories are self-contained units and anyone who owns a copy of the repository can access the entire codebase and its history. Using the command line or other ease-of-use interfaces, a git repository also allows for: interaction with the history, cloning, creating branches, committing, merging, comparing changes across versions of code, and more.

    Working in repositories keeps development projects organized and protected. Developers are encouraged to fix bugs, or create fresh features, without fear of derailing mainline development efforts. Git facilitates this through the use of topic branches: lightweight pointers to commits in history that can be easily created and deprecated when no longer needed.

    Through platforms like GitHub, Git also provides more opportunities for project transparency and collaboration. Public repositories help teams work together to build the best possible final product.

    Distributed version control system(DVCS)



    Git is an example of a distributed version control system (DVCS) commonly used for open source and commercial software development. DVCSs allow full access to every file, branch, and iteration of a project, and allows every user access to a full and self-contained history of all changes. Unlike once popular centralized version control systems, DVCSs like Git don’t need a constant connection to a central repository. Developers can work anywhere and collaborate asynchronously from any time zone.

    Without version control, team members are subject to redundant tasks, slower timelines, and multiple copies of a single project. To eliminate unnecessary work, Git and other VCSs give each contributor a unified and consistent view of a project, surfacing work that’s already in progress. Seeing a transparent history of changes, who made them, and how they contribute to the development of a project helps team members stay aligned while working independently.


    Basic Git commands

    To use Git, developers use specific commands to copy, create, change, and combine code. These commands can be executed directly from the command line or by using an application like GitHub Desktop or Git Kraken. Here are some common commands for using Git:

    git init 
    initializes a brand new Git repository and begins tracking an existing directory. It adds a hidden subfolder within the existing directory that houses the internal data structure required for version control.

    git clone
    creates a local copy of a project that already exists remotely. The clone includes all the project’s files, history, and branches.

    git add 
    stages a change. Git tracks changes to a developer’s codebase, but it’s necessary to stage and take a snapshot of the changes to include them in the project’s history. This command performs staging, the first part of that two-step process. Any changes that are staged will become a part of the next snapshot and a part of the project’s history. Staging and committing separately gives developers complete control over the history of their project without changing how they code and work.

    git commit 
    saves the snapshot to the project history and completes the change-tracking process. In short, a commit functions like taking a photo. Anything that’s been staged with git add will become a part of the snapshot with git commit.

    git status 
    shows the status of changes as untracked, modified, or staged.

    git branch 
    shows the branches being worked on locally.

    git merge
    merges lines of development together. This command is typically used to combine changes made on two distinct branches. For example, a developer would merge when they want to combine changes from a feature branch into the main branch for deployment.

    git pull 
    updates the local line of development with updates from its remote counterpart. Developers use this command if a teammate has made commits to a branch on a remote, and they would like to reflect those changes in their local environment.

    git push 
    updates the remote repository with any commits made locally to a branch.






    Project Folder Structure

    Package.json
  • This File contains the various packages to build and run our application. It contains two sets of packages, dependencies and devDependencies.
  • The dependencies are required for running the application.
  • The devDependencies are only required to develop the application.
  • These packages are installed into the nodemodules folder by the npm(Node Package Manager).
  • When npm install command is executed, we can also add our custom scripts here.
    • node modules
  • The Packages specified in the package.json file are installed into this folder when we run npm install command.
    • e2e folder
  • Contains end-to-end tests and their configuration files.
    • angular-cli.json
  • This is the Angular CLI configuration file.
    • .editorconfig
  • Configuration file for Visual Studio Code. The settings in this file let you set certain code style guidelines.
  • For example what indent style do you want -spaces or tabs and what should be the indent size etc. You can share this editorconfig file with other developers to maintain consistent coding styles.
    • .gitignore
  • This file is used to determine files and folders you don't want to check in to source control.
  • For example one of the folders we do not want to check in to source control is /dist folder which is auto generated when we build the application. So this folder is listed in this file. So, all the files and folders listed in this file are ignored, when a change set is checked in to source control..
    • karma.conf.js
  • Karma is the unit test runner for angular applications. As the name implies, karma.conf.js is the configuration file for Karma.
    • protractor.conf.js
  • Protractor is an end-to-end test framework for Angular applications. As the name implies, protractor.conf.js is the configuration file for Protractor.
    • README.md
  • This is a README file which contains the commonly used Angular CLI commands out of the box.
  • You may enhance it with your own project documentation so that anyone checking out the repo knows the commands to use to build, run and test your app.
    • tsconfig.json
  • This is the TypeScript compiler configuration file. This file has several TypeScript compiler configuration settings.
  • For example, to compile TypeScript to JavaScript on saving a TypeScript file set compileOnSave setting to true. If you do not want .map files to be generated, set sourceMap to false..map files are used for debugging your application.
    • tslint.json
  • Angular has a linting tool that checks our TypeScript code for programmatic and stylistic errors as well as non-adherence to coding standards and conventions.
  • tslint.json is the configuration file for linting.




    • 1. DevSamples

    DevSamples is a list of code samples for you to copy and paste into your projects as needed. The primary focus is on web development, but there are samples from a variety of languages.


    👉  https://www.devsamples.com/


    2. DrawKit

    Free vector SVG illustrations for you to use on your next project, no attribution required! Vector illustrations, packs, icons and more.


    👉  https://www.drawkit.io/


    3. uiGradients

    A handpicked collection of beautiful color gradients for designers and developers.


    👉  https://uigradients.com/


    4. Blender

    Free and Open 3D Creation Software.


    👉  https://www.blender.org/


    5. Edabit

    Learn to code with fun, bite-sized challenges. Gain XP, unlock achievements and level up. It's like Duolingo for learning to code.


    👉  https://edabit.com/


    6. Coolors

    Generate or browse beautiful color combinations for your designs.


    👉  https://coolors.co/


    7. loading.io

    Build Your Ajax Loading Icons, Animated Text and More with SVG / CSS / GIF / PNG !


    👉  https://loading.io/


    8. UI Garage

    Daily UI inspiration & patterns for designers, developers to find inspiration, tools and the best resources for your project.


    👉  https://uigarage.net/


    9. Figma

    Build better products as a team. Design, prototype, and gather feedback all in one place with Figma.


    👉  https://www.figma.com/



    10. Netlify

    Deploy modern static websites with Netlify. Get CDN, Continuous deployment, 1-click HTTPS, and all the services you need. Get started for free.


    👉  https://www.netlify.com/


    11. Pxfuel

    Millions of public domain stock photos released under creative common zero lincense, all are free for commercial use.


    👉 https://www.pxfuel.com/


    12. Font Awesome

    The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.


    👉  https://fontawesome.com/


    13. GTmetrix

    GTmetrix is a free tool that analyzes your page's speed performance. Using PageSpeed and YSlow, GTmetrix generates scores for your pages and offers actionable recommendations on how to fix them.


    👉  https://gtmetrix.com/


    14. Resume.com

    The Best Free Resume Builder No gimmicks. At Resume.com, you can build a professional resume that highlights your best qualities so you can land your dream job without any out of pocket expenses. Applying for jobs shouldn't cost you money.


    👉  https://www.resume.com/


    15. daily.dev

    daily.dev is the easiest way to stay updated on the latest programming news. It's a feed of articles that's ranked by a massive community of developers. Get the best content from the top tech publications on any topic you want. All in one browser extension


    👉  https://daily.dev/


    16.DevDocs

    Fast, offline, and free documentation browser for developers. Search 100+ docs in one web app: HTML, CSS, JavaScript, PHP, Ruby, Python, Go, C, C++…


    👉  https://devdocs.io/


    17. Feather Icons

    Feather is a collection of simply beautiful open source icons. Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency and readability.


    👉  https://feathericons.com/


    18. shortcode.dev

    A collection of useful snippets and code examples. Elements, attributes and selectors.


    👉  https://shortcode.dev/


    19. Canva

    Create beautiful designs with your team. Use Canva's drag-and-drop feature and layouts to design, share and print business cards, logos, presentations and more.


    👉  https://www.canva.com/


    20. Mockuper.net

    mockuper, the free mockups generator to create custom images to show your awesome works.


    👉  https://mockuper.net/


    21. CSS Nectar

    CSS Nectar is a css website design showcase for web designers and developers. Every day we select the best of the web design and add it to our gallery.


    👉  https://cssnectar.com/


    22. BGJar

    Free svg background generator for your websites, blogs and apps.


    👉  https://bgjar.com/


    23. Photopea

    Photopea Online Photo Editor lets you edit photos, apply effects, filters, add text, crop or resize pictures. Do Online Photo Editing in your browser for free!


    👉  https://www.photopea.com/


    24. Vercel

    Deploy web projects with the best frontend developer experience and highest end-user performance.


    👉  https://vercel.com/


    25. fun-javascript-projects

    Learn Javascript for free in a practical, project based approach.


    👉  https://fun-javascript-projects.com/


    26. Flaticon

    3743500+ Free vector icons in SVG, PSD, PNG, EPS format or as ICON FONT. Thousands of free icons in the largest database of free vector icons!


    👉  https://www.flaticon.com/


    27. Awesome Python

    A curated list of awesome Python frameworks, libraries and software.


    👉  https://awesome-python.com/


    28. CSS Reference

    CSS Reference is a free visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated examples.


    👉  https://cssreference.io/


    29. Sidebar.io

    The five best design links, every weekday.


    👉  https://sidebar.io/


    30. Grid by Example

    Everything you need to learn CSS Grid Layout.


    👉  https://gridbyexample.com/


    31. Heroicons

    Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS.


    👉  https://heroicons.com/


    32. Latency

    Free global latency performance testing tool.


    👉  https://latency.apex.sh/


    33. We Work Remotely

    Remote jobs in design, programming, marketing and more.


    👉  https://weworkremotely.com/


    34. Unsplash

    Beautiful, free images and photos that you can download and use for any project. Better than any royalty free or stock photos.


    👉  https://unsplash.com/


    35. Simple Icons

    1400+ Free SVG icons for popular brands.


    👉  https://simpleicons.org/


    36. CSS Stats

    CSS Stats provides analytics and visualizations for your stylesheets.


    👉  https://cssstats.com/


    37. Squoosh.app

    Compress and compare images with different codecs, right in your browser.


    👉  https://squoosh.app/


    38. Fast design

    The adaptive interface system for modern web experiences.


    👉  https://fast.design/


    39. Tabler Icons

    800+ Highly customizable & free SVG icons.


    👉  https://tablericons.com/


    40. unDraw

    The design project with open-source illustrations for any idea you can imagine and create. Create beautiful websites, products and applications with your color, for free.


    👉  https://undraw.co/


    41. Lorem Picsum

    Lorem Ipsum... but for photos


    👉  https://picsum.photos/


    42. Hashnode

    Hashnode is a free content creation platform and community that allows you to publish articles on your own domain and helps you stay connected with a growing developer community.


    👉  https://hashnode.com/


    43. Free CSS

    Free CSS has 3133 free website templates, all templates are free CSS templates, open source templates or creative commons templates.


    👉  https://www.free-css.com/


    44. Remove bg

    Remove Image Background: 100% automatically – in 5 seconds – without a single click – for free.


    👉  https://www.remove.bg/



    45. Public APIs

    A collective list of more than 1000 Free Public and Open REST APIs for developers like movie APIs, Anime APIs, weather APIs, music APIs, games and comics APIs, currency APIs, sports APIs, science APIs, open data APIs, etc.


    👉 https://public-apis.io/


    46. CSS.gg

    Pure CSS icons library, Customizable & Retina-Ready built 100% in pure CSS, SVG, SVG Sprite, styled-components, Figma and Adobe XD. Easy integration: Embed, NPM & API.


    👉  https://css.gg/


    47. Jr.DevJobs

    Jobs for Junior Developers


    👉  https://www.jrdevjobs.com/


    48. Notion

    A new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team.


    👉  https://www.notion.so/


    49. Compresspng.com

    PNG compression and optimization tool to compress PNG images into PNG-8 format with transparency support


    👉 https://compresspng.com/


    50. Compressor.io

    Optimize and compress JPEG, PNG, SVG, GIF and WEBP images online. Compress, resize and rename your photos for free.


    👉  https://compressor.io/




     




    Angular is a platform and framework for building single-page client applications using HTML and TypeScript. Angular is written in TypeScript. It implements core and optional functionality as a set of TypeScript libraries that you import into your apps
    What is AngularJs
  • AngularJS was created by Misko Heavery. He had built a framework to handle the downfalls of HTML and also taking ideas and best practices of the libraries which were never done earlier.
  • This first version of the framework known as AngularJS was launched in the year 2009. It laid the foundation of the present-day front-end application development
  • Angular JS was one of the best single-page application development solution. Gradually, it wide adoption and become very popular.
    • Most Popular Angular Website




    Features of AngularJs
  • A JavaScript MVW Framework
  • Extends HTML support by adding tags, attributes, and expressions
  • Allows easy event Handling
  • No need to learn another scripting language. It's just pure JavaScript and HTML
  • Supports for Data Binding
  • Built-In Template Engine and Routing
  • Form Validations and Animations
  • Dependencies Injection
    • Angular2
  • After, releasing Angular JS, Angular team released Angular 2 which is complete rewrite of its original Angular 1 or AngularJS. Angular 2 version is built around the concept of the component.
  • It was rewritten from scratch by the Angular team using Typescript. It offers better performance to web developers. There are many new features along with other improvements and tweaks.
    • Features of Angular2
  • Modern, faster, and highly scalable framework
  • Equally useful framework for web, mobile, and desktop apps
  • Web components based architecture
  • Supports Hierarchical Dependency Injection
    • Angular3
  • Angular 2 has been a single repository. Each package downloadable with the @angular/package-name convention. For example @angular/HTTP, @angular/router
  • All package names were assigned version 2, but router package by mistaken was given version 3. Therefore, the development team skipped Angular Version 3 and directly named it version 4 to maintain compatibility with Angular Router's version.
    • Angular4
  • Angular 4 is unlike Angular 2 (which is completed rewritten version of Angular 1). There are in fact only few minor changes and new features added in it. Angular 4 supports TypeScript, which compiles to JavaScript and displays the same in the browser.
    • Features of Angular4
  • Reduce the size of the generated bundled code up to 60%
  • Animation moved out to a separated package @angular/animations
  • Supports for if/else statement
  • Supports for email validator
    • Angular5
  • Angular 5 doesn't bring any significant change from Angular 4. However, lots of new features and many new improvements are done in this version.
    • Features of Angular5
  • Make AOT the defaul
  • Easier to build progressive web apps
  • Type checking in templates
  • Support for Internationalized Number, Date, and Currency Pipes
  • An update to Httpclient
  • Zone speed improvements
  • New Router Lifecycle Events
    • Angular6
  • This is a major release which is focused on making the toolchain easier to move quickly with Angular in the future, and less on the underlying framework.
  • ng update package is a new CLI command that is introduced with Angular 6. It analyses package.json and recommends updates to your application by utilizing its knowledge of Angular.
  • Another CLI command that has been introduced is ng add package which makes adding new capabilities to your project easy. It utilizes the package manager to download new dependencies. It can also invoke an installation script which can update your project with the configuration changes and add additional dependencies.
  • Angular 6 supports version 6 of RxJS. RxJS v6 and has several major changes. It offers a backward compatibility package rxjs-compat which ensures that your applications keep working.
    • Angular7
  • Updates regarding Application Performance
  • This is a major release which is focused on making the toolchain easier to move quickly with Angular in the future, and less on the underlying framework.
  • Angular Material & CDK
  • Virtual Scrolling
  • Improved Accessibility of Selects
  • Supports Content Projection using web standard for custom elements
  • Dependency updates regarding TypeScript 3.1, RxJS 6.3, Node 10"


    • 1. Getting Started (MUST)

    Dart Basics 

    Flutter Complete Course for Beginners 

    VSCode Extensions (Optional)


    2.1. Develop UIs

    Flutter WhatsApp Clone App

    Flutter Instagram Clone App

    Login Page (Optional) 

    Cleaning App Login & Onboarding 


    2.2. Develop UIs

    Flutter Travel UI with Animations

    Making Ubuntu like terminal

    Responsive Portfolio

    Responsive Portfolio (Web)



    2.3. Develop UIs

    Beautiful Nike Web Design (Optional)

    Adobe XD Flutter Tutorial

    Adobe XD Flutter Truecaller UI


    3.1. Develop Apps

    Build a Gif Search Engine (Must)

    Gender Prediction App

    Pokemon App (Must)

    Cocktail App

    Responsive Game of Thrones App



    3.2. Develop Apps

    Quiz App Tutorial

    DevFest App Series (Must) (Must) 

    TicTacToe Game (Optional)

    QRCode Scanner App (Optional)


    4.1. Full Fledged App ( Frontend + Backend )

    Blockchain Smart Contract Flutter App

    QuotesX App



    4.2. Full Fledged App ( Frontend + Backend )

    Flutter Angel App (Optional)

    Scraping Stack Overflow Using Python

    Flutter StackOverflow App


    5.  Flutter + Firebase

    Rapid Prototyping With Flutter & Firebase

    Flutter With Firebase (Updated Series coming soon)

    Flutter Wallpaper App (Learn to deploy to stores) (Must)


    6.1. Rookie / Basic Concepts

    Material Chat App Design (Optional)

    Local JSON App (Must)

    Fetching Data Using HTTP (Must)

    Material Drawer (Must)



    6.2. Rookie / Basic Concepts

    Age Calculator App 

    SQflite + MVP + Login Tutorial

    Flutter App Lifecycle (Must)

    Validate forms (Must)



    6.3. Rookie / Basic Concepts

    Dynamic Theming

    Routes in Flutter (Must)

    Access Camera  (Optional)

    Real Splash Screen Tutorial 



    7.1. Intermediate Concepts

    Flutter Animations

    The Internal Working of Flutter Animations

    Flutter Reactive State Management With MOBX


    7.2. Intermediate Concepts

    BloC Pattern on WhiteBoard (Must)

    Bloc Pattern Demo

    CI / CD in Flutter with Codemagic

    Fastest Flutter Development | VelocityX






    8.1. PRO / Advanced Concepts

    Flutter State Restoration Tutorial

    Async Programming (Must)

    Semantic Versioning (Optional)

    Dart LINQ


    8.2. PRO / Advanced Concepts

    Clipping (Optional) 

    Curve Clipping (Optional)

    Flutter Zoom In Zoom Out And Rotate

    Storing Keys in .env file



    8.3. PRO / Advanced Concepts

    Build first package

    Signature App with Cutompainter

    Internet Connectivity (Must)

    Expandable And Sticky Headers List (Optional)



    8.4. PRO / Advanced Concepts

    Google Static Maps (Optional)

    Build your first Plugin

    MLKit Tutorial (Optional)

    Download Large Files/ Json/ Pdf (Must)



    8.5. PRO / Advanced Concepts

    Material Search Bar (Must)

    Face ID & Touch ID

    Preventing Screenshots

    Gmail Like FAB (Optional)



    8.6. PRO / Advanced Concepts

    ARCore Flutter

    ARKit Flutter

    Flutter PDF Viewer Tutorial

    Background Fetch (Must)


    8.7. PRO / Advanced Concepts

    Click, Pick, Crop & Compress an image (Must)

    Flutter App Bundle (Must) (Must)

    Lazy Loading ListViews

    Styling google maps


    8.8. PRO / Advanced Concepts

    Widgets size and position using Render Object (Must)

    Flutter TensorFlow Lite

    Flutter For Web & Desktop (Must)

    Flutter Windows Desktop (Must)


    8.9. PRO / Advanced Concepts

    Deploying to Github pages 

    Flutter PWA

    Flutter Null Safety Live Migration Tutorial


    Find the entire playlist here - 






     


    Step 1: Click on the 'Search box' in the Taskbar. Step 2: Type 'cmd', right click on the command prompt at the top, and then click on 'Run as Administrator'. Step 3: Copy the command below:- powercfg -duplicatescheme 8c5e7fda-e8bf-4a96-9a85-a6e23a8c635c Step 4: Paste into command prompt by 'ctrl+v', and then hit 'Enter'. Step 5: Close the command prompt. Step 6: Go to control panel, and then click on 'power options'. Step 7: you will see 'high performance' power plan added. you can enable it by clicking on it if you want. It's done

     

    How to check device model using System Information

    1. Open Start.
    2. Search for System Information and click the top result to open the app.
    3. Click on System Summary.
    4. Under the "System Model" field, you'll find the model number of your device.


    How to check device model using Command Prompt

    1. Open Start.
    2. Search for Command Prompt and click the top result to open the console.

    3. Type the following command to get the desktop or laptop model and press Enter:

    wmic csproduct get name



    • Confirm the computer model number.
    • (Optional) Type the following command to get the model and serial number and press Enter:

    wmic csproduct get name, identifyingnumber


    • Confirm the device model and serial number.

    After you complete the steps, the commands will display the model number as well as the serial number of your desktop, laptop, or tablet running Windows 10.


    How to check device model using PowerShell

    To view the computer model with PowerShell, use these steps:

    1. Open Start.
    2. Search for PowerShell and click the top result to open the console.
    3. Type the following command to check the model as well as the serial number of your device and press Enter:
      •    Get-CimInstance -ClassName Win32_ComputerSyst

    5. Confirm the device model number.
    6. (Optional) Type the following command to check the model and serial number and press Enter:

        Get-CimInstance -ClassName Win32_bios




    2. Confirm the model as well as serial number of your laptop or desktop PC.

    Once you complete the steps, the PowerShell commands will reveal the model number and the serial number of your device.



    Angular Programming Computer Internet