On-Demand Video Course

Build Web Parts with the SharePoint Framework (SPFx)

Chapters: 6
Lessons: 39
Hours: 5+

Web parts are the original components developers can use to customize and extend SharePoint going back to the very first version 20 years ago!

Every SharePoint developer must know how to build web parts as they’re the cornerstone to customizing pages in all SharePoint site deployments (including SharePoint Online & SharePoint on-premises). Developer use web parts to create reusable bits of functionality to pages, to deliver single-page apps (SPAs), as well as Microsoft Teams tabs and personal apps.

In this course, you’ll learn how to create Web Parts & custom property panes with the SharePoint Framework (SPFx).

The chapters in this course are included in our Mastering the SharePoint Framework course’s Fundamentals bundle.

Click here to view the complete chapter & lesson syllabus of the Mastering the SPFx course, including the Fundamentals bundle.

Meet your Instructor » Andrew Connell
Microsoft MVP, Microsoft 365 Development
Andrew is a long-time web developer who's worked with every SharePoint development model going back to SharePoint Portal Server 2003. He's seen farm solutions, sandbox solutions, add-ins, JavaScript injection... if you can do it in SharePoint, Andrew's done it!
His work with the SharePoint Framework and Microsoft goes back prior to the first public release in early 2017. Andrew's taken all this experience, knowledge, guidance and packed it into this course, Mastering the SharePoint Framework. Learn the SharePoint Framework with Andrew from 41+ hours of theory, explanations, and demos across 250+ lessons in his flagship course, Mastering the SharePoint Framework!

Start Building Web Parts with the SharePoint Framework Today!

What's included

Includes 5+ hours of content in 39 lessons in 6 chapters of in-depth explanation & demos.
Your one-time purchase is for lifetime access to the course. There's no recurring subscription down the road.
Prescriptive guidance & best practices. Every lesson explains how something works more detail than you'll find in the official documentation in an unopinionated way.
Access to private student-only channel in the Voitanos community on Discord where you can ask questions and discuss lessons with your peers & the course author.
Immediate on-demand access to lessons & downloadable resources, available all-day, every-day.
Evergreen content - your enrollment includes access to all future updates of the course.

Pay once, own it forever

$65 USD

Live outside the United States? We support Purchasing Power Parity with discounts up to 60% off!

Enroll Today!

All chapters in this course are also found in our Mastering the SharePoint Framework course bundles. Click here to view the complete chapter & lesson syllabus of the Mastering the SPFx course.

Course Syllabus

Here's what's inside...

Explore what and lessons you'll find in this course.
Every chapter in the course, including lesson descriptions, are as follows:

