CSS-Doodle Course - Startup File

CSS-Doodle Course - Startup File
In the last tutorial, we created a basic CSS-Doodle file that we can use as a startup file for any CSS-Doodle project. As we work through the code, we will discuss what it does. To see the completed CSS-Doodle startup file, use the link below.

CSS-Doodle Course - Startup File

Let's Get Started
  1. Log in to your account.

  2. To view your sketches, just click My Account - My Sketches, to be taken to a list of all of your sketches. (see screenshot)

  3. Click on the CSS-Doodle Course - Startup File sketch, to open the sketch in to the editor.

As we only have the CSS-Doodle-Course-StartupFile.html file, that code will be in the editor window. Most of this code is for setting up a web page to display in a web browser window. But there are a couple of lines of code that make this a startup file for a CSS-Doodle project.

<!-- call css-doodle.min.js -->
<script src="https://unpkg.com/css-doodle@0.8.5/css-doodle.min.js"></script>

The magic is created from a special JavaScript library file that is stored on the web. All we need to do in order to use this file is to call this file using a <script> tag in our HTML. This script tag tells the web browser to go to the given url to read the JavaScript file.

<!-- css doodle tag and selector -->
:doodle {

The opening <css-doodle> and closing </css-doodle> tags designate a special area where we will put all of our CSS-Doodle code. Inside these tags is the :doodle {} selector. All code inside the opening { and closing } of the :doodle{} selector will control the entire pattern, such as the size of the grid or canvas. The code that follows the closing } but still before the closing </css-doodle> tag controls what is drawn inside each cell of the grid. Everything happens inside these opening <css-doodle> and closing </css-doodle> tags.

<!-- call css-doodle.min.js -->

Finally, let's take a look at the first line of code in both examples above. It starts with <!-- and ends with -->. The text inside is called a comment and these opening and closing tags tell the computer to ignore the code. So if the computer ignores the code, then why did I add the code? Using comments in your code is an easy way to document your code. For example, the first comment above tells us that the following code will read and include the CSS-Doodle file that will run our CSS-Doodle program. Remember that we said that this file was in a special location on the web.

That's it for now.

Creating Code Art with CSS-Doodle - Tutorial Series Index

CSS-Doodle Copyright (c) Yuan Chuan. Licensed under the MIT License. CSS-Doodle Documentation.
Screenshots used by permission. Processing (Java), p5.js (JavaScript) and Processing.py (Python) are software projects created by the Processing Foundation.

Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map

Content copyright © 2019 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.