My IPND Notes

The five main agents in the process of using the web are:

1. The user
2. The web browser
3. The internet
4. HTTP
5. Servers

The user opens a web browser. The user commands the browser to do something and the browser sends a signal over the internet ("the world's largest computer network"). HTTP, an applications protocol, takes the signals and sends them to servers that host the content. The servers then send information back along the chain of command (through HTTP through the internet through my browser) back to me, the user.

HTML is the main type of document on the web that glues the internet together. This type of document contains:

• Text content (what you see)
• Markup (what it looks like)
• References to other documents (e.g. images and videos)
• Links to other pages

The distinction between HTML tags, elements, and attributes was murky for me at first. Luckily, this resource from 456 Berea Street provided some clarity. In summary:

• An element in HTML represents some kind of structure or semantics and generally consists of a start tag, content, and an end tag. The following is a paragraph element:
         <p>
        This is the content of the paragraph element.
        </p>
• A tag is used to mark up the start and end of an HTML element. A start tag consists of an opening angle bracket followed by the element name, zero or more space separated attribute/value pairs, and a closing angle bracket. There are also some elements that are empty (e.g. the <br> element, which is essentially just an opening tag), meaning that they only consist of a single tag and do not have any content.
• An attribute defines a property for an element, consists of an attribute/value pair, and appears within the element's start tag. An element's start tag may contain any number of space separated attribute/value pairs. The most popular misuse of the term "tag" is referring to alt attributes as "alt tags". There is no such thing in HTML. Alt is an attribute, not a tag.

There are two varieties of elements: inline and block. This is an elementary description, but inline elements flow along with text content while block elements form an invisible paragraph box for its content. Impressive Webs has a thorough description of the many characteristics that differentiate inline and block elements.

HTML can be viewed as a series of nested elements. These nested elements form a tree-like structure. This visual representation is called the document object model, or DOM (see What is the DOM? and the image below for details):

The two key tools we learned to use in this lesson to create/review structured documents were:

1. Chrome DevTools: we used this to view the HTML and CSS code for live webpages
2. Sublime Text: we used this specialized text editor to easily write code and save it on our computer

CSS stands for Cascading Style Sheets. CSS controls the style of the webpage. The "cascading" part means that CSS rules are applied not only to the elements they directly match (via classes), but also to all of those elements' child elements (i.e. inheritance). However, if a child element has multiple overlapping rules defined for it, the more specific rule takes effect.

Inheritance prevents certain properties from being declared over and over again in a style sheet. It is a fundamental building block for the abstract thinking portion of a programmer's thought process.

Specificity is the means by which a browser decides which CSS property values are the most relevant to an element and therefore will be applied (via Mozilla Developer Network). The hierarchy of specificity power can be found on this website.

The name of the game is increasing productivity. Avoiding repetition by leveraging CSS is important because:

1. It saves the programmer time
2. Less code needs to be written, therefore making it easier to understand when it is being reviewed
3. Less risk of typos and therefore less chance of buggy code