The goal for this multi-part tutorial is to teach a developer who is new to AEM how to implement a website in AEM using the latest standards and technologies. The hope is at the end of this tutorial you will understand the basic foundation of the AEM platform and knowledge of some of the common design patterns.
The implementation will only work as-is on AEM 6.3, however many of the topics apply to all version of AEM. The site will be implemented using:
- Sling Models
- Touch UI
- Core Components
- Editable Templates
Estimate 8-10 hours to get through the first 5 parts of the tutorial.
All of the code for the project can be found on Github in the AEM Guide repo:
In addition each part of the tutorial has its own branch, allowing a user to begin the tutorial at any point by simply checking out the branch that corresponds to the previous part. Any issues or problems with the tutorial please create an Issue on Github.
If you want to play around with the latest code before jumping into the tutorial you can download and install the below package:
The WKND is a fake online magazine and blog that focuses on nightlife, activities, and events in several international cities. In order to make this tutorial closer to a real-world scenario we asked one of Adobe's talented UX designers to create the mockups for the site. Over the course of the tutorial we will implement various pieces of the mockup so that we will have a fully authorable AEM site. Special thanks to Lorenzo Buosi who created the beautiful design for the WKND site.
Below are a couple of mockups of the site so you can get an idea of what we will be building: