Hi! I'm David Hu. This repo is my working archive from Dr. Angela Yu’s The Complete Full-Stack Web Development Bootcamp on Udemy. It’s a project-based course exploring HTML, CSS, JavaScript, jQuery, React, Node/Express, databases, and introductory Web3 with lessons on best practices and integration along the way.
The image of the course below in case Udemy has its less-than-infrequent skill issues.
This was my first entry point into computer science before formal CS or industry; when I naively thought software engineering was just “coding” (Things have really changed! lol). I wrote all of this by hand before the age of AI, now with AI it's not so impressive but I hope you'll look back fondly like I do! :)
Contents: Module guide · Course map · Technologies & tools
- Sections: The highlights from Sections 2–11 (HTML/CSS) curated into a one-stop gallery.
- In this folder:
index.htmlas the one stop portfolio hub.
- Sections: 2–4 HTML/pages · 5–8 CSS · 9 Flexbox · 10 Grid · 11 Bootstrap · Capstone 1 online résumé.
- In this folder: Full numbered lesson tree +
Capstone 1.
- Sections: 14–15 language drills · 16–18 DOM + mini-apps.
- In this folder: Root
*.jsfiles as the language drills · DOM Challenge · Dicee · Drum kit.
- Sections: 19 jQuery API scratchpad · 20 Simon game capstone mini-project.
- In this folder:
index.html+index.js·Simon Game/.
- Sections: 36 (React + Vite lesson apps). Some standalone lessons but many integrated into the "Keeper Notes App" capstone mini-project.
- In this folder: Numbered app folders (e.g. 280+) · Keeper App 293 → 302 → 319 → 320 · single-topic examples
306-useState-hook,311-react-forms.
- Sections: Ad hoc notes from the Git/GitHub parts of the course (no single exercise section).
- In this folder: Loose files only—not a full lesson mirror like the other modules.
The # column is the Udemy section number according to the course.
| Area | Topic | # | In this repo |
|---|---|---|---|
| Front-end | HTML | 2–4 | 2.1 Heading Element, 3.4 Birthday Invite Project, 4.1+Webpages, hub html-portfolio/ |
| Front-end | CSS | 5–8 | 5.1. Adding CSS, 6.4 Motivation Meme Project, 7.3 CSS Flag Project, 8.4 Web Design Agency Project |
| Front-end | Flexbox | 9 | 9.0 Display Flex, 9.1 Flex Direction, 9.4 Flexbox Pricing Table Project |
| Front-end | Grid | 10 | 10.0 Display Grid, 10.2 Grid Placement, 10.3 Mondrian Project |
| Front-end | Bootstrap | 11 | 11.0 Bootstrap Intro, 11.2 Bootstrap Components, 11.3 TinDog Project |
| Front-end | HTML/CSS capstone | Capstone 1 · Online Resume (Html+CSS/README.md) |
Capstone 1 |
| Front-end | JavaScript (ES6 core) | 14–15 | JavaScript/ · top-level *.js (variables → arrays/objects, control flow, small exercises) |
| Front-end | DOM & browser mini-apps | 16–18 | DOM Challenge Starting Files · Dicee+Challenge+-+Starting+Files · Drum Kit Starting Files |
| Front-end | jQuery | 19–20 | jQuery/index.html (+ index.js) · Simon Game |
| Front-end | React (+ hooks / Keeper) | 36 | React/ · JSX entry 280-jsx-code-challenge · props/components e.g. 286-react-components · 306-useState-hook · 311-react-forms · Keeper 293-keeper-app-part-1-challenge → 302-keeper-app-part-2-starting → 319-keeper-app-part-3-starting → 320-styling-the-keeper-app-starting |
| Tooling | Git, GitHub | — | Git/ (no index noted in those READMEs) |
| Tooling | Bash / command line | — | — |
| Back-end | Node, Express, EJS, REST, APIs, SQL, PostgreSQL, auth | — | — |
| Design & shipping | Deployment (e.g. GitHub Pages) | — | — |
Front-end: HTML5 · CSS3 · Flexbox · CSS Grid · Bootstrap 5 · JavaScript (ES6+) · DOM APIs · jQuery · React · React Hooks
Tooling: Bash · Git · GitHub
Back-end & data: Node.js · NPM · Express.js · EJS · REST · APIs · SQL · PostgreSQL · authentication
Design & delivery: web design (layout, UI patterns) · deployment (e.g. GitHub Pages)
Web3: Internet Computer · blockchain · token contracts · NFT minting/trading (introductory)
Thanks for stopping by! 🌱