A multi-part tutorial designed for developers new to AEM. Walks through the implementation of an AEM site for a fictitious lifestyle brand the WKND. Covers fundamental topics like project setup, Core Components, editable templates, client libraries and component development.

Overview

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:

  • HTL
  • Sling Models
  • Touch UI
  • Core Components
  • Editable Templates

Estimate 8-10 hours to get through the first 5 parts of the tutorial.

Github

All of the code for the project can be found on Github in the AEM Guide repo:

GitHub: WKND Sites Project

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.

Latest

If you want to play around with the latest code before jumping into the tutorial you can download and install the below package:

Download

WKND Design

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:

Article Mockups
Article Mockup: Desktop, Tablet, and Mobile

The WKND mockups were created using Adobe Experience Design (XD) a design prototyping tool. The full design can be found below:  

Home Page
Home Page Mockup: Desktop, Tablet, and Mobile

Download

Table of Contents

In general each Part of the tutorial takes about 1-2 hours.

Part 1

Project Setup - Covers the creation of a Maven Multi Module Project to manage the code and configurations for an AEM Site.
Maven, Lazybones Template, Eclipse IDE, Core Components, SCM and Github. 

GitHub Link

Part 2

Creating a Base Page and Template - Covers the creation of a base page and an editable template. Core Components of Text, Image, and Title are leveraged to author an initial page.
Editable Templates, Core Components, Content Authoring

GitHub Link

Part 3

Client-Side Libraries and Responsive Grid- Covers creation of AEM Client-Side Libraries or clientlibs to deploy and manage CSS and Javascript for an AEM Sites implementation. Integration with AEM's responsive grid and mobile emulator.
Client-Side Libraries, CSS, Javascript, LESS, Bootstrap, Responsive Grid

GitHub Link

Part 4

Breadcrumb, Title, Content Fragment and Text  - Covers extending Core Components with brand-specific CSS and using Content Fragments for long form article content. Advanced policy configuration of Template Editor.
CSS, Rich Text Editor, Template Editor Policies

GitHub Link

Part 5

Navigation  - Covers dynamic navigation driven by the content hierarchy and fixed navigation populated by content authors. Sling Models, HTL templating language, and dialogs are used to implement the Header and Footer navigation.
Sling Models, HTL, Java, Dialogs

GitHub Link

Coming Soon...

We will continue to add additional parts to the tutorial. Below are topics we expect to cover in the near future:

  • List Component and Tags
  • Extending Page Properties
  • Integrating with Social Media
  • Tile and Card Component

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy