In this lab we're going to explore the protocols of the web by creating a simple website file browser. You'll use some new HTML skills from class and a CSS framework called Pico to create a basic file table with links to various web-accessible file types. You'll also spend some time exploring the behavior of these files within your browser of choice, and reflect on them in your final lab submission.
Requirements Create a new Github repository called file-browser.
Create a valid HTML file called index.html in the root of your repository. This will serve as your main landing page for the file browser site.
Add pico.css to the of your index.html file and make sure it's being applied properly to your HTML.
Create 5 new files inside the root of your repository; one of each type below. Be aware that you may need to create these files in separate programs and then upload them (PDF, for example). Find the simplest example of each file type and add the content to the file (for example, look for "hello world" versions of these files). PNG/JPG/GIF (Pick one) HTML (in addition to your index.html file, .html) JSON (JavaScript Object Notation; .json) Plaintext (.txt or .md) PDF (.pdf)
Create an HTML
with four columns: File icon File name File type File sizeAdd details about each of your uploaded files to the table, use FontAwesome for the file icon column (you can find icons to represent the different filetypes, e.g. PDF: https://fontawesome.com/icons/file-pdf?f=classic&s=solid).
The file link column should include the name of the file as a hyperlink to the actual file on the server.
Check that each of your files works correctly (and doesn't throw a 404) Under the table, create an unordered list and write three observations you noticed about how your browser handled those files.
Add your files to Git, Commit and push them to Github, and deploy to Netlify.
Test your final site on Netlify.
Submit your Github and Netlify URLs to D2L.