“Pseudo-elements can really take some animations to the next level”

Spring, September 27th, 2023

Kassandra Sanchez, Senior Front-End Developer based in Spring, Texas, is a talented professional who specializes in creating interactive experiences. She works remotely at Extreme Arts and Sciences, a digital marketing agency based in Seattle that works with business, marketing and technical leaders to articulate strategies in the form of compelling digital narratives.

In an interview with TIA, she described her interest in creating interactive experiences and her career as a CSS artist. Sanchez also explained how to balance creativity and technical proficiency on an efficient way.

To kick things off, as a local, what would you recommend doing when visiting Spring?

I would recommend eating any and all barbeque down here. It is absolutely delicious.

Can you describe how a typical workday looks like for you?

  • 8 AM: I work from home. I start my day at around 8:00 AM CST after taking my dogs on a nice mile-long walk. At around 830 AM, I start checking my socials as they are an essential part of my career. I post content every Monday-Fri and sometimes on weekends.
  • 9 AM: I start my actual work. I check my calendar for any meetings and respond to any emails from colleagues or clients. This is also the time when I set up my priorities for the day. I have a running to-do list on my notes app where I check for any leftover work from last week and incorporate any new work for this week.
  • 9:30 AM: A little bit of background: Last week, we got a project handover from the design team for a fun front-end heavy project for Amazon. The handover meeting with the design team is where they present the developers and project managers with their designs and ideas. They walk us through everything, and we all ask questions and talk everything out. We also assign work to everyone involved in the meeting. This meeting lasts about an hour.

For this particular project, I had to wait for the backend developer to finish before I could start on my part. After waiting for the backend developer to let me know that I am good to start on the front end, I get to work. At this point, I am about 4 hours in on working on the front end.

Back to the present, I check how many hours I have put into the project so far against how many hours we have allotted for my part in this project and ensure that I am staying within my time slot. I check my to-do list for this project and start back up where I left off last week. I have already converted the Figma file that I got from our design team into working code and all that is left are the final touches. I check for accessibility issues, and I check for responsiveness or any bugs.

If I do have any extra time available and have no other pressing priorities, I add a few extra touches to the design, such as fun animations.

  • 11:30 AM: Since my coworkers live in Seattle, it is now 9:30 AM for them. This is the time that I ask them any questions I have regarding anything that came up this morning. I also check in to see if they need any help from me on anything. After this, I continue checking things off of my to-do list.
  • 1:00 PM: I eat lunch with my husband, who also works from home. We may take our dogs on another walk if the weather and our schedules align.
  • 2:30 PM: We have a standup with the developers. We go over each other’s work and tasks for the week. Sometimes we do code reviews during this standup. We answer any questions any of us may have and collaborate on breaking down any blockers we may have encountered. Since I am almost done with my current front-end project, I ask the other developers to review my work in case they see anything that I may have missed. I also let the backend developer know of any issues I have found on their end.
  • 3:30 PM: Check in on my emails again. Sometimes requests come in from clients via either my email or in the form of a message from a project manager. I also continue testing my front-end work and fix bugs as I find them. This is accomplished by trying to break it as a user. I also test my work in various screen sizes and devices to make sure everything is running smoothly.
  • 4:30 PM: I update my do-list with any new tasks and check off my completed tasks. I check in with whoever I feel is necessary to check in with and start wrapping up my day.

How did you first become interested in creating interactive experiences?

I was inspired by seeing all of the really neat designs and animation people were making for their websites. I love the feeling of seeing someone’s work and thinking, “I wonder how they did that?”, and that is the same feeling I want my work to convey. I love the wow-ness factor that leads to curiosity.

How does the process of creating your own brand go?

When I first started posting on social media for professional reasons, it was not with the intention of creating my own brand or even becoming a freelancer. I just wanted to hold myself accountable to being able to consistently learn and create new things that people find interesting. It really was just me being consistent wanting to learn more.

As I kept improving and posting these improved works, a sort of brand emerged. I became obsessed and pretty good at creating photorealistic CSS art, and people enjoyed seeing the work and sharing it. It was honestly all a happy coincidence. Looking back, I see now that creating a brand and amassing a following on various socials for my work is the natural result of all of that hard work but back then, it was just about getting a little bit better every day and then sharing it.

Tips and key points that I see in hindsight:

  • Understand what sets you apart or create a key differentiator for yourself. Mine was CSS Art and animations.
  • Be consistent.
  • Have an online presence where you share your work and engage.
  • Figure out who your target audience is.
  • Figure out what really excites you. For me it was CSS Art specifically, but generally, I love all animations and front-end work.

Can you share some examples of your most creative or innovative uses of CSS for animations, transitions, or user interactions?

