Your next career begins with
Save 50% off your seat in our next iOS Bootcamp. Limited time only. Sessions start April 3.
Your First iOS & SwiftUI App: An App from Scratch
Jan 11 2022 Swift 5.5, iOS 15, Xcode 13
Part 1: Getting Started with SwiftUI
7. Challenge: Add View Modifiers

Sign up/Sign in
With a free Kodeco account you can download source code, track your progress, bookmark, personalise your learner profile and more!
Create accountAlready a member of Kodeco? Sign in
About this episode
Practice using SwiftUI View Modifiers by styling the rest of the text views in Bull’s Eye.
Instructors
Contributors
Instructor
Instructor
Illustrator
Video Editor
Over 300 content creators. Join our team.
Version history
iOS 15, Swift 5.5, Xcode 13 (Selected)
Jan 11 2022iOS 16, Swift 5.7, Xcode 14
Feb 13 2023iOS 14, Swift 5, Xcode 12
Dec 15 2020iOS 13, Swift 5, Xcode 11
Sep 3 2019iOS 12, Swift 4, Xcode 10
Jul 24 2018iOS 11, Swift 4, Xcode 9
Sep 19 2017iOS 10, Swift 3, Xcode 8
Nov 7 2016Swift 2
Sep 1 2015Leave a rating/review
Sign up/Sign in
With a free Kodeco account you can download source code, track your progress, bookmark, personalise your learner profile and more!
Create accountAlready a member of Kodeco? Sign in
Sign up/Sign in
With a free Kodeco account you can download source code, track your progress, bookmark, personalise your learner profile and more!
Create accountAlready a member of Kodeco? Sign in
Guess what - it’s time for your first coding challenge!
Even though you just started this course, you already learned several of the key techniques of iOS and SwiftUI development:
First, you learned what SwiftUI Views are, and you added several different Views to your app, including Text
, Slider
, Button
, HStack
, and VStack
.
Second, you learned what SwiftUI View Modifiers are, and you applied many View Modifiers to style your Instructions view, including .bold
, .kerning
, .multilineTextAlignmnet
, .lineSpacing
, and .font
.
Third, you learned about three important concepts in iOS and Swift development: instances, data, and methods.
Your challenge is to get some more practice with view modifiers, by styling the rest of the Text Views in the app.
There are three text views that need to be styled:
- The Text View for the target, that reads “89”
- The Text Views to the left and the right of the slider, that read “1” and “100”
Note you don’t need to style the text view inside the button; we’ll do that together later.
Let’s review what you need to do to style these three text views.
- Open up the high fidelity design for the app in Figma. You can find a link in the author’s notes on this video.
- Apply the correct view modifiers to the text views to style them as similarly to the design as you can.
Remember that you can drag view modifiers in from the object library, or you can copy the examples from the styling of the instructions label that you did earlier.
Also remember you may find the chart of dynamic text sizes in Apple’s Human Interface Guidelines handy for this challenge; you can also find a link in the author’s notes.
I want to share one final tip for you. For the Text View for the target that reads “89”, you’ll see that the font weight is set to 900 in Figma. You can set the font weight in SwiftUI with the fontWeight
view modifier, which has a number of presets. The one that is closest to 900 is the preset .black
.
Allright that’s it - now pause the video and give it a try on your own. If you get stuck, don’t worry, you can keep watching for the solution. Good luck!
Style label 1:
Text("89")
.kerning(-1.0)
.font(.largeTitle)
.fontWeight(.black)
Style label 2:
Text("1")
.bold()
Style label 3:
Text("100")
.bold()
All videos. All books.
One low price.
A Kodeco subscription is the best way to learn and master mobile development — plans start at just $19.99/month! Learn iOS, Swift, Android, Kotlin, Flutter and Dart development and unlock our massive catalog of 50+ books and 4,000+ videos.
Learn more