My FreeCodeCamp Journal

My code from the bootcamp.

View the Project on GitHub Rafase282/My-FreeCodeCamp-Code


This repository is not for an app but more as a journal where I keep a record of everything I have done and learned from FreeCodeCamp. I decided to use a wiki as I can put more information easily on it. You will find my code there and also on the right directories if you just want to see the code.

I try to keep it updated but bear in mind that the challenges have and will continue to change and I might not update previous comments, or code. I do tend to update the code only section of the repo with new improved solutions when I do review then but given my time, I don't have a set schedule for it.

If you want to contribute, you can follow these steps found here How To Contribute To The Wiki.. I will be accepting improvements with explanations, grammar fixes and perhaps some minor code for the wiki side, but when it comes to the coding section I will not be accepting pull requests.

Contact me

Rafael Rodriguez


Github | FreeCodeCamp | CodePen | LinkedIn | Medium | Portfolio | E-Mail

Get Started with Free Code Camp

  1. Lesson: Learn how Free Code Camp Works Incomplete
  2. Lesson: Create a GitHub Account and Join our Chat Rooms Incomplete
  3. Lesson: Configure your Public Profile Incomplete
  4. Lesson: Join a Campsite in Your City Incomplete
  5. Lesson: Learn What to Do If You Get Stuck


  1. Lesson: Say Hello to HTML Elements
  2. Lesson: Headline with the h2 Element
  3. Lesson: Inform with the Paragraph Element
  4. Lesson: Uncomment HTML
  5. Lesson: Comment out HTML
  6. Lesson: Fill in the Blank with Placeholder Text
  7. Lesson: Delete HTML Elements
  8. Lesson: Change the Color of Text
  9. Lesson: Use CSS Selectors to Style Elements
  10. Lesson: Use a CSS Class to Style an Element
  11. Lesson: Style Multiple Elements with a CSS Class
  12. Lesson: Change the Font Size of an Element
  13. Lesson: Set the Font Family of an Element
  14. Lesson: Import a Google Font
  15. Lesson: Specify How Fonts Should Degrade
  16. Lesson: Add Images to your Website
  17. Lesson: Size your Images
  18. Lesson: Add Borders Around your Elements
  19. Lesson: Add Rounded Corners with a Border Radius
  20. Lesson: Make Circular Images with a Border Radius
  21. Lesson: Link to External Pages with Anchor Elements
  22. Lesson: Nest an Anchor Element within a Paragraph
  23. Lesson: Make Dead Links using the Hash Symbol
  24. Lesson: Turn an Image into a Link
  25. Lesson: Add Alt Text to an Image for Accessibility
  26. Lesson: Create a Bulleted Unordered List
  27. Lesson: Create an Ordered List
  28. Lesson: Create a Text Field
  29. Lesson: Add Placeholder Text to a Text Field
  30. Lesson: Create a Form Element
  31. Lesson: Add a Submit Button to a Form
  32. Lesson: Use HTML5 to Require a Field
  33. Lesson: Create a Set of Radio Buttons
  34. Lesson: Create a Set of Checkboxes
  35. Lesson: Check Radio Buttons and Checkboxes by Default
  36. Lesson: Nest Many Elements within a Single Div Element
  37. Lesson: Give a Background Color to a Div Element
  38. Lesson: Set the ID of an Element
  39. Lesson: Use an ID Attribute to Style an Element
  40. Lesson: Adjusting the Padding of an Element
  41. Lesson: Adjust the Margin of an Element
  42. Lesson: Add a Negative Margin to an Element
  43. Lesson: Add Different Padding to Each Side of an Element
  44. Lesson: Add Different Margins to Each Side of an Element
  45. Lesson: Use Clockwise Notation to Specify the Padding of an Element
  46. Lesson: Use Clockwise Notation to Specify the Margin of an Element
  47. Lesson: Style the HTML Body Element
  48. Lesson: Inherit Styles from the Body Element
  49. Lesson: Prioritize One Style Over Another
  50. Lesson: Override Styles in Subsequent CSS
  51. Lesson: Override Class Declarations by Styling ID Attributes
  52. Lesson: Override Class Declarations with Inline Styles
  53. Lesson: Override All Other Styles by using Important
  54. Lesson: Use Hex Code for Specific Colors
  55. Lesson: Use Hex Code to Color Elements White
  56. Lesson: Use Hex Code to Color Elements Red
  57. Lesson: Use Hex Code to Color Elements Green
  58. Lesson: Use Hex Code to Color Elements Blue
  59. Lesson: Use Hex Code to Mix Colors
  60. Lesson: Use Hex Code to Color Elements Gray
  61. Lesson: Use Hex Code for Specific Shades of Gray
  62. Lesson: Use Abbreviated Hex Code
  63. Lesson: Use RGB values to Color Elements
  64. Lesson: Use RGB to Color Elements White
  65. Lesson: Use RGB to Color Elements Red
  66. Lesson: Use RGB to Color Elements Green
  67. Lesson: Use RGB to Color Elements Blue
  68. Lesson: Use RGB to Mix Colors
  69. Lesson: Use RGB to Color Elements Gray

