Colleges and Universities
Digital Technology
Learning Sites
Books & Publishers
HTML5-CSS3 - Session VIII
Session Outline:
- Chapter 20 - How to use SASS and Less
Class Presentations
| Session | Chapter | PowerPoint Presentation | Exercise Files | Solution Set Files |
| VIII | Chapter 20 | Chapter 20 |
Student Exercise
Student Exercise
(See Finished Site for completed exersice.)
- Add "Return to Homepage" link on Scott Sampson speaker page.
- Make Main navigation bar dropdowns for Jefffer Toobin, Andrew Ross Sorkin, Amy Chua, Scott Sampson, and Scott Sampson Video pages.
- Link "Speaker" dropdown on Main navigation bar to "#".
- Make speakers pages for Jefffer Toobin, Andrew Ross Sorkin, and Amy Chua using Scott Sampson speaker page as template.
- Link speakers pages to each speaker page and the Scott Sampson Video page.
- Link the Sampson Video page to the "or play video."
- Make all the page footers a JavaScript year update.
- Link "About Us" Main navigation bar link to actual San Joaquin Valley Town Hall - About Us page.
- Link "Our History" Main navigation bar link to actual San Joaquin Valley Town Hall - Our History page.
- Link "Board of Directors" Main navigation bar link to actual San Joaquin Valley Town Hall - Board of Directors page.
- Link "Past Speakers" Main navigation bar link to actual San Joaquin Valley Town Hall - Past Speakers page.
- Link "Contact Us" Main navigation bar link to actual San Joaquin Valley Town Hall - Contact Us page.
- Fix relative links on Luncheons and Tickets Ordering pages.
- Students will upload test files to live site.
- Students will preview in browser test files.
Additional Support Exercises
LinkedIn Exercises
Error processing SSI fileAdditional LinkedIn Beginner Exercises
Error processing SSI filew3School Exercises
SoloLearn Exercises
Advanced and Master LinkedIn Exercises
Error processing SSI fileSession I Support Links
General Computer Files & Windows Skills
- CMP 226 - File Management Skills (5 hrs)
- CMP 628 - Introduction to Keyboarding (18 hrs)
- CMP 073 - Working with Windows (8hrs)
- ITI 338 - Networking Basics (6 hrs)
Keyboard Shorcuts
- Windows Keyboard Shortcut Keys
- MAC Keyboard Shortcut Keys
- Adobe Dreamweaver Windows Shortcut Keys
- Adobe Dreamweaver MAC Shortcut Keys
General Web Development Links
- Caniuse
- Normalizer
- modernizr
- w3schools
- Google HTML5 Code
- HTML5 Array
- Webkit
- CSSTableGenerator
- CSS Layout Generator
- How Browsers Work
Wireframe Design Apps
Free Cloud Based
- frame box
- Gliffy
- Mockflow
- Mockingbird
- Proto
- Wireframe
- iPhone Mockup (iPhone)
- Mokk.me (iPhone)
- Sketch Design Resources
- UI8 Design Resources
IDE's
Free Web Design IDEs
- Sublime Text
- Brackets
- CoffeeCup Free HTML Editor
- Webuilder
- ICEcoder
- BBEdit
- Code Writer
- Google Web Designer
Free Web Development IDEs
- Visual Studio Code
- Atom by Github
- Komodo Edit
- Netbeans
- Light Table
- RJ TextEd
- CodeLobster
- Bluefish
- Coda
- Aptana (JAVA Required)
- Eclipse (JAVA Required)
Downloadable DesktopWeb Development Apps
- Justinmind
- Craft by InVision LABS
- Bolt 2.0 ($)
- Flair Builder ($)
- Indigo Studio ($$$)
- Omnigraffle (iOS)($)
- TETHR (iOS)
- iPlotz (iPhone & Android)
- Mockups.me - (Web & Desktop)
- Balsamiq ($ - Web & Desktop)
Cloud Based Web Development
Cloud-Based Web Development Sites
- Axure ($)
- Fluid ($)
- HotGloo ($)
- Moqups ($)
- Invision ($$$)
- Pidoco ($)
- Protoshare ($)
- Solidify ($)
- UXPin ($)
- Codepen
- Cloud9
- Codeanywhere
- CodeEnvy
- Kodingen
Online Website Builder Sites
Learning Management Systems (LMS)
- PC Magazine - The Best (LMS) Learning Management Systems for 2018
- Absorb LMS
- Schoology LMS
- Instructure Canvas LMS
- Moodle LMS
- Blackboard Learn LMS
- Google Classroom
- Office 365 Education
CSS Links
CSS Minifiers
- HTML Minifier
- CSSTidy
- Minify
- YUICompressor (also does JS)
- AjaxMin (also does JS)
- CSSCompressor
CSS Precompilers
CSS Postprocessors
CSS Tools
- CodeKit (Paid)
- Compass.app (Paid, Open Source)
- Ghostlab (Paid)
- Hammer (Paid)(Mac)
- Koala (Open Source)
- LiveReload (Paid, Open Source)
- Prepros (Paid)
- Scout-App (Free, Open Source)
jQuery Links
jQuery Forms
Slideshows, Carousels, Graphic Plugins & Components
- Malsup jQuery Plugins
- Web Designer Depot
- JSSOR
- Wow Slider
- Smashing Apps
- PixelzDesign
- Tiny Carousel
- FlowType
- Adaptive Images
- FitVids.js
Calendar & Datepicker jQuery Plugins
JavaScript Minifiers
- HTML Minifier
- JSCompress
- Packer
- JSMin
- Closure compiler
- YUICompressor (also does CSS)
- AjaxMin (also does CSS)
RWD Testing Emulators
- Google Chrome Dev Tools
- Firefox Firebug
- The Responsinator
- StudioPress Responsive Emulator
- ProtoFluid
- ResponsivePx
- Responsive Web Design Testing Tool
- ReView
- Screenfly
- Screenqueri.es
Browser Plugin Apps
- Wireframe Sketcher (Plugin for Eclipse IDE)
- Pencil Project (Firefox Extension)