Posts By: Alicia Ramirez

Sample iOS’ systems sounds

I’m working on an iPhone app and was looking for a sound to make an alert. I didn’t want to have to include a custom sound, so I set out to find what are the system sounds available in iOS. Turns all you can find are codes and names for each sound. So I made… Read more »

Custom Navigation Bar Animations with AOS

I’m always on the lookout for easy-to-use JavaScript libraries for my students. Recently I discovered AOS (Animate on Scroll), which makes animating elements on the page as you scroll super easy. The library comes with many ready-to-go animations, but one of the things I really like about this small library is that you can create… Read more »

Centering in CSS for Beginners

One of the things that frustrate my students when they first start learning CSS is how to center elements. There are many techniques, many of them not very intuitive. Some require that you apply CSS to the element itself, while others to the parent. It’s very frustrating. This tutorial is meant for beginners who struggle… Read more »

My Favorite Responsive CSS Grid Techniques

In this article, I want to share two responsive techniques that I learned from Wes Bos’ CSS Grid Tutorial. Thanks, Wes! Template Areas You can make a site responsive simply by changing the template areas with a media query. In this example, let’s imagine a regular page where on desktop the main and aside are… Read more »

ScrollMagic for Beginners Tutorial

ScrollMagic is a JavaScript library for creating scroll interactions. It lets you create animations that start and stop at specific points during the scrolling of a page. It’s quite powerful, but can be intimidating for beginners, since unlike Skrollr, it’s all done in JavaScript. In this tutorial, I’ll cover the basics of adding ScrollMagic to a… Read more »

My Adventures in SVG Optimization

I recently created an SVG version of my logo using Sketch and while you should always optimize your images, the resulting file really needed it. It was quite large (as far as SVGs go): 89KB. It really needed to be optimized. Trying to optimize it wasn’t as straight-forward as I thought. I tried different online apps,… Read more »

5 Tips for Learning App Development

For the past few years, I’ve been teaching myself how to make native iOS apps. I’m still not super strong, but I hope to release my first app in the fall (I’ll keep you posted). I hope the following tips will help you do the same. 5 – Do it as fast as you can The… Read more »

Skrollr for Beginners Tutorial

Skrollr is a scroller library that allows you to perform animations or changes to your web page’s content based on screen position. For example, you can make a div slowly appear, or slide in, as you scroll down the page. You can see it in action here. This tutorial will cover the bare minimum you need… Read more »