-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathroadmap.html
More file actions
227 lines (212 loc) · 15.4 KB
/
Copy pathroadmap.html
File metadata and controls
227 lines (212 loc) · 15.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
<!DOCTYPE html>
<html lang="en" data-theme="day">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>guerz.lol — roadmap</title>
<link rel="icon" id="favicon" type="image/svg+xml" href="favicon-peach.svg">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="lj-header">
<div class="lj-topbar">
<div class="lj-topbar-left">
<div class="lj-brand">guerz.lol</div>
</div>
<div class="lj-topbar-right">
<div class="lj-toggle">
<button type="button" data-theme-btn="day" class="is-active">☼ DAY</button>
<button type="button" data-theme-btn="night">☾ NIGHT</button>
</div>
</div>
</div>
<nav class="lj-nav">
<a href="index.html">home</a>
<a href="about.html">about</a>
<a href="roadmap.html" aria-current="page">roadmap</a>
<a href="projects.html">projects</a>
<a href="https://blogguerz.wordpress.com" target="_blank" rel="noopener noreferrer">blogguerz</a>
<a href="https://twitch.tv/guerz" target="_blank" rel="noopener noreferrer">ttv/guerz</a>
<a href="https://github.com/gitguerz" target="_blank" rel="noopener noreferrer">github</a>
</nav>
<div class="lj-marquee">
<span>☀ the roadmap: no weeks, no clock, one goal date ☾ front-end developer by june 9, 2027 ☀ six freeCodeCamp certs, one per module, direction not deadlines ☾ one main thing, ship often ☀</span>
</div>
</header>
<main class="lj-container lj-container--wide">
<div class="lj-card lj-card--lavender">
<div class="lj-userinfo-role">updated: july 31, 2026</div>
<div class="lj-title-wrap"><h1 class="lj-card-title">THE WEB DEV ROADMAP</h1></div>
<div class="lj-title-wrap"><h2 class="lj-card-title--brutal">less fog, more forward</h2></div>
<div class="lj-card-body">six freeCodeCamp certs, in order, each one a module. no week numbers on purpose — some things take longer than a week, and that's not falling behind, that's how learning actually works. each module opens when the one before it is earned. <b>the goal dates:</b> full sail university — computer science b.s. (ai concentration) starts autumn 2026; front-end developer by june 9, 2027; full-stack developer by june 9, 202? — the question mark stays until the road ahead sharpens it. everything between the dates flexes. the sequence doesn't get rewritten without Coach P's sign-off.</div>
<div class="lj-badges">
<span class="lj-badge lj-badge--peach">1 · responsive web design</span>
<span class="lj-badge lj-badge--lavender">2 · javascript</span>
<span class="lj-badge lj-badge--peach">3 · front end libraries</span>
<span class="lj-badge lj-badge--lavender">4 · python</span>
<span class="lj-badge lj-badge--peach">5 · backend + apis</span>
<span class="lj-badge lj-badge--lavender">6 · data visualization</span>
<span class="lj-badge lj-badge--lavender">full sail: autumn 2026</span>
<span class="lj-badge lj-badge--peach">front-end: 6.9.27</span>
</div>
</div>
<div class="lj-card lj-card--peach">
<div class="lj-card-eyebrow">you are here — css foundations</div>
<div style="display:flex;flex-direction:column;gap:5px;font:14px/1.55 'Eczar',serif">
<div>working the freeCodeCamp Responsive Web Design (fCC RWD) cert chronologically, through the odin project's fCC remix. right now: <b>css foundations</b> — no skipping ahead, no victory lap.</div>
<div><b>the method:</b> build it cold — take one concept, write it from scratch with every line commented, then check the docs. each build ships to the projects page as proof.</div>
<div><b>support lanes:</b> the odin project (html/css) as the path · fCC RWD as the cert · MDN + web.dev for reference. anki is shelved for now — building beats drilling while the fundamentals are still forming.</div>
<div>next checkpoint: finish the RWD cert projects and claim module 1. module 2 (javascript) opens after.</div>
</div>
</div>
<div class="lj-phase-header lj-phase-header--peach">
<div class="lj-card-eyebrow">module 1 — responsive web design · html / css foundations</div>
</div>
<div class="lj-row">
<div class="lj-card lj-card--sm" style="flex:2">
<div class="lj-card-eyebrow">status — CURRENT</div>
<div class="lj-card-body">in progress — css foundations via the odin project's fCC remix, building each concept cold with every line commented. shipped so far: <b>guerz.lol v1.0 → v4.0</b>, and the cold-build + fCC project set now live on the projects page.</div>
</div>
<aside class="lj-card lj-card--sm" style="box-shadow:4px 4px 0 var(--lavender)">
<div class="lj-card-eyebrow">support lanes</div>
<div class="lj-support-lanes" style="gap:6px">
<div class="lj-support-lane" style="box-shadow:none;border:none;padding:0"><span class="lj-support-lane-label">anchor</span> <span class="lj-support-lane-body">freeCodeCamp RWD v9, via TOP remix</span></div>
<div class="lj-support-lane" style="box-shadow:none;border:none;padding:0"><span class="lj-support-lane-label">support</span> <span class="lj-support-lane-body">TOP HTML/CSS, web.dev Learn CSS</span></div>
<div class="lj-support-lane" style="box-shadow:none;border:none;padding:0"><span class="lj-support-lane-label">reps</span> <span class="lj-support-lane-body">Mimo, Coddy, html5andcss3.org</span></div>
</div>
</aside>
</div>
<div class="lj-phase-header lj-phase-header--lavender">
<div class="lj-card-eyebrow">module 2 — javascript · a real lane, not just glue</div>
</div>
<div class="lj-row">
<div class="lj-card lj-card--sm" style="flex:2;box-shadow:4px 4px 0 var(--lavender)">
<div class="lj-card-eyebrow">the spine</div>
<div class="lj-card-body">fCC JavaScript Algorithms & Data Structures cert. git + github from the terminal for all real work, from day one of this module. build-it-cold shifts to JS: variables → arrays/objects/loops → DOM + events → fetch/JSON + async. opens once module 1's cert is claimed — no earlier.</div>
</div>
<aside class="lj-card lj-card--sm" style="box-shadow:4px 4px 0 var(--lavender)">
<div class="lj-card-eyebrow">support lanes</div>
<div class="lj-support-lanes" style="gap:6px">
<div class="lj-support-lane" style="box-shadow:none;border:none;padding:0"><span class="lj-support-lane-label">anchor</span> <span class="lj-support-lane-body">freeCodeCamp JS v9</span></div>
<div class="lj-support-lane" style="box-shadow:none;border:none;padding:0"><span class="lj-support-lane-label">reps</span> <span class="lj-support-lane-body">TOP Full Stack JS, Coddy, light codewars (8 kyu)</span></div>
<div class="lj-support-lane" style="box-shadow:none;border:none;padding:0"><span class="lj-support-lane-label">tooling</span> <span class="lj-support-lane-body">git, github, terminal/cli (DataCamp)</span></div>
</div>
</aside>
</div>
<div class="lj-phase-header lj-phase-header--ink">
<div class="lj-card-eyebrow">module 3 — front end development libraries · react / redux</div>
</div>
<div class="lj-row">
<div class="lj-card lj-card--sm" style="flex:2">
<div class="lj-card-eyebrow">the spine</div>
<div class="lj-card-body">fCC Front End Development Libraries cert — React, Redux, Sass. at least one real component-driven project shipped to guerz.lol. opens once module 2's cert is claimed.</div>
</div>
<aside class="lj-card lj-card--sm">
<div class="lj-card-eyebrow">support lanes</div>
<div class="lj-support-lanes" style="gap:6px">
<div class="lj-support-lane" style="box-shadow:none;border:none;padding:0"><span class="lj-support-lane-label">anchor</span> <span class="lj-support-lane-body">freeCodeCamp FEL cert</span></div>
<div class="lj-support-lane" style="box-shadow:none;border:none;padding:0"><span class="lj-support-lane-label">build</span> <span class="lj-support-lane-body">one real react/redux project</span></div>
</div>
</aside>
</div>
<div class="lj-phase-header lj-phase-header--peach">
<div class="lj-card-eyebrow">module 4 — scientific computing with python · the back half begins</div>
</div>
<div class="lj-row">
<div class="lj-card lj-card--sm" style="flex:2">
<div class="lj-card-eyebrow">the spine</div>
<div class="lj-card-body">fCC Scientific Computing with Python cert. python fundamentals feeding straight into AI/LLM work — CLI tools, files/CSV/JSON, APIs from python, then Anthropic/OpenAI calls and local models via Ollama on the M4. opens once module 3's cert is claimed.</div>
</div>
<aside class="lj-card lj-card--sm" style="box-shadow:4px 4px 0 var(--lavender)">
<div class="lj-card-eyebrow">support lanes</div>
<div class="lj-support-lanes" style="gap:6px">
<div class="lj-support-lane" style="box-shadow:none;border:none;padding:0"><span class="lj-support-lane-label">anchor</span> <span class="lj-support-lane-body">freeCodeCamp Python cert</span></div>
<div class="lj-support-lane" style="box-shadow:none;border:none;padding:0"><span class="lj-support-lane-label">reps</span> <span class="lj-support-lane-body">DataCamp, RealPython, Coddy Python</span></div>
<div class="lj-support-lane" style="box-shadow:none;border:none;padding:0"><span class="lj-support-lane-label">ai/llm</span> <span class="lj-support-lane-body">Ollama, Anthropic/OpenAI APIs, LangChain</span></div>
</div>
</aside>
</div>
<div class="lj-phase-header lj-phase-header--lavender">
<div class="lj-card-eyebrow">module 5 — back end development & apis</div>
</div>
<div class="lj-row">
<div class="lj-card lj-card--sm" style="flex:2;box-shadow:4px 4px 0 var(--lavender)">
<div class="lj-card-eyebrow">the spine</div>
<div class="lj-card-body">fCC Back End Development & APIs cert. a real API-backed project — routes, data, error handling. Flask stays the python-side option once python's in hand. opens once module 4's cert is claimed.</div>
</div>
<aside class="lj-card lj-card--sm" style="box-shadow:4px 4px 0 var(--lavender)">
<div class="lj-card-eyebrow">support lanes</div>
<div class="lj-support-lanes" style="gap:6px">
<div class="lj-support-lane" style="box-shadow:none;border:none;padding:0"><span class="lj-support-lane-label">anchor</span> <span class="lj-support-lane-body">freeCodeCamp Backend + APIs cert</span></div>
<div class="lj-support-lane" style="box-shadow:none;border:none;padding:0"><span class="lj-support-lane-label">build</span> <span class="lj-support-lane-body">one API-backed project, live</span></div>
</div>
</aside>
</div>
<div class="lj-phase-header lj-phase-header--ink">
<div class="lj-card-eyebrow">module 6 — data visualization · the last cert on the spine</div>
</div>
<div class="lj-row">
<div class="lj-card lj-card--sm" style="flex:2">
<div class="lj-card-eyebrow">the spine</div>
<div class="lj-card-body">fCC Data Visualization cert — D3, data-driven DOM. a real data-viz project pulling from an API, live on guerz.lol. earning this one = <b>full stack developer.</b> goal line: june 9, 202?. opens once module 5's cert is claimed.</div>
</div>
<aside class="lj-card lj-card--sm">
<div class="lj-card-eyebrow">support lanes</div>
<div class="lj-support-lanes" style="gap:6px">
<div class="lj-support-lane" style="box-shadow:none;border:none;padding:0"><span class="lj-support-lane-label">anchor</span> <span class="lj-support-lane-body">freeCodeCamp Data Viz cert</span></div>
<div class="lj-support-lane" style="box-shadow:none;border:none;padding:0"><span class="lj-support-lane-label">build</span> <span class="lj-support-lane-body">one data-viz project from live data</span></div>
</div>
</aside>
</div>
<div class="lj-userinfo-role">modules stay intentionally open — direction, not gospel. firms up at monthly reassessments. the cs/algorithms/data-structures lane is reserved (python-flavored) but doesn't start until 1–2 real python/ai projects exist. grind justified by use, not syllabus guilt. (+ any later certs deliberately added only at a real boundary, never for elegance.)</div>
<div class="lj-phase-header lj-phase-header--peach">
<div class="lj-card-eyebrow">parallel sidequest — wordpress proficiency · the ultimate weapon</div>
</div>
<div class="lj-week-grid">
<div class="lj-week lj-week--lavender" style="flex-direction:column"><div class="lj-week-num">foundations</div><div class="lj-week-body"><b>publishing.</b> block editor fluency, theme basics, skeleton posts in my style. 1–2 real posts a week.</div></div>
<div class="lj-week lj-week--lavender" style="flex-direction:column"><div class="lj-week-num">structure</div><div class="lj-week-body"><b>integration.</b> pages vs posts, categories/tags, menus, site editor. cross-post pipeline to bluesky + mastodon.</div></div>
<div class="lj-week lj-week--lavender" style="flex-direction:column"><div class="lj-week-num">workflows</div><div class="lj-week-body"><b>blog.guerz.lol.</b> obsidian → wordpress → social pipeline. income-gated migration to a self-hosted blog.</div></div>
</div>
<div class="lj-userinfo-role">minimum heartbeat: one wordpress interaction per week. never allowed to hijack the main spine.</div>
<div class="lj-card lj-card--slate">
<div class="lj-card-title" style="font-size:18px">rules · read these when overwhelmed</div>
<div style="font:14px/1.6 'Eczar',serif;display:flex;flex-direction:column;gap:4px">
<div>one main thing at a time.</div>
<div>ship something visible often, even tiny.</div>
<div>reference sites are support, not a third curriculum.</div>
<div>build first, read second, watch third.</div>
<div>ugly but working > perfect but stuck.</div>
<div>roadmap tracks reality — update it when things move.</div>
<div>the timeline flexes. the direction doesn't.</div>
<div>the certs are the ruler now — six fCC certs, free; front-end by 6.9.27, full stack when it's earned.</div>
<div>no re-sequencing the modules without Coach P sign-off.</div>
<div>monthly reassessment on the 1st.</div>
<div>wordpress sidequest: minimum one interaction/week, never hijacks the spine.</div>
</div>
<div style="border-top:2px solid var(--paper2);padding-top:10px;margin-top:4px">
<div class="lj-card-eyebrow" style="margin-bottom:6px">definition of done (per module milestone)</div>
<div style="font:13.5px/1.6 'Eczar',serif;display:flex;flex-direction:column;gap:3px">
<div>the concrete output exists and is visible, deployed or local.</div>
<div>roadmap.html reflects what actually happened.</div>
<div>at least one obsidian nightly report exists for the stretch.</div>
<div>you can explain what you built in plain english.</div>
</div>
</div>
</div>
</main>
<footer class="lj-footer">
<div class="lj-footer-inner lj-footer-inner--wide">
<div class="lj-footer-copy">© guerz.lol<br>no cookies, just cache</div>
<nav class="lj-footer-nav">
<a href="index.html">home</a>
<a href="about.html">about</a>
<a href="roadmap.html">roadmap</a>
<a href="projects.html">projects</a>
<a href="https://blogguerz.wordpress.com" target="_blank" rel="noopener noreferrer">blogguerz</a>
</nav>
<div class="lj-footer-note">best viewed at<br>any resolution</div>
</div>
</footer>
<script src="theme.js"></script>
</body>
</html>