How the Web Works

A simple web page is rendered on the screen via the following steps.
There are many sub-steps in this process, but these are the highlights.

You instruct the browser which web page you’d like to see
The browser looks up the site in a “DNS Server”
1. This is like a big phone book for website server addresses
The browser asks the server to send over a specific page of the website, such as developer.mozilla.org/filename.html or developer.mozilla.org
1. If asked for a “root”-level address, most servers will return <root>/index.html
The server sends the HTML file back to the browser
The browser starts to read the HTML file from the top to the bottom, stopping any time that additional resources are required:
1. CSS stylesheets
2. JavaScript files
3. Fonts
4. Images
Browser makes requests for additional resources
1. Those resources might request even more files
Once the browser gets to the bottom of the page it can start working on rendering, and then display the page

HTML Demo

HTML tags are the basis of all web applications. They give the page structure, and define the content within.
An HTML tag takes the following form:

<tag class="foo" onclick="myFunction()" otherAttributes="values"> </tag>

HTML tags can also be nested to create a tree that we call the Document Object Model
The HTML demo page is a large collection of HTML elements that you will come across during development. The full list of elements can be found on MDN.

Sample Website

<html>
  <head>
    <title>Frontend Workshop: By Micah Godbolt and Ken Chau</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <header>
      <h1>Frontend Workshop</h1>
      <nav>
        <ul>
          <li><a href="./about.html">About This Workshop</a></li>
          <li><a href="./participate.html">Take This Workshop</a></li>
          <li><a href="./contribute.html">Contribute to This Workshop</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <h2>About This Workshop</h2>
      <p>
        The first day provides an introduction to the fundamentals of the web: HTML, CSS and JavaScript.
      </p>
      <img src="../../assets/todo_screenshot.jpg" alt="Picture of the Todo App we will build" />
      <p>
        On the second day we'll dive into more advanced topics like TypeScript, testing, and state management.
      </p>
    </main>
    <footer>
      <h2>Get More Information</h2>
      <ul>
        <li><a href="https://github.com/Microsoft/frontend-bootcamp"> Frontend Bootcamp </a></li>
        <li><a href="https://twitter.com/micahgodbolt"> @micahgodbolt </a></li>
        <li><a href="https://twitter.com/kenneth_chau"> @kenneth_chau</a></li>
      </ul>
    </footer>
  </body>
</html>

Exercise

The power of HTML is its ability to represent complex information in a way that conveys meaning. In this exercise you are going to be creating an HTML page for my favorite recipe.

The Exercise

Create a recipe page to host our recipe (page title, headings, sections, paragraphs, lists etc)
Use title, header, main, footer, headings (h1/h2 etc), paragraphs, lists
Use ordered and unordered lists appropriately
Add the baked_beans.jpg image included in this folder
Add an anchor tag around ‘Wisconsin Beer Brats’

4th of July Baked Beans

It’s great how a single meal can take you back dozens of years. This is one of those recipes that never seems to fail to impress.

I learned this recipe for the cousin of one of my college friends back in Nashville Tenessee. We had an amazing 4th of July feast which included this recipe and some bratworst like these Wisconsin Beer Brats https://www.culinaryhill.com/wisconsin-beer-brats/

Prep Time: 10 minutes
Cook time: 3+ hours
Servings: 12

Ingredients

1LB Bacon chopped
3 Cans Bush’s Origin Baked Beans
1 Walla Wall Onion chopped
2 ground garlic cloves
3 Tablespoons of mustard
2 Tablespoons of molasses
3 Tablespoons of brown sugar

Directions
Cook bacon until it is mostly cooked, then drain most of the grease and put aside Cook onion in remaining bacon grease Combine onions and bacon, then add garlic, cook for a few more minutes Add beans and get up to simmer temperate Add mustard until your beans are nice and yellow Add molassas until color darkens again Add brown sugar until properly sweet Simmer for a long time, occassionally sturing

Expert Tipes
Burning off most of the liquid gives you nice, hearty, sticky beans. If the beans get too try, you can always add beer!

Nutritional Information

Calories: lots
Fat: lots
Fun: lots

EveryDay .NET