Responsive Design with Bootstrap

  1. Lesson: Use Responsive Design with Bootstrap Fluid Containers
  2. Lesson: Make Images Mobile Responsive
  3. Lesson: Center Text with Bootstrap
  4. Lesson: Create a Bootstrap Button
  5. Lesson: Create a Block Element Bootstrap Button
  6. Lesson: Taste the Bootstrap Button Color Rainbow
  7. Lesson: Call out Optional Actions with Button Info
  8. Lesson: Warn your Users of a Dangerous Action
  9. Lesson: Use the Bootstrap Grid to Put Elements Side By Side
  10. Lesson: Ditch Custom CSS for Bootstrap
  11. Lesson: Use Spans for Inline Elements
  12. Lesson: Create a Custom Heading
  13. Lesson: Add Font Awesome Icons to our Buttons
  14. Lesson: Add Font Awesome Icons to all of our Buttons
  15. Lesson: Responsively Style Radio Buttons
  16. Lesson: Responsively Style Checkboxes
  17. Lesson: Style Text Inputs as Form Controls
  18. Lesson: Line up Form Elements Responsively with Bootstrap
  19. Lesson: Create a Bootstrap Headline
  20. Lesson: House our page within a Bootstrap Container Fluid Div
  21. Lesson: Create a Bootstrap Row
  22. Lesson: Split your Bootstrap Row
  23. Lesson: Create Bootstrap Wells
  24. Lesson: Add Elements within your Bootstrap Wells
  25. Lesson: Apply the Default Bootstrap Button Style
  26. Lesson: Create a Class to Target with jQuery Selectors
  27. Lesson: Add ID Attributes to Bootstrap Elements
  28. Lesson: Label Bootstrap Wells
  29. Lesson: Give Each Element a Unique ID
  30. Lesson: Label Bootstrap Buttons
  31. Lesson: Use Comments to Clarify Code

Gear up for Success

  1. Lesson: Browse Camper News Incomplete
  2. Lesson: Reference our Wiki Incomplete
  3. Lesson: Join our LinkedIn Alumni Network Incomplete
  4. Lesson: Commit to a Goal and a Nonprofit


  1. Lesson: Learn how Script Tags and Document Ready Work
  2. Lesson: Target HTML Elements with Selectors Using jQuery
  3. Lesson: Target Elements by Class Using jQuery
  4. Lesson: Target Elements by ID Using jQuery
  5. Lesson: Delete your jQuery Functions
  6. Lesson: Target the same element with multiple jQuery Selectors
  7. Lesson: Remove Classes from an element with jQuery
  8. Lesson: Change the CSS of an Element Using jQuery
  9. Lesson: Disable an Element Using jQuery
  10. Lesson: Change Text Inside an Element Using jQuery
  11. Lesson: Remove an Element Using jQuery
  12. Lesson: Use appendTo to Move Elements with jQuery
  13. Lesson: Clone an Element Using jQuery
  14. Lesson: Target the Parent of an Element Using jQuery
  15. Lesson: Target the Children of an Element Using jQuery
  16. Lesson: Target a Specific Child of an Element Using jQuery
  17. Lesson: Target Even Numbered Elements Using jQuery
  18. Lesson: Use jQuery to Modify the Entire Page

