How to Build a User Interface in Xcode - Lesson 3 (2024 / SwiftUI)

Learn how to use SwiftUI views, view containers and view modifiers to construct an app user interface. This lesson focuses on the foundations of building user interfaces in Xcode using SwiftUI. This is important because building any kind of app involves building UIs.
Download the project and resources:
learn.codewithchris.com/cours...
👋 Our "Launch Your First App" program will help you build up your iOS skills to publish your very own feature rich app even if you’re a beginner starting from scratch. cwc.to/youtubeoffer
🕑 Timestamps:
00:00 Intro
00:46 SwiftUI Views and Modifiers
01:13 Starting a New Xcode Project
02:12 Building the Core Card
03:06 SwiftUI Image and Text
07:30 Building the Ratings
07:44 SwiftUI HStack
09:14 SF Symbols
12:18 SwiftUI Spacer
18:36 Building the Icon Area
20:45 Building the Card Background
27:37 Building the View Background
28:42 Outro
This video series will teach a beginner with no programming experience how to make iPhone apps. I'm creating these videos with the assumption that the student has no prior knowledge and is starting from scratch.
CWC+ PROGRAM:
👋 Our "Launch Your First App" program will help you build up your iOS skills to publish your very own feature rich app even if you’re a beginner starting from scratch. cwc.to/youtubeoffer
APPLE DEVELOPER PROGRAM:
developer.apple.com/programs/
MY FAVOURITE APP RESOURCES:
📖 The SwiftUI Reference Books I Use - SwiftUI Views Mastery - cwc.to/swiftui-book
💰 How I Monetize My Apps - RevenueCat - cwc.to/revenuecat
🤖 My Automation Tool of Choice - Bitrise - cwc.to/bitrise
🧑‍🎨 What I Use For App Design - Figma - cwc.to/figma
WEEKLY UPDATES VIA EMAIL:
✉️ Every Saturday, receive an email digest of new content - cwc.to/newsletter
CONNECT:
🌍 My website - codewithchris.com
😺 GitHub - github.com/codewithchris
📸 Instagram - / codewithchris
🐦 Twitter - / codewithchris
ABOUT CODEWITHCHRIS:
Hi I’m Chris! I’m dedicated to teaching fundamentals about how to make an app. This is important if you’re trying to land an iOS job, be a freelancer, increase or start a business with an app idea. On this channel and my website, you'll find a ton of free resources and tutorials to aid you on your journey to learn iOS development. Many people have learned to code and build apps on their own! cwc.to/reviews
Note: Some of the links in this description are affiliate links that help support this channel. Thank you if you used any of them!
#CodeWithChris #CodeCrew #HowToMakeAnApp

[@CodeWithChris]

👋 Our "Launch Your First App" program will help you build up your iOS skills to publish your very own feature rich app even if you’re a beginner starting from scratch. cwc.to/youtubeoffer

[@user-hs3pz4td1i]

Thank you so much for NOT using background music of any kind in your video's. Most people think that their videos are not complete without some irritating, distracting and often confusing noise in the background. Especially with your videos, where the main goal is to inform people, so big chapeau! and I immedeately subscribed!

[@nastynes]

Tried learning Swift a total of 3 times in the past 5 years and I can confidently say that this is the most I’ve learned and picked up! Best Swift mentor on KZbin!

[@CodeWithChris]

Thank you for the kind words!! - Pat

[@umedsabzaev6142]

Thank you very much, Chris. I love your tutorials. Looking forward for Lesson #4 of this series 😊👍 Best wishes from Tajikistan tp all iOS learners and Devs!

[@CodeWithChris]

Thank you for the support!! :) - Pat

[@tbone1268]

This series has been great so far, It’s at a perfect pace and very in depth where it needs to be but doesn’t over explain everything. I can’t wait to keep watching this series. Great work on this!

[@CodeWithChris]

We're glad you're enjoying it! :) - Pat

[@DLeRoux]

Chris, this was phenomenal. I am coming from the std Web Stack, of HTML, CSS, et al, and this is so much easier! I cannot wait to dive into the programmatic aspect of Swift itself. You are a phenomenal teacher that breaks things down in such easy to digest snippets. I will 100% join CWC+ after this.

[@CodeWithChris]

