Skip to content

Remove any mention of Firebug and replace with browser devtools #345

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Mar 7, 2017
Merged

Remove any mention of Firebug and replace with browser devtools #345

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions html/lesson3/tutorial.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,11 +35,11 @@ In the previous two lessons, we spoke about **H**yper **T**ext **M**arkup **L**a

Inspectors are development tools that help you view, edit and debug CSS, HTML and JavaScript.

Chrome Devtools are already built into your Chrome browser, or Inspector if you are using Firefox. For advanced users, many other tools are available as browser plugins, including the Firefox add-on [Firebug](https://getfirebug.com/).
Developer Tools are already built into all modern browsers, whether you use [Chrome](https://developer.chrome.com/devtools), [Firefox](https://developer.mozilla.org/en-US/docs/Tools), [Edge](https://docs.microsoft.com/en-us/microsoft-edge/f12-devtools-guide), [Opera](http://www.opera.com/dragonfly/) or [Safari](https://developer.apple.com/library/content/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/GettingStarted/GettingStarted.html). For advanced users, many other tools are available as browser extensions, including the [Web Developer Toolbar](https://chrispederick.com/work/web-developer/) plugin.

![](assets/images/chrome-devtools.png)

> Ask your coach to show you how to edit the styling on our example page using firebug
> Ask your coach to show you how to edit the styling on our example page using developer tools

## Getting started

Expand Down Expand Up @@ -157,7 +157,7 @@ and then the relevant CSS

`inline-block` is another display attribute. You must use `inline-block` rather than `inline` to make the element appear inline because the `div` with the class `title` contains a block element, `<h1>`, that takes over and expands across the end of the line.

> Using firebug, change `inline-block` to `inline` and notice how they render
> Using devtools, change `inline-block` to `inline` and notice how they render

Adjust the alignment of the `.title`

Expand Down