DEV Community

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

Posted on

2

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.

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay