⇦ Back

WDX-180

Web Development X

Week 13 | Intermediate JavaScript

Week 12 ⇦

Updated: 9/1/2025

⇨ Week 14

Week 13 - Day 1 | JavaScript Promises

Schedule

  • Lecture: JavaScript Promises
  • Practice
  • Exercises
  • Work on Project (Group/Personal)

Study Plan

  • Watch Part 1 of today’s lecture on JavaScript Promises.

  • Take a break, walk away from the keyboard and do some quick stretch exercises.

  • Watch Part 2 of the lecture on JavaScript Promises.

  • Practice with Promises.

  • Post your questions on Slack, in the comments on YouTube, at the bottom of this page or our discussion forum on GitHub.

(Image from https://www.alexlintu.com/what-is-a-promise/)

Resources

Exercises

Finish all the exercises found on this repository.

IMPORTANT: Make sure to complete all the tasks found in the daily Progress Sheet and update the sheet accordingly. Once you’ve updated the sheet, don’t forget to commit and push. The progress draft sheet for this day is: /user/week13/progress/progress.draft.w13.d01.csv

You should NEVER update the draft sheets directly, but rather work on a copy of them according to the instructions found here.

Week 13 - Day 2 | CSS Object Model

Schedule

Study Plan

Let’s learn the CSS Object Model

“The CSS Object Model is a set of APIs allowing the manipulation of CSS from JavaScript.

It is much like the DOM, but for the CSS rather than the HTML.

It allows users to read and modify CSS style dynamically.”

In this article you’ll find the word Interface mentioned quite a lot, so let’s ask ChatGPT to explain this to us:

What is an Interface?

“In the world of programming and computer science, an “interface” refers to a set of rules or specifications that define how different software components can interact with each other. It’s like a contract that outlines what methods or functions an object or component should have and how they should behave.

Think of it as a way for different parts of a program to communicate with each other without needing to know all the nitty-gritty details of how each part is implemented. It’s a bit like using a remote control to interact with your TV. You don’t need to know exactly how the TV works internally; you just need to know the buttons on the remote control and what they do (that’s the interface).

In the context of MDN documentation, when you see terms like “CSSStyleSheet”, “Event interface”, “FocusEvent interface,” “UIEvent interface,” etc., they are referring to specific sets of rules that describe what properties and methods an object (e.g. an Event object) should have. These interfaces tell developers what they can expect from these objects and how they can work with them.”

CAUTION: The ChatGPT response was reviewed and curated by our staff of professional developers. Never trust AI-generated responses 100%.

Here is a list of the main concepts that you will learn in this article:

  • The HTMLElement.style.* set of properties
  • The window.getComputedStyle(Element) method
  • The CSSStyleDeclaration Interface and its properties:
    • getPropertyValue()
    • getPropertyPriority()
    • setProperty(propertyName, value, priority)
    • removeProperty(property)
    • item()
    • length
  • The StyleSheet & StyleSheetList Interfaces and their properties:
    • disabled
    • href
    • media
    • ownerNode
    • parentStyleSheet
    • title
    • type
    • document.styleSheets.length
  • The CSSStyleSheet & CSSRule Interfaces
    • cssRules
    • deleteRule()
    • insertRule()
    • cssText
    • parentRule
    • parentStyleSheet
  • The CSSMediaRule & CSSKeyframeRule Interfaces
    • media
    • keyText

Extra Resources

Sources and Attributions

Week 13 - Day 3 | Promises & Scope

Schedule

  • Lecture: Promises & Scope
  • Practice
  • Work on Project (Group/Personal)

Study Plan

Your instructor will share the video lectures with you. The first part of the lecture is about Promises and error handling, while the second part is all about scope in JavaScript and different ways to define variables.

A new term needs a proper Google search for its original definition:

Scope: “the extent of the area or subject matter that something deals with or to which it is relevant.”
Example: “we widened the scope of our investigation”

  • Recommended reading: read the full articles about var, let and const on MDN and share your questions on our Slack forum or leave a comment below.

Summary

Here is an AI-generated summary of the lectures:

Lecture 1: Promises

  1. Creating promises: The instructor explains how to create promises using the Promise constructor and provides examples.

  2. Handling promise errors: He demonstrates how to handle promise errors using .catch() or .finally().

  3. Chaining promises: The discussion covers chaining promises together using the .then() method.

  4. Combining promises: The instructor shows how to combine multiple promises into a single promise using methods like Promise.all() and Promise.race().

  5. Performance measurement: He mentions the importance of measuring performance in JavaScript and provides a link to an MDN API for timing functions.

  6. Timing promise execution: The discussion highlights that there’s no way to guarantee the exact time it takes for promises to execute, even on the same machine.

The meeting also touches upon related topics, such as:

  • Creating arrow functions with single statements
  • Combining multiple promise-based functions into a single function

Lecture 2: Scope

  1. The concept of scope in JavaScript is important to understand.

  2. There are different types of scope: global, function, and block scope.

  3. Variables declared with var have function scope, while variables declared with let or const have block scope.

  4. Lexical scoping (also known as static scoping) is a way of resolving variable references in JavaScript.

  5. It’s not necessary to know the term “lexical scoping” to understand how scope works in JavaScript; just learn the rules and you’ll be fine.

  6. Naming variables can help with understanding scope, especially when working with complex code.

Exercises

  • Practice with Promises and what you’ve learned from the lectures

  • Study the behavior of the following code, and make sure to understand the mechanics behind it and be able to explain this during a coding interview (practice by explaining this to an imaginary person or to a class mate):

  console.log(a);
  var a = 42;
  console.log(a);

  console.log(b);
  let b = 42;
  console.log(b);

IMPORTANT: Make sure to complete all the tasks found in the daily Progress Sheet and update the sheet accordingly. Once you’ve updated the sheet, don’t forget to commit and push. The progress draft sheet for this day is: /user/week13/progress/progress.draft.w13.d03.csv

You should NEVER update the draft sheets directly, but rather work on a copy of them according to the instructions found here.

Extra Resources

Week 13 - Day 4 | Advanced CSS

Schedule

Summary

Let’s begin by reading about What is a Software Post-Mortem and How Do You Write One?

After having read the article, open up the code found here debug the program and write a short post mortem.

Next, we are going to explore some pretty useful and cool CSS features (that you probably didn’t know exist). Let’s go!

  • Go through this article that covers quite a lot of features. For each one, you should check the appropriate MDN article for more details and play around with the feature in your local development environment. Perhaps it’s a good idea at this point to create a file named advanced-css-tricks.html and work on it.

The point of this module is to become aware and familiar with these really handy CSS tools. Unless you practice, of course, there’s no point in moving forward, so let’s use these tricks to build a web page that includes every single feature in the list.

  • Responsive CSS Grids
  • Vertically Align with Flexbox
  • SVG for Icons and Logos
  • Masking
  • Shape Outside
  • Zoom on Hover
  • Scroll Snapping
  • Variable Fonts
  • Generate Text Animation
  • Initial Letter
  • Logical Properties and Values
  • CSS Subgrids
  • Smart Quotes in HTML/CSS
  • Comma-Separated Lists
  • Feature Query
  • Background Repeat
  • CSS Gradients
  • Truncate Strings

On top of that, you want to create a page that includes every single feature with a small description taken from the MDN docs and a small example (containing both the code used and the actual displayed output).

Exercises

  • Build a replica of the var/let/const table using HTML and CSS. Sprinkle the table with some JavaScript if you feel like it.

You can use some emojis for the ❌ and ✅ or you can recreate them using plain CSS!

If you go with the CSS route for the symbols, you can use the following HTML entities and find some CSS rules to apply colors, background, borders, circles, etc. to these characters

  • <span>&check;</span>
  • <span>&CircleTimes;</span>

Refs:

You can of course, build the structure in many ways, but the <table> element is the most appropriate here. In case you’ve started building using another element, feel free to do so, and we’ll check how different layouts and structure look later on.

IMPORTANT: Make sure to complete all the tasks found in the daily Progress Sheet and update the sheet accordingly. Once you’ve updated the sheet, don’t forget to commit and push. The progress draft sheet for this day is: /user/week13/progress/progress.draft.w13.d04.csv

You should NEVER update the draft sheets directly, but rather work on a copy of them according to the instructions found here.

Extra Resources

(Nothing here yet. Feel free to contribute if you’ve found some useful resources.)

Sources and Attributions

Week 13 - Day 5 | Intermediate JavaScript

Schedule

  • Lecture: Intermediate JavaScript
  • Practice
  • Work on Project (Group/Personal)

Study Plan

Your instructor will share the video lectures with you. Here are the topics covered:

  • Part 1:
    • Variable scope and use of the window object as a global namespace.
    • Naming variables in a way that shows intent and protects our code
  • Part 2:
    • Variable declarations, function definitions and function expressions
    • Scoping rules

Practice on the topics covered and explore the concepts by trying things out in your own code.

Exercises

IMPORTANT: Make sure to complete all the tasks found in the daily Progress Sheet and update the sheet accordingly. Once you’ve updated the sheet, don’t forget to commit and push. The progress draft sheet for this day is: /user/week13/progress/progress.draft.w13.d05.csv

You should NEVER update the draft sheets directly, but rather work on a copy of them according to the instructions found here.

Weekly feedback: Hey, it’s really important for us to know how your experience with the course has been so far, so don’t forget to fill in and submit your mandatory feedback form before the day ends. Thanks you!

Week 13 - Weekend Suggestions

If you are in the mood of enjoying related content during the weekend, check out our weekly recommendations here.

Project maintained by in-tech-gration Hosted on GitHub Pages — Theme by mattgraham