A lot of my favorite work also includes JS. I love the polaroid scroll animation I did that shows you how I “drew” the polaroid in CSS. I have it up on my website. I enjoyed the scroll animation on the bottom half section (with the black background) of this page. We needed to figure out a way to show a lot of really long pages of work without overwhelming the user and I think we knocked it out of the park here.

What are some of your favorite CSS features or techniques that you believe every web designer should know?

It is so important to have a great grasp on positioning. Especially relative and absolute positioning and how they relate to each other.

More positioning, learn CSS Grid!! I used to not be a huge fan of CSS Grid because it seemed overly complicated but it is an absolute game changer in quickly and efficiently implementing complicated layouts.

Pseudo-elements can really take some animations to the next level.

Learn basic animations that you can build on when needed. The same goes for animation timing functions.

How do you balance creativity and technical proficiency?

Great question. I used my creativity to gain more technical proficiency. I think of creativity as an irresistible dessert that I want after a long day or a really good dinner. I know I do not lack in the ideas department for things I want to create, but I do sometimes lack in the technical department. To address this disparity, I’ve adopted a strategic approach.

When I am faced with deadlines and deliverables, my primary focus is on enhancing my technical proficiency. Just as one might prioritize eating healthier foods vs. desserts every day. But since I love a good dessert, during my free time I try to implement any crazy or weird ideas I have. I think up an idea or look at my notes app for any I have yet to implement and figure out the technical proficiency required for it. Then I embark on a journey of learning with a sprinkle of frantic googling and errors until I get it right. Once I am able to implement it, I end up coming full circle. I used my creativity to gain more technical proficiency and am now able to utilize this new skill at work and also post it on social media.

What are your main focuses at the moment?

My current focuses at the moment are improving my skills and helping aspiring developers. I have been doing a lot of one on one’s with aspiring developers who reach out asking to talk about my journey or needing assistance on something they are stuck in. I have also been invited to speak at a few boot camps and college classes to talk about CSS Art and my journey to becoming a front-end developer.

How do you stay up-to-date with the latest CSS developments, best practices, and trends in web design?

I browse a lot of UI/UX, web design inspiration. To find these I either browse my LinkedIn, Twitter feed or inspirational websites such as Awwwards.com or Dribble.

Are there any CSS properties or techniques that you particularly enjoy using to achieve artistic effects?

I absolutely love stacking background gradients. You can make things people would think are impossible without an image. I have also been getting into clip-paths lately. This has opened a whole new world of possibilities for animations.

When looking at the technological landscape today, what makes you think “wow”?

Easy question, ThreeJS and WebGL. The effects you can create with the ThreeJS library are incredible.

What advice do you have for aspiring CSS artists who want to excel in the field and build a successful career in web design and development?

Be consistent in learning. That is the most important thing. When it comes to code, you can easily forget things you have learned if you don’t actually use them. This is why it is so important to be consistent. Post your work. People won’t know who you are or what you can do until you show off your work.

Are there any readings, podcasts or other resources that you enjoy or recommend?

I just really like looking at inspirational content all around the web. And following other successful developers and seeing what they create and cheering them on. For me this comes in the form of Twitter and LinkedIn.

What do you like doing in your free time?

I love to play video games with my husband. We have been playing the Halo Master Chief collection on legendary difficulty the past few weeks and it has been so fun. We also play a lot of other games with friends.

Which unusual skill do you pride yourself in having?

Being stubborn. I refuse to give up until I learn how something is made, and I dive headfirst into everything. I may not be the fastest learner in the world, but I am consistent, passionate, and stubborn.

Kassandra’s Working Preferences:

Early Bird or Night Owl?:
Night owl in my 20’s. Early bird in my 30’s

Food you can’t live without:
Zebra cakes and tacos. Best things ever made

Most quoted book, TV Show or movie:
Nacho Libre!

Next travel destiny in your list:
Costa Rica in December. I also want to travel Europe

Favorite type of weather:
Anything but the summer heat in Texas! I love sunny weather in the 70’s. But I also enjoy a good thunderstorm

Preferred spot in your town:
A Mexican restaurant with amazing margaritas and tacos

Favorite design tool:
Figma and just diving headfirst with my code editor

Last downloaded app:
Monopoly so I can play with my husband while he is watching football in the other room

If you could have any superpower, what would it be?:
Being able to learn a lot faster

What is something on your bucket list that you haven't done yet?:
Swimming with sharks! Or seeing a shark in real life from a boat. I haven’t decided yet, but it is definitely shark sighting-related

Thanks Kassandra!

  • Follow Kassandra on social media:

LinkedIn

Twitter

Youtube

Website

Learn more about Extreme Arts and Sciences

Recommended for you: