A Tablespoon of Web Development - An Introduction to Essential Tools and Concepts

Essential Web Development Tools and Concepts

I've tutored and mentored the subject of web development to at least 15 friends and acquaintances over the past 7 years. I've written countless emails reviewing the same topics many times over. I found myself searching for previous emails and copying what I'd written in the past only to spend half an hour or more modifying it to make it perfect. That method is extremely inefficent so I finally decided to write some blog posts. This first post is a tablespoon sized helping of web development. Follow along with the final two posts that are one cup and one pound versions of the same.

Getting Started

Get used to seeing the title of this paragraph. You'll be "getting started" with hundreds or maybe thousands of technological concepts throughout your career as a web developer, but first we'll start with the basics. You need to understand the fundamentals of what allows a web developer to develop the web.This series is focused on development with Mac, but most of what you'll see applies to
Linux (very similar) and Windows (very different) systems with some adjustments.

Localhost

Localhost, aka your local development environment is a setup on your machine where you can write, run, and test code before deploying it to a live server. It includes tools like code editors, the terminal, libraries and frameworks, command line interfaces (CLI), your file system, and a slew of other tools.

The MacOS File System

The MacOS file system is organized in a hierarchical structure, starting from the root directory /. Some important directories include:

/Applications for installed applications
/Users for user-specific files and settings
/System for system files and settings
~ for home directory, which is effectively: /Users/[your username]

Understanding this structure will help you navigate and manage your files more effectively. The home directory is likely the most important directory on a web developers machine.

The Terminal

The Terminal, aka the command line or shell, is a tool that allows users to interact with their operating system through text commands. Unlike the graphical user interface (GUI) where users click on icons and menus to perform tasks, the Terminal provides direct access to the underlying operating system. Users can navigate the file system, manipulate files and directories, execute scripts, manage system processes, configure system settings, and run command line interfaces (CLI) through the terminal. The Terminal is accessible via Spotlight Search or through finder > Applications.

Using Spotlight Search to Open Terminal

Spotlight Search is a powerful tool that allows you to quickly open applications, including the terminal. To open the terminal using Spotlight Search:

Press Command(⌘) + Space to open Spotlight Search
Type Terminal
Press enter/return

This will open the Terminal where you can start typing shell commands.

The 10 Most Common Unix Shell Commands

Ten essential Unix shell commands you'll use frequently in your terminal:

ls: Lists files and directories in the current directory
cd: Changes the current directory
pwd: Prints the current working directory
mkdir: Creates a new directory
rm: Removes files or directories
cp: Copies files or directories
mv: Moves or renames files or directories
touch: Creates an empty file or updates the timestamp of an existing file
cat: Concatenates and displays the content of files
echo: Outputs the provided text to the terminal

What is an Integrated Development Environment (IDE)?

An Integrated Development Environment (IDE) is a software application that provides comprehensive facilities to programmers for software development. It typically includes:

Source code editor
Integrated terminal
Debugger
Version control integrations
Language support and other extensions
Intellisense (code hints)

Popular IDEs include Visual Studio Code, IntelliJ IDEA, Eclipse, Atom and many others. I use Visual Studio Code and all of my guides and tutorials will assume that you're using Visual Studio Code as well.

Your First Coding Project

You'll get started writing your first webpage using an online IDE called CodeSandbox. This tool is a virtual playground where you can quickly and easily write and run code snippets without setting up your local development environment.

Go to the CodeSandbox website
Click on Create a Sandbox
Select HTML + CSS
Open index.html from the Explorer on the left side of the editor
Highlight <h1>This is a simple HTML + CSS template!</h1>
Delete this line and replace it with <p>Hello, World!</p>

CodeSandbox comes already bootstrapped with everything you need to write your first HTML + CSS webpage. An online editor like CodeSandbox can be a powerful tool, but you'll need to learn to use your local development environment if you want to become a successful web developer.

That's all for now. Feel free to review this article multiple times. Use Google to research things you don't understand. It's easy to lose track of time, but you need to get your feet wet before you can swim. Be careful to not fall too deep into a rabbit hole on Google. Spend no more than two hours researching these topics and move on to the next article.

Next: A Cup of Web Development

Check out my other posts from this blog series:

Tablespoon of Web Development Cup of Web Development Pound of Web Development