MASTER-SHAREPOINT.AW1

Mastering SharePoint Framework

Master the SharePoint Framework course to learn new skills, upgrade your expertise, and grow your career with fun, hands-on lessons.

58 Interactive Lessons and 278 topics mapped to the official exam objectives

Intermediate Self-paced · 1 year access

58Interactive Lessons

278Topics

01 / Skills you'll get

What you will be able to do

Try Free → No credit card required

Enroll in our SharePoint Framework course to master client-side development and build powerful, modern SharePoint solutions from scratch.

In this course, you’ll learn SharePoint Framework with hands-on projects — setting up your environment, developing web parts with React, Angular, and Knockout, deploying to Azure CDN, and integrating Microsoft Graph. Discover best practices for debugging, upgrades, CI/CD pipelines, and even extending Microsoft Teams with SPFx.

From basic web parts to advanced customizations, you’ll gain real-world skills to solve business challenges and boost your career as a SharePoint developer.

SPFx web parts: Develop custom solutions using React, Angular, and Knockout JS.
SPFx solutions deployment: Host web parts on Azure CDN, SharePoint libraries, and Office 365 CDN.
APIs integration: Connect to Microsoft Graph, third-party APIs, and Azure Functions.
Extend SharePoint & Teams: Create SPFx extensions, custom app pages, and Microsoft Teams tabs.
CI/CD pipelines: Automate deployments using Azure DevOps.
SPFx optimization: Master logging, testing (Jest/Enzyme), and performance best practices.

Course Highlights

58 Structured Lessons Comprehensive coverage of core course objectives
1 Year Full Access Self-paced learning accessible anytime on all devices

02 / Lessons & labs

See exactly what you will learn and practice

Download outline (PDF)

Lessons

58 Interactive Lessons · 278 topics

01 Preface

02 Getting Started with the SharePoint Framework 8 topics

SharePoint Evolution Across Versions
Birth of the SharePoint Framework
Key Features of the SharePoint Framework
Script Editor Web Part vs App Part vs the SPFx Web Part
Lightweight Components/Tools Used (SPFx Toolchain)
ALM of the Client-side Web Part
Setup the Developer Environment for SPFx
Conclusion

03 Develop Your First SPFx Web Part 2 topics

Features of SPFx Client-side Web Parts
Conclusion

04 SPFx Web Part Property Pane 4 topics

Property Pane Metadata
Supported Typed Object Properties
Test the Property Pane
Conclusion

05 Custom Control for the Web Part Property Pane 7 topics

Build the List Dropdown Custom Control
Define the Web Part Property
Add the Dropdown Property Pane Control
Add List Dropdown to the Property Pane Control
Use the Dropdown Property Pane Control in the Web Part
Test the Custom Property Pane
Conclusion

06 PnP Control for the Web Part Property Pane 3 topics

PnP Reusable Property Pane Controls
Use List Picker Control in the Web Part Property Pane
Conclusion

07 CSS Considerations 4 topics

Manage CSS files in the SPFx solution
Use of Sass
Override externally referenced CSS
Conclusion

08 Configure the SPFx WebPart Icon 5 topics

Out-of-the-box look and feel
Office UI Fabric Icons
Use an External Icon Image
Use the base64 Encoded Image
Conclusion

09 Examine SPFx WebParts on Modern SharePoint 3 topics

Understand the SharePoint Workbench
Configure SPFx web parts for Modern Pages
Conclusion

10 Host SPFx WebParts from MS Azure CDN 5 topics

Configure the MS Azure Storage Account
Configure the BLOB container
Enable Azure CDN for Storage Account
Configure the SPFx Solution to use Azure CDN
Conclusion

11 Host SPFx WebParts from the Office 365 Public CDN 3 topics

Configure the CDN for the Office 365 Tenant
Setup the New Office 365 CDN
Conclusion

12 Host SPFx Web Parts From the SharePoint Document Library 4 topics

Deployment to CDN
Configure the SharePoint Library as CDN
Configure the SPFx Solution for the SharePoint Library CDN
Conclusion

13 Integrating jQuery with SPFx WebParts 2 topics

Integrate jQuery with the SPFx Web Part
Configure the Required Packages and Dependencies

14 CRUD Operations with No Framework 3 topics

Develop a SPFx Solution with No Framework for CRUD operations
Configure the Property for the List Name
Conclusion

15 CRUD Operations with React JS 13 topics

Brief about React JS
The SPFx Solution for CRUD operations with React JS
Configure the Property for the List Name
Add Controls to the WebPart
Implement the Create Operation
Implement the Read Operation
Implement the Update Operation
Implement the Delete Operation
Create Operation
Read Operation
Update Operation
Delete Operation
Conclusion

16 CRUD Operations with AngularJS 17 topics

