Back to School Web Development and Programming Bundle

Explore short, neatly organized lessons that you can take on the go. Discover how JSBin renders HTML and JavaScript in real time, with live output for quick testing.

Set up an HTML document from scratch by writing the doctype, html, and body tags, learning tag nesting, and that white space is ignored to structure code.

Learn how to apply multiple style points in HTML with CSS, using semicolons, font family such as courier, background color, and text alignment options like center or right.

Explore html text formatting by using em, strong, sub, sup, and strikethrough with proper closing tags, and practice creating multiple tag pairs to experiment hands-on.

Create a hyperlink by writing an anchor tag with an href attribute and link text. Save the file and test the link to ensure it navigates correctly.

Learn to add an image by copying its URL and using the img src attribute, then set width or height to size it while preserving proportions and preferring scaling down.

Learn to build HTML tables from scratch using table, border, tr, and td tags; add headers with th, and format content with bold text and images.

Construct and structure html forms using form and paragraph tags, add text inputs with names like quest, color, and bird, and reference them with ids for javascript.

Introduce javascript and the script tag, show how javascript adds functionality to web pages, and explain inline versus separate file usage with a simple alert and calculator example.

Learn how html structures content and how css moves styling to its own file, with inline styles and properties like color, background-color, font-family, and font-size, and javascript adds functionality.

Learn basic css styling by targeting h1 and p with curly braces. Style h1 orange on black with courier at 50px, and p blue on orange with impact at 30px.

Learn how style tags simplify small changes by embedding css in style sections, enabling on-the-fly formatting and flexible file management within a single document.

Learn how to use IDs to target and customize specific HTML elements, override generic styles, and apply distinct font sizes, colors, and background color for precise page design.

Learn to customize fonts with hex codes or rgb values across 0–255 scales. Use off white or off black shades and avoid stock colors; note the orange exception.

Learn how to style links with CSS: add an anchor tag with href, customize color and font-family, and apply hover, active (font-size 50px), and visited states, including monospaced fonts.

Set up an HTML table with border, using table, tr, and td tags, then apply CSS colors to headers and cells, exploring th and p styling.

Develop and customize html lists by constructing ordered and unordered lists, applying list-style-type variations (circle, square, decimal, roman numerals), nesting lists, and styling with css.

Learn how to add a button in HTML that calls a JavaScript function on click, define the function, and display an alert to demonstrate basic interactivity.

Discover how variables in JavaScript store values as boxes of data, with boolean, integer, and string types; initialize with equals zero, display with alert, and update text to reflect changes.

Learn how to use variables in JavaScript for arithmetic with numbers and for concatenating strings with plus operator. The lecture explains quotes, spaces, semicolons, and keeping numbers and strings separate.

Add user input by creating a text input, typing text, and linking it to a change text variable. Update the on-page text with document.getElementById and the input value.

Explore variable scope in JavaScript, distinguishing global and local variables, and learn how braces and functions limit visibility inside loops and functions.

Save your project regularly by logging into your account and using save as templates, then open the saved file; a new project starts in the next tutorial.

Learn how to call functions within functions to modularize code and reuse logic. Explore game development examples showing update loops, score and lives updates, and player logic calls.

Learn how an if statement checks a condition and executes code when true, using a variable to compare to one, and the importance of curly brackets and blocks for readability.

Learn how to reference and include the jQuery library in your HTML projects, manage script tags, and organize JavaScript across files for clean, scalable web development.

Explore setting up JavaScript with jQuery using the $ symbol, and run code on document load by creating a ready function with proper brackets and returns.

Learn how to set up a jQuery environment, compare it with JavaScript, use the dollar sign and wrapper function syntax, and consider security differences.

Add a button and wire it with a JavaScript click handler using jQuery to fade out header one and header two.

Explore how jQuery syntax works by setting up the environment, using document ready, handling button clicks, calling functions, and manipulating elements with fade, show, and hide, plus comments and semicolons.

