the-odin-project

The Odin Project

About The Odin Project

The Odin Project is one of those “What I wish I had when I was learning” resources. Not everyone has access to a computer science education or the funds to attend an intensive coding school and neither of those is right for everyone anyway. This project is designed to fill in the gap for people who are trying to hack it on their own but still want a high quality education.

Me and The Odin Project

Thank Theodinproject 🔗 so much :heart: I have no experience at coding and don’t know where should I start to become a web developer. But The Odin Project saved me. If you are a beginner and want to have a learing path, let’s visit theodinproject.com now. Now, I am learning Ruby on Rails and this is my learning path in The Odin Project🔗

Feel free to fork my repo, or copy my path in README.md if you need help :blush: :tada: :tada: :tada:

All my notes written in Vietnamese (vi). I so happy if you can help me translate to other languages. Many thanks

Introduction note
Git note
HTML note
CSS note
Javascript note
Ruby-lang note
Ruby on Rails note
Computer Science note
SQL note
Testing note

My folders structure

View my folders structure

This is place where I saved all projects, files,... I have learned in The Odin Project. See below for more infomation about each folder.

.
├── html-css
│   ├── apple-page
│   │   ├── apple.html
│   │   ├── README.md
│   │   └── style.css
│   ├── grid-based
│   │   ├── mincss
│   │   │   └── assets
│   │   │       ├── css
│   │   │       │   ├── styles.css
│   │   │       │   ├── styles.css.map
│   │   │       │   ├── styles.min.css
│   │   │       │   └── styles.min.css.map
│   │   │       └── scss
│   │   │           ├── _base.scss
│   │   │           ├── _components.scss
│   │   │           ├── _grid.scss
│   │   │           ├── _list-variables.scss
│   │   │           ├── styles.scss
│   │   │           └── _var-colors.scss
│   │   ├── test
│   │   │   └── homepage.html
│   │   └── README.md
│   ├── mint-sign-up
│   │   ├── README.md
│   │   ├── sign-up.html
│   │   └── styles.css
│   ├── newsweek
│   │   ├── assets
│   │   │   ├── styles.css
│   │   │   └── styles.min.css
│   │   ├── home.html
│   │   └── README.md
│   ├── nyt-page
│   │   ├── nyt.html
│   │   ├── README.md
│   │   └── styles.css
│   ├── smashing-layout
│   │   ├── README.md
│   │   ├── smashing.html
│   │   └── style.css
│   ├── the-next-web
│   │   ├── assets
│   │   │   ├── destop.css
│   │   │   ├── mobile.css
│   │   │   ├── setup.css
│   │   │   └── style.css
│   │   ├── home.html
│   │   └── README.md
│   └── youtube-clone
│       ├── README.md
│       ├── styles.css
│       └── watch.html
├── images
│   ├── ...
│   └── ...
├── js
│   └── library
│       ├── home.html
│       ├── main.js
│       ├── README.md
│       └── style.css
├── rails
│   └── README.md
├── ruby
│   ├── custom-enum
│   │   ├── spec
│   │   │   ├── custom-enum_spec.rb
│   │   │   └── spec_helper.rb
│   │   └── custom-enum.rb
│   ├── data_structures-algorithms
│   │   ├── BST
│   │   │   └── binar_search_trees.rb
│   │   └── knights_travails
│   │       └── knight.rb
│   ├── event_manager
│   │   ├── db
│   │   │   ├── event_attendees.csv
│   │   │   └── event_attendees_full.csv
│   │   ├── lib
│   │   │   └── event_manager.rb
│   │   ├── output
│   │   ├── form_letter.html
│   │   └── README.md
│   ├── final-project
│   │   ├── data
│   │   │   └── history.yml
│   │   ├── lib
│   │   │   ├── board.rb
│   │   │   ├── cons.rb
│   │   │   ├── game.rb
│   │   │   ├── pieces.rb
│   │   │   └── player.rb
│   │   ├── spec
│   │   │   ├── pieces_spec.rb
│   │   │   └── spec_helper.rb
│   │   ├── play_game.rb
│   │   └── README.md
│   ├── game_connect_four
│   │   ├── game
│   │   │   ├── lib.rb
│   │   │   └── main-board.rb
│   │   └── spec
│   │       ├── lib_spec.rb
│   │       └── spec_helper.rb
│   ├── game_hangman
│   │   ├── db
│   │   │   └── 5desk.txt
│   │   ├── lib
│   │   │   ├── main.rb
│   │   │   └── model.rb
│   │   ├── log
│   │   │   ├── history.csv
│   │   │   └── pause.csv
│   │   └── README.md
│   ├── game_mastermind
│   │   ├── ai_play.rb
│   │   ├── lib_game.rb
│   │   └── play_game.rb
│   ├── game_tic_tac_toe
│   │   ├── game
│   │   │   ├── lib_game.rb
│   │   │   └── main_game.rb
│   │   └── spec
│   │       ├── lib_game_spec.rb
│   │       └── spec_helper.rb
│   ├── linked_list
│   │   └── linked_list.rb
│   └── methods
│       ├── lib
│       │   ├── bubble_sort.rb
│       │   ├── caesar_cipher.rb
│       │   ├── merge_sort.rb
│       │   ├── recursion.rb
│       │   ├── stock_picker.rb
│       │   └── sub_strings.rb
│       └── spec
│           ├── caesar_cipher_spec.rb
│           └── spec_helper.rb
├── web_dev
│   ├── Etch-a-Sketch
│   │   ├── function-sketch.js
│   │   ├── index.html
│   │   ├── README.md
│   │   └── style.css
│   ├── google_homepage
│   │   ├── bower.json
│   │   ├── index.html
│   │   ├── README.md
│   │   └── styles.css
│   └── rock_paper_scissors
│       ├── mini_game.html
│       ├── mini_game_with_ui.html
│       ├── mini_game_with_ui.js
│       ├── README.md
│       └── style.css
├── notes
│   └── vi
│       ├── intro-note.md
│       ├── git-note.md
│       ├── html-note.md
│       ├── css-note.md
│       ├── js-note.md
│       ├── CS-note.md
│       ├── SQL-note.md
│       ├── ruby-note.md
│       ├── rails-note.md
│       └── testing-note.md
└── README.md

