🖥️

Lecture 3 Notes

Jun 13, 2024

View transcript

Lecture 3 Notes 🖥️

Introduction

  • Welcoming students back to class
  • Shout out to Prime with the raid and compliments
  • Class focus: more HTML and hands-on practice
  • Objectives: review class 2 material, introduce new concepts, hands-on practice by building websites
  • Websites to be built: BBC, Khan Academy, TechCrunch

Class Announcements

  • 30-week software engineering bootcamp schedule
  • Focus on HTML for now, move into CSS in the next class
  • Emphasize space repetition and review
  • Homework submissions: Coursera and Olly Abdum completion screenshots
  • Emphasize God, Family, Academics hierarchy
  • Community caution: Avoid scammers, 100Devs trending, always verify communication
  • House Applications and Study Groups: Information next week
  • Discord changes: New channels like New Need Help, Homework Help, and Ketchup Crew
  • Twitter Space with alumni on Friday, January 28th
  • No advertising or self-promo outside designated channels

Checking in and General Reminders

  • Reminder to check in for attendance
  • Encouragement to like, retweet, and share homework links
  • Survey for smaller study groups launching this week
  • Importance of positivity on Discord
  • Use server rules strictly, keep supportive messages

Lecture Content

Client-Server Model Recap

  • Front-end: runs on client devices (desktops, laptops, mobile phones)
  • Back-end: runs on the server (handles requests, stores data)
  • Full-stack: works on both front-end and back-end
  • HTTP: protocol enabling requests and responses
  • Golden Rule: Separation of Concerns (HTML, CSS, JavaScript)

HTML Structure Overview

  • DOCTYPE: indicates HTML version (HTML5 here)
  • Root Element: <html> tag containing all other elements
  • Head: metadata the browser needs
  • Body: content that users interact with

Key HTML Tags Recap

  • Headings (H1 - H6): ordered by importance
  • Paragraphs (P): for large blocks of text
  • Span: for short pieces of text
  • Images (img): inserted directly, alt for accessibility

New Tags and Concepts Introduced

  • Nav Tag: For navigation elements
  • Form Tag: User input, wrapped around input types (text, email, etc.)
  • Progressive Enhancement: Focus on HTML content first, then CSS styling, and lastly JavaScript

Example Website Markup Cases

  • Walkthrough of basic HTML structure for BBC, Khan Academy, and TechCrunch websites
    • BBC: header, nav, section, heading, paragraph, etc.
    • Khan Academy: header, nav, section, image, list of links
    • TechCrunch: header, nav, section, articles, list of links

Final Encouragement and Practice Homework

  • TechCrunch Exercise: Create a basic HTML structure based on the walkthrough
  • Encouragement to practice typing out HTML structures, consider semantic decisions
  • Jump into Discord channels for help and collaboration
  • Reminder of upcoming transition to CSS in the next class

Raid

  • Raid: Primogen's channel; emphasize community-building

Additional Tips

  • Use the Search Bar in Discord: for any questions before asking
  • Indentation: Use to respect parent-child relationships in HTML
  • Ownership and Pragmatism: Your way of coding and learning should feel right to you; perfection is not the initial goal
  • Progressive Enhancement: Important for users with limited internet access; build for content first, style second, interactivity last
  • Stay Connected and Engaged: Twitter, YouTube, Discord – be active, engage with resources and peers

Full transcript