Introduction to Web and Social Media Design

by Brian Ausland

Use your computer skills to learn how to develop your own web page sites. This course is designed to provide the necessary skills and training for an entry level position in the field of Web Design. The class will focus on web page planning, basic design, layout, and construction (effective and ineffective), setup and maintenance of a web site, HTML, DHTML, JavaScript, and various web page and image creation tools.

You will learn the basics of web design principles, digital media options, web design language (HTML), Internet uses and processes, design considerations, the impact of target market demographics, deliverables, and multiple software packages. Courses such as this can provide the skills and motivation for you to successfully complete college programs in one of several business areas. The primary purpose of this type of multi-media graphics education is to provide instruction for and about e-commerce and Internet communications through the use of Web Page Design.

This is a repeatable course with progressive levels through Novice (this first level), Intermediate, and Advanced levels. You can turn this series of courses into a full Career Pathway as first an introductory, then a Concentration, and finally a Capstone course.

AME - CALPADS Course #8133: Introduction to Graphic Design

This course provides students with a foundational understanding of digital design, tools, processes and systems common to careers in graphic arts and digital production. Exploration topics include printing enterprise, art and copy preparation, graphic design, image generation and assembly, production photography, graphic reproduction operations, binding and/or finishing related to digital imaging, printing, and digital production. This course serves as an introductory course to a variety of AME Pathways including, Graphic Arts, Professional, Photography, Animation, and Game Design.

As an ITC Course: From CALPADS: Introduction to Web and Social Media Programming and Design

This course will introduce students to the integration of various media into programming assignments including Web assignments. Students will also be introduced to the basic design elements used in interactive media. Other topics include encoding methods, using media design and editing software, animation and drawing software as well as image editors and three-dimensional design. Online content delivery process will be outlined as well as establishing online presence and e-commerce capabilities and Web security. Simple coding assignments using HTML and Cascading Style Sheets are used to teach basic Web design including the use of images, hyperlinks, tables, forms, video and audio.

Program Information
CTE Certification Elements
California's 2013 CTE Standards (50)
California English Common Core Standards (12)
California's 2008 CTE Standards (28)
California Academic Content Standards (14)
Competencies / Outcomes

Upon completion of the Web Page Design course, the student will be able to:

  • Develop and design web applications and web sites.
  • Create and specify architectural and technical parameters.
  • Direct web site content, creation, enhancement and maintenance.
  • Define terms associated with World Wide Web and the hypertext markup language.
  • Demonstrate an advanced knowledge of the internet including the various tools utilized: browsers, email clients, FTP clients, compression utilities, newsreaders, and search utilities.
  • Demonstrate an understanding of the basic web page design principles.
  • Demonstrate awareness of design considerations that affect web page construction including audience, browser version, and cross platform issues.
  • Demonstrate knowledge of how to design and create effective and structured web pages using HTML and FLASH.
  • Plan, create, test, improve, and distribute online communication projects that involve integration of a variety of textual and graphical components
  • Understand and use computer technology and software packages in planning, producing, integrating and distribution of technical materials
  • Analyze user needs to determine technical requirements.
  • Back up files from web sites to local directories for instant recovery in case of problems.
  • Collaborate with management or users to develop e-commerce strategies and to integrate these strategies with web sites.
  • Confer with management or development teams to prioritize needs, resolve conflicts, develop content criteria, or choose solutions.
  • Create searchable indices for web page content.
  • Create web models or prototypes that include physical, interface, logical, or data models.
  • Design, build, or maintain web sites, using authoring or scripting languages, content creation tools, management tools, and digital media.
  • Develop and document style guidelines for web site content.
  • Develop databases that support web applications and web sites.
  • Develop or implement procedures for ongoing web site revision.
  • Develop or validate test routines and schedules to ensure that test cases mimic external interfaces and address all browser and device types.
  • Develop system interaction or sequence diagrams.
  • Develop web site maps, application models, image templates, or page templates that meet project goals, user needs, or industry standards.
  • Document test plans, testing procedures, or test results.
  • Establish appropriate server directory trees.
  • Evaluate code to ensure that it is valid, is properly structured, meets industry standards and is compatible with browsers, devices, or operating systems.
  • Evaluate or recommend server hardware or software.
  • Identify or maintain links to and from other web sites and check links to ensure proper functioning.
  • Identify problems uncovered by testing or customer feedback, and correct problems or refer problems to appropriate personnel for correction.
  • Incorporate technical considerations into web site design plans, such as budgets, equipment, performance requirements, or legal issues including accessibility and privacy.
  • Install and configure hypertext transfer protocol (HTTP) servers and associated operating systems.
  • Maintain understanding of current web technologies or programming practices through continuing education, reading, or participation in professional conferences, workshops, or groups.
  • Perform or direct web site updates.
  • Perform web site tests according to planned schedules, or after any web site or product revisions.
  • Provide clear, detailed descriptions of web site specifications such as product features, activities, software, communication protocols, programming languages, and operating systems software and hardware.
  • Recommend and implement performance improvements.
  • Research, document, rate, or select alternatives for web architecture or technologies.
  • Select programming languages, design tools, or applications.
  • Write supporting code for web applications or web sites.
  • Write, design, or edit web page content, or direct others producing content.