Courses

• :file_folder: web_dev

Web Development 101 🔗

:dart: Basic about web, git, front-end (html/css/javascript), back-end

• :file_folder: ruby

Ruby Programming course 🔗

:dart: Object-oriented design, testing, data structures

• :file_folder: rails

Ruby on Rails course 🔗

:dart: Please read README.md in folder :open_file_folder: rails to follow link to my projects

• :file_folder: html-css

HTML-CSS course 🔗

:dart: Deep learning about HTML and CSS for UX web development

• :file_folder: js

JavaScript course 🔗

:dart:

TheOdinProject learning path

Jump to

• :mortar_board: Foundations

• :mortar_board: Full-stack Ruby on Rails

  • :mortar_board: Ruby programming
  • :mortar_board: Database
  • :mortar_board: Ruby on Rails
  • :mortar_board: HTML-CSS
  • :mortar_board: JavaScript
• 🖈 Bonus tools, sources,…

Foundations

Introduction

• Introduction to Web development
• How does the web work?
• Installing and setting tools

1. Git

• Git basics
• GitHub

2. Font-end basics

• HTML foundation

  • Headings
  • Paragraphs
  • Text formatings
  • Anchors and hyperlinks
  • Lists
  • Tables
  • Classes, IDs
  • Linking resourses
  • Using CSS, Js in HTML
  • Images
  • Forms and input elements
  • Div element, sectioning elements, media elements, iframes

• CSS foundation

  • Relation CSS with HTML
  • Selectors
  • Backgrounds
  • Centerings
  • Box model
  • Margins, padding, border
  • Overflow
  • Media querries
  • Positioning
  • Box-shadow
  • Floats
  • Flexbox
  • Grid
  • Typography
  • Colors, opacity
  • Length units
  • Tables
  • Transitions, Animations, 2D-3D transforms
  • Functions

• JavaScript foundation

  • [ ]

• Developer tools

• Projects

  • [x] Google homepage preview

    github

  • [x] Rock paper scissors preview

    github

  • [x] Etch a Sketch preview

    github

  • [ ] Calculator preview

    github

3. About back-end

• Introduction about back-end and some frameworks

Full-stack Ruby on Rails

I. Ruby programming

1. Basic Ruby

• Everything is object
• Data types: Integer, Float, Array, String, Hash,…
• Variables, contants
• Input, output
• Conditional logic: if..end, unless..end, if..elsif..end, case..when..end
• Loops: while..end, until..end, loop..end, times, for..in
• Arrays, array methods: #each, #select, #map, #reduce/#inject, …
• Hashes, hash methods: #each, #keys, #values, …
• Methods
• Enumerable
• Nested collections
• Debugs: p, puts, pry gem

2. Object Oriented Programming (OOP)

• Class
• Instance
• Methods
• Inheritance
• Modules
• Setters, getters, super keyword, …

3. Files and Serialization

• File I/O
• JSON, YAML

4. Advanced Ruby

• Block, proc, lambda
• yield keyword
• Pattern matching - Ruby 3 (option)

5. Computer Science (a bit)

• Recursive

• Common Data Structures and Algorithms

  • Linked list
  • Binary Search Tree (BST)
  • Merge sort, Bubble sort

6. Testing

• Test driven development (TDD)
• RSpec

7. Mini-projects

