Hello,

my name is Johnny Garces and I'm a self-taught designer and front-end developer.

I've used UX research in all of my work to solve problems for businesses and city-agencies in NYC.

Hello,

my name is Johnny Garces and I am a self-taught designer and front-end developer.

I've used UX research in all of my work to solve problems for businesses and city-agencies in NYC.

Work
Administration for Children's Services
UX Research

In situations involving trauma such as separating children for foster care, it is a best-practice for UX researchers NOT to interview families in a way that invokes painful and traumatic memories.

In the "Pathways to Prevention" initiative with the Administration for Children's Services (ACS), I helped design toolkits that encouraged families to share their stories in a dignified way using a "strengths-based" and trauma-informed approach.

NYC Opportunity
UX Research

The Mayor's Office for Economic Opportunity (now known as NYC Opportunity) launched the nation's first civic-design studio in order to incorporate thoughtful Service Design in urban policy.

My role was to identify ways of standardizing the studio's UX research process from ideation to product execution.

AlertaMe
UX Research, Product Design and Development

AlertaMe was the solution to a personal problem that morphed into a Twilio-powered SMS notification system for local businesses and organizations. The service is used to engage customers in case of any alert-notifications.

My role was to understand my user's goals, develop the application, and validate the solution with my users.

Let's learn together

I'm paying it forward, thanks to all the amazing teachers who helped me get into the world of design and development.

I've started the JohnnyBeCrafting youtube channel as a way to document my growth in product-design and web-development. My mission is to explore how design influences development, and what the thought-process is for guiding the creation of interfaces and products.

In this channel I explain concepts in HTML/CSS/JS, but most importantly I strive to ask the most important questions like "why", "how", and "what if" for guiding the creation of products.

Let's learn together

I'm paying it forward, thanks to all the amazing teachers who helped me get into the world of design and development.

I've started the JohnnyBeCrafting youtube channel as a way to document my growth in product-design and web-development. My mission is to explore how design influences development, and what the thought-process is for guiding the creation of interfaces and products.

In this channel I explain concepts in HTML/CSS/JS, but most importantly I strive to ask the most important questions like "why", "how", and "what if" for guiding the creation of products.

I'm now learning...

Scalable CSS with B.E.M

Front end development

Is your CSS scalable?

How you structure your CSS in the early phases of your development will affect how maintainable your codebase will be in the long-run.

BEM stands for "Block Element Modifier" and allows you to structure your CSS in a way that's component-based, reusable, and state-driven. You'll be able to create modular "blocks" with nested "elements" that can be modified with different styles. For example, a button "block" and contain a text element with a modifier when it's hovered or clicked.

Interested in leveling up your CSS with BEM? Let's learn this together!


Is your CSS scalable?

How you structure your CSS in the early phases of your development will affect how maintainable your codebase will be in the long-run.

BEM stands for "Block Element Modifier" and allows you to structure your CSS in a way that's component-based, reusable, and state-driven. You'll be able to create modular "blocks" with nested "elements" that can be modified with different styles. For example, a button "block" and contain a text element with a modifier when it's hovered or clicked.

Interested in leveling up your CSS with BEM? Let's learn this together!


Scalable CSS with B.E.M

Front end development

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Is your CSS scalable?

How you structure your CSS in the early phases of your development will affect how maintainable your codebase will be in the long-run.

BEM stands for "Block Element Modifier" and allows you to structure your CSS in a way that's component-based, reusable, and state-driven. You'll be able to create modular "blocks" with nested "elements" that can be modified with different styles. For example, a button "block" and contain a text element with a modifier when it's hovered or clicked.

Interested in leveling up your CSS with BEM? Let's learn this together!