Plan, Design + Code Your First App artwork

Plan, Design + Code Your First App


In this short course you’ll learn how to tackle a client brief, plan your work, design an app’s user interface, code it from scratch, and launch it on the App Store.

Purchase this course for $149

Or... get a discount by building a bundle with our learning paths!

Jam-packed with over 8 hours of video lessons, this go-at-your-own-pace course covers all the skills and tools you need to create a simple iOS app.

You'll learn how to plan your work using Notion and send a proposal, contract and invoice to a client using Hello Bonsai. Then, we’ll supercharge your design skills by showing you how to create assets for different screen sizes with Figma.

Next up, we’ll take you through the process of coding your app with Swift and Xcode, pushing to GitHub as we go. No app should launch without being tested, so finally we’ll use TestFlight and App Store Connect to get your app online.

You’ll finish the course having built a fun cat-themed yoga app, ready to show off to your friends or colleagues from your iPhone. Purrrfect!

What you’ll learn

How to plan, quote, and send a contract to a client

How to design an app using Figma, including creating an app icon, a master-detail app screen layout and colour schemes for light and dark mode

How to code an app using Swift and SwiftUI, Apple’s newest framework. We’ll build an app with 3 screens, containing a list, a detail view and a timer.

How to use Xcode to write and test your app as you build it, on your iPhone or in the simulator

How to push your code safely online to GitHub to make sure you never lose your progress and to show it off to potential employers

How to launch your app on the App Store

What you’ll get

8+ hours of video lessons – Covering how to create your own iOS applications from scratch

Student resources – Resources to get you started and keep you going post-course

Continued help post-course – Advice from our expert instructors with years of experience in the industry

Real-world projects – Projects and code that you can alter and remix

Access to the SuperHi community – Join our Slack network of thousands of students and alumni around the world

Who this course is for

This course is for anyone interested in the creative process behind making native mobile apps for Apple devices. You don’t need any experience to take this beginner course, although existing design or development skills will come in handy. If you’re just starting out in the world of technology, this project is a perfect addition to your portfolio, whether you’re looking to become an app developer or otherwise.

What you’ll need

For this course you'll need a Mac running Catalina 10.15.4 or later. To test your apps you'll need an iPhone 6s or above, running iOS 13 or later. If you don't have an iPhone, don't worry – you can use the simulator inside Xcode to test your apps instead.

Want to try our teaching before signing up? Join our free 'Plan, Design + Code Your First Website' course!


Chapter 1

Stretch + Paws

The project you'll work on throughout this course is our cat-themed yoga app, Stretch + Paws. It contains a list, master-detail layout, dark and light mode, navigation, text, images, buttons, and a timer. This app can be easily remixed to fit any theme – for example, a recipe saver or a portfolio.

Your instructors

Our instructors have decades of professional experience, have spoken at international conferences and have won countless web design awards.

Louise Bishop

Louise (she/her) has been teaching people how to make websites & iPhone apps for the last 8 years. As a Senior Learning Designer and teacher at SuperHi, she writes courses & content for you to learn from. Originally from the UK, but currently based in Bali, you’ll find her surfing, cooking, organising fun & helping people. If you’re stuck on something tech-based or otherwise, say hi.

You might also like...


How to Set Up a Store with Shopify 2.0


Join our 45-minute workshop, perfect for beginners/intermediate developers, to learn how to set up a Shopify store using the Dawn theme. We'll guide you step-by-step through the process, starting with installing Shopify's Command Line Interface (CLI).


Introduction to 3D Modeling and 3D Printing


Learn the basics of 3D Modeling & 3D Printing and bring your ideas to life!


AI Integration for the Web: ChatGPT Workshop


Join us for an 80 minute, on-demand workshop, where you'll learn how to seamlessly integrate OpenAI's ChatGPT into your web app project.

Free resources to get you started

View our growing collection of guides for creatives, featuring practical insights and advice on careers, making, and working.


If you're comfortable working with a computer, then yes!

Learning new and improving your existing skills is about being patient with yourself, building up your knowledge, developing confidence through practice, and with time. We've seen our students around the world do it, and so can you.

Our beginner courses are designed for people new to the subjects. They grow your understanding so you grasp everything you need to start applying your new skills and will also give you a path to dig deeper if you want.

Our teaching style is practical and straightforward and you'll have support from our expert instructors and community for as long as you need.

Still not sure if learning to code is right for you? Take our free Plan, Design + Code Your First Website course or dive into our First Steps to Code guide.

We have quite a lot of students that join us and have done some coding before but want to build up confidence and techniques.

In order to help get you where you'd like to be, have a look at the sites below to see which course you can make from scratch, without any help at all.

Baker & Brown – If you struggle to make this website from scratch, don't worry! We recommend you start off with our Foundation, HTML, CSS + Javascript course.

Jenna Buchholz – If you struggle to make this website from scratch, it's all good! We recommend you start off with our Javascript for Designers course.

Super Shapes – If you struggle to make this website from scratch, have no fear! We recommend you start off with our Advanced CSS + Javascript course.

All of our courses are unlocked and available for students to start their learning and go at their own pace. We do have a suggested weekly structure for some courses, which helps some students stay on track. However, you're definitely free to jump ahead or take as long as you need!

As soon as you checkout and pay, you'll have all the courses you paid for, in your student dashboard available to you immediately. If you're busy and can't start right away - no worries, you can pick it back up later.

At SuperHi, we provide online courses designed for creatives and made for everyone. Take a course on Code, Design, or Project Management 😊

The proof is in the pudding! Our students go on to make their own beautiful sites and some of their stunning work have won digital design awards. Take a look at our Hall of Fame to see some of the sites our students have built, many of which had only taken our Foundation course!

If you're a SuperHi student or alumni and would like to submit your project to be included in our Hall of Fame, please feel free to submit it here.

Yes, we do! All you'd need to do is send the links to your completed projects over to at the end of your course. We will review them, provide feedback if necessary, and then issue your certificate!

All our course videos are taught using the SuperHi Editor, but you'll be able to apply everything you'll learn to a code editor of your choice. Many students go on to use other code editors, for example, if their workplace has an existing standard.

Our SuperHi Editor is designed with many smart features to help avoid wasted time looking for things like a typo or missing bracket (which is why we made it!), but the same code concepts apply to any editor.

Yes! You can use your own custom third-party domains and connect them to your sites built with our SuperHi Editor. Additionally, all SuperHi sites come with free SSL Certificates for added protection.

Here's more information on how to connect a third-party domain