Web Development Applications – WGU C777 - COMPLETE STUDY GUIDE

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

Transform

Applies a 2D or 3D transformation to an element. Transformations include rotating, moving, skewing, and scaling.

transform-origin

Allows you to change a transformed element's position.

transform-style

Specifies whether child elements will retain the parents element's element position in 3D space

perspective

Specifies the perspective from which a 3D child element is viewed by defining how far it is placed in view (in pixels)

perspective-origin

Specifies the bottom position of 3D elements

backface-visibility

Defines whether or not an element is visible when it is rotated to face away from the viewer

Click-to-call

Click-to-call allows users to initiate a phone call directly from a web page by clicking a link.

tel: scheme

The tel: scheme specifies a phone number that mobile devices interpret as a call command.

Mobile Websites

Accessible via a browser and written using web technologies (HTML, CSS, JavaScript).

Mobile Apps

Installed on a device via an app store and developed using platform-specific languages (e.g., Swift for iOS, Kotlin for Android).

Updates for Mobile Websites

Updates are made on the server and apply instantly.

Updates for Mobile Apps

Updates require users to download and install them.

Device Hardware Access

Mobile websites have limited access to device hardware, while mobile apps can access device features like GPS, camera, and notifications.

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.

Key Considerations for Mobile Design

Screen size, touch-friendly design, fast load times, mobile-first design, readable text, and bandwidth limitations.

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.

Emulators

Emulators simulate mobile device environments, allowing developers to test how a site looks and behaves on different devices and screen sizes.

Responsive Image Techniques

Use responsive image techniques like srcset and sizes for adaptable image resolutions.

Image Compression

Compress images to reduce file size without sacrificing quality.

Modern Image Formats

Use modern image formats like WebP for better compression.

Lazy Loading Images

Lazy load images to improve performance.

Validation of Mobile Web Pages

Use tools like W3C HTML and CSS validators to ensure clean, compliant code.

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.

Grid Layouts in Responsive Design

Grid layouts provide a flexible and consistent structure for aligning content across different screen sizes.

CSS Media Queries

CSS media queries apply specific styles based on device characteristics such as screen width, resolution, or orientation.

Media Query for 600px Width

This reduces the font size for devices with a screen width of 600px or smaller.

Media Query for 350px Width

This changes the background color for devices with a width of 350px or larger.

Role of Frameworks

Frameworks simplify the development process by providing pre-built components and responsive utilities.

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.

Bootstrap

Offers a responsive grid system and ready-made components.

Client-side dependency

Validation fails if JavaScript is disabled in the browser.

No security guarantee

Client-side validation can be bypassed by attackers.

Limited flexibility

HTML5 attributes can't handle complex validation logic.

Browser inconsistencies

Different browsers may implement validation features variably.

HTML5 validation attributes

Attributes like required, min, max, pattern ensure validation.

JavaScript event listeners

Used to implement custom validation logic on form submission.

Inline validation

Immediate feedback as users interact with form fields.

Required attribute

Ensures a field cannot be left empty.

Pattern attribute

Specifies a regex to match user input structure.

Min/Max attributes

Define numeric or date ranges for input fields.

Maxlength/Minlength attributes

Set character length restrictions for text input.

Step attribute

Defines valid increments for numeric inputs.

Type attribute

Specifies input type and performs built-in validation.

Pattern usage

Uses regex to validate input format, e.g., phone numbers.

JavaScript validation

Enables dynamic validation beyond HTML5 capabilities.

Email validation example

Checks email format using regex during form submission.

Pogo-sticking

User behavior of navigating back and forth in forms.

Avoiding pogo-sticking

Use inline validation or direct error messages.

Error message display

Shows feedback on the same page for user clarity.

Form submission prevention

Prevents submission if form is invalid.

Invalid input indication

Red border and error message for invalid fields.

Custom validation logic

Allows tailored checks beyond standard HTML5 validation.

color

Allows users to pick a color using a color picker.

date

Displays a date picker for selecting dates.

datetime-local

Lets users choose both a date and time (without time zone).

email

Accepts email addresses; can validate with required or pattern.

month

Allows users to select a month and year.

number

Restricts input to numeric values with optional min/max and step attributes.

range

Displays a slider for selecting numeric values within a range.

search

Optimized for search queries; includes special styling.

tel

Accepts telephone numbers with pattern validation.

time

Displays a time picker for selecting time values.

url

Accepts valid URLs; validates input if required.

week

Allows selection of a specific week and year.

Provides a set of predefined options for an input field. When users start typing, a dropdown list appears with matching suggestions.

Was used to generate a public/private key pair for authentication; deprecated in favor of more secure methods like WebAuthn.

Used to display the result of a calculation or process, often in conjunction with JavaScript.

required

Ensures the field must be filled before submission.

placeholder

Displays a short hint describing the expected value.

pattern

Specifies a regular expression for input validation.

min/max

Define numeric or date ranges.

step

Sets the increment for numeric or range input.

readonly

Makes the field non-editable.

disabled

Disables the field entirely.

action

Specifies the URL to which the form data will be sent.

method

Defines the HTTP method used to send form data (e.g., GET or POST).

autocomplete (form)

Enables or disables autocomplete for all fields within the form.

autocomplete (input)

Enables or disables autocomplete for that specific field.

autocomplete

Provides suggestions based on the browser's saved data (e.g., previously entered values).

Provides predefined, developer-specified suggestions.

Submits the form.

Resets form fields to their initial values.

A generic button that performs no default action but can be programmed via JavaScript.

Associates a text label with a form control for better accessibility.

Groups related form controls and elements together.

Provides a caption or title for a

.

DOM

The Document Object Model (DOM) is a programming interface that represents the structure of an HTML or XML document. It allows developers to interact with and manipulate elements, styles, and content of a web page dynamically using JavaScript.

Canvas Creation

To create a canvas and draw a line, use the HTML element and JavaScript to access the canvas context and draw with methods like beginPath(), moveTo(), lineTo(), and stroke().

getContext()

The getContext() method provides access to the rendering context of a element, which defines what kind of drawing can be done.