Welcome to workingTitle!
This toolkit helps you make generative art using the three core coding languages of the internet. Let's start by understanding what each does.

---

HTML defines what will appear on each page.
(HTML = elements)

CSS defines how those elements look.
(CSS = style)

Javascript defines what those elements do.
(Javascript = behavior)

---

Let's start building your own project! Choose a folder to explore tools and starter code templates. Add whatever you'd like and when you're ready, hit the "Run" button on the editor to see what you've made.

Text gives your project a voice; you’ll use HTML to add it and CSS to style it.

---

HEADERS

Header tags (<h1> through <h6>) define titles and section headings. The smaller the number, the larger and more important the text. Some examples of what that syntax looks like are below:

<h1>Main Title</h1>
<h2>Subheading</h2>
<h3>Smaller Section Title</h3>

PARAGRAPHS

Paragraphs are written with the <p> tag. Use this tag for most blocks of body text.

<p>This is a simple paragraph of text.</p>

TEXT STYLES

Emphasize or decorate words using inline tags.

<b>Bold text</b>
<i>Italic text</i>
<u>Underlined text</u>
<em>Emphasized text</em>

TIP: Use these tags inside of header or paragraph tags to show importance.

Example:

<p>This is a <b>really</b> important word.</p>

gives you → This is a really important word.

---

FONT & COLOR (CSS)

Once your text exists in HTML, you can customize its look in CSS. Below is an example of how to define the text style. Read on to learn about each part of the syntax.

p {
  font-family: 'Arial';
  font-size: 18px;
  color: #9FD1FF;
  text-align: center;
}

The main parts of this consist of font, size, color, and alignment. In the example above, the "p" indicates you are setting the style for all text written using the <p> paragraph tag. You can do the same for headers (for example, h1 { ... }).

Font Family

CSS automatically recognizes a few fonts, known as "web-safe" fonts. They include:

• Arial (sans-serif)
• Brush Script MT (cursive)
• Courier New (monospace)
• Garamond (serif)
• Georgia (serif)
• Tahoma (sans-serif)
• Times New Roman (serif)
• Trebuchet MS (sans-serif)
• Verdana (sans-serif)

You may have noticed that many websites use fonts that are not on this list. To do this, the font must be loaded from the web using a URL. This is pretty common, and here's how that looks in practice.

To start, you need to add the @import tag at the top of your CSS file by pasting it before all of your other CSS styles. This example uses a font from Google Fonts:

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap');

Now that the font is imported, you can apply it anywhere else in your CSS file.

body {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 18px;
  color: #9FD1FF;
}

TIP: Keep copyright in mind when choosing fonts! Fonts from Google Fonts are open source, which means they are free to use. However, some font sites require a license if you're using the font for professional or commercial work. If you're just experimenting or making something for yourself, you're generally in the clear. Licensing matters most when you plan to sell or publicly distribute the final design.

Font Size

Font size is measured in pixels. A good general range for body text is around 16px–20px, but this is not a strict rule. Do whatever feels right to you!

Font Color

You can use either color names (like "red" or "blue") or color codes (HEX or RGBA). If you know the color visually but not the code, you can search for the HEX number online. The internet is your friend for making this step easier!

Text Alignment

You can control how text is positioned horizontally using "text-align." Options include left, right, center, and justify.

Text can do more than just sit on the page. It can glow, bend, or even look 3D. These effects are created with CSS, and they build on what you’ve already learned about styling.

JUST A NOTE: The <h1> tag is used in multiple examples below. This tag should only be used if the provided HTML also uses h1. If h1 is NOT the tag being used in your HTML, use the correct corresponding tag instead. Failure to do so will make it so your CSS styling won't apply to your text and make you real sad!

---

GLOWING TEXT

Use "text-shadow" to make glowing or neon-style text. You can layer multiple shadows for brighter effects. Each shadow adds another layer of glow. Try different colors or intensities for variety. See the example below:

h1 {
  color: #7FA8FF;
  text-shadow:
    0 0 5px #7FA8FF,
    0 0 10px #7FA8FF,
    0 0 20px #3C4BE0;
}

---

OUTLINED TEXT

