Website tips and tricks

Here you will learn modern web development tips and tricks We will see below topics.

Centering things

You can use flex box to center the things. Below css applied on flex parent element will center all child element content.

justify-content: center; /* horizontally center */
align-items: center; /* vertically center */

If you are using grid, you can use below css to do the same thing.

Fixed position Elements

You can use position fixed to fix the element on page.

Icons

There are several options when it comes to add icons to website. But the one I like is font awesome. Follow below steps to add icons from fontawesome in react or nextjs project.
  • Install the dependencies for free icons
  • Create a library of icons
  • Use icons

Install dependencies

npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons

Create a library

This is a IconLib.js

import { library } from '@fortawesome/fontawesome-svg-core';

import { faImages, faHouseUser,faHouse } from '@fortawesome/free-solid-svg-icons';
import {
  faGithubAlt,
  faGoogle,
  faFacebook,
  faTwitter
} from '@fortawesome/free-brands-svg-icons';

library.add(
  faImages,
  faHouse,
  faGithubAlt,
  faGoogle,
  faFacebook,
  faTwitter,
  faHouseUser
);

Use icons

Import the library and fa module in component.

import '../components/IconLib'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

Then you can use it in your component.

<li><FontAwesomeIcon icon={['fas', 'house']} /></li>
<li><FontAwesomeIcon icon={['fas', 'images']} /></li>

You can also add color and size using below syntax.


<FontAwesomeIcon icon={['fab', 'twitter']} size='4x' style={{color:'lightblue'}} />
<FontAwesomeIcon icon={['fab', 'facebook']} size='4x' style={{color:'navy'}}  />