You will be using mostly on-line learning sites and teacher developed materials as indicated in each Unit/Lesson.



  • Computer Hardware and Software to support web page development.
  • Internet Access.
  • Adobe Suite, including Dreamweaver (use a suite with Flash, Premier, Soundbooth, etc. included)
  • MS Office Suite, including Publisher
  • Notepad.
  • FTP.
  • Ancillary materials, hardware and software as appropriate.


  • Printer (preferable one black and white laser printer and one color printer for special items).
  • Scanner
  • Camera with means of downloading images - preferably a digital camera with a memory card and a card reader
  • Computer Security software on each system, such as Deep Freeze
  • Lab Management sotware package, such as Synch Sys (from Smart) or Insight (from Faronics)


  • Interactive Whiteboard
  • Digital Projector
  • Document camera system such as the Elmo
  • Digital graphics pads such as the Intuos 9"x12" or the VisTablets 9"x12" tablets


  • DigiMemo type of handwriting capture portable tablet for students to gather data for sites
  • Sound system, including microphones for student presentations

Introduction to the Internet and the World Wide Web

The Internet and the World Wide Web are two different entities within the universal communications system. There is a dif ference between the infrastructure and the software management systems. Students will learn to identify those differences, define each system and demonstrate their new expertise by conducting an online research project based on a predetermined topic. Students will also be provided a history/timeline of the world wide internet from its inception to applications in current day society as part of this unit. Finally, students will work in small groups to write a report on their findings, using PowerPoint as their delivery tool, and make their findings public posting their work in a public location (in the room) and making an oral presentation.

Classroom Problem Based Learning
4 Hours

Copyright Laws- Ethical Content Use

In many projects students will gather, manipulate, and create images and websites. This unit emphasizes the social responsibility students have to each other and their audience to help them build good practices as they take these skills to future programs and jobs. As students research content online, they must continually consider and evaluate content bias, currency, and source corroborating.

This unit emphasizes the need to gain permission to use graphics, images, video, and audio produced by others and to copyright their own original work.

There are two components to this unit:

This unit provides an overview of copyright protection -- what it is, how you get it, and what your rights are after you have it. Specifically, you learn why although media files and text are publicly available on the Internet, they are not necessarily free to use at will. You will also discover the specifics of copyright protection, the types of work that are afforded protection, and the rights you have as a copyright holder. You also gain an understanding of what is means for a work to be in the public domain and how to find works you can use in your own projects. (Waxer & Baum)

This unit examines copyright infringement (the unauthorized use of a copyright-protected work without permission). How you feel about copyright infringement often depends on which role you play in the infringement scenario -- the person who holds the copyright to a work, or the one who wants to use it. If the work is downloadable from the Internet, the variables are even more complex; tools such as file-sharing software make potential infringement even easier, so deciding whether an dhow you can use the work can be more difficult. To be an informed and empowered decision maker, you need to understand what constitutes infringement how to seek permission to use a copyrighted work, and also how to apply the fair use doctrine. (Waxer & Baum)

Classroom6 Hours

Art and Web Design Principles

The lessons in this unit will enable web page design students to apply art-design principles and theories in the construction and layout of a web page.

5 Hours

Boolean Logic

What is Boolean Logic and how does it relate to network searches?

4 Hours
Lesson Plans

Internet Navigation Tools

Surfing the Internet and its using its tools as a responsible and courteous user, In this unit, students learn about the rules and social conventions of using the net and its tools, along with Internet Netiquette in a variety of settings.

Learning Activities
6 Hours

Web 2.0

Students will investigate a variety of web based resources in order to determine the purpose, construction and history of blogging. A wiki is an easy to use a webpage that anyone can edit. 

Included in this unit is the PBL Project, Monetizing Your Wordpress Website. Students will have the skills needed to identify proper content writing and images for their blogs. Students will be able to create ads and affiliate offers needed to monitize their blog. Students will also be able to identify paid traffic sources and how drive traffic to their websites.

10 Hours

File Management

Good to excellent file management is a MUST in this class and in any type of computer technology. It is especially important in web page design. In fact, effective file management is one of the MOST important components of successful web page design and display on the Internet.

In this unit you will learn the importance of, and strategies for effective file management. Then you will demonstrate your skills by creating a file management tree and moving existing files into that tree, making certain that files are placed in the correct folders.

1 Hour


Hypertext Markup Language & Cascading Style Sheets

