This week, I started a new tutorial project. Building clones is one of my favorite challenges — there’s something so rewarding about building a clone of something I use in real life. So when I saw Scrimba had a tutorial on how to build an Instagram clone with lots of technology I’ve been itching to practice or learn, I knew I had to take it on. It’s a fairly lengthy project so I’ll be breaking it up over the next few weeks. This week I’ll be focusing on something brand new to me: setting up Firebase.

What is Firebase?

Firebase will act as…


In the last installment, we finished up by adding a toggle button that allows the user to choose if they would like to lighten or darken the color when they change it. Now it is time to add in that functionality and wrap up the project!

We want our code to address two things when the button is toggled: we want to think about what numerical value the user has in the slider and if the user has chosen to lighten or darken the color. To do this, we want our values (where we have slider.value in our code) to…


In the previous installment of this series, we created our toggle button. This week, we will address adding the button’s ability to change when toggled and updating a few design elements.

One of the main purposes of a toggle button is that the button should be able to transform when toggled to show the selected state. As of right now, we only have one form of the toggle button created. To do this, we will add some styles to the inner-circlethat will only take effect if the toggle-btn has a class of toggled.

While this is great, it doesn't actually…


The next element to tackle is a button that allows a user to toggle between darkening and lightening the color. The first thing we’ll need is a container div with a class name of toggle. Within that, we will separate <p>tags for both lightening and darkening. These will both have a class name of toggle-text so that we can style them the same, but they will have different ids so that we can work with them separately with JavaScript: lightenText and darkenText. In between these two divs we will have another div named toggleBtn that contains a div named inner-circle.


(You can find part one of this project here.)

Now that we’ve got the basic layout formatted and the slider has the ability to display the change in percentages, it’s time to add the color-changing functionality! Specifically, we want to change the color based on the percentage selected with the slider we just built. To do this, we are going to take in two parameters from the user: the hex code they provide and the percentage from the slider. From there, we will convert our hex value to an RGB value using the convertHexToRGB() function we previously created. Then, we…


This week I started a tutorial that taught me how to use HTML, CSS, and JavaScript to build a tool that will take a color and either darken it or lighten it depending on the user’s choice. At the beginning of the tutorial, we are given an idea of what we will be building:

The meat of this project is the JavaScript, so I won’t get into too much detail about the HTML and CSS. Both the layout and styling utilized basics in their respective languages to build the form. The form consists of a few classes, such as an…


This week, I decided to get some practice with React Hooks. Hooks are such a useful tool, but I haven’t used them enough that I’m as comfortable with them as I’d like to be. So when I came across this tutorial for a to do app that utilizes them, I decided to do it.

The app is relatively simple and only contains three components — Todo, TodoForm, and TodoList. I started with TodoForm, which as the name implies is a component that provides the user with a form to add an item to the to do list. This is also…


Today I completed a code along where I was given a prototype in Figma and had to recreate it using HTML and CSS. Here is what the prototype I was given looked like:

I began with the HTML. Because the design given has two sections, I created <div>s with class names of left-col and right-col. The first section left-col is fairly simple — I give it a content <div> with an <h1> and <p> and the copy provided in the prototype. The second, right-col, contains a form so it is a bit more complex. The content <div> makes an appearance…


This week, in addition to some work I’ve been doing on my Park Planner app, I started toying around with Figma. If you aren’t familiar with Figma, it is a UI and UX design tool used for building prototypes. I had heard about it during bootcamp but never had the time while in class to use it. But as someone who values design in web projects but is not naturally much of an artist or designer, it felt like it was necessary for me to look into it.

Figma is great for someone like me who needs to be able…


While my blogs are usually more technically focused, this one is going to be less about the actual code/language and more about planning for the overall product. For me, this is the most fun part of a project. It’s creative and exciting to sit down and imagine all of the possibilities. When I start a project, it all comes down to one question: what would I use?

The best way to determine if the tool you have in mind is one that people would use is to ask if you yourself would. If you would, chances are you are not…

Claire McCleskey

Software Engineering Student @ Flatiron School by day, TV/Film Script Analyst by night. NYC via FSU.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store