Intro to the Web and HTML

Learning Objectives

• Diagram the relationship between a server and a browser, including responses and requests.
• Explain the difference between http:// and file://.
• Semantically structure a given document using HTML without regard to style.
• List commonly-abused HTML elements.
• Label the components of an HTML element and its tags.
• List commonly-used special characters.
• Run a website through a validator and fix its errors accordingly.
• Identify the different roles of HTML, CSS, and Javascript on a given webpage.
• Link to a given file using either absolute and relative paths.
• Use Chrome Dev Tools to inspect an element.

The purpose of this lesson

We want to give you a high-level look at how the web works, and then, more interestingly, go through how to make a website using HTML and CSS. In order, read through all the files in this repository — except the .travis.yml and LICENSE ones. You are encouraged to complete the included excercises, but the only deliverable is to submit an issue to this repo with a list of three things you learned from the lesson plan.

Have you used a website-builder like Squarespace or Wix or Wordpress or Drupal before?

Why are we going into HTML and CSS and code in general, when there are services that make websites for you without you having to touch a line of code?

The analogy I like to use to explain this is Microsoft Word. Out-of-the-box, you can use Word to make a document that looks 75% like what you had in mind. In order to make it 100% like what you had in mind, you either need to know Word extremely well, or you just need to use another program.

Have you ever had the experience of spending 3 hours on a Word document just trying to get your stupid image to align the right way?

Content Management Systems, aka CMS-es, aka or website-builders, will quickly give you a website that looks pretty OK. If "pretty OK" is all you want, and your intent is just to get a web store online as quickly as possible, then a CMS is the way to go.

If, however, you want to have a site that's 100% the way you want it, and to have complete control over your appearance and product, then you need to pop the hood and use code.