Basic JavaScript

  1. Lesson: Comment your JavaScript Code
  2. Lesson: Understand Boolean Values
  3. Lesson: Declare JavaScript Variables
  4. Lesson: Storing Values with the Equal Operator
  5. Lesson: Initializing Variables with the Equal
  6. Lesson: Understanding Uninitialized Variables
  7. Lesson: Understanding Case Sensitivity in Variables
  8. Lesson: Add Two Numbers with JavaScript
  9. Lesson: Subtract One Number from Another with JavaScript
  10. Lesson: Multiply Two Numbers with JavaScript
  11. Lesson: Divide One Number by Another with JavaScript
  12. Lesson: Increment a Number with Javascript
  13. Lesson: Decrement a Number with Javascript
  14. Lesson: Create Decimal Numbers with JavaScript
  15. Lesson: Multiply Two Decimals with JavaScript
  16. Lesson: Divide one Decimal by Another with JavaScript
  17. Lesson: Finding a Remainder in Javascript
  18. Lesson: Assignment with Plus Equals
  19. Lesson: Assignment with Minus Equals
  20. Lesson: Assignment with Times Equals
  21. Lesson: Assignment with Divided by Equals
  22. Lesson Review: Convert Celsius to Fahrenheit
  23. Lesson: Declare String Variables
  24. Lesson: Escaping Literal Quotes in Strings
  25. Lesson: Quoting Strings with Single Quotes
  26. Lesson: Escape Sequences in Strings
  27. Lesson: Concatenating Strings with Plus Operator
  28. Lesson: Concatenating Strings with the Plus Equals Operator
  29. Lesson: Constructing Strings with Variables
  30. Lesson: Appending Variables to Strings
  31. Lesson: Find the Length of a String
  32. Lesson: Use Bracket Notation to Find the First Character in a String
  33. Lesson: Understand String Immutability
  34. Lesson: Use Bracket Notation to Find the Nth Character in a String
  35. Lesson: Use Bracket Notation to Find the Last Character in a String
  36. Lesson: Use Bracket Notation to Find the Nth-to-Last Character in a String
  37. Lesson Review: Word Blanks
  38. Lesson: Store Multiple Values in one Variable using JavaScript Arrays
  39. Lesson: Nest one Array within Another Array
  40. Lesson: Access Array Data with Indexes
  41. Lesson: Modify Array Data With Indexes
  42. Lesson: Access Multi-Dimensional Arrays With Indexes
  43. Lesson: Manipulate Arrays With push()
  44. Lesson: Manipulate Arrays With pop()
  45. Lesson: Manipulate Arrays With shift()
  46. Lesson: Manipulate Arrays With unshift()
  47. Lesson Review: Shopping List
  48. Lesson: Write Reusable JavaScript with Functions
  49. Lesson: Passing Values to Functions with Arguments
  50. Lesson: Global Scope and Functions
  51. Lesson: Local Scope and Functions
  52. Lesson: Global vs. Local Scope in Functions
  53. Lesson: Return a Value from a Function with Return
  54. Lesson: Assignment with a Returned Value
  55. Lesson Review: Stand in Line
  56. Lesson: Use Conditional Logic with If Statements
  57. Lesson: Comparison with the Equality Operator
  58. Lesson: Comparison with the Strict Equality Operator
  59. Lesson: Comparison with the Inequality Operator
  60. Lesson: Comparison with the Strict Inequality Operator
  61. Lesson: Comparison with the Greater Than Operator
  62. Lesson: Comparison with the Greater Than Equal To Operator
  63. Lesson: Comparison with the Less Than Operator
  64. Lesson: Comparison with the Less Than Equal To Operator
  65. Lesson: Comparisons with the Logical And Operator
  66. Lesson: Comparisons with the Logical Or Operator
  67. Lesson: Introducing Else Statements
  68. Lesson: Introducing Else If Statements
  69. Lesson: Chaining If Else Statements
  70. Lesson Review: Golf Code
  71. Lesson: Selecting from many options with Switch Statements
  72. Lesson: Adding a default option in Switch statements
  73. Lesson: Multiple Identical Options in Switch Statements
  74. Lesson: Replacing If Else Chains with Switch
  75. Lesson: Returning Boolean Values from Functions
  76. Lesson: Return Early Pattern for Functions
  77. Lesson Review: Counting Cards
  78. Lesson: Build JavaScript Objects
  79. Lesson: Accessing Objects Properties with the Dot Operator
  80. Lesson: Accessing Objects Properties with Bracket Notation
  81. Lesson: Accessing Objects Properties with Variables
  82. Lesson: Updating Object Properties
  83. Lesson: Add New Properties to a JavaScript Object
  84. Lesson: Delete Properties from a JavaScript Object
  85. Lesson: Using Objects for Lookups
  86. Lesson: Testing Objects for Properties
  87. Lesson: Introducing JavaScript Object Notation (JSON)
  88. Lesson: Accessing Nested Objects in JSON
  89. Lesson: Accessing Nested Arrays in JSON
  90. Lesson Review: Record Collection
  91. Lesson: Iterate with JavaScript For Loops
  92. Lesson: Iterate Odd Numbers With a For Loop
  93. Lesson: Count Backwards With a For Loop
  94. Lesson: Iterate Through an Array with a For Loop
  95. Lesson: Nesting For Loops
  96. Lesson: Iterate with JavaScript While Loops
  97. Lesson: Generate Random Fractions with JavaScript
  98. Lesson: Generate Random Whole Numbers with JavaScript
  99. Lesson: Generate Random Whole Numbers within a Range
  100. Lesson: Sift through Text with Regular Expressions
  101. Lesson: Find Numbers with Regular Expressions
  102. Lesson: Find Whitespace with Regular Expressions
  103. Lesson: Invert Regular Expression Matches with JavaScript
  104. Lesson Review: Profile Lookup


  1. Old One Page Basic JavaScript Lessons
  2. Lesson: Create a JavaScript Slot Machine
  3. Lesson: Add your JavaScript Slot Machine Slots
  4. Lesson: Bring your JavaScript Slot Machine to Life
  5. Lesson: Give your JavaScript Slot Machine some stylish images
  6. Old Advanced Lesson: Functional Programming in JavaScript

