Setting up tools for CSS Art

In this article, we will set up an offline text editor and local development environment. Then we’ll show you how to set up an account to use an online IDE.

Setting up tools for CSS Art
Photo by Hello I'm Nik / Unsplash

Introduction

This article is for beginners. You don’t require prior knowledge of the technologies discussed in the article.

We will show you how to set up VS Code in this article. We’ll set up our local development environment as well. If you prefer using an online IDE, refer to the online IDE section, where we’ll show you how to set up CodePen.

Offline Tool Set Up

Let’s go ahead and set up our offline tools. In this section, we’ll show you how to set up Microsoft Visual Studio Code, or commonly referred to as VS Code.

Subsequently, let's set up our local development environment. For HTML and CSS, this will not be a complicated process. It consists of creating a folder structure and putting some files in it.

VS Code

We will set up VS Code for macOS platform. For a step-by-step visual guide, refer to the official setup guide.

Overview of VS Code installation process.

  1. Download VS Code for macOS.
  2. Access downloaded archive.
  3. Extract archive contents.
  4. Put Visual Studio Code.app to Applications folder.
  5. Add VS Code to your Dock.

Jump to this article for details about VS Code and offline text editors.

Tools for creating CSS Art
In this article, we will discuss what tools you will need to make CSS art.

Now that we have VS Code installed in our computer, let’s set up our local development environment.

Local Development Environment

A local development environment is not a complex setup. We only need to make a couple of files and folders.

Here’s an overview of the files and folders that we’ll be making.

  1. Project folder
    For simplicity, we’ll name it project-folder. This is where you’ll collect all your project files and folders.
  2. styles folder
    We’re going to store our CSS files here.
  3. index.html file
    All our HTML code will go on to this file.
  4. styles.css file
    Our CSS code will all be in this file.

Here’s a visual representation of your folder and file structure.

project-folder/ (also called the root directory)
|
|--- index.html (HTML file)
|
|--- styles/ (CSS folder)
|   |--- styles.css (CSS file)
|

On macOS, it looks like this.

Folder and file structure on macOS
Folder and file structure on macOS

Caution for file, folder name casing and spacing

If you look at the name casing and spacing of our project folder and file, you will notice:

  • they’re all in small caps
  • words connected with a hyphen

Reasons for this are:

  1. Numerous computers, especially web servers, are case-sensitive.
    For example, if you have a file named styles.css and try to access that file from your HTML file as Styles.css, there’s a high probability that it may not work. This is because, with case-sensitive computers, it will treat them as two separate files.
  2. Web servers, web browsers and programming language do not handle spaces consistently.
    For example, if you put spaces in your filename, some systems may treat your filename as two separate file names. Some servers may insert %20 (the character code for spaces in URLs) to replace the space in your filename. This will convert project folder as project%20folder and this will break your URLs. Get into the habit of using hyphens to separate your file name words.

Recommendation from MDN documentation.

It's better to separate words with hyphens, rather than underscores. The Google search engine treats a hyphen as a word separator but does not regard an underscore that way. For these reasons, it is best to get into the habit of writing your folder and file names lowercase with no spaces and with words separated by hyphens, at least until you know what you're doing. That way you'll bump into fewer problems later down the road.

In the subsequent sections we’ll be making our project folder, index.html and styles.css file.

Make project folders and files

Let’s make our folders first, then make two files after that. Here’s our workflow:

  1. Make project-folder folder.
  2. Create index.html file.
  3. Make styles folder.
  4. Create styles.css file.

We’ll use VS Code to create the folders and files.

VS Code Icon
VS Code Icon

Step 1. Launch the app by clicking its app icon.

VS Code Open Folder
VS Code Open Folder

Step 2. In the Explorer pane, click on Open Folder.

VS Code Desktop New Folder
VS Code Desktop New Folder

Step 3. Click on New Folder button in the lower-left corner.

VS Code project-folder input
VS Code project-folder input

Step 4: Type project-folder for the folder name and click Create button.

VS Code Project Folder Open
VS Code Project Folder Open

Step 5: Click Open button in the lower-right corner.

VS Code Project Folder Screen
VS Code Project Folder Screen

Step 6: In the Explorer pane, you should see project-folder in all caps.

VS Code Index HTML File Input
VS Code Index HTML File Input

Step 7: Click on New File button. Type index.html and hit enter key.

VS Code New Folder Button
VS Code New Folder Button

Step 8: Click on New Folder button.

VS Code Styles Folder Input
VS Code Styles Folder Input

Step 9: Type styles and hit enter key.

VS Code Styles Folder New File Button
VS Code Styles Folder New File Button

Step 10: Click styles folder to select it. Next, click New File button to create styles.css file.

VS Code Styles CSS File Input
VS Code Styles CSS File Input

Step 11: Type styles.cssand hit enter key.

VS Code Project Folders Files Completed
VS Code Project Folders Files Completed

Step 12: All done! Great job

Online IDE

In the previous section, we set up VS Code and our local development environment. As a beginner, you may have felt that it was a lot of work to set everything up to make CSS Art. In this section, we’ll show you a less complex setup. Now, do take note that you need an internet connection to set up and use online IDEs. We will be using CodePen as our online IDE.

CodePen Set Up

CodePen is a great solution for creating CSS Art. It has a large community of designers and artists. You can browse through the galleries to find inspiration for all sorts of art and design.

From the CodePen about page:

👋 CodePen is a social development environment. At its heart, it allows you to write code in the browser, and see the results of it as you build. A useful and liberating online code editor for developers of any skill, and particularly empowering for people learning to code. We focus primarily on front-end languages like HTML, CSS, JavaScript, and preprocessing syntaxes that turn into those things.

Overview of our set-up work flow.

  1. Sign up for a CodePen account.
  2. Log in to your account.
  3. Create new Pen.
  4. Change Pen title to project-folder.
  5. Minimize JavaScript Editor.

Step 1: Using your web browser, head over to https://codepen.io.

CodePen Sign Up Button
CodePen Sign Up Button

Step 2: Click on the Sign Up button in the upper right-hand corner.

CodePen Sign Up Choice
CodePen Sign Up Choice

Step 3: You can sign up with your Twitter, GitHub, or Facebook account. Alternatively, you can sign up with email.

CodePen Login Page
CodePen Login Page

Step 4: Log In to your CodePen account.

CodePen Create New Pen
CodePen Create New Pen

Step 5: Click on your profile image. Then from the dropdown menu click New Pen button to create a new Pen.

CodePen New Pen Page
CodePen New Pen Page

Step 6: New Pen default title is “Untitled”. Let’s change that to project-folder.

CodePen Change Pen Title
CodePen Change Pen Title

Step 7: Click on pencil icon, type project-folder, then hit enter key.

CodePen Minimize JavaScript Editor
CodePen Minimize JavaScript Editor

Step 8: We won’t use JavaScript code for CSS Art. Let’s go ahead and minimize the JavaScript Editor. Click downward arrowhead beside gear icon, then click Minimize JavaScript Editor button.

CodePen Setup Complete
CodePen Setup Complete

Step 9: All Done! You’re ready to start creating CSS Art.

For a quick recap of CSS, HTML and CSS Art, jump to these articles.

HTML and CSS primer for CSS Art
In this article we will give you an overview of CSS and HTML, the technologies required to create CSS art.
What is CSS Art?
In this article, we’ll discuss what CSS art is. Give you an overview of its underlying technology, Cascading Style Sheets (CSS).

Conclusion

We set up our offline text editor, VS Code, and our local development environment. We set up our online IDE, CodePen.

Was that a lot of work? You bet! All this set up will pay off when we start creating CSS Art.

What do you want to create for your first project? Will it be a simple illustration, maybe a manga character, or a full-blown work of art?

Let us know! Give us a quick ping on Twitter @pyxofy, on LinkedIn or Facebook.

Hope you liked this article. Kindly share this article with your network. We really appreciate it.

References