OIM3690 - Web Technologies

Agenda

• Introducing yourself
• Introduction to the course
  • Syllaubs
  • Get familiar with software
• How to learn programming?
• How does the web work?

Welcome! How are you doing?

Please introduce yourself, including:

• Who are you? Where did you come from?
• Which year are you in? What's your best moment at Babson so far?
• What is your concentration? Are you going to rule the world with that?
• Why did you decide to take this class?
• Do you have any programming experience?
• How was your summer? Did you do anything exciting or just binge on Netflix?
• How can we remember you? Tell a fun fact or a boring fact about yourself.

About Me

• Instructor: Zhi Li (李直)
• Email: zli@babson.edu
• Office Hours (Babson Hall 216D):
  • Wednesday: 1PM - 2PM, Babson Hall 216D
  • Thursday: 4:45PM - 5:30PM, Babson Hall 216D
  • Online via Webex: by appointment
  • Read: What are office hours?
• I will send an email after each class, including:
  • Summary of the class
  • Important Dues
  • Recommendations
    

What is this course about?

Well, let me first tell you that this course is NOT about...

• Web3
• UI Design Tools (Figma/Sketch)
• Back-end / Fullstack / App Development
• Web Analytics / SEO
• Computer Science Theories
• Data Structures and Algorithms
• AI / Machine Learning

Seriously, what is this course about?

What really matters are ...

• Getting comfortable with the basics of programming and web technologies
• Building websites from the initial design phase to deployment
• Learning to think like a front-end engineer and a computer scientist
• Figuring out how to learn programming and how to get "unstuck"
• Collaborating with engineers and other team members by using the right tools and communicating clearly
• Equipping you with tools and mindset to succeed even after this course is over
• Leveraging GenAI effectively for ideation, debugging, and enhancing productivity

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.

Syllabus

• Course Description and Learning Objectives
• Prerequisites
• Software (next slide)
• Exercises / Assignments / Exam
• Final Project (will be introduced in detail later)
• Grading Scheme
• Course Policies

Software

• Web Browser: Google Chrome or Firefox
• Visual Studio Code (VSCode), and extensions
  • Live Server
  • Prettier
  • vscode-icons
• GitHub Desktop
  • Sign up for GitHub (using Babson email)
  • Sign up for GitHub Student Developer Pack

How to Learn Programming

Programming is hard.

DO NOT take the “couch potato” approach

Practice!

Practice!

Practice!

DO NOT copy and paste!

Ask Questions

Ask Questions the Smart Way

• The XY Problem
• How do I ask a good question
• How To Ask Questions The Smart Way
• Getting Answers

DO NOT panic!

• Almost everyone hits a rough patch in the course at some point.
• Don't let it discourage you.
• It's normal!

What if I got "stuck"

• Take a break
• Break the problem down
• Keep trying
• Debug
• Ask for help

How to Cheat without Being Caught

• Cheating Tips (but seriously, don't):
  • Submitting code with the same md5sum as your friend's? Congratulations, you've both just failed together!
  • Sharing your code for "inspiration"? Now you're both in trouble.
  • Changing comments or adding spaces? Tokenization says otherwise.
  • Renaming variables or copying parts of code? Still detectable.
  • Copying code from internet or GenAI? If you don't understand it, I will know.
• Pro Tip:
  • If you still decide to cheat, the only way to cheat safely is to actually do the work and learn something!

Code Sharing Policy

• Forming study groups is encouraged.
• However, sharing code with anyone is prohibited.
• Any violation of this policy will be addressed under the school's academic misconduct rules and may result in course failure

How does the Web work?

• Reading: How the Web works
• Watching: How does the INTERNET work?