A collection of Front End Development elements that I designed and coded as independent projects or as part of client based requests.   Each element is accompanied by a brief rationale, explaining design decisions and relevant UX aspects of the User Interface (UI) and code. 

SURVEY FORM

In this project, I designed and coded a survey for a client who is a life coach. His aim is to clarify the expectations that new coachees have of the program and collect information for a data base to feed back into his practice. 

The questions in first person help make sense of the surveys responses whilst giving the customer a better user experience. They make the customer refer back to their own experience instead of giving general opinions, and provides a better ground for more specific stories and real life examples.

From a coding point of view, this survey was coded for accessibility: all tags have a semantic meaning and the "for" attribute has been used on all labels of the form, so that it can be read by screen readers. It also uses add media queries to make the layout responsive.  Click on the HTML, CSS and RESULT buttons to see the code and responsive layouts.

See the Pen Coaching Survey Form by Natalia Pelaez (@NataliaPelaez) on CodePen.

KALM. LANDING PAGE

See the Pen Kalm. Landing Page by Natalia Pelaez (@NataliaPelaez) on CodePen.