Building digital products with component-based design

Demo data dashboard — a HTML template

There are many design systems, also called UI pattern libraries, that allow you to keep all graphic elements consistent. Unfortunately, they don’t tell you how to implement these elements in your product. The reason is that these design systems don’t know how your product works and interacts with the user.

UI dashboard

I wanted to create a UI dashboard and use it in different ways while keeping consistency in the design style. My dashboard displays text with charts and provides the user with the most important data. …

Stepwise explanatory how to build a lightweight app in React, part one.

The features include filtering users, search box, scroll bar and more.

As the craft of the Web Developer environment continues to evolve, you may feel overwhelmed by the amount of new technologies you need to learn. But hey, here is a recipe for you. Learning takes time, you better start today, slowly, gradually, and find consistency.


The same goes for React. With baby steps, you build a project starting off with building icons and text, then navigation and finally the pages. In my previous blog, I built a simple web-based project in HTML, CSS and JavaScript. Here, I created a smooth gradient generator writing a code with just one function.


NPM: a solace for a successful web developer’s project.

And how to speed up your work on a typical web developer’s project.


Find solutions for your problems using NPM.

NPM is created by and for developers to share JavaScript code with other developers who have written and found solutions for your daily coding issues. A knowledge base of scripts and a collective intelligence with code to build amazing products (i.e. games, AI, mobile apps, websites or VR apps).

The key is to find a suitable code (mind the amount of bytes!). Consider whether that package saves your time, is well written and has it a big community supporting it.

Why we use NPM?

A typical project of a developer would look like…

You should know the basics of HTML, CSS and JavaScript.

Follow these steps to build your own gradient generator using CSS linear gradient syntax.

Stuck at home, can’t go to events and can’t hang out with friends. I could gaze out of the window and wait, but then I found this platform called Zero To Mastery by Andrei Neagoie with lots of interesting stuff about Web Development. A community with more than a hundred thousand wannabe developers striving to acquire the latest and the best technologies on the market.

Create Color picker.

I started with creating a HTML file with elements such as header h1, h2, h3 and the script tag. Cool things that come with HTML and CSS are the input type “color” and the CSS…

Aneta Stojanowska

Digital Product Designer. Let’s create something amazing.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store