My Key Takeaways from Udacity's IPND Lessons

1. From Me to the Server and Back: How Things are Connected

The five main agents of using the web, as depicted in Lesson 1, are:

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

The process of using the web starts with the user, me, opening a web browser. When I command the browser to do something, I am effectively sending a signal over the internet ("the world's largest computer network"). HTTP, an applications protocol that stands for hypertext transfer protocol, takes the signals and gives them to servers that host the content I want to access. These servers are computers that are optimized for sitting in a room and hosting 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.

2. What is HTML?

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 (self-explanatory)

3. HTML In Detail: Tags vs. Elements vs. Attributes

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.

4. The Difference Between Inline and Block Elements

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.

1. Structure of an HTML Document

HTML documents, as we have learned them so far, are governed by two languages:

• HTML, which controls the structure of the webpage
• CSS, which controls the style of a webpage (CSS is therefore not part of the structure of th webpage)

The HTML for a webpage is converted by whatever DevTools you are using into a tree-like structure. This visual representation is called the document object model, or DOM (see What is the DOM? for details). The CSS controls how everything looks on the webpage, i.e., the colour, the padding, etc.

2. How Web Browsers Interpret HTML Structure

Everything is a damn box. Well, mostly. Remember the inline vs. block question in Lesson 1? These boxes are blocks and contain separate sections of content, which can be defined using </div> tags. They show up in the tree-like structure as a series of nested boxes. How do we make these boxes different sizes? Using classes in conjunction with these </div> tags!

3. Key Tools

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