Giters

David-Roark / the-odin-project

Here are all my projects and files I have learned and practiced in Theodinproject.com. Feel free to fork my repo. If you have some sugesstion for me, please contact with me via email: duyvucrl@gmail.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

cssjavascriptrailsrubyweb-dev

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 ❀️ 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 😊 πŸŽ‰ πŸŽ‰ πŸŽ‰

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

  • πŸ“ web_dev

Web Development 101 πŸ”—

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

  • πŸ“ ruby

Ruby Programming course πŸ”—

🎯 Object-oriented design, testing, data structures

  • πŸ“ rails

Ruby on Rails course πŸ”—

🎯 Please read README.md in folder πŸ“‚ rails to follow link to my projects

  • πŸ“ html-css

HTML-CSS course πŸ”—

🎯 Deep learning about HTML and CSS for UX web development

  • πŸ“ js

JavaScript course πŸ”—

🎯

TheOdinProject learning path

Jump to

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

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

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

    • About

    Here are all my projects and files I have learned and practiced in Theodinproject.com. Feel free to fork my repo. If you have some sugesstion for me, please contact with me via email: duyvucrl@gmail.com

    cssjavascriptrailsrubyweb-dev

    Languages

    Language:HTML 50.4%Language:Ruby 25.5%Language:CSS 16.6%Language:SCSS 4.7%Language:JavaScript 2.7%