LD – LabCatsCoding

Plan & Design – Timeline & Costs

Continue developing your func spec – now you are on to Step 2 in the list below. Here are the steps we are going to follow: Features: describes the overall project and it’s functionality Design/Technical Specification: lays out some of the technical design pieces such as database design. Timeline: create an overall schedule for your…

Plan & Design – Tech Specs

Continue developing your func spec – now you are on to Step 2 in the list below. Here are the steps we are going to follow: Features: describes the overall project and it’s functionality Design/Technical Specification: lays out some of the technical design pieces such as database design. Timeline: create an overall schedule for your…

3 Column Float Layout

Here’s the HTML for a basic page with a header, a left column, a right column, a center content space and a footer. Comments are in gray. <html> <body> <!–Header image -> <img id=”header” src=”images/WebsiteHeader.png”> <!– div for first column–> <div class=“cols”> <h2>Column 1</h2> <p> Text for column 1</p> </div> <!–div for the second column…

2 Column Float Layout

If we wanted to make a web page that had: Header across the top 2 equal columns of content Footer across bottom. How? Create the header Create the two columns of text…float one..left and one…right! Then for the footer….Clear the floats! Here’s the HTML for a basic page with a header, a left column, a…

Fun with print()

Let’s look at how to use the optional parameters to create more interesting output with the print() function. Separators You can separate strings that are concatenated together by specifying a separator. So if you did this: name=”Meredith” activity=”throw” food=”snails” print(name,”\’s fav thing to”, activity,” is”, food, sep=’ ‘) This gives us this output: Meredith’s fav…

What Are Loops?

What Use Are Loops? Often in coding and in real life – you need to repeat actions. Sometimes that can be repetitive. Take for example this recipe: Mix 1 cup flour, 2 cups sugar and 1 cup milk. Add one egg and mix well. Add one egg and mix well. Add one egg and mix…

Gradients in Canvas

Not enough permissions to view this content.

Exercise: Drawing Lines

Let’s make a new page to play with lines some. Create a file called lines.html. Add a blue line that goes from the top right corner to the bottom left corner. Add a red line that is 5 pixels wide and goes across the canvas horizontally at the midpoint. Add a green line that cuts…

Drawing in Canvas

Basic Syntax <canvas id=”canvas1″ width=”400″ height=”200″></canvas> Important! There always must be an id attribute so that you can access the element via JavaScript. Both width and height are attributes we have used before and provide a defined size for the canvas container. But, to make a game that is responsive we should use the following…

Example with Semantic Elements

Finally, let’s see a real example. If you put together this HTML… <!DOCTYPE html> <html> <head> <link rel=”stylesheet” href=”css/five.css”></link> </head> <body> <header>Steve Jobs Lives</header> <nav> <a href=”five”>Home</a><a href=”#”>About Us</a><a href=”#”>Contact</a></nav> <main> <section>Because…really he just can’t be gone. Who is going to invent the great next invention? While Apple is still producing…