Ricardo Zea

5.0

(147 reviews)

US$22.00

For every 15 mins

217

Sessions/Jobs

First 15 mins free for your first session

ABOUT ME

Sr. Web Designer | Figma | CSS & HTML Expert

Hello!

I'm a Sr. Web/Product Designer with extensive experience in all aspects of web design: ideation, sketching, wireframing, designing, prototyping, coding static pages, hand-off to dev., and maintenance.

Good eye for elegant design and highly versed in technical subjects of the web. Fully capable of creating production-ready HTML and CSS.

Codementor - 1:1 Web Design Expert - Rating: ★★★★★

I mentor with simple-to-understand language and terminology, clear examples, and honest patience. Every time you have a lesson with me, I guarantee you will level up. 🎓 - See reviews here: https://www.codementor.io/@ricardozea

If you are more interested in what else I have to say about this industry, below are two books I have authored, followed by a list of my work:

“Mastering Responsive Web Design”: https://masteringrwd.com
“Web Developers Reference Guide”: https://tiny.cc/web-devs-reference-guide

💻 View my design and technical work:

Portfolio: https://ricardozea.design
Smashing Magazine: https://www.smashingmagazine.com/author/ricardozea/
Amazon: https://www.amazon.com/Ricardo-Zea/e/B0781579BS/
Dribbble: https://dribbble.com/ricardozea
CodePen: https://codepen.io/ricardozea
Medium: https://medium.com/@ricardozea

“There are no dumb questions. It's just dumb not to ask.” — Yours truly 👍

Spanish, English

Eastern Time (US & Canada) (-04:00)

Joined April 2016

EXPERTISE

Web Design

10 years experience | 57 endorsements

This is what I am, this is what I do: Web Design. • Need to troubleshoot the HTML and/or CSS? • Are things not aligning correctly? • Nee...

This is what I am, this is what I do: Web Design. • Need to troubleshoot the HTML and/or CSS? • Are things not aligning correctly? • Need assistance in implementing your design in HTML and CSS? • Are you learning Figma? • Want to learn how to create interactive prototypes in Figma? I can help with all these and many more :) I will guide you through your issues step by step, from a design & technical standpoints, while teaching you the HTML+CSS and Figma things you need to know to DIY your projects. I will put 110% of my effort into making your design look solid, accessible, memorable, compatible and compliant with best practices.

Web Design

Figma

6 years experience | 6 endorsements

I'm fully aware there's always more to learn. But if you are having issues with Auto layout, Variables, components, want to improve or cr...

I'm fully aware there's always more to learn. But if you are having issues with Auto layout, Variables, components, want to improve or create prototypes, or fully create a design system or UI kit, I may be able to help. I have extensive experience using Figma for all types of projects, using best practices.

Component libraries Auto Layout Design Systems

Component libraries Auto Layout Design Systems Figma Wireframing/prototyping

Design Systems

1 year experience | 1 endorsement

Want to create a design system and don't know where to start? I can help. Creating a design system can be scary, it was for me. But not ...

Want to create a design system and don't know where to start? I can help. Creating a design system can be scary, it was for me. But not anymore. I will walk you step by step on how to create a design system: create color palettes for light and dark themes, create color primitives, then color semantics, then choose your typography and create the typography primitives, and then the typography semantics, etc. And then, I will show you how to use them to create a design system for you, for your client, or for your company :)

Figma

HTML/CSS

10 years experience | 97 endorsements

I've been working with HTML/CSS since I started in Web Design 15+ years ago so I'm very familiar with both technologies. No HTML/CSS cha...

I've been working with HTML/CSS since I started in Web Design 15+ years ago so I'm very familiar with both technologies. No HTML/CSS challenge is too small for me.

Wireframing/prototyping

10 years experience | 4 endorsements

Technical Prototypes I've always implemented my own designs with production-ready HTML, CSS, and jQuery using presentational JavaScript....

Technical Prototypes I've always implemented my own designs with production-ready HTML, CSS, and jQuery using presentational JavaScript. UX Prototypes My go-to tool is Figma 100%. I've also used InVision App, Flinto, MarvelApp, and other tools to create mobile prototypes. I can help you create virtually any kind of prototype for any project.

Mockups Wireframing/prototyping

UX/UI Design

10 years experience | 10 endorsements

As an experienced Web Designer, I've been doing UI/UX Design since I started in this business. From a UX perspective, I can create sound...

As an experienced Web Designer, I've been doing UI/UX Design since I started in this business. From a UX perspective, I can create sound designs based on well known human behavior principles. From a UI Design point of view, I am able to create appealing and logical visual designs that reflect the strategies of the project. I understand specific concepts of typography, layout, color, branding, user flows, design principles that help communicate ideas, etc.

Web Design

Accessibility

10 years experience | 1 endorsement

Accessibility is a broad subject, but using basic accessibility features like ARIA roles can go a long way. I can help you make your p...

Accessibility is a broad subject, but using basic accessibility features like ARIA roles can go a long way. I can help you make your pages accessible with little effort.

Usability Accessibility

REVIEWS FROM CLIENTS

5.0

(147 reviews)

Ashley Whelan

January 2025

Had a great experience with Figma tutoring from Ricardo. He was thoughtful, patient and prepared for each of our sessions. And, he set realistic expectations about what we could accomplish in a given amount of time. I learned a lot of basics about Figma and handy best practices and shortcuts to make my work more efficient. Would absolutely work with him again!

