Responsive Web Design with Media

WEB 110 - Johnson County Community College

Web110 Course Description

This course will cover the essential skills needed to create responsive websites, using Hypertext Markup Language (HTML) and Cascading Style Sheets (CSS). Students will be introduced to the concepts, foundations, syntax and structure of HTML and CSS. Additional topics include the use of File Transfer Protocol (FTP) to publish websites and validation to web standards established by the World Wide Web Consortium (W3C) and other organizations.

Objectives

  1. Explain how to create sites that are compliant with current W3C standards in web development.
  2. Create valid and semantically correct HTML pages.
  3. Organize website files and FTP them to a web server.
  4. Create valid HTML tables.
  5. Create absolute, relative and anchor links.
  6. Apply cascading styles to an HTML document through inline, internal or external style sheets.
  7. Test and troubleshoot HTML and CSS.
  8. Create web forms using HTML and style them with CSS.
  9. Apply responsive web design principles.
JCCC Windmill

Method of Evaluating and Competencies

Total: 100%

Grade Criteria

Content Outline and Competencies

  1. Web Page Building Blocks
    1. Develop web pages files.
    2. Describe W3C standards.
    3. Discuss how Section 508 of the Americans with Disabilities Act affects web page design.
    4. Write the source code of a web page.
    5. Describe web page elements, attributes and values.
  2. Structure and Formatting
    1. Declare the encoding and create the foundation.
    2. Write semantically correct HTML.
    3. Identify the body of the web page.
    4. Apply styles.
    5. Create structures for the web page.
    6. Create hypertext and hypermedia links.
  3. Web Page files
    1. Define web file naming conventions and file management.
    2. Use FTP to deploy pages to a web server.
  4. Tables
    1. Discuss the appropriate use for tables.
    2. Create and modify table rows and columns.
    3. Apply styles to tables.
  5. Absolute, Relative and Anchor Links
    1. Create links.
      1. Relative links to other pages
      2. Absolute links to other websites
    2. Create Anchor links.
    3. Create targeting links.
    4. Use images as links.
    5. Discuss image maps.
  6. Cascading Style Sheets
    1. Apply style rules.
    2. Select elements by name, type or id.
    3. Select part of an element.
    4. Specify groups of elements.
    5. Create an external style sheet.
    6. Create an internal style sheet.
    7. Apply styles locally.
    8. Apply font family, italics, bold, size and font value.
    9. Set text color, text background, text spacing and indents.
    10. Apply background and foreground color.
    11. Apply borders, padding and margins of elements.
    12. Apply alignments.
    13. Apply float.
    14. Create flexible layouts.
  7. Testing and Validation
    1. Test and validate HTML of the published website.
    2. Test and validate CSS of the published website.
    3. Employ popular browsers to test web pages.
  8. Web Forms
    1. Create a web form.
    2. Create form styles using CSS.
    3. Define form input elements and other controls.
    4. Create form labels.
  9. Responsive Web Design
    1. Define the goals and techniques of responsive web design.
    2. Describe and apply flexible units of measurement for fonts and layout.
    3. Create flexible images using CSS.
    4. Create media queries in CSS.
    5. Insert appropriate HTML meta tags for responsive design.