JR Logo
The Odin Project
Updated Jan 2023HTML/CSS

The Odin Project - Learning Journey

Collection of learning projects completed through The Odin Project's full-stack curriculum. From basic HTML to full-stack applications.

Projects and exercises completed while working through TOP's curriculum. Progressed from basic web fundamentals to full-stack development using JavaScript and Ruby.

Build Key Features

  1. 01

    Foundations Projects

    First HTML/CSS projects including recipes site, landing page, and rock-paper-scissors. Learned flexbox, grid, and basic DOM manipulation.

    Foundations Projects
  2. 02

    JavaScript Basics

    Built calculator, etch-a-sketch, and basic library app. Learned core JS concepts like closures, prototypes, and event handling.

    JavaScript Basics
  3. 03

    Advanced JavaScript

    Todo list, restaurant page, and weather app. Focused on modules, async/await, APIs, and local storage.

    Advanced JavaScript
  4. 04

    React Journey

    CV application, memory game, and shopping cart. Learning React hooks, state management, and component lifecycle.

    React Journey
  5. 05

    Backend Basics

    Basic Express and Node.js projects including message board and inventory app. First steps with servers and databases.

    Backend Basics

Friction Challenges

  1. 1

    Learning Curve

    Transitioning from HTML/CSS to JavaScript was challenging. Struggled particularly with asynchronous programming concepts.

  2. 2

    Git Workflow

    Learning proper Git workflow was difficult. Made many mistakes with branching and merging before understanding proper practices.

  3. 3

    Testing Implementation

    First exposure to testing with Jest was confusing. Still working on writing better test coverage.

Takeaways Learnings

Web Fundamentals

  • HTML semantics and accessibility best practices
  • CSS flexbox, grid, and responsive design principles
  • Browser dev tools and debugging techniques

JavaScript Core

  • ES6+ features including arrow functions, destructuring, and modules
  • Asynchronous programming with promises and async/await
  • DOM manipulation and event handling patterns

React Framework

  • Component-based architecture and JSX syntax
  • Hooks system including useState, useEffect, and custom hooks
  • React Router and basic state management

Backend Development

  • Node.js and Express server basics
  • RESTful API design principles
  • Basic database operations with MongoDB

Development Practices

  • Git version control and GitHub collaboration
  • Test-driven development basics with Jest
  • Webpack configuration and build processes

Computer Science

  • Basic data structures and algorithms
  • Time complexity and code optimization
  • Clean code principles and documentation

Project Planning

  • Breaking down projects into manageable tasks
  • Using design patterns for better code organization
  • Reading documentation and solving problems independently