WordPress: Mastering Full Site Editing

Course details

Full Site Editing (FSE) is the future of WordPress web design. In this comprehensive course, expert tech professional Nyasha Green introduces you to Full Site Editing (FSE) in WordPress. Learn how to design and maintain FSE websites effectively. Explore FSE fundamentals, theme setup, and creating patterns and reusable blocks. Go over converting Figma designs to FSE, building website pages, and enhancing accessibility. By the end of the course, you will be equipped to design and develop modern websites, integrate accessibility, and effectively maintain your FSE websites. You will also have a site that you can use for your portfolio.

Learning objectives
Understand the core principles of Full Site Editing (FSE) and its significance in modern web design.
Configure a local development environment for FSE using Local by WP Engine.
Select and customize the Ollie theme for FSE projects.
Create custom patterns and reusable blocks for efficient web design.
Translate Figma designs into functional FSE blocks.
Build engaging homepage and contact pages using FSE.
Prioritize accessibility in FSE websites.

Concepts

0. Introduction

01 - Learn WordPress full site editing
02 - What you should know

1. Introduction to Building WordPress Websites

03 - What is full site editing
04 - Navigating the FSE interface
05 - Setting up your local install
06 - Importing your website's posts and media

2. Analyzing the Figma Design

07 - Analyzing the Figma design for the website
08 - Extracting key design elements from Figma

3. FSE Theme Setup

09 - Selecting and activating your full site editing theme
10 - Customizing the theme styles
11 - Installing your site's fonts
12 - Setting your site's typography
13 - Setting your site's colors
14 - Setting your block's styles in the editor - Part 1
15 - Setting your block's styles in the editor - Part 2

4. Creating Patterns and Reusable Blocks

16 - What are patterns
17 - Turning Figma sections into patterns
18 - Creating the header using patterns
19 - Styling the header in FSE

5. Building the Website Pages

20 - Creating a page template
21 - Adding synced patterns to templates
22 - Creating the homepage
23 - Building the post blocks
24 - Creating the footer
25 - Building the Contact page
26 - Accessibility in FSE

Conclusion

27 - Continue your WordPress FSE learning journey

WordPress: Mastering Full Site Editing

Authors

Nyasha Green