Watkins Web 2: Blog

Posts tagged with “exercises”

Exercise 21: PHP functions

Download Exercise 21

Exercise 20: CSS Layout Review

Download Exercise 20

Try to match the three styles posted in the live (solved) version of Exercise 20 as you work.

Hint: each column is 112.5 px wide, while gutters are 25 px wide.

Exercise 19: PHP Forms in Action

Download Exercise 19

Start by viewing the live demo form and comparing it to the demo-input.php file in the download. Then try submitting the two forms in it repeatedly with different options.

Once you’ve got an idea of what’s going on, do the same with the exercise itself. View the live version and compare it to your PHP files. To complete the exercise, edit exercise-output.php on your desktop and upload both it and exercise-input.php to your FTP space on the web.

Some tips:

  • Make small, incremental changes and test them on the server before moving on to the next step. Nothing’s more frustrating than writing a lot of code which then produces a blank page: that way you have to meticulously go backwards (removing lines of code) until you find the culprit.
  • If you can’t tell what variable has what value at a certain point in the code, echo it ! You can prefix these kinds of lines with DEBUG to make sure you don’t forget to go back and remove them at the end.
  • Most PHP errors have to do with semicolons or curly braces in the wrong place. Remember, a straightforward PHP statement always ends in a semicolon:
    echo "My favorite color is $color_variable.";
    But a conditional, because the statement is hypothetical, has the semicolon inside the curly brace at the end:
    if ($color_variable) {echo "My favorite color is $color_variable.";}

Exercise 18: PHP Arrays

Download Exercise 18

Arrays, looping through arrays.

Update: Solutions are now included with the files.

Exercise 17: More PHP

Download Exercise 17

More conditionals, loops, and includes.

Update: Solution is now included with the files.

Exercise 16: Intro to PHP

Download Exercise 16

Strings, variables, concatenation, conditions.

Update: Solution is now included with the files.

Running PHP files from Terminal.app

Since PHP is a server-side language, you can’t just open the files in a web browser and have them execute the code. For these exercises, we’ll be running the files from the terminal. Here’s what to do:

  1. Download the exercise files to your Desktop and unzip them.
  2. Open Terminal.app and change directories (cd) to the folder that has the files on the desktop. The command you type needs to contain the path to the files, so it will look something like cd /Users/james/Desktop/2011\ 10\ 24\ exercise\ 16 . The simplest way to get the path is to type cd (note the trailing space) and then drag the folder on the desktop right into the Terminal:
    Dragging a folder into Terminal.app
    When you let go, it will spell out the path name for you. Now hit return to change directories.
  3. Type ls (list files) and hit return to confirm that the shell’s working directory contains the files you want to run. You should see a.php, b.php, c.php, etc.
  4. Try running the first PHP file by typing php a.php and hitting return. Now open a.php in Textwrangler and read through it to see how that output was generated.
  5. Any time the screen gets too cluttered, type clear and hit return to start fresh.
  6. For the exercise e, you’ll be using the prompt to input two variables (a name and an age) at the same time that you run the file, so you’ll end up typing something like php e.php James 32.

Further Reading

  • PHP.net, the authoritative reference for PHP definitions, explanations, and actual examples.

Advanced Forms and Attribute Selectors

Download Exercise 15

Update: A solution is now included with the files.

Fun facts about forms

  1. A form is first-and-foremost defined by the elements between <form> and </form> tags. There might be many text fields, radio buttons, and checkboxes, but if they all appear inside a single set of <form> tags, that’s one form.
  2. Forms usually have at least two attributes, called method and action. The two options for method are get and post, and the action specifies a file to process the form when it gets submitted. So usually we’ll write something like <form id="contact" method="post" action="email-sender.php"">. We’ll go over these details later.
  3. Most form elements are inline by default, and inline HTML elements need to be contained by block level elements to be valid. This is why you see so many pointless-looking <div> tags in forms.
  4. The most common form elements — text inputs, textareas, and submit buttons — require illogical-looking markup. Pay special attention to the type attribute whenever you see an input:
    Form element Markup Output
    A single-line text field <input type="text" />
    A multiline text area <textarea rows="5" cols="20">I suppose some placeholder text could go here, but most people leave it out.</textarea>
    A “submit” button that sends a form <input type="submit" value="Submit Form!" />

Further Reading

Exercise 14: Responsive Design

