Some Useful Information...
A Look Back...
- 30th Anniversary of the World Wide Web: 12 March 2018
- The World Wide Web project "The First web Page"
- Early History of HTML - 1990 to 1992
- Write HTML Like It's 1999
- CERN 2019 WorldWideWeb Rebuild
The Standards
- W3C: World Wide Web Consortium
- HTML
- CSS
- Toggle CSS Stylesheets
- A Look Back at the History of CSS | CSS-Tricks
- Magic of CSS — Adam Schwartz
- css Zen Garden: The Beauty in CSS Design
- JavaScript / ECMAScript
More Resources
- A11Y Layers
- David J. Hark's <html> Class Resources
- Recommended Doctype Declarations to use in your Web document.
- HTML Tutorials, Courses, and Books
- w3schools: HTML Element Reference
- HTML Element test file index
- HTML5 Factsheets
- HTML5 Elements
- 10 HTML Elements You Didn’t Know You Needed
- (Why) Some HTML is "optional"
- Three beginner mistakes in HTML
- Understanding Position in CSS
- 20 Best Web Design and Development Blogs To Follow
- Learn web development MDN
- Web Fundamentals Google
- How To – Learning Guide
- W3Schools Online Web Tutorials
- HTML - CSS - JS: The Client-Side Of The Web
- Where Do You Learn HTML & CSS in 2019?
- HTML is the Web
- HTML can do that?
- Why You Still Need HTML to Release Creativity
- FTP: File Transfer Protocol
- Fonts
- Getting Started With CSS Layout
- Float
- CSS Floats 101
- All About Floats
- Floatutorial: Step by step CSS float tutorial - CSS Maxdesign
- Hosting by 000webhost
- 000webhost is learning platform for beginners starting their journey on the internet. Learn HTML, CSS, Javascript, PHP and SQL in one place. Create and publish your first ever website. All for free
- Getting started
- Web Hosting FAQ & Knowledge Base
- The Complete WordPress & 000webhost Guide (2019)
- Form Basics B1
- Curated Coffee (David's page)
- HTML 5 Outliner
- The Layer-Cake Pattern of Scanning Content on the Web
- Validator.nu (X)HTML5 Validator (Living Validator)
- What are browser developer tools? MDN
- Chrome
- Chrome DevTools
- Chrome DevTools Overview
- Edit the DOM
- Introduction to the DOM - Web APIs | MDN
- Firefox
- StatCounter Global Stats - Browser, OS, Search Engine including Mobile Usage Share
- Google Analytics Solutions
- Form Reply Address / Demo Form
- Some Favelets or Bookmarklets
- Only CSS: STARFOX Arwing Drone
- 9 Best Website Layout Examples and Ideas for Web Design in 2018
- Section Demo
- Young Coder
- Public Money, Public Code
Free Web Page Editors, HTML Editors, Web Page Builders, and Website Builders
WYSIWYG
- Learning HTML — should you use an editor?
- The 5 Best Free WYSIWYG Alternatives to Dreamweaver
- 6 Best WYSIWYG HTML Editor Open Source
- Free WYSIWYG Web Editors for Windows
- KompoZer
- BlueGriffon
- Mobirise Mobirise Website Builder
- Visual Studio Code
- Visual Studio Code - Wikipedia
- Download Visual Studio Code
Text-based
- Brackets - A modern, open source code editor that understands web design from Adobe.
- Notepad++
- 6 Best Open Source HTML Editors
- Microsoft Notepad is found under Start > Windows Accessories or C:\Windows\System32\notepad.exe
- TextEdit is fine for class and is usually included with Mac OS X. Please ensure you choose Format > Make Plain Text from the TextEdit toolbar
Class Outline:
- A Quick Overview of Web Development
- Client-side Programming
- HTML
- Cascading Style Sheets
- JavaScript
- Ajax
- JavaScript Frameworks
- Server-side Programming
- Java EE
- ASP.NET
- Python
- PHP
- ColdFusion
- Node.js
- Client-side Programming
- Introduction to HTML
- Getting Started
- A Simple HTML Document
- The HTML Skeleton
- The <head> Element
- The <body> Element
- Whitespace
- HTML Elements
- Attributes
- Empty vs. Container Tags
- Blocks and Inline Elements
- Comments
- Special Characters
- History of HTML
- lang Attribute
- Paragraphs, Headings, and Text
- Paragraphs
- Breaks and Horizontal Rules
- Creating an HTML Page
- Quoted Text
- Preformatted Text
- Text-Level Semantic Elements
- HTML Links
- Text Links
- Absolute vs. Relative Paths
- Absolute Paths
- Relative Paths
- Default Pages
- Targeting New Windows
- Email Links
- Adding Links
- Targeting a Specific Location on the Page
- The title Attribute
- HTML Images
- Inserting Images
- Making Images Accessible
- Alternative Text
- Long Descriptions
- Height and Width Attributes
- Image Links
- Adding Images to the Page
- Inserting Images
- HTML Lists
- Unordered Lists
- Nesting Unordered Lists
- Ordered Lists
- Nesting Ordered Lists
- The type Attribute
- The start Attribute
- Definition Lists
- Creating Lists
- Unordered Lists
- HTML Tables
- Creating Tables
- Adding a Caption
- thead, tbody, and tfoot
- Merging Cells
- Creating Tables
- Creating Tables
- Sectioning a Web Page
- Semantic Block-Level Elements
- The article Tag
- Semantic Block-Level Elements
- Audio and Video
- Supported Media Types
- The audio Element
- Audio Formats
- audio Tag Attributes
- The video Element
- video Tag Attributes
- Video
- Accessibility