Software Engineering & Full Stack Web Development

Intro

• Welcome, emphasis on community
• Engagement techniques including Q&A
• Icebreaker question: Would you rather win a bronze medal or be a recurring actor in a Netflix show?

Overview

• Focus on becoming software engineers with a specialization in full stack web development
• Fundamental topics: basics of the internet, HTML, client-server model
• Aim to make everyone ready to code by end of the class
• Emphasis on organized learning, spaced repetition

Community & Engagement

• Importance of community for success
• Spaced repetition and active recall techniques
• Office hours for Q&A to address blocks
• Use of Discord for class materials, questions, and updates

Learning Strategy

• Emphasis on creating and sticking to a study plan
• Active recall over passive reading
• Explanation of concepts like client-server model and role of different web developers
• Handling frustrations and managing time effectively

First Exercise

• Provided a zip file containing class materials (HTML file about brownies)
• Instructions to open and edit in VS Code or browser-based editors like Glitch or Replit
• First practical exercise: semantic markup of the provided HTML content
  • Tags used: h1, h2, p, span, ul, li, ol, a, img

Recap of Key HTML Concepts

• HTML tags and their semantic importance
• Tags for headings (h1 to h6), text (p, span), lists (ul, ol, li)
• Anchor tags (a) for links with href attribute
• Use of attributes (src, alt) for images (img) and their importance in accessibility and SEO
• Emphasis on separate concerns: HTML for structure, CSS for styling, JS for interaction

Lab Exercise

• Practical task: marking up a provided HTML file semantically
• Importance of using semantically appropriate tags
• Handling the unknown: skipping over unknowns, using resources like MDN
• Exploring methods to streamline coding, e.g., creating multiple cursors in VS Code

Conclusion

• Announcement of homework due next week
• Emphasis on community support via Discord
• Reminder for consistency, active recall, and spaced repetition
• Ending with a class raid to support other streams

Resources

• MDN (Mozilla Developer Network) for documentation
• Discord for class materials and help
• VS Code for code editing
• Glitch or Replit for browser-based coding if VS Code isn't an option