Colleges and Universities
Digital Technology
Learning Sites
Books & Publishers
ITI 395 CSS3 - Overview
Course Outline:
New Cascading Style Sheets (CSS3) styles are used to format and control placement of HTML5 elements such as rounded corners, shadow effects, and color gradients. Advanced CSS3 media queries are also covered to handle a variety of devices including screen, printer, tablet, and mobile phone; and integration of scripts into a web page. Syntactically Awesome Style Sheets (SASS) and Leaner Style Sheets (less) languages will also be covered.
Prerequisites:
MS Windows or equivalent experience.
Required Textbook & Materials
REQUIRED
- Title: MURACH'S HTML5 and CSS3
- Author: Zak Ruvalcaba and Anne Boehm
- ISBN: 978-1-943872-26-8
- Edition/Copyright: 4th
- Publisher: MURACH
- Published Date: March 2018
- Website: murach.com
Materials:
Please bring a Flash Drive/Memory Stick 512MB or larger to class which will enable you to save your class work.
Meeting Information:
- Days: Tuesday & Thursday
- Dates: 6/25/2019 - 7/11/2019
- Number of Sessions: 4
- Time: 06:30 PM - 09:30 PM
- Location: HU 321
Lesson Plan:
- Course Overview Presentation
- Chapter 4 - How to use CSS to format the Elements of a Web Page
- Chapter 5 - How to use the CSS Box Model
- Chapter 6 - How to Use CSS for Page Layout
- Chapter 7 - How to Work with CSS to do Links, Lists, and Navigation Menus
- Chapter 16 - How to Use CSS3 Transitions, Transforms, Animation and Filters
- Chapter 20 - How to use SASS and Less
Web Support:
Profburnett's Web4Students Websites: ITI 395 CSS3: Summer 2019 CRN:35469
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)
Imaging Programs
WSDL, SOAP, REST, & ODATA Introduction and Resources
| Session | Chapter | Presentation | Exercise Zip File | Solution Set Zip File |
| I | Course Introduction Presentation |  |
||
| I | Session I Chapter 4 - How to use CSS to format the Elements of a Web Page Chapter 5 - Hot to use the CSS Box Model |
Chapter 4 Chapter 5
|
Chapter 4
|
Chapter 4 Chapter 5
|
| I | Setting Up Development Environment | |
||
| II | Session II Chapter 6 - How to Use CSS for Page Layout Chapter 7 - How to Work with CSS to do Links, Lists, and Navigation Menus |
Chapter 6 Chapter 7 |
Chapter 6 Chapter 7
|
|
| III | Session III | Chapter 16 |
Chapter 16 |
Chapter 16 |
| IV | Session IV | Chapter 20 |