Teachers Network
Translate Translate English to Chinese Translate English to French
  Translate English to German Translate English to Italian Translate English to Japan
  Translate English to Korean Russian Translate English to Spanish
Lesson Plan Search
Our Lesson Plans
TeachNet Curriculum Units
Classroom Specials
Popular Teacher Designed Activities
TeachNet NYC Directory of Lesson Plans TeachNet NYC Dirctory of Lesson Plans

Teachers Network Leadership Institute
How-To Articles
Videos About Teaching
Effective Teachers Website
Lesson Plans
TeachNet Curriculum Units
Classroom Specials
Teacher Research
For NYC Teachers
For New Teachers

TeachNet Grant:
Lesson Plans
TeachNet Grant Winners
TeachNet Grant Winners
Adaptor Grant Winners
TeachNet Grant Winners
Adaptor Grant Winners
TeachNet Grant Winners
Adaptor Grant Winners
Other Grant Winners
Math and Science Learning
Impact II
Grant Resources
Grant How-To's
Free Resources for Teachers
Our Mission
   Press Releases
   Silver Reel
   2002 Educational Publishers Award


TeachNet Grant: Young Designers Build the Web: Creating a Custom Digital Portfolio
Iulian Irimina
Academy for Social Action
509 West 129th Street
New York, NY, 10027
Grade/Subject: 9-12 Technology
About the Grant: This unit guides the students in creating a custom website where they will post their best work during a given period of time. Students will get a chance to upload their own portfolio aquired in time on a website that is entirely set up and designed by them. This is a complex project and requires planning, assessment and flexibility on behalf of the instructor. All the lessons are interconnected and there should be plenty of opportunities to go back to revise work.

Students will collect and place on this website all their best digital work created during a period of time, including their essays, reports, PowerPoint presentations, graphics, drawings or photo illustrations.

The young web designers will work in groups but each designer will create his/her own website from scratch using HyperText Markup Language (HTML) and Cascading Style Sheets (CSS) code or using a web application such as Adobe Dreamweaver.

Some of the materials needed are

  • computers with Internet access
  • Notepad (for Windows) - free
  • Textedit( for Mac) free
  • Adobe Dreamweaver (optional)
  • Projector
  • Core FTPLite - FTP client software to upload the files, photos and videos
  • web address and web host
How This Grant was Adapted: Creating a custom digital portfolio involves a great deal of work especially for learning and mastering (X)HTML and CSS. But once the students get comfortable manipulating the code then the possibilities are endless. Many schools prefer using templates or premade web spaces where students upload their work. However, this project requires the students to create themselves a website and customize it according to their personality and skills.

The young designers code a webpage from scratch and then make an entire website. They choose the colors, the design, the text, the buttons and everything else that’s on the website. In parallel with this, they will make sure they will upload their work according to their design and preferences. Now, this really shows a learning curve.

The instructor of such a class need to be experienced and should select one or two students as assistants in order to help troubleshoot and solve basic problems that may come up. (sign up for a webhost, uploading rules, creating folders on the web, etc)

Project URL

http://irimina.com/ is my own example of custom digital portfolio.

My website is basically never completely finished as I constantly upload new work or change website features as I learn new things.

Objectives Students will be able to apply the concepts of web host, web address and website when designing a new website.

Students will be able to set up any website using Adobe Dreamweaver of NotePad ( Windows)

Students will be able to apply basic concepts of design in any work of art

Students will be able to use XHTML and CSS to hand-code their own online projects

Students will be able to create, upload and maintain a website that incorporates their own portfolio during a grade/semester etc

Websites Used

http://w3schools.com/ is a great resource for learning XHTML and CSS. Students can get a feel on how to use the code as this school provides free opportunities to use the code and see the result in the same window.

http://meyerweb.com/eric/tools/color-blend/ is a resource for choosing and mixing colors for your website. Usually this can be accomplished using software such as Adobe Photoshop but this online resource is free and does not require learning how to use a software application such as Photoshop.

http://csszengarden.com/ shows the flexibility and beauty of CSS. This is a website that uses the same XHTML but different CSS. In other words you can click on the links on the right to see the same text in different CSS formats.

