Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/fhmurakami/the-odin-project

Repo for The Odin Projects' projects. From Foundations to Full Stack (Ruby on Rails and JS/React)
https://github.com/fhmurakami/the-odin-project

css databases html javascript nodejs react ruby ruby-on-rails sql

Last synced: 17 days ago
JSON representation

Repo for The Odin Projects' projects. From Foundations to Full Stack (Ruby on Rails and JS/React)

Awesome Lists containing this project

README

        

# The Odin Project

## Projects

### Foundations

| | | | |
| -------------------------------- | ----------------------------------------------------------- | ------------------------------- | ------------------------------- |
| **HTML** | | | |
| **Recipes** | [HTML Foundations Project][HTMLFoundationsProject] | [Code][HTMLFoundationsCode] | [Page][HTMLFoundationsPage] |
| | | | |
| **CSS** | | | |
| **Foundations** | [CSS Foundations Exercises][CSSFoundationsExercises] | | |
| 1. CSS Methods | | [Code][CSSFoundationsCode1] | [View][CSSFoundationsPage1] |
| 2. Class and ID Selectors | | [Code][CSSFoundationsCode2] | [View][CSSFoundationsPage2] |
| 3. Grouping Selectors | | [Code][CSSFoundationsCode3] | [View][CSSFoundationsPage3] |
| 4. Chaining Selectors | | [Code][CSSFoundationsCode4] | [View][CSSFoundationsPage4] |
| 5. Descendant Combinator | | [Code][CSSFoundationsCode5] | [View][CSSFoundationsPage5] |
| 6. CSS Cascade Fix | | [Code][CSSFoundationsCode6] | [View][CSSFoundationsPage6] |
| **Margin and Padding** | [CSS Margin and Padding Exercises][CSSMarginPaddingProject] | | |
| 1. Margin and Padding practice | | [Code][CSSMarginPaddingCode1] | [View][CSSMarginPaddingPage1] |
| 2. Margin and Padding #2 | | [Code][CSSMarginPaddingCode2] | [View][CSSMarginPaddingPage2] |
| **Flex** | [CSS Flex Exercises][CSSFlexProject] | | |
| 1. CENTER THIS DIV | | [Code][CSSFlexCode1] | [View][CSSFlexPage1] |
| 2. A Basic Header | | [Code][CSSFlexCode2] | [View][CSSFlexPage2] |
| 3. Another common header style | | [Code][CSSFlexCode3] | [View][CSSFlexPage3] |
| 4. A very common website feature | | [Code][CSSFlexCode4] | [View][CSSFlexPage4] |
| 5. A common 'modal' style | | [Code][CSSFlexCode5] | [View][CSSFlexPage5] |
| 6. An entire page! | | [Code][CSSFlexCode6] | [View][CSSFlexPage6] |
| 7. The Holy Grail of Layout | | [Code][CSSFlexCode7] | [View][CSSFlexPage7] |
| **Landing Page** | [CSS Foundations Project][CSSFoundationsProject] | [Code][CSSFoundationsCode] | [View][CSSFoundationsPage] |
| | | | |
| **Javascript** | | | |
| **Foundations** | [JS Foundations Exercises][JSFoundationsExercises] | | |
| 1. Hello World | | [Code][JSFoundationsCode1] | [View][JSFoundationsPage1] |
| 2. Repeat a String | | [Code][JSFoundationsCode2] | [View][JSFoundationsPage2] |
| 3. Reverse a String | | [Code][JSFoundationsCode3] | [View][JSFoundationsPage3] |
| 4. Remove From Array | | [Code][JSFoundationsCode4] | [View][JSFoundationsPage4] |
| 5. Sum All | | [Code][JSFoundationsCode5] | [View][JSFoundationsPage5] |
| 6. Leap Years | | [Code][JSFoundationsCode6] | [View][JSFoundationsPage6] |
| 7. Temperature Conversion | | [Code][JSFoundationsCode7] | [View][JSFoundationsPage7] |
| **Rock, Paper, Scissors** | [JS Rock, Paper, Scissors Project][JS-RPSProject] | [Code][JS-RPSProjectCode] | [View][JS-RPSProjectPage] |
| **Etch-a-Sketch** | [JS Etch-a-Sketch Project][JSEtchSketchProject] | [Code][JSEtchSketchProjectCode] | [Page][JSEtchSketchProjectPage] |
| 8. Calculator | | [Code][JSFoundationsCode8] | [View][JSFoundationsPage8] |
| 9. Palindromes | | [Code][JSFoundationsCode9] | [View][JSFoundationsPage9] |
| 10. Fibonacci | | [Code][JSFoundationsCode10] | [View][JSFoundationsPage10] |
| 11. Get The Titles | | [Code][JSFoundationsCode11] | [View][JSFoundationsPage11] |
| 12. Find The Oldest | | [Code][JSFoundationsCode12] | [View][JSFoundationsPage12] |
| **Calculator** | [JS Calculator Project][JS-CalcProject] | [Code][JS-CalcProjectCode] | [View][JS-CalcProjectPage] |
| | | | |
| **Intermediate HTML and CSS** | | | |
| **Forms** | | | |
| 1. Sign-up Form | [Sign-up Form Project][Sign-upProject] | [Code][Sign-upProjectCode] | [View][Sign-upProjectPage] |
| | | | |
| **Grid** | | | |
| 1. Positioning Grid Elements | [Positioning Grid Elements][GridExercise1] | [Code][CSSGridCode1] | [View][CSSGridPage1] |
| | | | |
| **Advanced Grid** | | | |
| 1. Responsive Holy Grail | [Responsive Holy Grail][AdvancedGridExercise1] | [Code][CSSAdvancedGridCode1] | [View][CSSAdvancedGridPage1] |
| 2. Holy Grail Mockup | [Holy Grail Mockup][AdvancedGridExercise2] | [Code][CSSAdvancedGridCode2] | [View][CSSAdvancedGridPage2] |
| **Admin Dashboard** | [HTML & CSS - Admin Dashboard Project][AdminDashProject] | [Code][AdminDashCode] | [View][AdminDashPage] |
| | | | |
| | | | |

