Home - FadiZahhar/umbraco8showandtell GitHub Wiki

Introduction: Building the "Highly Developed" Community Website with Umbraco 8

In this tutorial, we will build a feature-rich community website called "Highly Developed" using Umbraco version 8. This project will guide you step-by-step through the process of translating a complete design wireframe into a fully functional Umbraco CMS-powered site.

"Highly Developed" is envisioned as an interactive online platform dedicated to realistic training and community engagement. The site features dynamic content areas, member registration and authentication, news publishing, and user profile management. Throughout this tutorial, we will demonstrate best practices for working with Umbraco 8, including document types, templates, custom member management, and interactive content.

What You Will Build

By the end of this tutorial, you will have created a website with the following core features:

  • Home Page: A welcoming landing page with an introduction and mission statement, plus quick access to news and other sections.

  • About Page: A static page explaining the site's purpose and providing important links.

  • News Section: Dynamic news listing and news detail pages, supporting rich content and tagging (e.g., "Umbraco Related").

  • User Registration & Authentication:

    • Sign up and login forms
    • Email verification during registration
    • Password reset and account management
    • Profile editing for registered members

  • Member Area: Personalized dashboard for logged-in users to manage their profile, change password, and manage notifications.

  • Contact Form: A site-wide contact form for users to reach the site administrators.

  • Navigation: A consistent navigation menu accessible across all pages (Home, About, News, Forums, Login/Register).

  • Footer: Including privacy policy, contact, and sitemap links.

Key Learning Objectives

Through this build, you will learn how to:

  • Define and implement Umbraco Document Types for structured content (e.g., News, About, Member Profile)
  • Create Umbraco templates and partial views to render each section of the site
  • Set up member registration and authentication workflows with email verification
  • Implement custom profile editing and secure account features for members
  • Build news lists and detail views using Umbraco’s content querying APIs
  • Design reusable navigation and footer components
  • Apply Umbraco best practices for organizing content and templates

Who Is This For?

This tutorial is designed for developers and content managers who want to learn Umbraco 8 by building a real-world site, as well as those looking to see how common community and membership features are implemented in a modern CMS.

Let’s get started on buildin HD+Site+Wireframes.pdf g "Highly Developed" from wireframe to a live, dynamic Umbraco website!

Tutorial Video to Check

  1. Section 8 Home Page (31,32,33,34)
  2. Section 9 About Page (43,44,,45,46,47,48) Section 12: Nested Content, Section 13: The News Article Page, Section 14