Your First iOS & SwiftUI App: An App from Scratch

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.

1. Open up the high fidelity design for the app in Figma. You can find a link in the author’s notes on this video.
2. 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()