How to Make an App for Beginners (2020) – Lesson 1

How to Make an App for Beginners (2020) – Lesson 1


hello and welcome to how to make an app for beginners in this video I’m going to show you how to make an app even if you’ve never programmed a single line of code before. Now by the end of these next 10 lessons you’ll have built these apps and user interfaces and I’ll also show you how to put them on your phone so that you can show your friends and family but more importantly I’m going to teach you the fundamental skills that you’ll need to build any sort of app so by taking these beginner lessons you’re going to get a really nice and solid foundation in iOS app development. From there you’ll want to grab my free 7 Day App Action Plan where you can create a customized app roadmap just to build your app you also want to join our active Facebook community where you can get help and support from myself and the team and tons of other people learning iOS just like you so that you’re never stuck or alone on your journey to create apps. Now the last time I taught this it was viewed by over 1.2 million people and tons of success stories came out of it, ton of people created their own mobile apps as you can see some of them on the wall behind me. Now I know that’s all going to come for you too but it all starts right here right now are you ready let’s do it welcome to CodeWithChris the place to be if you want to learn how to make an app. I’m Chris and I’m so glad you’re here first things first how do you create an app from scratch well it all starts with a program called Xcode where you design the user interface for your app and write your code that gets turned into an iPhone app which you can publish to the App Store where millions of people can download and use it before that let’s backtrack a bit though. Xcode is a program you can download for free and the code I’ll be teaching you how to write is called the Swift programming language don’t be intimidated if you’ve never coded before because I guarantee you’ll get the hang of it next Xcode can only be installed on Mac computers but if you don’t have access to one you do not need to spend thousands of dollars to buy one instead check out my video on Xcode for Windows using MacStadium first. Alright so with that out of the way let’s dive in and let me show you around Xcode so the first thing you’re going to want to do is to download Xcode if you haven’t already and all you have to do is hit CMD + Spacebar on your keyboard to launch Spotlight. Type in App Store to launch it and then in the search bar type in Xcode and that’s going to find it now I’ve already got it installed so if you don’t you want to go ahead and do that I’m gonna warn you though it’s a pretty big application so it does take a little while to install and if you can’t if it gives you an error message or something like that scroll down check on the compatibility if you click it it tells you what version of macOS it needs for this one it needs 10.13.6 but when ever they upgrade Xcode this number gets higher and higher so your you might have to update your version of macOS in order to install Xcode also keep in mind the size here even though it says 6.1 Gigs it sometimes needs a little extra space in order to do the installation so once you have it installed go ahead and open it you’re gonna be greeted with a dialog like this what we’re going to do in this video is create a brand new Xcode project so click on create a new Xcode project if you don’t see that dialog for some reason maybe you’ve launched Xcode before you can always go up to file go to New and choose project and that’s gonna get you to the same place now there’s a bunch of different templates that you can start with to help you just be a little quicker in terms of what you want to create what we’re going to want in this lesson is to be under this iOS tab because there are different platforms you can build for using Xcode and Swift which is the great thing about learning these two things but we’re going to do iOS today and we’re going to choose Single View App and that’s going to give us our basic one-page app or one screen app next we’re going to want to configure some of the options for our new projects such as what the name is what the unique ID of it is and for the product name you can name it something I’m going to choose hello world like that the team drop-down you might not have a team here and that’s not going to matter right now but you will want to create a team when it gets to the point where you want to put the app on your actual device and I’ll show you how to do that later on in the series organization name I would either put your company name or your personal name and then what’s common under organization identifier is comm dot and then your name or your company name so combine with the product name that’s going to be the bundle identifier you’re gonna see this term used quite a bit it’s basically like the unique ID for the app that you’re creating when you publish your app when you upload it to the app store and that sort of stuff you’re going to need that bundle ID okay so next very important is to make sure your language is set to Swift because that’s what we’re learning here you can leave these guys unchecked and then click on next and you can also leave source control unchecked as well we’re not going to go through that right now go ahead and click create and you’re gonna have your brand new Xcode project now it kind of looks intimidating because there’s all these checkboxes and dropdowns and you know this interface to someone who hasn’t seen it before is pretty confusing but I’m gonna walk through it with you right now and I also have a reference sheet for you with a diagram and all the keyboard shortcuts for Xcode so make sure you grab that in the description below so we’re going to start on the left hand side of the interface and this is the Navigator area you’ll notice across the top that there are different tabs that you can click it might not be so clear in the beginning but these are different navigators that you can choose by far the most common one you’ll be using is this project navigator where you can see all of the files in your Xcode project now clicking on any of these files will change what’s in the middle that’s called the editor area so for instance right now we have this first project file clicked on and that’s why we see all of the project properties in the editor area if we click on ViewController.Swift you’re going to see that this turns into the code editor so that you can write swift code go ahead and click on Main.Storyboard and this is going to change into an editor where you can customize the screen for your app we’re going to be doing this shortly this is actually called interface builder so you can kind of get what why that name is the way it is next let’s go to Assets.xcassets this is where you’re going to put all the images for your project that you’re going to use and then Launchscreen.Storyboard is another sort of interface builder file where you can customize the launch screen and then the info.plist has some further properties for your project so at a high level those are the files that by default are included inside your Xcode project now moving along to the right side of the screen we’ve got the utilities pane and what you see here depends on what you’re clicking on inside of the editor area so it’s like a further drill down so for instance if we go into the Main.Storyboard and I click on this white area which is my view or my screen it’s going to show me further details about that and in the Viewcontroller.Swift if I click on let’s say some piece of code then it’s going to tell me something related with that but keep in mind that again there are some different tabs with this utilities pane as you can see up here so if we’re going into the Main.Storyboard you can see that there are a couple more tabs and that’s because I can configure properties for this element so it looks like Xcode has experienced an internal error but usually these are fine you can just close the project and we launch it I’m not going to do that right now it’s fine across the top of the interface you have your Xcode toolbar now on the left side of the toolbar you have some buttons to run your project and stop your project and then to the right of that this is actually a drop-down where you can select the destination on which to run your project now if you plug in your phone you can actually select your phone from that drop-down but if you don’t have a phone plugged in don’t worry because Xcode has a bunch of simulators where you can run your project on and it’s going to show it on the screen we’re gonna do that in just a second in the middle here you have your status bar it’s gonna show you what’s going on with your project what it’s doing right now and then on the right-hand side there are a couple of more controls here which we’re going to get to in second but in the rightmost part of that toolbar you’re gonna see these buttons which are really helpful to you right now it’s just to hide and show these different areas that we’re talking about if you click this middle one you’ll notice that it brings up this little tray down here that we really haven’t talked about yet and this pane down here is called the debug console and when you’re running your project and let’s say an error happens you’re gonna get some details about that error in this debug console so by default it’s hidden if you want to show it all you have to do is click this button to bring it up so these are the major sections of the Xcode user interface it’s not that complicated once you know right what we’re gonna do now is go ahead and run our project on a simulator so in that drop-down that I showed you by default right now it’s iPhone XR you can select any one you want to try out and just click this big play button right here it’s going to launch that the iOS Similar now the first time you do this it might take a couple of minutes but then subsequent times is going to be a lot faster after the simulator has launched so you actually don’t really need a physical iPhone device if you don’t have one you can still build and test your app now there’s one quick thing I want to mention and that is if your simulator is way too big for your screen and you can’t see all of it you can actually scale it down so you can either go up to the menu of the simulator and choose you know physical size or point accurate or pixel accurate you can use these shortcuts CMD+1, CMD+2 or CMD+3 to change the size of the simulator that you see so just a handy tip for you in case the simulator is way too large for your screen so when your app has launched you’re going to see this white screen and that’s because we haven’t really added anything to our app yet but before we do that let’s talk about how that Xcode project turned into this app that I’m seeing in the simulator this top layer is the view it’s the screen that the user sees now you can configure this view from the Main.Storyboard file in your Xcode project the second layer under that is called the ViewController. Now this code file is responsible for managing the view for instance when the user taps on the view it’s going to let the view controller know and then you can write code inside that view controller to handle that tap to either run some process in the background or maybe display some new information on the screen you get the idea now this view controller is represented by the ViewController.Swift file in your Xcode project and as we said before if you click on that file the editor area turns into the code editor where you can write Swift code to manage the view now if your app has multiple screens in most cases each screen is just going to have its own view and view controller now let’s go back into Xcode and we’re going to stop our project and we’re going to add something to the view so that there’s something to see let’s hit on the stop icon right here and then click on main storyboard so you’re seeing the interface builder and now I’m going to introduce you to this button here called the library button so if we click this it’s going to bring up a list of objects or UI elements that you can add to your view type in the label to search for this guy and all you have to do is click and drag it onto your view like this now you’re going to see that label on your view right here now you can drag it around and you can position it but that’s not really going to do anything because Xcode actually has its own way of positioning and sizing layout items Xcode uses a system called auto layout to position and size the elements on the screen this system makes it easier for you to design a single interface that looks good on iPhone, iPad and all the other screen sizes of future iOS devices now basically all you have to do is specify a list of rules for each element that dictates how it should be positioned and how it should be sized relative to other elements on the screen for example this element should be the same height as this other element or maybe this element should be centered on the screen these rules are called constraints and in lesson two you’re going to learn a lot more about Auto layout and Auto layout constraints but for now let’s jump back into Xcode and take a look at how we can position and center our label on the screen alright so back in interface builder I want you to select your label just to make sure that it’s highlighted and then down here there are a couple of buttons where you can add Auto layout constraints so click on not add new constraints but this button called a line because we want to basically align this label in the center of the screen so we’re gonna check horizontally and vertically in container and then click add to constraints and you can instantly see these lines here that represent the constraints you just added as well as the label being centered on the screen if you’ve made an error don’t worry check it out right here this is called the document outline and it basically shows you all of the elements and all of the constraints that are in your view right now so just open up constraints you can highlight your constraints that you’ve added maybe you’ve made an error or something like that you can either delete them right now I can hit delete and get rid of them or if you highlight them in the utilities pane on the right hand side in this size inspector or they there’s different inspectors that you can select make sure that you’re looking at either the attributes inspector or the size inspector and then you can edit some of the properties for your constraint I’m going to show you just the leading them right now off of the document outline so they’re gone I’m gonna do it again so you can hit your label now and you can go into a line and select horizontally and vertically in container and then add two constraints like that the next thing we’re going to do is we’re going to edit that word inside the label so make sure your label is highlighted and then on the right hand side again make sure you’re looking at the attributes inspector right here under text you’re going to be able to just type in whatever you want I’m gonna type in hello world and voila so click on the Run button on your Xcode project and it’s gonna launch the simulator once again and you should be seeing something that looks like this congratulations you built your first step to get a copy of the recap notes of what we went over today as well as some practice exercises just click right over here or find it in the description below in the next lesson you’re going to be building this in Xcode but first if you like this video please give it a thumbs up and subscribe to my channel by hitting that red subscribe button below and if you don’t want to miss the next lesson just hit that Bell icon to get notified of when it gets released now I want to turn it over to you with the skills that you’re going to learn are you going to build an app or a game let me know by leaving a quick comment below and then just click on that thumbnail for lesson 2 and I’ll see you there bye for now

