Portland Community College | Portland, Oregon

Upon completion of the course students should be able to:

• Structure static website content using HyperText Markup Language (HTML).
• Format content using Cascading Style Sheets (CSS).
• Create navigational and resource links between pages and assets for multi-page websites.
• Represent multi-page websites as separate files with shared content across pages, using appropriate file naming, directory structure, and version control.
• Apply the principles of Mobile First and Responsive Design to web pages and websites.

Outcome: Structure static website content using HyperText Markup Language (HTML5).

• Basic Markup syntax and structure.
• Basic page structure (!DOCTYPE, html, head, body).
• Structural elements (header, main, footer, aside).
• Head elements (title, meta, script, link).
• Body elements (table, div, p, li, ul, ol, img).
• Form elements (form, button, input, label, option, select).
• Hyperlinking (anchor tags, link hrefs, img srcs).
• Tag attributes.
• Correct syntax and formatting standards based on a set of industry standard style guidelines.

• Use appropriate browser developer tools for debugging and testing style and markup.

Outcome: Format content using Cascading Style Sheets (CSS).

• Inline style properties.
• Embedded, and external style sheets.
• Selector types and uses.
• Common style properties and syntax (margin, padding, color, vertical-align, background-color, etc.).
• CSS Box model.
• Cascading nature of style properties based on hierarchical structure of HTML content.
• Style property precedence.
• Responsive page display using @media.
• Mobile-first design.
• Correct syntax and formatting standards based on a set of industry standard style guidelines.
• Use appropriate browser developer tools for debugging and testing style and markup.

Outcome: Create navigational and resource links between pages and assets for multi-page web sites.

• Create directories and files.
• Understand and use relative and absolute file paths.
• Structuring assets and resources in appropriately named directories.
• Follow web standard file and folder naming conventions, including proper escaping of special characters in URLs.

Outcome: Represent multi-page web sites with shared content across pages using appropriate project structure and version control systems.

• File system directory structure
• FTP
• Text editting
• URLs, hypertext references, href and src attributes
• <a>, <link>, <script>, <style>, <img> tags

Outcome: Apply the principles of Mobile First and Responsive Design.

• @media CSS at-rules and media queries
• Fluid grids
• Flexible images
• Responsive layout
• Mobile First vs. Progressive Enhancement