Removed User

September 2024

Helped my with my HTML and CSS code Helped clean up my code to make my website more presentable

Samantha Gaiser

April 2022

Ricardo helped me with some graphic design stuff in regard to creating a logo. He gave me some great suggestions and helped me come up with a great strategy to move forward on my project. Thanks, Ricardo.

Mike G

February 2022

Ricardo graciously helped with the responsiveness and styling of my React application. I was having trouble with the spacing of particular boxes within a grid format, and Ricardo was able to help break down and ultimately solve the issue. Looking forward to our next session in the future. Thanks!

Dee Barizo

February 2022

Another great session with Ricardo. He provided great ideas for a UX/UI design that I was trying to building. I was trying to build it one way but Ricardo showed me a better way to build it that looks better and is easier for the visitor to understand. A+

Colm Ginty

January 2022

Ricardo was very knowledgeable and challenged my preconceptions about what I was trying to do. This was very helpful and prevented me from wasting a lot of time.

Marko Petrovic

December 2021

Ricardo provided straightforward and specific feedback towards the design of our website and immediate suggestions for how to apply professional design strategies for our use case.

Victoria

November 2021

Ricardo was really helpful during our class session. He explained very clearly for me to understand. we talked about display:flex, box model etc. Also how make the Html structure more clear and simple. He is really easy to understand and really helpful with my questions. Hoping to take another lesson with him soon

jai

November 2021

Ricardo explained the thought process of creating a responsive web page, as well as going over the flex property and sophisticated HTML

jai

November 2021

Amazing!

SOCIAL PRESENCE

Stack Overflow

8109 Reputation

Community Posts

100% Responsive Typography System using a Modular Scale

Learn how to build a responsive typography system for your website in a simple way. No intricate equations or convoluted explanations of the CSS. This tutorial is so simple, even an 8-year old can understand it :). Time to level up! Let’s go!

[Sass] For Beginners: The Friendliest Guide About INSTALLING and USING Sass on Windows

The simplest and most detailed guide about how to install and use Sass you’ll ever read!

Clients/Mentees, Avoid These Terms in your Job Requests☝️. Seriously.

How a simple term like "easy" is a bit disrespectful to the mentor. Advice on how to fix this problem ;)

EMPLOYMENTS

Design Expert Mentor

ADPList.org

2024-12-01-Present

Help design professionals in all areas of design, from career mentoring to specific design-related and tool-specific mentoring.

<ul...

Help design professionals in all areas of design, from career mentoring to specific design-related and tool-specific mentoring.

Provide design feedback.
Help designers improve their projects.
Give professional advice to designers.
Teach Figma to designers.
Help designers level up their skills.
Assist designers with design systems.

Design

Web Design

Coaching

Design

Web Design

Coaching

Tutoring

Mentoring

UX/UI Design

Figma

Web Accessibility

Interaction Design

Sr. UI/UX - Digital Designer - Consultant

NodeSource

2020-12-01-Present

Facilitate UI/UX Design expertise for their custom-built N|Solid platform.
Provide UX analysis of new features and UI des...

Facilitate UI/UX Design expertise for their custom-built N|Solid platform.
Provide UX analysis of new features and UI designs in wireframes and implementation-ready designs.
Heavy use of Figma to create wireframes, demos/prototypes, and technically sound designs.
Advice on UI/UX best practices and recommendations while looking for ways to innovate with new ideas.
Extend their solid brand in the newly created designs for the requested features.
Recommend messaging approach for marketing initiatives.

UIKit

Web Design

UX/UI Design

UIKit

Web Design

UX/UI Design

Zeplin

Figma

Design Systems

Interaction Design

Online Expert Mentor: HTML, CSS & Web Design

Codementor

2016-04-01-Present

Live 1:1 expert web design mentor focused on helping other web professionals: web designers, front-end developers, and front-end designer...

Live 1:1 expert web design mentor focused on helping other web professionals: web designers, front-end developers, and front-end designers. I've helped people with all sort of web design issues: HTML, CSS, Sass, layouts, slideshows/carousels, accordions, page designs, typography, flexbox, responsive designs, hamburger menus, jQuery, some vanilla JavaScript, SVG, properly writing Sass/CSS, box model, CSS animations, etc. Profile: https://www.codementor.io/ricardozea Average Rating: ⭐⭐⭐⭐⭐ (5.0) - https://www.codementor.io/ricardozea#/review

HTML/CSS

Responsive Design

Accessibility

HTML/CSS

Responsive Design

Accessibility

UI design

Web Design

usability principles

Sass

PROJECTS

MeTRA®

Tenet3

2019

MeTRA® is a web application for analyzing the economics of cyber security solutions in complex systems. MeTRA® enables manipulation of ...

MeTRA® is a web application for analyzing the economics of cyber security solutions in complex systems. MeTRA® enables manipulation of graphical system models and rapid calculations of complex system data for quantitative metrics and their resulting insights.

HTML/CSS

React

HTML/CSS

React

Website redesign: The Gym of West MiltonView Project

The Gym of West Milton

2019

Fully redesign and implement in HTML+CSS the new website for the gym. Provide support and maintenance.

HTML/CSS

Responsive Design

Web Design

HTML/CSS

Responsive Design

Web Design

css/sass

By using Codementor, you agree to our Cookie Policy.