Please enable JavaScript to use CodeHS

Mobile Apps (Semester) - 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 Build a Homescreen
    8. Exercise 3.1.7 SnapChat Login Page Pt 2: Buttons

    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. Midterm

    1. 10.1 Midterm

    2. Final 10.1.1 Midterm Pt 1: Multiple Choice

  11. Additional Topics

    1. 11.1 Changing Attributes Through User Interaction

    2. Example 11.1.1 Changing Button on Click
    3. Example 11.1.2 Changing Button Color with Conditionals
    4. Exercise 11.1.3 Change Button Size

  12. Mobile Apps Prerequisite

    1. 12.1 Introduction to HTML

    2. Video 12.1.1 Introduction to HTML
    3. Check for Understanding 12.1.2 Introduction to HTML Quiz
    4. Example 12.1.3 Our First HTML Page
    5. Exercise 12.1.4 Say Hello!

    6. 12.2 Structure of an HTML Page

    7. Video 12.2.1 Structure of an HTML Page
    8. Check for Understanding 12.2.2 Structure of an HTML Page Quiz
    9. Example 12.2.3 HTML Template
    10. Example 12.2.4 Hello World Page
    11. Exercise 12.2.5 The <title> Tag
    12. Exercise 12.2.6 Your First HTML Page

    13. 12.3 Formatting Text

    14. Video 12.3.1 Formatting Text
    15. Check for Understanding 12.3.2 Formatting Text Quiz
    16. Example 12.3.3 Dictionary
    17. Exercise 12.3.4 Word Definitions
    18. Exercise 12.3.5 Pet Names
    19. Exercise 12.3.6 Call of the Wild
    20. Badge 12.3.7 Formatting Badge

    21. 12.4 Links

    22. Video 12.4.1 Links
    23. Check for Understanding 12.4.2 Links Quiz
    24. Example 12.4.3 The <a> Tag
    25. Exercise 12.4.4 Bookmarks
    26. Exercise 12.4.5 Encyclopedias

    27. 12.5 Images

    28. Video 12.5.1 Images
    29. Check for Understanding 12.5.2 Images Quiz
    30. Example 12.5.3 The <img> Tag
    31. Example 12.5.4 Building the CodeHS Homepage
    32. Exercise 12.5.5 Collage on a Theme
    33. Exercise 12.5.6 Linking an Image
    34. Exercise 12.5.7 National Parks

    35. 12.6 HTML Lists

    36. Video 12.6.1 HTML Lists
    37. Check for Understanding 12.6.2 HTML Lists Quiz
    38. Example 12.6.3 Grocery Shopping
    39. Exercise 12.6.4 Class Planning
    40. Exercise 12.6.5 Dream Destinations
    41. Exercise 12.6.6 Vacation Guides

    42. 12.7 HTML Tables

    43. Video 12.7.1 HTML Tables
    44. Check for Understanding 12.7.2 HTML Tables Quiz
    45. Example 12.7.3 Address Book
    46. Exercise 12.7.4 National Sports
    47. Exercise 12.7.5 Table of Favorites

    48. 12.8 HTML Styling

    49. Video 12.8.1 HTML Styling
    50. Check for Understanding 12.8.2 HTML Styling Quiz
    51. Example 12.8.3 Stylish Address Book
    52. Exercise 12.8.4 Background Colors
    53. Exercise 12.8.5 Style Your Class List
    54. Badge 12.8.6 Styling Badge

    55. 12.9 HTML Colors

    56. Video 12.9.1 HTML Colors
    57. Check for Understanding 12.9.2 HTML Colors Quiz
    58. Example 12.9.3 HTML Colors Examples
    59. Exercise 12.9.4 Create Your Own Color
    60. Exercise 12.9.5 Gradients
    61. Connection 12.9.6 Color Wheel
    62. Exercise 12.9.7 Using Good Colors

    63. 12.10 Introduction to CSS

    64. Video 12.10.1 Introduction to CSS
    65. Check for Understanding 12.10.2 Introduction to CSS Quiz
    66. Example 12.10.3 Styling your H1s
    67. Exercise 12.10.4 First style with CSS
    68. Exercise 12.10.5 List Styling
    69. Exercise 12.10.6 Endangered Animals: Skeleton

    70. 12.11 CSS Select by Tag

    71. Video 12.11.1 CSS Select by Tag
    72. Check for Understanding 12.11.2 CSS Select by Tag Quiz
    73. Example 12.11.3 Rainbow
    74. Example 12.11.4 Dog Styling
    75. Exercise 12.11.5 Set List
    76. Exercise 12.11.6 Your Appliance Recommendations
    77. Exercise 12.11.7 Endangered Animals: Style the Headers

    78. 12.12 CSS Select by Class

    79. Video 12.12.1 CSS Select by Class
    80. Check for Understanding 12.12.2 CSS Select by Class Quiz
    81. Example 12.12.3 Simple Checkerboard
    82. Exercise 12.12.4 Swim Meet
    83. Exercise 12.12.5 Favorite Things
    84. Exercise 12.12.6 Endangered Animals: Add Color Coding

    85. 12.13 CSS Select by ID

    86. Video 12.13.1 CSS Select by ID
    87. Check for Understanding 12.13.2 CSS Select by ID Quiz
    88. Example 12.13.3 Logo
    89. Exercise 12.13.4 Must Do Today!
    90. Exercise 12.13.5 Lomeli's Menu
    91. Exercise 12.13.6 Endangered Animals: Add Pictures
    92. Badge 12.13.7 Selector Badge

    93. 12.14 The Cascade

    94. Video 12.14.1 The Cascade
    95. Check for Understanding 12.14.2 The Cascade Quiz
    96. Example 12.14.3 Using Importance
    97. Example 12.14.4 Order of Precedence
    98. Exercise 12.14.5 We Really Like Dairy
    99. Exercise 12.14.6 Style the Table

    100. 12.15 Variables

    101. Video 12.15.1 Variables
    102. Check for Understanding 12.15.2 Variables Quiz
    103. Example 12.15.3 Basic Variables
    104. Exercise 12.15.4 Daily Activities

    105. 12.16 Booleans

    106. Video 12.16.1 Booleans
    107. Check for Understanding 12.16.2 Booleans Quiz
    108. Example 12.16.3 First Boolean
    109. Exercise 12.16.4 Do You Have a Dog?

    110. 12.17 Logical Operators

    111. Video 12.17.1 Logical Operators
    112. Check for Understanding 12.17.2 Logical Operators Quiz
    113. Example 12.17.3 Light Switch
    114. Example 12.17.4 President
    115. Example 12.17.5 Wasting Time
    116. Exercise 12.17.6 Can You Graduate?
    117. Exercise 12.17.7 School's Out

    118. 12.18 Comparison Operators

    119. Video 12.18.1 Comparison Operators
    120. Check for Understanding 12.18.2 Comparison Operators Quiz
    121. Example 12.18.3 Voting Age
    122. Example 12.18.4 Grade Range
    123. Exercise 12.18.5 Rolling Dice
    124. Exercise 12.18.6 Girl Scout Designation

    125. 12.19 If Statements

    126. Video 12.19.1 If Statements
    127. Check for Understanding 12.19.2 If Statements Quiz
    128. Example 12.19.3 Negative Numbers
    129. Example 12.19.4 Great Names
    130. Example 12.19.5 Even and Odd
    131. Example 12.19.6 Secret Password
    132. Exercise 12.19.7 Teenagers
    133. Exercise 12.19.8 Dietary Restrictions
    134. Badge 12.19.9 Conditionals Badge
    135. Survey 12.19.10 Mindset Survey 2

  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