OIM3690 - Web Technologies

2025 Spring

Session 26 (4/29)

contain

Today's Agenda

  • Welcome/News/Announcements
  • Student Experience Questionnaire
  • Responsive Web Design
  • Course Overview
    • What we have learned
    • What/How to learn next
    • Non/Less-programming tech job

Welcome/News/Announcements

  • Assignment 3: Due 5/3 (same deadline as project)
  • Project Final
    • Due Saturday 5/03
    • I am available to meet to discuss your project this week.
  • Grading
    • Exercises: Total 18; one excuse is allowed
    • Quizzes: Each is worth 2 exercises
    • Participation: 5 points (in class, office hours, Slack, etc.)

Student Experience Questionnaire (10 mins)

Responsive Web Design

Progress in 13 Weeks

  • 13 weeks ago:
    • You had little or no knowledge about programming
    • You had no experience in HTML/CSS/JavaScript
    • You had not used VS Code or GitHub.
    • You had never created or managed a website
    • You had never processed data from API.
    • You had never thought about using new GenAI tools beyond ChatGPT.
    • You had never collaborated with others on a real programming project.
    • You had never experienced the joy and challenges of problem-solving and creative development.
  • Today:
    • Well, let us take a look...

What we have learned in this semester...

  • HTML: to create the structure and content of web pages
  • CSS: to style and format web pages.
  • JavaScript: to add interactivity and functionality
  • Other Tools and Concepts:
    • VS Code
    • GitHub
    • Responsive Design
    • Domain and Hosting
    • Debugging
    • ...

What ultimately matters in this course is not so much where you end up relative to your classmates, but where you end up relative to yourself when you begin.

Recommendations

Learning Building with AI

  • Adopt Popular/Mainstream Languages and Frameworks
    • Examples: React/Vue for front-end, Flask/FastAPI for back-end.
    • Benefits: Higher-quality code, rich resources for troubleshooting.
  • Run First, Optimize Later
    • Start small and focus on creating a running program (MVP).
    • Immediate feedback -> confidence. Easier for debugging.
  • Learn by Doing
    • Generate runnable code, then ask AI to explain unclear parts.
    • AI can provide detailed explanations and comments/documentation.
  • Handle Errors Effectively
    • Clearly describe the issue (steps, expected outcome, error message).
    • Roll back to the last working state if needed.

Example: Creating a Chrome Extension

  • Define Requirements
    • List desired functionalities for the extension.
    • Use AI for suggestions if needed.
  • Select Tech Stack
    • Standard tools: JavaScript, HTML, CSS.
    • Ask AI for recommendations on structuring your project.
  • Set Up a Basic Extension
    • Ask AI to generate a simple working example.
    • Test the extension in Chrome to ensure it runs correctly.
  • Iterate with Small Steps
    • Add one feature at a time (e.g., UI enhancements, API integration).
    • Regularly test and debug each step.

Non/Less-Programming Tech Jobs

  • Business/Data/BI Analyst
    • Excel, SQL, Python
    • Domain knowledge
  • Cybersecurity Expert
  • UI/UX Designer: Figma, etc.
  • IT Consultant: project management, communication, etc.
  • Digital Marketer
  • Technical Recruiter
  • Product Manager