Ffrendi

[favorite_button]

Creator(s) (alphabetical)

Nina Lyons

Organisation(s)

Technological University Dublin

Discipline(s)

Arts and Humanities, Information and Communication Technologies

Topic(s)

Accessibility and Inclusion

License

CC 0

Media Format

Website

Date Submitted

Submitted by

Export Resource Data

Description

Ffrendi is an online, browser-based tool that makes it easier to learn and generate CSS visually. The name comes from the idea to provide a friendly frontend for learning and applying CSS.

Benefit of this resource and how to make the best use of it

Key Features
— Visual Object Creation
Add text, shapes, and other elements directly
onto the canvas.
— Live Styling Controls
•Fonts and typesetting (choose font families, adjust size, spacing, alignment).
•Filters like transparency, blur, &blend modes.
•Tools for size, rotation, X/Y coordinates.
— See the Code
See the code generate as you code.

Who is it for?
— Students & beginners learning CSS who want a more intuitive entry point.
— Educators who want to demonstrate CSS properties in real time.

Why use it?
— Removes the initial barrier of memorising syntax.
— Encourages experimentation — you can see the results of CSS changes instantly.
— Connects design skills with coding practice, making CSS less intimidating and more creative.

In short, Ffrendi is a sandbox for CSS, where you can play, learn, and then take your code straight into your project.

Creative Commons Zero (CC0)

This work has been dedicated to the public domain under a CC0 license, allowing unrestricted use, distribution, and adaptation without attribution.

https://creativecommons.org/publicdomain/zero/1.0/
? This citation is automatically generated and may require adjustment. Always verify it against your style guide.
Lyons, N. (10/07/2023). Ffrendi. National Resource Hub (Ireland). Retrieved from: https://hub.teachingandlearning.ie/resource/ffrendi/ License: Creative Commons Zero (CC0).

Adapting this resource? Share your version!

If you have modified or adopted this resource, share your version here. Tracking adaptations helps us measure impact and connects others with useful updates.

Related OER

What does success look like as a student?

In this short film, students in higher education across Ireland reflect on confidence, perseverance, first-time experiences, learning, and the small moments that can make a big difference.

The student voices featured here were gathered through the HEA Student Success Survey and Focus Groups in 2025 and are shared in their own words.

The animations are creative interpretations of those reflections, imagined and produced by second-year Animation students at Dún Laoghaire Institute of Art, Design and Technology (IADT).

From communicating in a second language to returning to education as a mature student, overcoming anxiety, and simply choosing not to quit, these stories explore the many ways success can be experienced.

Even small moments in college can be a success. What are yours?

Credits
Animation, Backgrounds & Compositing — Arantxa Vara
Animation & Backgrounds — Giada Randolfi
Animation — Zach Louis Ng Nocum
Animation & Backgrounds — Alex
Music composition & production — Darragh Winters

Special thanks
Karima Dillon
Eimhin Mc Namara
Rebecca Roper
The students who shared their experiences