DEV Community

Cover image for Styling your React App for beginners.
SpanglishGaby
SpanglishGaby

Posted on

Styling your React App for beginners.

Styling your project is one of the most difficult things to do especially when you are just starting in your career and want to build a nice portfolio.

Here you will find some tips and tricks that can help you to build a project that looks professional.

1. First considerations:

There are four primary elements that need to be considered when designing the style of your project

- Colors:Define the primary and secondary colors that you will use in your background, titles, and components.

colorhunt.co

- Typography: Choose a font that is easy to read. This post will show you some of the most popular fonts that web designers use.

Post about the font style for website

- Grid: determining the spacing of the elements, define where your images and components will be located.

- Graphics: Graphics and images add the chef's kiss to every design. Here are some great websites where you can find license-free photos and illustrations.

One tip for using these images is to always credit the artist, and use should be limited to personal projects, not commercial works.

www.freepik.com

2. Use the React Styling Packages:

When building an application in react, you can style everything in CSS, but styling your application that way can be tedious. Instead, consider using react packages for styling. Examples of great packages are:

CSS meme

Semantic UI

Material UI
*Fluent UI - click here

Fluent UI

Tailwind UI

Using React packages can be very useful but even by using then we cannot totally escape CSS: to make an stylish project we ultimatily need to combine both CSS and React packages.

Top comments (0)