Brief information about AngularJS
Create the SPFx Solution
Configure AngularJS
Configure the Property for List Name
Build an Angular application
Implement the Create Operation
Implement the Read Operation
Implement the Update Operation
Implement the Delete Operation
Configure the Controller
Configure the Module
Add Controls to the WebPart
Create Operation
Read Operation
Update Operation
Delete Operation
Conclusion

17 CRUD Operations Using Knockout JS 14 topics

Brief information about KnockoutJS
Create the SPFx Solution
Configure Property for List Name
Implement the Create Operation
Implement the Read Operation
Implement the Update Operation
Implement the Delete Operation
Add Controls to the Knockout template
Test the WebPart
Create Operation
Read Operation
Update Operation
Delete Operation
Conclusion

18 CRUD Operations with SP-PnP-JS 15 topics

Brief information about SP-PnP-JS
Create the SPFx Solution
Configure sp-pnp-js
Configure Property for List Name
Add Controls to the WebPart
Implement the Create Operation
Implement the Read Operation
Implement the Update Operation
Implement the Delete Operation
Test the WebPart
Create Operation
Read Operation
Update Operation
Delete Operation
Conclusion

19 Transition to @pnp/sp from sp-pnp-js 7 topics

Why sp-pnp-js is deprecated?
The SPFx WebPart with sp-pnp-js
Code the WebPart
Test the WebPart
Transition to @pnp/sp from sp-pnp-js
Test the web part after the @pnp/sp transition
Conclusion

20 SPFx Development with ReactJS 5 topics

Life with JavaScript before React JS
Overview of ReactJS
React/Virtual DOM
Primary Building Blocks of React
Conclusion

21 React Lifecycle Events in SPFx 3 topics

React Component Life Cycle
Render Method of the React Component
Conclusion

22 Autobind Control Events in SPFx 4 topics

Develop the SPFx Web Part
Binding the event to the control
Binding all the events at once
Conclusion

23 Partial State Update for React-based SPFx WebParts 4 topics

React State
Spread operator
Test the WebPart
Conclusion

24 Using Office UI Fabric in SPFx 7 topics

The UI Challenges
Overview of Office UI Fabric
Office UI Fabric for the SharePoint Framework
Office UI Fabric Components
Use Office UI Fabric Components in the SPFx WebPart
Implement the Greet Message WebPart using Office UI Fabric
Conclusion

25 Provision SharePoint Assets in SPFx Solutions 5 topics

SharePoint Assets
Create the SPFx Solution
Add SharePoint Assets to the SPFxSolution
Package the assets as part of the SPFx Solution
Conclusion

26 Connect to the MS Graph API with MSGraphClient 4 topics

Brief information about Microsoft Graph
MSGraphClient to consume the Graph APIs
Retrieve User Information using MS Graph
Conclusion

27 Connect to the MS Graph API with AadHttpClient 6 topics

AadHttpClient vs MSGraphClient
Access MS Graph using AadHttpClient
Get user details using MS Graph
Configure your Office 365 Tenant as the First Release Tenant
API Management
Conclusion

28 SPFx Logging Mechanism 3 topics

Understand the Logging API
Develop the SPFx Solution for Implementing Logging
Conclusion

29 Debug SPFx Solutions 7 topics

Develop the SharePoint Framework Web Part
Debugging with a Browser
Debug while developing
Debug with Visual Studio Code
Debugging on the Local Workbench
Debugging on the Hosted Workbench
Conclusion

30 Overview of SPFx Extensions 4 topics

SharePoint Framework Extensions
Update the SPFxYeoman Generator
Create the SharePoint Framework Extensions Project
Conclusion

31 SPFx Extensions-Application Customizer 4 topics

Overview of an Application Customizer
Application Customizer the SPFx Solution
Implement the Application Customizer
Conclusion

32 Extend an Application Customizer with React Components 3 topics

Generate the SPFx Solution for an Application Customizer
Application Customizer Implementation
Conclusion

33 SPFx Extensions-Field Customizer 4 topics

Overview of a Field Customizer
Column Formatting VS SPFx Field Customizer
Develop the SPFx Solution for a Field Customizer
Conclusion

34 SPFx Extensions-ListView Command Set 7 topics

Overview of ListView Command Set
Develop the ListView Command Set SPFx Solution
Develop the ListViewCommand Set
Debugging the List View Command Set
Define the ListView Command Sets
Implement the ListView Command Set Customization
Conclusion

35 Anonymously Call MS Azure Functions 5 topics

Introduction to Azure Functions
Empower CORS for the Azure Function
Call the Azure function from the SPFx Web Part
Call Anonymous Azure Function from the Web Part
Conclusion

36 Securing Azure Functions with Azure Active Directory 4 topics

