flowchartxu

Important Concepts

Lesson 1: The Basics of Web and HTML

How the Web Works

The World Wide Web is a collection of HTML documents. The major components of the web include browsers, the internet, communication protocols, and servers. When someone visits a webpage in a browser, for example www.google.com, the browser sends an HTTP request to the server which responds with the appropriate document. This video provides more information.

HTML

HTML stands for HyperText Markup Language. It is the glue that holds the web together. It consists of text (what you see), markup (what the computer sees), and links to other documents. This video gives a good overview.

Tags and elements

HTML documents consist of HTML elements. An HTML element consists of an opening tag, content, and a closing tag. This video provides a good overview.

Why Computers are Stupid

Computers do exactly as they are told. They interpret written instructions literally and function only when the correct language is spoken. It is very easy to make a small mistake that can break a computer program.

Inline vs Block

HTML tags are either inline or block. Inline tags are used to render changes to text content. Block tags create an invisible box around content that can be formatted and styled and effect all content within the box.

Lesson 2: Creating a Structured Document

Why HTML & CSS?

HTML & CSS are the languages of front-end development. Front end code is a great way to learn programming. Changes are immediately visible and the code is easy to share in webpage format.

Developer Tools

Chrome's built in Developer Tools allow you to explore the DOM structure of any webpage. HTML elements can be expanded to reveal the lowest level content. Developer Tools reveals properties like font sizes and border widths and allows you to make changes which are immediately visible on the page.

Tree-like Structure

Each HTML element has an opening and closing tag. Within these tags additional content or other tags can appear. This creates a tree-like structure that is often represented with collapsible arrows. Any webpage can be represented using a horizontal diagram flow chart.

Boxify

All webpages can be deconstructed into a series of boxes. Styles are used to create shapes, add spacing, and determine color and size. Boxes allow front-end developers to easily move items around within a grid. The first step to turn a static design into a webpage is to define all of the boxes within the design. Indentations are the textual representation of boxes.

Text Editors

HTML text editors are similar to word processing applications but include additional features to support code. They contain libraries of common tags and automatically close tags and automate other repetetive features. Examples include Sublime Text and TextWrangler.