Practice wiring a button to an action in JavaScript by calling a function on click, and explore additional events like double-click, mouse enter, and mouse leave, with plain-English comments.

Learn the difference between id and class attributes by building buttons; id assigns a unique element, while class lets multiple elements share styling, with correct period syntax for class selectors.

Learn to apply classes across HTML tags to create fade in and fade out effects, use dot notation for class selectors, and label prototype buttons for clarity.

Explore how brackets accept properties to control fadeout timing and fade in, using milliseconds like 1000, 3000, and 10000 to adjust the animation across languages.

Explore creating a toggle button to control a fade in and fade out effect with JavaScript, using IDs (not classes) and a toggle function to show or hide elements.

Explore selecting HTML elements with the star selector, see how a single button and paragraphs fade out, and learn why precise targeting avoids breaking your code.

Learn to implement hide and show interactions in web development using jQuery, toggling elements with buttons, and writing readable, well-indented code.

Learn how to use script tags to run JavaScript inside HTML, paste code into the script block, and when appropriate, move scripts to an external file for clarity.

Learn to create an orange div box with a 75-pixel height and width, apply absolute positioning, and animate its left property to move across the page.

Explore implementing a slide back animation by changing right to slide, using copy and paste with line-by-line reading, and using absolute positioning to slide back 100 pixels off screen.

Adjust the slide back speed using slow or fast, account for buffer padding that stops it from returning fully, and note numeric values don't affect the outcome.

Add a shrink button, duplicate and rename controls, and implement a div that grows, slides, and shrinks with specific values like 75 to demonstrate the animation.

Demonstrates incremental grow by adjusting 20-pixel steps with plus equals and minus equals, letting you repeatedly grow, shrink, and even disappear at zero.

Learn how to manipulate div elements with ids, apply jQuery animations like height changes and fadeout, and connect buttons to orange div and blue div using hash tag.

Discover HTML5 tags and the added JavaScript functionality that power video, audio, canvas drawing, scalable vector graphics, and semantic elements like article and nav.

choose Chrome for the best HTML5 support and browser compatibility. avoid Internet Explorer 9 or older, while Safari and Firefox are adequate but Chrome is recommended.

Learn to add an audio element with controls in html, using a source tag and type attribute, and choose formats like mp3 or ogg, noting mp3 can be proprietary.

Add a video tag with a video/mp4 source and the controls attribute to embed an mp4 video on your site. Adjust width to fit layout and enjoy built-in playback options.

Explore video and audio preload options, showing how preload='none', preload='auto', and preload='metadata' affect when content loads, and discuss when to preload versus load when the user clicks.

Learn how to work with HTML5 canvas in JavaScript by assigning an id, retrieving it with document.getElementById, obtaining its context, and drawing a red 100 by 100 rectangle at 10,10.

learn how to work with canvas in JavaScript, including creating multiple canvases, obtaining context, and using fillRect with four parameters to draw and position shapes.

Create radial gradients with a context, set x and y, radius, and color stops, then fill a square with the gradient while experimenting with blue, orange, and other colors.

Learn how to create linear gradients, adjust start and end coordinates with x and y parameters, and understand color stops limited to two colors, alongside a comparison to radial gradients.

Add a shadow to the canvas using the context shadow blur and shadow color, black or gray, creating a gradient shadow, then adjust size with values like 10 or 100.

Draw scalable vector graphics with SVG by creating a circle using cx, cy, and radius, then customize fill and stroke while exploring coordinate origins and no pixelation.

Declare the ellipse with cx and cy, set radius x and radius y, and apply a fill style with a color such as purple, white, or gray.

Learn to create polygons in SVG by defining points, adjusting coordinates, and applying fill and stroke to craft simple shapes and faces.

Explore scalable vector graphics and minimalist web design while quickly prototyping with HTML5, CSS, and JavaScript to boost web projects. Practice by creating many prototypes to enhance learning.

