Leafy: my first bootcamp portfolio project | Part II
By: Laura Harston
Tags: Portfolio, Bootstrap, Gsap, Bootcamp

Features

Here we are, I completed my first front-end bootcamp project. The goal was to put into practice what I have learned during my Bootstrap course. Before starting this bootcamp, I struggled a little bit with layouts. I used this project to ensure that I had a perfect command of the Bootstrap responsive grid system and that I was able to code pretty much any layout I might have in mind. Of course, during the course I learned a lot about different Bootstrap components like modals, jumbotrons, tooltips, etc … I decided to only use the components that fitted the design I had in mind such as carousels, forms, and navs.

There was something else I was eager to implement in my project: animations using the GreenSock library, also known as GSAP. I’m always impressed with websites using smooth-looking animations. I think it adds so much to the user experience. I still have a lot to learn about them and I know there are a lot more complex effects I will be able to create in the future, but this project helped me to get some practice with GSAP tweens, timelines, and scroll triggers.

With these tools, I was able to create sequences of animations and trigger them only when they would enter the viewport rather than on load.

Even though I mostly used Bootstrap to implement a responsive layout, I also used custom media queries via CSS and Javascript. It was my first time using the window interface’s matchMedia method and it proved to be very handy. For one of my columns in my “Founders” section, I was trying to have the image stack over the h2 and the paragraph when displayed on small and medium viewports, while keeping it under those two elements when on large and extra-large viewports. I was able to easily do so with the matchMedia method, an if … else statement, and the addListener method. I was originally thinking of solving this problem using the d-*-none Bootstrap display property but I figured that there was probably a more elegant way to get to a solution using Javascript.

Struggles …

I made a very terrible mistake when starting this project. That was designing it desktop first without having a clear vision of what I wanted for mobile and tablet viewports. I thought: “I’ll easily figure it out later”. Well, when I was done coding most of the desktop version, I realized that adapting it to extra small and small viewports would be more challenging than I thought. I spent too many hours trying to figure out how I would make the design work on mobile and tablet. Well, a couple of d-lg-none classes later and many moments of frustration, I was still unable to figure it out. Instead, I had to rethink 2 sections of my website.

I learned my lesson and took time to think of the design for the different viewports before jumping to my VS Code. Changing those two sections led me to make more adjustments to the design and that was for the best.

If I had to be honest, here is what happened: I was a little too eager to start coding and put into practice what I’ve learned the past couple of weeks and that caused me unnecessary struggle. That being said, I believe that we all learn from our mistakes, so no regret here. Note to my future self though: create detailed wireframes for EACH viewport before you start coding.

I went through another very frustrating issue. I was pretty much done with my project when I realized that there was an anomalous right margin on small and extra small viewports. I used the Chrome DevTools to try to figure out what was causing this unsolicited margin. I have to admit that I never really figured out what it was but a couple of CSS lines saved my life:

html, body { overflow-x: hidden; }

Final thoughts

It is truly empowering to be able to turn your ideas into reality. I look forward to the next section of my bootcamp, which is React. I already know what idea I’m trying to give life to. Stay tuned …

In the meantime, you can checkout my leafy project here.