Web Development Bootcamp Tracker

Repository created to record and track my progress in Angela Yu’s Complete 2024 Web Development Bootcamp. Enrollment began on June 3, 2024. This repo contains my notes, projects, and resources as I progress through the boot camp.[^§§] The goal is to build a strong foundation in front-end and back-end technologies.

I’ll attempt to study at least 6 hours a day alongside a Discord Study Group while taking a deliberate lean tech approach to thoroughly comprehend the content and related materials.

-v.0.04

[^§§]: The Complete 2024 Web Development Bootcamp created by Dr. Angela Yu (Udemy).

Table of Contents

• Overview
• Curriculum
• Projects
• Resources
• Milestones
• Future Goals
• Contact

Overview

Learning HTML, CSS, Javascript, React, Node, and Web3 development. Master front-end development with React. Master back-end development with Node. Learn professional developer best practices.

Curriculum

Phase 1: Front-End and Basic HTML/CSS

• Routing, Servers, Hosting [section 1]
• Basic HTML Structure, Elements, Attributes [sections 2–3]
• Capstone Project 1 [section 4]
• CSS Basics and Styling Text [sections 5–7]
• CSS Layouts, Flexbox, and Grid [sections 8–10]
• Front-End Frameworks: Bootstrap [section 11]

Phase 2: Web Design

• Introduction to Web Design, Color Theory, Typography, UX/UI [section 12]
• Capstone Project 2 [section 13]

Phase 3: JavaScript

• JS Fundamentals, Variables, Data Types, Arithmetic, Modulo, Functions [section 14]
• Control Statements and Logic, Arrays [section 15]
• DOM Model, Dom Manipulation, Event Handling, jQuery, ES6 Features [sections 16–20]

Phase 4: The Unix Command Line

• Unix Command Line Techniques, Navigation, and File Manipulation [section 21]

Phase 5: Back-End Development

• Tools and Technologies, Node.js, NPM Package Manager [sections 22–23]
• Express.js Servers, HTTP Requests, Middlewares [section 24]
• Introduction to EJS, Tags, Templates, Layout [section 25]
• Capstone Project 3 [section 26]
• Git, GitHub, and Version Control, Deployment [section 27]
• Introduction to APIs, Requests, JSON, Axios, Authentication, REST APIs [section 28]
• Capstone Project 4 [section 29]
• Building your own API [section 30]
• Databases, SQL vs. NoSQL [section 31]
• SQL, Commands, Relationships, Foreign Keys, Inner Joins [sections 32]
• Introduction to Postgres, PostgreSQL, pgAdmin, CRUD [section 33]
• Capstone Project 5 [section 34]

Phase 6: Full-Stack Development

• Integrating Front-End & Back-End, Authentication, Encryption, Cookies & Sessions, OAuth [section 35]
• React.js, Local Development, JSX, Babel, Hooks, Dependencies, ES6 [section 36]

Phase 7: Web3 | Decentralized App (DApp) Development

• Introduction to Web3 DApp, DBANK, Blockchain [sections 37–39]
• Building DApps on ICP w/ React Frontend [section 40]
• Crypto Tokens, NFTs, NFT Marketplace [sections 41–42]

Projects

Capstone 1: Online Resume

• Design Brief: Create an online resume using only HTML.
• Deliverables: HTML file for structure, Resume content.
• Technologies: HTML

Capstone 2: Personal Website

• Design Brief: Create a personal website using HTML and CSS.
• Deliverables: HTML file, CSS file, Assets (e.g., images, fonts).
• Features: Hero section, Resume page, Projects page, About Me, Contact page.
• Technical Requirements: Valid HTML and CSS, Responsive design, Accessible images.
• Timeline:
  • Stage 1: Gather content and design ideas, create wireframes and mockups.
  • Stage 2: Develop HTML structure and CSS styling, test on different devices and browsers.
  • Stage 3: Finalize design and content, optimize for performance, launch the website.
• Technologies: HTML, CSS

Capstone 3: Blogging Platform

• Design Brief: Create a blog web application using Node.js, Express.js, and EJS.
• Deliverables: Node project, EJS templates, CSS files.
• Features: Create, update, delete posts; responsive design.
• Technical Requirements: Node.js & Express.js for server, EJS for templating, CSS for styling.
• Timeline:
  • Stage 1 PLANNING: Plan project, create wireframes and mockups.
  • Stage 2 SET UP: Set up project repository, initialize Node.js application, install dependencies, create application structure, and static files.
  • Stage 3 IMPLEMENTATION: Implement post-creation, post-viewing, post-edit features.
  • Stage 5 STYLING: Style application, test on different devices and browsers.
  • Stage 8 POLISH: Finalize and polish application, fix bugs, and launch.
• Technologies: Node.js, Express.js, EJS, JavaScript, HTML, CSS

Capstone 4: Use a Public API

• Design Brief: Build a website using Express/Node.js and Axios to integrate a public API, presenting data in a user-friendly manner.
• Objectives:
  • Develop understanding of API integration in web projects.
  • Gain practical experience in Express/Node.js.
  • Enhance client-server communication using Axios.
  • Demonstrate data manipulation from retrieved APIs.
• Deliverables: Deployed website.
• Technical Requirements:
  1. API Choice: Select API from Public API Lists.
  2. Project Planning and Setup: Research target API, Initialize Node.js project with Express.js, Axios, and EJS.
  3. API Integration: Implement GET endpoint to interact with chosen API.
  4. Data Presentation: Design website to display retrieved data in HTML using EJS.
  5. Error Handling: Ensure comprehensive error handling.
  6. Documentation: Include comments for code clarity.
• Timeline: Adapt based on project complexity.
• Technologies: Express.js, Node.js, Axios HTTP client, Public APIs, CORS, HTML, CSS, JavaScipt.

Capstone 5: Book Notes Web App

• Design Brief: Develop a sortable Book Notes web application to manage titles, notes, and ratings, integrating with PostgreSQL for data persistence.[^††] [^††]: Idea based on Derek Sivers Books I’ve read, where all the nonfiction books he has read, his notes, his ratings, and when he read them are stored. The books are sortable by rating, recency, and title.
• Objectives:
  • Review API integration skills.
  • Gain experience in Express/Node.js and PostgreSQL.
  • Demonstrate CRUD operations for data management.
• Deliverables: Fully-functional web application.
• Technical Requirements:
  1. Database Persistence: Utilize PostgreSQL for data storage.
  2. Project Planning: Plan project features and data structure, diagram database relationships using draw.io.
  3. Project Setup: Configure Node.js with Express.js, pg, and EJS.
  4. API Integration: Implement endpoints for CRUD operations.
  5. Data Presentation: Design UI for user-friendly interaction.
  6. Error Handling: Implement comprehensive error handling.
  7. Documentation: Include detailed comments and README.md.
• Timeline: Adjust according to complexity and learning pace.
• Technologies: Public APIs, Express/Node.js, PostgreSQL, JavaScript, HTML, CSS

Resources

• HTML & CSS:

  • MDN Web Docs - HTML
  • MDN Web Docs - CSS
  • CSS-Tricks

• JavaScript:

  • MDN Web Docs - JavaScript
  • Eloquent JavaScript
  • JavaScript.info

• React:

  • React Official Documentation
  • React Tutorial - Scrimba

• Node.js & Express.js:

  • Node.js Official Documentation
  • Express.js: Getting Started Guide
  • Express.js Official Documentation
  • Axios Documentation

• Postgres:

  • Postgres Documentation
  • pg Documentation

• More Resources:

  • Public API List
  • Open Library Covers API
  • More free APIs

Milestones

• Phase 1: Completed HTML basics, built first webpage.
• Phase 2: Learned CSS fundamentals and design principles, created a responsive layout, utilized UX/UI concepts.
• Phase 3a: Understood JavaScript basics, wrote simple scripts.
• Phase 3b: Learned DOM manipulation techniques and event handling in JavaScript.
• Phase 4: Learned to navigate the filesystem and manage files using command line, learned to view and edit files in the terminal.
• Phase 5a: Created First Server with Express.js, build a simple RESTful API with Node.js and Express.js.
• Phase 5b: Integrated PostgreSQL, performed CRUD operations.
• Phase 6a: Combined front-end and back-end, implemented authentication.
• Phase 6b: Implemented hooks, used context API for state management.
• Phase 6c: Created first React component, managed state and props.
• Phase 7: Deployed applications with Express.

Future Goals

• Contribute to open-source projects and build a strong GitHub portfolio.
• Build 16 web development projects for my portfolio.
• Build s fully-fledged website for a startup or non-profit.
• Learn the latest technologies, including Javascript, React, Node, and Web3 development.
• Master front-end development with React.
• Master back-end development with Node.
• Complete a tutorial on professional developer best practices and apply them in projects.

Contact

Thank you for checking out my Web Development Bootcamp progress! Stay tuned for more updates and projects.

If you have any questions or suggestions, feel free to reach out to me:

• Email: libraryhostess@gmail.com
• GitHub: Find me on GitHub

References