Colleges and Universities
Digital Technology
Learning Sites
Books & Publishers
ITI 353 HTML5 - Overview
Course Outline:
Learn the basic building blocks of designing and creating websites optimized for modern computers, tablets, and mobile phones using HTML5 and CSS. Topics include basic HTML5 elements and attributes, including hyperlinks, images, and tables. Advanced techniques to effectively create multiple column layouts using new HTML5 structural elements; new Cascading Style Sheets (CSS3) styles to format and control placement of HTML5 elements such as rounded corners, shadow effects, and color gradients; advanced CSS3 media queries to handle a variety of devices including screen, printer, tablet, and mobile phone; and integration of scripts into a web page. The Dreamweaver Integrated Development Environment (IDE) will be used to design and develop a website. Web hosting fundamentals and effective use of meta tags are also 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-890774-83-7
- Edition/Copyright: 3th
- Publisher: MURACH
- Published Date: April 2015
- 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: 02/20/18 - 03/08/18
- Number of Sessions: 6
- Time: Tuesday & Thursday - 06:30 PM - 09:30 PM
- Location: HU 321
Lesson Plan:
Session I - Tuesday, February 20, 2018
- Course Overview Presentation
- Chapter 1 - Introduction to Web Development
- Chapter 18 - How to Design a Web Site
- Chapter 19 - How to Deploy a Web Site on a Web Server
Session II - Thursday, February 22, 2018
- Chapter 2 - How to Code, Test and Validate a web page
- Chapter 3 - How to Use HTML to Structure a Web Page
- Chapter 4 - How to Use CSS to Format the Elements of a Web Page
Session III - Tuesday, February 27, 2018
- Chapter 5 - How to Use the CSS Box Model for Spacing, Borders, and Backgrounds
- Chapter 6 - How to Use CSS for Page Layout
Session IV - Thursday, March 1, 2018
- Chapter 7 - How to Work with Links and Lists
- Chapter 9 - How to Work with Images
Session V - Tuesday, March 6, 2018
- Chapter 10 - How to work with Tables
- Chapter 11 - How to work with forms
- Open Lab
Session VI - Thursday, March 8, 2018
- Chapter 8 - How to Use Responsive Web Design (RWD)
- Open Lab
Web Support:
MC Web for Students Site: ITI 353: Spring 2018 CRN:35205
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 |
| 1 | Course Introduction Presentation |  |
||
| Chapter 1 - Introduction to Web Development Chapter 18 - How to Design a Web Site Chapter 19 - How to Deploy a Web Site on a Web Server |
|
 |
||
| 2 | Chapter 2 - How to Code, Test and Validate a web page Chapter 3 - How to Use HTML to Structure a Web Page Chapter 4 - How to Use CSS to Format the Elements of a Web Page |
|
Chapter 3 |
Chapter 3 Chapter 4 |
| 3 | Chapter 5 - How to Use the CSS Box Model for Spacing, Borders, and Backgrounds Chapter 6 - How to Use CSS for Page Layout |
|
Chapter 5 Chapter 6 |
|
| 4 | Chapter 7 - How to Work with Links and Lists Chapter 9 - How to Work with Images |
|
Chapter 7 Chapter 9 |
|
| 5 | Chapter 10 - How to work with Tables Chapter 11 - How to work with forms |
|
Chapter 10 Chapter 11 |
|
| 6 | Chapter 8 - How to Use Responsive Web Design (RWD) | |
|
|
| Course Review | |