Object Oriented and Functional Programming

  1. Lesson: Declare JavaScript Objects as Variables
  2. Lesson: Construct JavaScript Objects with Functions
  3. Lesson: Make Object Properties Private
  4. Lesson: Make Unique Objects by Passing Parameters to our Constructor
  5. Lesson: Make Instances of Objects with a Constructor Function
  6. Lesson: Iterate over Arrays with .map
  7. Lesson: Condense arrays with .reduce
  8. Lesson: Filter Arrays with .filter
  9. Lesson: Sort Arrays with .sort
  10. Lesson: Reverse Arrays with .reverse
  11. Lesson: Concatenate Strings with .concat
  12. Lesson: Split Strings with .split
  13. Lesson: Join Strings with .join

Basic Algorithm Scripting

  1. Lesson: Get Set for Bonfires
  2. Bonfire: Meet Bonfire
  3. Bonfire: Reverse a String
  4. Bonfire: Factorialize a Number
  5. Bonfire: Check for Palindromes
  6. Bonfire: Find the Longest Word in a String
  7. Bonfire: Title Case a Sentence
  8. Bonfire: Return Largest Numbers in Arrays
  9. Bonfire: Confirm the Ending
  10. Bonfire: Repeat a string repeat a string
  11. Bonfire: Truncate a string
  12. Bonfire: Chunky Monkey
  13. Bonfire: Slasher Flick
  14. Bonfire: Mutations
  15. Bonfire: Falsey Bouncer
  16. Bonfire: Seek and Destroy
  17. Bonfire: Where do I belong
  18. Bonfire: Caesar's Cipher

