Sunday, April 7, 2019

Assignment Week 4

CSS Building Blocks (Chapter 7)

Bellow is how CSS is constructed.

It's a rule composed of a selector and a property that get assigned a value. Comments are added as notes for future reference. A child inherit rules from a parent element and some properties are automatically inherited.

Working with Style Sheets (Chapter 8)

There are three methods of applying CSS to webpages, individual page, or a HTML element: inline styles, embedded style sheets, and external style sheets.

    the style attribute are directly added to elements of HTML
    CSS elements are added in the head section of HTML inside
    text file with the extension .css that contains the CSS is linked to HTML in the head section

Due to its close proximity to an element, inline style has priority. Between external and embedded style, the latest to be called gets the second place. The latest CSS of two same properties has the priority, but this can be reverse with !important. Media-Specific Style Sheets can be added by either specifying a media type in the link element or use the @media at-rule in the style sheet.

Defining Selectors (Chapter 9)

The Selector is the element the style is applied to. That element can de selected by name, by class or id, by context, by its position or location within a block of HTML element, by first letter of line of an element, by many more like link, attributes, or groups.

Formatting Text with Styles and Layout with Styles (Chapter 10 & 11)

CSS can change all aspect of text and give a whole new feel of a page as shown in the before and after example of my own blog bellow.

When you separate content from style, you have the flexibility to change layout of the webpages at will and that include positioning relatively each element or controlling where they float.

Building Responsive Webpages (Chapter 12)

Responsive Web Design makes webpages render good in multiple devices while keeping the good feel. The elements of the webpages are flexible enough to adapt to the new screen size and position without loosing their coherence with one another. This is done through querying the needed style based on media type, size, and position.

Working with Web Fonts (Chapter 13)

Web fonts are specified font files to be downloaded along webpages, those web fonts are hosted in the clouds like Google Fonts, third parties, or within the webpages.

Web fonts are specified and located

Web fonts are added to the style sheet

Enhancements and Effects with CSS (Chapter 14)

Web pages can be now enhanced with added effects using CSS. The separation of content and design due to CSS not only makes update and maintenance easier, it also help reduces the needs for unnecessary contents like images and extra HTML that give space to new advanced CSS. The progress of Browser Compatibility, Progressive Enhancement, and Polyfills helps maintain uniformity and accessibility of contents. CC2 and CSS3 take on to replace a lot of proprieties of images and specific Vendor Prefixes can help maintain compatibility of those proprieties across the board in different Browsers.

Setting up specific Browser rules in CSS

User & Task Analysis of

Please refer to numbering from Task Analysis

  • PlantLanta is an NGO helping to educate about sustainable urban agriculture in Atlanta (About)
  • Their Community is interested Volunteers (volunteers)
  • The Goal is to get people involved and get things like financial support (donations, partners, products sales)
  • This website requires participation through social media, partnership, educating the public, etc.. (social media)

Site Structure

type of site structure used is Table of Contents
    • 1- Login/Signup
    • 2- Social Media Links
    • 3- About Us
      • 3-1- Farming & Food Access
      • 3-2- Economics
      • 3-3- Education
      • 3-4- Environmental
    • 4- Volunteers
      • 4-1 Information
      • 4-2 Logged in Users
        • 4-2-1 Volunteer
          • 4-2-1-1 Opportunities & Map (color coded)
        • 4-2-2 User Profile
          • 4-2-2-1 Volunteer Points
          • 4-2-2-2 Preferences
          • 4-2-2-3 Edit Information
    • 5- Events
      • 5-1 Registration
    • 6- Partners
      • 6-1 Active Partner
      • 6-2 Partner Opportunities
    • 7- Social impact
      • 7-1 Stories/Mission
      • 7-2 Statistics
    • 8- Donations
      • 8-1 One Time Donation Button
      • 8-2 Contact Donations
    • 9- Contact Us