Lean HTML Fast!

This screen cast introduces Hyper Text Markup Language (HTML). Being that HTML is simply text, it can be written using any text editor, and viewed in any web browser. In this screen cast I perform the following steps...Fast! Feel free to pause / replay as necessary.

1. Open notepad to create the most basic Hello web page.
2. Save it as 'hello.html' and double click to open in a browser.
3. Add a 'center' tag to illustrate the 'markup' effect.
4. Add the 'head' and 'body' tags to make the document more standardized.
5. Give the document a title.
6. Add a line break after the word hello and a 'hyperlink' to an About page.
7. Save document and refresh the browser.
8. Click the hyperlink (notice the browser re-directs to the about.html page).
9. Create the about page, save as 'about.html', refresh the browser.
10. Click the About and Home links to illustrate the hyper linked documents.
11. Re-open the 'hello.html' page to add more complex tags.
12. Add an 'img' (image) tag and set the 'src' (source) to the url of the Google logo.
13. Add a 'br' (line break), 'form' and input (text and button) tags to replicate the Google website.
14. Save the document, and refresh the browser.
15. Vwalla, you just built the UI for Google in under 5 mins!

Recommended online followup tutorial is Learn HTML from W3Schools.com

Learn how to code in 5 minutes!

This post is an introduction to a series of “How to Code” screen casts, each designed to teach the basic concepts of a given technology.  I’ve decided to use screen casts instead of online tutorials because they get the point across quicker.  Also seeing is believing and once you see how easy some of these technologies actually are, you will have the confidence to explore them further on your own.  The screen casts are NOT intended to give you a deep understanding of each technology, in fact they are designed to do just the opposite.  They are intended to simplify the technology to it’s fundamental core with basic examples you can quickly grasp.  Most start with a simple Hello World and elaborate until the primary concepts are addressed.  There are thousands of books and online references on these technologies where you can get further information and I will make an effort to include links to relevant references for each post. 

Additionally, the screen casts will be grouped logically such that one can get an entire overview of a related set of technologies within the group.  Grouped posts will also follow a recommended sequence which build on the concepts and examples of the previous screen cast within the group.  This will allow you to gain a broader understanding of the related technologies and how they “fit” together to address a larger technical domain.  

After watching a given screen cast and reading the post, please don’t hesitate to submit your questions and comments and I will do my best to answer them within the post or in a follow-on screen cast.  Happy Coding!

The following is an outline of my planned screen casts.  As they become available I will add a link here.  Feel free to bookmark this post and come back to see watch the latest and greatest.

Client Side Web Development

HTML

CSS

Javascript

JSON

AJAX

ExtJs 

Server Side Web Development

Intro to Server Side Web

JSP 

Database Development

Intro to Data Modeling

DDL

SQL

MySQL 

Object Oriented Programming

Intro to OOP

UML

Java