• Caesar Cipher Github
• Sub Strings Github
• Stock Picker Github
• Bubble Sort Github
• Merge Sort Github
• Tic Tac Toe Github
• Master Mind Github
• Event Manager Github
• File IO and Serialization (game Hangman) Github
• Custom Enumerables Github
• Recursion Github
• Linked Lists Github
• Binary Search Trees Github
• Knights Travails Github

• [x] Ruby final project (Chess) Github

  Live preview

II. Database

• Database
• Relative database, SQL

III. Ruby on Rails

1. Rails basics

• A Railsy Web Refresher

  • HTTP, REST, urls
  • MVC
  • APIs
  • Cookies, sessions, authentication, authorization

• Routing

  • Root
  • RESTful routes
  • Route helper
  • Non-RESTful routes

• Controllers

  • Naming
  • Renders, redirects
  • Params, strong params
  • Flash

• Views

  • Layout
  • Preprocessors (erb, scss, coffee, …)
  • Helper methods (link_to, image_tag, …)
  • Render

• The Asset Pipeline

• Webpacker
• Deployment (with Heroku)

2. Active record basics

• ORM (Object-Relational-Mapping)
• Rails models
• Migration, rollback
• Validations
• Associations

3. Forms and authentication

• CSRF token
• Helper: form_for, form_with, form_tag, *_tag, …
• Sessions cookies

4. Advanced form and active record

• Active record query

  • ActiveRecord::Relation: #where, #all, …
  • ActiveRecord::FinderMethods: #find, #find_by, #last, #first, #take, …
  • ActiveRecord::QueryMethods: #select, #from, #group, #having, #order, #includes, …
  • Highlight: chaining queries(#order, …), checking (#any?, #exist?, #many?,…), mathematical (#count, #max)
  • Problem N + 1 query => #includes, #pluck
  • Scopes
  • Write pure SQL: #find_by_sql

• Active record associations

  • has_one, has_many, belongs_to
  • foreign_key, class_name, through, source
  • polymorphic
  • dependent
  • Self joins

• Active record callback

  • before_create, after_create, around_create, before_destroy, before_rollback, …

• Advanced form

  • Helper: select_tag, options_for_select, …
  • Nested forms, delete nested form objects
  • simple_form gem

5. APIs

• Basics create API app with Rails
• Rendering to XML, JSON

6. Mailer and advanced topics

• Mailer
• Routing: resource, resources, nested routes, member, collection, redirect
• Nested layout: content_for, yield
• Design pattern: SOLID
• I18n: Internationalization
• WebSockets

7. Projects

• []

IV. HTML - CSS

1. HTML page structure

• Elements tags, elements attributes
• Ids, classes
• Links, media, …

2. Display and input data

• Tables
• Lists
• Forms

3. CSS

• Units: px, %, rem, em, vh, vw, …
• Fonts, colors
• Box model: block, inline, inline-block
• Margin, padding, width, height
• Float, position
• Flex
• Grid
• Background, gradients

4. Design and UX

• Font: font-family (serif, san-serif, …)
• Color
• UX

5. Responsive and Frameworks

• Media query
• Introduction some CSS frameworks: Bootstrap, Zurb Foundation, TailwindCSS

6. Advanced CSS

• Animation
• Border radius, box shadow
• Transforms
• Pseudo-Elements
• Preprocessors: SCSS, SASS, LESS

V. JavaScript

1. Organizing Js code

• Objects and Object constructors
• Factory functions, module patterns
• Classes
• ES6 modules
• Webpack
• OOP principles

2. Tools and a few practical applications of JavaScript

• Linting tools
• Dynamic user interface interactions, forms
• ES

3. Asynchronous JavaScript and APIs

• JSON
• Async
• Working with APIs
• Async and await

4. React Js (front-end framework)

• State and props
• Handle inputs anh render lists
• Lifecycle methods
• Hooks
• Router
• Advanced concepts

5. Testing

6. JavaScript and Backend

Bonus

Useful things for you

Searching

DevDocs combines multiple API documentations in a fast, organized, and searchable interface.

SymbolHound is a search engine that doesn't ignore special characters. This means you can easily search for symbols like &, %, and π.

Collecting all cheatsheet

Devhints is another collection cheatsheet

The Ruby Toolbox is a catalog of all Rubygems that keeps track of popularity and health metrics to help you choose a reliable library

Code beauty where you can lookup a lot of tools here.

Tools

Ruby regex tool test Ruby Regex

Can I use provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.

Autoprefixer CSS

Create README.md online

Create gitignore

Create resume

Usefull

Ruby best practice

Rails best practice

Refactoring is a source for Design Pattern, Refactor code

Devtut has a lot of source to study

Goal kicker free programming books

Ruby wikibook

List web development tools

Resources web skills

Free HTML templates

HTML reference

CSS gradient

CSS reference

Css-tricks

Ruby hacking guide

Coding practice

Codewars

Hackerank

Edabit

Exercism

Codinggame

Leetcode