Learn how to use Dev Tools!
- Watch this video on Chrome Dev Tools
- Fork this repository and clone it to your
critical-web-designfolder on your machine.
- Use HTML, CSS, and JS to code your design inside
index.html - Add appropriate structural HTML tags (doctype, html, head, body, etc.)
- Style your page with CSS using a
styletag in thehead - Using an ordered list, write step by step instructions for viewing the source code of a web page in your favorite browser. Include the name of the browser.
- Using an unordered list, write three other things you can do with the Dev Tools.
- Invent and add a new unique metaphor for this action (e.g. “Looking under the hood”). Explain:
- Find a website with interesting content in the console. Add a screenshot and link to the page.
- Add your own secret message for curious users to the console using the
scripttag. Experiment with differentconsolemethods - Add an image of your favorite animal somewhere on the page.
- Save and refresh your work in the browser often to see your changes.
- Commit changes regularly.
- Confirm valid HTML and CSS (?)
- When finished, push, publish, and post your project
Grading
| Points | Description |
|---|---|
| 4 | Correct information provided |
| 4 | Instructions followed |
| 4 | Degree to which the metaphor was thoughtful and relevant |
| 4 | Project is online, accessible, and linked from Moodle |
| 4 | Valid HTML and CSS |
| 5% | Bonus! Add a table with your weekly dream schedule (what you will do when the robots take over) |
| 20 | Total possible |
via console.love
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent