OIM3690 - Web Technologies

contain

Agenda

  • Introducing yourself
  • Introduction to the course
    • Syllaubs
    • Term Project (mentioned)
    • 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 2024 and winter break? 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):
    • Tuesday: 11:30AM - 12:30PM
    • Thursday: 2:00PM - 3:00PM
    • Online via Webex: by appointment
    • Read: What are office hours?
  • I will send an email after each class, including:
    • Summary of the class
    • Exercise/Homework Due
    • Recommendations

A Quick Survey (on Slido.com #3690)

  1. What programming languages have you used or heard of?
  2. What text editors or IDEs have you used for coding?
  3. Have you used Git/GitHub before?
  4. Have you created any websites before?
  5. How often do you use ChatGPT (or other GenAI tools) for learning purposes?
  6. What is your main goal in learning Web Tech?
  7. What other technologies are you interested in learning?

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?

  • How Web Works
  • HTML5
  • Semantic HTML
  • CSS Essentials
  • CSS Layout
  • Flexbox & Grid
  • Responsive Design
  • Using GitHub
  • Deployment
  • Bootstrap / Tailwind CSS
  • JavaScript Basics
  • Modern JavaScript Syntax
  • DOM Manipulation
  • Image Processing
  • Web APIs
  • JSON data
  • Geocoding & Maps
  • Web Game Development
  • Local Storage
  • ...

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

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

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?

global styles