You're seeing this because you're a teacher 🤓

🎯 Your main goal for this lesson

This lesson marks the last of the "historical" content in this course. A large part of this first unit is to simply provide enough background knowledge and context so students understand why the web takes the current form it does today. This lesson helps to illustrate a progression from the beginnings to our current iteration.

🧠 Things to keep in mind when teaching

A lot of what students need for the exploratory portion of this lesson can be found here. However, they should be encouraged to broaden their search significantly and use other resources in their research.

🚀 Lesson Plan

Activity One: 10 minutes

Start by asking students, "What's your favorite website or app to use? What makes it your favorite?" Give them a few minutes to think-pair-share before engaging in a whole-class discussion. Lead the discussion down a path that helps them to understand the web wasn't always what it is today. You can enumerate the ways it's different (from computers' abilities, to internet speeds, to sites' functionalities), but let them drive by providing examples and attempting to explain why things have changed and where they'll go in the future.

Activity Two: 50 minutes (~40 minutes research, ~10 minutes total presenting)

Split students into four groups. Each will be responsible for an 'era' in the web's history. Together, each group will work to assemble a timeline from inception to modern day. This can be done any way you see fit based on your classroom (physical timeline, post-it sheets, PowerPoint, etc.).

The four groups are:

  • Early 1990's
  • Late 1990's
  • Early 2000's
  • Present Day

Each group should focus on addressing the following outcomes:

  • Provide an illustrative example (screenshot or image) of what webpages looked like in their era
  • A synthesis of the design style and attempt at explaining why pages looked the way they did in their era
  • A summary of the key moments in the web's development relative to their era

Activity Three: 10 minutes

Take the formative assessment and work towards mastery.

The Modern Web

By the end of this lesson, you'll be able to...

  • Identify the broad differences between the modern and legacy web.
  • Breakdown front-end vs. back-end development.
  • Analyze projects to understand if they're built on legacy or modern stacks.

Broad Overview

This lesson is meant to support you as you complete some research with your group. Because of that, there won't be a high level of detail relating to each of these 'eras' listed below. It's up to you and your partner(s) to investigate and find more information from outside resources.

The Web of the Early 1990's

From CERN to GeoCities

As we learned early on, Tim Berners-Lee developed the first web browser while at CERN. The initial development of this browser was meant specifically for working with the web of documents and resources available at CERN. Of course, the browser was also capable of rendering html documents not related to CERN. In the broader sense of where the web was heading, it would be utilized on a global scale outside just the needs of scientific research.

As such, many more people outside the initial web community started seeing the potential for brining users online. However, there was a barrier to entry: knowing how to write HTML. One of the first non-technical options for people wanting to author content online was GeoCities. This service was developed in 1994 and was bolstered by the evolution of the Mosaic browser into Netscape Navigator.

Users were able to join neighborhoods in a community and hyperlink to other content. The low barrier to entry coupled with an easy-to-user browser like Navigator enfranchised millions of new users to the web and ushered in the first wave of content creation in the history of the web.

The E-commerce Boom of the Late 1990's

Ebay and Amazon

As more and more people came flocking to the web, businesses saw the potential for reaching larger markets. The E-commerce boom of the late 1990's signaled a shift in how Americans - and others - wanted to do business.

Ebay was founded in 1995 and is unique in the sense that it started as an opportunity for person-to-person transactions. Building on our theme of human connection from early in the unit, Ebay is the first incarnation we see of this in respect to e-commerce on the web. While Ebay's share of e-commerce has dropped off in the years since its creation, it still exists and is used by millions of sellers/bidders every day.

Amazon started as a company very different than what it is today. Arguably, Amazon is one of the most well-known companies in the world; a marketplace where you can buy nearly anything and everything. Further, through Amazon Web Services (AWS), we see the catalyst for the cloud computing revolution of the last decade. However, Amazon started with one type of product: books. In 1994, when Jeff Bezos founded Amazon, the company exclusively sold books all over the country before eventually expanding into offering more and more types of products.

The founding of companies that focused on e-commerce not only signaled a shift for how business was done, but what business was done. The amount of resources and complexity of code needed to handle transactions, payments between users, fulfillment, and shipping is incredibly complex. As such, a boom of developers came into the industry to help build this next version of the web.

Social Media in the Early 2000's

Facebook and Twitter

Underlying the shifts in the web of the late 1990's was the development of server-side languages and frameworks for developing websites. As sites became increasingly complex, developers started building out stacks of commonly used tools to build sites. These different stacks allowed developers to shift away from hardcoding HTML on a page and to, instead, use templates wherein dynamic content could be inserted into the page. Templating varies depending upon the languages/frameworks being used, but can look something like this:

1<div> 2 {/* user.name will be replaced with the user's name when the page renders */} 3 <h1>Good morning, {user.name}!</h2> 4</div>

Technology like this was leveraged to create social networks in the early 2000's. While there were many competitors for networking online, the two dominant names of this era are undeniably Facebook and Twitter. Facebook was built with a backend language called PHP while Twitter was developed using a language called Ruby. Both of these stacks focused on dynamic content that was generated by servers; the focus was on providing user-specific experiences. This involved a lot of processing and generation needing to be completed by servers and, at times, a poor user experience (UX) due to the time it took requests to resolve.

Front-end Frameworks of the 2010's

As a response to the increased demands for social networking sites and other user-specific web applications, there's been an explosion of popular front-end frameworks in the modern era that enable the best of both worlds. While servers are still generating user-specific content, developers realized there's plenty of HTML that can be pre-generated and save time. If you've been to any sites recently and have noticed some portion of a page is 'always' there, while others take time to load, you're experiencing this next generation of site.

Dynamically rendered site For this example of a news site, all content in red is dynamically generated while the content in blue is statically built.

The Future

As these front-end frameworks become more and more prevalent, and as backend services continue to develop, people have raised the question of whether or not a server is necessary. They can be expensive to maintain, inefficient depending on how much traffic a site receives, and place considerable strain on the environment.

An architecture exists that's referred to as severless. For some applications that only need to do a bit of logic or backend work now and again, there are services in place that allow a developer to write and run backend code in the same place where their site is hosted.


Previous and Next Lessons:

Website and Webpage Basics