[HTMLFoundationsProject]: https://www.theodinproject.com/lessons/foundations-recipes
[HTMLFoundationsCode]: ./foundations/html/odin-recipes/
[HTMLFoundationsPage]: https://fhmurakami.github.io/the-odin-project/foundations/html/odin-recipes

[CSSFoundationsExercises]: https://www.theodinproject.com/lessons/foundations-intro-to-css
[CSSFoundationsCode1]: https://github.com/fhmurakami/the-odin-project/tree/main/foundations/css/exercises/intro-to-css/01-css-methods
[CSSFoundationsPage1]: https://fhmurakami.github.io/the-odin-project/foundations/css/exercises/intro-to-css/01-css-methods/index.html

[CSSFoundationsCode2]: https://github.com/fhmurakami/the-odin-project/tree/main/foundations/css/exercises/intro-to-css/02-class-id-selectors
[CSSFoundationsPage2]: https://fhmurakami.github.io/the-odin-project/foundations/css/exercises/intro-to-css/02-class-id-selectors/index.html

[CSSFoundationsCode3]: https://github.com/fhmurakami/the-odin-project/tree/main/foundations/css/exercises/intro-to-css/03-grouping-selectors
[CSSFoundationsPage3]: https://fhmurakami.github.io/the-odin-project/foundations/css/exercises/intro-to-css/03-grouping-selectors/index.html

[CSSFoundationsCode4]: https://github.com/fhmurakami/the-odin-project/tree/main/foundations/css/exercises/intro-to-css/04-chaining-selectors
[CSSFoundationsPage4]: https://fhmurakami.github.io/the-odin-project/foundations/css/exercises/intro-to-css/04-chaining-selectors/index.html

[CSSFoundationsCode5]: https://github.com/fhmurakami/the-odin-project/tree/main/foundations/css/exercises/intro-to-css/05-descendant-combinator
[CSSFoundationsPage5]: https://fhmurakami.github.io/the-odin-project/foundations/css/exercises/intro-to-css/05-descendant-combinator/index.html

[CSSFoundationsCode6]: https://github.com/fhmurakami/the-odin-project/tree/main/foundations/css/exercises/cascade/01-cascade-fix
[CSSFoundationsPage6]: https://fhmurakami.github.io/the-odin-project/foundations/css/exercises/cascade/01-cascade-fix/index.html

[CSSMarginPaddingProject]: https://www.theodinproject.com/lessons/foundations-block-and-inline
[CSSMarginPaddingCode1]: https://github.com/fhmurakami/the-odin-project/tree/main/foundations/css/exercises/block-and-inline/01-margin-and-padding-1
[CSSMarginPaddingPage1]: https://fhmurakami.github.io/the-odin-project/foundations/css/exercises/block-and-inline/01-margin-and-padding-1/
[CSSMarginPaddingCode2]: https://github.com/fhmurakami/the-odin-project/tree/main/foundations/css/exercises/block-and-inline/02-margin-and-padding-2
[CSSMarginPaddingPage2]: https://fhmurakami.github.io/the-odin-project/foundations/css/exercises/block-and-inline/02-margin-and-padding-2/

