Skip to content

Commit b97cd4d

Browse files
anthonydmaysanthonydmays
authored
docs: updates slides and readme for supplemental lesson 2 (#831)
* docs: updates slides for supplemental lesson 2 Signed-off-by: Anthony D. Mays <[email protected]> * docs: adds more details around testing and configuration Signed-off-by: Anthony D. Mays <[email protected]> * docs: adds related lessons Signed-off-by: Anthony D. Mays <[email protected]> --------- Signed-off-by: Anthony D. Mays <[email protected]>
1 parent 5659fce commit b97cd4d

File tree

2 files changed

+154
-119
lines changed

2 files changed

+154
-119
lines changed

‎slides/src/Slides/Lessons/Supplemental2.js‎

Lines changed: 145 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -8,162 +8,188 @@ function Supplemental2() {
88
return html`
99
<${Lesson} title="How to Build A Website" lessonId="supplemental_2" subtitle="Supplemental 2">
1010
<section>
11-
<h2>Building and Managing Modern Websites</h2>
12-
<p>Understanding the key components and considerations</p>
11+
<p>Building a website is more than just writing HTML and CSS.</p>
1312
</section>
14-
1513
<section>
16-
<h2>Essential Website Components</h2>
14+
<p>A <em>modern website</em> requires careful planning, design, and implementation across multiple layers.</p>
15+
</section>
16+
<section>
17+
<p>Every website needs <em>essential pages</em> to be functional and legally compliant.</p>
1718
</section>
18-
1919
<section class="ml-bullet-slide">
20-
<h3>Core Pages and Features</h3>
21-
<ul>
22-
<li class="fragment">Landing Page
23-
<ul>
24-
<li>First impression</li>
25-
<li>Clear value proposition</li>
26-
<li>Call to action</li>
27-
</ul>
28-
</li>
29-
<li class="fragment">Legal Pages
30-
<ul>
31-
<li>Terms & Conditions</li>
32-
<li>Privacy Policy</li>
33-
</ul>
34-
</li>
35-
<li class="fragment">Content Features
36-
<ul>
37-
<li>Blog system</li>
38-
<li>Contact form</li>
39-
</ul>
40-
</li>
20+
<h3>Core pages every site needs</h3>
21+
<ul style=${{"font-size": ".9em"}}>
22+
<li class="fragment"><em>Landing page</em> - First impression with clear value proposition</li>
23+
<li class="fragment"><em>About page</em> - Who you are and what you do</li>
24+
<li class="fragment"><em>Contact page</em> - How users can reach you</li>
25+
<li class="fragment"><em>Legal pages</em> - Terms of service and privacy policy</li>
4126
</ul>
4227
</section>
43-
4428
<section>
45-
<h2>Essential Backend Systems</h2>
29+
<p>But a great website also needs a <em>solid backend</em> to manage content and users.</p>
4630
</section>
47-
4831
<section class="ml-bullet-slide">
49-
<h3>Content Management</h3>
50-
<ul>
51-
<li class="fragment">WYSIWYG editors</li>
52-
<li class="fragment">Media management</li>
53-
<li class="fragment">Version control</li>
54-
<li class="fragment">Content scheduling</li>
32+
<h3>Essential backend systems</h3>
33+
<ul style=${{"font-size": ".85em"}}>
34+
<li class="fragment"><em>Content management</em> - Create, edit, and publish content</li>
35+
<li class="fragment"><em>User authentication</em> - Secure login and user accounts</li>
36+
<li class="fragment"><em>Media management</em> - Store and serve images, videos, files</li>
37+
<li class="fragment"><em>Email systems</em> - Transactional emails and notifications</li>
5538
</ul>
5639
</section>
57-
40+
<section>
41+
<p>For e-commerce sites, you'll need <em>payment processing</em> and <em>inventory management</em>.</p>
42+
</section>
43+
<section>
44+
<p>Security is <em>not optional</em>—it must be built in from the start.</p>
45+
</section>
5846
<section class="ml-bullet-slide">
59-
<h3>User Systems</h3>
60-
<ul>
61-
<li class="fragment">User registration & profiles</li>
62-
<li class="fragment">Role management</li>
63-
<li class="fragment">Permission systems</li>
64-
<li class="fragment">User preferences</li>
47+
<h3>Critical security concerns</h3>
48+
<ul style=${{"font-size": ".85em"}}>
49+
<li class="fragment"><em>HTTPS/SSL</em> - Encrypt all data in transit</li>
50+
<li class="fragment"><em>Authentication</em> - Strong passwords and multi-factor auth</li>
51+
<li class="fragment"><em>Input validation</em> - Prevent SQL injection and XSS attacks</li>
52+
<li class="fragment"><em>CSRF protection</em> - Protect against cross-site request forgery</li>
6553
</ul>
6654
</section>
67-
55+
<section>
56+
<p>You also need to <em>monitor</em> your website's performance and user behavior.</p>
57+
</section>
6858
<section class="ml-bullet-slide">
69-
<h3>Integration Systems</h3>
70-
<ul>
71-
<li class="fragment">Email systems
72-
<ul>
73-
<li>Transactional emails</li>
74-
<li>Marketing campaigns</li>
75-
</ul>
76-
</li>
77-
<li class="fragment">E-commerce
78-
<ul>
79-
<li>Payment processing</li>
80-
<li>Inventory management</li>
81-
</ul>
82-
</li>
59+
<h3>Analytics and monitoring</h3>
60+
<ul style=${{"font-size": ".9em"}}>
61+
<li class="fragment"><em>User analytics</em> - Track visitor behavior and conversions</li>
62+
<li class="fragment"><em>Performance monitoring</em> - Page load times and errors</li>
63+
<li class="fragment"><em>Error tracking</em> - Catch bugs before users report them</li>
8364
</ul>
8465
</section>
85-
66+
<section>
67+
<p>Once built, your site needs a <em>home on the internet</em>.</p>
68+
</section>
8669
<section class="ml-bullet-slide">
87-
<h3>User Engagement</h3>
88-
<ul>
89-
<li class="fragment">In-app notifications
90-
<ul>
91-
<li>Real-time updates</li>
92-
<li>Push notifications</li>
93-
</ul>
94-
</li>
95-
<li class="fragment">Feedback systems
96-
<ul>
97-
<li>User surveys</li>
98-
<li>Feature requests</li>
99-
</ul>
100-
</li>
70+
<h3>Hosting and deployment</h3>
71+
<ul style=${{"font-size": ".85em"}}>
72+
<li class="fragment"><em>Domain name</em> - Register your site's address (e.g., example.com)</li>
73+
<li class="fragment"><em>Web hosting</em> - Where your files live (Vercel, Netlify, AWS)</li>
74+
<li class="fragment"><em>SSL certificate</em> - Enable HTTPS for secure connections</li>
75+
<li class="fragment"><em>Deployment pipeline</em> - Automate updates from code to production</li>
10176
</ul>
10277
</section>
103-
78+
<section>
79+
<p>Static sites are <em>simpler</em> and can be hosted for <em>free</em>.</p>
80+
</section>
81+
<section>
82+
<p>Examples: <em>GitHub Pages</em>, <em>Netlify</em>, <em>Vercel</em>.</p>
83+
</section>
84+
<section>
85+
<p>Dynamic sites with databases need <em>more infrastructure</em> and ongoing maintenance.</p>
86+
</section>
87+
<section>
88+
<p>Examples: <em>AWS</em>, <em>Google Cloud</em>, <em>DigitalOcean</em>.</p>
89+
</section>
90+
<section>
91+
<p>Professional websites run in <em>multiple environments</em> before reaching users.</p>
92+
</section>
10493
<section class="ml-bullet-slide">
105-
<h3>Analytics & Monitoring</h3>
106-
<ul>
107-
<li class="fragment">User behavior tracking</li>
108-
<li class="fragment">Performance metrics</li>
109-
<li class="fragment">Conversion tracking</li>
110-
<li class="fragment">A/B testing</li>
94+
<h3>Development environments</h3>
95+
<ul style=${{"font-size": ".85em"}}>
96+
<li class="fragment"><em>Development</em> - Your local machine where you write code</li>
97+
<li class="fragment"><em>Staging</em> - Production-like environment for testing</li>
98+
<li class="fragment"><em>Production</em> - Live site that users interact with</li>
11199
</ul>
112100
</section>
113-
114101
<section>
115-
<h2>Technical Cross-Cutting Concerns</h2>
102+
<p>Each environment has <em>different configuration</em>—database URLs, API keys, feature flags.</p>
116103
</section>
117-
118104
<section class="ml-bullet-slide">
119-
<h3>Logging & Monitoring</h3>
120-
<ul>
121-
<li class="fragment">System logs</li>
122-
<li class="fragment">Error tracking</li>
123-
<li class="fragment">Performance monitoring</li>
124-
<li class="fragment">Audit trails</li>
105+
<h3>Environment configuration</h3>
106+
<ul style=${{"font-size": ".85em"}}>
107+
<li class="fragment"><em>Environment variables</em> - Store secrets and config outside code</li>
108+
<li class="fragment"><em>.env files</em> - Local config never committed to Git</li>
109+
<li class="fragment"><em>Config management</em> - Use services like Vault or AWS Secrets Manager</li>
110+
<li class="fragment"><em>Feature flags</em> - Enable/disable features per environment</li>
125111
</ul>
126112
</section>
127-
113+
<section>
114+
<p><em>Never</em> hardcode secrets like API keys or passwords in your code.</p>
115+
</section>
116+
<section>
117+
<p>Use <em>environment-specific config</em> to point to the right databases and services.</p>
118+
</section>
119+
<section>
120+
<p>Before launching, <em>test everything</em>—broken websites lose users and revenue.</p>
121+
</section>
128122
<section class="ml-bullet-slide">
129-
<h3>Authentication & Authorization</h3>
130-
<ul>
131-
<li class="fragment">User authentication
132-
<ul>
133-
<li>Password security</li>
134-
<li>Multi-factor authentication</li>
135-
</ul>
136-
</li>
137-
<li class="fragment">Access control
138-
<ul>
139-
<li>Role-based access</li>
140-
<li>Resource permissions</li>
141-
</ul>
142-
</li>
123+
<h3>Testing strategies</h3>
124+
<ul style=${{"font-size": ".85em"}}>
125+
<li class="fragment"><em>Unit tests</em> - Test individual functions and components</li>
126+
<li class="fragment"><em>Integration tests</em> - Test how components work together</li>
127+
<li class="fragment"><em>End-to-end tests</em> - Test complete user workflows</li>
128+
<li class="fragment"><em>Manual testing</em> - Human QA to catch edge cases</li>
143129
</ul>
144130
</section>
145-
131+
<section>
132+
<p>Use tools like <em>Jest</em>, <em>Playwright</em>, or <em>Cypress</em> to automate testing.</p>
133+
</section>
134+
<section>
135+
<p><em>Performance testing</em> ensures your site handles real-world traffic.</p>
136+
</section>
146137
<section class="ml-bullet-slide">
147-
<h3>Security Concerns</h3>
148-
<ul>
149-
<li class="fragment">SSL/TLS encryption</li>
150-
<li class="fragment">CSRF protection</li>
151-
<li class="fragment">XSS prevention</li>
152-
<li class="fragment">SQL injection protection</li>
153-
<li class="fragment">Regular security audits</li>
138+
<h3>Performance testing</h3>
139+
<ul style=${{"font-size": ".9em"}}>
140+
<li class="fragment"><em>Load testing</em> - Simulate many concurrent users</li>
141+
<li class="fragment"><em>Stress testing</em> - Find breaking points</li>
142+
<li class="fragment"><em>Lighthouse audits</em> - Check speed and best practices</li>
154143
</ul>
155144
</section>
156-
145+
<section>
146+
<p>Don't forget <em>security testing</em>—scan for vulnerabilities regularly.</p>
147+
</section>
148+
<section>
149+
<p>Tools like <em>OWASP ZAP</em> and <em>Snyk</em> help find security issues automatically.</p>
150+
</section>
151+
<section>
152+
<p>Don't forget about <em>accessibility</em>—your site should work for everyone.</p>
153+
</section>
157154
<section class="ml-bullet-slide">
158-
<h3>Beaconing & Tracking</h3>
159-
<ul>
160-
<li class="fragment">User activity tracking</li>
161-
<li class="fragment">Performance beacons</li>
162-
<li class="fragment">Error reporting</li>
163-
<li class="fragment">Privacy compliance</li>
155+
<h3>Accessibility best practices</h3>
156+
<ul style=${{"font-size": ".85em"}}>
157+
<li class="fragment"><em>Semantic HTML</em> - Use proper heading and landmark tags</li>
158+
<li class="fragment"><em>Alt text</em> - Describe images for screen readers</li>
159+
<li class="fragment"><em>Keyboard navigation</em> - Site works without a mouse</li>
160+
<li class="fragment"><em>Color contrast</em> - Text is readable for all users</li>
164161
</ul>
165162
</section>
166-
163+
<section>
164+
<p>Use <em>automated accessibility testing</em> tools like Axe or Lighthouse.</p>
165+
</section>
166+
<section>
167+
<p>Plan for <em>responsive design</em>—your site must work on phones, tablets, and desktops.</p>
168+
</section>
169+
<section>
170+
<p>Use <em>CSS media queries</em> and <em>flexible layouts</em> to adapt to different screen sizes.</p>
171+
</section>
172+
<section>
173+
<p>Before launching, create a <em>site map</em> and <em>wireframes</em> to plan your structure.</p>
174+
</section>
175+
<section>
176+
<p>Tools like <em>Figma</em>, <em>Whimsical</em>, or even pen and paper help visualize your site.</p>
177+
</section>
178+
<section>
179+
<p>After launch, <em>maintenance is ongoing</em>—updates, backups, and monitoring never stop.</p>
180+
</section>
181+
<section class="ml-bullet-slide">
182+
<h3>Ongoing website maintenance</h3>
183+
<ul style=${{"font-size": ".9em"}}>
184+
<li class="fragment"><em>Regular backups</em> - Protect against data loss</li>
185+
<li class="fragment"><em>Software updates</em> - Keep dependencies secure and current</li>
186+
<li class="fragment"><em>Performance optimization</em> - Keep load times fast</li>
187+
<li class="fragment"><em>SEO improvements</em> - Help users find your site</li>
188+
</ul>
189+
</section>
190+
<section>
191+
<p>Building a website is a <em>journey</em>, not a destination—start simple and iterate.</p>
192+
</section>
167193
<${DemoSlide} />
168194
<//>`;
169195
}

‎supplemental2/README.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,15 @@ This lesson covers the essential components and considerations for building and
2929
- Security best practices
3030
- SEO optimization
3131

32+
## Related Lessons
33+
34+
- Lesson 19 - Building Applications
35+
- Lesson 20 - Intro to HTML, CSS, and JS
36+
- Lesson 24 - Integrating with Backend APIs
37+
- Lesson 25 - Intro to Databases
38+
- Supplemental 1 - Content Management Systems
39+
- Supplemental 4 - Integration Testing
40+
3241
## Additional Resources
3342

3443
### Planning Tools

0 commit comments

Comments
 (0)