Azure Active Directory App Registration
CORS Enablement for Azure Function
Develop the Azure Function with Visual Studio
Conclusion

37 Consume Azure AD Secured Function with SPFx 4 topics

Consume the Azure function with the SPFx web part
Set permissions to the SPFx webpart
Grant permissionsto test the webpart
Conclusion

38 Implementing Separation of Concerns (SoC) 5 topics

Separation of Concerns (SoC)
Develop an SoC scenario
Mock data service implementation
Consume service inside the SPFx webpart
Conclusion

39 Localization Support for SPFx 3 topics

Develop localization solutions for SPFx
Support for localization
Conclusion

40 Office 365 CLI 6 topics

Installation of the Office 365 CLI
Usage of the Office 365 CLI
Office 365 Tenant Management
Office 365 CLI Cmdlets
Office 365 CLI Upgrade
Conclusion

41 SPFx Solutions Upgrade 3 topics

The upgrade puzzle
The upgrade plan
Conclusion

42 SPFx Solution Upgrade with the Office 365 CLI 4 topics

Introduction to the Office 365 CLI
SPFx Solution Upgrade to the Latest Version
SPFx Solution Upgrade to a Specific Version
Conclusion

43 Common Issues and Resolutions with Upgrading npm Packages 3 topics

Why to upgrade npm packages?
Common Issues and Resolutions for npm Upgrade
Conclusion

44 Extend MS Teams with SPFx 6 topics

Develop the MS Teams Tab SPFx Solution
Support for MS Teams in SPFx
Handle MS Teams Context in the Web Part
Package and Deploy the web part to SharePoint
Make the web part accessible in MS Teams
Conclusion

45 Library Component Types 7 topics

Introduction to a Library Component
Create the Library Component
Develop the Library Component
Utilize the library component in the SPFx web part
Deploy a library to the tenant app catalog
Consume the Library from the Tenant App Catalog
Conclusion

46 Develop Custom App Pages with SPFx 5 topics

Develop custom app pages with SPFx
Configure the web part for a single part page
Deploy the Package
Verify the Custom App Page Creation
Conclusion

47 Optimizing SPFx Solutions 2 topics

SPFx implementation common issues
Conclusion

48 Unit Test with Jest and Enzyme 4 topics

Need of unit tests
Implement Unit Tests
Automate Unit Testing with Azure DevOps
Conclusion

49 DevOps for SPFx 5 topics

Continuous Integration (CI)
Create a Build Definition
Continuous Deployment
Setup Deployment Trigger
Conclusion

50 Query User Profile Details 3 topics

User Profile Service Outline
Query User Profile Details from SPFx
Conclusion

51 Querying SP Search Results 3 topics

SPFx Web Part to Query Search Results
Implement Service to Query Search Results
Conclusion

52 React-based Tree View 3 topics

Develop a SPFx Solution for a React-based Tree View
Tree View Control
Conclusion

53 React-based Carousel 3 topics

Develop the SPFx Solution for Carousel
NPM Carousel Package
Conclusion

54 Implement a React-based Organogram 2 topics

Develop the SPFx Solution for an Organogram
Conclusion

55 Integrating Adaptive Cards with SPFx 2 topics

Introduction to Adaptive Cards
Conclusion

56 Integrating the Google API with SPFx Functions 4 topics

Google Fit REST API
Google Developer Playground
Develop the SPFx web part to display Google Fit information
Conclusion

57 SPFx Development with SharePoint On-Premises 2 topics

Decide the SPFx Version
Conclusion

58 APPENDIX 1 topics

SPFx Commands Cheat Sheet

03 / FAQs

Questions before you start

Who is this course for?

This SharePoint Framework course is designed for:

Aspiring SharePoint developers looking to build modern solutions.
Experienced SharePoint professionals transitioning from classic to client-side development.
Developers familiar with JavaScript/TypeScript who want to specialize in SPFx.

What are the prerequisites?

You should have:

Basic knowledge of JavaScript/TypeScript and Node.js.
Experience with SharePoint Online (intermediate level).
Familiarity with Visual Studio Code.

What tools and technologies will I learn?

The SharePoint developer course covers:

SPFx toolchain (Node.js, npm, Yeoman, Gulp, Webpack).
Frameworks like React, Angular, and Knockout for SPFx web parts.
Deployment to Azure CDN, Office 365 CDN, and SharePoint libraries.

How is SPFx different from classic SharePoint development?

SPFx is client-side, framework-agnostic, and uses modern tools (e.g., TypeScript, React), unlike server-side classic solutions.

Master SPFx Development Now

Develop your SPFx skills while you build, deploy, and customize powerful SharePoint solutions as a modern web developer.

1 year of full access
Certificate of completion

Buy Now — $199.99 Try Free

No credit card required