Home - GJSmith3rd/FreeCodeCamp-BootCamp GitHub Wiki

Welcome!

This repository is not an app or code for a specific project but a public wiki of my journey while studying Front-End and Full Stack Web Development at FreeCodeCamp. Here you will find the most of challenges and code used. The wiki is not a tutorial or step by step lesson but more of a general record of the tasks and code used.

Contact me

Gilbert Joseph Smith III

@gjsmith3rd

Github | FreeCodeCamp | CodePen | LinkedIn | Blog/Site | E-Mail

HTML5 and CSS

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

Responsive Design with Bootstrap

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

jQuery

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

Basic JavaScript

  1. [Waypoint: Comment your JavaScript Code]
  2. [Waypoint: Understand Boolean Values]
  3. [Waypoint: Declare JavaScript Variables]
  4. [Waypoint: Declare String Variables]
  5. [Waypoint: Check the Length Property of a String Variable]
  6. [Waypoint: Use Bracket Notation to Find the First Character in a String]
  7. [Waypoint: Use Bracket Notation to Find the Nth Character in a String]
  8. [Waypoint: Use Bracket Notation to Find the Last Character in a String]
  9. [Waypoint: Use Bracket Notation to Find the Nth-to-Last Character in a String]
  10. [Waypoint: Add Two Numbers with JavaScript]
  11. [Waypoint: Subtract One Number from Another with JavaScript]
  12. [Waypoint: Multiply Two Numbers with JavaScript]
  13. [Waypoint: Divide One Number by Another with JavaScript]
  14. [Waypoint: Create Decimal Numbers with JavaScript]
  15. [Waypoint: Perform Arithmetic Operations on Decimals with JavaScript]
  16. [Waypoint: Store Multiple Values in one Variable using JavaScript Arrays]
  17. [Waypoint: Nest one Array within Another Array]
  18. [Waypoint: Access Array Data with Indexes]
  19. [Waypoint: Modify Array Data With Indexes]
  20. [Waypoint: Manipulate Arrays With pop]
  21. [Waypoint: Manipulate Arrays With push]
  22. [Waypoint: Manipulate Arrays With shift]
  23. [Waypoint: Manipulate Arrays With unshift]
  24. [Waypoint: Write Reusable JavaScript with Functions]
  25. [Waypoint: Build JavaScript Objects]
  26. [Waypoint: Manipulate JavaScript Objects]
  27. [Waypoint: Iterate with JavaScript For Loops]
  28. [Waypoint: Iterate with JavaScript While Loops]
  29. [Waypoint: Generate Random Fractions with JavaScript]
  30. [Waypoint: Generate Random Whole Numbers with JavaScript]
  31. [Waypoint: Generate Random Whole Numbers within a Range]
  32. [Waypoint: Use Conditional Logic with If-Else Statements]
  33. [Waypoint: Sift through Text with Regular Expressions]
  34. [Waypoint: Find Numbers with Regular Expressions]
  35. [Waypoint: Find White Space with Regular Expressions]
  36. [Waypoint: Invert Regular Expression Matches with JavaScript]
  37. [Waypoint: Create a JavaScript Slot Machine]
  38. [Waypoint: Add your JavaScript Slot Machine Slots]
  39. [Waypoint: Bring your JavaScript Slot Machine to Life]
  40. [Waypoint: Give your JavaScript Slot Machine some stylish images]

Object Oriented and Functional Programming

  1. [Waypoint: Declare JavaScript Objects as Variables]
  2. [Waypoint: Construct JavaScript Objects with Functions]
  3. [Waypoint: Make Object Properties Private]
  4. [Waypoint: Make Instances of Objects with a Constructor Function]
  5. [Waypoint: Iterate over Arrays with .map]
  6. [Waypoint: Condense arrays with .reduce]
  7. [Waypoint: Filter Arrays with .filter]
  8. [Waypoint: Sort Arrays with .sort]
  9. [Waypoint: Reverse Arrays with .reverse]
  10. [Waypoint: Concatenate Strings with .concat]
  11. [Waypoint: Split Strings with .split]
  12. [Waypoint: Join Strings with .join]
  13. [Old Advanced Waypoint: Functional Programming in JavaScript]

Basic Algorithm Scripting

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

Basic Front End Development Projects

  1. [Waypoint: 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 Twitch.tv JSON API]

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]

Upper Intermediate Algorithm Scripting

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

Automated Testing and Debugging

  1. [Waypoint: Use the Javascript Console]
  2. [Waypoint: 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]

AngularJS

  1. [Waypoint: Get Started with Angular.js]
  • [Creating Modules]
  • [Including the module]
  • [Expressions]
  • [Controllers]
  • [Show and Hide Buttons]
  1. [Waypoint: Apply Angular.js Directives]
  • [Filters]
  1. [Waypoint: Power Forms with Angular.js]
  2. [Waypoint: Customize Angular.js Directives]
  3. [Waypoint: Create Angular.js Services]

Intermediate Front End Development Projects

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

Git

  1. Waypoint: Save your Code Revisions Forever with Git

Node.js and Express.js

  1. Waypoint: Manage Packages with NPM
  2. Waypoint: Start a Node.js Server
  3. Waypoint: Continue working with Node.js Servers
  4. Waypoint: Finish working with Node.js Servers
  5. Waypoint: Build Web Apps with Express.js

MongoDB

  1. Waypoint: Store Data in MongoDB

Full Stack JavaScript Projects

  1. Waypoint: Get Set for Basejumps
  2. Basejump: Build a Voting App
  3. Basejump: Build a Nightlife Coordination App
  4. Basejump: Chart the Stock Market
  5. Basejump: Manage a Book Trading Club
  6. Basejump: Build a Pinterest Clone

Original Fork

This Wiki was originally forked from Rafase282 WIKI which provides a more detailed and instructive version.