Fifty Projects

Projects from the Udemy course

designed by Florin Pop and taught by Brad Traversy entitled

50 Projects: HTML, CSS, and JavaScript

Read what I have learned from each project.

After watching an introductory video for each project that shows the final outcome and the JavaScript functionality, I created the project without watching the solution videos by doing my own research to decide what tools would work best in each project. It gave me motivation to go to the documentation to understand topics more thoroughly.

image of my project named expanding cards.  It has five headshots of women laughing with bright backgrounds such as teal, bright yellow, hot pink, and as well as a neutral blue and ivory.  The women emit such joy.

Expanding Cards

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.

four circles representing progress in a list of steps.  Cirles are blue when finished, gray when not and controlled by next and previous buttons

Progress Steps

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.

a simple webpage with a photo and article.  To the top left is a quarter circle with hamburger menu.  When clicked, the page rotates up and away to show a menu hidden beneath the left bottom corner.

Rotating Navigation

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.

a light purple page with a magnifying glass, the search icon, right in the middle.  When clicked, an text input field grows from zero length to enough length to enter desired search terms.

Hidden Search

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.

a background image starts blurred and transitions to unblurred as a percent loaded number increases and because transparent.

Blurry Loading

setInterval() As a student of physics and mathematics, the formulas to convert one interval to another was the easy part in this project. I learned about setInterval() and clearInterval() and was reminded how to change an element's style properties with JavaScript.

A yellow background with four boxes aligned down the center.  When scrolling down, a new box slides in from the left, then the right.  When scrolling up, the boxes slide back out.

Scrolling Animation

Daily Coding I hadn't done one of these projects in a couple of months, instead working on learning more about WordPress. I struggled with "thinking in JavaScript". If I am coding everyday or nearly, I will be able to keep the correct syntax in mind as well as remembering categories of css attributes and js functions in mind.

a pothos plant and a sansevieria plant

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.

a form for entering an email and password

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.