Building Web Parts with theStop wasting time searching Start building web parts with confidence.
Building web parts using the SharePoint Framework is an essential skill for every SharePoint developer, enabling you to create a modern, user-friendly experience that enhances both the functionality and usability of your SharePoint environment.
In this course, you will master a straightforward approach to creating SPFx web parts and property panes—faster, clearer, and with greater confidence.
Whether you're looking to:
- Deliver top-quality web parts for your clients
- Learn how to create custom property panes for your web parts
- Seamlessly customize any SharePoint site
This course covers it all. You'll get:
- Comprehensive content to master SPFx web parts from end to end
- Lifetime access with ongoing updates to keep your skills sharp
- Supportive student community to ask questions, share experiences, and learn together
Created by Andrew Connell, a 20+ year Microsoft MVP and a trusted expert in the Microsoft 365 ecosystem.
This course gives you the practical skills to build real-world solutions.
No fluff, no guesswork—just actionable, hands-on learning that gets results.
The detailed content from an authority who understands the nuances of self-paced learning truly stands out. The course is designed to adapt to your speed, allowing you to absorb the material thoroughly. Additionally, the availability to repeat sections ensures that you can revisit complex topics as needed, reinforcing your understanding. Even older lessons are useful because the core principles and techniques remain relevant and can be effectively applied to current practices.
Reverend Milton Eugene Futch
Senior Consultant/Trainer
M&M ConsultantsReady to go beyond web parts? Upgrade to the full...
Mastering the SPFx Course
Explore the Full Syllabus
- Master the SPFx from fundamentals to advanced customizations
- Access exclusive lessons and demos
- Stay ahead with lifetime updates
- ...and much more
Step-by-step to create top-tier web parts
Learn faster, build smarter, and become an irreplaceable expert.
Buy once, own forever
No subscriptions. No recurring fees. You get lifetime access to all the content, so you can learn at your own pace and revisit any module whenever you need.
Step-by-step, real-world training
Say goodbye to guesswork. Every module is designed to build your skills step-by-step, with a focus on real-world applications—not just theory. You'll learn to build practical SPFx solutions you can start using right away.
A supportive, active community
Join a private Discord channel exclusively for students. Get help from fellow developers—plus, get priority access to Q&A sessions with Andrew Connell himself.
Lifetime access to future updates
The SPFx is constantly evolving, and so is this course. You'll get access to all future updates, so you can stay on top of the latest changes in the SPFx, ensuring your skills are always up-to-date.
Course breakdown
Everything you need to go from basics to building advanced SPFx solutions.
Course introduction & overview
3 Lessons
3 Lessons
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.
Chapter overview4:53
In this first lesson, I welcome you to the course, explain who the target audience is for the course, and previews the other lessons in this chapter.
Course author introduction2:11
In this lesson, learn who your instructor is, and why you should trust AC (me!) with your SharePoint Framework education!
How to get the most out of the course6:53
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.
Introducing the SharePoint Framework
6 Lessons
6 Lessons
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.
Chapter overview2:16
This brief lesson explains what my goal is in this chapter and what you''ll learn.
History of SharePoint development17:00
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.
Introducing the SharePoint Framework9:47
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.
DEMO: Client-side web parts10:02
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.
Comparing SharePoint development options12:05
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.
SharePoint Framework documentation & resources10:22
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.
Set up your developer environment
11 Lessons
11 Lessons
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.
Chapter overview4:10
This brief lesson will explain what you can expect to find in the remainder of the chapter.
Working with command prompts5:28
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.
SharePoint solution & add-in vs. SharePoint Framework development6:02
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.
SharePoint Framework development toolchain overview9:17
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...
Setup SharePoint Online development environment7:12
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.
Node.js & NPM33:01
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.
Yeoman11:24
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.
TypeScript & type declarations9:54
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.
Gulp10:07
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.
Webpack5:27
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.
IDEs & editors2:39
In this lesson, we''ll look at the different tooling options when creating SharePoint Framework projects.
Your first SharePoint Framework project
7 Lessons
7 Lessons
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.
Chapter overview2:54
This brief lesson will explain what you can expect to find in the remainder of the chapter.
Create your first SPFx project11:36
In this lesson, you''ll create your first SharePoint Framework project.
Run and test our project7:45
After creating the project, in this lesson, you''ll see how to run and test a SharePoint Framework project.
Exploring the code5:19
With a project created, this lesson will walk through it and get it running in our test environment.
Understanding & modifying CSS styles5:19
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.
Understanding & modifying strings5:17
In this lesson, learn how to work with replaceable strings in SharePoint Framework projects.
Deploying to SharePoint sites11:36
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.
Client-side web parts
5 Lessons
5 Lessons
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.
Chapter overview3:17
This brief lesson will explain what you can expect to find in the remainder of the chapter.
Creating and inspecting client-side web parts14:46
In this lesson, we''re going to create our first client-side web part and look at the initial project''s code.
Client-side web part properties8:28
In this lesson, we''ll go further with the custom properties you can set in your custom web part''s manifest.
Coding client-side web parts9:10
In this lesson, we''ll continue with our web part tour and take it to the next level - let''s build something interesting.
Add configurable properties5:01
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.
Property panes for client-side web parts
7 Lessons
7 Lessons
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.
Chapter overview1:46
Just as web parts have been a part of SharePoint since the early days going back to SharePoint 2003, so have the editing experience associated with them: property panes. 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.
Understanding how property panes work4:13
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.
Adding controls to property panes3:39
In this lesson, you''ll learn how to add controls to custom property panes.
Change web part values in property panes4:19
Learn how to manipulate and handle changes in the property pane within your client-side web parts.
Validate user input2:57
In this lesson, you''ll learn how to validate data entered in the property pane controls.
Adding groups and pages to property panes2:44
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.
Property pane control showcase12:24
This lesson will showcase all the controls (as well as options each one offers) provided by Microsoft for use in client-side web parts.
Your instructor
Andrew Connell
Learn the SPFx from a Microsoft MVP & SharePoint Expert
Andrew Connell is a 20+ year Microsoft MVP with unmatched experience in SharePoint development. From farm solutions to add-ins and the SPFx, if it can be done in SharePoint, Andrew's done it. He's been involved with the SharePoint Framework since its early days—even before its public release in 2017—making him one of the most trusted voices in the field.
With over 41 hours of content and 250+ lessons, Andrew brings all his hands-on experience, practical guidance, and industry insights into his SPFx courses. You'll learn the SPFx directly from a recognized leader who's been at the forefront of Microsoft 365 development for years.
Pricing
Invest in your developer career
Instead of trying to figure out what you need to know, get access now and learn
how to build web parts and which areas to avoid.
Building Web Parts with the SPFx
Perfect for developers looking to build top-tier web parts
$65 (one-time)
- 5+ hours of videos & demos
- 6 chapters & 39 lessons
- Build & deploy web parts & property panes
- Add functionality to the SharePoint user-experience (UX)
- Lifetime access to all course material & updates
- Access to student-only channels in the Voitanos community on Discord
All chapters in this course are also found in our Mastering the SharePoint Framework course bundles. Explore the Full Course Breakdown
14-Day Money-Back Guarantee
All sales are final after 14 days from purchase, or once you've watched 25% or more of the course content. If you're not fully satisfied within those first 14 days and have watched less than 25%, we're happy to offer a refund—no questions asked. We're confident this course will give you the skills to master the SPFx and become a developer in demand.
FAQs
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.
