WDV351 - Web Application Components

Unit 1

A document titled 'WDV 205 - Advanced CSS Assignment 1-1 Define CSS Terms' lists three terms: Specificity, Precedence, and Inheritance. Each term is defined with detailed explanations regarding how CSS rules are applied in web design.

1-1 Define CSS Terms

 An image of a typed assignment titled 'WDV 205 - Advanced CSS, Assignment 1-2 Basic CSS Selectors'. It includes sections on Element Selectors, Universal Selectors, and Group Selectors, each with a bullet-pointed explanation of concepts and usage rules.

1-2 Basic Selectors

 Screenshot of a webpage with a CSS demonstration. The header reads 'WDV 205 - Advanced CSS Assignment 1-3 Specificity Example Web Page.' It shows several paragraphs with various CSS styles applied for pseudo and div tags, affecting color, size, and spacing.

1-3 Specificity Example

Unit 2

Screenshot of an online course page titled 'WDV 205 - Advanced CSS: Assignment 2-1 CSS Examples.' Beneath the title is a note mentioning that the page inspiration is from the 'Charity Water Blog.'

2-1 CSS Examples

 A screenshot displays six images. The first is a floral hanging basket, the second a small dog, the third a guinea pig on a bed, the fourth a guinea pig in a green tunnel, the fifth a forest scene, the sixth a fox, and the seventh is a group of koi fish in water.

2-2 Attribute Selectors

 A website header featuring three images of cocoa powder: a wooden bowl filled with cocoa, a mound of cocoa on a white plate, and cocoa sprinkled with chocolate chips. The text 'Welcome to The Cocoa Site!' and 'A Bit of History to Get You Started' are also visible.

2-3 CSS Combinators

 A webpage displays instructions for a selectors exercise, including links to instructions, exercises, and resources. The text provides guidance on practicing CSS selectors using provided web pages. Links for further help and resources are mentioned.

2-4 Selectors Challenge

Unit 3

A screenshot of an assignment document titled 'WDV 205 - Advanced CSS: Assignment 3-1 CSS Preprocessors.' The document consists of five questions about CSS preprocessors, including their definition, advantages, disadvantages, and a list of commonly used preprocessors.

3-1 CSS Processors

 A website with a banner image of snow-covered mountains at sunset. The text reads 'Welcome to the Summit!' below which are menu options: Adopt, Breed Information, Breed Care, Contact, and About. Below it, a section titled 'Our Progress' reports over 2,620 dog adoptions.

3-2 SCSS Stylesheet

 A webpage featuring a mountainous background with the text 'Welcome to the Summit!' below the navigation menu. The section titled 'Our Progress' details over 2,620 dogs adopted by Summit Farms and expresses gratitude to donors and families.

Extra Credit

Units 4, 5, & 6

A presentation slide with a title, 'Title of the Page', and a subtitle, 'Some Sort of Subtitle.' The slide contains placeholder text on the left and an image of a cat lying on a wooden surface outdoors on the right. A navigation bar on the left lists pages 1 to 5.

4-1 Float Layout

 A detailed web page for 'WebAppCo' displays various sections including Home, About, Skills, and Languages. It features icons for JavaScript, PHP, CMS, and HTML with descriptions of web development, and a contact form at the bottom-right. The theme is predominantly blue and orange.

5-1 Flexbox Layout

 A website header with a background image of assorted cookies. The main heading reads 'Cookies!' in bold white letters. A large image of a cookie with colorful sprinkles is centered below the heading. Navigation tabs include Home, Cookies, Bundles, Deals, and About.

6-2 CSS Grid

 Online cookie order form showing customer information with fields for first name, last name, email, and address. Payment information section includes fields for cardholder name and card number. Top navigation bar has links for Home, Order, Cookies, and Deals.

6-3 Grid Form

Units 7 & 8

A presentation slide with a title, 'Title of the Page', and a subtitle, 'Some Sort of Subtitle.' The slide contains placeholder text on the left and an image of a cat lying on a wooden surface outdoors on the right. A navigation bar on the left lists pages 1 to 5.

7-1 Responsive Float

 A detailed web page for 'WebAppCo' displays various sections including Home, About, Skills, and Languages. It features icons for JavaScript, PHP, CMS, and HTML with descriptions of web development, and a contact form at the bottom-right. The theme is predominantly blue and orange.

7-2 Responsive Flexbox

 A website header with a background image of assorted cookies. The main heading reads 'Cookies!' in bold white letters. A large image of a cookie with colorful sprinkles is centered below the heading. Navigation tabs include Home, Cookies, Bundles, Deals, and About.

7-3 Responsive Grid

 Image of a website for Piggy Bank Financial. The banner shows three individuals in a professional setting, one of whom has bright red hair. The text reads 'Welcome to The Piggy Bank' followed by 'Where We Take Care of Banking For You.' The website sections include Personal, Business, and Consultation.

8-1 Bootstrap Page

Units 9, 10, & 11

A website header with a background image of assorted cookies. The main heading reads 'Cookies!' in bold white letters. A large image of a cookie with colorful sprinkles is centered below the heading. Navigation tabs include Home, Cookies, Bundles, Deals, and About.

9-1 Positioning

 A webpage titled '2D Transform Page' with navigation sections '2D Transform' and '3D Transform' on the left. The main content shows two examples, one describing a link translation on hover and the other showing a button to rotate and translate on hover, with an arrow icon.

10-1 Transformations

 A webpage titled '2D Transform Page' with navigation sections '2D Transform' and '3D Transform' on the left. The main content shows two examples, one describing a link translation on hover and the other showing a button to rotate and translate on hover, with an arrow icon.

11-1 Transitions

 A webpage titled '2D Transform Page' with navigation sections '2D Transform' and '3D Transform' on the left. The main content shows two examples, one describing a link translation on hover and the other showing a button to rotate and translate on hover, with an arrow icon.

11-2 Extra Credit

Units 12, 13, & Final

A webpage titled '2D Transform Page' with navigation sections '2D Transform' and '3D Transform' on the left. The main content shows two examples, one describing a link translation on hover and the other showing a button to rotate and translate on hover, with an arrow icon.

12-1 Animations

 A packed audience at a concert with people holding their hands up, one person capturing the moment on a smartphone. The website header reads 'DOOGIES Performance Venue' with navigation links for 'EVENTS' and 'VENUE'. At the lower section, there's an advertisement for Gold Rush Colorado Pale Ale.

13-1 Banner Ad

 A packed audience at a concert with people holding their hands up, one person capturing the moment on a smartphone. The website header reads 'DOOGIES Performance Venue' with navigation links for 'EVENTS' and 'VENUE'. At the lower section, there's an advertisement for Gold Rush Colorado Pale Ale.

Final Project