A website that serves as a collection of my experiences in the gym.
This is my first project that uses the 3 basic technologies of web development: HTML, CSS, and JavaScript. Although my code is messy and the journey was a bit haphazard, I learned a lot from this and will actually retain the knowledge. I thought this was an appropriate time to make a project (and an original one too) rather than continuing with tutorial hell and forgetting everything. Note that I did make this project while I was learning HTML, CSS, and JS, so there are a few things I would've changed if I already knew all of this.
- Intersection Observers are amazing for on-scroll animations
- When in doubt, use this rule: border: 1px solid red;
- I need to organize my file structure better
- I need to use more CSS variables and organize my CSS files better, especially the media queries; use Sass?
- When tabbing through the page, the anchor links and buttons will have an outline by default
- Apparently subclasses are a thing in CSS: .class1.class2 {} - class2 only applies if the element has class1
- I learned a lot about transitions and animations/keyframes by just messing around
- I learned that there's a lot more to learn
- The Carousel on the home page
- The fact that everything was written by myself
- The filter buttons for each of the exercise pages and their functionality
- The fade-in and fade-out on-scroll animations for the exercises
- The burger menu functionality and dropdown
- How responsive the website is through media queries
- The aesthetics and atmosphere I managed to portray
- My exercise descriptions :)
- Instead of writing so much HTML, I could've stored each exercise as an obj in their respective array in a separate file. Then I could import that as a module and iterate through the array, adding each exercise using JS rather than hardcoding with HTML. This probably would've made everything easier and more automated. But alas, I learned HTML and CSS before even touching JS.
- Should've made the burger menu with a button so that it could be accessible through the keyboard. Though, accessibility wasn't much of a priority in this project since I didn't know much about it at that time.
- Pretty much everything could've been organized and written better, but at least the result matches my imagination
- Now that I'm looking back, my JavaScript files are utterly horrid; I need more practice with JS.
Hosted on GitHub Pages