Katy Watkins

A Beginner's Guide to Web Dev Work Part 1: An Overview

Published 10 Mar 2021

This is Part 1 of a series I'm writing for a dear friend who's been teaching herself how to code. It's intentionally aimed at folks who are new to this industry. I'm trying to write down and clarify a lot of the knowledge that's just assumed when you start a job or look to contribute to an existing project.

Quick heads up: You won't be writing any code from this post, this is just setting the stage. If you want to jump straight into code, head to Part 2.

End Goal #

At the end of this series, you should have a solid understanding of how to set up your machine to run a project with a Node.js development server, pull down that project from Github, make changes, and push them up to make a pull request. You'll also gain some experience working on the command line.

You can expect to learn a bit about:

Prerequisites: #

The Project #

We'll be working towards being able to edit a very simple website about penguins, built with HTML, CSS (plus Sass), and a tiny bit of Javascript. I built this many, many years ago as I was trying to teach myself web design, then promptly abandoned it for years. I've now updated it to run a Node.js development server and auto-refresh changes so it mimics more of my professional development experiences.

Why is this so complicated? #

At its core, web development is simple. You have a basic html page, add some CSS to style it, and maybe add some Javascript for extra flair if needed. But the bigger and more complicated the website (or application!), and the more people who are involved in working on that project, the more those basics will cause you problems if used without other tools. (Imagine trying to build and maintain a complex website with thousands of pages with just plain HTML and CSS!)

There are countless tools and frameworks to abstract away some complexity, or formalize particular patterns, and/or save time by doing a bunch of setup for you. These tools can be powerful, but they also make for a steeper learning curve.

The project we're digging into is somewhat simple, but there are two complicated things happening in it's current state:

Sass #

First, it uses a CSS preprocessor, Sass. A preprocessor is a program that takes some input, transforms it, and then outputs that data to be used as an input for something else. We'll be working with Sass files when writing our styles, but in order to see something in the browser, our Sass needs to get converted into plain CSS.

At the time I started building this site, a preprocessor was the only way to use variables for styling. Using a preprocessor adds initial setup complexity, but it also provides useful features that helps you write and maintain styles more efficiently. It's not as crucial these days as CSS continues to add new features like custom properties, but preprocessors are still very commonly used.

Local development #

The other complicating factor is that this project uses a Node development server. I used an app I can't remember to handle Sass compilation when I first built this site, but it's been many years since I've used something like that. The project now includes a development server to ease you into a common technology for Javascript projects. It adds to the complication of setup, but it'll compile our Sass into CSS on the fly and automatically refresh the site each time you save changes.

When you go to a website, you're typically viewing the results of running a bunch of code, not the exact code that was written. (Remember, we can't maintain apps and websites easily writing just vanilla HTML). We want to mimic that scenario so you can test the website on your computer (often referred to as testing "locally") and get immediate feedback after making changes. If you change a background color in your CSS and have to manually refresh the browser to see them, you'll get tired of that real quick. So what if the project could just handle that automatically?

The good news is, it's very possible. There are many different ways to achieve this outcome, but I'm using a couple Node.js packages to accomplish this, purely because that's what I'm familiar with.

What you will need to run this this project #

Git #

The first thing you'll need is Git. Git is a version control system, and makes it easy to save a history of your project over time. Really, anything could be put in version control. Photoshop files, photos, pdfs... if it exists as a file on your computer, git can store an exact snapshot of that file and keep adding new snapshots over time as you commit changes. But it's particularly handy for any sort of basic text file (like code files), as there are numerous applications that will show you the contents of those files, and a diff of the changes.

This is how most software projects are managed. Git isn't the only version control system out there, but it is by far the most popular, so that's what we'll be using.

To add an additional complication to this, we're working with a project hosted on GitHub. Github is a cloud service that provides useful visualizations of git data and mechanisms for adding, reviewing, and saving or rejecting changes to project. This makes it much easier to to collaborate with others on projects. So you'll need Git on your machine to make changes and create data that will then get pushed up to GitHub, where you'll create a pull request to show the changes you want to add to the project.

Node.js #

The other thing we'll need is Node.js. Node's website says it's "a JavaScript runtime built on Chrome's V8 JavaScript engine." Basically it's a Javascript framework that lets us run JavaScript outside of the browser, and therefore do all sorts of cool things. You don't really need to worry about fully groking this, I've been working on projects using Node dev servers for years and still wouldn't say I deeply understand Node and what it does. It's not involved in making the site work once it's published or in production, it's just a tool that makes it easier to work with the website on your machine.

So, now that we've covered exactly why this is so complicated and what you'll need, let's get started. In the next post, I'll cover how to get your computer ready to pull down and run this project.

On to Part 2: Git & Github

Back to Journal