You can outline text using the "-webkit-text-stroke" property (supported in most browsers).

h1 {
  color: transparent;
  -webkit-text-stroke: 2px #7FA8FF;
}

TIP: Combine this with the "text-shadow" styling discussed in the Glowing Text section above for bold, poster-like lettering.

---

3D TEXT (USING SHADOWS)

You can create a 3D illusion using multiple shadows with different offsets.

h1 {
  color: #9FD1FF;
  text-shadow:
    1px 1px 0 #000,
    2px 2px 0 #000,
    3px 3px 0 #000;
}

The more shadows you stack, the deeper the text looks. Adjust the direction (x, y) to control the “light source.” The text-shadow syntax here is left/right offset, up/down offset, blur, and color. To change the direction of the shadow, change the pixel offset numbers from positive to negative. Play with these values to see how the effect changes!

---

WAVY OR CURVED TEXT

Let's start with a quick HTML structure to set up the elements to display.

<div class="wave-text">Hello World</div>

The class "wave-text" is important syntax because it allows us to recall this section of text in the CSS properties. We'll utilize the "transform" property to get the text to move the way we want.

.wave-text {
  display: inline-block;
  font-size: 32px;
  animation: wave 2s infinite linear;
}

@keyframes wave {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(5deg); }
  50% { transform: rotate(0deg); }
  75% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}

This example gives your text a gentle wave motion reminiscent of a 90s web banner. Let's breakdown the different properties used here.

Display

The display property is used to control the layout of elements. It has multiple different options which include (but aren't limited to) block, inline-block, flex, and grid. The exmaple above uses inline-block, which tells the HTML to display the elements on the same line with block properties (pretty self-explanitory given its name!). For more information about the different property options, I'd recommend heading over to THIS SITE.

Animation

The @keyframes property is used to specify sequential steps that the CSS code will execute. In this specific example, the steps are defined using a transform rule, where the text will move and rotate to the specified angles.

Defined in our @keyframes, we've named all the transformation actions we want "wave." Now let's look back at the .wave-text block and break down the syntax. The first part calls for the "wave" function. Following is the duration (2 seconds), iteration count (continue indefinitely), and timing (constant, no aceleration or deceleration).

---

PERSPECTIVE / ROTATED TEXT

You can use transformations to tilt or rotate text in 3D space.

h1 {
  transform: perspective(400px) rotateY(25deg) rotateX(10deg);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
  }

TIP: Combine this with shadows or gradients for a retro 3D logo look.

---

BEST PRACTICES

• Limit effects. Too many can will make text hard to read.
• Use glow or shadow on dark backgrounds for contrast.
• Keep animations subtle and slow.

Animation adds life to your designs by combining movement, timing, and flow. There are two main types of animation you might use.

• CSS animations: handled by style rules and run automatically.
• JavaScript animations: respond to "events" (like a click or scroll) defined in the code.

---

CSS TRANSITIONS (Simple Movement)

Transitions make changes between changes (known as states) smooth. A common example of this might be a button on a website becoming darker when your cursor hovers over it. Below is a CSS example of a hover transition:

button {
  background-color: #7FA8FF;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #3C4BE0;
}

The transition tells the browser how long to animate the change. In this example, the button fades smoothly to a darker blue when hovered.

---

CSS KEYFRAMES (Looping Animation)

Keyframes define continuous or repeating motion. They’re written entirely in CSS, and can loop forever.

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-30px); }
}

.ball {
  animation: bounce 1s infinite ease-in-out;
}

Here, the ball moves up and down forever using only CSS, no JavaScript needed.

---

CSS FADE EFFECTS

You can fade elements in or out using opacity inside keyframes:

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.text {
  animation: fadeIn 2s ease forwards;
}

NOTE: forwards is what keeps the element visible after the animation ends.

---

CSS ROTATION

You can spin an element continuously.

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.icon {
  animation: spin 3s linear infinite;
}

NOTE: The term linear in the syntax keeps the spin speed constant, which is great for icons or loading symbols.

---

MULTIPLE CSS ANIMATIONS

Why stop at just one animation?? Try stacking multiple together!

