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