Monthly Archives: January 2013

Week 1

Design, Sustainability, Change from Maria Popova on Vimeo.

  1. Sign up for an account on this blog. Choose a username that I can easily identify you by (like your first name), and use the email that you check most often. This is the primary email address that I will use to communicate with you! Make sure you have a gravatar with your image.
  2. Download this  Zip Archive, which contains a Photoshop document. Build an HTML page based on this .psd that looks as close to the comp as possible. Use CSS for fonts, colors and layout. If you need a refresher, here are some good tutorials:
  3. Once your page is finished, upload the files to your web hosting account. Create a folder on your ftp site and call it Homework2012. All homework assignments will be posted there just like you did in Web Design 1.
  4. Post a link to your test page on this blog as a comment to this post.
  5. SKYPE username: cunywebii password D4SG1!

Please post your test pages by the end of the day, I’d like to have a chance to look at them so I can plan the next few classes based on where you are all at skill-wise. Thanks!

If you are totally lost doing this assignment, you may not be ready for this course and should consider switching to Web Design 1.

Final Project

The goal of this course is to raise your Web design and development skills to a professional level. To that end, you are going to be working on a single semester long project.

Your final project is to work with a real world client, and design (or possibly redesign) a new Web site for them, using the Web Development Process that I am going to teach you in the coming weeks.


Web Development Process

  • Discovery – Research the site and company,  analyze the effectiveness of the site as compared to its competitors and usability standards
  • Definition – Define and create detailed requirements for the project
  • Design – Create (or recreate) the navigation and organization systems, database structures (if necessary), information flow, interface and visual design
  • Development – Create production graphics, build front end interfaces (Client-side markup and scripting), program backend systems (Server-side scripts and databases)
  • Deployment – Q&A Testing, Bug Fixing, Marketing, Launching

One thing to keep in mind is that because a Web site is an infinitely changable, living document, Web development is iterative, meaning that the process always feeds back into itself as new features are considered, designed and developed.

*Notes about “Phase 2″

Final Project Update: Discovery Phase

Before you start defining your real-world Web project, you need to do some research and analysis. The first step is to have your client fill out this Client Survey, or fill it out with them. Next, you/your client should identify at least three competitive Web sites and perform a Competitive Analysis.

  1. If you don’t have Google Chrome installed on your computer, download it NOW! First Get the Web Developer Tools! Do it NOW! If you don’t have Google Webmaster Tools on your computer, download it NOW!
  2. A quick word about Web Standards Workshop
    1. Semantic Markup bookmarks on Delicious
    2. Using Meaningful (Semantic) Markup
    3. Logical Structure using Meaningful Elements (examples)
    4. Validation and meaning extraction
    5. Document types, DOCTYPE switching, browser modes
    • Contact your client and ask them to fill out a Client Survey form, its due in two weeks at the very latest- next week if you can get it that fast.
    • Create your own form or use this as a guide:
    • Only offer services you are able to provide and make sure the client understands that this is a class project and you have a schedule to keep.
    • Please ask them to return the form by next class meeting.
    • Semantic Markup practice finish and style Universal Declaration of Human rights– all semantic markup try to use as simple CSS as you can
    1. CSS Beginner TutorialCSS Intermediate Tutorial
    2. The Document Tree
    3. Selectors
    4. CascadeSpecificity and Inheritance
    5. Planning, organizing, and maintaining stylesheets
  2. CSS Style Guides:



You are going to be building your client’s website based on a WordPress back end.


WordPress is an open source, Web publishing platform. It was originally developed as a blogging tool, but has grown into a powerful CMS (Content Management System) used the world over for building complex dynamic Web sites. This site is built with WordPress!


  • Free
  • Open Source
  • Mature
  • Customizable
  • Easy to Maintain
  • Large Community


WORDPRESS.ORG VS. WORDPRESS.COM is where you can download the latest version of WordPress for installationon your own domain. It is also where you can find documentation and support, and add-ons to customize your site. is where you can set up a blog under the domain ( The basic service is free and supported by advertising, premium services like your own domain name are available for a fee.


Some people think they don’t want to use a system like WordPress because they don’t want there site to look like a “template” or a “blog”. Basic WordPress sites do share similar layouts but there are thousands of free and commercial themes that you can use and, if you want to get into more advanced techniques, completely customize. Here are some examples of sites that were built with WordPress:


If you currently have a domain and a host, make sure your host supports the following. BlueHost is compliant with everything below.

  • PHP 5.2.4 or higher
  • MySQL 5.0 or higher
  • Apache or nginx Web server (recommended)

For either a new or existing host, you will need to be able to do the following:

  • Access your site via the host’s control panel
  • Access your site via FTP
  • Create a new mySQL database via myPHPAdmin

Installing WordPress

 Log into your Bluehost account and go to the control panel and scroll down to Software/Services. See image below.

Click on WordPress. click install, fill in:

Where would you like WordPress installed?

Click complete.



  • Header
  • Menu
  • Sidebar
  • Page / Post Content Area
  • Lists: Archive / Category / Tag / Search Results
  • Footer


Before you start designing your site architecture and layout, or planning content, there are some basic decisions you should make about the site and what it’s purpose is. At the very least, you should create a short document stating the following:

  • Mission Statement – In a few sentences, state what the purpose of your site is
  • Audience – Who is your site intended for? What are they looking for from you?
  • Objectives – What are your business objectives for the site? Are you promoting your services? Selling something? Teaching something?


Once you have a basic definition for the site, you should think about what the static and dynamic content of the site will be.

First figure out what pages will form the basic structure of your site. This is the static content that will be accessible from the menus, and will not change or be added to often. This can include background information about you, your business or services, terms of use, contact information, etc.

Next, determine the post types that will be regularly adding to the content of your type. Think about what categories they might fall into, and how you will want to represent and organize those on the site. Also think about what external sources you might use to pull in fresh content (facebook, twitter, rss feeds, etc).

Based on the decisions you make about the static and dynamic pages, create an outline of the pages and page types of your site. Determine how often each of these will be added to or updated.


Use the outline to create a visual sitemap of the pages of your site and the main connections between them.


This is a blueprint for the layout of the pages of your site. Since we are using WordPress for your site, keep in mind the basic anatomy that a standard WP site follows. if you are going to diverge from this, it will mean more customization. Create a wireframe for each distinct page layout on your site.


Your WordPress install comes with two themes installed, but there are thousands of third-party themes that you can install yourself. You can browse them on the site.

Below are the nonprofits who contacted us regarding a new web build.

The Thompson Scholarship Foundation

The Thompson Scholarship Foundation, the initiatives we have set forth, and our focus on giving back the community. Founded in 2007, the Thompson Scholarship Foundation works to address the educational and social needs of urban communities by developing programs and supporting community-based organizations. It is recognized as a non-profit public charity under section 501(c)3 of the Internal Revenue Code.  We awards scholarships to high achieving high school students in Philadelphia. The goal of the Thompson Foundation is to provide financial support, encouragement, and/or direction to high school seniors who need help navigating the financial aid process.

The African American Atelier, Inc.,

A non-profit art organization, seeks to promote an awareness, appreciation and sensitivity to the visual arts and culture of African Americans and to work in harmony with other ethnic groups.  The organization is based in Greensboro, NC and was officially formed in 1990 by the late Eva Hamlin Miller and Dr. Alma Adams.

In addition to hosting 6 rotational exhibitions a year, the organization implements an extensive year round art program for children from low-wealth communities and families. Many of these children would not be able to participate in any other form of art instruction without the programming that the Atelier offers.

To learn more about Atelier Around the World please view the following links

Attached are the organization’s brochure and the Atelier Around the World Brochure. 

Homework Week 1

  1. Register as a user of this blog. Post a comment to this blog post to let me know that you are registered and include the address for your  ”wordpress blog”. Each week following this you will post a link to your homework on your own WordPress blog in the comments section of this blog.
  2. Go to WordPress and create a blog that you will use to house your homework for this class. Under appearances, select themes and choose a new theme. Add widgets, fill out the personal info on the blog and create a blog that shows some personality.
  3. Create a account for yourself. Tag three Web Sites that are relevant or talk about RESPONSIVE WordPress themes 2013 and BOOTSTRAP WordPress themes 2013.
  4. Create a Gravatar account. Take a photo of yourself, upload it to Gravatar and link it to your WordPress account.
  5. Post a link to your homework page to the comments section of this blog post, your homework page should contain a link to you DELICIOUS site.
  6. Read both questionnaire’s, view their sites and view the sites that they listed as sites they like.
  7. Email your nonprofit, letting them know we’re narrowing down nonprofits and set up Skype chats for Wednesday.
  8. IF you’ve decided on a nonprofit, complete your competitive analysis and upload to your blog.
  9. We have contacts from six or so nonprofits who would like us to build a site for them. Please review each nonprofits website, choose two and write a few paragraphs telling me why they would be a good fit for you.A few important guidelines we need to consider when working with a nonprofit:
    • If your client is still in the developmental stages, it can be really difficult to design a site for them as their plans and objectives shift around you
    • Unless you are pretty technically skilled and ambitious, don’t promise an e-commerce (online shopping) component of the site, we won’t really be covering that, so you would have to research it on your own
    • Make sure your client is going to be available for approvals and will be able to get you the material you need
    • If possible, work with a client where you can have a single point of contact who has authority to sign off on designs