@keyframes float {
  0% { transform: translateY(0); color: #7FA8FF; }
  50% { transform: translateY(-10px); color: #9FD1FF; }
  100% { transform: translateY(0); color: #7FA8FF; }
}

.title {
  animation: float 2s ease-in-out infinite;
}

This CSS block creates a gentle floating motion, which could be cool for titles or glowing labels.

---

Interactive Animation using CSS and Javascript

CSS animations run automatically, but with JavaScript, you can control when they start. In this example, JavaScript toggles a class that triggers a CSS animation.

Remember: Javascript defines the behavior while CSS defines the style, or what the element looks like.

<!-- HTML -->
<button onclick="document.body.classList.toggle('shake')">Shake</button>

/* CSS */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.shake {
  animation: shake 0.3s ease;
}

The JavaScript part is only this line:

document.body.classList.toggle('shake')

That one command tells the browser to add or remove the shake class, which runs the CSS animation.

---

BEST PRACTICES

• Use animations to enhance your page, but be careful not to overwhelm it.
• Keep motion durations under 2 seconds for natural feel.
• Start with the CSS and bring in Javacript actions when you need help controlling timing.

The background color sets the overall tone of your piece. To change it, we’ll target the <body> element, which defines the entire page space. You can describe a color in two main ways:

• Simple color names your computer already recognizes (like black, skyblue, or tomato)
• Color codes, which are more precise (like #1A76FF or rgba(112, 230, 213, 1))

If you're aiming for a specific color, there's no need to guess. You can search for the color code directly online. There are lots of sites that let you browse or even upload an image to match the color you're wanting.

body {
    background-color: PUT COLOR HERE;
  }

Because this changes the appearance of your page, this is CSS code.

To make the bkgd an image, target the body of the project. Paste a valid URL in the designated area. Since this references appearance, this is CSS code.

---

body {
        background-image: url("PASTE IMAGE URL HERE");
        background-size: cover;
      }

Background Size

This tells the CSS how big to make the image. The example of "cover" used here scales the image to fill the entire background.

Where adding a background image targets CSS because it affects the body of the composition, adding images as visual elements uses HTML. Think of it as the difference between adding wallpaper to a room versus a framed photo. One defines the style of the room, whereas the other is a decoration that sits on top of its background.
You’ll use the <img> tag to display these types of images and connect a file saved in your project.

---

ADDING AN IMAGE

The src attribute tells the computer where the image file lives, and alt provides a short description for accessibility. It's best practice to provide an alt text description because this is the text that will display on the screen if the image link were to break or be unreadable.

<img src="assets/example.png" alt="Example image">

Tip: Keep your image files inside an assets folder (or another organized folder) and always use clear filenames (like photo.png or project-banner.jpg) that don't have any spaces or special characters. This helps ensure that your images don't have any trouble linking.

---

SIZING IMAGES

While it's possible to change the size of an image directly in HTML using width and height properties as shown below:

<img src="assets/example.png" width="200" height="200" alt="Example image">

it’s recommended to control image size with CSS instead. It's considered best practice and keeps your HTML clean. Overall it makes styling easier to update later.

img {
  width: 200px;
  height: auto;
}

---

ALIGNMENT & POSITION

Center an image on the page with the display property.

img {
  display: block;
  margin: 0 auto;
}

Or float the image beside text:

img {
  float: left;
  margin-right: 20px;
}

---

When you use CSS, you only need one img block to include all your adjustments (size, border, filters, etc.). This approach makes your CSS more organized and helps you avoid repeating multiple img blocks for every style change.

img {
  width: 200px;
  height: auto;
  margin: 0 auto;
  display: block;
}

Color helps define the tone and feel of your work. In CSS, colors can be written in several ways, the most common are HEX, RGB, and HSL.

---

HEX CODES

HEX codes use six numbers or letters to describe color. They always start with a # symbol.

body {
  background-color: #050718;
}

It's impossible to know the HEX code to every color you might want to use. The internet is going to be your best friend here. There's plenty of websites that offer free color wheels and provide you with a HEX code value once you find a color you want. Some basics to get you started: #000000 is black, and #ffffff is white.

---

RGB COLORS

RGB stands for red, green, and blue. Each value goes from 0 to 255, the higher the number, the brighter that color.

body {
  background-color: rgb(127, 168, 255);
}

You can also use rgba() to include transparency.

body {
  background-color: rgba(127, 168, 255, 0.5);
}

The A in RGBA represents the Alpha channel. The last number (0.5 here) controls opacity, where 0 is invisible and 1 is fully visible.

---

HSL COLORS

HSL stands for hue, saturation, and lightness.

body {
  background-color: hsl(230, 100%, 50%);
}

Let's breakdown this syntax:

• The first value is the hue (like picking a color on a wheel).
• The second is saturation (how colorful it is).
• The third is lightness (how bright or dark it appears).

While there is no standard practice between using RGB, RBGA, or HSL, HSL is considered one of the easiest ways to adjust color tones.

---

LINEAR GRADIENTS

You can blend multiple colors using gradients. The syntax for gradients is written as a direction, followed by the start and stop colors.

body {
  background: linear-gradient(to right, #7FA8FF, #050718);
}

TIP: Try switching to right with to bottom or give it an angle such as 45deg for different direction options.

---

COLOR VARIABLES

As your projects grow, you might start using the same colors in multiple places. For example, your main background color, text color, and highlight colors might all belong to a certain color palette you've defined for your project.

PRO TIP: Instead of typing the same HEX code everywhere (who has time to memorize that alphabet soup), you can save it as a variable in CSS. This makes your code easier to update later, you only need to change the color once in the variable and it'll update everywhere else it is used.

:root {
  --main-blue: #7FA8FF;
  --dark-bg: #050718;
}

The :root selector is like the “dictionary” of your CSS, any variables you define here can be used anywhere else in your code.

To use a saved color, call it with var(--name) instead of typing the color code again.

body {
  background-color: var(--dark-bg);
  color: var(--main-blue);
}

This tells the browser: “Use whatever value I saved as --dark-bg and --main-blue.”

Here’s why this matters:

• If you ever want to change your main color, you only change it once.
• It keeps your code clean and consistent.
• You can create full themes or switch palettes by only needing to update one section.

You can even use variables inside gradients or filters! Once they're defined, they behave just like regular colors.

body {
  background: linear-gradient(to right, var(--main-blue), var(--dark-bg));
}

Think of variables as your project’s paint palette. Once you mix your colors at the top, you can reuse them anywhere.

Filters let you change how images look without requiring the use of a photo editor. You can adjust brightness, color, blur, and more.

---

ADDING FILTERS

Filters are written inside a CSS block. You can use one or stack several together for creative effects.

Example Filter Options

• grayscale(100%) → turns your image black & white
• blur(4px) → softens or defocuses your image
• brightness(120%) → makes the image lighter
• contrast(150%) → deepens darks and lights
• saturate(200%) → makes colors pop
• sepia(100%) → gives a vintage look
• invert(100%) → flips the colors

img {
  filter: brightness(120%) contrast(110%) saturate(130%);
}

The example above showcases how multiple filters can be applied to the same image.

---

ADDING HOVER EFFECTS

You can make filters react when the user hovers over an image. This is a great way to add interaction or movement to your project.

img:hover {
  filter: brightness(140%) contrast(120%);
  transition: 0.3s ease;
}

The transition line makes the change to the filter settings smooth in for .3 seconds instead of being applied instantly. This is an easy trick to make your effects look more polished.

---

OPACITY

Opacity changes how visible an element is. A value of 1 is fully visible, and 0 is invisible.

img {
  opacity: 0.8;
}

img:hover {
  opacity: 1;
  transition: 0.2s ease;
}

You can also use opacity with hover to fade things in or out. In this example, the image has some transparency until the cursor hovers over it, at which point the image is fully opaque.

---

BEST PRACTICES

• Group all your filter effects in the same img block.
• Use the transition attribute for smoother animations.

Layout controls where things go on your page. Once you have text, images, and color, layout brings them together into a single composition.

---

BLOCKS AND INLINE ELEMENTS

Every HTML element is either block or inline.

p, h1 { 
  display: block; 
  }

img { 
  display: inline; 
  }

Block elements start on a new line and stack vertically, building blocks.
Inline elements flow next to each other in the same line, like words in a sentence.

The example above is saying place all paragraph and h1 styled text on top of each other, but place all images horizontally next to other elements.

---

MARGINS & PADDING

Margins control space outside an element. Padding controls space inside an element.

.box {
  margin: 20px;
  padding: 10px;
}

Think of margins as the space between boxes, and padding as the packing peanuts inside them.

---

POSITIONING

You can tell elements exactly where to sit using the position attribute.

.box {
  position: absolute;
  top: 50px;
  left: 100px;
}

Common position options:

• Absolute → The applied element stays in one place (relative to the page scroll). Other elements will act like its not there.
• Relative → This keeps the element in a normal spot in the page flow, but allows it to be nudged around, if necessary.
• Fixed → Tells the browser "Keep this element in the same spot, do not move it even when the page is scrolled."
• Sticky → The element follows scroll position until it reaches a threshold, like a navigation bar that stays at the top of a viewport window.

If its not specified, the default positioning is rendered as static.

---

ALIGNMENT WITH FLEXBOX

Flexbox is a layout tool that helps you control how items line up inside a box. To use flexbox, you must put your items inside a "container", and then apply the flex rules to the container, not to the items themselves.

What is a "container"?

A container is just any HTML element that wraps other elements. Example HTML:

<div> class="container">
  <p>Hello World</p>
</div>

The <div> is the container, and the <p> is the item inside it. Now let's look at how to connect this back to CSS to obtain some style properties:

.container {
  display: flex;
  justify-content: center; 
  align-items: center;   
}

• The "justify-content" attribute moves object horizontally and has options of left, center, and right.
• "Align-items" can be given top, center, or bottom. It defines object's vertical movement.

Pro tip: Add height: 100vh; (where "vh" stands for viewport height) to your container to center items vertically on the screen.

---

GRIDS

Grids let you divide your page into structured columns and rows.

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

Each 1fr is one equal fraction of the space. In the example above, the layout is being asked to be divided into 3 even columns. The gap tells the display how many pixels to leave between each of these columns.

---

TIP: If you are trying to build a responsive layout (meaning it adapts if you resize the viewing/preview window), use percentages or vh/vw instad of hard coding in pixel values. This makes it so your layout will automatically calculate how much to adjust by depending on how much the viewport is resized to. This is idea is how websites are built to work on both desktop browsers and phone screens.

This folder is full of miscellaneous CSS effects. If you have any in mind you think should be added, I'd love to chat! Email me HERE.

---

TEXT SHADOWS

Text shadows can make type feel glowy, neon, or retro.

h1 {
  text-shadow: 2px 2px 0 #000, 4px 4px 0 #7FA8FF;
}

The first set moves the shadow, the second controls its color.

---

NOTE:

The following examples use .box in the syntax. In order to make these work for the CSS, it needs to be linked to HTML. Here is a snippet of how that might look:

---

BORDERS

Borders outline elements and help them stand out. You can control the width, style, and color in the syntax.

.box {
  border: 3px solid #7FA8FF;
}

Common border styles:

• Solid
• Dashed
• Dotted
• Double

---

ROUNDED CORNERS

You can curve the edges of boxes, buttons, or images using border-radius.

.box {
  border-radius: 12px;
}

---

BOX SHADOWS

Shadows add dimension and make elements pop off the screen.

.box {
  box-shadow: 4px 4px 0 #050718;
}

Here's the syntax breakdown: 4 pixel offset horizontally, 4 pixel offset vertically, 0 pixel blur radius, and the HEX code sets the color to a dark almost-black.

---

HOVER EFFECTS

You can make elements react to the user’s mouse with :hover.

.box:hover {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}

Try pairing hover effects with shadows or color changes for added feedback.

---

ANIMATION

You can make things move or pulse by defining a @keyframes animation.

@keyframes float {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-8px); }
  100% { transform: translateY(0px); }
}

.box {
  animation: float 2s ease-in-out infinite;
}

The example above makes your element move up and down forever like it’s floating.