CodeHS  
Mobile Apps Course Syllabus 
One Year for High School (125 contact hours) 
 
Course Overview and Goals 
Mobile applications are becoming increasingly important to our consumption of media, news, social interaction, 
and learning. In this course, students will learn how to create mobile apps using React Native, a popular 
platform-agnostic framework developed by Facebook and used by successful tech companies including Airbnb, 
Facebook, Instagram, Tesla, and more. As an online blended high school course, students will design and build 
applications to run on their own smartphones and will use the latest tools and technologies available for mobile 
app development. 
 
The Mobile Apps course is designed as a two semester course for high school students with at least one year of 
programming with JavaScript and one year of web design using HTML and CSS. Students will learn the 
foundations of the React Native framework, components, and how to use components to create scalable, 
custom, and fast mobile applications. Students will also learn about important computer science topics including 
state changes, using XML and stylesheet objects, mapping through objects, rendering dynamic data, and 
creating modular app layouts with flex and the Dimensions API.  
 
Learning Environment: ​The course utilizes a blended classroom approach. The content is a mix of web-based 
and physical activities. Students will modify existing code and run it in the browser and on their personal mobile 
devices with the use of Expo, a free open-source toolchain built for running React Native apps with React and 
JavaScript, create personalized apps, create digital presentations, and engage in in-person collaborative 
exercises with classmates. Teachers utilize tools and resources provided by CodeHS to leverage time in the 
classroom and give focused 1-on-1 attention to students. 
 
Programming Environment: ​Students modify and run programs in the browser using the CodeHS online editor. 
Students will be able to modify text-based programs in JavaScript and XML using the React Native framework. 
Students will run their apps directly on the CodeHS platform as well as their own personal mobile devices with 
Expo.  
 
Quizzes​: ​Each lesson includes at least one formative short multiple choice quiz. At the end of each module, 
students take a summative multiple choice quiz that assesses their knowledge of the concepts covered in the 
module. 
 
Prerequisites: ​The Mobile Apps course is designed for computer science students with the following 
experience: 
● At least one year of JavaScript 
○ React Native is a professional framework that has a need for understanding advanced JavaScript 
concepts such as objects, mapping, and basic logic. 
● At least one year of Web Design using HTML and CSS 
 2 
○ Web Design experience will help students when learning how to layout and style their apps, as 
the concept of tags are used heavily and the formatting of the React Native StyleSheet is similar 
to CSS. 
This course will require students to engage in documentation research and learn to utilize external resources to 
validate their code.  
 
More information: ​Browse the content of this course at ​https://codehs.com/course/3679  
 
Course Breakdown 
Module 1: Introduction to Mobile Apps (.5 weeks/2 hours) 
In this module, students will be introduced to the mobile apps course and the React Native framework and it's 
program structure and syntax. Students will also preview some of the tools and technologies they will use to 
build and run their apps. 
Browse the full content of this module at ​https://codehs.com/library/course/3679/module/5687  
Objectives / Topics  ● Introduction to React Native and Expo 
Covered 

Example Assignments  ● Introduction to React Native and Expo 

/ Labs   ○ Why build mobile apps? 
○ What is React Native? 
○ How is React Native structured and built? 
○ What is Expo and how do React Native apps run? 
○ Example activity:  
■ Running Apps on Expo 
 
Module 2: Components and the Stylesheet (2 weeks/10 hours) 
In this module, students are introduced to components, the backbone of building apps with React Native. They 
learn about the stylesheet object and how to add custom style attributes to their apps. 
Browse the full content of this module at ​https://codehs.com/library/course/3679/module/5847  
Objectives / Topics  ● Introduction to Components 
Covered  ● Introduction to the Stylesheet API 
  ● Styling View Components 
● Styling Text Components 

Example Assignments  ● Introduction to Components 

/ Labs   ○ What are components? 
○ How are components imported? 
○ Where are components stored in the CodeHS editor? 
○ How do you debug components? 
○ Example activity:  
■ Customizing Text 
■ Debugging Components 
● Introduction to the Stylesheet API 
○ What is the Stylesheet API? 
○ How do you style apps? 
○ How do you connect components to the Stylesheet API? 
○ Example activity: 
■ Connecting Components to the Stylesheet 
● Styling View Components 
 3 

○ How do you style View components? 

○ How are components justified? 
○ How are components aligned? 
○ What is flex direction? 
○ Example activity: 
■ Nested Views 
● Styling Text Components 
○ How are Text components styled? 
○ What are the common styling attributes for Text components? 
○ Example activity: 
■ News Article Styling 
■ My Favorites List 
 
Module 3: Buttons and Text Boxes (1.5 weeks/7 hours) 
In this module, students use the TouchableHighlight to create "buttons" that add a layer of functionality. 
Students also learn about the TextInput component and how to allow users to enter text into their apps. 
Browse the full content of this module at ​https://codehs.com/library/course/3679/module/5849  
Objectives / Topics  ● TouchableHighlight and the onPress Function 
Covered  ● TextInput 
 

Example Assignments  ● TouchableHighlight and the onPress Function 

