CCOG for CIS 195H archive revision 202004
You are viewing an old version of the CCOG. View current version »
- Effective Term:
- Fall 2020 through Fall 2021
- Course Number:
- CIS 195H
- Course Title:
- HTML and CSS
- Credit Hours:
- 4
- Lecture Hours:
- 30
- Lecture/Lab Hours:
- 0
- Lab Hours:
- 30
Course Description
Covers the creation of static web content using the latest versions of HyperText Markup Language (HTML) and Cascading Style Sheets (CSS). Includes the structure and syntax of HTML, commonly used block and inline HTML elements, hypertext links, forms, web project and website structure, navigation, and version control. Also includes CSS syntax, commonly used style properties, the CSS box model, and Responsive Design. Audit available.
Intended Outcomes for the course
Upon completion of the course students should be able to:
- Install and configure a web server along with support software.
- 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.
Course Content (Themes, Concepts, Issues and Skills)
Outcome: Install and configure a web server along with support software.
- XAMPP (Apache Web Server with PHP and MySQL)
- Configure Apache using httpd.conf
- Install Integrated Development Environment (WebStorm or PHPStorm).
- Install a text editor.
- Install an FTP client and configure it to connect to an FTP server.
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.
- index.php, index.html, and the default DocumentRoot value in httpd.conf.
- GET and POST method URLs and form processing.
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