STAGE 0: Getting Started with HTML
1. Thinking Like a Programmer:
- Procedural Thinking - Creating clear and unambiguous instructions for a computer for follow.
- Abstract Thinking - Finding similarities or generalities amongst dissimilar things. Using abstraction, programmers avoid repletion of work.
- System Thinking - breaking down larger problems into smaller pieces. Using big-picture thinking and figuring out how the pieces will work together to solve the problem.
- Technological Empathy - Understanding how computers work and what they do well and what they can't do well.
- Debugging - Systematic problem solving. Mistakes or "bugs in code will happen. Debugging is a system for finding and correcting and correcting the problems.
2. Introduction to the Web:
- The World Wide Web is a collection of HTML (Hypertext Markup Language) documents.
- HTML documents are the "glue" that holds online audio, images, documents, etc. together. The hyperlinks or "links" that tie pages together is what makes the web, web like.
- The Web was invented in the early 1990's and has approximately 30 Billion pages.
- The Major pieces of the Web include: Users, computers and browsers, the Internet, and Servers. Browsers communicate with servers via HTTP.
- HTTP is the main protocol of the Web.
- Servers - computers that host the files that make up the internet.
- he Internet - the world's largest network.
- browser - computer programs that display files found on the web.
3. HTML - Hypertext Markup Language:
- HTML is made up of text content, markup (what it looks like), and references to other documents.
- HTML Markup (tags) - Tag composition: (opening tag) "text" (/closing tag). Markup Tags use angled brackets
- Tag examples: Many examples exist on the web such as this one -
4. Computers are Stupid:
- Computers can't make inferences and don't do well with ambiguity. Computers understand literal terms and require strict syntax.
- small mistakes that "smart humans" make while coding can lead to huge problems when given to a "stupid computer".
5. HTML Attibutes:
- Structure:
- Example using the anchor tag : Google
- Images: Using the img tag, we can display images:
. The img tag is a void tag. It has no content and therefore does not require an end tag.
6. Whitespace: Inline vs block breaks:
- The break tag is a void tag (no end tag needed) it creates an inline line break.
- The Paragraph tag (not a void tag / end tag is required). The paragraph tag creates a block break by creating an invisible box around text; the box can have height in with.
7. Container Elements:
- Container elements contain stuff inside.
- Span is an inline element. It groups an inline (usually small) amount of HTML, a portion of a paragraph for example.
- The div tag behaves like the paragraph tag. The Div tag is a block element; it creates a box around the text, a paragraph for example.
8. Document Structure:
- !DOCTYPE HTML Defines the document as an HTML document.
- HTML tags surrounds the document.
- The Head tags surround the title tags (which surround the title of the page as seen in the browser tab) and can contain metadata, java script, and css.
- The body tags contain the content of the document (what is seen on the screen).
STAGE 1: HTML and CSS
1. How Learning Code Works:
- Ask for help if you are lost. Use the Udacity forums as well as Google, Stackoverflow.com, etc.
- Learning in general has a progression from Ignorance to Awareness to Ability and finally to fluency.
- Take a break when frustrated.
2. Page Structure:
- Tree-like structure: browsers create a branching structure.
- Browsers use the structures to figure out how to display the content.
- Sideways triangles are an html element, complete with an opening and closing tag.
- Clicking the triangles allows you to navigate the structures
3. HTML-CSS-DOM:
- HTML - HyperText Markup Language - the standard markup language used to create web pages.
- CSS - Cascading Style Sheets - style sheet language used for describing the look and formatting of a document.
- DOM - Document Object Model - a convention for representing and interacting with objects in HTML. The nodes of every document are organized in a tree structure (DOM tree).
4. Boxes, Grids, and Rules:
- Visual Elements are broken into boxes/rectangles.
- There are underlying grid rules that insure things are properly aligned.
5. CSS:
- CSS is code written to control the "style" of HTML elements.
- CSS stands for Cascading Style Sheets.
- CSS rules describe the value a certain attribute should take.
- Class: a class refers to a group of elements that can be styled together.
- ID: ID's are unique identifiers that identify HTML elements.
- CSS can be linked in the "Head" of the HTML document, it can be linked in a separate file (more organized), or coded in line (generally a bad idea).
- The CSS file needs to be saved in the same folder as the HTML document that it is linked to.