Explore HTML as a markup language that displays content in the browser, using doctype, opening and closing tags, and elements like head, title, and p.

Explore how HTML tags inside the body format text, including p, br, italic, bold, and underline, and learn how opening and closing tags shape headings from h1 to h6.

Learn the basics of css by applying font-family and color to headings such as h2 and h3, using two curly brackets, and seeing immediate style changes in a live example.

Learn how to apply borders in CSS by using border-style values like solid, dashed, dotted, groove, adjust border color and width, and experiment with background color to enhance element design.

Learn how JavaScript adds interactivity to web pages with alerts, functions, and button onclick events, wired into HTML and CSS to create interactive features.

Learn to change web page text by assigning an id to paragraphs, then use document.getElementById('awesome').innerHTML to update content on click, and apply the same approach to another element.

Explore how variables store integers and strings, declare with var, and perform simple arithmetic in JavaScript, including mixing numbers and strings.

Explore the basics of a C# program, including using statements, namespaces, and a public class with public static void. Run a hello world example and manage libraries for efficiency.

Learn how to use dot telesense to access console.WriteLine, work with strings, and master semicolons, quotes, and compilation in C# for simple and advanced applications.

Explore common C# error messages, from missing quotes to invalid tokens, and learn practical debugging tricks to decode errors and fix code through practice.

See why indentation improves readability and maintainability by organizing namespaces, classes, and void blocks. Learn that whitespace can vary without changing execution, and use tabs to indent for clarity.

Declare and initialize variables in the main method, using integers for whole numbers, booleans, or game objects, and print values like 1 or 10 to observe output.

Learn how boolean variables work using bool with true and false, and why capitalization matters; apply yes-no flags and 1/0 mappings in code and games.

Explore basic arithmetic in code by declaring variables, assigning numbers, and printing results. See addition, subtraction, multiplication, and division, and note how division may omit decimals.

Explore how to handle math with variables outside expressions, focusing on proper assignments (left-hand side must be a variable), combining values, and documenting math with inline comments for readability.

Explore variable scope by creating void blocks, distinguishing local and global variables, and understanding how curly brackets limit visibility. Learn how to declare and access variables within the correct scope.

Learn how to declare a global variable in C#, using a public constant with a capitalized name and assigning an initial value, then run and observe the output.

Master passing variables to void methods by supplying arguments, including integers, and see how scope controls local and global variables. Explore practical examples of calling voids with multiple parameters.

Master conditional logic with else statements by evaluating if answers equals two to print yes, otherwise print no, and extend the pattern to numbers equals one.

Master if, else if, and else statements with conditions to test numbers and answers, and compare equal and not equal, while noting curly brackets and c-sharp syntax.

Learn how to use a for loop in C# to repeat actions a number of times. Initialize the loop variable, check the condition, increment, and print numbers to the console.

Explore conditional logic with operators, including equals, not equals, less than or equal to, and greater than or equal to, using if statements and console output.

Master the cout statement in c++, enclose string literals, and terminate with a semicolon. Test early as you run code to spot and fix errors.

