-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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