Introducing Ant design#

To make our application look good in all screen sizes, we want our application to be responsive. We can write media queries ourselves which can take a lot of time to render and to explain. Also, it's outside the scope of this course. What we can do is that we can install a UI framework which will help us tackle this responsive application problem. It will also allow us to save time in many aspects like designing the frequently used components such as Cards, footer, list etc.

This is a big course and we want to save our time wherever we can. Using UI framework can be our best bet. Trust me, it will save a lot of our development time; although, there are some disadvantages as well. Your application is not as much customizable as it could have been with custom css, and your application might look like someone else's who's using the same UI framework. It also has a larger bundle size because of the framework's presence. But here, we're focusing on creating an application which has the functionality of a real world e-learning application. Styling is, anyways, very subjective; you might have a different liking for a color scheme, grid layout or even choice of images. By using a UI framework, you can choose to use it as it is, or create a custom component by yourself. So, everyone's happy here.

When it comes to choosing a UI framework, we have plenty of options such as Bootstrap, Semantic UI, bulma and many more.

• Bootstrap

• Bulma

• Semantic UI

These frameworks provide us the styling when we use css classnames provided by these frameworks. Although it works perfectly well, with react it's always a good idea to have a component which can be used anywhere in the application. That problem is also resolved, as we have react-based framework provided by these three.