Skip to content

Latest commit

 

History

History
 
 

1_Chrome_Dev_Tools

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
dev_tools_quiz.md
dev_tools_quiz.md
 
 
my_reflection.md
my_reflection.md
 
 
readme.md
readme.md
 
 

readme.md

Week 2 Home

U1.W2: Chrome Dev Tools

Learning Objectives

  • Navigate and edit a web page's HTML and CSS elements using the inspector
  • Explain what the DOM is and how it relates to CSS and HTML
  • Identify images and other page elements that cause slow performance
  • Use Chrome Devtools to manipulate elements on the DOM

Background

Before starting this challenge, you will want to do a bit of research on the DOM. Read the following Resources before beginning.

In this challenge, you'll be diving into Chrome DevTools. Inside the DevTools inspector window is an inner world of data that is communicated between the browser and server. These tools are invaluable for you as a developer and getting comfortable with them will help optimize your HTML and CSS editing, javascript debugging, and site's performance.

We'll be focusing primarily on real-time HTML and CSS editing in this challenge and dip our toes into using the tools to identify page elements that slow down performance and page loading.

Directions

  1. Take Code School's DevTools course

Focus on chapters 1,2, and 5. Follow along with the video, and take the quizzes at the end of each chapter (quiz 5.2 deals with JavaScript, so it is not mandatory). You'll want to create an account with code school so you can accumulate badges and credits for the chapters you complete. There are also questions in the quiz that will explore the concepts and tools introduced in those chapters.

Take the time to skim the other chapters. You'll be diving into JavaScript next week, and although the material covering JS (chapters 3 and 4) is a bit advanced, it provides great exposure to JavaScript in the context of the the DevTools console.

  1. Complete the Dev Tools Quiz. Take a screenshot of your code school points (They appear on the right of your Code School profile page), upload it to a public image sharing site (like min.us), and include the image in your gist.

  2. Experiment

Play with changing the CSS of your github.io website using Chrome Web Tools.

Then, visit any blog on wordpress.com or create your own. Use the Chrome Web Tools to take a peek into the site. How does it differ from your github.io site's html and css?

  1. Reflect Go to your Reflection file to write your reflection - include answers to the questions in the file in addition to the reflection guidelines.

###Resources