100 thoughts on “How to Make an App for Beginners (2020) – Lesson 1

  1. Missing your storyboard? See: https://youtu.be/ea9fCSXGhSU ⚡QOTD: With the skills you're going to learn, are you going to build an app or a game? Let me know!👇 Kick start your own app with my free 7 Day App Action Plan ➡️ http://bit.ly/7dplan

  2. This Would Be Some Clear Info,If I Could See The Small Layout

  3. Hello I intend on building an app that shows bars & restaurants with locations and all the it night or day places of the city. Do I start follow these steps exactly

  4. What about Android?

  5. Just one thing…THANK YOU

  6. Can I use this to make video game apps

  7. For some reason, I don’t have a viewcontroller.swift bar. Can someone help?

  8. Sir mujhse Nahi ban Raha hai

  9. #codecrew!!!

  10. i want to make a simple countdown timer clock. ( see divergent clock in app store) but I want to use my own graphics. i am very fluent in adobe illustrator and photoshop. do you have any lessons? or can you direct me to lessons to build a simple countdown timer app like this?

  11. Dude, your video is freaking awesome

  12. WOW! I had to watch this twice. Great video!

  13. How to speak with you do you have any WhatsApp or number I have very good work for you

  14. I want to build app for my business

  15. Hi Ching, I just started learning Xcode. I tried to follow your lesson 1 to create the HelloWorld. I noticed some difference in my Xcode. My Xcode may be too new and it creates the files differently. In your example, it created ViewController.swift file while my Xcode created ContentView.swift file. They are not the same. Is there anyway I can setup the project to be the same as yours. I did notice an option for SwiftUI on my Xcode when I started to create the HelloWorld while it was not in your screen. Is it the reason it created different settings on the project? Thanks!

  16. Hi Chris, just come cross to this "the best tutorial in the history of mankind", but is this only for ios? that's only count 10%. Do I missed something? is this tutorial covered how to make app for Android? Thank you!

  17. Can u plz like this comment?

  18. Wuphf

  19. I'm thinking to build a game with my kids

  20. Paul Compton, stole and monetized this video of yours.

  21. It doesn’t work when I do command

  22. What if you don't know coding at all ?

  23. Mobile apps are my hobby. I develop them every day 😀

  24. Great video!

  25. I'm going to build a card swiping app!

  26. I’m wondering the 2.7 rating 🤔

    I’d there a reason for this on Xcode?

  27. starting to learn how to build an app to help with my work. Im a cheerleading coach so if i get this app up and running it should make my life a lot easier!

  28. thank

  29. Oh I like your tutorial you made for today please I want to know detail how it works and crest app with Xcode

  30. Which IDE is this,if I missed it?

  31. I have a MacBook but not an iPhone. Is it possible to launch the apps we make on xcode on android devices?

  32. I'm struggling to access the app store on my Chromebook, is it possible to download Xcode in the web store?

  33. I'm planning on making a social media app and I'm watching your videos now. I have to wait till I get a mac book and an iPhone but I'm basically just going to watch it on here and then draw what app would look like on the screen.

  34. ur gonna make me a billionaire

  35. Not everyone is a Mac user… frustrating.

  36. I have a problem the library button not shown in the screen also its send me a massege that say the capabilites for signing and capabilites may not function correctly because its entilements use a placeholder team ID . to resolve this select a development team in the editor .where i can found the develpment team editor ?

  37. MeJan 02, 9:43 AM
    Hi I’m looking to create a apps to let people from my country to have access to shopping from footlocker and addidas , Amazon

  38. hey just trying out new ideals on how i can make my mind think and i think creating an app is one ideal that came into my mind looking forward to you making more tutorials

  39. i wanna buy a yacht but need to be Mark Zuckerburg first

  40. I like the way you reply every comment. Anyway nice video
    Do you have one for Android development?

  41. I plan on making a game. Love this video, definitely going to be using your series as the baseline for the creation of this game. Thank you for your work in putting this together.

  42. Hi I wanna create an big game I want your help

  43. Is there gonna be a How to Make an App for Beginners (2020)?

  44. I would like to build a budget envelope app , please help me

  45. Who else is watching this in 2020 and is waiting for the 2020 series?

  46. H e l l o W o r l d

  47. Me and my friend have a robotics team/innovation project team and we are creating a app called “where the sidewalk starts”. Where kids can learn sidewalk safety and other things so there won’t be as many accidents and kids can get more exercise! This helped a TON thank you!

  48. hello, do we have Xcode app for windows too?

  49. Plan on making a fitness app.

  50. Is it possible I can make an app with videos in it ?

  51. Hey Chris,Can You make a video on how to make an app feature phones before 12 Jan

  52. Thanks for these great tutorials, I would like to create an app compatible with both IPhone & android, do I have to create 2 separate apps for each?

  53. wanna make an app

  54. HI

  55. Thanks so much chris, shall i learn all codes in playground before this step? How much you think to get full experience if i start learn everyday? (approximately)

    Thanks again ♥️

  56. Hi Chris, I want to start coding but I am using Xcode 11. Does this tutorial series still apply to Xcode 11? Thanks!!

  57. umm can someone help me. This is really hard.

  58. Can I make an app to watch other people’s phones ?
    Jk
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    Unless ?

  59. when I launch my project I don't get the option like the main.storyboard and ViewController.swift

  60. Can I start the app development using a Ipad mini 4 latest edition?

  61. Unfortunately, Xcode is unavailable for Windows. Is there another app I can use for Windows you'd recommend?

  62. What is your email?

  63. It's really good video to make an apps but ..without any idea on basics ..Is it possible to make an app at first time..?

  64. I have a MacBook Air but i don’t can find Xcode

  65. I love this tutorial. Thanks Chris

  66. I want to make a app for Snapchat, so people can find friends

  67. I’m going to make a helpful app for teens with personalized hair care, skin care , and more… I will try, but it will take a lot of research

  68. How do I install Xcode in my Windows 10 PC?

  69. I want to build an app

  70. Hello chris can you make app for consultancy business step by step for beginners.

  71. Pls pls make videos for Android app development

  72. Can u make app for me?

  73. Hi Chris or ?, midway through 2nd lesson, very intuitive.. I've liked and subscribed. Before I buy a Mac and start learning more code, a question about my future app. I have a finalized exercise video in MP4 about 40 minutes long, and about 4gb. Is this something that I can create with Xcode whereas people can either download, or does it need to stream through Apple or 2nd party? Basically I want to have for sale for X dollars that customers can purchase. Advice/insight would be SO appreciated… thank you, James (future coder)

  74. Hello Chris, I don’t have desktop PC, but I do have Mac Air laptop.. Does Xcode work on laptop?

  75. Hi Chris, thanks for this, question P is there a separate process for android or can I use this same one ? thanks!

  76. i want to build my own version of snake

  77. Okay I’m gonna replace tik tok and make a less screwed up app

  78. Also on the note of compatibility, if your MacOS is not up to date you can always register your Apple ID as a Developer account and you will have the ability to download older versions of applications and also previous versions of Mac OS 🙂

  79. sir , please upload about flutter or kivy as well plz.

  80. I want to make an app that is literally free to help people

  81. Hi, Chris, I've just watched your first lesson and I will be watching them all over and over again I think. I have never coded anything in my life so expect a lot of questions

  82. THIS IS BEST YOU SHOULD HAVE BEEN TOP YOUTUBER !!!!!!!!!!!!!

  83. hello world apps easy as hell and icon image need mouse for hand not ache 🤒 basic app by closing eyes can’t wait see you at Toronto for next building my favorite apps with weird langguage

  84. I got a great idea for a app help me out

  85. Why don't you make an app that teaches people how to make apps👀

  86. Thanks .. is it all free?

  87. This was such a great lesson, thanks Chris for on-boarding me on my journey of building my first app. So easy to follow and understand the concepts and basics of the Xcode tool and how this will help a beginner as myself!

  88. Hi, thank you for making these videos. I just got started and my buttons/options look different with the updated version. Not sure how to navigate without all the same buttons yours shows

  89. Hiii

  90. Nice tutorial…..
    can we be a Youtube friends?…I have a collection of more then 500+ video for the different programming languages which includes the iOS as well…Waiting for your reply…

  91. I wanna make an app that'll help globally

  92. need help creating an app for my great idea……….

  93. What a name of this software where you make apps

  94. Wow had I would of had you as my professor I would of had no problem passing this semester

  95. hello is it possible you make for me an app , please contact me if possible , [email protected]

  96. I'll build a game

  97. Not sure what’s going on. I don’t see main.storyboard or viewcontroller.swift, instead, I see SceneDelegate.swift and ContentView.swift. When I was choosing options to create the project there was also a feature that said SwiftUI, which I noticed you did not have. The boxes “include UI Tests” ,“Include Unit Tests”, and “Souce Control” were checked by default in the beginning. When I created the project I didn’t land on the same middle screen with all of the checkboxes and drop downs as you.

    What is going on?

  98. Does this work on android apps too??

  99. Sir. Your tutorial is really really good, however, I don't have a MAC. I notice your stated that there's a tutorial for windows, but is it as detailed as the one you have for MAC? Lastly, I clicked on that link for the Windows Tutorial, however, nothing came up. Is there anything you'd advise?

  100. Why does mine look different? I don’t have the main storyboard or the view controller swift. What do I do?

Leave a Reply

Your email address will not be published. Required fields are marked *