ISTE Study Guide PDF

Web Development, HTML, and CSS Study Guide 1. Web Design Basics Complex Multi-Column Layouts Challenge: Coding multi-column layouts requires consideration of responsiveness, browser compatibility, and content alignment. Why Complex: Involves calculating widths, gaps, and nested...

Web Development, HTML, and CSS Study Guide 1. Web Design Basics Complex Multi-Column Layouts Challenge: Coding multi-column layouts requires consideration of responsiveness, browser compatibility, and content alignment. Why Complex: Involves calculating widths, gaps, and nested structures while maintaining flexibility. Modern Layout Techniques Best Practices: ○ Use CSS Grid for precise grid-based layouts. ○ Use Flexbox for row or column alignment. ○ Combine with responsive units (%, fr, vw). CSS Gap Property Definition: Adds spacing between grid or flexbox items. Difference from Margin: ○ gap: Internal spacing between items in the container. ○ margin: External spacing between elements, independent of layout context. Container Trick Concept: Using a wrapper or container element to constrain width and manage content alignment. Benefits: ○ Ensures consistent spacing. ○ Simplifies responsive design by centralizing layout control. CSS Specificity Definition: A method for determining which CSS rule applies when multiple rules match the same element. Importance: ○ Avoids conflicting styles. ○ Helps maintain organized and predictable CSS. Rule Hierarchy: Inline styles > IDs > Classes/Pseudo-classes > Elements. 2. Readability and Typography Paragraph Design Avoid centering paragraphs; it disrupts readability. Justified Text: Use cautiously; balance aesthetics and readability with proper hyphenation. Line Length and Spacing Line Length: Optimal range is 45-75 characters per line. CSS Line Spacing: Use line-height to ensure readability (1.4 to 1.6 is a good range). Contrast Readable Contrast: High contrast between text and background improves accessibility and reduces eye strain. Typography Typeface vs. Font: ○ Typeface: Design of the characters. ○ Font: Specific weight/style of a typeface. Legibility vs. Readability: ○ Legibility: Clarity of characters. ○ Readability: Ease of reading text as a whole. Font Pairing Best Practices: ○ Pair contrasting but complimentary typefaces. ○ Limit to two or three typefaces. 3. Layout and Design Principles Gestalt Principles (C.R.A.P.) Contrast: Distinguish elements to draw attention. Repetition: Reinforce design consistency. Alignment: Maintain visual relationships. Proximity: Group related elements for clarity. Gutenberg Diagram  Quadrants: 1. Primary Optical: Top-left, grabs attention. 2. Strong Follow: Top-right, follows natural reading. 3. Weak Follow: Bottom-left, less focus. 4. Terminal Area: Bottom-right, conclusion or call-to-action. Z-Pattern vs. F-Pattern Z-Pattern: Best for simple, text-light layouts. F-Pattern: Best for text-heavy, content-driven layouts. 4. Responsive Design Meta Viewport Tag Purpose: Ensures proper scaling on mobile devices. Key Properties: ○ width=device-width: Matches screen width. ○ initial-scale=1: Sets initial zoom level. Mobile Web Evolution Transition to mobile-first design due to increased mobile usage. Advancements: Responsive design, touch-friendly interfaces. Media Queries Function: Apply styles based on device characteristics. Example: @media (max-width: 1000px) { body { font-size: 14px; } } 5. Navigation and Usability Website Navigation Complexity: Requires usability, accessibility, and visual consistency. Evolution: Transition from dropdown menus to hamburger menus for mobile. Best Practices for Menus 1. Keep it simple and clear. 2. Ensure intuitive navigation. 6. JavaScript Basics Execution Context Client-Side: JavaScript runs in the browser, interacting with the DOM. Server-Side: Uses Node.js for backend logic. Comparison to PHP JavaScript: Asynchronous, runs in the browser or server. PHP: Synchronous, runs only on the server. Positioning JavaScript Place tags near the bottom to avoid blocking HTML rendering. 7. Libraries and Plugins CDNs Benefits: ○ Faster loading via distributed servers. ○ Saves bandwidth and reduces server load. Minification Definition: Compressing code by removing spaces and comments. Benefits: ○ Speeds up loading times. ○ Improves performance. Libraries vs. Plugins Library: Pre-written code for general tasks (e.g., jQuery). Plugin: Extends functionality of a library. Plugin Placement Always load plugins after the required library. 8. Historical and Contextual Knowledge JavaScript and jQuery jQuery: Simplified JavaScript for DOM manipulation, developed to enhance cross-browser compatibility. Connection to RIT: John Resig, the creator, is an alumnus of RIT. Java vs. JavaScript No Direct Connection: ○ Java: Object-oriented, server-side programming language. ○ JavaScript: Dynamic, client-side scripting language.