Please enable JavaScript.
Coggle requires JavaScript to display documents.
The Odin Project - JS - Coggle Diagram
The Odin Project - JS
React
Introduction
How this course will work
Introduction to React
Setting up a React Environment
Getting started with React
React components
What is JSX?
Rendering Techniques
Keys in React
Passing Data Between Components
States and Effects
Introduction to State
More on State
:star: Project CV Application
Profile Page - External Profile Image API :check: :check:
How to deal with Side effects
:star: Project: Memory Card
Class Components
Class Based Components
Component Lifecycle Methods
React Testing
Introduction to React Testing
Mocking Callbacks and Components
The React Ecosystem
Type Checking with PropTypes
React Router
Fetching Data in React
Styling React Applications
:star: Project: Shopping Cart
More React Concepts
Managing State with the Context API
Reducing State
Refs and Memoization
React and the Backend
Using NodeJS for your Backend
Conclusion
Conclusion
Foundations
Introduction
Motivation and mindset
Asking for help
Introduction to web development
Join the odin community
How this course will work
Prerequisites
Installations
Text editors
Installation overview
Command line basics
How does the web work?
Setting up git
Computer Basics
Git Basics
Introduction to Git
Git Basics
HTML Foundations
Working with text
Lists
HTML Boilerplate
Links and images
Elements and Tags
Commit messages
Introduction to HTML and CSS
:star: Project: Recipes
CSS Foundations
Intro to CSS
The Cascade
Inspecting HTML and CSS
The Box Model
Block and Inline
Flexbox
Introduction to Flexbox
Growing and Shrinking
Axes
Alignment
:star: Project: Landing Page
Javascript
Fundamentals Part 1
Fundamentals Part 2
Javascript Developer Tools
Fundamentals Part 3
Problem Solving
Understanding Errors
:star: Project: Rock Paper Scissors
Clean Code
Installing Node.js
Fundamentals Part 4
DOM Manipulation and Events
Revisiting Rock Paper Scissors
Project: Etch-a-Sketch
Fundamentals Part 5
:star: Project Calculator
Conclusion
Choose your path forward
NodeJS
Introduction to NodeJS
Introduction to the Back End
Introduction to Frameworks
Introduction: What is NodeJS
Getting Started
Debugging Node
:star: Project: Basic Informational Site
MongoDB
Introduction to MongoDB
Express & Mongoose
Introduction to Express
Express 101
Express 102: CRUD and MVC
:star: Project: Mini Message Board
Deployment
Express 103: Routes and Controllers
Express 104: View Templates
:star: Project: Express 105: Forms and Deployment
:star: Project Inventory Application
Authentication
Authentication Basics
Security Configuration
:star: Members only
APIs
API Basics
API Security
:star: Project: Blog API
Testing Express
Testing Routes and Controllers
Testing Database Operations
Full Stack Projects
:star: Project: Where's Waldo (A photo tagging app)
:star: Project: Messaging App
Final Project
:star: Project: Odin-Book
Conclusion
Javascript
Asynchronous Javascript and APIs
JSON
Asynchronous Code
Working with APIs
Async and Await
:star: Project: Weather App
Friends List :check: :check:
A bit of Computer Science
A Very Brief Intro to CS
Recursive Methods
:star: Project: Recursion
Time Complexity
Space Complexity
Common Data Structures and Algorithms
:star: Project: Linked Lists
:star: Binary Search Trees
:star: Knights Travails
Javascript in the Real World
Dynamic User Interface Interactions
Form Validation with Javascript
Liniting
What is ES6?
Intermediate Git
A deeper look at Git
Using Git in the Real World
Organizing your Javascript Code
:star: Project: Tic Tac Toe
Classes
Factory Functions and the Module Pattern
ES6 Modules
Webpack
:star: Project Restaurant Page
:star: Project: Library
Object and Object Constructors
OOP Principles
Organizing your Javascript Code Introduction
:star: Project: Todo List
Posts List :check: :check:
Testing Javascript
Testing Javascript
Testing Basics
:star: Project: Testing Practice
More Testing
:star: Project Battleship
Introduction
How this course will work
A Quick Review
Finishing up with Javascript
Conclusion
Intermediate HTML and CSS
Intermediate HTML Concepts
Tables
Emmet
Introduction
SVG
Intermediate CSS Concepts
Default styles
CSS units
More text styles
More css properties
Advanced Selectors
Positioning
CSS Functions
Custom properties
Forms
Form Basics
Form Validation
:star: Project: Sign-up Form
Grid
Introduction to Grid
Creating a Grid
Positioning Grid Elements
Advanced Grid Properties
Using Flexbox and Grid
:star: Project: Admin Dashboard
Advanced HTML and CSS
Accessibility
The Web Content Accessibility Guidelines (WCAG)
Semantic HTML
Accessible Colours
Keyboard Navigation
Introduction to Web Accessibility
Meaningful Text
WAI-ARIA
Accessibility Auditing
Responsive Design
Responsive Images
Media Queries
Natural Responsiveness
:star:Project: Personal Portfolio
Introduction to Responsive Design
Animation
Transitions
Keyframes
Transforms
Getting hired
Preparing for your job search
How this course will work
Strategy
It starts with you
What companies want
What you can do to prepare
:star: Building your personal website
Applying to and interviewing for jobs
Collecting job leads
Qualifying job leads
:star: Project: Building your resume
Applying for web development jobs
Preparing to interview and interviewing
Handling a job offer
Conclusion