This is the mechanics of making a web page. The student will learn how to create basic HTML elements of a web page, create it using basic text editing software, and viewing it in an Internet Browser. HTML is a scripting language and it comprises four primary elements or concepts:

  • hypertext and hypermedia computer network based publishing,
  • a scripting language (HTML Tag language),
  • a software application to locate, download, interpret, and display the data
  • a web-specific data-transfer protocol (Hypertext Transfer Protocol - HTTP).

HTML is primarily concerned with 2 things: CONTENT (the words and images in the page) and INSTRUCTIONS for the browser (tags that command the browser).

Cascading Style Sheet (CSS) provide a way for you to apply styles - such as fonts, font sizes, borders, and colors - to HTML and other on-line documents. CSS is important to web page designers because it allows them to separate content and format.

30 Hours

Site Development Planning

The first component of any web site development process is the planning stages. There are a variety of components that may seem like busy work but are actually very important foundation components for the whole project. You will learn how to develop and effective and productive web page and the necessary skills and procedures necessary to achieve that end. Included are design elements, structural aspects, target audiences, goals and intended visitor outcomes, as well as strategies to make your site as user-friendly as possible.

Site Development
12 Hours

Intro to Art Theory and Fundamentals

This unit will focus on web page planning, basic design, and layout of uploading images to web pages created by the student. Students will learn how to showcase their previous work when applying for a job. The instructor introduces the concepts of review and redesign. Students then are introduced to drawing and editing tools such as the Line, Rectangle, Pen and Text Tools.

20 Hours

Multimedia Web Page Development

Students learn the initial design concepts necessary when beginning a web site that results in an effective and productive multimedia site. They cover the six features that set technology apart from all other communication technologies, a little about Source Code, rules of multimedia design, and a variety of other design concepts.

10 Hours

Web Development Applications

Adobe® Dreamweaver® software enables students to develop with PHP-based content management systems such as WordPress, Joomla!, or Drupal; design with powerful CSS inspection tools; and test your web pages across browsers with Adobe BrowserLab, a new Adobe CS Live online service.* CS Live services are complimentary for a limited time.

Classroom / Lab
20 Hours

Prepare Your Class/Club/Activity Web Site

You will be creating a web site of your own design. You will select any club, class, or activity taking place at your high school. That selection will be the topic for your site. You are fully responsible for completing all necessary research, gathering and/or taking photographs and illustrations, writing the text, and composing an informative and interesting site about your chosen topic.

10 Hours

Creating Engaging Content for Websites

Adding interactivity to a website will increase user engagement and help users retain the information that they learn in the process. Activities in these lesson plan will help students think about the information they are presenting in a new way. Websites are no longer just informational, but can enhance the learning experience by engaging the user with interactive design. Students will to present the information triggering multiple senses for higher retention of the information presented. Included are design and technical aspects, goals and intended visitor outcomes.

Students will design an interactive activity by evaluating and organizing the content of an informational web page. They will use other students in the class to test the impact of the activity.

Publishing Content to the Internet

Students will be shown how to publish their actual web content (web pages, folders, css files, images, other media, etc.) to a web hosting service of their choice. The students will choose a unique yet descriptive Domain Name for their site using a "whois" search and other tools to determine a unique domain name not taken yet on the Internet. Then they will search for an appropriate web hosting service on-line. The students will be posting actual web pages of a business for which they have produced a professional business web site. Students will join with their business partner and have them purchase the domain name and hosting service. Students will then publish web content to the service using Dreamweaver site commands for both the local and remote folders.

5 Hours

Vertical Ads: Instagram for Business and Portfolios Project

At the center of this project, students will launch their portfolio as a social media content creator. Students will explore the social media production job market, what's trending, professional software and online tools. In addition, students will create a professional presence using LinkedIn to create their profile. 

The culminating project is a portfolio of sample projects and a solid social media profile. Experience with Adobe Photoshop and Premiere Pro is recommended. This project will jump-start a Social Media Content Creator's portfolio.

Web Search Engine Optimization (SEO)

This assignment is designed to strategically plan for website performance during the design phase of a website project. The purpose of this project is to teach students to think tactically as they create smarter designs that perform well in search engines after launch. Google algorithms are constantly changing. SEO strategies are constantly evolving to meet these changes head-on. This project will provide some tools to stay on top of the SEO game.

How to Make Money with your Videos on YouTube

Almost 5 billion videos are watched on YouTube every single day, with over 30 million visitors. With that amount of people watching, students have a chance of making money with their own YouTube channel. This series of four project based learning lessons will be exploring not only the history of YouTube, but also process of creating, marketing, and distributing students' own YouTube channel. They will also learn how to make money using their own videos. Students should have access to videos they want to upload to a channel.

Employment Portfolio

The lessons in this unit will be used to create a complete employment portfolio. Jobs,work habits and ethics. Communication skills and employee responsibilities

The lessons in this unit will also consist of activities that teach the student how to write a portfolio for a student organization or for a future job.

10 Hours