reading-notes

Reading Notes for Codefellows!

---

Project maintained by AlanYHung Hosted on GitHub Pages — Theme by mattgraham

Code 201

Reading 01

(All My Notes are attributed/sourced from the Resources directly preceding them.)

HTML & CSS

Introduction (pp. 2-11)

• Text book is divided into 3 sections
  1. HTML
  2. CSS
  3. Practical

Structure (pp. 12-39)

• HTML Pages are Text Documents
• HTML uses tags to designate different sections/part of the web page
• Tags are referred to as elements
  • Tags comes in pairs (Opening/Closing)
• Attributes can be added to opening tags to describe contents enclosed within
  • Attributes require a Name and Value
• To use HTML, you need to know what Tags are available and what order to use them

Extra Markup (pp. 176-199)

• DOCTYPES declare HTML Version to the browser
• Text enclosed within <!-- --> denote comments not displayed by browser
• id and class are attributes used to identify specific elements
• <div> and <span> elements allow you to group inline/block elements together
• <iframes> cut your browser window into sections that present different pages
• <meta> describes your web page and are used by search engines to find your page
• Escape characters allow you to use special characters that are used by HTML Syntax such as <>

HTML 5 Layout (pp. 428-451)

• The new HTML5 elements are used to describe the purpose of each part/section of the web page
• New Elements allow for clearer declaration of Section over multiple <div>
• Older Browsers cannot use HTML5
  • Javascript is needed to help Older Browser’s understand HTML5
  • Free from Google

Process & Design (pp. 452-475)

• Important to understand your audience
  1. Know target audience
  2. Why they are visiting your Site
  3. What information they want
  4. When and Why they will return
• Site Maps allow you to plan structure of your site
• Wire Frames allow you to organize information on each page
• Design is about communication.
  • Visual Hierarchy is important to help your visitor get the most out of your site
• Use of the following allows you to differentiate between pieces of information:
  1. Size
  2. Color
  3. Style
• Use grouping of similar data to help simplify the information you are presenting.

JavaScript & JQuery

Introduction (pp. 2-10)

• JavaScript makes Web Pages more interactive
  1. Access Content
  2. Modify Content
  3. Program Rules
  4. React to Events

The ABC of Programming (pp. 11-52)

1-A What is a Script? How do I create one? (pp. 13-24)

• A Script is a series of instructions a computer follows to achieve a goal
• Each time a Script Runs it might only use a subset of the code.
• Computers approach tasks differently than humans. Computers are not able to discern the intentions of the programmer and will execute code literally.
• Approach to writing a Script:
  1. Break final goal into a series of tasks
  2. Break each task down to a series of steps
  3. Flow Charts may help

1-B How do computers fit into the world around them? (pp. 25-42)

• Models the real world using data
• Objects are used to represent physical things
  1. May have properties to give more information about Object
  2. May have methods to perform tasks using properties of Object
  3. May trigger events when a user interacts with computer
• Programmers can write code that allows events to be triggered by user actions
• Web Browsers use HTML to create model of web page
• Each element in HTML creates a node which is a type of object
• Interactive web pages uses code that is written based on web page model.

1-C How do I write a script for a Web Page? (pp. 43-52)

• It is best to keep JavaScript Code in it’s on File
  • Javascript files are text files that use the .js extension
• <script> is used to tell the web page to activate JavaScript Code
• JavaScript does not change the HTML Code of a web page, but instead works with the model that is created by the HTML Code.

<– Back