/ Labs   ○ How do you add a TouchableHighlight component? 
○ How is the TouchableHighlight component used as a button? 
○ What is the onPress function? 
○ Example activity: 
■ Build a Homepage 
● TextInput 
○ What is the TextInput component? 
○ Example activity: 
■ Google Search Page 
■ Feedback Form 
 
Module 4: Advanced Layouts and Images (3 weeks/15 hours) 
In this module, students learn how to add images to their apps to further customize the building experience. 
They gain a deeper understanding of mobile apps layouts using Flex values and the Dimensions API. 
Browse the full content of this module at ​https://codehs.com/library/course/3679/module/5851  
Objectives / Topics  ● The Image Component 
Covered  ● The ImageBackground Component 
● Flex Layouts 
● Dimensions API 

Example Assignments  ● The Image Component 

/ Labs   ○ What is the Image component? 
○ How are image components sized? 
○ What is the ImageBackground component? 
○ How are ImageBackground components sized? 
○ Example activity: 
■ Google Search Page with Images 
■ Phone Background 
 4 

● Flex Layouts 
○ What are flex layouts? 
○ How do you calculate flex layout ratios? 
○ Example activity: 
■ Simple Flag with Flex 
■ Advanced Flag with Flex 
● Dimensions API 
○ What is the Dimensions API? 
○ How can I set the size of components, images, and text using screen 
height and screen width variables? 
○ Example activity: 
■ SnapChat Login Page using Dimensions 
 
Module 5: App Build: Recreate a Popular App (1 week/5 hours) 
In this module, students apply their knowledge of components, images, buttons, text boxes, and layouts to 
recreate a screen of a popular app. They will go through this process in steps, taking time to plan their layout 
and think about the functionality of the app. They may return to the app later to add on additional functions as 
new concepts are learned. 
Browse the full content of this module at ​https://codehs.com/library/course/3679/module/9484  
Objectives / Topics  ● App Build: Recreate a Popular App 
Covered 

Example Assignments  ● App Build: Recreate a Popular App 

/ Labs   ○ How do you plan for an app build? 
○ What functionality does the app have? 
○ How will you use your knowledge of flex values and the Dimensions 
API to make your app responsive? 
 
Module 6: Events and State (2 weeks/10 hours) 
In this module, students learn how to use state values and how to update the state of their app in various ways 
to create quick, dynamic programs. 
Browse the full content of this module at ​https://codehs.com/library/course/3679/module/9342  
Objectives / Topics  ● Introduction to State 
Covered  ● Updating State with onPress 
  ● Using Mathematical Equations to Update State 
● Using Methods to Update String States 

Example Assignments  ● Introduction to State 

/ Labs   ○ What is state? 
○ What is the state object? 
○ How is the state added using JSX? 
○ Example activity: 
■ Setting the Location with State 
● Updating State with onPress 
○ How is the state of an app updated? 
○ How do we call functions to update state? 
○ Example Activity: 
■ Name to Nickname 
● Using Mathematical Equations to Update State 
 5 

○ How can mathematical equations be used to update state values? 

○ Example activity: 
■ Easy Calculator 
● Using Methods to Update String States 
○ How can we use string methods to update the state of a string? 
○ Example activity: 
■ Spellchecker 
 
Module 7: Creating Multiple Screens (1.5 weeks/7 hours) 
In this module, students learn how to take their apps to the next level by adding in functionality that allows for 
content and interactivity on multiple screens. 
Browse the full content of this module at ​https://codehs.com/library/course/3679/module/9343  
Objectives / Topics  ● Creating a Navbar 
Covered  ● Using Buttons to Navigate Screens 

Example Assignments  ● Creating a Navbar 

/ Labs   ○ What is a navbar? 
○ How do I create a navbar? 
○ How can I use images as buttons in my navbar? 
○ Example activity: 
■ iPhone Call Navbar 
● Using Buttons to Navigate Screens 
○ How can state values be used to create multiple screens? 
○ How can I use buttons in my navbar to navigate to different screens? 
○ Example activity: 
■ RSVP Tracker 
 
Module 8: Working with Conditionals (2 weeks/10 hours) 
In this module, students use conditionals to allow for more flexible apps. They also learn how parameters are 
used inside functions. 
Browse the full content of this module at ​https://codehs.com/library/course/3679/module/5852  
Objectives / Topics  ● Conditionals and State Changes 
Covered  ● Conditionals using Parameters 

Example Assignments  ● Conditionals and State Change 

/ Labs   ○ What are conditionals? 
○ Where are conditionals used? 
○ How can the state be updated conditionally? 
○ Example activity: 
■ Venmo Balance Transfer: Check Balance 
● Conditionals using Parameters 
○ How are parameters passed in React Native? 
○ Example activity: 
■ Conditional Winner 
 
Module 9: App Build: Currency Converter App (1 week/5 hours) 
In this module, students apply their knowledge of components, events, state, conditionals, and more to build a 
currency converter app. Students use the Stylesheet to create a user friendly layout that can convert multiple 
currencies! 
 6 
Browse the full content of this module at ​https://codehs.com/library/course/3679/module/9762  
Objectives / Topics  ● Project: Currency Converter App 
Covered 

