Week 15: Next Steps…

To Do This Week:

Work on Final projects, finish missing projects

In Class

Self-Evaluations on Final Projects:

Are there any JavaScript errors or bugs?
Is the source code well-organized and commented? Does it include a statement detailing logic steps, URLs to essential chats, and a brief paragraph about how the site was built and acknowledging any resources or external libraries used (e.g., APIs, frameworks, ChatGPT)?
How effective is the visual hierarchy in presenting the game?
Do you provide proper instruction for the player?
Do you have a click event that can start audio?
Do you have an H1 title AND author names in the Header?

Quiz!

Use this prompt with ChatGPT to self-test your knowledge of JavaScript:

"Create a JavaScript self-assessment quiz for me.

Focus on basic syntax and fundamental concepts: variables, data types, operators, functions, loops, arrays, conditionals, object literals, and classes.

Structure:
- Ask 10 beginner-level questions first.
- Then ask 5 intermediate ES6 questions (template literals, array methods, arrow functions, classes).

Question format:
- Mix of true/false, multiple choice, and short answer.

IMPORTANT RULES:
- Present ONE question at a time.
- Do NOT provide the correct answer immediately.
- Wait for my response before continuing.
- After I answer, briefly tell me if I am correct or incorrect WITHOUT giving a full explanation yet.
- Keep the quiz moving forward question by question.

After all 15 questions:
- Show my total score (e.g., 11/15).
- Then review ONLY the questions I got wrong.
- For each incorrect answer, provide:
  - The correct answer
  - A clear, concise explanation of the concept

Tone:
- Act like a patient instructor.
- Do not rush to give answers.
- Encourage thinking before revealing anything.

Do not skip ahead or reveal future questions.
Start with Question 1."

Follow-Up Practice

Modify the prompt as needed: "Based on my current understanding and performance in the JavaScript quiz, I would like to create a detailed learning plan to enhance my web development skills. I am particularly interested in [choose: 'front-end design', 'full stack development', 'game development', 'web design' etc]. Please help me develop a structured plan that includes the following components:

Key Skills to Develop: Identify the essential skills I need to focus on for my chosen area. For front-end design, this might include CSS frameworks, JavaScript libraries like React or Vue, and design principles. For full-stack development, include both client-side technologies and server-side languages like Node.js.
Project Ideas: Suggest practical project ideas that will help me apply these skills. These projects should vary in complexity, starting with simple applications and progressing to more integrated solutions.
Learning Resources: Recommend books, online courses, and other resources that are best suited for learning the specific technologies and concepts I need.
Using ChatGPT: Advise on how I can use ChatGPT effectively as a tutor assistant. Include tips on how to formulate questions for debugging, code reviews, or learning new programming concepts.
Timeline: Propose a realistic timeline for achieving milestones in my learning journey, including when to start and complete each project.
Feedback Mechanisms: Suggest ways I can get feedback on my projects, such as through code review sessions, joining online communities, or participating in hackathons.

Please tailor this plan based on my quiz results, focusing on areas where I need the most improvement, and aligning with my career aspirations as a [choose: 'front-end designer', 'full stack developer', etc]."

What's next?

AI & Coding

Matt Welsh (PhD from UC Berkeley) was once software engineer at Apple, engineering director at Google, and a Professor of Computer Science at Harvard University (taught Mark Zuckerberg).

Web Development Essentials (2026)

The expectations for entry-level developers have shifted. AI can now generate code quickly, but that means your value comes from how you direct, evaluate, and integrate that code into real projects.

These are the core skills for internships and junior roles today. Each one builds on HTML, CSS, and JavaScript—but now includes working effectively with AI-driven workflows.

Essential Skills

A Modern Front-End Framework — Still essential, but now less about memorizing syntax and more about understanding components, state, and architecture.
React • Vue • Svelte
Modern JavaScript (ES6+) — You need to understand how JavaScript works so you can read, debug, and adapt AI-generated code.
MDN JavaScript
TypeScript Basics — Increasingly standard in teams. Helps you catch errors and makes AI-generated code more reliable and maintainable.
TypeScript Docs
Git + GitHub — Still foundational, but now also about tracking your contributions when working with AI and collaborating across teams.
GitHub Guide
Working with APIs — More important than building everything from scratch. You’ll connect services, tools, and AI systems together.
MDN Web APIs
Basic Back-End Concepts — Understanding servers, routes, and data flow so you can structure full applications, even if AI helps generate parts of it.
Express
AI-Assisted Development — Using tools like GitHub Copilot or ChatGPT to:
- scaffold code
- debug and explain errors
- explore unfamiliar concepts
The key skill is judgment: knowing what to trust, what to revise, and how to guide the system.
Debugging & Problem Solving — More important than ever. AI can produce code, but it often breaks. You need to trace issues, read errors, and fix logic.
UI / UX Awareness — As code becomes easier to generate, design, usability, and clarity become more valuable differentiators.
Accessibility (a11y) — Building inclusive, usable interfaces is still essential—and often overlooked in AI-generated code.
MDN Accessibility
Deploying & Shipping Projects — Being able to actually publish and maintain a working app matters more than ever.
Vercel • Netlify

