Computer Science Lessons

A comprehensive library of computer science lessons - including basic and advanced topics - meant as a learning and teaching resource hub for students and teachers, authored by Henry F. Bruckman Vargas, Ph.D.

Table of Contents

Introduction to Computer Science

• Importance, Purpose, Use, and Value of Computing and Informatics
• Computer Scientist Profile
• Problem Solving and Algorithmic Thinking
• Human-Computer Interaction (HCI) and User Interface/Experience (UI/UX)
• Security (Computer/Network/System)
• Architecture (Computer/Network/System)
• Databases and Information Systems
• Operating Systems and Virtualization
• Computer Graphics and Visualization
• Artificial Intelligence
• Parallel, Distributed, and Cloud Computing
• Software Engineering
• Emergent Topics and Technologies
• Issues, Concerns, and Considerations (Societal, Ethical, Moral, Legal, Professional)

Programming I

Setting Up and Getting Started

• Setting Up the Development Environment
• Windows OS
• Visual Studio Code (VS Code)
• Git/GitHub
• C# and .Net in VS Code
• Java in VS Code
• Python in VS Code
• Node.JS in VS Code
• Writing, Building, and Running Your First Program
• Understanding Source Code (Syntax, Case-Sensitivity)
• Understanding Compilation (Building with Scripts, Compile-Time Errors)
• Understanding Execution (Debugging with Breakpoints and Console Outputs, Runtime Errors)
• Understanding IDE UI/UX (Shortcuts and Feedback)

Data Types I

• Primitive (Built-In) and Wrappers (Object-Based)
• Variables (var, let, int) and Constants (const, final, readonly)
• Literals and Escaped Characters ('\n', '\t', '\u13567')

Operators I

• Unary (+, -, ++, --)
• Arithmetic (+, -, *, /, %, ^, **)
• Assignment (=, +=, -=, *=, /=)
• Relational (==, !=, <, <=, >, >=)
• Logical or Boolean (!, ||, &&)
• Ternary (? :)

Expressions I

