Web Development Applications – WGU C777 - COMPLETE STUDY
GUIDE
1. rotate(angle): Rotates the element clockwise at the specified degree.
Negative values rotate the element counter-clockwise
2. scale(x,y): Increases or decreases the size of the element, based on the specified parameters for width (x) and height (y)
3. scaleX(n): Changes the elements width
4. ScaleY(n): Changes the elements height
5. 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
6. translate(x,y): Moves the element from its current position, based on the specified parameters for the left (x) and top (y)
position
7. translateX(n): Moves the element along the X-axis (horizontally)
8. translateY(n): Moves the element along the Y-axis (vertically)
9. 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.
10. skewX(angle): Turns or skews the element to a specified angle along its X-axis
11. skewY(angle): Turns or skews the element to a specified angle along its Y-axis
12. Transform: Applies a 2D or 3D transformation to an element. Transformations include rotating, moving, skewing, and
scaling.
13. transform-origin: Allows you to change a transformed element's position.
14. transform-style: Specifies whether child elements will retain the parents element's element position in 3D space
15. perspective: Specifies the perspective from which a 3D child element is viewed by defining how far it is placed in view (in
pixels)
16. perspective-origin: Specifies the bottom position of 3D elements
17. backface-visibility: Defines whether or not an element is visible when it is rotated to face away from the viewer
18. Click-to-call: Click-to-call allows users to initiate a phone call directly from a web page by clicking a link.
19. tel: scheme: The tel: scheme specifies a phone number that mobile devices interpret as a call command.
20. Mobile Websites: Accessible via a browser and written using web technologies (HTML, CSS, JavaScript).
21. Mobile Apps: Installed on a device via an app store and developed using platform-specific languages (e.g., Swift for iOS,
Kotlin for Android).
, 22 Updates for Mobile Websites: Updates are made on the server and apply instantly.
23. Updates for Mobile Apps: Updates require users to download and install them.
24. Device Hardware Access: Mobile websites have limited access to device hardware, while mobile apps can access device
features like GPS, camera, and notifications.
25. Mobile Websites vs. Responsive Designs: Mobile 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.
26. Key Considerations for Mobile Design: Screen size, touch-friendly design, fast load times, mobile-first design, readable
text, and bandwidth limitations.
27. Usability of Navigation on Mobile: Use a hamburger menu or collapsible navigation, keep navigation simple, use clear
tappable buttons, and place navigation controls within thumb reach.
28. Emulators: Emulators simulate mobile device environments, allowing developers to test how a site looks and behaves on
different devices and screen sizes.
29. Responsive Image Techniques: Use responsive image techniques like srcset and sizes for adaptable image resolutions.
30. Image Compression: Compress images to reduce file size without sacrificing quality.
31. Modern Image Formats: Use modern image formats like WebP for better compression.
32. Lazy Loading Images: Lazy load images to improve performance.
33. Validation of Mobile Web Pages: Use tools like W3C HTML and CSS validators to ensure clean, compliant code.
34. Testing Mobile Web Pages: Use emulators or simulators for various devices and browsers, test on real devices for
accurate performance feedback, and check responsiveness using browser developer tools.
35. Grid Layouts in Responsive Design: Grid layouts provide a flexible and consistent structure for aligning content across
different screen sizes.
36. CSS Media Queries: CSS media queries apply specific styles based on device characteristics such as screen width,
resolution, or orientation.
37. Media Query for 600px Width: This reduces the font size for devices with a screen width of 600px or smaller.
38. Media Query for 350px Width: This changes the background color for devices with a width of 350px or larger.
39. Role of Frameworks: Frameworks simplify the development process by providing pre-built components and responsive
utilities.
40 Benefits of Frameworks: Speed up development with reusable code, ensure consistency across different browsers and devices,
and reduce the need to write CSS from scratch.
41. Bootstrap: Offers a responsive grid system and ready-made components.
GUIDE
1. rotate(angle): Rotates the element clockwise at the specified degree.
Negative values rotate the element counter-clockwise
2. scale(x,y): Increases or decreases the size of the element, based on the specified parameters for width (x) and height (y)
3. scaleX(n): Changes the elements width
4. ScaleY(n): Changes the elements height
5. 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
6. translate(x,y): Moves the element from its current position, based on the specified parameters for the left (x) and top (y)
position
7. translateX(n): Moves the element along the X-axis (horizontally)
8. translateY(n): Moves the element along the Y-axis (vertically)
9. 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.
10. skewX(angle): Turns or skews the element to a specified angle along its X-axis
11. skewY(angle): Turns or skews the element to a specified angle along its Y-axis
12. Transform: Applies a 2D or 3D transformation to an element. Transformations include rotating, moving, skewing, and
scaling.
13. transform-origin: Allows you to change a transformed element's position.
14. transform-style: Specifies whether child elements will retain the parents element's element position in 3D space
15. perspective: Specifies the perspective from which a 3D child element is viewed by defining how far it is placed in view (in
pixels)
16. perspective-origin: Specifies the bottom position of 3D elements
17. backface-visibility: Defines whether or not an element is visible when it is rotated to face away from the viewer
18. Click-to-call: Click-to-call allows users to initiate a phone call directly from a web page by clicking a link.
19. tel: scheme: The tel: scheme specifies a phone number that mobile devices interpret as a call command.
20. Mobile Websites: Accessible via a browser and written using web technologies (HTML, CSS, JavaScript).
21. Mobile Apps: Installed on a device via an app store and developed using platform-specific languages (e.g., Swift for iOS,
Kotlin for Android).
, 22 Updates for Mobile Websites: Updates are made on the server and apply instantly.
23. Updates for Mobile Apps: Updates require users to download and install them.
24. Device Hardware Access: Mobile websites have limited access to device hardware, while mobile apps can access device
features like GPS, camera, and notifications.
25. Mobile Websites vs. Responsive Designs: Mobile 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.
26. Key Considerations for Mobile Design: Screen size, touch-friendly design, fast load times, mobile-first design, readable
text, and bandwidth limitations.
27. Usability of Navigation on Mobile: Use a hamburger menu or collapsible navigation, keep navigation simple, use clear
tappable buttons, and place navigation controls within thumb reach.
28. Emulators: Emulators simulate mobile device environments, allowing developers to test how a site looks and behaves on
different devices and screen sizes.
29. Responsive Image Techniques: Use responsive image techniques like srcset and sizes for adaptable image resolutions.
30. Image Compression: Compress images to reduce file size without sacrificing quality.
31. Modern Image Formats: Use modern image formats like WebP for better compression.
32. Lazy Loading Images: Lazy load images to improve performance.
33. Validation of Mobile Web Pages: Use tools like W3C HTML and CSS validators to ensure clean, compliant code.
34. Testing Mobile Web Pages: Use emulators or simulators for various devices and browsers, test on real devices for
accurate performance feedback, and check responsiveness using browser developer tools.
35. Grid Layouts in Responsive Design: Grid layouts provide a flexible and consistent structure for aligning content across
different screen sizes.
36. CSS Media Queries: CSS media queries apply specific styles based on device characteristics such as screen width,
resolution, or orientation.
37. Media Query for 600px Width: This reduces the font size for devices with a screen width of 600px or smaller.
38. Media Query for 350px Width: This changes the background color for devices with a width of 350px or larger.
39. Role of Frameworks: Frameworks simplify the development process by providing pre-built components and responsive
utilities.
40 Benefits of Frameworks: Speed up development with reusable code, ensure consistency across different browsers and devices,
and reduce the need to write CSS from scratch.
41. Bootstrap: Offers a responsive grid system and ready-made components.