Basic Front End Development Projects

  1. Lesson: Get Set for Ziplines
  2. Zipline: Build a Personal Portfolio Webpage
  3. Zipline: Build a Random Quote Machine
  4. Zipline: Show the Local Weather
  5. Zipline: Build a Pomodoro Clock
  6. Zipline: Use the JSON API
  7. Zipline: Build a JavaScript Calculator

Intermediate Algorithm Scripting

  1. Bonfire: Sum All Numbers in a Range
  2. Bonfire: Diff Two Arrays
  3. Bonfire: Roman Numeral Converter
  4. Bonfire: Where art thou
  5. Bonfire: Search and Replace
  6. Bonfire: Pig Latin
  7. Bonfire: DNA Pairing
  8. Bonfire: Missing letters
  9. Bonfire: Boo who
  10. Bonfire: Sorted Union
  11. Bonfire: Convert HTML Entities
  12. Bonfire: Spinal Tap Case
  13. Bonfire: Sum All Odd Fibonacci Numbers
  14. Bonfire: Sum All Primes
  15. Bonfire: Smallest Common Multiple
  16. Bonfire: Finders Keepers
  17. Bonfire: Drop it
  18. Bonfire: Steamroller
  19. Bonfire: Binary Agents
  20. Bonfire: Everything Be True
  21. Bonfire: Arguments Optional

JSON APIs and Ajax  

  1. Lesson: Trigger Click Events with jQuery Incomplete
  2. Lesson: Change Text with Click Events
  3. Lesson: Get JSON with the jQuery getJSON Method
  4. Lesson: Convert JSON Data to HTM
  5. Lesson: Render Images from Data Sources
  6. Lesson: Prefilter JSON
  7. Lesson: Get Geo-location Data

Intermediate Front End Development Projects

  1. Zipline: Stylize Stories on Camper News
  2. Zipline: Wikipedia Viewer
  3. Zipline: Build a Tic Tac Toe Game
  4. Zipline: Build a Simon Game

Claim Your Front End Development Certificate

  1. My Front End Development Certificate


  1. Lesson: Learn SASS Challenges


  1. Lesson: Learn React Challenges

React Projects  

  1. Zipline: Build a Markdown Previewer
  2. Zipline: Build a Camper Leaderboard
  3. Zipline: Build a Recipe Box
  4. Zipline: Build the Game of Life
  5. Zipline: Build a Roguelike Dungeon Crawler Game


  1. Lesson: Learn D3 Challenges

Data Visualization Projects  

  1. Zipline: Visualize Data with a Bar Chart
  2. Zipline: Visualize Data with a Scatterplot Graph
  3. Zipline: Visualize Data with a Heat Map
  4. Zipline: Show Relationships with a Force Directed Graph
  5. Zipline: Map Data Across the Globe

Claim Your Data Visualization Certificate  

  1. Lesson: Claim Your Data Visualization Certificate

Upper Intermediate Algorithm Scripting

  1. Bonfire: Make a Person
  2. Bonfire: Map the Debris
  3. Bonfire: Pairwise

Automated Testing and Debugging

  1. Lesson: Use the Javascript Console
  2. Lesson: Using typeof

Advanced Algorithm Scripting

  1. Bonfire: Validate US Telephone Numbers
  2. Bonfire: Symmetric Difference
  3. Bonfire: Exact Change
  4. Bonfire: Inventory Update
  5. Bonfire: No repeats please
  6. Bonfire: Friendly Date Ranges



  1. Lesson: Save your Code Revisions Forever with Git

Node.js and Express.js


  1. Lesson: Store Data in MongoDB

API Projects

Dynamic Web Applications

  1. Build a Voting App
  2. Build a Nightlife Coordination App
  3. Chart the Stock Market
  4. Manage a Book Trading Club
  5. Build a Pinterest Clone

Claim Your Full Stack Development Certificate

  1. My Full Stack Development Certificate