Please enable JavaScript to use CodeHS

Mobile Apps - Outline

  1. Introduction to Mobile Apps

    1. 1.1 Introduction to React Native and Expo

    2. Video 1.1.1 Introduction to React Native and Expo
    3. Check for Understanding 1.1.2 Quiz: Introduction to React Native and Expo
    4. Free Response 1.1.3 Why Mobile Apps?
    5. Notes 1.1.4 What is React Native?
    6. Notes 1.1.5 React Native App Overview
    7. Notes 1.1.6 Running Apps on CodeHS
    8. Notes 1.1.7 Running Apps on Expo
    9. Example 1.1.8 React Native App Example
    10. Free Response 1.1.9 React Native App Example Reflection
  2. Components and the Stylesheet

    1. 2.1 Introduction to Components

    2. Video 2.1.1 Introduction to Components
    3. Check for Understanding 2.1.2 Quiz: Introduction to Components
    4. Example 2.1.3 The Parent View Component
    5. Example 2.1.4 Nesting Multiple Text Components
    6. Exercise 2.1.5 Customizing Text
    7. Exercise 2.1.6 Adding Components
    8. Debugging 2.1.7 Debugging Components
    9. 2.2 Introduction to the Stylesheet API

    10. Video 2.2.1 Introduction to the Stylesheet API
    11. Check for Understanding 2.2.2 Quiz: Introduction to the Stylesheet API
    12. Example 2.2.3 Naming a Stylesheet ID
    13. Example 2.2.4 Multiple Stylesheet ID's
    14. Exercise 2.2.5 Connecting Components to the Stylesheet
    15. Debugging 2.2.6 Debug the Stylesheet
    16. 2.3 Styling View Components

    17. Video 2.3.1 Styling View Components
    18. Check for Understanding 2.3.2 Quiz: Styling View Components
    19. Example 2.3.3 Height and Width
    20. Example 2.3.4 Justifying Content
    21. Example 2.3.5 Aligning Items
    22. Exercise 2.3.6 Rainbow Background
    23. Example 2.3.7 Flex Direction
    24. Example 2.3.8 Checkerboard
    25. Exercise 2.3.9 Nested Views
    26. Exercise 2.3.10 Andy Warhol Image
    27. 2.4 Styling Text Components

    28. Video 2.4.1 Styling Text Components
    29. Check for Understanding 2.4.2 Quiz: Styling Text Components
    30. Example 2.4.3 Text Component Attributes
    31. Example 2.4.4 Text Component Dimensions
    32. Exercise 2.4.5 My Favorites List
    33. Exercise 2.4.6 News Article Styling
    34. Exercise 2.4.7 Google Logo
    35. Exercise 2.4.8 SnapChat Login Page Pt 1: Layout
    36. Exercise 2.4.9 Venmo Balance Transfer Page Pt 1: Layout
    37. Badge 2.4.10 Stylish Mobile App Badge
    38. Survey 2.4.11 Mindset Survey 1
    39. 2.5 Challenge: Scorekeeper Pt 1

    40. Example 2.5.1 Scorekeeper Pt 1: Example
    41. Challenge 2.5.2 Scorekeeper Pt 1: Screen Layout
    42. 2.6 Components and the Stylesheet Quiz

    43. Unit Quiz 2.6.1 Components and the Stylesheet Quiz
  3. Buttons and Text Boxes

    1. 3.1 TouchableHighlight and the onPress Function

    2. Video 3.1.1 TouchableHighlight and the onPress Function
    3. Check for Understanding 3.1.2 Quiz: TouchableHighlight and the onPress Function
    4. Example 3.1.3 TouchableHighlight with Text Only
    5. Example 3.1.4 TouchableHighlight Components as Buttons
    6. Exercise 3.1.5 Adding TouchableHighlight to the News Article
    7. Exercise 3.1.6 SnapChat Login Page Pt 2: Buttons
    8. Exercise 3.1.7 Build a Homescreen
    9. 3.2 TextInput

    10. Video 3.2.1 TextInput
    11. Check for Understanding 3.2.2 TextInput
    12. Example 3.2.3 Adding TextInput
    13. Example 3.2.4 iMessage
    14. Exercise 3.2.5 Google Search Page
    15. Exercise 3.2.6 Feedback Form
    16. Exercise 3.2.7 Venmo Balance Transfer Pt 2: Buttons & Input
    17. 3.3 Challenge: Scorekeeper Pt 2

    18. Challenge 3.3.1 Scorekeeper Pt 2: Buttons and TextInput
    19. 3.4 Buttons & Text Boxes Quiz

    20. Unit Quiz 3.4.1 Buttons and Text Boxes Quiz
  4. Advanced Layouts and Images

    1. 4.1 The Image Component

    2. Video 4.1.1 The Image Component
    3. Check for Understanding 4.1.2 Quiz: The Image Component
    4. Example 4.1.3 Sizing Images Correctly
    5. Example 4.1.4 Images with Text
    6. Exercise 4.1.5 Snapchat Login Page Pt 3: Images
    7. Exercise 4.1.6 Music Player Interface
    8. Exercise 4.1.7 Google Search Page using Images
    9. 4.2 Setting a Background Image

    10. Video 4.2.1 Setting a Background Image
    11. Check for Understanding 4.2.2 Quiz: Setting a Background Image
    12. Example 4.2.3 Setting a Background Image
    13. Exercise 4.2.4 Phone Background
    14. Exercise 4.2.5 Mobile Resume
    15. 4.3 Using Images as Buttons

    16. Video 4.3.1 Using Images as Buttons
    17. Check for Understanding 4.3.2 Quiz: Using Images as Buttons
    18. Example 4.3.3 Using Images as Buttons
    19. Exercise 4.3.4 Interactive Quotes
    20. Exercise 4.3.5 Music Player with TouchableHighlight
    21. Badge 4.3.6 Mobile Image Badge
    22. 4.4 Flex Layouts

    23. Video 4.4.1 Flex Layouts
    24. Check for Understanding 4.4.2 Quiz: Flex Layouts
    25. Example 4.4.3 Using Flex Ratios
    26. Example 4.4.4 Even Quadrants
    27. Example 4.4.5 Uneven Quadrants
    28. Exercise 4.4.6 Rainbow Background with Flex
    29. Exercise 4.4.7 Simple Flag with Flex
    30. Exercise 4.4.8 Advanced Flag with Flex
    31. Exercise 4.4.9 SnapChat Login Page Pt 4: Flex
    32. 4.5 Using 'Dimensions' to Control Size

    33. Video 4.5.1 Using 'Dimensions' to Control Size
    34. Check for Understanding 4.5.2 Quiz: Using 'Dimensions' to Control Size
    35. Example 4.5.3 Even Quadrants with 'Dimensions'
    36. Example 4.5.4 Uneven Quadrants with 'Dimensions'
    37. Example 4.5.5 Using 'Dimensions' to Control Font and Image Size
    38. Exercise 4.5.6 Rainbow Background using 'Dimensions'
    39. Exercise 4.5.7 Simple Flag using 'Dimensions'
    40. Exercise 4.5.8 Advanced Flag using 'Dimensions'
    41. Exercise 4.5.9 SnapChat Login Page Pt 5: 'Dimensions'
    42. 4.6 Challenge: Scorekeeper Pt 3

    43. Challenge 4.6.1 Scorekeeper Pt 3: Images and Responsive Design
    44. Survey 4.6.2 Mindset Survey 3
    45. 4.7 Advanced Layouts and Images Quiz

    46. Unit Quiz 4.7.1 Advanced Layouts and Images Quiz
  5. App Build: Recreate a Popular App

    1. 5.1 Recreate a Popular App

    2. Free Response 5.1.1 Choose an App
    3. Free Response 5.1.2 Plan Layout and Functionality
    4. Video 5.1.3 How to Upload an Image on CodeHS
    5. Exercise 5.1.4 Code Layout
    6. Challenge 5.1.5 Add Functionality
    7. Free Response 5.1.6 Reflection
  6. Events and State

    1. 6.1 Using State to Control Values

    2. Video 6.1.1 Using State to Control Values
    3. Check for Understanding 6.1.2 Using State to Control Values
    4. Example 6.1.3 Initial State
    5. Exercise 6.1.4 Setting the Location with State
    6. Exercise 6.1.5 Multiple State Values
    7. 6.2 Updating State with onPress

    8. Video 6.2.1 Updating State with onPress
    9. Check for Understanding 6.2.2 Updating State with onPress
    10. Example 6.2.3 Updating State with onPress
    11. Example 6.2.4 State Updates Based on Button Press
    12. Exercise 6.2.5 Name to Nickname
    13. Exercise 6.2.6 SnapChat Login Page Pt 6: Using State
    14. 6.3 Using Mathematical Equations to Update State

    15. Video 6.3.1 Using Mathematical Equations to Update State
    16. Check for Understanding 6.3.2 Using Mathematical Equations to Update State
    17. Example 6.3.3 Updating the Count
    18. Exercise 6.3.4 Full Counter App
    19. Challenge 6.3.5 Easy Calculator
    20. 6.4 Using Methods to Update String States

    21. Video 6.4.1 Using Methods to Update String States
    22. Check for Understanding 6.4.2 Using Methods to Update String States
    23. Example 6.4.3 Upper and Lower
    24. Exercise 6.4.4 Updating the Mood of a String with State
    25. Exercise 6.4.5 Spellchecker
    26. 6.5 Challenge: Scorekeeper Pt 4

    27. Challenge 6.5.1 Scorekeeper Pt 4: Functionality with States
    28. Survey 6.5.2 Mindset Survey 2
    29. 6.6 Events and State Quiz

    30. Unit Quiz 6.6.1 Events and State Quiz
  7. Creating Multiple Screens

    1. 7.1 Creating a Navbar

    2. Video 7.1.1 Creating a Navbar
    3. Check for Understanding 7.1.2 Creating a Navbar
    4. Example 7.1.3 Bottom Navbar
    5. Exercise 7.1.4 Top Navbar
    6. Exercise 7.1.5 Icon Navbar in Landscape
    7. Exercise 7.1.6 iPhone Call Navbar
    8. 7.2 Using Buttons to Navigate Screens

    9. Video 7.2.1 Using Buttons to Navigate Screens
    10. Check for Understanding 7.2.2 Using Buttons to Navigate Screens
    11. Example 7.2.3 Two Screen App
    12. Exercise 7.2.4 Name & Image App
    13. Exercise 7.2.5 Mobile Biography of a Role Model
    14. Exercise 7.2.6 RSVP Tracker
    15. 7.3 Challenge: Scorekeeper Pt 5

    16. Challenge 7.3.1 Scorekeeper Pt 5: Multiple Screens
    17. 7.4 Creating Multiple Screens Quiz

    18. Unit Quiz 7.4.1 Creating Multiple Screens Quiz
  8. Working with Conditionals

    1. 8.1 Conditionals and State Change

    2. Video 8.1.1 Conditionals and State Change
    3. Check for Understanding 8.1.2 Quiz: Conditionals and State Change
    4. Example 8.1.3 Marathon Counter App
    5. Exercise 8.1.4 Savings Tracker
    6. Exercise 8.1.5 Venmo Balance Transfer Pt 3: Check Balance
    7. 8.2 Conditionals using Parameters

    8. Video 8.2.1 Conditionals using Parameters
    9. Check for Understanding 8.2.2 Conditionals using Parameters
    10. Example 8.2.3 Parameters and Conditional Background Images
    11. Example 8.2.4 Traffic Light Conditionals
    12. Exercise 8.2.5 Conditional Winner!
    13. Challenge 8.2.6 Trivia App
    14. 8.3 Challenge: Scorekeeper Pt 6

    15. Challenge 8.3.1 Scorekeeper Pt 6: Add Standings Page
    16. 8.4 Working with Conditionals Quiz

    17. Unit Quiz 8.4.1 Working with Conditionals Quiz
  9. App Build: Currency Converter

    1. 9.1 Currency Converter

    2. Free Response 9.1.1 Plan Layout and Functionality
    3. Exercise 9.1.2 Code the Layout
    4. Challenge 9.1.3 Add Functionality
    5. Free Response 9.1.4 Reflection
  10. Using Collections of Data

    1. 10.1 Using Arrays and Indexing to Set State

    2. Video 10.1.1 Using Arrays and Indexing to Set State
    3. Check for Understanding 10.1.2 Using Arrays and Indexing to Set State
    4. Example 10.1.3 Traveling to Multiple States
    5. Example 10.1.4 Conditional Winner Using Arrays
    6. Exercise 10.1.5 Conditional Roadtrip
    7. Exercise 10.1.6 Time of Day
    8. 10.2 Mapping Through Objects in Arrays

    9. Video 10.2.1 Mapping Through Objects in Arrays
    10. Check for Understanding 10.2.2 Mapping Through Objects in Arrays
    11. Example 10.2.3 Guest List
    12. Exercise 10.2.4 ClassPass Pt 1: Schedule
    13. Exercise 10.2.5 Favorite Movies List
    14. 10.3 Challenge: Scorekeeper Pt 7

    15. Challenge 10.3.1 Scorekeeper Pt 7: Implement Arrays
    16. 10.4 Using Collections of Data Quiz

    17. Unit Quiz 10.4.1 Using Collections of Data Quiz
  11. Working with ScrollView

    1. 11.1 Using ScrollView

    2. Video 11.1.1 Using ScrollView
    3. Check for Understanding 11.1.2 Using ScrollView
    4. Example 11.1.3 Class Schedule ScrollView
    5. Example 11.1.4 Scrolling through National Parks
    6. Exercise 11.1.5 Scrollable List of BFF's
    7. Exercise 11.1.6 ScrollView inside ScrollView
    8. 11.2 ScrollView using Objects

    9. Video 11.2.1 ScrollView using Objects
    10. Check for Understanding 11.2.2 ScrollView using Objects
    11. Example 11.2.3 Scrolling through Mapped National Parks
    12. Example 11.2.4 Mapping through a Class Schedule with ScrollView
    13. Exercise 11.2.5 Mapping My BFF's
    14. Challenge 11.2.6 ClassPass Pt 2: Add Features
    15. Survey 11.2.7 Mindset Survey 4
    16. 11.3 Challenge: Scorekeeper Pt 8

    17. Challenge 11.3.1 Scorekeeper Pt 8: Add ScrollView
    18. 11.4 Working with ScrollView Quiz

    19. Unit Quiz 11.4.1 Working with ScrollView Quiz
  12. App Build: Image Feed App

    1. 12.1 Project: Image Feed

    2. Free Response 12.1.1 Plan Layout and Functionality
    3. Exercise 12.1.2 Code the Layout
    4. Challenge 12.1.3 Add Functionality
    5. Free Response 12.1.4 Reflection
    6. Badge 12.1.5 Image Feed Badge
  13. Designing User Interfaces

    1. 13.1 Intro to Design Thinking

    2. Video 13.1.1 Intro to Design Thinking
    3. Check for Understanding 13.1.2 Intro to Design Thinking
    4. Free Response 13.1.3 User Interface Scavenger Hunt
    5. Connection 13.1.4 Case Study: Helping Blind People See
    6. Free Response 13.1.5 Case Study Responses
    7. Connection 13.1.6 Crash Course: Empathize
    8. Free Response 13.1.7 Empathize Notes
    9. Connection 13.1.8 Crash Course: Define
    10. Free Response 13.1.9 Problem Statement
    11. Connection 13.1.10 Crash Course: Ideate
    12. Free Response 13.1.11 Ideate Notes
    13. Connection 13.1.12 Crash Course: Prototype and Test
    14. Free Response 13.1.13 Testing Notes
    15. Free Response 13.1.14 Topic Brainstorm
    16. Free Response 13.1.15 Narrowing Down Topics
    17. 13.2 Empathy

    18. Video 13.2.1 Empathy
    19. Check for Understanding 13.2.2 Empathy Quiz
    20. Connection 13.2.3 A Cafeteria Designed for Me
    21. Free Response 13.2.4 A Cafeteria Designed for Me
    22. Connection 13.2.5 Accessibility
    23. Free Response 13.2.6 Accessibility Tips
    24. Free Response 13.2.7 Accessibility: Designing for ALL
    25. Connection 13.2.8 How to Interview
    26. Free Response 13.2.9 How to Interview
    27. Free Response 13.2.10 User Interview
    28. 13.3 Define

    29. Video 13.3.1 Define
    30. Check for Understanding 13.3.2 Define Quiz
    31. Connection 13.3.3 Make a Composite Character Profile
    32. Free Response 13.3.4 Composite Character Profile
    33. Free Response 13.3.5 Point-of-View Statement Brainstorm
    34. Free Response 13.3.6 POV Statement
    35. 13.4 Ideate

    36. Video 13.4.1 Ideate
    37. Check for Understanding 13.4.2 Ideate Quiz
    38. Connection 13.4.3 Stoke
    39. Free Response 13.4.4 Get Stoked
    40. Connection 13.4.5 Brainstorming Tips
    41. Free Response 13.4.6 Ideate!
    42. 13.5 Prototype

    43. Video 13.5.1 Prototype
    44. Check for Understanding 13.5.2 Prototype Quiz
    45. Connection 13.5.3 Brainstorm Selection
    46. Free Response 13.5.4 Harvest Ideas from the Brainstorm
    47. Connection 13.5.5 Wizard of Oz Prototyping
    48. Connection 13.5.6 Example Wizard of Oz Paper Prototype
    49. Free Response 13.5.7 Make Your Paper Prototypes!
    50. 13.6 Test

    51. Video 13.6.1 Test
    52. Check for Understanding 13.6.2 Testing Quiz
    53. Connection 13.6.3 Testing with Users
    54. Connection 13.6.4 Example: How to User Test
    55. Free Response 13.6.5 How to User Test Responses
    56. Connection 13.6.6 Example: How NOT to User Test
    57. Free Response 13.6.7 How NOT to User Test Responses
    58. Free Response 13.6.8 Test Prototype 1
    59. Free Response 13.6.9 Test Prototype 2
    60. Free Response 13.6.10 Improve Your Prototype
    61. 13.7 Designing User Interfaces Quiz

    62. Unit Quiz 13.7.1 Designing User Interfaces Quiz
    63. Badge 13.7.2 Designing User Interfaces Badge
  14. End of Course App Build

    1. 14.1 Build Your Own App

    2. Free Response 14.1.1 App Planning
    3. Pseudocode 14.1.2 Planning with Pseudocode
    4. Challenge 14.1.3 Code the Layout
    5. Challenge 14.1.4 App Functionality
    6. Presentation 14.1.5 App Presentation
    7. Badge 14.1.6 Custom App Badge
  15. Final

    1. 15.1 Final Exam

    2. Midterm 15.1.1 Mobile Apps Pt. 1: Multiple Choice
  16. Mobile Apps Prerequisite

  17. App Build: Trivia App

    1. 17.1 Project: Trivia App

    2. Free Response 17.1.1 Plan Layout and Functionality
    3. Exercise 17.1.2 Code the Layout
    4. Challenge 17.1.3 Add Functionality
  18. Challenges

    1. 18.1 Mobile Apps Challenge Exercises

    2. Exercise 18.1.1 Tic Tac Toe Board (5.1.10)
    3. Exercise 18.1.2 Instagram Feed (5.2.12)
    4. Exercise 18.1.3 Updating Instagram Likes (6.1.8)
    5. Exercise 18.1.4 Adding ScrollView and Likes to Instagram (6.2.9)
  19. Midterm

    1. 19.1 Midterm

    2. Final 19.1.1 Midterm Pt 1: Multiple Choice
  20. Additional Topics

    1. 20.1 Changing Attributes Through User Interaction

    2. Example 20.1.1 Changing Button on Click
    3. Example 20.1.2 Changing Button Color with Conditionals
    4. Exercise 20.1.3 Change Button Size
    5. Exercise 20.1.4 Update Button Appearance when Pressed