commit-to-learn-frontend-josh-L

A living notebook of my Web Dev journey. Part study guide & part playground.

Web Dev Study Notes

This repository is my ongoing study space for learning frontend development.
It serves as both a personal study guide and a reference notebook. Each topic is organized into its own folder with subfolders/files for practice code and notes.

📂 Structure

• [01-javascript/]

  • [arrays/]
    • [arrays.js]
    • [array-methods.js]
  • [functions/]
    • [functions.js]
    • [arrow-functions.js]
    • [higher-order-functions.js]
  • [objects/]
    • [objects.js]

• [02-html/]

  • [quick-reference.html]

• [03-css/]

  • [selectors/]
    • [selectors.css]
  • [flexbox/]
    • [flexbox.css]

• [04-dom/]

  • [events/]
    • [event-listeners.js]
  • [manipulation/]
    • [dom-manipulation.js]

• [05-json/]

  • [travel-itinerary.json]

• [06-apis/]

  • [fetch-examples.js]
  • [http-methods.md]

• [07-react/]

  • [common-array-methods.js]
  • [components/]
  • [props-and-state/]
  • [jsx-examples/]

& so on...

---

📝 Learning Flow

1. JavaScript → Core language fundamentals: variables, functions, arrays, objects, classes.
2. HTML → Structure of webpages, semantic elements, forms, and accessibility.
3. CSS → Styling webpages: selectors, layouts (flexbox, grid), responsive design.
4. DOM (Document Object Model) → Connecting JavaScript to HTML: events, element selection, and manipulation.
5. JSON (JavaScript Object Notation) → A lightweight data format for sending and receiving structured data.
6. APIs (Application Programming Interfaces) → Using fetch to send HTTP requests (GET, POST) and work with external data.
7. React → A JavaScript library for building reusable UI components with JSX, props, and state.

---

🚀 Goals

• Reinforce fundamentals with hands-on practice code.
• Organize notes by topic for easy review and reference.
• Build a clear progression that mirrors my frontend learning journey.

---

🔗 Resources

• MDN Web Docs – comprehensive reference
• JavaScript.info – in-depth JavaScript explanations
• CSS Tricks – practical CSS tips
• React Docs – official React documentation

---

📌 Notes

This repo is a living study notebook. As I continue learning, I’ll add more topics, subfolders, and code examples.