I Built and Deployed My First Project As a Front-end Developer.

It was evening, around 5:00 p.m. I had just concluded a portfolio walkthrough to strengthen my knowledge of HTML and CSS—something I had devoted way more time to than I probably should have. I need to create something that is me. Away with the Top 10 projects to land you a job. Something that connects with me as an individual. I held onto this thought for days. As time passed, I got random ideas, but most of them were either not good enough or beyond my current skill level. I was in the bathroom when a new idea popped into my head. Yes! That's it! I had an idea I believed I could run with: A photo gallery that holds memories of my university days. Why did this mean so much to me? I'm a lover of memories, and the ability to freeze time in photographs has always fascinated me—and it’s something I’ve even gotten myself into. I was capturing moments in my department from my second year all the way until we graduated. I even introduced the tradition of taking a group photograph at the end of every semester after our examinations and during special occasions that brought us all together. So, building a photo gallery to house all these memories ignited a flame in me. I made a rough sketch to serve as a guide and jumped straight into coding as soon as I could. Like most endeavors, after a few lines of code and styling, the challenges came knocking. Challenges 1. Lengthy Image Load Time After getting the HTML and styles in order, I realized the images were taking too long to load and consuming a lot of data in the process. This led to poor user experience and performance. 2. Desired Functionality I wanted the images to pop up when clicked or tapped on, with a dark overlay (about 50% opacity) underneath. I also wanted users to be able to navigate through the images in that pop-up state. This feature couldn’t (or maybe I just couldn’t figure out how to) be achieved with only HTML and CSS. I needed something more. 3. Undesired Animation Behavior This was the most difficult to figure out. An animation with infinite iterations was set on the landing page. It ran in a container/div using the background-image property and @keyframes. During testing, I noticed the images weren’t loading properly—especially on the first iteration. Solutions 1. Optimized Images First, I resized the images in the gallery using an online image resizer. The goal was to bring each image down to around 100 KB. This was a huge reduction, as most of the original images were between 5–11 MB. This step alone tackled the issue described in Challenge No. 1. Next, I uploaded the original images to an online service that automatically optimizes them for whatever device accesses the site and just pasted the link in my img tag. 2. Utilized JavaScript Library After realizing I needed more than HTML and CSS for the image popup functionality, I decided to start learning JavaScript and use it to build out the feature. After a few days of learning, I realized it would take more time than I had intended to understand the language well enough for this. Since my main goal was to practice HTML and CSS, I sought an alternative—and that’s when I discovered Lightbox2, a JavaScript library. I’d heard of libraries but had never used one before (obviously, this is my first project), and incorporating one into my build helped me appreciate just how supportive the developer community can be. I added the library to my repository and made a few tweaks. This provided the pop-up functionality needed in Challenge No. 2. 3. Smooth Animation After several attempts and questions, a friend suggested I clearly explain the problem to an AI tool—and surprisingly, that worked! The fix was a simple line of code: I placed the images used in the animation into a div and set its display to none. I believe this helped the images load faster, reducing the delay. Lessons Learned 1. The solution to a problem is not always linear. At the start of this project, I didn’t think it would be too hard to go from ideation to deployment. But I was wrong. It took a lot of twists and turns to reach the intended outcome. 2. Be Water, My Friend. I set out to build a project using only HTML and CSS but quickly realized I needed more to bring the idea to life. "Be water, my friend"—a quote by Bruce Lee—reminds us to adapt when necessary. 3. Passion Projects Stretch You (In a Good Way!). I probably wouldn’t have learned as much if I hadn’t taken a chance on a project I was genuinely passionate about. I might still be browsing YouTube for the next generic project to build. After Deployment After deployment, I shared the gallery with the family. They loved it and even sent in more images to be added to the gallery. The goal of the project was to serve as a shared window into that chapter of our lives—to h

Apr 12, 2025 - 13:46

I Built and Deployed My First Project As a Front-end Developer.

