Ultimate SwiftUI Series

SwiftUI tutorials for building native app screens, layouts, navigation, and state-driven interfaces.

7 chapters · about 242 min end to end

1. 01Checking Your Tools: Xcode & Your First SwiftUI ProjectSet up Xcode for SwiftUI development, create your first iOS App project, tour every pane of the Xcode window, dissect ContentView, build a second view, and run your app on the Simulator.Beginner · 32 min
2. 02Planning a Paged App: TabView & the Page StylePlan a real SwiftUI app before writing it, then build its paged structure with TabView — editing in the canvas, embedding views in stacks, labeling tabs, switching to the page style, looping with ForEach, and running on a real iPhone.Beginner · 30 min
3. 03Prototyping the Main View: Stacks, SF Symbols & SubviewsLay out ShipShape's busiest screen in SwiftUI — outline it with Text, build a header from SF Symbols, extract and parameterize subviews, model your data with an enum and a static array, play a bundled clip with VideoPlayer, and add a timer, buttons, and a rating row.Beginner · 38 min
4. 04Prototyping the Supplementary Views: Forms, Dates & Layered StacksFinish ShipShape's prototype: lay out the History screen with Form and Section, format dates with a DateFormatter extension and Quick Help docs, model the log with an Identifiable ShipDay and a HistoryStore, hide dev-only sample data in Preview Content, layer a dismiss button with ZStack, reuse and rename HeaderView for the Welcome screen, build a custom Image modifier, and label a Button with text and an SF Symbol.Beginner · 36 min
5. 05Persisting the Release Draft: Codable, Files & Error HandlingGive ShipShape a memory. Model an editable release draft, make it Codable, save it to a property-list file and read it back — and meet the Swift tools that keep file work honest along the way: optionals, guard let, closures and map, throwing functions with do/try/catch, the @Observable store pattern, and a .alert for when disk access fails.Intermediate · 32 min
6. 06Styling ShipShape: Button Styles, Neumorphism & Adaptive LayoutsGive ShipShape a designed look without touching its logic. Build reusable text styles and a custom ButtonStyle, model neumorphic depth with paired shadows, stroke shapes and switch them with @ViewBuilder, size a circle to its content with GeometryReader, write a generic ContainerView<Content> card, paint a LinearGradient header with hard stops, respect the safe area, and adapt to every screen and Dynamic Type size with containerRelativeFrame and ViewThatFits.Intermediate · 38 min
7. 07Visualizing Ship History: Sets, Lists & Swift ChartsTurn ShipShape's raw prep log into something you can read and learn from. Deduplicate and count with a Set, present the data in an editable List with DisclosureGroups, count badges, swipe-to-delete, and an EditButton, add past entries through a graphical DatePicker, then chart it all with Swift Charts — bar, line, point, and stacked marks with a RuleMark goal, gap-filled weeks, and a custom color scale.Intermediate · 36 min