: This chapter introduces you to the author & instructor of the course, what topics you can expect to learn and find out how to get the most out of this course.
This chapter is included in the Starter bundle of the Mastering the SharePoint Framework course.
Learn more about
this course
Chapter overview
Play 4:53
Course author introduction
In this lesson, learn who your instructor is, and why you should trust AC (me!) with your SharePoint Framework education!
2:11
How to get the most out of the course
Make sure that you get the most out of the course bundle that you subscribed to by watching this lesson! You'll learn how the course is constantly updated, how to be notified of updates, and how to get the details on the versions of different apps or libraries are recorded.
6:53
: This chapter explains why Microsoft created the SharePoint Framework to extend and customize SharePoint sites. You'll learn what the SharePoint Framework is and what scenarios it addresses.
This chapter is included in the Starter bundle of the Mastering the SharePoint Framework course.
Learn more about
this course
Chapter overview
Play 2:16
History of SharePoint development
Before learning about the SharePoint Framework, take a moment to look back at this history of SharePoint development. This will help you understand what you are building when compared to what you used to build.
17:00
Introducing the SharePoint Framework
In this lesson, you'll be introduced to the SharePoint Framework. Learn what it is, what problems it solves, and under which scenarios it should be considered.
9:47
DEMO: Client-side web parts
Let's now see what the user experience is like with the client-side web parts built for the SharePoint Framework. In this demo, you'll see how the add & edit experience is different with these new client-side web parts to the more traditional classic web parts we are used to in SharePoint.
10:02
Comparing SharePoint development options
In this lesson, learn how the SharePoint Framework development differs from the traditional style of SharePoint development options in the past. This will help you understand what you are building and why in the SharePoint Framework.
12:05
SharePoint Framework documentation & resources
While a fantastic resource, this course will likely just be one arrow in your quiver. In this lesson, you'll learn what other resources are available to you for SharePoint Framework development offered by Microsoft.
10:22
: The SharePoint Framework introduces a completely new development toolchain from traditional SharePoint development. This chapter teaches you what this is all about and gets your environment set up.
This chapter is included in the Starter bundle of the Mastering the SharePoint Framework course.
Learn more about
this course
Chapter overview
Play 4:10
Working with command prompts
SharePoint Framework developers will spend a good bit of time on the command line as you'll see throughout this chapter. In this lesson, you'll learn about alternate options you should consider regardless if you are using Windows or macOS as your primary development machine.
5:28
SharePoint solution & add-in vs. SharePoint Framework development
Before diving into the development toolchain for the SharePoint Framework, take a minute to consider what traditional SharePoint development was like. This helps in understanding why we have new tools and how they map to the tools you may have used if you did traditional SharePoint development.
6:02
SharePoint Framework development toolchain overview
This lesson will provide an overview of the SharePoint Framework development toolchain. As you'll quickly see, things are very different if you're a traditional SharePoint developer; you know, those Visual Studio days...
9:17
Setup SharePoint Online development environment
One of the first things you should do is create a development environment where you can test things against a real SharePoint environment. This lesson will show you how to configure your SharePoint Online environment for SharePoint Framework development.
7:12
Node.js & NPM
The modern web development toolchain that Microsoft chose for SharePoint Framework development is rooted in Node.js. In this lesson, you'll learn what Node.js and its associated package manager NPM are and how to install them. Regardless of your primary development platform of choice, you'll learn how to install, configure and manage Node.js on Windows or macOS in this lesson. You'll also see how the popular tool Node Version Manager (NVM), while not required, can be used to manage your installation.
33:01
Yeoman
SharePoint Framework projects are specifically organized files and folders. In this lesson, you'll learn how to install and use the tool Yeoman to simplify the creation of the project.
11:24
TypeScript & type declarations
This lesson will cover TypeScript, a superset of JavaScript. TypeScript is the primary language Microsoft is using for the SharePoint Framework. Among other things, it is best known for adding types to JavaScript & therefore, we'll also discuss type declarations in this lesson.
9:54
Gulp
Going from your code files to an artifact that'll be deployed to run in the context of the SharePoint Framework. This involves running multiple tasks, using a tool called Gulp that you'll learn about in this lesson.
10:07
Webpack
Just like compiled projects, JavaScript projects can consist of multiple source files that are compiled or merged into a single file that is deployed into production. In this lesson, you'll learn about the tool that will do this for us with SharePoint Framework projects: webpack.
5:27
IDEs & editors
In this lesson, we'll look at the different tooling options when creating SharePoint Framework projects.
2:39
: Let's start with a quick hands-on into. In this chapter, we'll create our first project and see it run in a real SharePoint environment. Then we'll make a few changes to experience the dev story.
This chapter is included in the Fundamentals bundle of the Mastering the SharePoint Framework course.
Learn more about
this course
Chapter overview
Play 2:54
Create your first SPFx project
In this lesson, you'll create your first SharePoint Framework project.
11:36
Run and test our project
After creating the project, in this lesson, you'll see how to run and test a SharePoint Framework project.
7:45
Exploring the code
With a project created, this lesson will walk through it and get it running in our test environment.
5:19
Understanding & modifying CSS styles
SharePoint Framework projects, like all other web projects, leverage CSS to control the rendering and styling of a project. This lesson will explain how CSS styles are used.
5:19
Understanding & modifying strings
In this lesson, learn how to work with replaceable strings in SharePoint Framework projects.
5:17
Deploying to SharePoint sites
Once a project has been created, it needs to be deployed to a SharePoint site. While another chapter will go into more depth on this subject, this lesson will explain enough so you understand what the process is like.
11:36
: The SharePoint Framework initially, supported a single component type: client-side web parts. In this chapter, you''ll learn how to create web parts and the files involved within an SPFx project.
This chapter is included in the Fundamentals bundle of the Mastering the SharePoint Framework course.
Learn more about
this course
Chapter overview
Play 3:17
Creating and inspecting client-side web parts
In this lesson, we're going to create our first client-side web part and look at the initial project's code.
14:46
Client-side web part properties
In this lesson, we'll go further with the custom properties you can set in your custom web part's manifest.
8:28
Coding client-side web parts
In this lesson, we'll continue with our web part tour and take it to the next level - let's build something interesting.
9:10
Add configurable properties
In this lesson, you'll learn how to let your users configure the values of properties on the web part that are saved for others to see.
5:01
: In this chapter, you''ll learn the basics of how property panes work within the SharePoint Framework. We''ll also demonstrate all the controls available to developers.
This chapter is included in the Fundamentals bundle of the Mastering the SharePoint Framework course.
Learn more about
this course
Chapter overview
Play 1:46
Understanding how property panes work
In this lesson, we'll review how client-side web parts persist data with public properties and then explore how property panes work in the SharePoint Framework.
4:13
Adding controls to property panes
In this lesson, you'll learn how to add controls to custom property panes.
3:39
Change web part values in property panes
Learn how to manipulate and handle changes in the property pane within your client-side web parts.
4:19
Validate user input
In this lesson, you'll learn how to validate data entered in the property pane controls.
2:57
Adding groups and pages to property panes
Property panes offer the ability to group controls on a single page, as covered in this lesson. This lesson will show you how to collect multiple groups of controls in one or more pages within a property pane.
2:44
Property pane control showcase
This lesson will showcase all the controls (as well as options each one offers) provided by Microsoft for use in client-side web parts.
12:24

