{"key":"frontend_19_project_list_2026_03_24","title":"19 Frontend Practice Projects For Full Stack Learning","content":"Frontend practice project list captured on 2026-03-24 from the user's referenced course transcript. This memory is tied to the user's HTML/frontend progression and broader full stack learning path so it can be reused later when planning study sessions, project order, or hands-on builds.\n\nPurpose:\n- provide a concrete list of beginner-to-intermediate frontend projects\n- connect HTML/CSS/JavaScript practice to the user's existing full stack learning memories\n- serve as a project pool for Phase 1 and Phase 2 of the user's learning path\n\nProject list:\n1. Quiz Game\n- Files: `index.html`, `style.css`, `script.js`\n- Skills: DOM manipulation, arrays/objects, scoring logic, conditional rendering, progress bar, restart flow\n- Good fit for: early JavaScript DOM practice\n\n2. Color Palette Generator\n- Files: `index.html`, `style.css`, `script.js`\n- Skills: random value generation, hex colors, DOM updates, copy-to-clipboard\n- Good fit for: JavaScript basics plus UI updates\n\n3. Kanban Board\n- Files: `index.html`, `style.css`, `script.js`\n- Skills: drag and drop, event handling, card movement, list reordering\n- Special: HTML Drag and Drop API\n- Good fit for: intermediate DOM/event work\n\n4. Expense Tracker\n- Files: `index.html`, `style.css`, `script.js`\n- Skills: form handling, totals, conditional math, transaction rendering, deletion\n- Special: `localStorage`\n- Good fit for: JavaScript state and persistence\n\n5. Bookmark Saver\n- Files: `index.html`, `style.css`, `script.js`\n- Skills: form input, rendering saved links, deletion, validation\n- Special: `localStorage`\n- Good fit for: beginner app state and persistence\n\n6. Registration Form Validator\n- Files: `index.html`, `style.css`, `script.js`\n- Skills: validation, error messages, password checks, email patterns\n- Good fit for: forms and user input validation\n\n7. Password Generator\n- Files: `index.html`, `style.css`, `script.js`\n- Skills: string building, randomization, toggles/options, copy-to-clipboard, strength logic\n- Good fit for: JavaScript logic and UI controls\n\n8. To-Do App\n- Files: `index.html`, `style.css`, `script.js`\n- Skills: CRUD-style task updates, filters, completion state, persistence\n- Special: `localStorage`\n- Good fit for: foundational interactive app work\n\n9. Contact Form UI\n- Files: `index.html`, `style.css`\n- Skills: semantic form structure, layout, visual polish, icon usage\n- Good fit for: HTML/CSS layout practice before heavy JavaScript\n\n10. Pricing Cards\n- Files: `index.html`, `style.css`\n- Skills: card layout, visual hierarchy, comparison sections, CTA design\n- Good fit for: Flexbox/Grid and reusable styling\n\n11. Team Members Showcase\n- Files: `index.html`, `style.css`\n- Skills: responsive cards, image layout, social links, section structure\n- Good fit for: semantic layout and responsive design practice\n\n12. Recipe Finder\n- Files: `index.html`, `style.css`, `script.js`\n- Skills: search input, fetch, API integration, conditional rendering, detail views\n- Special: TheMealDB API\n- Good fit for: fetch/API practice in Phase 2\n\n13. Currency Converter\n- Files: `index.html`, `style.css`, `script.js`\n- Skills: form handling, select options, fetch, API data usage, calculation, display formatting\n- Special: exchange rate API\n- Good fit for: API-driven UI practice\n\n14. GitHub User Finder\n- Files: `index.html`, `style.css`, `script.js`\n- Skills: search, fetch, async flow, rendering profile data, rendering repos, error states\n- Special: GitHub API\n- Good fit for: API practice and multi-request UI flows\n\n15. Custom 404 Page\n- Files: `index.html`, `style.css`\n- Skills: single-page layout, illustration usage, CTA, typography, responsiveness\n- Good fit for: simple HTML/CSS practice and polish\n\n16. Newsletter Signup UI\n- Files: `index.html`, `style.css`\n- Skills: form markup, layout, CTA design, supporting content blocks\n- Good fit for: semantic structure and styled forms\n\n17. Coming Soon UI\n- Files: `index.html`, `style.css`, `script.js`\n- Skills: countdown timer, DOM updates, simple animation, success messages, social links\n- Good fit for: combining layout and light interaction\n\n18. QR Code Generator\n- Mentioned in course intro\n- Likely skills: form input, output generation, API/library integration, image rendering\n- Good fit for: small API/library-powered utility app\n\n19. OTP Input Fields\n- Mentioned in course intro\n- Likely skills: multi-input focus handling, keyboard events, paste handling, validation\n- Good fit for: focused DOM event practice\n\nHow this ties to the user's learning memories:\n- Supports `html_learning_progress_2026_03_19_session_1` and `html_learning_progress_2026_03_24_session_2` by giving concrete build targets after basic HTML practice.\n- Fits `html_day_by_day_study_plan_2026_03_19` after semantic HTML and forms are more comfortable.\n- Fits `html_only_learning_plan_2026_03_19` as a transition from pure HTML pages into styled, interactive frontend work.\n- Fits `full_stack_phase_1_4_week_plan_2026_03_19` especially Week 2 through Week 4: layout, responsive design, and basic JavaScript DOM.\n- Fits `full_stack_learning_path_2026_03_19` as Phase 1 and Phase 2 project material before backend work.\n- Use `full_stack_dev_files_location_2026_03_24` as the default Windows working path for these projects: `C:\\Users\\Jason\\dev`\n\nSuggested use in the learning path:\n- Start with HTML/CSS-first builds: Contact Form UI, Pricing Cards, Team Members Showcase, Custom 404 Page, Newsletter Signup UI\n- Then move to light JavaScript: Color Palette Generator, Coming Soon UI, Quiz Game, Password Generator\n- Then move to CRUD/state/persistence: To-Do App, Bookmark Saver, Expense Tracker\n- Then move to stronger event/UI logic: OTP Input Fields, Kanban Board\n- Then move to API projects: Recipe Finder, Currency Converter, GitHub User Finder, QR Code Generator\n\nImportant note:\n- In the pasted transcript, 17 projects were directly visible in later build sections.\n- `QR Code Generator` and `OTP Input Fields` were explicitly named in the intro and included here so the remembered set totals 19 projects.\n\n---\n2026-03-24 UTC | Stored via Codex","summary":"Frontend practice project list captured on 2026-03-24 from the user's referenced course transcript. This memory is tied to the user's HTML/frontend progression and broader full stack learning path so it can be reused later when planning study sessions, project order, or hands-on builds.\n\nPurpose:\n- provide a concrete list of beginner-to-intermediate frontend projects\n- connect HTML/CSS/JavaScript practice to the user's existing full stack learning memories\n- serve as a project pool for Phase 1 and Phase 2 of the user's learning path\n\nProject list:\n1. Quiz Game\n- Files: `index.html`, `style.css`, `script.js`\n- Skills: DOM manipulation, arrays/objects, scoring logic, conditional rendering, progress bar, restart flow\n- Good fit for: early JavaScript DOM practice\n\n2. Color Palette Generator\n- Files: `index.html`, `style.css`, `script.js`\n- Skills: random value generation, hex colors, DOM updates, copy-to-clipboard\n- Good fit for: JavaScript basics plus UI updates\n\n3. Kanban Board\n- Files: `index.html`, `style.css`, `script.js`\n- Skills: drag and drop, event handling, card movement, list reordering\n- Special: HTML Drag and Drop API\n- Good fit for: intermediate DOM/event work\n\n4. Expense Tracker\n- Files: `index.html`, `style.css`, `script.js`\n- Skills: form handling, totals, conditional math, transaction rendering, deletion\n- Special: `localStorage`\n- Good fit for: JavaScript state and persistence\n\n5. Bookmark Saver\n- Files: `index.html`, `style.css`, `script.js`\n- Skills: form input, rendering saved links, deletion, validation\n- Special: `localStorage`\n- Good fit for: beginner app state and persistence\n\n6. Registration Form Validator\n- Files: `index.html`, `style.css`, `script.js`\n- Skills: validation, error messages, password checks, email patterns\n- Good fit for: forms and user input validation\n\n7. Password Generator\n- Files: `index.html`, `style.css`, `script.js`\n- Skills: string building, randomization, toggles/options, copy-to-clipboard, strength logic\n- Good fit for: JavaScript logic and UI controls\n\n8. To-Do App\n- Files: `index.html`, `style.css`, `script.js`\n- Skills: CRUD-style task updates, filters, completion state, persistence\n- Special: `localStorage`\n- Good fit for: foundational interactive app work\n\n9. Contact Form UI\n- Files: `index.html`, `style.css`\n- Skills: semantic form structure, layout, visual polish, icon usage\n- Good fit for: HTML/CSS layout practice before heavy JavaScript\n\n10. Pricing Cards\n- Files: `index.html`, `style.css`\n- Skills: card layout, visual hierarchy, comparison sections, CTA design\n- Good fit for: Flexbox/Grid and reusable styling\n\n11. Team Members Showcase\n- Files: `index.html`, `style.css`\n- Skills: responsive cards, image layout, social links, section structure\n- Good fit for: semantic layout and responsive design practice\n\n12. Recipe Finder\n- Files: `index.html`, `style.css`, `script.js`\n- Skills: search input, fetch, API integration, conditional rendering, detail views\n- Special: TheMealDB API\n- Good fit for: fetch/API practice in Phase 2\n\n13. Currency Converter\n- Files: `index.html`, `style.css`, `script.js`\n- Skills: form handling, select options, fetch, API data usage, calculation, display formatting\n- Special: exchange rate API\n- Good fit for: API-driven UI practice\n\n14. GitHub User Finder\n- Files: `index.html`, `style.css`, `script.js`\n- Skills: search, fetch, async flow, rendering profile data, rendering repos, error states\n- Special: GitHub API\n- Good fit for: API practice and multi-request UI flows\n\n15. Custom 404 Page\n- Files: `index.html`, `style.css`\n- Skills: single-page layout, illustration usage, CTA, typography, responsiveness\n- Good fit for: simple HTML/CSS practice and polish\n\n16. Newsletter Signup UI\n- Files: `index.html`, `style.css`\n- Skills: form markup, layout, CTA design, supporting content blocks\n- Good fit for: semantic structure and styled forms\n\n17. Coming Soon UI\n- Files: `index.html`, `style.css`, `script.js`\n- Skills: countdown timer, DOM updates, simple animation, success messages, social links\n- Good fit for: combining layout and light interaction\n\n18. QR Code Generator\n- Mentioned in course intro\n- Likely skills: form input, output generation, API/library integration, image rendering\n- Good fit for: small API/library-powered utility app\n\n19. OTP Input Fields\n- Mentioned in course intro\n- Likely skills: multi-input focus handling, keyboard events, paste handling, validation\n- Good fit for: focused DOM event practice\n\nHow this ties to the user's learning memories:\n- Supports `html_learning_progress_2026_03_19_session_1` and `html_learning_progress_2026_03_24_session_2` by giving concrete build targets after basic HTML practice.\n- Fits `html_day_by_day_study_plan_2026_03_19` after semantic HTML and forms are more comfortable.\n- Fits `html_only_learning_plan_2026_03_19` as a transition from pure HTML pages into styled, interactive frontend work.\n- Fits `full_stack_phase_1_4_week_plan_2026_03_19` especially Week 2 through Week 4: layout, responsive design, and basic JavaScript DOM.\n- Fits `full_stack_learning_path_2026_03_19` as Phase 1 and Phase 2 project material before backend work.\n- Use `full_stack_dev_files_location_2026_03_24` as the default Windows working path for these projects: `C:\\Users\\Jason\\dev`\n\nSuggested use in the learning path:\n- Start with HTML/CSS-first builds: Contact Form UI, Pricing Cards, Team Members Showcase, Custom 404 Page, Newsletter Signup UI\n- Then move to light JavaScript: Color Palette Generator, Coming Soon UI, Quiz Game, Password Generator\n- Then move to CRUD/state/persistence: To-Do App, Bookmark Saver, Expense Tracker\n- Then move to stronger event/UI logic: OTP Input Fields, Kanban Board\n- Then move to API projects: Recipe Finder, Currency Converter, GitHub User Finder, QR Code Generator\n\nImportant note:\n- In the pasted transcript, 17 projects were directly visible in later build sections.\n- `QR Code Generator` and `OTP Input Fields` were explicitly named in the intro and included here so the remembered set totals 19 projects.\n\n---\n2026-03-24 UTC | Stored via Codex","status":"active","namespace":"learning","namespace_name":"learning","namespace_tier":"shared","tags":[]}