1.2: Web Browsers
By the end of this lessons, you should be able to:
- Explain what a web browser is in your own words.
- Explain what role browsers play in this course, and why we use them.
- Make simple edits to a HTML file and see those changes reflected in your browser.
The World Wide Web and web browsers were born in 1990 when Tim Berners-Lee invented a way to view HTML documents through the Internet.
A web browser is a program used to view and interact with web pages. A web browser is a purpose-built application; just like Windows Media Player or iTunes are built to handle audio or video files, web browsers are built to handle HTML and related files.
A web browser is used to browse for files on the web. If we abstract "the web" as just computers connected together, a browser fundamentally browses files on computers. You can browse files on your own computer by typing
file://in the browser navigation bar for Windows and MacOS, respectively.
When you visit YouTube to watch a video, you are browsing to a connected computer which has the video you want saved into memory.
In Coding Fundamentals we will use browsers as a learning tool to visualize inputs and outputs of our code through web pages. In general, web browsers are not necessary for writing and executing code.
We will very briefly touch on HTML and what how web browsers process them, and dive deeper into HTML later on.
- 2.If you haven't already, create a
fundamentalsfolder in a local folder, e.g.
- 3.Move the downloaded .zip file to the
- 4.Unzip the file - it should create a new
fundamentals-starter-codefolder. The starter code files are in this folder.
- 5.Open the
index.htmlfile in Chrome. Double click it if Chrome is your default browser. Or, you can right click to open in Chrome.
- 1.Change the text of the button on line
72. Again save and refresh the page in Chrome, and notice how the button text changes.
- 2.Change the word
62to something else. Save the file and refresh the opened
index.htmlfile in Chrome. Notice how the text changes.
- 3.Open the
fundamentalsfolder in VS Code. We can open the whole folder instead of a specific file, which will allow us to open multiple files within that folder easily. In the left sidebar of VS Code, select the file
fundamentals-starter-code/index.htmlto open it. See video above for an example.