Start Building Web Parts with the SharePoint Framework Today!

What's included

Includes 5+ hours of content in 39 lessons in 6 chapters of in-depth explanation & demos.
Your one-time purchase is for lifetime access to the course. There's no recurring subscription down the road.
Prescriptive guidance & best practices. Every lesson explains how something works more detail than you'll find in the official documentation in an unopinionated way.
Access to private student-only channel in the Voitanos community on Discord where you can ask questions and discuss lessons with your peers & the course author.
Immediate on-demand access to lessons & downloadable resources, available all-day, every-day.
Evergreen content - your enrollment includes access to all future updates of the course.

Pay once, own it forever

$65 USD

Live outside the United States? We support Purchasing Power Parity with discounts up to 60% off!

Enroll Today!

Frequently Asked Questions

These are the most common questions we get about this course.

Still have a question? Check the site FAQ for general questions or Contact us!

How's this course, Build Web Parts with the SharePoint Framework (SPFx), related to the course "Mastering the SharePoint Framework"?

Our flagship course, Mastering the SharePoint Framework, covers all aspects of SharePoint Framework (SPFx) development. It’s the best resource to learn everything about the SharePoint Framework, including web parts.

Mastering the SharePoint Framework is available in three bundles: Starter, Fundamentals, & Ultimate. The Fundamentals bundle of that course includes chapters on web parts & property panes which are the exact same chapters found in this course.

What does the Mastering the SharePoint Framework Fundamentals bundle contain that this course, Build Web Parts with the SharePoint Framework (SPFx), is missing?

The Mastering the SharePoint Framework course bundles contain a lot more content on all aspects of the SharePoint Framework. This course only covers Web Parts & Property Panes.

In addition, the Mastering the SharePoint Framework Ultimate bundle contains additional benefits such as monthly office hours & a mastermind group. Refer to the complete benefits included in each Mastering the SharePoint Framework bundle.

How is the content in this course, Build Web Parts with the SharePoint Framework (SPFx), different from the chapters on web parts & property panes in the Mastering the SharePoint Framework course Fundamentals bundle?

There’s no difference in the chapters between the two courses.

This course contains the exact same content found in the chapters on Web Parts & Property Panes found in the Fundamentals bundle of Mastering the SharePoint Framework.

Can I upgrade to a Mastering the SharePoint Framework course bundle if I get this course, Build Web Parts with the SharePoint Framework (SPFx), and want more?

Sure! We’re happy to upgrade your enrollment in this course to the Mastering the SharePoint Framework Ultimate bundle.

Your purchase in this course will be applied as a credit toward the cost of the Mastering the SharePoint Framework Fundamentals or Ultimate bundle.

To arrange an upgrade, please contact us.