What’s Changed (2026)

Less emphasis on writing everything from scratch
More emphasis on understanding, editing, and combining generated code
Faster workflows—but higher expectations for finished, working projects
Stronger focus on design, storytelling, and user experience
Employers care more about what you’ve built than what you’ve memorized

Front-End Development Essentials (2026)

Front-end development has shifted. AI can now generate UI code quickly, but that raises expectations: you need to understand, shape, and refine what gets produced.

This list focuses on the front end—the part users see and interact with—but also reflects how modern workflows now combine design thinking, system awareness, and AI-assisted development.

Core Front-End Skills

Semantic HTML — Clean, meaningful structure is still foundational. It supports accessibility, SEO, and helps AI-generated code stay readable and correct.
MDN HTML
CSS Layout (Flexbox + Grid) — Essential for responsive design. You should be able to control layout intentionally—not just rely on generated styles.
Flexbox Guide • Grid Guide
Modern JavaScript (ES6+) — Understanding how JavaScript works is critical for reading, debugging, and adapting AI-generated code.
MDN JavaScript
A Front-End Framework — Learn one deeply. Focus on components, state, and data flow, not just syntax.
React • Vue • Svelte
Component Thinking — Breaking interfaces into reusable parts. This is how modern apps—and AI-generated UI—are structured.
UI Styling Systems — Tools that speed up design, but require taste and judgment to avoid generic results.
Tailwind CSS • shadcn/ui
Web APIs — Using the browser as a platform: Fetch, DOM, localStorage, media, and more.
MDN Web APIs
Working with External APIs — Connecting your interface to real data and services (including AI APIs).
Debugging & Problem Solving — One of the most important skills now. AI can generate code, but you need to diagnose, trace, and fix issues.
UI / UX Awareness — As code becomes easier to generate, clarity, usability, and experience design become your edge.
Accessibility — Building interfaces that work for everyone. Often missing in generated code, so you must know how to add it.
MDN Accessibility
Performance Basics — Fast-loading interfaces: image optimization, lazy loading, efficient scripts.
web.dev Performance
Git + GitHub — Version control, collaboration, and documenting your process—especially important when working with AI-assisted code.
GitHub Guide
Deploying Front-End Apps — Shipping your work matters. Being able to publish and maintain a live site is essential.
Vercel • Netlify
AI-Assisted Development — Using tools like GitHub Copilot or ChatGPT to:
- generate components
- debug errors
- learn unfamiliar patterns
The key skill is judgment: knowing what to trust, what to revise, and how to guide the system.

What’s Changed (2026)

AI can generate UI code quickly—but not always correctly
Understanding and debugging matters more than memorizing syntax
Design, UX, and clarity are now key differentiators
Projects that actually work and are deployed matter more than exercises
Developers are increasingly orchestrators of systems, not just code writers

Front-End-Handbook - 2024/ Web Dev Map

HTML5 Game Critiques

Works:

Peer Critique Criteria

First play the game all the way through. Then play it again and take notes on the following:

Functionality
Does the game work as intended? Note any bugs, broken controls, missing screens, or moments where the game stops responding.
Clarity of Play
Is it clear what the player is supposed to do? Are the goals, controls, rules, and win/lose conditions easy to understand?
Difficulty / Ease for Target Age
Do the challenges feel appropriate for the intended audience? Is the game too easy, too difficult, or well-balanced?
Game Feel and Responsiveness
Do movement, timing, collisions, and controls feel smooth and responsive? Does the game feel satisfying to play?
Design and Presentation
Does the game have a clear visual style? Are layout, color, typography, menus, and screens readable and consistent?
Integration of Media
Are images, animation, sound, and music used effectively? Do they support the gameplay experience?
Story, Theme, or Concept
Is there a clear idea, world, or concept? Does the game feel intentional, even if simple?
Player Feedback
Does the game clearly communicate what is happening (score, lives, success/failure, progress)? Are feedback cues effective?
Replay Value
Does the game make you want to play again? Why or why not?
Team Integration
Does the project feel cohesive? Do code, design, media, and gameplay work together as one experience?
Revision Priorities
What are the 2–3 most important changes the group should make before the final version?

Course Evaluations

Discussion: Generative AI & Coding
Remember to complete Course Evaluation forms...