Web Design 1
Competency Set Orientation
This is an orientation to the competency set. In it you will find an overview, information about
practice and scored assessments, information about the types of resources available, and a
checklist to help you keep track of your progress.
Overview
In this competency set students will learn the basics of the WWW and how to create basic web
pages using HTML, add styling to those pages using CSS, and the basics of building and managing
a website using the content management system WordPress. Students will create files (HTML &
CSS) by using a text editor and upload and manage those files by connecting to a web server with
an FTP client or other file manager. Students will use a text or HTML editing program only for
this course, WYSIWIG editing programs such as Adobe Dreamweaver are not allowed. Along with
being able to configure and implement frontend webpage content students will analyze related
concepts including; search engine optimization, web accessibility and usability, font usage, and
color usage. Students will be able to apply the principals of accessibility and design to generate
accessible webpages.
Learning Resources
The learning resources for the competency set include PowerPoint notes (most with embedded
audio) and video tutorials which illustrate the concepts brought forth in the notes. The
PowerPoint slides include code examples, definitions of concepts, and embedded audio and
hyperlinks on many of the slides. The video tutorials demonstrate how to work with the concepts
used in the competency set and how to code the required elements of the assessments. There are
learning resources available for most of the 20 assessments. Additional tutorials for HTML, CSS,
and WordPress may be found on the Lynda.com training library or through the W3C Schools:
• Lynda.com: http://uwm.edu/informationstudies/resources/it/
• W3C Schools:
o HTML: http://www.w3schools.com/html/default.asp
o CSS: http://www.w3schools.com/css/default.asp
Practice Assessments
To prepare for the assessments it is recommended to practice along with the video tutorials
available in the learning resources. Additional resources and practice quizzes can be found from
the W3C Schools website for HTML and CSS.
• HTML Quiz
• CSS Quiz
Assessments
Most of the 20 assessments will require students to upload files to their webspace account. For
written assignments or where documentation is required a Word or PDF file will be submitted to
Canvas in addition to the url. Most assessment url’s have a required naming structure, please
carefully take note of the instructions for each assessment.
Competency Subset 1: The Web Server Model & File Management
-Connect to server, create and modify directories, upload files, and an examination of internet
history.
Assessments:
1. File Management/FTP Exercise
a. Setup webspace, download an FTP client, create a directory, and upload a
file
2. Working with a text editor
a. Create an HTML file with a text editor and upload it to a server
3. Multiple Choice Quiz
a. 10 question multiple choice quiz on subset 1 concepts
Competency Subset 2: HTML Editing
-Examine HTML tags, describe and explain search engine optimization, understand what
microdata is, demonstate knowledge of usability for the web, and describe design aesthetics.
Assessments:
4. Basic HTML Editing
a. Creation of an HTML file using specific tags
5. HTML Forms
a. Creation of an HTML form using specified tags and input elements
6. HTML Tables
a. Create a calendar using an HTML table (columns and rows)
7. Markup Exercise
a. Markup HTML code with microdata
8. Usability Exercise
a. Compare & Contrast the landing/homepage of 2 websites on the basis of
established design criteria
Competency Subset 3: CSS Editing
-Use CSS to control the presentation and formatting of web content.
Assessments:
9. Basic CSS/Resume
a. Working with color, size, fonts, and border elements to create a resume
10. Text Exercise
a. Use CSS to position text, images, and other content
11. Layout/News Article
a. Use CSS to create a layout template and style links
12. Dropdown Menu
a. Use CSS to create a dropdown menu structure
13. CSS Forms
a. Implement a visually appealling form layout with CSS to increase conversion
14. Introduction to Responsive design
a. Construct a whole page layout with a media query
Competency Subset 4: WordPress Content Management System
-Install and develop with WordPress, the most popular content management system.
Assessments:
15. WordPress Installation
a. Install WordPress on SOIS webspace account
16. Creative Brief
a. Construct document detailing main parts of the WordPress site to be created
17. Site Setup
a. Add content to Wordpress site; pages, posts, multimedia
18. Widgets, Plugins, & Themes
a. Install specified widgets & plugins, a new theme, and create and edit a child
theme
19. Site Security
a. Add security plugins to site beyond the basic installation
20. Documentation
a. Provide documentation on management and creation of content for your
WordPress site
Mastery
In order to achieve master of the competency set students must earn a B or greater (please refer
the the Grading Policy document for more information). This means that students must achieve an
80% or greater.
“PR Grade”
Students who fail to successfully master all the required competency sets during the subscription
period may earn an “PR” grade if at least 60% of course assessments are successfully completed. For
this set 12 out of the 20 assessments must be completed.
Academic Integrity
UWM expects each student to be honest in academic performance. Failure to do so may result in
discipline under rules published by the Board of Regents (UWS 14). The most common forms of
academic dishonesty are cheating and plagiarism. Read more at: https://uwm.edu/deanofstudents/
Feedback
Submitting assessments within the last ten days of a subscription may result in insufficient time for
instructor evaluation and feedback and for revision and resubmission if this is an option. You are
encouraged to complete and submit all assessments prior to the last two weeks of a subscription.
Set Map
This table maps the assessments back to the subsets and individual competencies. It can also
serve as a checklist for you to keep track of what you have completed for the competency set.
Competencies
Subset 1
1.1. Demonstrate and
implement basic file
management skills.
1.2. Connect to a server and
upload files via an ftp client.
1.3. Create an HTML file from
scratch using a text editor.
1.4. Have an awareness of how
the internet started and key
concepts.
Subset 2
2.1. Create an HTML page
with basic core tags like
meta,headers, paragraph, lists,
and images.
2.2. Include meta tags and
understand how they are applied
in SEO.
2.3. Gather user input via
HTML form elements.
2.4. Layout of content using
HTML tables
2.5. Investigate key elements
relating to usability like color
usage, font usage, and other
layout and design conventions.
2.6. Understand and implement
design considerations for users
with disabilities.
Learning Resources
Assessments
 PPT Notes introducing
