Week 15: Next Steps…
To Do This Week:
Work on Final projects, finish missing projectsIn Class
HTML5 Game ProjectSelf-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?
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 (2025–2026)
These are the core skills for internships and junior web development roles in the next few years. Each one is learnable, approachable, and builds on the basics of HTML, CSS, and JavaScript you already know.
Essential Skills
-
A Modern Front-End Framework — Learn to build interactive sites using reusable components.
React • Vue • Svelte -
Modern JavaScript (ES6+) — Use the current JS features that developers rely on every day: modules, classes, and async code.
MDN JavaScript -
TypeScript Basics — A typed version of JavaScript that helps catch errors early and is used by many teams.
TypeScript Docs -
Git + GitHub — Version control and collaboration: how every modern team writes and reviews code.
GitHub Guide -
Node + Express (Basic Back-End) — Enough server-side knowledge to create APIs and connect a database.
Express -
AI-Assisted Coding — Using tools like Copilot or ChatGPT to scaffold code, debug issues, and learn faster—without relying on them to think for you.
GitHub Copilot -
Accessibility (a11y) — Building sites usable by everyone: labels, keyboard nav, and clear structure.
MDN Accessibility
Front-End Development Essentials (2025–2026)
These are the core skills for students who want to build modern user interfaces, interactive websites, and polished digital experiences. This list focuses only on the front end—the part users see and interact with.
Core Front-End Skills
-
Semantic HTML — Writing clean, meaningful structure so browsers, screen readers, and search tools understand your site.
MDN HTML -
CSS Layout (Flexbox + Grid) — The modern way to build responsive, multi-column layouts that adapt to phones and desktops.
Flexbox Guide • Grid Guide -
Modern JavaScript (ES6+) — The tools that power interactive features: modules, classes, and async code.
MDN JavaScript -
A Front-End Framework — Learn one deeply; these tools power almost every modern web app.
React • Vue • Svelte -
UI Styling Systems — Tools that help you build polished designs quickly.
Tailwind CSS • shadcn/ui -
Web APIs — Using browser features like Fetch, localStorage, and the DOM to make pages interactive.
MDN Web APIs -
Accessibility — Making your site usable by everyone with clear structure, labels, and keyboard navigation.
MDN Accessibility -
Performance Basics — Loading pages fast: optimizing images, minimizing scripts, and using modern tools.
web.dev Performance -
Git + GitHub — How every modern developer tracks changes and collaborates on code.
GitHub Guide -
AI-Assisted Development — Using Copilot or ChatGPT to help write components, troubleshoot errors, and improve your understanding of code.
GitHub Copilot
Quiz!
Use this prompt with ChatGPT to self-test your knowledge of JavaScript:
“Please create a quiz to assess my understanding of JavaScript, focusing on basic syntax and fundamental concepts, including variables, data types, operators, functions, loops, arrays, conditionals, object literals and classes. Start with 10 questions covering these basic elements, using a mix of true/false, multiple choice, and short answer formats. For the last 5 questions, introduce intermediate-level concepts related to ES6, such as template literals, arrow functions, and let/const. Each question should be presented one at a time, followed by the correct answer and a brief explanation to help me understand the logic and syntax. After completing the quiz, provide a qualitative evaluation of my knowledge rather than a numerical grade, and suggest resources, strategies, or topics for further improvement in both basic JavaScript and ES6 features.”
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].”
Evaluations
- Discussion: Generative AI & Coding
- Evaluation forms