Marcy Lab School Docs
  • Welcome
  • Student Guidelines & Policies
    • Student Handbook
    • AI Policy
    • Academic Calendar
  • Environment Setup
    • Local Environment Setup - Mac
    • Local Environment Setup - Windows
    • GitHub Setup
    • Postgres Setup
  • How-Tos
    • How To Code at Marcy: Code Style Guide
    • How to Do Short Response and Coding Assignments
    • How to Debug
    • How to PEDAC
    • How to Create Projects with Vite
    • How to Create A GitHub Organization and Scrumboard
    • How to Deploy on GitHub Pages
    • How to Deploy on Render
  • Mod 0 - Command Line Interfaces, Git, and GitHub
    • Mod 0 Overview
    • Command Line Interfaces
    • Git & GitHub
    • Git Pulling & Merging
    • Git Branching & PRs
  • Mod 1 - JavaScript Fundamentals
    • Mod 1 Overview
    • Intro to Programming
    • Errors
    • Node & Node Modules
    • Variables, Functions & String Methods
    • Control Flow, typeof, and Math
    • Loops
    • Arrays
    • Objects
    • Higher Order Functions: Callbacks
    • Higher Order Functions: Array Methods
    • Regex
  • Mod 2 - HTML, CSS & the DOM
    • Mod 2 Overview
    • HTML
    • CSS
    • Accessibility (a11y)
    • The Document Object Model (DOM) API
    • Events
    • Forms
    • The Box Model and Positioning
    • Flexbox
    • Grid & Media Queries
    • ESModules
    • Vite
    • LocalStorage
  • Mod 3 - Async & APIs
    • Mod 3 Overview
    • Promises
    • Fetch
    • Building a Fetching App
    • Async & Await
    • A Generic Fetch Handler
  • Mod 4 - Project Week!
    • Project Week Overview
    • Agile Methodologies
    • Deliverables & Milestones
    • Technical Requirements Checklist
    • Free API List
    • Collaborative GitHub
    • How to Create a GitHub Organization and Scrum Board
    • How To Start a Project with Vite
    • How To Deploy a Project with GitHub Pages
  • Mod 5 - Object-Oriented Programming
    • Mod 5 Overview
    • Intro to OOP, Encapsulation, Factory Functions, and Closure
    • Classes
    • Private & Static
    • UML Diagrams & Has Many/Belongs To Relationships
    • Challenge: Implementing Has Many/Belongs To
    • Inheritance
    • Polymorphism
    • Review and Practice
    • MDN: Object Prototypes
  • Mod 6 - Data Structures & Algorithms
    • Mod 6 Overview
    • Nodes & Linked Lists
    • Singly & Doubly Linked Lists
    • Stacks & Queues
    • Recursion
    • Trees
  • Mod 7 - React
    • Mod 7 Overview
    • Intro to React
    • Events, State, and Forms
    • Fetching with useEffect
    • React Router
    • Building a Flashcards App
    • React Context
    • Global Context Pattern
  • Mod 8 - Backend
    • Mod 8 Overview
    • Intro to Express
    • Building a Static Web Server with Middleware
    • Securing API Keys and Environment Variables
    • Building a RESTful API with MVC
    • SQL and Databases
    • JOIN (Association) SQL Queries
    • Knex
    • Your First Fullstack App!
    • Migrations & Seeds
    • Schema Design & Normalization
    • Hashing Passwords with Bcrypt
Powered by GitBook
On this page
  1. Mod 2 - HTML, CSS & the DOM

Mod 2 Overview

We can use JavaScript to do more than just write command-line scripts. We can also use it to power dynamic frontend applications. In this module, we'll learn how to scaffold and design a frontend web application using HTML and CSS and how to make them interactive and dynamic using the Document Object Model (a.k.a "The DOM").

In this module, we'll learn about:

  • HTML

  • CSS

  • Accessibility

  • The Document Object Model (DOM)

  • LocalStorage

External Resources for Learning

  • [CSS Tricks] Design Principles for Developers: Processes and CSS Tips for Better Web Design

  • [CSS Tricks] A guide to Flexbox

  • [Youtube] Learn flexbox the easy way (Kevin Powell)

PreviousMod 2 - HTML, CSS & the DOMNextHTML

Last updated 4 months ago