Read what I have learned from each project.
Photo Prep I went through the process of getting a group of photos ready to add to a website, normalizing their widths and heights and reducing the size of the image files.
Edge cases, zero-indexed arrays I had to think very carefully about edge cases because there were so many, such as the conditions needed to determine if a number was "activated" or not and when previous and next buttons were disabled, how the conditions are different when moving through steps vs going back steps.
Z-index I was trying to use semantic html by keeping all my nav elements in a single nav div, without understanding that z-index order is determined first within a div, then div by div. Each layer I want in the final analysis needs it's own div.
Styling Form Elements Search input fields are not easily styled, but text fields can be styled with css, so I am using a text input instead of a search input. Another issue for me was learning how to hide the text input, but also removing it from the document flow so that the search icon would be centered when the text input is hidden, as well as showing a transition for the change.
Split Landing Page
Blending Modes A different recent project involved what looked like an overlay, but I could never make mine look as great as the example. It wasn't an overlay; the image was blended with the background with blending-mix-mode: multiply.
Form Wave Animation
Critical Rendering Path In this project, I used a click into the input field to replace the original label, "Email" with a string with each of the letters surrounded by span elements. I then immediately made a transition on the span elements. The transition occured before the span string had been rendered and painted, so the transistion had no starting point. I needed to learn all about the critical rendering path to understand why my transition wasn't working.
Audio This was my first project using the audio element. I learned the functions needed and did a very small amount of audio editing.
Fetch API I used the Fetch API to make a http get request. I hadn't made a request in some time, so I had to relearn the steps taken to actually reach the data I requested. Because the request is async, I have to extricate the data from the promises.
Event Key Codes
Keyboard Events My go to keyboard event "keypress" is deprecated along with KeyboardEvent.keyCode. Instead of receiving an ASCII type code for the keypress, the "keydown" event gives a KeyboardEvent.code such as "KeyA", "Digit4", "Backspace", etc.