Thank you so much for the kind words!! Means so much! :) - Pat

[@VectorK-sr1fz]

you explain everything really simple.Good job

[@tomashertl8895]

Hello Chris. I am relatively old, even in 1990 I got an experience to programming. I am fresh newborn to apple community due to science project in our work team. ANd had to say thanks a lot for your work. Precise, patience, great teaching abilities are on your side. Incredible start.

[@CodeWithChris]

Hello, we're very happy you like our contents and we wish you very good luck on your project. --Joash

[@taylorenglish6237]

Thanks! I loved the tutorial! Well made.

[@ek_tango]

The voice and speech are soothing and the explanations are concise and kind.

[@CodeWithChris]

Glad you found it helpful! Thanks for learning with us! - Iñaki

[@PhG1961]

Amazing video tutorial. In the beginning a nice recap and then of course the expanding of the code/project. Excellent presented and very well narated. I really love your videos !

[@CodeWithChris]

Thank you very much! :) - Pat

[@rolandeumhza456]

I love love these!! I am using these tutorials to get me through my senior app development project! Thanks!

[@CodeWithChris]

Glad it was helpful! :) - Pat

[@Cris-lx9fx]

Thanks for the tutorial! Can't wait for the next one, it will be a very important!

[@CodeWithChris]

Thank you for watching! New lessons will be uploaded every week :) - Pat

[@N0KU.]

Best coding lesson series so far! Thanks a million!

[@CodeWithChris]

Best comment so far lol Thank you!! - Pat

[@Guipvideotek]

Congratulations Chris ! Your pedagogy is very thoughtful, your way of talking very clear and slow enough for non native speakers, you make it simple yet quick enough not to be bored. I though coding apps UI was hard, you definitely make me want to download xcode! You really do a great job here ! Social Networks can be misused and bring shit to our lives, but people like you make platform like KZbin worth their while !

[@CodeWithChris]

Thank You for taking the time to comment, @Guipvideotek! --Joash

[@GreyGalaxie]

Just binged all three and I feel empowered. Thank you.

[@CodeWithChris]

Wow! Thank you for the support! - Pat

[@EricJGoforth]

You are a fantastic teacher and these videos are amazing. So excited for what you have coming down the line.🤩

[@CodeWithChris]

Thank you for the kind words and for being in this journey with us! :) - Pat

[@AmjadKhan-rz6nu]

This is mind blowing 🎉🎉🎉

[@Oliver12723]

VERY GOOD !!!

[@DaEnemy]

For now I have to continue watching all lessons first but then... in short: MASSIVE THANKS! More to come :)

[@CodeWithChris]

Enjoy!! :) - Pat

[@AmjadKhan-rz6nu]

Please upload more videos more and more we are loving your teaching way.. it is very hard for me but my brother and your video helped me alot

[@CodeWithChris]

New lessons will be uploaded every week so stay tuned :) - Pat

[@AmjadKhan-rz6nu]

@@CodeWithChris 🤩 wow man… trust me I can only learn best and better by your teaching way ❤️❤️❤️ and looking forward for more

[@Hollowdude15]

Amazing video man🎉🎉

[@roshanekka9687]

Awesome!

[@CodeWithChris]

Thank you! Cheers! - Pat

[@gottafindacoolname]

YOU ARE SUCH A NICE PERSON!❤

[@seanephram]

this has helped so much dude, thank you

[@CodeWithChris]

Glad it helped! Thanks for watching! - Iñaki

[@jgvlc]

Excellent lessons, thank you very much!

[@CodeWithChris]

You're welcome! - Pat

[@Hasan-po6ud]

Thanks

[@iBradenStevens]

Such a fantastic teacher! If people didn't know, you can access all the symbols in the same menu where we were dragging the other elements from just going to the last symbols group.

[@CodeWithChris]

Thank you and thanks for sharing! - Pat

[@judetear7726]

Thanks for making these

[@CodeWithChris]

You're welcome! :) - Pat

[@viggotroback4429]

This is awsome. Great teaching structure. How this is free is beyond me....

[@CodeWithChris]

Great to hear! :) - Pat

[@yaserghananwi]

Nice tutorial thanks

[@CodeWithChris]

Glad you liked it! Thanks for watching! - Iñaki

[@Hollowdude15]

