Independent Practice (25 mins)

Take a look at this screenshot:

Using the Chrome dev tools, try to recreate this screenshot from Google.com.

This is meant to be exploratory! So you'll have to dig through some HTML elements and their CSS to make this work. For example, you'll have to modify the float property of the image in the search bar - something we haven't touched on yet.

The General Assembly large logo can be sourced from the General Assembly homepage and the smaller logo, in the search bar, will have to be found through Google.
Remember, don't refresh the page, otherwise you'll lose all your work modifying the DOM.

Conclusion (5 mins)

There are a lot more things that Chrome can do for you. However, we don't have time to look at them right now. Spend some time playing around with the dev tools during your assignment tonight. You will become very familiar with what they can do for you over the course of WDI. Check out more shortcuts here.

• What are the shortcuts to open the dev tools?
• Why do you lose all your work, if you modify the DOM, after you refresh the page?