Learn how to use single-line (//) and multi-line (/* ... */) comments to explain code, boost productivity, and help you remember what you did in complex projects.

Explore calling methods and functions by creating a second main, using braces and semicolons, and calling one main from another to control output like this is awesome and hello world.

Learn how to call functions inside curly braces, compare functions and methods, and understand case sensitivity while exploring simple examples like hello world and multiple main functions.

Explore global and local variables in C++, observe how curly-bracket blocks define scope, and see how a global variable remains accessible across functions while locals stay confined.

Explore basic variable math by adding A and B and assigning to answer, and observe the left or right placement of the equals sign. See why ints cannot be decimals.

Explore how if statements control code execution, using pseudocode and real-world examples, compare double and triple equals, and update variables like aiming with simple additions or subtractions.

Master how to use logical operators with if statements to test multiple conditions. Learn to combine and or not equals, and apply bracketed logic for scalable web development decisions.

Explore else statements by using if conditions with curly braces to set a main variable to 1 or 2 based on equality, then test the result.

Learn how a for statement creates a loop that runs code multiple times, with initialization, a condition like i < 5, and i++ to increment, plus zero-based indexing.

Download Game salad for free from the Game salad site, click the purple download button, then drag the icon to install on Mac or PC, and start making games.

Open a new GameSalad project, set a landscape iPhone game, and explore the first scene, actors, tables, and services as you tailor titles and layouts.

Navigate the initial scene and game area using home, scenes, and tables, with inspector and library. Drag objects into the white box—the game area—with a red star as an indicator.

Learn to add an actor by dragging a png star into the project. Rename uniquely and keep the file name matching what you see; delete actors as needed.

Test your game frequently in game salad, a visual programming language, verify visuals respond correctly, and debug logic to prevent crashes, ensuring the app runs smoothly on iPhone.

Add and arrange actor images using the images tab, preview changes, and manage assets by deleting extras; understand how images are stored for App Store submission and review.

Change the scene background color to explore the blending mode and color effects, using the color dialog and spectrum to select white or custom hues.

Explore blending modes in the graphics tab, including normal, opaque, additive, screen, and multiply, and learn how they alter color value on different backgrounds.

Learn to control sprite scaling with stretch and fixed options, then apply tile mode to repeat images for memory-efficient bounding boxes and collision handling.

Explore tiling basics by setting tile width and height to 100, and learn how horizontal and vertical anchors affect image anchoring, with emphasis on using stretch for practical results.

Learn how to flip the image horizontally or vertically, toggle flips with events and behaviors, and apply this attribute in game-like contexts such as a gravity game.

Learn how linear velocity moves objects on the x and y axes to create left-right and up-down motion and how values control direction.

Explore how rotating objects with angular velocity adds animation to games with minimal effort. Stars and geometric shapes showcase how rotation improves visuals and streamline game design.

Apply the max speed to show how speed limits govern movement, including a racer going to 150 with a power up and reverts to 100 when it wears off.

Explore how to add and configure the accelerate behavior for a game object, compare acceleration to linear velocity, and control movement relative to the actor or scene.

Set up a collide behavior to make a star purple collide with a star orange, illustrating physics governing object interactions through actor type control.

Explore core physics properties—movable, fixed rotation, collision shape, density, friction, bounciness, drag, and angular drag—and learn how tuning these parameters shapes gameplay and supports game design.

Create a global attribute and a local boolean attribute, is alive, and learn how scope restricts access: locals stay private while globals are accessible to all actors.

Learn how to add and use text attributes and text (string) variables in game development, distinguish text from numbers and booleans, and handle spacing for score and name displays.

Learn how integer and real number variables are used in programming, with integers representing whole numbers and reals for decimals; use integers by default and reserve real for necessary decimals.

Learn how the index variable, a non-negative integer that stops at zero, helps manage score and health logic in programming.

Learn to display text with alignment options, wrap inside the actor to prevent clipping, customize fonts, size, and color, and use global/local variables with functions like min, max, and floor.

Explore standard attributes and behaviors for game design, focusing on accelerate and accelerate toward, and brainstorm multiple in‑game examples to craft responsive obstacles for a player.

Learn how to modify variables by changing attributes, including updating a score with numbers, applying score plus one, and recognizing the importance of clear variable naming.

Learn to change an image to another image, such as yellow, and set up rules to change the image when it is hit once.

Explore overlaps and collisions in an actor-tag based scene, triggering animations when an actor overlaps or collides with others and stopping when not touching.

Learn how hibernate and pausing a game work, especially on devices like the Nook, and why pausing requires stopping animations, physics, and sound rather than simply freezing the game.

Master rule review by defining conditions and actions like an if statement, toggling rules on/off, and layering multiple behaviors, conditions, and otherwise logic to drive game behavior.

Demonstrates creating multiple scenes, wiring a touch trigger to switch to a specific scene (scene one), and adding a second scene (scene two) for practice.

Adjust object velocity and implement rules that set velocity on touch or collision, using otherwise logic to default speeds.

Learn to collide objects with a specific actor or a specific tag, group actors by tag, and apply velocity to control collision behavior.

Use the constraint attribute to lock the star’s x position, preventing horizontal movement while allowing vertical motion, and have the star snap back to x at 450.

Explore how cameras work in games, comparing 3D viewing with 2D viewports, and learn how a single camera above the world controls movement and the viewport.

Scale the tracking area from 100 by 100 to 1000 by 1000 and move stars to keep gameplay centered on iPhone screens. Adjust accelerate and note engine differences.

Set the camera origin to 100 by 100 to show how 0,0 defines the x and y coordinates. The camera moves only after the object enters the tracking area.

Destroying objects frees memory and removes them on overlaps, as an orange star destroys red stars, with post-destruction effects like explosions or particles.

Learn how interpolate moves a value to a new position over time, adjusting duration and applying it to x and y coordinates, with multiple objects demonstrating differing speeds.

Learn to use keyboard input to update a text attribute on a red star, display the typed name with iPhone text boxes, and debug by showing variables for game logic.

Learn how to add a log debugging statement and use the view debugger to verify code paths. Understand basic debugging concepts for game development.

Set motion parameters by adjusting direction and speed, explore relative to actor versus relative to scenes, and compare additive versus stacked modes to control how multiple actors move together.

Move to a position by setting x and y coordinates, such as 100, 100 or 200, 200, at speed. Update x and y relative to scene to animate stars.

Set up and explore particles by configuring an image, adjusting size from 15 to 40, and increasing spawn rate to create moving particles in any direction, like shooting stars.

Learn to create and refine particle effects by adjusting startup time, lifetime, position relative to the actor, velocity and direction, gravity, speed, size, duration, color, rotation, and image.

Experiment with a random direction function to emit particles in 0–360 degrees, adjust speed, size, and a particle count of about 100 for cooler effects.

Keep particle use sparing to prevent lag on older iPhones with limited memory, test to ensure all particles run smoothly, and aim for around twenty particles.

Drag in a pause graphic and place a pause button at 30 by 90, then implement pause and unpause rules that overlay a pause scene and resume at same position.

Import and attach a sound effect, and distinguish it from music. Control volume and pitch, and explore positional audio with a Doppler effect, while noting that sounds should not loop.

Learn to use the replicate behavior to generate multiple copied objects, adjust direction, control copies and spacing, and trigger copy or delete with touch, including random positions.

Explore rotate and rotate to angle and rotate position to animate a game object, balance memory usage on older iOS devices, adjust rotation speed, direction, and boundary rules.

Rotate to angle shows how to rotate to a chosen angle with speed control. Choose relative to scene or to the actor, or rotate to a specific object.

Map vector to angle with the device's mouse position, linking game x and y to the mouse coordinates. Update every 0.01 seconds to rotate the vector relative to the scene.

Learn how to rotate to a specific position, adjust an angle offset, and change speed with a slider, then run to completion and stop at the destination.

Spawn actors with a simple rule, and place them in front of or behind existing actors using layer order. See memory usage and lag as you spawn and drag.

Explore pro features of Game Salad, including game centers, leaderboards, in-app purchases, banners, and beta release testing to gauge player interest before full feature integration.

Learn how to use resolution independence, switch between 4x and 5x, and apply letterbox scaling to keep the iPhone 5 and 4 layouts consistent.

Learn how tables organize data with rows and columns, like a spreadsheet, and function as multi-record variables for RPG data such as health, shields, armor, and damage types.

Explore how a table assigns variable types to each row, including strings, integers, reals, booleans, and angles from 0 to 360, showing its usefulness for data and word games.

Drop a game object with display text to pull table data into your scene, then select the table row and column from the ship table data set and preview values.