Duration of the online course: 3 hours and 57 minutes
New
Free course on WordPress Full Site Editing with Gutenberg. Build a complete website using block themes, templates, patterns, and responsive layouts.
In this free course, learn about
Getting Started with Full Site Editing (FSE)
Site Editor, Global Styles, and Core Theme Structure
Building the Home Page with Gutenberg Blocks
Patterns, Reusable Layouts, and Page Building
Blog Templates and Content Archives
Search, Taxonomy Templates, and Contact Page
Course Description
Learn how to build a complete website with WordPress Full Site Editing and the Gutenberg block editor through a practical, project-based workflow. This free course in web development focuses on modern site building with block themes, helping you understand how today’s WordPress design system works from the ground up.
You will explore the key differences between Full Site Editing and classic theme approaches, then get comfortable navigating the Site Editor, templates, and template parts. Step by step, you will set up essential pages and core site settings, and configure global design controls such as typography, colors, and block styles to create a consistent look across your site.
As you progress, you will design and refine critical layout elements like a responsive header and footer, and learn how to structure content using default blocks as well as theme builder blocks. The course guides you through creating a polished homepage layout with sections such as a hero area, featured video, services, calls to action, testimonials, and appointments, while showing how patterns can speed up building repeatable designs.
You will also work with blog-focused templates by creating a custom blog archive, adding a sidebar, and building a tailored single post layout. Finally, you will learn how to create search results and category archive pages, plus a contact page using forms and pattern-based templates, including practical styling touches like customizing a submit button with CSS and custom classes.
Course content
Video class: 1. Full site editing FSE Gutenberg WordPress Tutorial with Real Project02m
Exercise: What is the main benefit of WordPress Full Site Editing (FSE) with Gutenberg?
Video class: 2. Create Necessary Pages and Basic settings05m
Video class: 3. Difference between Full site editing (FSE) and the previous Version of WordPress theme03m
Exercise: In a Full Site Editing (FSE) WordPress theme, what replaces the old Customizer-based approach for changing site-wide design settings like colors and typography?
Video class: 4. Understanding the Full Site Editing FSE Gutenberg editor06m
Exercise: In WordPress Full Site Editing, which Editor section lets you manage and create theme templates like Single Post, Index, and Home?
Video class: 5. Configure the Global Typography, Colors and Blocks07m
Exercise: Where do you edit and apply the theme’s primary color in WordPress Full Site Editing global styles?
Video class: 6. Create A Header using Gutenberg FSE Features14m
Exercise: Which method is used to edit the site header as a reusable Template Part in WordPress Full Site Editing?
Video class: 7. Create a Footer area using the Gutenberg Full Site Editing FSE Features15m
Exercise: When customizing the footer navigation links in a WordPress Full Site Editing footer, what should you change to make the menu display as a vertical list?
Video class: 8. How to Make Header and Footer responsive using the Gutenberg Full Site Editor10m
Exercise: How was the header fixed on tablet/mobile so the social icons and buttons row doesn’t break the layout?
Video class: 9. Create and understand the Single Page template in Gutenberg05m
Exercise: Which block must be included in a page template to ensure the page content displays on the front end?
Video class: 10. Discussion about the Default Blocks and Theme Builder Blocks inside the Gutenberg Editor05m
Exercise: In Full Site Editing themes, which block category contains items like Navigation, Site Logo, and Template Part for building global site structure?
Video class: 11. Home - Create a Hero Area using the Gutenberg Editor with default 2022 WordPress theme14m
Exercise: Which Gutenberg block is recommended for creating a full-width hero section with a background image on the Home page?
Video class: 12. Create Featured Video area using the Gutenberg Block editor12m
Exercise: When an image block is aligned to the right, which class is typically added to the block that may require updating your CSS selector?
Video class: 13. Services section area using Gutenberg Block Editor06m
Exercise: How is the services-style section built so it can be quickly repeated across three columns?
Video class: 14. Another Service Section Part 2 using Gutenberg Editor07m
Exercise: When building the section layout, which block is used first to add a background image and make the area full width?
Video class: 15. Call to Action section using Gutenberg Block and 2022 WordPress theme05m
Exercise: When duplicating an existing section to create a similar one, which key typography change is made to match the new design?
Video class: 16. Testimonial section using the Gutenberg Editor and 2022 WordPress theme09m
Exercise: When adjusting spacing in a Gutenberg section, what values were set for the top and bottom padding to fix the missing padding issue?
Video class: 17. Create an Appointment Section using Gutenberg19m
Exercise: When the editor doesn’t offer a “Section” block, which block is used to create the new “Make an Appointment” section container?
Video class: 18. How to style WP Form Submit Button using Custom CSS and custom class03m
Exercise: How can you style a WPForms submit button to match your site’s default button style in Full Site Editing?
Video class: 19. How to use WordPress Patterns07m
Exercise: How can you quickly build an About page layout in WordPress Full Site Editing without designing it in Figma?
Video class: 20. How to use WordPress Patterns09m
Exercise: What is the best way to reuse the same page header on multiple pages in WordPress Full Site Editing?
Video class: 21. Custom Blog Archive using Gutenberg FSE Block Editor - Part 112m
Exercise: When a static homepage is set in WordPress, which template should be edited to design the blog archive page in Full Site Editing?
Video class: 22. Custom Blog Archive using Gutenberg FSE Block Editor - Part 207m
Exercise: Which block is used to build a dynamic list of posts on the blog archive page?
Video class: 23. Custom Blog Archive with Sidebar area using Gutenberg FSE Block Editor Part 317m
Exercise: In Full Site Editing, where should you place the Columns block to create a blog layout with a right sidebar?
Video class: 24. Create a Custom Single Post page using Gutenberg08m
Exercise: What was the main layout change applied to improve the single post template design?
Video class: 25. Custom Search result page using Gutenberg Full site Editing08m
Exercise: Which template should you edit to customize the search results page in WordPress Full Site Editing?
Video class: 26. Custom Category Archive page using Gutenberg Editor04m
Exercise: Which template should you edit in the Site Editor to customize how category pages (e.g., /category/travel/) display?
Video class: 27. Contact Page using WPForms and Pattern Template04m
