Web Development Applications – WGU C777 - COMPLETE STUDY GUIDE

Web Development Applications – WGU C777 - COMPLETE

STUDY GUIDE

Leave the first rating Students also studied Terms in this set (250) Western Governors UniversityD 426 Save

C777 Unit 2: Cascading Style Sheets...

Teacher 124 terms cmwebPreview WGU C777 Final includes some I mis...73 terms j8niPreview

C777 Unit 1: HyperText Markup Lang...

Teacher 49 terms cmwebPreview

C777 U

Teacher cmw rotate(angle)Rotates the element clockwise at the specified degree.Negative values rotate the element counter-clockwise scale(x,y)Increases or decreases the size of the element, based on the specified parameters for width (x) and height (y) scaleX(n)Changes the elements width ScaleY(n)Changes the elements height matrix(n,n,n,n,n)Combines all of the 2D transform methods in one.Takes six parameters, contatining mathematic functions, which enable the element to rotate, scale, move (translate), and skew translate(x,y)Moves the element from its current position, based on the specified parameters for the left (x) and top (y) position translateX(n)Moves the element along the X-axis (horizontally) translateY(n)Moves the element along the Y-axis (vertically) skew(x-angle,y-angle)Turns or skews the element to a specified angle, based on the specified parameters for the horizontal (X axis), and vertical (Y axis) lines.skewX(angle)Turns or skews the element to a specified angle along its X-axis

skewY(angle)Turns or skews the element to a specified angle along its Y-axis TransformApplies a 2D or 3D transformation to an element. Transformations include rotating, moving, skewing, and scaling.transform-originAllows you to change a transformed element's position.transform-styleSpecifies whether child elements will retain the parents element's element position in 3D space perspectiveSpecifies the perspective from which a 3D child element is viewed by defining how far it is placed in view (in pixels) perspective-originSpecifies the bottom position of 3D elements backface-visibilityDefines whether or not an element is visible when it is rotated to face away from the viewer Click-to-callClick-to-call allows users to initiate a phone call directly from a web page by clicking a link.tel: schemeThe tel: scheme specifies a phone number that mobile devices interpret as a call command.Mobile WebsitesAccessible via a browser and written using web technologies (HTML, CSS, JavaScript).Mobile AppsInstalled on a device via an app store and developed using platform-specific languages (e.g., Swift for iOS, Kotlin for Android).Updates for Mobile WebsitesUpdates are made on the server and apply instantly.Updates for Mobile AppsUpdates require users to download and install them.Device Hardware AccessMobile websites have limited access to device hardware, while mobile apps can access device features like GPS, camera, and notifications.Mobile Websites vs. Responsive DesignsMobile websites are specifically designed for mobile devices, often with a separate URL (e.g., m.example.com) and minimal features, while responsive designs use CSS techniques like media queries to adapt the layout to different screen sizes.Key Considerations for Mobile DesignScreen size, touch-friendly design, fast load times, mobile-first design, readable text, and bandwidth limitations.Usability of Navigation on MobileUse a hamburger menu or collapsible navigation, keep navigation simple, use clear tappable buttons, and place navigation controls within thumb reach.EmulatorsEmulators simulate mobile device environments, allowing developers to test how a site looks and behaves on different devices and screen sizes.

Responsive Image TechniquesUse responsive image techniques like srcset and sizes for adaptable image resolutions.Image CompressionCompress images to reduce file size without sacrificing quality.Modern Image FormatsUse modern image formats like WebP for better compression.Lazy Loading ImagesLazy load images to improve performance.Validation of Mobile Web PagesUse tools like W3C HTML and CSS validators to ensure clean, compliant code.Testing Mobile Web PagesUse emulators or simulators for various devices and browsers, test on real devices for accurate performance feedback, and check responsiveness using browser developer tools.Grid Layouts in Responsive DesignGrid layouts provide a flexible and consistent structure for aligning content across different screen sizes.CSS Media QueriesCSS media queries apply specific styles based on device characteristics such as screen width, resolution, or orientation.Media Query for 600px WidthThis reduces the font size for devices with a screen width of 600px or smaller.Media Query for 350px WidthThis changes the background color for devices with a width of 350px or larger.Role of FrameworksFrameworks simplify the development process by providing pre-built components and responsive utilities.Benefits of FrameworksSpeed up development with reusable code, ensure consistency across different browsers and devices, and reduce the need to write CSS from scratch.BootstrapOffers a responsive grid system and ready-made components.Client-side dependencyValidation fails if JavaScript is disabled in the browser.No security guaranteeClient-side validation can be bypassed by attackers.Limited flexibilityHTML5 attributes can't handle complex validation logic.Browser inconsistenciesDifferent browsers may implement validation features variably.HTML5 validation attributesAttributes like required, min, max, pattern ensure validation.JavaScript event listenersUsed to implement custom validation logic on form submission.Inline validationImmediate feedback as users interact with form fields.Required attributeEnsures a field cannot be left empty.

Pattern attributeSpecifies a regex to match user input structure.Min/Max attributesDefine numeric or date ranges for input fields.Maxlength/Minlength attributesSet character length restrictions for text input.Step attributeDefines valid increments for numeric inputs.Type attributeSpecifies input type and performs built-in validation.Pattern usageUses regex to validate input format, e.g., phone numbers.JavaScript validationEnables dynamic validation beyond HTML5 capabilities.Email validation exampleChecks email format using regex during form submission.Pogo-stickingUser behavior of navigating back and forth in forms.Avoiding pogo-stickingUse inline validation or direct error messages.Error message displayShows feedback on the same page for user clarity.Form submission preventionPrevents submission if form is invalid.Invalid input indicationRed border and error message for invalid fields.Custom validation logicAllows tailored checks beyond standard HTML5 validation.colorAllows users to pick a color using a color picker.dateDisplays a date picker for selecting dates.datetime-localLets users choose both a date and time (without time zone).emailAccepts email addresses; can validate with required or pattern.monthAllows users to select a month and year.numberRestricts input to numeric values with optional min/max and step attributes.rangeDisplays a slider for selecting numeric values within a range.searchOptimized for search queries; includes special styling.telAccepts telephone numbers with pattern validation.timeDisplays a time picker for selecting time values.