My Key Takeaways from Udacity's IPND Lessons

Lesson 1: The Basics of the Web and HTML

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:

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:

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.

Lesson 2: Creating a Structured Document

1. Structure of an HTML Document

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

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