It was evening, around 5:00 p.m. I had just concluded a portfolio walkthrough to strengthen my knowledge of HTML and CSS—something I had devoted way more time to than I probably should have.

I need to create something that is me.

Away with the Top 10 projects to land you a job.

Something that connects with me as an individual.

I held onto this thought for days. As time passed, I got random ideas, but most of them were either not good enough or beyond my current skill level.

I was in the bathroom when a new idea popped into my head.

Yes!

That's it!

I had an idea I believed I could run with:

A photo gallery that holds memories of my university days.

Why did this mean so much to me?

I'm a lover of memories, and the ability to freeze time in photographs has always fascinated me—and it’s something I’ve even gotten myself into. I was capturing moments in my department from my second year all the way until we graduated. I even introduced the tradition of taking a group photograph at the end of every semester after our examinations and during special occasions that brought us all together.

So, building a photo gallery to house all these memories ignited a flame in me.

I made a rough sketch to serve as a guide and jumped straight into coding as soon as I could.

Like most endeavors, after a few lines of code and styling, the challenges came knocking.

Challenges

1. Lengthy Image Load Time

After getting the HTML and styles in order, I realized the images were taking too long to load and consuming a lot of data in the process. This led to poor user experience and performance.

2. Desired Functionality

I wanted the images to pop up when clicked or tapped on, with a dark overlay (about 50% opacity) underneath. I also wanted users to be able to navigate through the images in that pop-up state.

This feature couldn’t (or maybe I just couldn’t figure out how to) be achieved with only HTML and CSS. I needed something more.

3. Undesired Animation Behavior

This was the most difficult to figure out.

An animation with infinite iterations was set on the landing page. It ran in a container/div using the background-image property and @keyframes.

During testing, I noticed the images weren’t loading properly—especially on the first iteration.

Solutions

1. Optimized Images

First, I resized the images in the gallery using an online image resizer. The goal was to bring each image down to around 100 KB. This was a huge reduction, as most of the original images were between 5–11 MB.

This step alone tackled the issue described in Challenge No. 1.

Next, I uploaded the original images to an online service that automatically optimizes them for whatever device accesses the site and just pasted the link in my img tag.

2. Utilized JavaScript Library

After realizing I needed more than HTML and CSS for the image popup functionality, I decided to start learning JavaScript and use it to build out the feature.

After a few days of learning, I realized it would take more time than I had intended to understand the language well enough for this. Since my main goal was to practice HTML and CSS, I sought an alternative—and that’s when I discovered Lightbox2, a JavaScript library.

I’d heard of libraries but had never used one before (obviously, this is my first project), and incorporating one into my build helped me appreciate just how supportive the developer community can be.

I added the library to my repository and made a few tweaks. This provided the pop-up functionality needed in Challenge No. 2.

3. Smooth Animation

After several attempts and questions, a friend suggested I clearly explain the problem to an AI tool—and surprisingly, that worked! The fix was a simple line of code: I placed the images used in the animation into a div and set its display to none. I believe this helped the images load faster, reducing the delay.

Lessons Learned

1. The solution to a problem is not always linear.

At the start of this project, I didn’t think it would be too hard to go from ideation to deployment. But I was wrong. It took a lot of twists and turns to reach the intended outcome.

2. Be Water, My Friend.

I set out to build a project using only HTML and CSS but quickly realized I needed more to bring the idea to life.

"Be water, my friend"—a quote by Bruce Lee—reminds us to adapt when necessary.

3. Passion Projects Stretch You (In a Good Way!).

I probably wouldn’t have learned as much if I hadn’t taken a chance on a project I was genuinely passionate about. I might still be browsing YouTube for the next generic project to build.

After Deployment

After deployment, I shared the gallery with the family. They loved it and even sent in more images to be added to the gallery.

The goal of the project was to serve as a shared window into that chapter of our lives—to help us relive and recall what it felt like. So far, it's done just that.

It was such a joy to see my first-ever project make an impact in its little way.

Below is a short clip of the project.