http://htmldog.com/ is a good resource for both beginners or skilled web designers. It has specific examples accompanied by clear explanations.

Standards Addressed: Please list the New York State standards which apply to your unit. Indicate grade and subject area for each standard. Please copy the text of each standard; do not list them by number.

Creativity and Innovation
Students demonstrate creative thinking, construct knowledge, and develop innovative products and processes
using technology

Research and Information Fluency
Students apply digital tools to gather, evaluate, and use information.

Digital Citizenship
Students understand human, cultural, and societal issues related to technology and practice legal and ethical behavior.

Technology Operations and Concepts
Students demonstrate a sound understanding of technology concepts, systems, and operations. Students:

a. understand and use technology systems.

b. select and use applications effectively and productively.

c. troubleshoot systems and applications.

d. transfer current knowledge to learning of new technologies.

Lesson 1: Lesson 1:

Intro to web design

In the beginning, the future web builders should be exposed to examples of custom digital portfolios emphasizing good design and layout of a website. In this lesson, students will also need to grasp concepts such as web host, website, web address, FTP uploader, HTML editor etc. Students should be able to put into their own words the meaning of the new vocabulary.

This would be a good time to identify and install and programs as well as explain how to use them.

Note: Do not move on to the next lessons if students have serious problems grasping the concepts and utilizing the tools. Grouping students is a good way to have students learn as they can help each other.

Lesson 2:

Lesson 2. Design concepts

Students will learn about the elements and principles of design in general, as they apply to any work of art. These elements and principles are applicable to all design mediums such as architecture, art, graphic design, photography, print and web design. Special emphasis will be given to the application of these principles and elements, along with color and typography, to the medium of web design.

Students will need to identify the color models and how to use typography in a creative way. The instructor can assess their knowledge of identifying primary, secondary and complementary colors by assigning homework or a test in class.

Lesson 3: Lesson 3: Intro into web design code. Meet the XHTML.

This is when students get to the nuts and bolts of the XHTML. XHTML is the bone of any website. The young designers will learn about tags, attributes and elements and will practice how to create links, headings, lists, add pictures, and tables.

Students need to be allowed enough time to practice and understand HTML. The instructor should not move to next lesson until he/she makes sure the students apply properly some of the main XHTML tags. Students will be given the opportunity to come back to XHTML tags as well practice them in the next unit. It is up to the instructor to start teaching some tags before others.

One useful example might be allowing students to explain and share with class their understanding of XHTML. Students sometimes learn from each other quicker and are able to grasp the meanings better. The instructor could use a quiz for assessing their knowledge of XHTML proper conventions.

Lesson 4 Lesson 4: Meet CSS. What is CSS?

After students have concentrated on learning XHTML to create different tags, now it's time to add a little style to these tags. With CSS, students will be able to control the presentation of their tags and webpages.With CSS you can build a navigation bar, a background, create link effects, and style any element on a webpage. Introduce csszengarden.com to show students the power of CSS.

For homework, assign students work on w3schools.com website

Assess their CSS understanding and they way they apply the css to their XHTML by having students share their work using the projector in class. Allow time for discussing the future projects by talking about ways to present your content using CSS.

Lesson 5: Lesson 5: Combining HTML and CSS to create a webpage.

Now it' time to present some possible web layouts for the future websites. Introduce htmldog.com to help students with some examples of layouts. Students need to practice one column and two column layout sites as they are the most appropriate for their future project.

Lesson 6: Lesson 6:

Getting ready for implementing the final project. Students should be getting ready to put it all together to implementing their project. After learning practicing all this work it is now time to start or revise your work in order to clarify your design, homepage, links, and pictures.

Iulian Irimina holds an MS in Instructional Technology at NYIT and is certified as a NYS Educational Technology Specialist, k-12. He uses blogs and a variety of other web based applications with his students at A.S.A. One of his goals is to empower students to become responsible web builders and technology entrepreneurs

He is a member of International Webmasters Association


Come across an outdated link?
Please visit The Wayback Machine to find what you are looking for.


Journey Back to the Great Before