Lesson Hero Illustration Image
Newline Image

Day 24

What are CLIs and GUIs? Differences and Similarities, Explained

CLI, GUIs, shells? You may not know it, but you're very familiar with all three.

This post is part of the series 30 Days of Web Development.

In this series, we start from the basics and walk through everything you need to know to get started with Web Development.

Newline Image

What are CLIs and GUIs? Differences and Similarities, Explained
#

CLI, GUIs, shells? You may not know it, but you're very familiar with all three.

Today we'll get more familiar with the differences between a CLI and a GUI. These terms are thrown around a lot. And honestly, their definitions are pretty easy to understand. Just defining them wouldn't justify a blog article.

As such, in this article, I am going to go a couple of steps deeper. The reason for this more-in-depth exploration is that understanding the relationship between an Operating System and CLIs/GUIs will help you think through more complicated processes later on.

Shell Summary
#

We chatted briefly about Shells in Day 3 and 4 when we talked about Operating Systems. Here's a quick reminder of that discussion: a Shell is an interface that gives you access to your computer's Operating System. Think of the Shell as a wrapper around your Operating System - technically it wraps around your Operating System's kernel. Hence the name Shell - a shell/protective barrier - around the brain/core of your computer.

Shells come in two forms:

  1. Command Line Interface: CLI for short, pronounced C. L. I.
  2. General User Interface: GUI for short, pronounced "gooey."

CLI
#

An example of a CLI is the Bash Shell that we played with via the terminal in yesterday's article.

GUI
#

GUIs are programs designed to make it easy for the everyday computer user to do things with their computer. They use graphics, icons, and menus to make navigation and executing commands accessible.

GUIs are on smartphones, smartwatches, anything computer-based you'll find GUIs. Here is an example of a GUI on the iPhones iOS. The GUI provides the icons, and menus you use to navigate or do things on your iPhone.

Here's one more example of a GUI on a smartwatch that starts your Tesla - wouldn't that be nice!

Before GUIs, computer users only had a keyboard and computer screen as tools. To do anything on the computer the user had to type out commands via a CLI. This process is not intuitive for today's average computer user. That's where GUIs come in; GUIs make navigation and actions easier to figure out.

In the following Exercise, we are going to spend time with the Finder program (the equivalent program in Windows is “File Explorer”), doing simple, everyday navigation. The Finder / File Explorer programs are of course GUIs.

Exercise: Playing with a GUI
#

  1. macOS Users: Open the Finder program on your mac (cmd + spacebar, type "Finder")

  1. Windows Users: This process is the same, but your GUI will look a little different. Instead of using the Finder program, you'll be using your File Explorer program.

  2. Once open, navigate to your Downloads folder.

  1. In your Downloads folder, go to the Finder menu at the top of your computer screen and click File -> New Folder.

  1. Name the folder whatever you would like and move some files into it.

Ta-da you just used a GUI 🥳.

GUIs are everywhere. If you find yourself navigating, clicking, or selecting graphical elements to do something to a device, then it's a safe bet that you are using a GUI.

More on CLIs
#

Unlike a GUI, a CLI only takes typed commands. It (generally) does not accept mouse inputs, nor does it have icons and buttons to help you do things. Instead, you command it to do things via your keyboard.

 

This page is a preview of Your First 30 Days of Web Development

Get the rest of this chapter and 180+ pages of Web Development instruction for free.

The entire source code for this tutorial series can be found in the GitHub repo, which includes all the styles and code samples.

If at any point you feel stuck, have further questions, feel free to reach out to us by:

Course Author

Avatar Image

Angel Garbarino

👋 Hi! I’m Angel, the author of the book.

I am a self-taught Frontend developer. Not until I was in my early thirties did I seriously consider building up skills as a web developer. In all honesty, I wasn’t even sure what it meant to work as a web developer. All I knew was, I wanted to work on computers because I was decent at using them, and I was attracted to the job opportunities.

I wrote this book for the “me,” five years ago; for the person who is starting to think about what it might take to become a programmer or web developer. My path was convoluted, stressful, and inefficient. But it did not have to be.

I started by reading articles and seeking advice from friends. I continued with more articles, books, and online courses. As my skills or ability to fake-my-skills improved, I sought out consulting gigs. Fixing friends’ websites, and then being hired out as a consultant. On the job learning is great, but I had no idea what I was doing and stressed and slept little during these contracts.

Eventually, I landed a position at a web application company. I made friends, asked questions, and studied the skills I learned were needed for a job as a Frontend Developer. The weekend studying paid off, I applied for a Frontend Developer position, and I got it!

In this book, I will cover the fundamentals. But more importantly, I will talk about why they are the fundamentals. My goal is not to teach you a specific skill like HTML. Instead, I show you how to navigate what’s ahead of you. I get you set up for your next steps, whether that’s a path of self-learning or attending a bootcamp. By the end of this book, you will be able to make an educated decision about your future and understand the steps and commitment it will take to get there.