Front-End Web Development Setup in Ubuntu

Share

Installing Ubuntu

Installing Software

Installing Ubuntu 20.04 LTS

Step 1:

Download the latest Ubuntu iso file from here. LTS version is recommended.

Download Ubuntu ISO file

Step 2:

Now, the ubuntu iso file needs to be burned into a USB flash drive. So, download balena Etcher software. This software is very light weight and extremely easy to use.

Belena Etcher Software

Step 3:

Run the Etcher software.

  • Select the downloaded iso file
  • Select the USB flash drive ( 16 GB recommended )
  • Click on Flash

Step 4:

  • Now, Restart your PC
  • Enter the boot menu ( In my case, the boot menu button is F12)
  • Boot from USB drive
  • Install the Ubuntu Linux

For detail you can watch this video below:

CONGRATULATIONS! NOW, YOU HAVE UBUNTU LINUX…
Installing Software

Before installing anything, you need to update the installed Ubuntu. This will only take a few minutes to complete. For update:

Step 1:

Press Ctrl + Alt + T to open terminal
Step 2:

Run the following commands:

  • sudo apt-get update
  • sudo apt-get upgrade

Press Ctrl + Shift + V to paste this command on the terminal.

1. Brave Browser

NOTE: If you are good with the default Firefox browser then you can skip this installation.
Step 1:

Remove the firefox browser with the following command:

  • sudo apt-get remove --purge firefox
Ubuntu Terminal removing firefox

Step 2:

Run the following commands serially to install the brave browser:

  1. sudo apt install apt-transport-https curl
  2. sudo curl -fsSLo /usr/share/keyrings/brave-browser-archive-keyring.gpg https://brave-browser-apt-release.s3.brave.com/brave-browser-archive-keyring.gpg  
  3. echo "deb [signed-by=/usr/share/keyrings/brave-browser-archive-keyring.gpg arch=amd64] https://brave-browser-apt-release.s3.brave.com/ stable main"|sudo tee /etc/apt/sources.list.d/brave-browser-release.list
  4. sudo apt update
  5. sudo apt install brave-browser

Step 3:

Open a brave browser with the following command and set it to default:

  • exec brave-browser
CONGRATULATIONS! NOW, YOU HAVE BRAVE…

2. Visual Studio Code

Simply run this command:

  • sudo snap install --classic code
VS Code Software

There are some must-have extensions to help you in web development. Install the following extensions from VS Code:

  • HTML CSS Support
  • Auto Rename Tag
  • Live Server
CONGRATULATIONS! NOW, YOU HAVE VS CODE…

3. Figma

Figma is a great UI/UX design tool and its also available for linux. To install it:

  • Open Ubuntu Software and search Figma and install figma-linux.
Figma for Linux
CONGRATULATIONS! NOW, YOU HAVE FIGMA…

4. Adobe Photoshop

Adobe Photoshop doesn’t directly run on Ubuntu. You need a compatibility layer. We’ll use Wine with PlayOnLinux which is free and easy to use.

Step 1:

To install wine, type the following terminal command:

  • sudo apt install wine32      (Recommended)

OR,

  • sudo apt install wine64

Step 2: 

To install PlayOnLinux, type the following terminal cmd:

  • sudo apt install playonlinux

Step 3:

Download the Photoshop setup file and extract it.

Step 4:

Download the Crack file and extract it.

Step 5:

Open PlayOnLinux and click on ” Install “.

PlayOnLinux

Step 6:

Search and select Adobe Photoshop CS6. Then click ” Install “.

Step 7:

Click ” Next ” > ” Browse ” and locate the extracted Photoshop Set-up.exe file.

Step 8:

Now, PlayOnLinux will start normal Photoshop installation. Install the trial version of Photoshop. Now, you should see Photoshop Icon on PlayOnLinux main window.

Step 9:

To activate the trial version:

  • Open the “32-bit” folder from extracted crack folder.
  • Copy the crack file ” amtlib.dll “.
  • Open PlayOnLinux and open Photoshop Directory by right-clicking.
  • Paste(Replace) the ” amtlib.dll ” file on that directory.

Step 10:

Now, Adobe Photoshop CS6 is activated. Double click on the Photoshop icon and Enjoy!

Adobe Photoshop
CONGRATULATIONS! NOW, YOU HAVE PHOTOSHOP…

Basic Linux Commands: #

Share
%d bloggers like this: