The Perfect Recipe

Step 1: Make a new Coder app

Our very first step will be to create a new Coder App. On the main Coder page you will see a grid of boxes with names on them. These are projects (also called apps), and there are a few that come pre-installed on Coder. Some of them are simple (like Hello Coder) and can help you become more familiar with the program. Others are more sophisticated (like Space Rocks!) and show the potential of what you can build. But you can take a look at those anytime. Let’s make our own program!

• Go to the upper left of the screen. You should see a green box with a plus sign.
• Click the plus to start creating a new app.
• Give it a name and pick a color. We’re going to make a sandwich recipe so we’ve called ours “The Perfect Sandwich” and colored it purple to help it stand out. Don’t worry, you can change both of these later if you decide you don’t like them.
• Once you’ve got a name and color, press “Create.” You should go straight into editing your new project.

Step 2: Let's look around

Now we’re going to take a look around our new app. All Coder projects have the same tabs and features so let’s take a second to familiarize ourselves with them.

Code View
When you begin a new project you start in the “Code View” of Coder. What we’re looking at is the source code for our new web project, the behind-the-scenes stuff of all coder projects.

• A. Coder Button: This will take you back to the menu page with the other projects.
• B. Project Name : The name of the project. Clicking this will show you what your project looks like.
• C. HTML Tab: This is where our HTML code lives. HTML is a language that describes the structure and content of a web application. It’s where we will be doing a lot of work for this project. The astrisks on the tab means that we’ve changed something in the code. It’s there to let us know we need to save if we want our updates to take effect.
• D. CSS Tab. This is where the CSS (Cascading Style Sheet) lives. CSS is a language that describes how your app looks. We will also be working in here.
• E. Javascript (JS) Tab: Javascript is a programming language that allows you to control how your application functions. We won’t be doing anything in here yet so don’t worry about it for now.
• F. Node: This is the Node.JS piece of your program. Unlike HTML, CSS, and JS, this part of your program doesn't run in your web browser. Instead it runs on your Raspberry Pi, and can do more advanced things like save and retrieve data. Again, you don’t have to worry about this tab just yet.
• G. Media: This is where you can upload and manage media that you use in your project. Media are things like images, video, and audio clips.
• H. Preview: This will show you a split screen preview of your project. You can use this to see how project looks without leaving the code view.
• I. Settings: This is where you can change the color or name of the project. You can also export or, if you really mess up, delete it entirely.
• J. Save and Revert: These buttons save or cancel changes you’ve made to your code. Whenever we write new code we need to save it before it takes effect.

Now that we know a little bit about what’s under the hood let’s take a look at what our project looks like right now. Click the project name to see our site.

Browser View
Now this what our project looks like to other people. This is what the code in the other view is making. There’s also some things here to be aware of, as well.

• A. Coder Button: Takes you back to the main Coder menu.
• B. </> tag button: This takes you back to the code view.

Step 3: Where's the heading?

Now that we know our way around let’s start coding! All Coder projects start with a little bit of code already in them so let’s use what’s there and build on it.

• Go back to the HTML tab. We’ll be doing a lot of our work here.
• Take a look at the code. You might have noticed that the lines start with bit of text that look like this: “<word>”. This is called a tag. Tags are the bits of HTML that define the structure and content of a site. They are very important in HTML. All tags have an open tag and a close tag. A close tag looks like this </tag>. See that slash? That’s what makes a closed tag close. All tags need an opening and a closing or else they won’t work.
• Find the <h1> tag. This is the tag for a heading. Right now the heading looks like this:
  

  <h1>Hello World</h1>

• Let’s make this the title of our recipe. Change it to the name of sandwich you want to write a recipe for. You can use whatever sandwich you like. We called ours "The Perfect PB&J". The ampersand (&) is a special character in HTML, so you need to write its escaped form, which looks like &amp;:
  

  <h1>The Perfect PB&amp;J</h1>

• Now save and take a look at the preview window. See how the headline has changed in this view as well? That’s because we changed the text inside the tag. The heading is still in the same place it just says something different now.

Step 4: Let’s start describing it

Now that we know how to change the content of tags, let’s change a few more and add some new ones to start putting together our recipe.

• See the <p> tag underneath the <h1> we just changed? That’s a paragraph tag. We’re going to turn it into our recipe description.
  Right now the <p> tag looks like this:
  

  <p>Your html goes here.</p>

• Change it to instead describe your recipe.

Ours looks like this:

• Now save that and take a look. Your recipe description should now be on screen.
• Up to this point we’ve only modified tags that were already in the app. Let’s add a new one! We’ll add a small headline to our description.
• Add a new line of code between the <h1> and <p> tag.
• Now let’s add an <h2> tag. It’s a headline, like the <h1> but won’t be as prominent. The <h2> tag should read “Description.”

You code should look like this:

Step 5: One rule to divide them all

Now our recipe title and section title are butting into one another. That’s no good. Let’s add a line between them to keep them separate and divide the recipe into distinct sections.

Between the <h1> and <h2> tags make a new line and add a single <hr /> tag.

It should look like this:

Remember, all tags need to be closed. There are, however, some elements that are simple and don't contain content. These tags close themselves, using the slash (/) at the end of the tag.

The <hr /> tag is one of those tags. HR stands for “Horizontal Rule” and it’s an HTML element designed to divide content on a page.

Save your code and take a look. See how the <hr /> line separates the title from the description?

Step 6: What else do we need?

Any good recipe needs a list of ingredients. Fortunately HTML gives us an easy way to make list using tags.

• Let’s start by creating a new section like the description section we’ve already made.
• Make a new code line and add another <hr /> tag underneath our description.
• Beneath that <hr /> add an <h2> tag for the headline “Ingredients.”

Our code looks like this:

Now let’s add a new type of tag called an “un-ordered list.” An un-ordered list tag produces a nice list of things, each with their own bullet point. In fact, you’re reading an unordered list right now!

Un-ordered lists actually use two tags. One starts and ends the list. It looks like this <ul>. The other sits in between those tags and identifies a list item. It looks like this <li>.

• Make a new line of code and add an <ul> tag.
• For each list item make a new line of code and enter an ingredient or tool needed for your recipe with a <li> tag.

Ours looks like this:

Step 7: How do we make it?

In the last step, we made an un-ordered list for our ingredients. Now let’s make an ordered list to describe each step we need to make our recipe. Ordered list look like un-ordered lists except they have numbers instead of bullets.

• Let’s start a new section just like the last one. We'll add the recipe directions beneath the “Ingredients” section.
• Add an <hr /> tag and an <h2> tag with the headline “Directions.”
• Start a new line and and add an <ol> tag. This is the tag for our ordered list.
• Start a line underneath that and begin adding <li> tags for each direction step.
• Don’t forget to close your <ol> tag at the end of the list with </ol>.

Our code looks like this:

Step 8: What does it look like?

Our recipe has come together nicely so far. We have all the basic elements in place. What we need now is an image. So let’s add one. If you don’t have an image of your own you can use this one for now:

Drag it to your desktop or download it someplace where you can get access to it easily. We will be uploading it into Coder soon.

• Let’s put our image between our title and description sections.
• Add a new line of code and a new <hr /> tag underneath the recipe title.
• Between the two <hr /> tags, add a new line of code.
• Add an <img src="" /> tag. It’s one of those tags that doesn’t need a close tag. Like <hr />.

It should look like this. Notice the src="" part. That's an attribute of the img tag that will let us specify the image we want to load.

• Now let’s go up to the top of our Coder app. Remember the “Media” button? The one that looks like a folder? Click on that and open the media drawer.
• Click the “+” button. You should get a prompt to upload a file.
• Select either the image we’ve provided that you already downloaded earlier or your own image.
• Once the image is uploaded, you should see its name and the date it was uploaded appear.
• Roll over it with your mouse. Notice how two buttons (“Paste to Code” and “Delete”) appear?
• Now we’re going to add our image. Go back to the HTML side, keeping the media drawer option. Position your cursor in between the two quote symbols ("") in the <img src="" /> tag we created.
• With the cursor still in that position, go back to the media drawer and hit the “paste to code” button. A bunch of text that looks a little bit like a website address should appear between the quotes. That's the path to your image file.

It should look something like this:

• Save your code and take a look at the preview version? Did the image appear?
• If you added your own image, it might be too big or too small. You can shrink it down and change its size within the <img /> tag by adding height and width attributes.

Here's an example:

Try adding height and width attributes to your <img /> tag. See what happens when you only use either the height or width attribute, but not the other. Did the image get squished or did it stretch evenly? Play around with different measurements until you like the way it looks on the page.

Step 9: Time for some style

