Resources

From WikiEducator
Jump to: navigation, search


  • whole assignments pages - comment out onlyinclude
  • media only version - include to limit capture to just the Media section - mostly diigo rss by tag



1. Getting Started

The course follows the textbook. In each module, there is a reference to the relevant textbook chapters as well as to online tutorials and reference guides listed in the Media section.


Textbook - Read HTML and CSS Visual Quickstart Guide, Ninth Edition. Casabona.

  • Introduction
  • Chapter 1 What Are HTML and CSS?
  • Chapter 3 HTML Syntax
  • Chapter 11 Introduction to CSS

Also

World Wide Web (WWW)

the collection of different websites around the world, containing different information shared via local servers(or computers).

World Wide Web

commonly known as the Web, is an information system enabling documents and other web resources to be accessed over the Internet.


Coding Projects

Glitch - coding projects details

Instant editing. Click a button, you’re editing code. Start typing, your site updates. Our editor gets you moving fast, from any computer with a browser.

Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/glitch: Error parsing XML for RSS


WEB LITERACY Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/webliteracy: Error parsing XML for RSS


BASICS Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/basics: Error parsing XML for RSS


CSS - Cascading StyleSheets Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/css: Error parsing XML for RSS


HTML / CSS TUTORIALS Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/htmltutorial: Error parsing XML for RSS



2. HTML Basics

The CIS89A Web Development course introduces Cascading Style Sheets (CSS) right from the beginning. The CSS references are usually covered separately from basic HTML coding.


Textbook - Read HTML and CSS Visual Quickstart Guide, Ninth Edition. Casabona.
* Chapter 4 Basic HTML Elements . Chapter 6 Structure and Layout with HTML . Chapter 12 Targeting Elements


In addition to the textbook, many of the details of elements and attributes for the the elements are available from online sources. Because these change, the textbook just covers the basics. Below are links to some of the resources. Other resources are available - just search online.

Lists


Examples Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/x2basics: Error parsing XML for RSS


HTML

Glitch editor

simple HTML and CSS code editor, provides preview of the web page you are working on as you work, provides hints, syntax as you type

list-style-image

custom list bullets or markers that are little pictures


.. basics,video - these are just a few of thousands of video tutorials Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/basics,video: Error parsing XML for RSS


.. htmltutorial - online resources Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/htmltutorial: Error parsing XML for RSS


Cascading StyleSheets (CSS)

CSS Zen Garden

many examples of CSS style sheets

CSS Examples

nice list of examples of the CSS code for specific styling.

Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/css: Error parsing XML for RSS


HTML Checkers Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/htmlvalidation: Error parsing XML for RSS


HTML / CSS REFERENCE Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/htmlref: Error parsing XML for RSS


INTERNET Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/internet: Error parsing XML for RSS


FIND Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/findit: Error parsing XML for RSS


READ Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/read: Error parsing XML for RSS



3. Links

Textbook - Read HTML and CSS Visual Quickstart Guide, Ninth Edition. Casabona.

  • Chapter 2 Creating a Website on Your Computer
  • Chapter 5 Links
  • Chapter 21 Getting Your Website Online - Making Your Site Live p.269-272 for information about transferring files to the web


HTML <a> Tag

The <a> tag defines a hyperlink, which is used to link from one page to another. The most important attribute of the <a> element is the href attribute, which indicates the link's destination.

title attribute

The A element is the tag you use to create a link. It is also referred to as the anchor tag. Use the title attribute in a link to improve accessibility

HTML title Attribute

The title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element. The title attribute can be used on any HTML element

:hover

To style links appropriately, put the :hover rule after the :link and :visited rules

mailto link

add subject to the link


Examples Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/x3links: Error parsing XML for RSS


LINKS Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/links: Error parsing XML for RSS


ACCESSIBILITY Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/accessibility: Error parsing XML for RSS



4. Images and Media

Textbook - Read HTML and CSS Visual Quickstart Guide, Ninth Edition. Casabona.

  • Chapter 7 Media


Align image (with CSS)

Look at the examples for Align image. Text wraps around the image. Usually the image will be to one side and the text will go by on the other side. In Wikipedia, all the images are aligned on the right side of the articles.

HTML5 Test

Check your browser for HTML5 support


Examples Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/x4media: Error parsing XML for RSS


IMAGE EDITING Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/imageedit: Error parsing XML for RSS


MEDIA Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/media: Error parsing XML for RSS

IMAGE MAP

Map and Area Elements

good tutorial on setting up and using image maps.


COPYRIGHT, FAIR USE

Copyright on the Web

really simple: If you did not write or create the article, graphic, or data that you found, then you need permission from the owner before you can copy it

Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/copyright: Error parsing XML for RSS


HTML5 Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/html5: Error parsing XML for RSS


CREATIVE COMMONS Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/creativecommons: Error parsing XML for RSS


XREALITY Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/xreality: Error parsing XML for RSS


SHARE Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/shareit: Error parsing XML for RSS



5. CSS Styling

Textbook - Read HTML and CSS Visual Quickstart Guide, Ninth Edition. Casabona.
* Chapter 13 Styling Text . Chapter 14 Color in CSS . Chapter 18 CSS Transformations and Animations


Examples Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/x5styling: Error parsing XML for RSS


STYLING Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/styling: Error parsing XML for RSS


TEXT Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/text: Error parsing XML for RSS


Design Thinking Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/designthinking: Error parsing XML for RSS


Coding, programming

Hour of Code