Download Exercise 14

Update: a solution is now included with the files.

Open page outline.txt, index.html, and style.css and examine the code to see how the basic structure is set up. As you review the CSS file, note the three canonical features of a “responsive design”:

  1. The main container (#container) is only restricted by a max-width property, meaning it can contract to a smaller width when the browser window gets skinnier than 1200px.
  2. Images on the page do not have width and height attributes. Instead, CSS is used (max-width:100%) to allow them to scale down with their container. Using max-width instead of width ensures that the images will never be scaled up and get pixellated.
  3. Finally there are two media queries set up to detect when the browser becomes “medium-wide” (600 – 999px) and “wide” (1000px – 1200px). These contain distinct rules that supplement or override the primary rules above them in the stylesheet.

Your task is to find all the instances of PERCENT and choose replace them with actual percentage values that will make the page lay out differently for medium and wide screens. The medium layout should use two columns, while the wide column should use three.

Further Reading

  • Responsive Web Design, Ethan Marcotte’s article that kicked the movement off.
  • Responsive Web Design, Ethan Marcotte’s book. $9 for the ebook.
  • Media Queri.es, a website showcasing sites built with responsive designs.
  • Mobile First, Luke Wroblewski’s manifesto that we should build our sites to work well on mobile platforms first, then progressively enhance them to work on desktop browsers.

Exercise 13: HTML5 Video

Download Exercise 13

Important: Serving video on a live web server

If posting to a server, your videos probably will not play unless you add this to your .htaccess file:

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

Further Reading


  • Handbrake, Mac software useful for encoding video as h.264 .MP4s.
  • Firefogg, an awesome Firefox extension that will convert your video to the ogv format.


Exercise 12: Conditional Comments and Basic HTML5

Download Exercise 12

Your task is edit html5.css so that html5.html and xhtml.html look exactly the same in the browser: to do so you’ll have to change the selectors in html5.css to correctly target the newer HTML5 tags being used in html5.html.

Exercise 11: Translating PSDs to Markup + CSS

Download Exercise 11

Tonight the primary goal will be to translate the PSD pages into valid and semantic HTML: don’t even worry about the CSS yet. That said, you’re welcome to create IDs and classes in the HTML (e.g. <div id="maincontent">) that you’re pretty sure you will need when you get to the CSS.

Please do not try to implement a module system for this exercise: just use semantic class and ID names and attach them to your <div>s, <span>s, <p>s, <h1> - <h6>s, <ul>s, etc.

Update: A solution with both HTML and CSS is now included with the files.

Exercise 10: jQuery

Download Exercise 10

The instructions are in the HTML file. This is mostly a tinker-and-see-what-happens exercise, so there is no separate solutions file.

Further Reading

Exercise 9: Navigation Bars

Download Exercise 9

Update (Dec 1, 2011): The solution is now included in the files.

Further Reading

Exercise 8: Modular Grids with CSS

Download Exercise 8

The grid in this exercise was adapted from the 960 grid system. When you get a chance, you should take a look and download the template files from there, too. Of course you may well prefer to construct your own grid for your project.

Here’s a brief description of the concept going on here: Very often we want to crate a grid-based design, where the content is structured with a system of columns and subdivisions. Each div (or list, or paragraph) will be a certain number of grid “modules” wide. So instead of specifying the pixel width we want for every element using IDs and CSS, we define a system of width classes (.w1, .w2, .w3 ….) that match our module widths. Then we apply them to each HTML element we want to control. We also define two float classes (.left and .right) and use these in conjunction with the width to control the layout. A two-column div that needs to be floated right would then just get the two corresponding classes: <div class="w2 right">bla bla</div>. A 1-column div that needs to be floated left would look like this: <div class="w1 left">Bla bla</div>.

In general we don’t want to go too crazy with this system and apply width classes to every single element. But it’s definitely useful for the primary containers on a page.

Update: Solutions are now included with the files.

Exercise 7: Aligning Type to a Baseline Grid

Download Exercise 7

Further Reading

Exercises 4-6: Floats, Positioning, and Faux Columns

Download Exercises 4-6

Update: Solutions are now included in the .zip.

Exercises 1-3: Selectors, Box Model Review

Download Exercises 1-3

8/24/11 Update: I’ve fixed my typos and added solutions to the zipped file. Please re-download if you’re collecting these files for reference.