Example Assignments  ● Project: Currency Converter App 

/ Labs   ○ How do you plan for an app build? 
○ What is the best layout for an app? 
○ How do you pseudocode an app? 
○ What makes an app presentation engaging? 
 
Module 10: Using Collections of Data (1.5 weeks/7 hours) 
Students learn how to use arrays to organize and use larger data sets in their programs. They’ll learn how to use 
mapping to quickly assign styling and layouts to large amounts of data. 
Browse the full content of this module at ​https://codehs.com/library/course/3679/module/9345  
Objectives / Topics  ● Using Arrays and Indexing to Set State 
Covered  ● Mapping Through Objects in Arrays 
 

Example Assignments  ● Using Arrays and Indexing to Set State 

/ Labs   ○ What are Arrays? 
○ How can Arrays be used to store data? 
○ How can I use indexing to set state? 
● Mapping Through Objects in Arrays 
○ What is the map function? 
○ How can I map through my data sets? 
 
Module 11: Working with ScrollView (1.5 weeks/7 hours) 
Students learn how to use scrollview inside their programs to show more content on one page than can fit on 
the screen. Students learn how to scroll through images and text and how mapping can be used with scrollview 
to move through large sets of data. 
Browse the full content of this module at ​https://codehs.com/library/course/3679/module/9346  
Objectives / Topics  ● Using ScrollView 
Covered  ● ScrollView using Objects 
 

Example Assignments  ● Using ScrollView 

/ Labs   ○ What is ScrollView? 
○ Using ScrollView with text and images 
● ScrollView using Objects 
○ How can I use ScrollView with the map function? 
○ Example activity: 
■ Mapping my Class Schedule 
 
Module 12: App Build: Image Feed App (2 week/10 hours) 
In this module, students apply concepts from previous modules to build an image feed app. Students use control 
structures, state, and object mapping to display a number of photos, comments, and other information with the 
ability to "like" photos! 
Browse the full content of this module at ​https://codehs.com/library/course/3679/module/5854  
 7 

Objectives / Topics  ● Project: Image Feed App 

Covered 

Example Assignments  ● Project: Image Feed App 

/ Labs   ○ How do you plan for an app build? 
○ What is the best layout for an app? 
○ How do you pseudocode an app? 
○ What makes an app presentation engaging? 
 
Module 13: Designing User Interfaces (3 weeks/15 hours) 
This unit introduces students to the theory and practice of user interface design. Students learn about what 
makes an engaging and accessible user interface, and will employ an iterative design process including rapid 
prototyping and user testing to design and develop their own engaging web pages. 
Browse the full content of this module at ​https://codehs.com/library/course/3679/module/6663  
Objectives / Topics  ● What makes an engaging interface? 
Covered  ● Various User Interface (UI) Design techniques 
  ● Accessibility issues 
● Readability 
● Lite sites 
● Rapid prototyping 
● User testing 

Example Assignments  ● Research existing user interfaces 

/ Labs   ● Assess the user interfaces of various web sites 
● Design a website using paper prototypes, test these prototypes and get 
feedback from your peers, and improve your design before implementing it 
with code 
● UI Design Project 
○ Find and present an article about a particular UI design technique 
○ Create your own live examples using this technique 
 
Module 14: End of Year App Build (3 weeks/15 hours) 
In this project-facing module, students will use everything they have learned in the course and design, 
prototype, and code their own custom app and present it to their class. 
Browse the full content of this module at ​https://codehs.com/library/course/3679/module/5317  
Objectives / Topics  ● Build Your Own App 
Covered 

Example Assignments  ● Build Your Own App 

/ Labs   ○ How do you plan a larger app with more functionality? 
○ How do you pseudocode an app in stages? 
○ How do you effectively present an app? 
○ Example activity:  
■ App Presentation 
 
Module 15: Final (.5 weeks/2-3 hours) 
Browse the full content of this unit at ​https://codehs.com/library/course/3679/module/7303 
Objectives / Topics  ● Students will be tested on all topics included in the course 
 8 

Covered  ● Multiple choice, fill-in-the-blank, short answer, and coding questions 

included 

Example Assignments  ● Part 1- Multiple Choice: Can be taken online or on paper (Paper version 
/ Labs   found in resources 
● Parts 2, 3 & 4- Fill-in-the-blank, short answer, coding: Paper versions 
available in resources 
 
Supplemental Modules
Supplementary Units  Prerequisite/Recommended Unit(s)   # of activities 

Mobile Apps Prerequisite  Can be used to fill gaps for students before  116 
- HTML  beginning course content 
- CSS 
- Variables 
- Conditionals 

Challenges  Differing needs based on activity. Each item  4 

notes the recommended placement in the 
course. 

Additional Topics  Complete all units in main course  4 

- Changing Attributes 
through User Interaction 

App Build: Trivia App  Complete all units in main course  3 

Midterm  Components and The Stylesheet, Buttons &  1 

Text Boxes, Advanced Layouts & Images,  (offline materials 
Events & State, Creating Multiple Screens,  found in 
Working with Conditionals  resources)