• Declarations and Initializations (Naming Hard Rules and Conventions)
• Operator Precedence and Parenthesis
• Type Conversion (Implicit / Explicit, Truncation, Promotion, Casting, Parsing)
• Overflow, Precision Loss, Division By Zero
• Strings and Characters
• Concatenation
• Multi-Line or Verbatim (@, """, \\)
• Interpolated ($, `, f)

Control Structures I

• Conditional Statements (if, else if, else, switch)
• Short-Circuiting (||, &&)
• Loops (while, do-while, for, foreach, for...in, for...of)

Data Structures I

• Arrays
• Linear Search

Functions I

• Invocation or Call
• Arguments
• Return Type

Input/Output I

• Console I/O
• String Parsing, Formatting and Input Validation
• Utilities (Is???, To???, Contains, IndexOf, Substring, Slice, Split, Join)

Documentation I

• Line or Inline Comments (// or #)
• Block Comments (/* ... */)
• Consistent Formatting (Indentation, Long-Lines Breaking)

Programming II

Structured Programming

• Fundamentals Concepts
• Spaghetti Code (i.e., avoid gotos and other unstructured jumps)
• Early Exit (i.e., handle edge cases upfront; reduces nesting and improves readability)
• Modularization and Code Reuse
• Defensive / Offensive Programming

Data Types II

• Nullable (?)

Operators II

• Optional Chaining (?)
• Null-Conditional (?.)
• Null-Coalescing (??)
• Nullish Assignment (??=)
• Null-Forgiving (!)
• Not-Null Assertion (!!)
• Index-From-End (^)

Expressions II

• Lambda/Arrow/Anonymous Functions (=> or ->)
• Data Flow Pipelines (Filter-Map-Reduce, Pipe-and-Filter, Streams)
• Negative Indices and Ranges ([-1], [1..4])

Control Structures II

• Nested Loops and Loop Control (break, continue, labels, return)
• Exception Handling (try-catch-finally)
• Resource Management (using, Try-With-Resources)

Data Structures II

• Multi-Dimensional Arrays (Matrices)
• Enums, Structs, Records, and Tuples
• Collections (Lists, Maps, Sets)

Functions II

• Custom Definitions
• Parameters Passing (By Copy, By Reference)
• Variable Scope/Lifetime and Hiding/Masking/Shadowing

Input/Output II

• File I/O
• Absolute vs. Relative Paths

Documentation II

• Doc Comments (/** ... */)
• Code Readability and Style Guides
• Formatters and Linters

Programming III

Object-Oriented Programming (OOP)

• Terminology (Fields, Methods, Class/Instance Members, State, Inner Classes)
• Fundamental Concepts (Encapsulation, Inheritance, Abstraction, Polymorphism)
• Structure and Organization (Properties, Constructors, Destructors, Getters, Setters)
• Common Behaviors (ToString, Equals, GetHashCode)
• Design Patterns (Factory, Singleton, Observer)

Data Types III

• Access Modifiers (public, private, protected, default, internal, const, final, readonly, sealed, static)
• Non-Access Modifiers (abstract, virtual, override, volatile, transient, synchronized, native)
• Type Systems: Static vs. Dynamic, Strong vs. Weak

Operators III

• Type Checks and Casting (instanceof, is, is not, as)
• Bit-Wise (~, |, &, ^, <<, >>, >>>, |=, &=, ^=)
• Overloading

Expressions III

• Generic and Templates
• Regular Expressions (Regex)
• Truthy / Falsy
• Short-Circuiting Value Evaluation (||, &&)
• Boolean Coersion / Double Negation / Bang (!!)
• Pipelining (|, &, |>)

Control Structures III

• Asynchronous Control (Promises)
• async/await
• then-catch-finally

Data Structures III

• Classes, Abstract Classes, and Interfaces
• Abstract Collections (Lists, Stacks, Queues, Deques, Maps, Sets)
• Memory Management and Garbage Collection (new, finalize, delete)

Functions III

• Variadic or Variable-Length Parameters (params, ..., *args)
• (Signature) Overloading and Default Values
• Named Arguments
• (Definition) Overriding
• Recursion
• Callbacks, Higher-Order Functions, and Closures

Input/Output III

• Network I/O
• Common Communication Protocols

Documentation III

• Annotations and Metadata (@)
• Version Tracking (Git/GitHub History/Log)
• Git Commit Message Conventions

Front-End Web Development

• Introduction
• Importance, Purpose, Use, and Value of Front-End Web Development
• Front-End Web Developer Profile
• User Interface / User Experience (UX/UI)
• Accessibility
• Responsive Web
• Absolute vs. Relative Paths
• Hyper Text Markup Language (HTML)
• Terminology (Element, Empty Element, Attribute, Tags, Container)
• Syntax and Structure
• Comments
• Formatting and Style Guidelines
• Global Attributes (id, class, style, lang, title, data-*)
• Event Hooks
• Document Structure (!DOCTYPE, html, head, body)
• Head Elements (title, meta, link, style, script, base)
• Body Elements (h1-h6, p, a, img, ul, ol, li, table, tr, td)
• Form Elements (form, label, input, select, option, button)
• Inline vs. Block Elements
• Generic vs. Semantic vs. Style Elements (div vs section, em vs i)
• Entities, Symbols, and Emojis
• Cascade Style Sheets (CSS)
• Terminology (Declaration, Selector, Property)
• Syntax and Structure
• Comments
• Formatting and Style Guidelines
• Embedding in HTML (Link Element, Style Element, Style Attribute)
• Selectors (Universal, Element, Hierarchy, Id, Class, Pseudo-Element, Pseudo-Class, Attribute)
• Specificity (Order Stack, Point System, Style Attribute, !important Modifier)
• Absolute vs. Relative Units
• Color Values
• Generic Font Families
• Box Model (Content, Padding, Border, Margin/Outline)
• Layouts (Grid, Flexbox)
• Properties
• Alignment-Related (position, display, top, right, bottom, left, margin)
• Box-Related (box-sizing, box-shadow, width, height, background, padding, border, margin, outline)
• Text-Related (font, text-*, caret, cursor)
• Image-Related (float, filter)
• List-Related (list-style-*)
• Table-Related (border-collapse, vertical-align)
• Render-Related (opacity, visibility, overflow)
• Transitions and Animations (transition, animation)
• Transform (transform, translate, scale, rotate, skew)
• Miscellaneous (clear, content, columns, resize, pointer-events)
• Custom Properties (or Variables)
• Dynamic Theming
• JavaScript (JS)
• Review of General Programming Concepts
• Execution Model
• Event Loop and Call Stack
• Single-Threaded Yet Asynchronous
• Hoisting
• Garbage Collection
• Strict Mode
• Overview of Exclusive Features
• Data Types (Number, BigInt, NaN, String, Boolean, Symbol, Array, Object, Function, null, undefined)
• Type Systems: Static vs. Dynamic, Strong vs. Weak
• Operators
• Loose vs. Strict Equality (== vs. ===)
• Type and Instance (typeof, instanceof)
• Rest / Spread (...)
• Expressions
• Dynamic Property Access (obj.propName or obj[propName])
• Dynamic Code Execution (eval())
• Truthy / Falsy
• Short-Circuiting Value Evaluation (||, &&)
• Boolean Coersion / Double Negation / Bang (!!)
• Destructuring Assignment
• Object Unpacking (const {name, email} = contact;)
• Array Unpacking (const [first, second] = numbers;)
• Spread Syntax
• Object Copy (const c = {...contact, email: newEmail};)
• Array Copy (const d = [...numbers, 5, 21];)
• Rest Parameters (const [first, ...rest] = numbers;)
• Short-Circuit Evaluation (a && b, a || b)
• Immediately Invoked Function ((function() { ... })();)
• Control Structures
• Loops (for...in, for...of)
• Asynchronous (Promises + Calbacks, async/await, then-catch-finally)
• Data Structures
• Maps and Sets
• Functions
• First-Class Citizens
• Higher-Order Functions and Closures
• 'this' Binding Rules
• Input/Output
• Console Err / Output
• Prompt, Confirm, and Alert Dialog Boxes
• Documentation
• JSDoc Format (/** ... */)
• Environment APIs
• Browser Object Model (BOM) (Window, Navigator, Location, History, Screen)
• Document Object Model (DOM) (Tree, Event, Observers)
• CSS Object Model (CSSOM)
• Storage and Data Persistence (Local, Session, Cache, IndexedDB, Cookies)
• Networking and Communication (Fetch, XMLHttpRequest, WebSocket, EventSource, WebRTC)
• Location and Sensors (Geolocation, Orientation, Motion, Light, Proximity)
• Files, Media, and Streams (Blob, Streams, Recorder)
• Graphics and Visual (WebGL, SVG, Canvas, Web Animations, WebGPU)
• Performance, Timing, and Workers
• Security and Identity (Credential, Auth, Credential, CSP, Crypto, Clipboard, Payment)
• User Interface (Gestures, Speech Recognition / Synthesis, Notifications, Vibration)
• Hardware and Devices (USB, Bluetooth, Serial, HID, Gamepad, Battery, Fullscreen)

Back-End Web Development

Review of Front-End Web Development

Back-End Architecture

• Introduction
• Importance, Purpose, Use, and Value of Back-End Web Development
• Back-End Web Developer Profile
• System Quality Attributes
• Folder Structure
• Organized by Layers
• Organized by Features
• Choosing Between Them
• Architectural Models
• Client-Server
• Peer-to-Peer (P2P)
• N-Tier
• Distributed
• Architectural Components
• Infrastructure (Load Balancers, Nodes, Containers, Web Servers)
• Application Logic (Routers, Middleware, Controllers, Services, Repositories, Providers)
• Bringing It All Together: Example Scenario
• Architectural Styles, Approaches, and Patterns
• Application Program Interface (API) (REST, GraphQL, gRPC)
• Server-Side Rendered (SSR)
• Client-Side Rendered (CSR)
• Single-Page Application (SPA)
• Progressive Web Application (PWA)

Full-Stack Web Development

Review of Front-End and Back-End Web Development

Rendering Approaches and Patterns

• Server-Side (SSR)
• Client-Side (CSR)
• Hybrid
• Isomorphic
• Progressive Hydration

Application Architectures

• Server-Centric
• Multi-Page Application (MPA)
• Static-Site Generation (SSG)
• Client-Centric
• Single-Page Application (SPA)
• Progressive Web Application (PWA)
• Hybrid
• Isomorphic / Universal Application (SSR+CSR)
• Micro-Frontend: (frontend microapps instead of backend microservices)
• Jamstack (JavaScript, APIs, and Markup)
• Islands
• Distributed or Emerging
• Edge-Rendered
• Serverless
• Reactive / Streaming

Integration and Deployment

• DevOps and CI/CD Fundamentals
• Cloud Deployment and Containerization Basics

This work is licensed under a Creative Commons Attribution 4.0 International License (CC BY 4.0).