Gradients in Canvas
Not enough permissions to view this content.
Read MoreExercise: 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…
Read MoreDrawing 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…
Read MoreHomework: JavaScript Form Validation
Homework – Forms & JavaScript Validation Add some JavaScript to the form you created in form1.php. Make sure their first name is not Scum If there last name is longer then 30 characters – tell them it is invalid and must be entered again.
Read MoreHomework: HTML 5 Form Validation
Homework – Forms & HTML5 Add some HTML5 fields to the form you created in form1.php. Like this: Add one number field and set max and min constraints on it. Create one date or time field. Make at least one field required via HTML 5 Add a field for email and make it match a…
Read MoreSpanning Rows & Columns
Spanning Multiple Columns Sometimes, you’ll want to expand a cell of data to cover more then one column. The colspan attribute lets you stretch a cell across 2 or more columns. This occurs frequently with headers and we’ll use that in the example below. See how “Favorite Things” stretches across two columns now so that…
Read MoreDescriptive Lists
These allow you to create a dictionary or glossary or list of terms easily. They are not used nearly as widely as ordered and unordered lists but can be good to know. HTML Example <dl> <dt>Dogs</dt> <dd>Furry creatures that shed all over the place, have to be walked several times a day, are nice to…
Read MoreList Structure
Lists can be nested – lists within lists. Remember to keep your lists nested properly and to not cross your tags. Indenting helps make it easier to read and make sure it is formatted properly. Nested Unordered Lists HTML Example <ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li> </ul> Web Page Here’s…
Read MoreSetting Your font-family
How to Pick Your Font Family Pick your fun font. A great resource is Google Fonts. Pick your an interesting and similar looking font to be your second choice from a list of web safe fonts. Then pick a third choice which is generic like serif, sans-serif or monotype. We covered Step 1 in the…
Read MoreHow to Use Google Fonts
Review: How to Pick Your Font Family Pick your fun font. A great resource is Google Fonts. Pick your an interesting and similar looking font to be your second choice from a list of web safe fonts. Then pick a third choice which is generic like serif, sans-serif or monotype. Let’s go over how to…
Read More