Jan 20: Introduction, DevTools

Learning Objectives

After today’s class, you should be able to:

• Describe the role of HTML, CSS, and JavaScript in web application development.
• Explain the following HTML tags: h1, p, br, b, i, a, img, ol, ul, and li.
• Write a simple HTML page by hand in a text editor without any IDE or AI support.

Lesson Outline

Course Website [15 min]

• Name tents; get to know other students at your table
• About the course, instructor, syllabus, calendar, etc.
• Question: What is one thing you are excited about?

Mini Lecture [20 min]

• Chapter 3: Slides 1–20
• Chapter 8: Slides 1–12

Getting Started [10 min]

• Create CS343 folder and open in VS Code
• Create subfolders: labs, notes, preps, slides
• Install the Live Server extension (or Live Preview)
• Demo of Chrome DevTools and Firefox DevTools

Mini Activity [30 min]

• Read and Write
  • Note: You don’t have submit anything.
  • You can ignore the very last instruction.

Before Thursday

1. Read the syllabus, buy the textbook.
2. Complete the Pre-Survey on Canvas.
3. Submit both Prep 1 assignments on Gradescope. ← Due Wed at 11:59pm