[CSSFlexProject]: https://www.theodinproject.com/lessons/foundations-alignment
[CSSFlexCode1]: https://github.com/fhmurakami/the-odin-project/tree/main/foundations/css/exercises/flex/01-flex-center
[CSSFlexPage1]: https://fhmurakami.github.io/the-odin-project/foundations/css/exercises/flex/01-flex-center/
[CSSFlexCode2]: https://github.com/fhmurakami/the-odin-project/tree/main/foundations/css/exercises/flex/02-flex-header
[CSSFlexPage2]: https://fhmurakami.github.io/the-odin-project/foundations/css/exercises/flex/02-flex-header/
[CSSFlexCode3]: https://github.com/fhmurakami/the-odin-project/tree/main/foundations/css/exercises/flex/03-flex-header-2
[CSSFlexPage3]: https://fhmurakami.github.io/the-odin-project/foundations/css/exercises/flex/03-flex-header-2/
[CSSFlexCode4]: https://github.com/fhmurakami/the-odin-project/tree/main/foundations/css/exercises/flex/04-flex-information
[CSSFlexPage4]: https://fhmurakami.github.io/the-odin-project/foundations/css/exercises/flex/04-flex-information/
[CSSFlexCode5]: https://github.com/fhmurakami/the-odin-project/tree/main/foundations/css/exercises/flex/05-flex-modal
[CSSFlexPage5]: https://fhmurakami.github.io/the-odin-project/foundations/css/exercises/flex/05-flex-modal/
[CSSFlexCode6]: https://github.com/fhmurakami/the-odin-project/tree/main/foundations/css/exercises/flex/06-flex-layout
[CSSFlexPage6]: https://fhmurakami.github.io/the-odin-project/foundations/css/exercises/flex/06-flex-layout/
[CSSFlexCode7]: https://github.com/fhmurakami/the-odin-project/tree/main/foundations/css/exercises/flex/07-flex-layout-2
[CSSFlexPage7]: https://fhmurakami.github.io/the-odin-project/foundations/css/exercises/flex/07-flex-layout-2/

[CSSFoundationsProject]: https://www.theodinproject.com/lessons/foundations-landing-page
[CSSFoundationsCode]: https://github.com/fhmurakami/the-odin-project/tree/main/foundations/css/projects/landing-page
[CSSFoundationsPage]: https://fhmurakami.github.io/the-odin-project/foundations/css/projects/landing-page/

[JSFoundationsExercises]: https://www.theodinproject.com/lessons/foundations-arrays-and-loops
[JSFoundationsCode1]: https://github.com/fhmurakami/the-odin-project/tree/main/foundations/javascript/exercises/01_helloWorld
[JSFoundationsPage1]: https://fhmurakami.github.io/the-odin-project/foundations/javascript/exercises/01_helloWorld/
[JSFoundationsCode2]: https://github.com/fhmurakami/the-odin-project/tree/main/foundations/javascript/exercises/02_repeatString
[JSFoundationsPage2]: https://fhmurakami.github.io/the-odin-project/foundations/javascript/exercises/02_repeatString/
[JSFoundationsCode3]: https://github.com/fhmurakami/the-odin-project/tree/main/foundations/javascript/exercises/03_reverseString
[JSFoundationsPage3]: https://fhmurakami.github.io/the-odin-project/foundations/javascript/exercises/03_reverseString/
[JSFoundationsCode4]: https://github.com/fhmurakami/the-odin-project/tree/main/foundations/javascript/exercises/04_removeFromArray
[JSFoundationsPage4]: https://fhmurakami.github.io/the-odin-project/foundations/javascript/exercises/04_removeFromArray/
[JSFoundationsCode5]: https://github.com/fhmurakami/the-odin-project/tree/main/foundations/javascript/exercises/05_sumAll
[JSFoundationsPage5]: https://fhmurakami.github.io/the-odin-project/foundations/javascript/exercises/05_sumAll/
[JSFoundationsCode6]: https://github.com/fhmurakami/the-odin-project/tree/main/foundations/javascript/exercises/06_leapYears
[JSFoundationsPage6]: https://fhmurakami.github.io/the-odin-project/foundations/javascript/exercises/06_leapYears/
[JSFoundationsCode7]: https://github.com/fhmurakami/the-odin-project/tree/main/foundations/javascript/exercises/07_tempConversion
[JSFoundationsPage7]: https://fhmurakami.github.io/the-odin-project/foundations/javascript/exercises/07_tempConversion/
[JSFoundationsCode8]: https://github.com/fhmurakami/the-odin-project/tree/main/foundations/javascript/exercises/08_calculator
[JSFoundationsPage8]: https://fhmurakami.github.io/the-odin-project/foundations/javascript/exercises/08_calculator/
[JSFoundationsCode9]: https://github.com/fhmurakami/the-odin-project/tree/main/foundations/javascript/exercises/09_palindromes
[JSFoundationsPage9]: https://fhmurakami.github.io/the-odin-project/foundations/javascript/exercises/09_palindromes/
[JSFoundationsCode10]: https://github.com/fhmurakami/the-odin-project/tree/main/foundations/javascript/exercises/10_fibonacci
[JSFoundationsPage10]: https://fhmurakami.github.io/the-odin-project/foundations/javascript/exercises/10_fibonacci/
[JSFoundationsCode11]: https://github.com/fhmurakami/the-odin-project/tree/main/foundations/javascript/exercises/11_getTheTitles
[JSFoundationsPage11]: https://fhmurakami.github.io/the-odin-project/foundations/javascript/exercises/11_getTheTitles/
[JSFoundationsCode12]: https://github.com/fhmurakami/the-odin-project/tree/main/foundations/javascript/exercises/12_findTheOldest
[JSFoundationsPage12]: https://fhmurakami.github.io/the-odin-project/foundations/javascript/exercises/12_findTheOldest/

