⇦ Back

WDX-180

Web Development X

Week 13 | Intermediate JavaScript

Week 12 ⇦

Updated: 29/8/2024

⇨ Week 14

Week 13 - Day 1 | Intermediate JavaScript

Schedule

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

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 | Intermediate JavaScript

Schedule

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

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).

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)

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