10152120Website Development
Course Information
Description
This course introduces HTML, CSS, and essential web development techniques. Students will learn to create well-structured HTML documents and apply CSS styling to enhance the visual appearance of web pages. Through hands-on exercises, they will develop proficiency in building and styling web content, including text formatting, image integration, and form design. Emphasis is placed on debugging techniques and adherence to web accessibility standards to ensure the creation of accessible and standards-compliant websites. By the end of the course, students will have the skills to create functional and aesthetically pleasing static web pages while adhering to industry best practices.
Total Credits
3
Prior Learning Assessment
  • Exam-College Developed Challenge Exam
Course Competencies
  1. Create a structured HTML document using appropriate elements and attributes
    Assessment Strategies
    Coded document submission
    Criteria
    Includes DOCTYPE, html, head, and body tags
    Contains correctly nested elements with minimal syntax errors
    Uses a logical document structure, including headings and paragraphs
    Demonstrates consistent formatting and indentation

  2. Evaluate web page accessibility and web page performance
    Assessment Strategies
    Coded document and report
    Criteria
    Identifies accessibility issues according to WCAG guidelines (e.g., missing alt text, insufficient color contrast)
    Assesses performance with developer tools or web performance tools and identifies areas for improvement
    Proposes specific changes to address at least two accessibility and two performance issues

  3. Explain how the web works, including HTML, CSS, and JavaScript roles
    Assessment Strategies
    Written explanation, quiz, or presentation
    Criteria
    Defines the roles of HTML, CSS, and JavaScript in building web pages
    Describes how these components interact with the browser

  4. Apply proper syntax and formatting to HTML code
    Assessment Strategies
    Coded document submission
    Criteria
    Uses closing tags correctly, with no unclosed tags in the document
    Adheres to consistent indentation per course coding standards
    Includes appropriate comments to explain the code structure
    Avoids inline CSS in HTML

  5. Organize web content with semantic HTML
    Assessment Strategies
    Coded document submission
    Criteria
    Uses semantic HTML5 elements (e.g., header, nav, main, footer, section, article) appropriately to organize content
    Structure lists using ul, ol, and dl with accurate nesting
    Uses table elements with appropriate structure for accessibility
    Includes correctly structured forms using form elements

  6. Develop a web form with various input elements and basic validation
    Assessment Strategies
    Coded form submission
    Criteria
    Includes various types of input fields (e.g., text, checkbox, radio, dropdown)
    Labels all inputs clearly and associates labels with inputs for accessibility
    Implements basic HTML validation (e.g., required, pattern, min, max)
    Uses regular expressions where needed to validate form data
    Demonstrates form functionality by submitting the form data to a server

  7. Implement HTML links and images with appropriate attributes
    Assessment Strategies
    Coded document submission
    Criteria
    Inserts both absolute and relative links, with each link opening in the expected target (e.g., _blank for external links)
    Includes images with meaningful alternative text for accessibility
    Demonstrates the use of an image as a link

  8. Apply proper syntax, formatting, and selectors to CSS code
    Assessment Strategies
    Coded CSS submission
    Criteria
    Demonstrates correct CSS syntax (e.g., no missing semicolons, correct property-value pairs)
    Organizes CSS with consistent indentation and uses comments where necessary
    Uses both class and id selectors correctly, understanding specificity and use cases
    Styles links in various states using pseudo-classes (e.g., :hover, :active, :visited, :focus)
    Demonstrates application of specificity and inheritance, organizing CSS to avoid conflicts
    Uses an external CSS stylesheet, linked in the HTML file

  9. Layout and style webpage elements using the CSS box model, positioning, and floats
    Assessment Strategies
    Coded layout project
    Criteria
    Adjusts margin, padding, border, and width properties to control layout and spacing effectively
    Applies the box-sizing property (e.g., border-box) to manage element sizing
    Uses positioning techniques (e.g., static, relative, absolute, fixed, sticky) to accurately place elements within the layout
    Centers block and inline-level elements using box model properties or alignment properties like margin and text-align
    Implements float and clear properties to position elements side-by-side or wrap text around images

  10. Implement responsive web layouts using media queries
    Assessment Strategies
    Coded responsive design project
    Criteria
    Uses media queries to adapt the layout for at least two screen sizes (e.g., desktop and mobile)
    Demonstrates responsive adjustments, such as resizing images, adjusting text size, and changing layout structure
    Tests and verifies responsiveness across devices using browser developer tools
    Ensures content readability and accessibility on all tested screen sizes

  11. Debug and validate HTML and CSS code
    Assessment Strategies
    Debugging and validation report with coded document
    Criteria
    Validates HTML and CSS code using a recognized validation tool (e.g., W3C Validator)
    Identifies and corrects errors found through validation or testing
    Removes unnecessary or redundant code, ensuring clean HTML and CSS files
    Demonstrates debugging techniques (e.g., inspecting elements, using the console for errors)
    Resolves specificity conflicts in CSS, understanding the CSS cascade and inheritance

  12. Style and format text using CSS properties
    Assessment Strategies
    Text styling project
    Criteria
    Selects and applies web-safe fonts or imports external fonts (e.g., Google Fonts)
    Uses font-size, font-weight, and font-style to control text appearance (size, boldness, italics)
    Adjusts line-height and letter-spacing for readability
    Uses text-align to control alignment based on design requirements
    Applies color to text using various color formats (e.g., hex codes, RGB, color names) with sufficient contrast for accessibility
    Styles text with text-decoration (e.g., underline) and text-transform (e.g., uppercase, lowercase)
    Enhances text styling with pseudo-elements (e.g., ::before, ::after) for decorative purposes