Skip to content

Commit 4e5fbd9

Browse files
committed
fixed fccfsjs_outline to use correct js script lesson
1 parent 5aa5ea7 commit 4e5fbd9

1 file changed

Lines changed: 164 additions & 60 deletions

File tree

itis3135/fccfsjs_outline.html

Lines changed: 164 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="utf-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1" />
6-
<title>Legacy JS Algorithms & Data Structures – ITIS 3135 – John Hand</title>
6+
<title>FCC Full Stack JavaScript Outline – ITIS 3135 – John Hand</title>
77

88
<!-- Accumulus (required) -->
99
<script src="https://lint.page/kit/4d0fe3.js" crossorigin="anonymous"></script>
@@ -13,116 +13,220 @@
1313

1414
<!-- Include loader for shared header/footer -->
1515
<script src="scripts/include.js" defer></script>
16+
17+
<style>
18+
/* Page-local tweaks: keeps table balanced and readable in narrow widths */
19+
.table-wrap { overflow-x: auto; }
20+
table { width: 100%; border-collapse: collapse; }
21+
caption { text-align: left; font-weight: 600; margin-bottom: .5rem; }
22+
thead th { text-align: left; border-bottom: 2px solid var(--border, #e5e7eb); padding: .6rem .5rem; }
23+
tbody td, tbody th[scope="row"] { padding: .6rem .5rem; vertical-align: top; border-bottom: 1px solid var(--border, #eef0f3); }
24+
25+
/* ✅ fixed: removed element qualification */
26+
.steps { white-space: nowrap; }
27+
.desc { max-width: 52ch; }
28+
29+
.muted-note { color: var(--muted, #6b7280); font-size: .95rem; }
30+
.summary-cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 1rem 0 1.25rem; }
31+
.card { background: var(--card-bg, #fff); border: 1px solid var(--border, #e5e7eb); border-radius: 10px; padding: .9rem 1rem; box-shadow: var(--shadow-sm, 0 2px 6px rgba(0,0,0,.04)); }
32+
.schedule-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
33+
.signature { margin-top: .75rem; font-style: italic; }
34+
@media (max-width: 640px){ .desc { max-width: 42ch; } }
35+
</style>
1636
</head>
1737
<body>
1838
<!-- ==================== HEADER (Dynamic Include) ==================== -->
1939
<header data-include="components/header.html"></header>
2040

2141
<!-- ==================== MAIN CONTENT ==================== -->
2242
<main>
23-
<h2>freeCodeCamp – Legacy JavaScript Algorithms and Data Structures (Outline)</h2>
43+
<h1>freeCodeCamp — Full-Stack Curriculum (JavaScript Track) Outline</h1>
2444
<p class="profile">
25-
This outline summarizes the <a href="https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/" target="_blank" rel="noopener">
26-
freeCodeCamp Legacy JavaScript Algorithms and Data Structures certification</a>, including each curriculum section, step count, and brief description.
45+
This page outlines the <strong>JavaScript</strong> portion of the <em>Certified Full Stack Developer Curriculum</em> (freeCodeCamp). It lists each
46+
section, current step/page counts (where verified), and a short description. The track contains <strong>~20 sections</strong> and <strong>917 total steps</strong> (Fall ’25).
2747
</p>
2848

49+
<section aria-labelledby="summary-heading" class="summary-cards">
50+
<div class="card">
51+
<h3 id="summary-heading">At-a-Glance</h3>
52+
<ul>
53+
<li><strong>Total sections:</strong> 22</li>
54+
<li><strong>Total steps:</strong> 917</li>
55+
<li><strong>Format:</strong> short lessons, quizzes, small tasks, and reviews</li>
56+
</ul>
57+
</div>
58+
<div class="card">
59+
<h3>How I captured this</h3>
60+
<p>Section titles and numbers were transcribed from the FCC JavaScript website</p>
61+
</div>
62+
</section>
63+
2964
<!-- Outline table -->
3065
<section aria-labelledby="outline-heading" class="table-wrap">
31-
<h3 id="outline-heading">Legacy JS Curriculum Overview</h3>
66+
<h2 id="outline-heading">JavaScript Curriculum Overview (Fall ’25)</h2>
3267
<table>
33-
<caption>Legacy JS Curriculum Sections (source: freeCodeCamp.org)</caption>
68+
<caption>Sections appear in the order shown within FCC’s “JavaScript” course website.</caption>
3469
<thead>
3570
<tr>
3671
<th scope="col">Section</th>
37-
<th scope="col">Steps</th>
72+
<th scope="col">Steps / Pages</th>
3873
<th scope="col">Description (1–3 sentences)</th>
3974
</tr>
4075
</thead>
4176
<tbody>
42-
<tr>
43-
<td><strong>Basic JavaScript</strong></td>
44-
<td class="steps">113</td>
45-
<td>Fundamentals of JavaScript programming: variables, numbers, strings, arrays, objects, functions, loops, and conditionals.</td>
77+
<tr data-steps="5 quiz pages">
78+
<th scope="row">Code Editors</th>
79+
<td class="steps"><strong>5</strong> steps</td>
80+
<td class="desc">Quick checks on editor fundamentals: files vs. projects, tabs/spaces, language modes, and extensions. Ensures you can configure an editor before writing code.</td>
4681
</tr>
47-
<tr>
48-
<td><strong>ES6</strong></td>
49-
<td class="steps">29</td>
50-
<td>Modern syntax including <code>let</code>/<code>const</code>, arrow functions, template literals, destructuring, classes, and modules.</td>
82+
<tr data-steps="62">
83+
<th scope="row">Variables and Strings</th>
84+
<td class="steps"><strong>62</strong> steps</td>
85+
<td class="desc">Declaring and assigning variables; string creation, interpolation, indexing, slicing, and common string methods. Emphasis on predictable naming and immutability of strings.</td>
5186
</tr>
52-
<tr>
53-
<td><strong>Regular Expressions</strong></td>
54-
<td class="steps">33</td>
55-
<td>Pattern matching using regex, including literals, character classes, quantifiers, grouping, anchors, and lookaheads.</td>
87+
<tr data-steps="37">
88+
<th scope="row">Booleans and Numbers</th>
89+
<td class="steps"><strong>37</strong> steps</td>
90+
<td class="desc">Boolean logic, truthy/falsy, arithmetic, operator precedence, and common numeric pitfalls (rounding, NaN, Infinity). Introduces comparisons and guards.</td>
5691
</tr>
57-
<tr>
58-
<td><strong>Debugging</strong></td>
59-
<td class="steps">12</td>
60-
<td>Techniques to identify and fix syntax, runtime, and logic errors using console output and debugging tools.</td>
92+
<tr data-steps="38">
93+
<th scope="row">Functions</th>
94+
<td class="steps">38</td>
95+
<td class="desc">Function declarations vs. expressions, parameters/defaults, return values, scope/closures, and pure vs. impure functions.</td>
6196
</tr>
62-
<tr>
63-
<td><strong>Basic Data Structures</strong></td>
64-
<td class="steps">20</td>
65-
<td>Introduction to arrays and objects, understanding their differences, and practicing useful methods like <code>splice</code>, <code>slice</code>, and <code>keys</code>.</td>
97+
<tr data-steps="35">
98+
<th scope="row">Arrays</th>
99+
<td class="steps">35</td>
100+
<td class="desc">Indexed collections, iteration patterns, and the core toolbox: <code>push</code>, <code>pop</code>, <code>slice</code>, <code>splice</code>, <code>includes</code>, and mapping/filtering.</td>
66101
</tr>
67-
<tr>
68-
<td><strong>Basic Algorithm Scripting</strong></td>
69-
<td class="steps">16</td>
70-
<td>Problem-solving with small algorithmic challenges, such as string manipulation, conversions, and numeric operations.</td>
102+
<tr data-steps="28">
103+
<th scope="row">Objects</th>
104+
<td class="steps">28</td>
105+
<td class="desc">Key–value modeling, property access, mutation vs. cloning, and object utilities. Sets up thinking in records and dictionaries.</td>
71106
</tr>
72-
<tr>
73-
<td><strong>Object Oriented Programming</strong></td>
74-
<td class="steps">26</td>
75-
<td>OOP concepts in JavaScript: constructors, prototypes, inheritance, and the use of <code>this</code> to manage object state.</td>
107+
<tr data-steps="22">
108+
<th scope="row">Loops</th>
109+
<td class="steps">22</td>
110+
<td class="desc"><code>for</code>, <code>while</code>, <code>for...of</code>, and <code>for...in</code>; off-by-one and termination safety. When to prefer array methods over manual loops.</td>
76111
</tr>
77-
<tr>
78-
<td><strong>Functional Programming</strong></td>
79-
<td class="steps">24</td>
80-
<td>Functional principles like pure functions, immutability, and use of methods such as <code>map</code>, <code>filter</code>, and <code>reduce</code>.</td>
112+
<tr data-steps="31">
113+
<th scope="row">JavaScript Fundamentals Review</th>
114+
<td class="steps">31</td>
115+
<td class="desc">Overview of JavaScript fundamentals</td>
81116
</tr>
82-
<tr>
83-
<td><strong>Intermediate Algorithm Scripting</strong></td>
84-
<td class="steps">21</td>
85-
<td>More advanced problem-solving combining functional and object-oriented patterns with data structures.</td>
117+
<tr data-steps="37">
118+
<th scope="row">Higher Order Functions and Callbacks</th>
119+
<td class="steps">37</td>
120+
<td class="desc">Passing functions as values, composing behavior, and idioms like <code>map</code>/<code>filter</code>/<code>reduce</code>. Callback patterns and gotchas.</td>
86121
</tr>
87-
<tr>
88-
<td><strong>JavaScript Algorithms and Data Structures Projects</strong></td>
89-
<td class="steps">5 projects</td>
90-
<td>Capstone projects: Palindrome Checker, Roman Numeral Converter, Caesars Cipher, Telephone Number Validator, and Cash Register.</td>
122+
<tr data-steps="87">
123+
<th scope="row">DOM Manipulation and Events</th>
124+
<td class="steps">87</td>
125+
<td class="desc">Selecting and updating elements, templating basics, and wiring UI behavior with the event loop and event propagation.</td>
126+
</tr>
127+
<tr data-steps="42">
128+
<th scope="row">JavaScript and Accessibility</th>
129+
<td class="steps">42</td>
130+
<td class="desc">Progressive enhancement, focus management, ARIA relationships, keyboard interactions, and accessible patterns for dynamic UIs.</td>
131+
</tr>
132+
<tr data-steps="8">
133+
<th scope="row">Debugging</th>
134+
<td class="steps">8</td>
135+
<td class="desc">Using the console, breakpoints, stepping, and watch expressions. Techniques to isolate logic, timing, and state bugs.</td>
136+
</tr>
137+
<tr data-steps="47">
138+
<th scope="row">Basic Regex</th>
139+
<td class="steps">47</td>
140+
<td class="desc">Constructing regular expressions, character sets, quantifiers, groups, anchors, and common text-processing patterns.</td>
141+
</tr>
142+
<tr data-steps="103">
143+
<th scope="row">Form Validation</th>
144+
<td class="steps">103</td>
145+
<td class="desc">Constraints, custom validators, and sanitization. Client-side feedback patterns that complement server-side checks.</td>
146+
</tr>
147+
<tr data-steps="5">
148+
<th scope="row">Dates</th>
149+
<td class="steps">5</td>
150+
<td class="desc">Working with <code>Date</code>, parsing/formatting, time zones, and relative times. Common pitfalls and reliable comparisons.</td>
151+
</tr>
152+
<tr data-steps="55">
153+
<th scope="row">Audio and Video Events</th>
154+
<td class="steps">55</td>
155+
<td class="desc">Media element APIs, event handling, and accessibility concerns for custom controls.</td>
156+
</tr>
157+
<tr data-steps="37">
158+
<th scope="row">Maps and Sets</th>
159+
<td class="steps">37</td>
160+
<td class="desc">When to choose <code>Map</code>/<code>Set</code> over objects/arrays; performance considerations and common methods.</td>
161+
</tr>
162+
<tr data-steps="78">
163+
<th scope="row">localStorage and CRUD Operations</th>
164+
<td class="steps">78</td>
165+
<td class="desc">Persisting small datasets, JSON serialization, and building minimal create/read/update/delete flows.</td>
166+
</tr>
167+
<tr data-steps="68">
168+
<th scope="row">Classes</th>
169+
<td class="steps">68</td>
170+
<td class="desc">Class syntax, constructors, instance vs. static members, inheritance, and composition trade-offs.</td>
171+
</tr>
172+
<tr data-steps="112">
173+
<th scope="row">Recursion</th>
174+
<td class="steps">112</td>
175+
<td class="desc">Thinking inductively, base/recursive cases, stack depth, and converting between loops and recursion.</td>
176+
</tr>
177+
<tr data-steps="23">
178+
<th scope="row">Functional Programming</th>
179+
<td class="steps">23</td>
180+
<td class="desc">Immutability, referential transparency, and composing small pure functions for predictable code.</td>
181+
</tr>
182+
<tr data-steps="36">
183+
<th scope="row">Asynchronous JavaScript</th>
184+
<td class="steps">36</td>
185+
<td class="desc">Callbacks to Promises to <code>async/await</code>, the event loop, microtasks, and robust async error handling.</td>
186+
</tr>
187+
<tr data-steps="2">
188+
<th scope="row">JavaScript Review</th>
189+
<td class="steps">2</td>
190+
<td class="desc">Cumulative practice tying together the core ideas from the track in short exercises and mini-projects.</td>
91191
</tr>
92192
</tbody>
93193
</table>
94-
<p class="muted-note">All section titles and counts are based on the <a href="https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/" target="_blank" rel="noopener">freeCodeCamp JavaScript curriculum</a>.</p>
95194
</section>
96195

97196
<!-- Schedule & Commitment -->
98197
<section class="schedule" aria-labelledby="schedule-heading">
99-
<h3 id="schedule-heading">Completion Schedule (4–6 Weeks) & Statement</h3>
198+
<h2 id="schedule-heading">My 4-Week Completion Plan & Statement</h2>
100199
<div class="schedule-grid">
101200
<div class="card">
201+
<h3>General Schedule (example)</h3>
102202
<ul>
103-
<li><strong>Week 1:</strong> Basic JavaScript (start) · ES6</li>
104-
<li><strong>Week 2:</strong> Basic JavaScript (finish) · Regular Expressions · Debugging</li>
105-
<li><strong>Week 3:</strong> Basic Data Structures · Basic Algorithm Scripting</li>
106-
<li><strong>Week 4:</strong> OOP · Functional Programming</li>
107-
<li><strong>Week 5:</strong> Intermediate Algorithm Scripting</li>
108-
<li><strong>Week 6:</strong> 5 Projects (polish & submit)</li>
203+
<li><strong>Week 1:</strong> Code Editors · Variables &amp; Strings · Booleans &amp; Numbers · Functions</li>
204+
<li><strong>Week 2:</strong> Arrays · Objects · Loops · HOF &amp; Callbacks · Debugging</li>
205+
<li><strong>Week 3:</strong> DOM &amp; Events · JS &amp; Accessibility · Basic Regex · Form Validation · Dates</li>
206+
<li><strong>Week 4:</strong> Audio/Video Events · Maps &amp; Sets · localStorage/CRUD · Classes · Recursion · FP · Async JS · Review</li>
109207
</ul>
110-
<p class="small muted-note">Schedule assumes steady progress and may adjust for semester breaks. Total time ≤ 6–7 weeks per assignment guidance.</p>
208+
<p class="muted-note">Adjust around any semester breaks; target ≤ 6 weeks if you prefer a lighter pace.</p>
111209
</div>
112210
<div class="card">
113211
<p>
114212
I, <strong>John Hand</strong>, intend to complete the freeCodeCamp
115-
<em>Legacy JavaScript Algorithms and Data Structures</em> section within
116-
<strong>6 weeks</strong> according to the schedule shown. I acknowledge that this is a
117-
<strong>single assignment</strong> and I am responsible for pacing myself.
213+
<em>Full-Stack Developer – JavaScript</em> section within
214+
<strong>4–6 weeks</strong> according to the schedule above. I acknowledge this is a
215+
<strong>single assignment</strong> (not split into parts) and I’m responsible for pacing myself.
118216
</p>
119-
<p class="signature">Signed: John Hand • Date: 6 October 2025</p>
217+
<p class="signature">Signed: John Hand • Date: <span id="today"></span></p>
120218
</div>
121219
</div>
122220
</section>
123221
</main>
124222

125223
<!-- ==================== FOOTER (Dynamic Include) ==================== -->
126224
<footer data-include="components/footer.html"></footer>
225+
226+
<script>
227+
// Fill "today" automatically.
228+
document.getElementById("today").textContent =
229+
new Date().toLocaleDateString(undefined, {year:"numeric", month:"long", day:"numeric"});
230+
</script>
127231
</body>
128232
</html>

0 commit comments

Comments
 (0)