Write your first computer program Code.org - Learn the basic concepts of Computer Science with drag and drop programming. This is a game-like, self-directed tutorial starring video lectures. Learn repeat-loops, conditionals, and basic algorithms.

CodeAcademy

write code and see the results right away.

Top Ten Programming Languages

for web development – JavaScript, Python, Java, PHP, Ruby, C#

Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/coding: Error parsing XML for RSS


USE Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/useit: Error parsing XML for RSS



6. CSS Layout

Textbook - Read HTML and CSS Visual Quickstart Guide, Ninth Edition. Casabona.
* Chapter 15 Using CSS for Page Layout . Chapter 16 Layouts with CSS Grid and Flexbox


Examples Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/x6layout: Error parsing XML for RSS


FLEXBOX Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/flexbox: Error parsing XML for RSS


Mixed Reality (xreality) Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/xreality: Error parsing XML for RSS


PROTECT Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/protectit: Error parsing XML for RSS



7. Responsive Web Design

Textbook - Read HTML and CSS Visual Quickstart Guide, Ninth Edition. Casabona.
* Chapter 16 Layouts with CSS Grid and Flexbox * Chapter 17 Responsive Design and Media Queries


Examples Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/x7responsive: Error parsing XML for RSS


GRID Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/grid: Error parsing XML for RSS


RESPONSIVE

Mobile-Friendly Test

make sure your site is mobile-friendly.

Responsive Web Design (2010 - first description)

The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must 'accept the ebb and flow of things.'

Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/responsive: Error parsing XML for RSS


WEB DESIGN Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/webdesign: Error parsing XML for RSS


PARTICIPATE Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/participate: Error parsing XML for RSS


MAKE Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/makeit: Error parsing XML for RSS



8. Tables, Forms

Textbook - Read HTML and CSS Visual Quickstart Guide, Ninth Edition. Casabona.
* Chapter 8 Tables and Other Structured Data Elements . Chapter 9 Web Forms . Chapter 10 Advanced and Experimental Features


Examples Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/x8tables: Error parsing XML for RSS


TABLES Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/tables: Error parsing XML for RSS


FORMS Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/forms: Error parsing XML for RSS


PORTFOLIO Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/portfolio: Error parsing XML for RSS


WRITE Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/write: Error parsing XML for RSS

FINANCIAL LITERACY

Dilbert’s One-Page Guide to Everything Financial

if you like Dilbert and understand the corporate hell that he lives in. Otherwise, without further ado, here is Dilbert’s One-Page Guide to Everything Financial: Make a will. Pay off your credit cards. Get term life insurance if you have a family to support. Fund your 401k to the maximum.

Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/financialliteracy: Error parsing XML for RSS



9. Beyond HTML

Textbook - Read HTML and CSS Visual Quickstart Guide, Ninth Edition. Casabona.
* Chapter 19 CSS Variables . Chapter 20 CSS Preprocessors . Chapter 25 Going Beyond HTML & CSS


Examples Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/x9basics: Error parsing XML for RSS


SEARCH ENGINE OPTIMIZATION (SEO) Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/SEO: Error parsing XML for RSS


JAVASCRIPT

Eloquent JavaScript

A Modern Introduction to Programming - an introduction to the JavaScript programming language and programming in general. Originally written and published in digital form, includes interactive examples and a mechanism for playing with all the example code. This version is released under an open license.

Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/javascript: Error parsing XML for RSS


BEYOND HTML
Programming Languages - Javascript, SQL, PHP, Python, jQuery, development tools

10 Best Web Development Tutorials For Beginners

Maybe you’re looking to build a website for the business you’re bootstrapping from the ground up. Maybe you’d like to enter the world of web development and are looking for an introduction to coding. Or maybe you’re just trying to stay a step ahead (or behind) your hacker kid. Whatever the case, we’ve got the resources to help you get started. Here’s a list of the 10 best web development tutorials for beginners.

Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/beyondhtml: Error parsing XML for RSS


INTERNET OF THINGS (IoT) Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/iothings: Error parsing XML for RSS


WEBSITE MANAGEMENT Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/webmngmt: Error parsing XML for RSS


WEBWORK - developer jobs Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/webwork: Error parsing XML for RSS


E-COMMERCE Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/ecommerce: Error parsing XML for RSS


SOLVE Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/solveit: Error parsing XML for RSS



10. Site Planning

Textbook - Read HTML and CSS Visual Quickstart Guide, Ninth Edition. Casabona.
* Chapter 21 Getting Your Website Online . Chapter 22 Testing Your Website . Chapter 23 Improving Website Performance . Chapter 24 Web Accessibility


Examples Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/x10plan: Error parsing XML for RSS


SITES - overall design considerations Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/sites: Error parsing XML for RSS


Usability considerations Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/usability: Error parsing XML for RSS


Rubric - website development Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/rubric: Error parsing XML for RSS


HTML validation tools - check your code Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/htmlvalidation: Error parsing XML for RSS


Hosting and domain registration - some examples - there are 100s Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/hosting: Error parsing XML for RSS


WEBDEV Web Developers tools Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/webdev: Error parsing XML for RSS



11. Web Site Projects

Examples Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/x11site: Error parsing XML for RSS


As a web developer, you need to be ready for the constant stream of changes within the industry. Here are some examples of areas of interest.


BEYONDHTML Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/beyondhtml: Error parsing XML for RSS


WEBWORK Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/webwork: Error parsing XML for RSS



12. Summary, Peer Review

Something to think about - creativity Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/creativity: Error parsing XML for RSS


Peer review, collaboration Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/peer: Error parsing XML for RSS