---
title: Apple News Format Tutorials
framework: applenews
role: collectionGroup
path: applenews/apple-news-format-tutorials
---

# Apple News Format Tutorials

Create a basic article and then add advanced design features.

## Overview

Overview In these tutorials, you’ll download article.json files and follow steps to add code. Preview your changes in News Preview as you go. If you are not familiar with JSON or Apple News Format, see JSON Concepts and Article Structure before you get started. Requirements Before beginning the tutorial, make sure you have the following installed: Java 8 News Preview The required version of Xcode for your News Preview version, as specified on the News Preview page. After you install Xcode, launch the application and agree to all license agreements. When you see the Welcome to Xcode window, you have finished installing Xcode. iOS 11 or later SDK. This is part of the Xcode installation. Text editing software of your choice. This is necessary only if you are editing the tutorial files yourself. See Choose a Text Editor.

## Topics

### Introductory Design Tutorial

- [Setting Up the Introductory Tutorial](applenews/setting-up-the-introductory-tutorial.md)
- [Creating Your First Article](applenews/creating-your-first-article.md)
- [Positioning Text Components](applenews/positioning-text-components.md)
- [Adding a Divider](applenews/adding-a-divider.md)
- [Adding an Image and Captions](applenews/adding-an-image-and-captions.md)
- [Adding a Pull Quote](applenews/adding-a-pull-quote.md)
- [Adding a Gallery of Images](applenews/adding-a-gallery-of-images.md)
- [Adding a Mosaic of Images](applenews/adding-a-mosaic-of-images.md)
- [Adding a Tweet](applenews/adding-a-tweet.md)
- [Adding a Podcast](applenews/adding-a-podcast.md)
- [Viewing the Finished Article for the Introductory Design Tutorial](applenews/viewing-the-finished-article-for-the-introductory-design-tutorial.md)

### Advanced Design Tutorial 1: Headers and Parallax Behavior

- [Setting Up the Advanced Tutorials](applenews/setting-up-the-advanced-tutorials.md)
- [About Containers](applenews/about-containers.md)
- [Creating a Layered Header](applenews/creating-a-layered-header.md)
- [Adding Parallax Behavior](applenews/adding-parallax-behavior.md)
- [Viewing the Finished Article for Advanced Design Tutorial 1](applenews/viewing-the-finished-article-for-advanced-design-tutorial-1.md)

### Advanced Design Tutorial 2: Layout and Positioning

- [Creating a Complex, Layered Header](applenews/creating-a-complex-layered-header.md)
- [Creating a Floating Caption](applenews/creating-a-floating-caption.md)
- [Creating an Inset Pull Quote](applenews/creating-an-inset-pull-quote.md)
- [Creating an Inset Photo](applenews/creating-an-inset-photo.md)
- [Adding Color to Text Ranges](applenews/adding-color-to-text-ranges.md)
- [Adding Animations](applenews/adding-animations.md)
- [Adding a Scene](applenews/adding-a-scene.md)
- [Viewing the Finished Article for Advanced Design Tutorial 2](applenews/viewing-the-finished-article-for-advanced-design-tutorial-2.md)

### Advanced Design Tutorial 3: More Ideas

- [Giving the Article a Dark Color Scheme](applenews/giving-the-article-a-dark-color-scheme.md)
- [Adding a Video](applenews/adding-a-video.md)
- [Creating a Sidebar](applenews/creating-a-sidebar.md)
- [Adding a Fixed Image Fill](applenews/adding-a-fixed-image-fill.md)
- [Creating a Newsletter Sign-Up Element](applenews/creating-a-newsletter-sign-up-element.md)
- [Viewing the Finished Article for Advanced Design Tutorial 3](applenews/viewing-the-finished-article-for-advanced-design-tutorial-3.md)

### More Examples

- [Examples](applenews/examples.md)

## See Also

### Article Design and Creation

- [Apple News Format](applenewsformat.md)