Colleges and Universities
Digital Technology
Learning Sites
Books & Publishers
HTML5-CSS3 - Session II
Session Outline:
- Chapter 2 - How to Code, Test and Validate a web page
- Chapter 3 - How to Use HTML to Structure a Web Page
Class Presentations
| Session | Chapter | PowerPoint Presentation | Exercise Files | Solution Set Files |
| Session II | Chapters 2 & 3 |  |
Chapter 3 Exercise Files |
Chapter 3 |
| II | Setting Up Development Environment | |
You can download the PowerPoint presentation and chapter exercises.
Student Exercise
Student Exercise 1
- Chapter 3 - Exercise 3-1
- 1. Complete Chapter 3 - Exercise 3-1, Page 120 using Dreamweaver.
- 2. Download Chapter 3 exercise zip file to desktop. Unzip files and folders and place in Session I - IV local development folder.
- 3. Students will upload local development site to testing development site.
- 4. Students will preview in browser development files.
- 5. Students will upload development site to live site.
- 6. Students will preview in browser live 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 II 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)