updated: july 5, 2026
less fog, more forward.
this is the 24-week roadmap for turning HTML/CSS foundations into fullstack skills. it exists to keep the focus visible, not to turn the site into a pressure cooker.
Current Focus
you are here
finish animations, run the full css review, study for and take the responsive web design cert exam. mimo: interactive webpages (intro js) as a light support lane.
visible checkpoint: rwd certification earned (or exam sitting booked), one guerz.lol section rebuilt with grid + animations.
claim the rwd cert if not already locked in last week. start The Odin Project: JavaScript Basics as the bridge into module 2.
phase 1 — HTML / CSS foundations (weeks 1 – 8)
establish front end core
structure, semantic tags, single-page layouts.
output: about page + simple landing shipped.
selectors, box model, colors, typography.
output: week 1 pages styled — spacing + basic design system.
display, positioning, overflow, mobile-first thinking.
output: page rebuilt with proper layout, mobile-first structure.
UX basics, nav, hero, sections — no JS yet.
output: guerz.lol v1.0 live on GitHub Pages.
rows, columns, alignment, wrapping, real-world layout.
output: guerz.lol v1.3 — flexbox layout live.
the catch-up sprint — cleared all of it.
output: technical documentation page + book inventory cert projects shipped, city skyline workshop done.
finish animations, full css review, study for and take the cert exam. mimo interactive webpages (html w/ js) as light support.
output: rwd cert exam taken; one guerz.lol section rebuilt with grid, animations finished.
claim the rwd cert if not already locked in. The Odin Project: JavaScript Basics begins.
output: responsive web design certification earned. guerz.lol v2.0 — accessible, responsive, cert linked.
phase 2 — JavaScript + Git/GitHub/CLI (weeks 9–16)
making things move — a real lane, not just glue
core studies: fCC JS cert course. support: TOP JS course, Mimo interactive webpages. git + github: init, add, commit, push, branches, PRs.
output: guerz.lol repo — clean history, README, all regular work from terminal.
variables, types, control flow, functions.
output: small JS playground page on guerz.lol (calculator or converter).
arrays, objects, loops, methods.
output: list-filter or small data tool, shipped. codewars starts (js, 8 kyu → light 7 kyu max) then stop.
selectors, listeners, modifying the page.
output: interactive page — todo list, click counter, or quiz.
consuming public apis, parsing responses, handling errors.
output: tiny app hitting a public api, live on guerz.lol.
deeper fCC practice, TOP review, Mimo reps.
output: second small JS project or a refactor of the week 10–13 build.
combine DOM, fetch, and state into one build.
output: a slightly more complete interactive tool or mini app.
the fetch test (see gate below), then portfolio integration.
output: guerz.lol v3.0 — JS projects linked, source + descriptions clean.
week 16 gate — "the fetch test"
pass before python starts
build, solo, one sitting (~90 min). no tutorials open, no AI writing the code.
- ☐ fetches data from a public API (fetch + async/await or .then)
- ☐ handles the failure case (bad URL / no network → human message, not a blank page)
- ☐ renders results into the DOM (loop data, create elements, insert)
- ☐ one interactive control (button/input) that re-fetches or filters
- ☐ styled enough to not be embarrassing (15 min max)
all five, no hand-holding → pass, week 17 begins. anything missed, even barely → not yet. take another week, rerun until clean. no shame, no restart.
phase 3 — Python + AI/LLMs (weeks 17–24)
the destination
types, control flow, functions.
output: first CLI script automating a tiny real task.
lists, dicts, modules, files.
output: file renamer / parser / personal tool, in the repo.
CSV/JSON handling, SQLite basics.
output: script reading/writing a real little database.
requests, JSON, error handling.
output: python tool hitting a public API.
first Anthropic/OpenAI calls from python.
output: working script sending prompts + handling responses.
Ollama + deepseek-coder on the M4.
output: local model running; small python wrapper around it.
one real python + AI project, scoped small.
output: working v1. ugly but working > perfect but stuck.
review, clean up, breathe, and graduate the thing.
output: guerz.lol v4.0 — rwd cert + JS builds + python/AI capstone, all linked.
weeks 17–24 stay intentionally loose — direction, not gospel. firms up at monthly reassessments. the CS/algorithms/data-structures lane is reserved (4–6 weeks, python-flavored) but doesn't start until 1–2 real python/AI projects exist. grind justified by use, not syllabus guilt.
parallel sidequest — wordpress proficiency
the ultimate weapon
real comfort in wordpress for blogguerz, cross-posting to bluesky + mastodon, and a future blog.guerz.lol. runs alongside every module — never primary, never fully dropped.
block editor fluency, theme basics, skeleton posts in my established style. 1–2 real posts a week.
pages vs posts, categories/tags, menus, site editor. cross-post pipeline to bluesky + mastodon.
obsidian → wordpress → social pipeline. income-gated migration to self-hosted blog.guerz.lol.
minimum heartbeat: one wordpress interaction per week. never allowed to hijack the main spine.
rules • read these when overwhelmed
how this roadmap actually works
- one main thing at a time.
- ship something visible every week, even tiny.
- reference sites are support, not a third curriculum.
- build first, read second, watch third.
- ugly but working > perfect but stuck.
- roadmap tracks reality — update it when things move.
- miss a week? keep going. no restarts.
- the cert is not the ruler — python proficiency is. don't cert-grind out of habit.
- monthly reassessment on the 1st.
- wordpress sidequest: minimum one interaction/week, never hijacks the spine.
definition of done (per week)
- the concrete output exists and is visible, deployed or local.
- roadmap.html reflects what actually happened.
- at least one obsidian nightly report exists for the week.
- i can explain what i built in plain english.