HTML concepts and tags,
Search Engine Optimization
(SEO), form inputs and
attributes, tables, and usability
concepts
 Video tutorial on using a text
editor to create an HTML file
 Video tutorial on using a text
editor to code an HTML form
 Video tutorial on using a text
editor to code an HTML table
 Video tutorial on Schema.org
markup syntax
 Assessment 4: Create an
HTML file from scratch with
required content, formatting, and
meta tags.
 Assessment 5: Create an
HTML form with all of the
required elements.
 Assessment 6: Create an
HTML table to look like a
calendar.
 Assessment 7: Add
semantic markup to a code
snippet.
 Assessment 8: Analyze the
homepages of 2 different
websites against web design
criteria for layout, font, and
color usage.
Video tutorial on creating,
deleting, and managing
directories.
 Video tutorial on using a text
editor to create an HTML file
 PPT Notes on history of
internet, server basics, and
introduction to HTML
 Assessment 1: Setup
student web-space, create a
directory and upload a file.
 Assessment 2: Create a
simple HTML file and upload it
to a server.
 Assessment 3: Quiz on
concepts of subset 1
Subset 3
3.1. Apply CSS to HTML
content and illustrate how it is
used to enhance webpages
3.2. Control presentation of
text (font size, color, and
layout).
3.3. Manipulate and control
spacing of elements using
margins, padding, and borders.
3.4. Create a collapsible menu
using CSS expertise and the
visibility property.
3.5. Review of HTML form
input types and attributes,
adding styling to a form with
CSS.
3.6. Making content respond to
different sized screens,
introduction to media queries
Subset 4
4.1. Perform a WordPress
installation.
4.2. Establishing a web project
4.3. Navigating the WordPress
dashboard.
4.4. Enhancing a WordPress
site with plugins, widgets, and
themes.
4.5. Adding Security to site
4.6. Importance of project
documentation.
 PPT Notes introducing CSS
concepts and syntax
 Video Tutorial on using CSS
to control layout of HTML
 Video Tutorial on using CSS
to make collapsible/dropdown
menus
 Video Tutorial on using CSS
to add margins, spacing, and
focus state functionality to forms
 Video Tutorial on using CSS
and media queries to make
responsive layouts
 Assessment 9: Apply CSS
to both HTML tags and id’s and
classes to control font and color
properties of a resume
 Assessment 10: Add text
styling to a passage of text
 Assessment 11: Layout
elements, floats, and pseudo
states
 Assessment 12: Create a
webpage with a navigation menu
using CSS to insert collapsible
menus.
 Assessment 13: Construct a
form and create an appealing
layout using CSS.
 Assessment 14: Construct a
responsive webpage using media
queries.
 PPT Notes creative brief,
introducing content management
systems, WordPress introduction
and basics with usage statistics
 Video tutorial describing the
WordPress installation process
 Examples of creative briefs
 Reading (pdf) on creating a
creative breif
 Video tutorial introducing the
WordPress dashboard to
create/edit content
 Video tutorial demonstrating
working with themes, plugins,
and widgets
 Video tutorial on the
importance of documentation
and how to use screen capture
 Word document with security
tips
 Video tutorial on security tips
 Assessment 15: Perform a
WordPress install.
 Assessment 16: Construct
a creative brief for your
WordPress site.
 Assessment 17: Perform a
WordPress install.
 Assessment 18: Install
widgets, plugins, a new theme,
and child theme
 Assessment 19: Install and
explain functionality of security
plugins
 Assessment 20: Detail how
to manage your site for a client
Grading Policy
All assessments are worth 10 points in total. There are 20 total assessments. Students must
earn an overall grade of 80% (B-) or greater to pass the course. Assessment re-takes are not
accepted. Please read the intructions carefully for each and check your work to make sure
you have included all required elements
Each of the 4 subsets must be passed at 80% or greater to demonstrate mastery. The
specific passing point values for each subset are below..
Total 200 points, 100%
•
•
•
•
Subset 1:
Subset 2:
Subset 3:
Subset 4:
30 points, 24 or more is passing
50 points, 40 or more is passing
60 points, 48 or more is passing
60 points, 48 or more is passing
The breakdown of grades by percentage for the 20 assessments is below.
96-100%
A
91-95.99%
A-
87-90.99%
B+
84-86.99%
B
80-83.99%
B-