Tutorials for Learning Basic Animate CC Skills + Collaborative Project Techniques
This set of tutorials is geared toward helping students complete the second project for MAT-120, but it can still be used by others to learn specific skills using Animate CC (formerly calledFlash Professional). Below is an outline of what you will find in the tutorials. Some students might be able to skip some lessons based on their current knowledge of certain tools and concepts.
While there are simple single-click installation options on most servers nowadays for installing WordPress, these obfuscate important details of the installation process that you should understand.Using single-click installations without knowing how the application really works is dangerous if you become dependent upon a site and later cannot properly maintain, backup, restore, and repair it when it breaks.
It is incumbent upon you as a designer-developer and webmaster to truly understand all the ins-and-outs of how WordPress works, troubleshooting WP, managing the files and database, and ensuring that you always have full backups at all times and know how to restore them.
That being said, below are tutorials laid out in distinct phases that will help you understand all of the important steps in installing and backing up a WordPress site….
The playlist of video tutorials on this page will walk you through the steps necessary for understanding the basic organization of WordPress’ content entry options, plugins, themes, and settings. Furthermore, it addresses content strategy, navigation strategy, how to begin understanding what should be a post vs. a page, how to create and publish the content, and how to decide on a theme that’s right for your needs.
Below are two sections:
where you can either access individual video links from the playlist, seeing the specific topics covered in each
This page is a compilation of commonly used CSS properties and is intended to make it easier for students to search for the type of property they might need to use based on the general categories above. To learn more about each property on this page and its syntax and acceptable values, click the property name. It will take you to the exact w3schools.com page for detailed information on each property.
This demonstration series will show you how you can create and include a ‘functions.php’ external file to your Project1 template.
Specifically, you will learn how to create and implement a script as a user-defined function that dynamically names the following on all the pages:
the banner area’s <h1></h1>
a class/ID name to be used wherever you wish
<img> source file and its alt text
You will see how to implement it by declaring the function in an external ‘functions.php’ file, including the ‘functions.php’ file inside the ‘head.inc.php’ file, and also calling the function inside the ‘head.inc.php’ file so that you can use its global scope variables anywhere within the template’s component pages.
Lastly, the demo also explains the difference between echoing the function’s results vs. using the stored variable values generated by a function from an external include() page.
Creating a Mobile-First Design Template for Your PHP Project
This demo will give you guidance in styling a web page with HTML5 markup from a mobile-first design approach. It covers the following concepts, principles, and methods:
the php/html starter file’s proper markup
how to add Google Fonts to a design
using a viewport/device-width meta tag
removing native browser styling with a ‘reset’ css file
using @viewport and @-ms-viewport in CSS
designing for smallest screens in mind first
using @media queries to alter layout on larger screens
styling a baseline for very commonly used elements
To follow along with these videos using the exact same markup, you can download the template ‘project1’ folder in a zipped file. After downloading, unzip and place the unzipped folder into your “htdocs/dev/” folder to work on the files.
XAMPP stands for “X (one of four OSs), Apache, MySQL, PHP, PERL” and is used to enable your personal computer with the web and database tools necessary to host its own dynamically driven websites for testing and development purposes. The following tutorial video demonstrations will show you the steps to set your computer up as a “localhost” server on a Mac. Continue reading XAMPP – TURN YOUR MAC INTO A DEVELOPMENT SERVER→
This demo contains a 9-video demo series that will teach you how to make a single web page with a jQuery page-scrolling easing effect. The software demonstration is done in Dreamweaver, but you could also follow along with any decent script editing program.
This tutorial will show you how you can write a customizable gallery function that scans gallery directories to create and populate four types of image banks: random <IMG> image, random css background image, lightbox thumbnail gallery, and carousel slideshow. No database necessary…. Continue reading PHP – Creating a Gallery Function→
XAMPP stands for “X (one of four OSs), Apache, MySQL, PHP, PERL” and is used to enable your personal computer with the web and database tools necessary to host its own dynamically driven websites for testing and development purposes. The following tutorial video demonstrations will show you the steps to set your computer up as a “localhost” server on Windows. Continue reading XAMPP – Turn your PC into a development server→