[JS-RPSProject]: https://www.theodinproject.com/lessons/foundations-rock-paper-scissors
[JS-RPSProjectCode]: https://github.com/fhmurakami/the-odin-project/tree/main/foundations/javascript/projects/rock-paper-scissors
[JS-RPSProjectPage]: https://fhmurakami.github.io/the-odin-project/foundations/javascript/projects/rock-paper-scissors/index.html

[JSEtchSketchProject]: https://www.theodinproject.com/lessons/foundations-etch-a-sketch
[JSEtchSketchProjectCode]: https://github.com/fhmurakami/the-odin-project/tree/main/foundations/javascript/projects/etch-a-sketch
[JSEtchSketchProjectPage]: https://fhmurakami.github.io/the-odin-project/foundations/javascript/projects/etch-a-sketch/index.html

[JS-CalcProject]: https://www.theodinproject.com/lessons/foundations-calculator
[JS-CalcProjectCode]: https://github.com/fhmurakami/the-odin-project/tree/main/foundations/javascript/projects/calculator
[JS-CalcProjectPage]: https://fhmurakami.github.io/the-odin-project/foundations/javascript/projects/calculator/index.html

[Sign-upProject]: https://www.theodinproject.com/lessons/node-path-intermediate-html-and-css-sign-up-form
[Sign-upProjectCode]: https://github.com/fhmurakami/the-odin-project/tree/main/fullstack-javascript/intermediate-html-css/projects/sign-up-form
[Sign-upProjectPage]: https://fhmurakami.github.io/the-odin-project/fullstack-javascript/intermediate-html-css/projects/sign-up-form/index.html

[GridExercise1]: https://www.theodinproject.com/lessons/node-path-intermediate-html-and-css-positioning-grid-elements
[CSSGridCode1]: https://github.com/fhmurakami/the-odin-project/tree/main/fullstack-javascript/intermediate-html-css/positioning-grid/01-basic-holy-grail
[CSSGridPage1]: https://fhmurakami.github.io/the-odin-project/fullstack-javascript/intermediate-html-css/positioning-grid/01-basic-holy-grail/

[AdvancedGridExercise1]: https://www.theodinproject.com/lessons/node-path-intermediate-html-and-css-advanced-grid-properties
[CSSAdvancedGridCode1]: https://github.com/fhmurakami/the-odin-project/tree/main/fullstack-javascript/intermediate-html-css/advanced-grid/01-responsive-holy-grail
[CSSAdvancedGridPage1]: https://fhmurakami.github.io/the-odin-project/fullstack-javascript/intermediate-html-css/advanced-grid/01-responsive-holy-grail/
[AdvancedGridExercise2]: https://www.theodinproject.com/lessons/node-path-intermediate-html-and-css-advanced-grid-properties
[CSSAdvancedGridCode2]: https://github.com/fhmurakami/the-odin-project/tree/main/fullstack-javascript/intermediate-html-css/advanced-grid/02-holy-grail-mockup
[CSSAdvancedGridPage2]: https://fhmurakami.github.io/the-odin-project/fullstack-javascript/intermediate-html-css/advanced-grid/02-holy-grail-mockup/

[AdminDashProject]: https://www.theodinproject.com/lessons/node-path-intermediate-html-and-css-admin-dashboard
[AdminDashCode]: https://github.com/fhmurakami/the-odin-project/tree/main/fullstack-javascript/intermediate-html-css/projects/admin-dashboard
[AdminDashPage]: https://fhmurakami.github.io/the-odin-project/fullstack-javascript/intermediate-html-css/projects/admin-dashboard/