So far we’ve only been adding new code to the HTML section. This is the content of our project, the text and images that make up our recipe. The text we’ve added, the headings, the lists, and the paragraphs all have a default style applied to them. The browser is picking the type, size, and color of the font. Let’s customize it the way we want using CSS.

• Open the CSS panel now. CSS stands for “Cascading Style Sheets.” This panel determines the style of the HTML elements, or the way they look. As you can tell there’s not much in here right now except a few bits of code that look like this:

You might remember seeing “pagecontent” on the HTML tab. It’s the name of the <div> tag that all of our code is inside right now.

CSS is what we use to style HTML elements. Just like HTML tags, it needs to be written a specific way to work.

Generally CSS styles look like this, keep an eye on those curly braces. They are very important and mark the start and finish of a style:

• Let’s explore how this actually works. In the CSS tab change the number next to padding to something huge like 300px and then save the code.
• Take a look at the preview now. See how the all the content shifted? That’s because we increased the padding, or space between the inside of the box and the text and images.
• CSS styles affect the way things look in the HTML. It’s in this tab that will make our text look pretty by changing fonts and colors.
• Let’s not leave our padding so lopsided. In fact, let’s tweak it a little. Let’s change the style to only add 50px of padding to the left and right sides. We can write styles that are more specific and apply multiple properties to a single selector.

Step 10: Pick a font family, style, and size

Now that we know a little about styles, let’s start writing our own. Let's begin by making our <h1> headings feel like a real headline.

• Start a new line of code in the CSS tab.
• For your selector all you need to do is write h1 and the CSS will change the style of every h1 tag in your HTML. After that, add an open curly brace. Hit return twice and and a close curly brace.

Your code should look like this:

• On the empty line in between the curly braces let’s add the property font-family and let’s make its value courier, monospace. This will change the font for <h1> to Courier, and if Courier isn't on your computer, it will fall back to using a default monospace font.

• Save the code and take a look. The header should look different now, right? Like it’s in a typewriter font? That’s the new font-family we’ve changed it to.
• Let’s keep styling the heading. Go ahead and add three more properties and values: font-size: 50px; font-weight: bold; and line-height: 2em;

Save the code and take a look. That title should be big and bold now with a little more space around it. Note the 2em unit on line-height. We use px to specify size in screen pixels, but em is used to measure things based on the size of the font. 2em means make the line-height 2 times the size of the font.

Step 11: Colorize!

Now let’s really call attention to this heading. Let’s add some color.

• Add a new line to our h1 style.
• Write color: red;
• Save and see what happens. The text changed to red didn’t it? Try another color name like yellow or black and see what happens. We changed ours to purple.

This is what our code looks like now:

You can use color names to apply colors in CSS. These are generic values, though and aren’t always exactly the color you want. If you want a little more control over color then you’ll need to use Hex values.

Hex values are codes that help a browser show color. They look like this: #FF0000. That’s the hex value for red. Hex codes are six digits long, and contain only the number 0-9 and the letters A-F.

Here are some other example hex values:
#00FF00 - only green
#0000FF - only blue
#C0392B - softer red
#16A085 - softer green
#3498D8 - softer blue
#D977D4 - pink
#F1C40F - yellow
#F39C12 - orange
#FFFFFF - white
#000000 - black
#999999 - grey

Instead of purple try adding a hex value into the color property and see what happens. Try changing the numbers as well to see what new colors you can create.

Step 12: Copy/Paste/Tweak

Now that we’ve styled our h1 we’ve got to style everything else. The good news is that we’ve actually finished most of the work. All we need to do now is copy the h1 style we’ve created and change a few things to create new styles for h2, p, and li. Let’s start with h2.

• Let’s copy and paste the everything style from our h1 style.
• Change the selector in this new style to h2.
• Now change the value of the font-size to be something a little smaller, we’ve made ours 30px.

Our code looks like this:

• Now save and take a look. See how it change all three headings with <h2> tags in the HTML? That’s the power of style sheets. You can set one style and have it affect multiple elements at once.
• Now let’s do the same for <p> and <li> tags. Copy and paste the heading styles and make adjustments that make sense for those pieces of the recipe such as making the font-size a little smaller and maybe remove the font-weight property altogether.

Congrats, you’ve finished your recipe! It’s nicely laid out and easy to read isn’t it? Good thing, too. You’ve probably worked up an appetite with all this coding. Now you have an idea of what to make for lunch.