Documentation AEM AEM Tutorials AEM Sites WKND Tutorials

Get started with AEM Sites - WKND tutorial introduction

Last update: Mon Dec 04 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

Beginner
Developer

[For publishing from AEM Sites using Edge Delivery Services, click here.]{class="badge positive" title="Publish from AEM to Edge Delivery Services"}

Welcome to a multi-part tutorial designed for developers new to Adobe Experience Manager (AEM). This tutorial walks through the implementation of an AEM site for a fictitious lifestyle brand, the WKND. The tutorial covers fundamental topics like project setup, Core Components, Editable Templates, Client-side libraries, and component development with Adobe Experience Manager Sites.

Overview wknd-tutorial-overview

The goal for this multi-part tutorial is to teach a developer how to implement a website using the latest standards and technologies in Adobe Experience Manager (AEM). After completing this tutorial, a developer should understand the basic foundation of the platform and common design patterns in AEM.

https://video.tv.adobe.com/v/30476?quality=12&learn=on

Transcript

Welcome to the Weekend Tutorial. The goal of this tutorial is to teach a developer how to implement a website using the latest standards and best practices with Adobe Experience Manager.

The tutorial centers around a fictitious lifestyle brand called the WKND. And the tutorial, it’s split into multiple chapters, and starts from the ground up by generating an empty project using the AEM project archetype. Now, the first several chapters focus on implementing a well-structured and styled article page template. And in order to simulate a real-world implementation, we’ll start with design mock-ups created in Adobe XD, and we’ll review how we can inspect these designs, map areas of the mock-ups to components and templates in AEM.

In the process of implementing this article, you’ll learn all about core components, editable templates, integrating CSS and JavaScript RFX, and custom component development. Now, in addition to the tutorial, there’s also a fully reference-able WKND site implementation. The WKND reference site is an extension of code and concepts built in the tutorial; just has more pages, templates, and content. After completing the tutorial, you’ll have the basic knowledge of AEM design and development patterns to explore the full reference site on your own. All of the code, including the finished reference site, can be found on GitHub. This includes branches to start each chapter with corresponding solution branches if you ever get stuck. So have fun developing with Adobe Experience Manager and the WKND Tutorial. -

Options for starting a Sites project

There are two basic approaches to starting an AEM Sites project.

AEM Project Archetype - Traditional approach to AEM development by generating a minimal AEM project using a Maven template. This is the recommended approach for AEM 6.5/6.4 projects and AEM as a Cloud Service projects that anticipate heavy customization. The tutorial offers a deeper dive into AEM development.

Start the tutorial with the AEM Project Archetype

AEM Site Templates - Also known as Quick Site Creation, a low-code approach to generating an AEM Site by using a pre-defined Site Template. Use out of the box components and templates to quickly get a site up and running. Use a theming workflow to apply brand-specific styles and customizations with just CSS and JavaScript. Recommended for new projects and developers. Only available for AEM as a Cloud Service.

Start the tutorial using a Site Template

Adobe XD UI Kit

To make this tutorial closer to a real-world scenario Adobe’s talented UX designers created the mockups for the site using Adobe XD. Over the course of the tutorial various pieces of the designs are implemented into a fully author-able AEM site. Special thanks to Lorenzo Buosi and Kilian Amendola who created the beautiful design for the WKND site.

Download the XD UI kits:

Reference Site reference-site

A finished version of the WKND Site is also available as a reference: https://wknd.site/

The tutorial covers the major development skills needed for an AEM developer but will not build the entire site end-to-end. The finished reference site is another great resource to explore and see more of AEM’s out of the box capabilities.

To test the latest code before jumping into the tutorial, download and install the latest release from GitHub.

Powered by Adobe Stock

Many of the images in the WKND Reference website are from Adobe Stock and are Third Party Material as defined in the Demo Asset Additional Terms at https://www.adobe.com/legal/terms.html. If you want to use an Adobe Stock image for other purposes beyond viewing this demo website, such as featuring it on a website, or in marketing materials, you can purchase a license on Adobe Stock.

With Adobe Stock, you have access to more than 140 million high-quality, royalty-free images including photos, graphics, videos and templates to jumpstart your creative projects.

Next Steps next-steps

What are you waiting for?! Learn how to generate a new Adobe Experience Manager project using the AEM Project Archetype or create a site using a Site Template.

recommendation-more-help

b2a561c1-47c0-4182-b8c1-757a197484f9