- Quickly spin up a website ecosystem
- Gain familiarity with a text editor and the terminal
- Explore an HTML/CSS/JS project
In Part 1 of this tutorial, we will collect and utilize the basic tools needed to spin up and edit a website. By the end, you will have a local environment set up and the workspace needed to start noodling on a website, data visualization, or any other kind of web-based project. 👏
You might be a:
- Data Scientist
- Web Developer
- Interested person at any skill level looking to create a website
What you'll have running by the end of this post:
Let's go! 🚀
Collecting tools and files
- Node and npm
- Live server
- Visual Studio Code
- Sample project I put together for you
Don't worry if you've never used any of these tools before—I'll walk you through obtaining each one.
Using your machine's terminal might look like the most daunting step to tackle, but it isn't! With a few basic commands we will use it get a project up and running in no time.
In a nutshell, the terminal (also known as the command line) is a way to interact with your computer. It is used to send commands to the computer like moving through files and folders, installing and running programs, creating and deleting documents, or anything else you do within your operating system. The command line used to be the only way to interact with your computer—think back to MS-DOS!
Even though command line GUIs (graphical user interfaces aka programs) exist, terminals are still commonly used in development. I find that I can do tasks more quickly within the interface, whether that be navigating to a project and starting a server, using git, or running multiple environments at once. Since writing commands is like using a language, it gives me the freedom to express exactly I'm trying to do.
And it all comes with time. When I first began my journey into web development I only knew 1-2 commands and fudged my way through the rest. It is normal to make mistakes and google everything. Everyone does it.
Open your terminal
MacOS: Finder -> Applications -> Utilities -> Terminal
Windows: Start -> All Programs -> Accessories -> Command Prompt
The images in this article show a MacOS environment and the iTerm terminal. The standard terminal that comes with your computer is fine to use.
Navigation commands used in this tutorial
Terminal commands will be shown in the following grey blocks with unicode text.
make directory (Creates a folder aka directory. Do not include the brackets when naming your directory.)
change directory (Moves your terminal down one level into a folder)
change directory (Moves your terminal up one level out of a folder)
list files (Lists all files in the current directory)
Node and npm
If Node is not installed, the terminal will say that Node is not found. Head to nodejs.org, download the LTS version on the left, and follow the installation instructions. After installing, running the
node -v command will return the Node version, verifying that Node is installed on your machine.
Live Server is a wonderful and free development server that comes with a hot reload capability (automatically refreshing your browser anytime a saved change is detected).
To install, run the following command in your terminal:
npm install -g live-server
If you are seeing permission errors, you may need to add
sudo to the beginning of this command to grant admin access.
sudo gives you super-user permission to modify your computer. This is common issue for those using MacOS.
If you need to add
sudo, the command will look like this:
sudo npm install -g live-server
You may already have a text editor you prefer to use. Skip this section if you don't want to install VSCode.
A text editor is a program that allows you to write and edit all the code for your project in a range of programming languages.
The text editor used in this tutorial's screenshots is Visual Studio Code. I switched to VSCode because I like the large the large extension library and themes it provides.
To install VSCode, head to code.visualstudio.com, download, and follow the installation instructions.
Other text editors:
If this is your first dev project, I recommend keeping all project folders organized in the same location. My project repos are organized in a folder called repos located in my User root folder.
A new terminal window will usually default your User root folder (for me that is "margueriteroth"). Having my repos folder here lets me quickly point my terminal to that folder and to project. I suggest keeping your projects in a similar spot.
To create a new folder in your User root (your name) via the command line, open your terminal and make a repos folder:
Navigate inside your repos folder (aka change directory! 🤪):
Clone the sample project
Once inside your repos folder, copy (clone) the sample project:
git clone firstname.lastname@example.org:margueriteroth/our-project-starter.git
If you don't want to use the terminal for this, create a
repos folder the way you normally create new folders and directly download and unzip the project files: https://github.com/margueriteroth/our-project-starter/archive/master.zip.
Once cloned, the sample project will appear in your
repos folder. Point your terminal into this new project folder:
Here you will find our three project files:
scripts.js (the README.md is only used for the github repo description. Feel free to ignore it!).
Overview of the HTML, CSS, and JS files
The homepage page for a website is
index.html. HTML stands for Hypertext Markup Language. A markup language is a set of instructions on how to create a document, like a webpage for your browser. Markdown is another type of markup language.
HTML uses "markup" to annotate text, images, and other content for display in a Web browser. HTML markup includes special "elements".See all elements in the MDN docs
CSS stands for Cascading Style Sheets and it is a styling language used to style the HTML elements (ie. element size, color, placement, font, etc.). Within a CSS file, you target DOM elements using ids, classes, tags, and style using CSS syntax.
You may have seen CSS preprocessor files around: .less, .sass, and .scss, and a few others. Preprocessors are CSS-like languages that compile into CSS to be used by a browser. They allow developers to write CSS with less repetition and added functionally like mixins and color functions.
To keep things simple, we are sticking with vanilla CSS for this tutorial.
Running the sample project
Okay, the good part. Now that we have installed all the tools and downloaded the sample project, it is time to fire this baby up.
Make sure the terminal is pointed to the project directory. If not, navigate to it:
For the server to run our project, the server command needs to run while while in the project folder, which we just navigated to in the previous step. Otherwise, it will try and run something else.
Start the server 🔥
A browser tab should automatically open at http://127.0.0.1:8080/.
Editing the project
Start VSCode and open the
our-project-starter folder. Your terminal is already running the
live-server from this same folder location.
index.html we have a basic html structure with our content inside of the
<body> tag. To see hot reload in action, let's edit the
<h1> and save.
Boom! The world is our oyster. Continue editing the project files.
Awesome D3.js resources:
- Fullstack D3 book by Amelia Wattenberger
- How to Learn D3.js article by Amelia Wattenberger
- D3 Block examples, originally created by Mike Bostock
- Interactive Data Visualization for the Web book by Scott Murray
CSS frameworks provide a basic structure for designing consistent responsive layouts, elements, and functionality for the web. A main benefit is they provide a complete toolkit at the onset of a project and you don't have to write custom styles if you don't want to.
Chris Coyier has a great article about the pros and cons to using a CSS framework.
Twitter Bootstrap starter:
Twitter Bootstrap resources:
- Bootstrap official documentation
- Bootstrap grid system
- Twitter Bootstrap video Crash Course by Traversy Media
- r/bootstrap subreddit
Other common frameworks:
That's it! Let me know how it goes and don't hesitate to reach out if you have any questions.