Here you will find short, mostly one-class or two-class activities that you will be turning in throughout the semester. Your projects will be built largely on the techniques you learn through these exercises. Turn in each exercise labeled [lastname_f-exercise#] in the class dropbox at the time specified, which will typically be the beginning or end of a work day.
You will be turning all your projects in by uploading them online to a web space that I will create for you, and which your personal domain (which you will purchase) will point to. Therefore, you must pay VERY CLOSE ATTENTION to the naming structure that I require for each exercise. If you do not name your folder correctly on your web server, I will not be able to find it and you will receive a zero for that exercise. So be sure and double check your files get uploaded properly be visiting the URL yourself before the time at which the project is due. Note: files and directory names on the we are case-sensitive.
The naming convention unless told otherwise will be:
[yoururl.com]/exercise-1
or
[lastname-f-exercise#]
Exercises will be due by the beginning of the following class day unless told otherwise.
Demo Files
- Skeleton Structure
- Marching Ants
- Icon Lists
- Upload and display files on form change
- Draggable
- Drawing Board
- Add Items to Collection and List Them
- Media Query / jQuery
- CSS Intro
- Classroom
Exercise 1
Download the following and build this simple layout with me.
Exercise 2
Download the following files and, following instructions and the hints, use the hinted layout to write the html necessary to match the un-hinted layout.
Exercise 3
Download the following instructions and use them to build a web page discussing the merits of two sites, a good and bad one, which uses most of the elements we’ve learned to structure the content. You can start with the files of Skeleton Structure above for your projects. It contains the basic setup to begin a site. You won’t be using the stylesheet of course.
Exercise 4
Download the following files and work along with me to match the given layout. We’ll cover together what you don’t already know, and you may be left to finish what you know.
Exercise 5
Now let’s build with flex using it structurally.