Wow😊😊

[@snark907]

Thanks!

[@CodeWithChris]

No problem! - Pat

[@hugohart]

SF symbols are part of Xcode. In the Library, for example at 20:16, you'll see the tab at the very right side (looks like a star) is for SF Symbols.

[@SepitmanShareeati]

thank you for these lessons Chris , one of the first time's that I can learn a software online ,

[@CodeWithChris]

You're very welcome! - Pat

[@efeuzun35]

u r really amazing man. ty so much.

[@CodeWithChris]

You're welcome! - Pat

[@eruston]

21:10 great tut, quick note: if you are not seeing the blue outline around the elements in the preview, make sure that the second icon in the bottom left hand corner of the preview pane (you can hove to discover: selectable) is turned on.

[@CodeWithChris]

Thank you for this! - Pat

[@moz8292]

Ohhhhhh, I didn’t have it so I was a little confused. Ty.

[@liamsz]

the way my jaw dropped whenever I saw that a horizontal stack could be inside of a vstack and then everything just clicked and It all made sense to me lmao

[@gabinrichter3330]

Omg you‘re a hero

[@CodeWithChris]

Glad it was helpful! Thanks for watching! - Iñaki

[@AmjadKhan-rz6nu]

also upload about how to add navigation to it etc

[@jaipurestate3748]

Before this video, I thought, The IOS UI so complicated but after video it so easy. Thank you bro, this is valuable video.

[@CodeWithChris]

Glad you liked it --Joash

[@danielniels22]

im a windows user, and i develop website. and now im having a mac, learning this ios development. it feels hard at first, hopefully i can follow along through your course! thanks for this amazing videos Chris!

[@CodeWithChris]

You can do it!! And thank you for learning with us. If you have any questions, our CodeCrew forum is a place where experts and fellow students are willing to help you out! Just visit this link codecrew.codewithchris.com :) - Pat

[@johnrowland8354]

Happy New Year.

[@CodeWithChris]

Happy New Year John! Cheers! - Pat

[@thewoodhousedayspagrandrap2332]

Chris - just started following your channel. One suggestion I would make is when you complete a project to scroll through all the code. Mine isn't working out quite like yours and I would like to check code against yours. So far, am learning a lot. Thank you

[@CodeWithChris]

We suggest posting on our CodeCrew forum so that our tech support staff can help you. Just visit this link codecrew.codewithchris.com - Pat

[@jakeeaves218]

can you do a video on corebluetooth or do you have any good resources on it? I cant seems to find any tutorials on how to send information to a device like a rgb value

[@chungu5824]

Hi I know this isnt related to swift but which keyboard do you use?? Love the sound

[@marycole4306]

