This beginner-to-advanced course teaches iOS 16 development with Swift and SwiftUI, using a project-based approach. You’ll start with the fundamentals of Swift programming—variables, constants, loops, arrays, conditionals, structs, enums, and tuples—and advance to building interfaces with SwiftUI components like HStack, VStack, ZStack, grids, images, and AsyncImage. The course covers efficient Xcode 14 usage, MVVM architecture, and practical app-building techniques. By the end, you’ll be able to independently create apps such as a greetings app, tip calculator, recipes app, Conway’s Game of Life, and more, mastering both Swift programming and iOS app development.
Who should take this Course?
What you will learn
Learn the iOS 16/SwiftUI programming language fundamentals
Learn HStack, VStack, ZStack, colors, text, frames, grids, and images
Learn to efficiently use Xcode 14, hotkeys, and code snippets
Learn to add hypertext markup language (HTML) to color extensions
Create Brevis, quote of the day, mystic puzzle, and Speed code apps
Build user interfaces for body shape, meditation, finance, and tasks
Course Outline
Introduction
Introduction
Install Xcode 14 and SF Symbols
Introducing Xcode 14
Xcode 13 Versus Xcode 14
Take a Tour of Xcode + Hotkeys
Swift Programming Language Fundamentals
Introduction to Swift Fundamentals
Variables and Let Constants
String Arrays and For Loops
Structs and Arrays of Structs
Optionals, If, If Let
A Note about Line Breaks
Int, Double, Float, Type Of
Division, Modulo, More For Loops and If Statements
Simplify the Code with a Function
Multiline Strings
More on Loops (For, While, and Repeat)
The Guard Statement
Tuples and Named Tuples
Enumerations
Named Enumerations
The Greetings App
Introduction to the Greetings App
Introducing Modifiers
More Text Views in a VStack
Adding a View
Adding a Struct and an Array of Structs
Simplifying the Code with the ForEach View
Add the Greeting Title and Some Spacers
Cleaning Up the Code by Refactoring and Adding a Background Color
Adding a Cool Gradient Background
Random Color on Tap Gesture
Rotation Animation of a Circle Using a @State Variable
Creating a Random Caption
Dark Mode
Creating an App Icon
Resizing the App Icon
Clear the Background of the App Icon
Create a Launch Screen
Adding Documentation to the Views
Localizing Your App
Adding Yet Another Language to the App
Change Language in Preview and Simulator
Code Factorization and Some Thoughts on Landscape Mode and iPad Support
Landscape Views
Adapting to Portrait and Landscape Mode
Supporting iPad
Final Touch - Search Project - iOS 16
Programmatically Change Current Language
Persist Current Language
An Interesting Question: Color.orange Versus .orange?
Appendix: Alternative Way to Generate an App Icon
Mark, Todo, Minimap, and Navigation
Appendix: Preview Discussion
SwiftUI Basics
SwiftUI Basics: HStack, VStack, ZStack, Colors, and Gradients
State Variables, Let Constants, Tap Gesture
MultilineTextAlignment, Rotations in 3D
SwiftUI Basics Animate Font
Exploring Grids in iOS 16
Navigation Stack and Textfield
Animate Everything
Simple List Example
Video Exercise: Arithmetic Progression
Exploring Xcode's Library Part 1
Exploring Xcode's Library Part 2
Exploring Images and AsyncImage
Import Images and Creating Useful Enums
Image Scale to Fit Versus Fill
Aspect Ratio
Scroll and Iterate Through Images
Scroll and Overlay with Ease in Animation
Introducing AsyncImage
AsyncImage Continued
Simplifying the AsyncImage Code
Images and LazyVGrid
Video Exercise: Play/Pause Image
Solution: Play/Pause Image
Xcode Code Snippets
Code Snippets
Page Tabbed View
Button Snippets
Gradient Text and Masks
Fitting the Gradient to the Text
Nice View Snippets
Image URL Snippet
Awesome Three Button Default Snippet
Animate Font, Font Weight, and Foreground Color
Random Colors and Random Background Color
Random Colors and Random Background Color
Cool and Interesting Questions
NavigationStack - Replace Back Button - Part 1
NavigationStack - Replace Back Button - Part 2
NavigationStack - Replace Back Button - Part 3
FlexToGrid Challenge 50 25 25 Split
NavigationStack Title Color
Drag Image from Above - Part 1
Drag Image from Above - Part 2
Drag Image from Above - Part 3
Multi-Color Glowing Border Using Trim
Generic ToolTipView Using LongPressGesture
Challenge: Trimmed Split Capsule
Chocolate View - Part 1
Chocolate View - Part 2
Calculator Supporting Light and Dark Mode
Introduction to the Light and Dark Mode Calculator
Calculator - Getting Started
Dribble Design and Selecting the Calculator Colors
Dark and Light Mode
Colors for Moon and Sun
Continue Main Calculator View
Implement Sun Moon View
Implementing the Computation View
The Enumerations
Button View
Buttons Model and Calcs Button View
String Helper Functions
Implementing the Calculator Logic - Part 1
Implementing Equality Logic
Implementing the Decimal Point Logic
Refactoring Code
iPad Detection
Adapting to iPad - Part 1
Adapting to iPad - Part 2
UIScreen - Begone!
No Symbol Found - Away!
Introduction to the MVVM Design Pattern with Recipes
MVVM Example - Recipe Model
MVVM Example - Recipe View Model
MVVM Example - ListItem View
MVVM Example - Improving the View
MVVM Example - ShowRecipeView
MVVM Example - Touch Up the Image
FizzBuzz and Programs That Write Programs!
Introduction to FizzBuzz
Introducing FizzBuzz in the Playground
The Main View
The About View
Background Image View
Completing the About View
The FizzBuzz View
FizzBuzz Algorithm Model
FizzBuzz Algorithm View Model
Indent String extension
Complete the FizzBuzz Model
Code Creator View
Create a Color Extension Based on an HTML Page
Introduction to Programmatically Converting HTML to a Color Extension
Extract Color from HTML Code
Get Color Name
Get RGB Color
Generate Swift Code
Extending Color
Random Color Extensions
Grid of Colors Test
Video Exercise to Test Your Understanding
Exploring Charts
Introduction to Charts
Folder Structure and Arc View
Random Arc from Color List View
Color Button View
Color Button Test and Bar Chart - Part 1
Color Button Test and Bar Chart - Part 2
Reorganize Chart Series - End of Chart Demo 1
Demo 2 - First Exploration of Bar Charts, Annotations, Chart Scale, ChartXYAxis
Foreground Style, Multiple Groups
Legend Visibility and Legend Position/Alignment
Demo 3 - ForEach, Custom Colors
Demo 3 - Bar, Line, Area Charts
Demo 3 - Toggle Vertical and Horizontal Mode
Demo 3 - Random Colors - Part 1
Demo 3 - Random Colors - Code Refactorization
Demo 3 - Random Colors - Complete the Bar Chart
Demo 4 - Getting Started
Demo 4 - Adjusting View, Adding Title with Alignment
Demo 4 - Title Alignment Button
Demo 4 - Supporting Edit Mode, Add Share Button
Demo 4 - Draggable Rule Mark - Part 1
Demo 4 - Draggable Rule Mark - Part 2
Demo 4 - Draggable Rule Mark - Part 3
Demo 4 - Adding an Annotation for Edit Mode
Demo 4 - ChartItem Struct
Demo 4 - Refactoring with the Amazing ChartItem
Demo 4 - Refactoring LeftChartButtonsView
Demo 4 - Refactoring RightChartButtonsView
Demo 4 - Refactoring Bar Chart Horizontal View
Demo 4 - Refactoring LineChartHorizontalView
Demo 4 - ChartDrag View modifier
Demo 4 - Refactoring LineChartVerticalView
Demo 4 - Combine Line and Area Views
Demo 4 - Yes! It Works!
Demo 4 - Adjusting Color Button for Line and Area Views
Demo 4 - Edit Title and Add Border
Funnel Chart Exercise
Funnel Chart Solution
Alarm App
Create the Alarm Project
Creating the App Icon
Folder Structure
Localization
Color Palette
Time of Day Icon - Part 1
Time of Day Icon - Part 2
The Time Model
Time and Date Support
The Alarm Model
Dummy Alarm Data
Splash Screen View Structure
Splash Screen: Animated Circles Subview
Four Cool Circles View
Splash Screen: Animate Four Cool Circles
Cool Text View and Custom Fonts
Import Image and Complete Splash Screen
Enable Notifications View - General Structure
MainGradient, ButtonView, and Complete Enable Notifications View UI
About View
Add and Edit Alarm - Part 1 - You Did It View
Add and Edit Alarm - Part 2 - ToBedWakeUpView
Cancel and Save Buttons
Alarm Toggle View - Part 1
Time Picker
Select Activity View
SelectActivityView - Part 2
Back to the Main Alarm View
Create List of the Alarms View
List of the Alarms View Continued
Alarm Row View
Create AddEditCircularAlarmView
CentralDatePickerView
Circular Time View Computed Properties
TimeArcView
DisplayIconOnCircularTimeView
MainAddEditView
Replacing Context Menu with Menu
Add Border to Select Activity View
Select Activity View Expanded - Row of Circles
Select Activity View Expanded - Row of Activities
Select Activity View Expanded - In Action
Extending Localized Strings and Adding More Languages
Local Notification Manager
Enable Notifications and Scene Phase
Adding the Alarm Model and Saving State
Get Pending Alarms
Sounds, Play Sounds, Sounds UI - Part 1
Sounds, Play Sounds, Sounds UI - Part 2
Sounds, Play Sounds, Sounds UI - Part 3
Sounds, Play Sounds, Sounds UI - Part 4
Sounds, Play Sounds, Sounds UI - Part 5
Cleaning Up ToBedWakeUpView
List of Alarms and Alarms Row View - Connect to Backend
List of Alarms View Continued
Adding Schedule to Local Notification Manager
Adding Schedule to Local Notification Manager Continued
Remove Request
Connecting Backend to List of Alarms View
CancelSaveAlarm Functionality
CancelSaveAlarm - Schedule Alarm on Save
Add Sheet to ListOfAlarmsView and Add Backend to AddEditAlarmView
Binding currentAlarmIndex and Using Breakpoints
Foreground Local Push Notification
ListOfTheAlarmsView - Sheet for Add Alarm Button
Prepare Groundwork for AddEditCircularAlarmView
Choose Alarm View
Get Circular Alarm View in the Picture
Improve UX - AlarmRowViewButton
Tweak Alarm Model and Connect Circular Alarm View
Toggle Between Circular and Standard View
Toggle Add Edit Alarm Type - Image Display View
Toggle Add Edit Alarm Type - Select View
Conway's Game of Life
Introducing John Conway's Game of Life
General Structure of the Main View
Cool Title View
Introducing the Board Model
BoardModel: GetCreature and Vitality
Introducing the Board View
Completing the Board View
Supporting Methods for Next Generation
Implementing Next Generation
Putting It All Together - Minimal Viable Product
Introducing the Controls View
Adding a Slider and Play Pause Button to the Control View
ButtonView and Play, Refresh, Clear Buttons
Completing the Control View
Play / Pause Button Implementation
Implementing Speed
Rules View - Structure
Rules View - Part 2 - Structure
Rules View - RoundButtonView
Rules View - GlowingCard View Modifier
Rules View - RulesCheckboxView
Rules View - ToggleButtonView
Rules View - Completed
Information View
Body Shape UI Challenge
Introduction - Body Shape UI
Getting Started and Selecting Colors
Icon Right
Welcome Message View
Weight View Part 1
Weight View Part 2 Adding FillBarView
Data Summary View Row 1
Data Summary View Row 2
Data Summary View Row 2 Part 2
Buttons View
Introduction to Body Shape UI Splash Screen
Body Shape UI Challenge Splash Screen View
Results View - Getting Started
Results View - Create Top Row
Calendar Bar View - Part 1
Calendar Bar View - Vertical Dot Bar - Part 2
Calendar Bar View - Vertical Dot Bar isSelected - Part 3
Calendar Bar View - Vertical Dot Bar adjustments - Part 4
Calendar Bar View - Add Vertical Dot Bar - Part 5
Calendar Bar View - Add Vertical Dot Bar - Part 6
General Structure and New Components
Main Activities View - Part 1
Main Activities View - Part 2
Completing Current Activities View
Heart Rate View
Complete Result View - Yes!
Brevis App - Hotkeys
Brevis - Creating the Model
Creating the ViewModel
Creating the Hotkey View
Adding a List of Hotkey Descriptions
Rotate on Tap
Adding an Image Background
Adjusting the Detailed View
Tip Calculator
Supporting Light and Dark Mode
Sine Path
Localizable Strings
Enter Total View
Choose Tip View
ChooseTipView - Adding State and Bindings
Implementing Split Bill
Payment Summary View
Payment Summary View - Computed Properties
Cleaning Up the View
Custom Tip View
App Icon of Tip Calculator
Tap Out of TextField
Change Display Name of Calculator
Human Interface Guidelines Layout
Supporting Landscape and Portrait Mode
Tip Calculator - iPad Support
Flashcards App
Create Flashcard Project
Creating the Models
Import Images
Creating the QuestionViewModel
Creating the FlashCardViewModel
TwoSidedBackgroundView
FillBar View
FlashItem View
Header View
TextAndOptionalImage View
Card View
Topic View
The Questions View
Creating the App Icon
Magnification Gesture
iPad Support for Flashcard App
Mystic Puzzle
Creating the Puzzle Model
Adding Documentation to the Model
Adding the View Model and Adding Extensions to CGPoint
Adding Tiles to the View
Adding Some More Tiles
Adding Digits to the View
Adding the Two-Digit Numbers to the View
Add Background Images
Add a Custom Font
Move Tile on Tap
Shuffle Tiles
Adding Buttons
Implementing the done() Function
Adding a Sound Effect
Saving State
Add an App Icon
Quote of the Day App
Warming Up with an Awesome View
Getting Started with the Main Quote App
Random Quote API and the Quote Model
The Quote View
The Quote View Model
Putting It All Together
MVP Completed
Import Images
Select Image View
Select Font View
Import Custom Font
Add Fonts to Select Image View
Dealing with Large Quotes
Sliders for Text Opacity and Size
Speed Code a Chill Meditation App
Chill Meditation App
Meditation App - Frontend
Getting Started
Color Palette and the Home Screen
Creating the Greetings View
Creating the Chips View
Current Meditation View
The Feature View - Part 1
The Feature View - Part 2
The Feature View - Part 3
Tab View - Part 1
Tab View - Part 2
Cleaning Up the Code
Finance App UI
Introduction - Finance App
Getting Started with the About View
Color Palette and the Avatar View
ChoicesView Using a List of Custom Labels
About View - Final Tweaks and Adding an Optional Description
CreditCardView - Import EMV Chip from Figma
CreditCardView - The Chip
CreditCardView - Working on the View
CreditCardViewPage
CreditCardViewPage Continued
CreditCardViewPage Completed
CreditCardView - TopView
CreditCardView - Adding Folders
CreditCardView - TransactionView
CreditCardView - Import Icons from FlatIcons
CreditCardView - Using Icons
YourBalanceView - Getting Started
YourBalanceView - First Steps
YourBalanceView - Designing the Header
YourBalanceView - Designing the Amount View
YourBalanceView - Actions View
YourBalanceView - Action of the Week View
YourBalanceView - Monthly Expenses View
YourBalanceView - Monthly Expenses View Completed
YourBalanceView - Monthly Expenses View Refactoring Bar View
