Thanks so much Yasmim, I will definitely do an article on animation with page scroll soon :D


Photo by Cookie the Pom on Unsplash

In the second part in this series we will be looking at making the bouncing look more realistic. We are going to be doing this by doing two different things. If you want to see the initial setup code check out my first blog:

We ended up with a bouncy ball looking like this:


Photo by Christopher Gower on Unsplash

After taking a bit of a break from self-learning programming (I had started my first software engineering job and was learning a lot), I decided it was time to take learning new skills into my own hands. The idea is that every two months I focus on learning something new. Something that I have been wanting to learn for a while now is css animation. So this will be my very first blog in my series on animation in css and maybe some js.

Although I want to get into some more complex and relevant animation that I can implement…


On Thursday, 4th of June, I started out on a mission to learn typescript. I spent a morning reading an amazing Typescript resource and then the afternoon and evening building programs.

What is Typescript?

Typescript is a superset of Javascript, which means Typescript is an extension of Javascript. Typescript allows the dynamically typed language Javascript to add a strongly type declarative structure to the program meaning you have to specify things like the const is a string, it also allows for classes in Typescript. When you run a Typescript file it then compiles into Javascript.


Create more concise forms

Photo by the author.

Over the past week, I have been completing some courses by Mosh Hamedani to really solidify the skills I learned from my time at Flatiron School. Although Mosh does not have any Ruby course, I have been significantly improving my JavaScript and React skills. The course I am currently taking is Mosh’s Mastering React course, which I highly recommend. It is a bit pricey, but you definitely get your money’s worth. Another option is doing what I have done: getting a monthly subscription to all his courses.

You learn lots of neat tricks, like when you write the following in…


For my final project at FlatIron, I decided to do an Instagram clone but for pets called Petatude. A big part of doing an Instagram clone is being able to handle images. With rails, I came across two different approaches. The first one was using rails active storage and the second option was using an image hosting platform. I decided to go with the image hosting site Cloudinary. The reason I chose it was because of time constraints and usability. So I am going to show you how I did it. …


Mod 2 of flatiron school has been interesting. Our focus for the mod has been Rails.

What is Rails?

Rails is a framework built for ruby. It uses three main principles, MVC, convention over configuration and DRY(don’t repeat yourself). The aim of rails is to allow developers to build web applications quickly. Because Rails is for building web applications, it uses APIs to access the web. An API is an application programming interface. It is a set of programming instructions and standards for accessing a Web-based software application or Web tool. We access servers via API’s to view applications. …


What is robotics?

Robotics is the art of combining engineering & computer science; but also other disciplines in order to design, construct and use machines to complete tasks.
Robotics can be as simple as putting a motor on something like a toothbrush, to a dog.

How does robotics work?

Robots == computers, but why:


The first video I wanted to review, was a short and sweet summary of what react is.

What is react? by Mosh

I chose this video because I enjoy Mosh’s content and find them very insightful and definitely suggest watching some of them.

The video was about 4 minutes and although this may not seem like a lot of time for a video explaining React, it had a lot of information. He starts off by very simply explaining what React is, it’s history and why it is important to learn. He then talks about the key ideas behind react, shows…


Get started building responsive websites and apps right here

Photo by the author.

For my final project at Flatiron School, I really wanted to delve into responsive web design by styling my portfolio. So firstly, I needed to learn the basics behind responsive design: CSS units, flex boxes, and media queries.

CSS Units

The viewport refers to what the viewer is seeing.

There are three different types of CSS units.

Absolute units (fixed)

  1. px — pixels (most common)
  2. mm — millimetres
  3. cm — centimetres
  4. in — inches
  5. pt — points (4/3’s of a pixel)
  6. pc — pica / 12 points (*12’s of a point)

Pixels are the most common fixed unit used. You should never really use real…

Amy Ann Franz

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