Using UBbox

From UB’s official instructions at the UB IT Site

1. Go to https://buffalo.box.com
2. Click Continue if asked if you are “Part of University at Buffalo”
3. Enter your UBITName in the first (username) field
4. Enter your UBITName password in the Password field
5. Click Sign In

Note: in some instances, especially when using applications instead of a web browser, the Box login will show the default login screen, rather than the UB login screen. If that is the case, you should see an option to login using “Single Sign On (SSO)”

Blogs to Follow

• A List Apart: Explores the design, development, and meaning of web content, with a special focus on web standards and best practices
• Smashing Magazine: Delivers information on latest trends and techniques to Web designers and developers
• CSS Tricks: A web design community. Front end design issues, code snippets
• Responsive Resources: A collection of resources about the various aspects of responsive web design
• The Haystack: Stephen Hay, CSS, web accessibility, and (web)design and open web standards
• Usability Counts: User Experience

Tutorial Websites

Basic HTML and CSS

• Smashing Magazine: How To Learn CSS
• CSS Tricks:
  • All About Floats
• Code Academy:
  • Intro to HTML
  • Learn CSS
  • Make a Website
  • Learn PHP (Goes beyond what is needed for this class, but recommended if you want to know more about how PHP works.)
• Khan Academy: Intro to HTML/CSS: Making webpages
• Tuts+:
  • Learn HTML Basics
  • Learn CSS: The Complete Guide
  • A Beginner’s Guide to Wireframing
• Mozilla Developer Network (MDN): Free tutorials and reference lists for learning HTML, CSS, JavaScript and more.
• W3C HTML/Training: Educational materials for beginners
• LinkedIn Learning (formerly Lynda.com) FREE for NYS residents with a NYPL Card!
  > Get a Library Card
  > Login using the NYPL LinkedIn Learning Page or LinkedIn Learning Mobile App (Google | Apple) (More info from NYPL)
  • HTML Essential Training
  • CSS Essential Training
  • WordPress Essentials
  • Visual Studio (VS) Code for Web Developers

CSS Animation

• CSS Tricks:
  • Intro to CSS Animations

Visual Design

• Beginning Graphic Design: Typography
• Beginning Graphic Design: Color
• Beginning Graphic Design: Layout & Composition
• 10 Web Typography Rules Every Designer Should Know
• The ideal line length & line height in web design

Books

• HTML and CSS, Design and Build Websites: Comprehensive and highly visual text
• A Book Apart, Brief books for people who make websites
  • HTML5 For Web Designers
  • CSS3 For Web Designers
• Pro CSS3 Animation, Apress
• CSS Animations: A Pocket Guide, Val Head

Local Community Groups

• Buffalo WordPress Users: Every Thursday at Canisius College. Alternates between Designer/Dev and Users/Bloggers.

HTML/CSS/PHP Development Tools & Code Generators

• cssgradient.io — box and text shadows, gradient generator, more
• colorzilla – advanced gradient generator
• border-radius.com
• Fancy border radii (organic shapes)
• TinyPNG Image Compression
• How to Center in CSS (See also How to Align Things in CSS)
• google.com/fonts
• Google Webfonts Helper
• Squoosh Drag and Drop image compressor.

Reference Lists

• HTML Glossary
• HTML5 Reference: List of Elements(tags)
• CSS Reference: List of Properties
• WordPress Codex: Everything there is to know about WordPress

Checkers, Validators and Page Load Tests

• WebAIM Contrast Checker
• WCAG Contrast Checker
• Accessibility Cheat-Sheet
• Accessability Checker wave.webaim.org
• Page Load Time Checker  webpagetest.org
• W3C Validator Suite (20 pages free)
• W3C Markup Validation (free)
• Pingdom Website Speed Test
• WebPageTest