I worked on the previous version of this course using a free account, but I decided to start over with this version for review (it's been awhile) and because the course has been updated. At the end of lesson 3 here, Chris mentions we can only get the exercises/challenges on his website, but when I go back there, I don't see how to access the updated version, just the version I'd been working through. At least, it appears to be the same version as before. Can anyone advise me how to navigate to the updated version there?

[@ChaceDrake]

Thank you so much for these tutorials! I'm learning so much! at 12:30, you say "let's go to 'selection mode'", but I could not locate it. I have the most up to date Xcode on my new Mac. Can you direct on how to find that "Selection Mode"?

[@CodeWithChris]

Exactly at 12:30, you can see Chris selects the second button right below the Preview. Unfortunately the KZbin time line is right in the way, so go back to that video and let me know if you have those buttons there. If you don't someone from our devs can help you enable those: codecrew.codewithchris.com/ @AdrienVillez

[@zzz33cccce4]

Hi! Thank you! How to connect MySQL Database to this app (title, description, name_image)?

[@mikefuller1561]

I downloaded the lessen 4 assets, however when I drag them into the assets section in xcode there are triplicates and no name I type in brings them over into the assets part of the Xcode.

[@toothwiddler]

Is there a way to build an app that gives a user control of another users settings like say their volume or ringtones

[@sumerjacob850]

Hi Chris Do I have to add multiple vertical stack then horizontal stack when I get the same result with one set of stack. Thx for the tutorials

[@CodeWithChris]

Hello @sumerjacob850! Thank you so much for taking the time to comment, unfortunately we can't debug it for you in the comment section here but you can try joining and posting in our community: cwc.to/codecrew --Joash

[@chriswestphal26]

can you try showing the entire code on the screen. as a beginner its pretty tough to figure out what's going on when you're that zoomed in

[@AaronEChen]

Hi Chris, for some reason I can't instal SF Symbols. Im using Xcode on MacBook 2022. Any Suggestions?

[@baosam5053]

Hey chris I'm just curious what state you're in

[@DiegoHarari]

How do you indent the code?

[@Jp_248]

😊

[@mrgrumpy888]

24:50 Perhaps a stupid question but why are the modifiers (.padding and .background) defined outside of the closing bracket of the VStack? It's a minor thing but I'm confused as to how they are able to influence the VStack.

[@TimothyVaughan]

I had the exact same issue. With some knowledge in swift code, that felt weird to me. The reason is because .modifier's always come after the view element in question. SwiftUI knows you're applying that to the last element you created. (And I'm using the term "element" loosely). If it was inside the stack, it would think you're trying to apply the modifiers to an object inside the stack instead of the stack itself. If you think of the stack as an object in itself, it makes sense because modifiers go right after view elements. Just think of the stack as it's own view element containing others.

[@tchinua]

That blue outline at 20:57 doesn't show on my xcode

[@arozendojr]

What would be a good MacBook for iOS mobile development?

[@CodeWithChris]

Any of the Macbook with the Apple M1 or M2 chip. They are amazing. Even the simplest Mac Mini M1 that costs around $500 is a killer. After that, it's just a question of how much memory and RAMs you wish to add. @AdrienVillez

[@Meekismwisdom]

24:30

[@gayanchaturanga991]

how to create 12 cards as calendar widgets ?

[@samehmostafa12]

Why I can't see any mobile as a preview even after install 17.4!! tell me please

[@chepparmaps]

Hello Chris, I would like to subscribe. on a monthly basis rather than a whole year. Please advise me

[@CodeWithChris]

Hi Cheppar, thanks for considering CWC+ You can pick the monthly subscription on this page: learn.codewithchris.com/collections/#pricing-section Thanks for learning with us! - Iñaki

[@AmjadKhan-rz6nu]

love from pakistan

[@amitg7034]

By when will you put up the 2023 videos on CWC+ and also will you remove the old content of swiftui because I'm planning on getting a mac and this information is important to me.Also is all the current information on CWC+ about swiftui basics and firebase redundant

[@CodeWithChris]

The content from 2020/2021 is still relevant. Swift and SwitUI are still the same. The one that changed a little is Xcode. if you are a bit familiar with Xcode, you will still be able to work with our 'old' videos. We are redoing our Beginners Series because for people who have never coded before, small changes in softwares can be annoying and a bit overwhelming. @AdrienVillez

[@amitg7034]

@@CodeWithChris will you remove the old videos or will they still be there

[@dathan4859]

Is the youtube offer still active? It’s showing up expired on my browser even though the video was just released yesterday.

[@CodeWithChris]

Hey! You can contact the support on our website (codewithchris.com/contact) to get access to it if the link doesn’t work. Thanks!

[@ExitStrategyNYC]

Why isn't .fit in the menu? Is that an xcode bug?

[@vibodhvlogs8075]

Hi I am 9 year old with your lesson i could do my app with a om symbol and trying to put audio toit but couldnt figure out how to Will you please help me?

[@radfaredu644]

We are waiting for new lesson

[@CodeWithChris]

A new lesson will be uploaded this week! - Pat

[@denisk3852]

Apple must do sf symbols via Enum. Strings are not serious.

[@midnightappointment]

I'm getting an error that "requires a development team."

[@VinceDae]

NOOB HERE: .... it says "can't find color" when I try and make my background 'black' ? how do I set the colors? :)

[@CodeWithChris]

Hi! We suggest posting on our CodeCrew forum so that our tech support staff can help you. Just visit this link codecrew.codewithchris.com - Pat

[@stephenwright2211]

SF symbols not free any longer, at least for the Mac platform - Apple, not yet rich enough, now asking for a dollar.

[@chriswestphal26]

show the entire window please not just sections of it

[@EricJGoforth]

Thanks!

[@CodeWithChris]

Thank you for the support! - Pat