Volto Customization for JavaScript Beginners

Are you new to JavaScript development and eager to explore the world of Volto customization? Unlock the power of Volto, the modern React-based CMS framework for Plone, by joining our comprehensive half day training designed specifically for JavaScript beginners.

Level

Beginner

What You'll Learn:

In this hands-on training, you will embark on a journey to master Volto customization from the ground up. Whether you're a developer looking to expand your skill set or someone entirely new to JavaScript, this course will provide you with the knowledge and tools to excel in Volto development. Here's what you can expect to learn:

• Introduction to Volto: Get acquainted with Volto's architecture, key concepts, and its role in modern web development.

• JavaScript Fundamentals: Build a strong foundation in JavaScript, covering essential topics like variables, functions, and data structures.

• React Essentials: Dive into React, the heart of Volto, and learn how to create dynamic user interfaces using React components.

• Customizing Volto: Explore the art of customizing Volto projects, from theming and styling to creating custom blocks.

• API Integration: Learn how to integrate external APIs into your Volto applications to add new functionalities.

• Building Blocks: Discover the building blocks of a Volto project, including new variations.

• Best Practices: Gain insights into industry best practices for efficient Volto development.

Who Should Attend:

This training program is tailored for:

• JavaScript beginners looking to enter the world of Volto and React.

• Developers interested in extending their expertise to include Volto customization.

Prerequisites:

No prior experience with Volto is required. However, a basic understanding of web development concepts and basic JavaScript knowledge will be beneficial.

Volto Customization for JavaScript Beginners

• 1. Introduction
  • 1.1. Who are you?
  • 1.2. Prerequisites
  • 1.3. Software requirements
• 2. Installation
  • 2.1. Prerequisites
  • 2.2. Bootstrap a new Volto project
  • 2.3. Bootstrap an add-on
    • 2.3.1. Volto addon script
    • 2.3.2. (Optional) Use mrs-developer to sync add-on to GitHub
    • 2.3.3. Add the add-on as workspace
    • 2.3.4. Managing add-on dependencies
    • 2.3.5. Load the add-on in Volto
  • 2.4. Add-ons - first look
  • 2.5. Documentation and Resources
• 3. Most useful volto settings
• 4. Volto Weather Block (custom block)
• 5. Customize Content-type Views and other Components
• 6. Extend volto blocks
• 7. Blocks schema and variations
• 8. Teaser block variations Schema
• 9. Enhance Teaser block with additional data
• 10. Usage of StyleWrapper(Styling Schemas) and StyleMenu
  • 10.1. StyleWrapper(Styling Schemas)
  • 10.2. StyleMenu
• 11. Extending Teasers per type
  • 11.1. Block Extensions
  • 11.2. Grid support to Teasers
• 12. Create a simple listing block variation