Web Development Concepts for Everyone

Explore the four-layer full stack—front end, client, server, and database—through a practical to do app, showing how data persists, tasks are managed, and user interactions are handled.

Explore how the front end creates the visual interface with HTML and CSS. See how structure and style work together in a sample to-do app.

Explore the client layer as the logic that makes a to-do web app interactive, handling user actions and data flow between the user and the server with JavaScript.

Servers are the backbone of application communication, handling data transactions between the user facing web app and the database, acting as the intermediary for client requests via endpoints.

Explore how the database layer stores and persists web app data, using Postgres and Pgadmin, to keep information across sessions and after the app closes.

Explore version control as a system that tracks changes, enables safe experimentation, and supports collaboration through branches, deployment, and popular tools like Git and GitHub.

Learn how git powers version control for collaboration, from init and add to commit, and manage snapshots with log, status, and branching alongside GitHub, Bitbucket, and GitLab.

Explore version control with git and branching to create isolated timelines for features. Switch between master and feature branches, commit changes, and view history to compare progress.

Use Git merge to integrate a feature branch into master, creating a merge commit that preserves history and may require conflict resolution.

GitHub, a cloud platform built around git, connects code with community by storing, sharing, and collaborating on projects, including actions and pull requests, after its 2018 acquisition by Microsoft.

Explore popular git cloud platforms beyond GitHub, including Bitbucket with Jira integration and GitLab with CI/CD pipelines, and note AWS CodeCommit is being sunsetted.

Explore how runtime environments shape where code runs, from Chrome and Node.js to Java, Swift, Python, and Unity, and learn how environments guide language choices.

Explore core programming types and how languages like TypeScript handle strings, numbers, and booleans, using variables, explicit typing, and basic operations to illustrate type behavior.

Compare strong vs weak typing, showing how JavaScript changes a variable's type on the fly, versus TypeScript's fixed types that raise errors when reassigned.

Explore dynamic versus static programming, comparing runtime errors in dynamic languages to compile-time errors in static ones, and see how TypeScript acts as a superset to JavaScript.

Explore supersets like TypeScript, which extend JavaScript with optional static typing and configurable features, then compile to JavaScript for browser execution.

Explore how markup languages structure content with annotations, using HTML and XML as examples; learn they are not programming languages, and how browsers render HTML with CSS and JavaScript.

Understand front end libraries and code libraries, including unopinionated reusable code, and compare how jQuery speeds up development versus vanilla JavaScript, with tradeoffs like page load and bloat.

learn how bootstrap, a popular css framework, speeds front end styling with pre styled components and responsive utilities using classes, and compare it with tailwind for rapid ui development.

Explore how chart.js simplifies creating charts for web apps with styling, layout, and data positioning. See a pizza sales dashboard that shows quick, visually appealing charts with minimal code.

Explore code frameworks as structured, opinionated platforms with a defined lifecycle that guide front end or back end development, contrasting with libraries like React and introducing Next.js.

Explore React as a JavaScript library for dynamic user interfaces. Focus on components, reuse, and a lifecycle that resembles a framework but remains library-based.

Next.js offers a front-end framework built on top of React that speeds development with server side rendering, static site generation, API routes, and file-based routing for scalable web apps.

Explore client-server communications by reviewing the full stack, front end interactions, and CRUD tasks in a to-do app, while connecting HTML, CSS, JavaScript to the server and database.

Explore the HTTP protocol as the universal, client-initiated standard for client-server communication, outlining the request-response model, front-end and back-end roles, and standard HTTP methods.

Explore how http methods like get, post, put, and delete drive client–server interactions, api requests, and endpoints in real-world to-do list examples.

Explore how APIs enable front end and back end communication, detailing HTTP methods such as get, post, put, and delete, and the API contract that defines client-server interactions.

Explore Rest APIs as resource based web interactions using http methods like get, post, put, and delete to manage data through endpoints and json responses.

Learn how WebSockets provide real-time two-way communication between client and server, supporting chat, live updates, and push notifications, demonstrated with Socket.io.

In this lecture, learn how authentication verifies user identity on a web app, covering login with email and password, password hashing with bcrypt, salting, and token-based sessions, and optional mfa.

Define authorization and its role-based access control to grant basic versus advanced data, and show how the server enforces permissions to shape what a user can see.

Explore how multi-factor authentication adds extra layers of security by requiring at least two verification factors, such as password plus email one-time password, token, or biometric verification.

Explore OAuth and OpenID Connect to enable sign in with Google and other third-party accounts. Verify user identity and secure logins with token-based sessions.

Examine back-end frameworks, compare micro frameworks and full-featured options, and learn to set up get, post, put, and delete routes powering client-server communication, authentication, and Rest APIs.

Explore micro frameworks, lightweight structures that provide just enough functionality for databases, security, and routing with Express, including REST endpoints and CRUD operations like get, post, put, delete.

Learn how modules and packages extend micro frameworks with reusable code for databases, security, and APIs; manage dependencies with npm and tailor express projects from scratch.

Explore how fully featured web frameworks like Spring streamline development by handling data, authentication, security, and server-side templating, with rest endpoints for get, post, put, delete.

Learn relational databases with SQL, using tables of rows and columns, and joins to connect dog and mood tables using IDs, and run queries to organize and retrieve data.

Explore a relational database example with Postgres, showing how people and hobbies are linked by a junction table using joins, queries, and backend code, demonstrated in PgAdmin.

Discover NoSQL databases and flexible document-based models with collections and documents, enabling JSON-like objects for unstructured data and scalable querying alongside examples with MongoDB.

Explore how MongoDB, a flexible NoSQL document database, stores JSON-like documents with optional schemas, enabling dynamic, scalable data storage and easy CRUD via a REST API.

Discover how in-memory databases store data in RAM for fast access, note persistence options, and enable real-time caching and session storage with key-value patterns like chats and one-time passwords.

Explore how in-memory databases store data in ram for speed, with Valky as a Redis fork, using ttl to expire otps and enable fast, server-agnostic access.

Discover how code editors help developers write and edit web code, compare Visual Studio Code with Sublime Text, Adam, and JetBrains Fleet, and learn about future IDEs and Copilot integration.

Explore Visual Studio Code as a lightweight yet powerful code editor. Get syntax highlighting, debugging, built-in Git tools, extensions marketplace, an integrated terminal, and GitHub Copilot integration.

Explore integrated development environments, where IDEs combine a code editor, tools to build and run programs, and a debugger to fix errors, with language-focused options like Visual Studio, Xcode, PyCharm, WebStorm, Rubymine, and IntelliJ IDEA.

Explore IntelliJ IDEA CE, a free Java-focused IDE with smart code completion, built-in Maven and Gradle, and JDK management, plus terminal access.

Explore the console, a text-based low-level command line tool developers use to run programs, manage files, and interface with npm, node, databases, and git in Visual Studio Code.

Explore how package managers automate code retrieval, installation, and dependency management, exemplified by npm with package.json, node_modules, and express, plus the concept of registries.

Build automation tools streamline the development workflow by automating tasks like code minification and transpiling TypeScript to JavaScript for optimized production builds in frameworks such as Next.js.

Explore how ORMs translate database tables into objects and let you manage data with code instead of raw SQL, using Prisma as an example.

Explore Postman for testing and interacting with APIs through a graphical user interface, using collections to organize endpoints and speed up backend testing when front-end work is pending.