# \[JS] The Interactive Web

## \[JS] The Interactive Web

- [Curriculum Overview](https://cs4all-icm.gitbook.io/js-the-interactive-web/readme.md): A NYS Computing Standard-Aligned Intermediate High School Computer Science Curriculum using HTML/CSS/JS.
- [Leave Us Feedback](https://cs4all-icm.gitbook.io/js-the-interactive-web/leave-us-feedback.md)
- [Unit 1 Overview](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-1-html-and-css-good-vs-bad-design/unit-1-overview.md): How can I create well designed and accessible webpages with HTML and CSS?
- [U1LA1.1: Building with HTML](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-1-html-and-css-good-vs-bad-design/u1la1.1-building-with-html.md): How can I build a website using HTML?
- [U1LA1.2: Structuring Pages with Divs, Classes, IDs](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-1-html-and-css-good-vs-bad-design/u1la1.2-structuring-pages-with-divs-classes-ids.md): How can I use divs, classes, and IDs to create structure on a page?
- [U1LA1 Mini Project: My Fan Page Part 1](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-1-html-and-css-good-vs-bad-design/u1la1-lab-my-fan-page-part-1.md): How do you use HTML elements to build a webpage?
- [U1LA2.1: Styling your page with CSS](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-1-html-and-css-good-vs-bad-design/u1la2.1-styling-your-page-with-css.md): How can I add style to my HTML page using cascading style sheets?
- [U1LA2 Lab: My Fan Page Part 2](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-1-html-and-css-good-vs-bad-design/u1la2-lab-my-fan-page-part-2.md): How can I add specific styles such as color, spacing, and font to my web page?
- [U1LA3.1: Layout with CSS Grid](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-1-html-and-css-good-vs-bad-design/u1la3.1-tbd-grid-lesson.md): How can I structure the content/elements on my HTML page using CSS grids?
- [U1LA3.1 Lab: Grid Interview](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-1-html-and-css-good-vs-bad-design/u1la3.1-lab-grid-interview.md): How can I use CSS Grid to format sections of a webpage into different sizes and orientations?
- [U1LA3.2: Layout with Flexbox](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-1-html-and-css-good-vs-bad-design/u1la3.2-tbd-flexbox-lesson.md): How can I place container items using Flexbox?
- [U1LA3.2 Lab: Flexbox Interview](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-1-html-and-css-good-vs-bad-design/u1la3.2-lab-flexbox-interview.md): How does Flexbox offer more specific formatting than Grid?
- [U1LA4.1: Focus on Design in HTML && CSS](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-1-html-and-css-good-vs-bad-design/u1la2.4-focus-on-design-in-html-and-and-css.md): What elements of HTML and CSS make a well-designed page?
- [U1LA4.2: Breakpoint Lesson](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-1-html-and-css-good-vs-bad-design/u1la4.2-tbd-breakpoint-lesson.md): How can I use media queries to create responsive layouts?
- [U1LA4 Lab: ChefHub Goes Mobile](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-1-html-and-css-good-vs-bad-design/u1la4-lab-chefhub-goes-mobile.md): How can media queries at certain breakpoints be used to make for a responsive webpage?
- [U1LA5.1: Creating Accessible Websites](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-1-html-and-css-good-vs-bad-design/u1la5.2-creating-accessible-websites.md): How can I adjust my HTML to create websites that are accessible for all?
- [U1LA5 Lab: What Do You Hear? Make it Accessible](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-1-html-and-css-good-vs-bad-design/u1la5-lab-what-do-you-hear-make-it-accessible.md): What can one do to make a website more easily accessible?
- [U1LA6.1: Working with CSS Frameworks - Bulma](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-1-html-and-css-good-vs-bad-design/u1la6.1-tbd-bulma-lesson.md): How can a CSS Framework help me to quickly build organized, well-designed websites?
- [U1LA6 Lab: CheeseBook Computers with Bulma](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-1-html-and-css-good-vs-bad-design/u1la6-lab-cheesebook-computers-with-bulma.md): How Bulma make styling webpages easier?
- [Unit 1 Final Project: My Travel Page](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-1-html-and-css-good-vs-bad-design/unit-1-final-project-my-travel-page.md): How can one use HTML, CSS, and Bulma together to make an accessible and responsive website?
- [Unit 2 Overview](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-2-intro-to-dom-manipulation-basics/unit-2-overview.md): How can I create a more interactive webpage using Javascript?
- [U2LA1: JavaScript Essentials - Variables to Arrow Functions](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-2-intro-to-dom-manipulation-basics/u2la1-javascript-essentials-variables-to-arrow-functions.md): How can I store and manipulate data to later be used in various ways throughout my website?
- [U2LA1 Mini Project: JavaScript Essentials](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-2-intro-to-dom-manipulation-basics/u2la1-mini-project-javascript-essentials.md): How can I store and manipulate data to later be used in various ways throughout my website?
- [U2LA2.1: DOM Manipulation with JavaScript Click Interactions](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-2-intro-to-dom-manipulation-basics/u2la2.1-dom-manipulation-with-javascript-click-interactions.md): How can JavaScript help me make my websites interactive?
- [U2LA2.2: Accessible Shopping Cart](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-2-intro-to-dom-manipulation-basics/untitled.md): How can I make it easier for someone using a screen reader to interact through a webpage?
- [U2LA2 Mini Project: The National Horse Race](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-2-intro-to-dom-manipulation-basics/u2la2-mini-project-the-national-horse-race.md): How do you change a webpage based on clicked buttons?
- [U2LA3: Inputs and Conditionals](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-2-intro-to-dom-manipulation-basics/u2la3-inputs-and-conditionals.md): How can I make changes to a page based on an input?
- [U2LA3 Mini Project: The Interactive Site](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-2-intro-to-dom-manipulation-basics/u2la3-mini-project-the-interactive-site.md): What are ways you can change a webpage based on other inputs while maintaining accessibility?
- [U2LA4: Add, Remove, and Toggle](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-2-intro-to-dom-manipulation-basics/u2la4-add-remove-and-toggle.md): How can I change the classes an element has as I interact with the page?
- [U2LA4 Mini Project: The Cross-Wired Lightbulbs Puzzle](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-2-intro-to-dom-manipulation-basics/u2la4-mini-project-the-cross-wired-lightbulbs-puzzle.md): How can you use add, remove, and toggle in Javascript to change an element's classList and other attributes in HTML?
- [Unit 2 Final Project: Input-Output Helper Site](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-2-intro-to-dom-manipulation-basics/unit-2-final-project-input-output-helper-site.md): How can you use Javascript to create seamless interaction on a webpage?
- [Unit 3 Overview](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-3-advanced-dom/unit-3-overview.md): What data structures, algorithms, and resources can I use to enhance the quality and efficiency of my Javascript backend.
- [U3LA1: JavaScript Arrays, Iteration, and Objects](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-3-advanced-dom/u3la1-javascript-arrays-iteration-and-objects.md): What structures can I use to store and manipulate larger and more nuanced data?
- [U3LA1 Mini Project: Arrays, Iteration, and Objects Lab](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-3-advanced-dom/u3la1-mini-project-arrays-iteration-and-objects-lab.md): How can I store and manipulate data to later be used in various ways throughout my website?
- [U3LA2.1: JavaScript Essentials - Variables to Arrow Functions](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-3-advanced-dom/u3la2.1-javascript-essentials-variables-to-arrow-functions.md): How can you add functionality to an array of similar interactive components such as a button?
- [U3LA2.2: Typeahead Search](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-3-advanced-dom/u3la2.2-typeahead-search.md): How do you implement a type ahead search so that users can see recommendations as they search?
- [U3LA2.3: Fuzzy Matching - Autocorrect](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-3-advanced-dom/u3la2.3-fuzzy-matching-autocorrect.md): How do you think critically to solve a not-so-straight-forward problem
- [U3LA2 Mini Project: Fuzzy Matching Personality Quiz](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-3-advanced-dom/u3la2-mini-project-fuzzy-matching-personality-quiz.md): How can you use advanced data structures and functional computing with DOM elements and user interaction?
- [U3LA3.1 JavaScript Mutability](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-3-advanced-dom/u3la3.1-javascript-mutability.md): What structures can I use to store and manipulate larger and more nuanced data?
- [U3LA3.2: Advanced DOM Manipulation](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-3-advanced-dom/u3la3.2-advanced-dom-manipulation.md): What is a DOM element and how can we use it to navigate and manipulate the DOM tree.
- [U3LA3 Mini Project: Card Organizer](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-3-advanced-dom/u3la3-mini-project-card-organizer.md): How can you use advanced data structures and functional computing with DOM elements and user interaction?
- [U3LA4: Local Storage](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-3-advanced-dom/u3la4-local-storage.md): How can you use local storage to save the current state of the website.
- [Unit Final/U3LA4 Project: Twenty in Ten Game](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-3-advanced-dom/unit-final-u3la4-project-twenty-in-ten-game.md): How can you use local storage to better the experience of a website?
- [Unit 4 Overview](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-4-intro-to-apis/unit-4-overview.md): How can access remote data and incorporate it into a webpage?
- [U4LA1: Intro to APIs](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-4-intro-to-apis/u4la1-intro-to-apis.md): What is an API?
- [U4LA1.2: JavaScript Arrays, Iteration, and Objects](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-4-intro-to-apis/u4la1.2-javascript-arrays-iteration-and-objects.md): What structures can I use to store and manipulate larger and more nuanced data?
- [U4LA1 Mini Project: Deck of Cards: Higher Lower](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-4-intro-to-apis/u4la1-mini-project-deck-of-cards-higher-lower.md): What does the use of APIs look like in a website.
- [U4LA2: Connecting to Closed APIs using the Giphy API](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-4-intro-to-apis/u4la2-connecting-to-closed-apis-using-the-giphy-api.md): How do you work with APIs that require authentication?
- [U4LA2 Mini Project: DIY Dictionary](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-4-intro-to-apis/u4la2-mini-project-diy-dictionary.md): What makes an API closed and how do we safely incorporate our API key?
- [U4LA3.1: APIs vs SDKs](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-4-intro-to-apis/u4la3.1-apis-vs-sdks.md): How do you integrate other people's software into yours?
- [U4LA3.2: Requests on the Web - GET & POST](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-4-intro-to-apis/u4la3.2-requests-on-the-web-get-and-post.md): What do API calls look like on other websites?
- [Unit 4 Final Project: API GUIs](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-4-intro-to-apis/unit-4-final-project-api-guis.md): What does the use of APIs look like in a website.
- [Unit 5 Overview](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-5-simple-websockets-and-final-project/unit-5-overview.md): How can I use websockets to communicate between a client and server?
- [U5LA1: Servers and Express](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-5-simple-websockets-and-final-project/u5la1-servers-and-express.md): How are files delivered on the web?
- [U5LA1 Mini Project: Express Lab](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-5-simple-websockets-and-final-project/u5la1-mini-project-express-lab.md): How can I set up a basic static file server with Node and Express?
- [U5LA2: Intro to WebSockets](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-5-simple-websockets-and-final-project/u5la2-intro-to-websockets.md): What can real-time client/server communication add to the web?
- [U5LA2 Mini Project: Simple Sockets Lab](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-5-simple-websockets-and-final-project/u5la2-mini-project-simple-sockets-lab.md)
- [U5LA3: Socket Servers](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-5-simple-websockets-and-final-project/u5la3-socket-servers.md): What role do servers play in socket communication?
- [U5LA3 Mini Project: Socket Server Lab](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-5-simple-websockets-and-final-project/u5la3-mini-project-socket-server-lab.md)
- [U5LA4 \[TBD\]](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-5-simple-websockets-and-final-project/u5la4-tbd.md)
- [Course Final Project Guide](https://cs4all-icm.gitbook.io/js-the-interactive-web/unit-5-simple-websockets-and-final-project/course-final-project-guide.md)