Skip to content

Instantly share code, notes, and snippets.

@kristynrb

kristynrb/w01d04_morning_exercise.md

Last active May 18, 2016 19:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kristynrb/2126d63ec811f20aa7987616c9a9a236 to your computer and use it in GitHub Desktop.
Save kristynrb/2126d63ec811f20aa7987616c9a9a236 to your computer and use it in GitHub Desktop.
Download ZIP
w01d04 Morning Exercise
Raw
w01d04_morning_exercise.md

Morning Exercise

w01d04

Chrome Developer Tools

  1. Navagate to www.dropbox.com
  2. Open the Chrome developer tools by doing the following commands on your keyboard: Mac: command + option + j Windows: control + shift + j
  3. In the Chrome developer tool window, click on the tab that says Elements. Doing this will show you the code to the different elements on the page. Take a minute to look through these. What do you think all of this information is that you are seeing in the Elements tab?

RESPOND IN SLACK

Take a minute to post a short response in #wdir-panthalassa Slack to say what you think this code is, what you could do with it, and / or why you think it would be useful.

  1. Looking at www.dropbox.com, take a screenshot of what you see. To do this, use the following commands on your keyboard: Mac: command + shift + 4 Windows: Windows logo key + PrtScn Note for all: This should save the screenshot to your desktop.

We're going to look at this page about Chrome Developer Tools.

Inspecting the DOM and styles

The Elements panel lets you see everything in one DOM tree and allows inspection and on-the-fly editing of DOM elements. You will often visit the Elements tabs when you need to identify the HTML snippet for some aspect of the page. For example, you may be curious if an image has an HTML id attribute and what the value is.

### Pair & Practice *10 minutes*

  1. Use the Elements panel and try modifying some of the content or styling on the page.

  2. Discuss with your partner what you are modifying.

  3. Take a screenshot of your screen and share it with your partner in a Direct Message on Slack.

  4. Make note of one thing that you changed on your page and note one different thing that your partner changed on their page. You will share this out with the class later.

  5. Open the Network tab in the Chrome developer tools and refresh the browser. What happend to the browser? What do you think is going on in the Network panel? Discuss with your partner - remember - there are no bad questions! You are all beginners, so you aren't expected to know what is going on. Talk things through, postulate, ask questions.

### Come Together & Show Off Your Knowledge 1. Two volunteers to show their original and then their modified browser. What did you do to modify it? 2. Once you hit refresh in the browser, what happend? 3. Did anyone discover anything else in the Chrome Developer Tools that they want to share?
### Independent Work _Note:_ While this is independent work, you are always welcome to ask questions in the `wdir-panthalassa` channel (once you've attempted to tackle it on your own, first) and you can also send a Direct Message to another classmate. If you learn something new while stumbling along in these exercises, feel free to share it out in the Slack channel!
  1. Open up your Cloud9 account.
  2. In Cloud9, use your bash commands to create a file called index.html inside the unit1/w01d04/morning-exercise folder.
  3. Once inside your workspace, use your bash commands to create a file called index.html
  4. Open your index.html and setup your document to include the following:
  • <html> tags
  • <head> tags
  • <body> tags
  • Inside the body, add at least two heading tags (<h1> to <h6>) tags
  • Inside the body, add at least two paragraph tags <p>
  1. What's your favorite food dish? Write some information about your favorite food dish inside the appropriate tags. Save your file.
  2. Click Preview and then Live Preview File to see what you've done in your index.html
  3. Inside the Preview window, click the up-arrow that is next to the word Browser. This should open your index.html file into a new browser window. 6.Take a screen shot of your site. Rename this file to original_shot and add it to the unit1/w01d04/morning-exercise folder.
  4. Use your Chrome Dev tools to look at the code. NOTE: Because we are using Cloud9 to run our code, Cloud9 adds ids to our html elements (example ). If we were running this through our local environment, we would only see the code that we wrote and nothing additional. This will all make more sense as the course progresses!
  5. Select one of your headings in DevTools and change the words.
  6. Select one of the paragraphs in DevTools and change the padding.
  7. Select one of the other headings in DevTools and increase the size of the font.
  8. Select one of your headings in DevTools and make one other change of your choosing.
  9. Take a screen shot of your site. Rename it as modified_shot and add it to the unit1/w01d04/morning-exercise
  10. Add your three new files, commit them (add an appropriate message), and push it to your repo.

Have extra time? Watch this video. Modify your site with some of the new tips that you just learned from the video! Take a screenshot and name it extra_mods_shot, add, commit, and push it to your repo.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment