Make the News

Using developer tools in Chrome (or another browser)

  1. Go to BBC news (or any website, but try BBC news first) in Google Chrome

  2. Right click (on a white area) > Inspect
    Right click on the BBC news website. Inspect line highlighted

  3. If the toolbar that pops up is at the side or the top, we find it easier to use at the bottom of the screen. Click the three dots and choose Dock side: . You can also change the size of this toolbar by hoovering over the edge until a double ended arrow shows up, then clicking and dragging the toolbar to start/stop where you want it to.
    Right click on the BBC news website. Inspect line highlighted

  4. Make sure Elements in selected from the top of the toolbar (you should be able to see lots of code in the main part)
    Right click on the BBC news website. Inspect line highlighted

  5. Click on the arrow icon (top left of the toolbar)
    Right click on the BBC news website. Inspect line highlighted

  6. Now when you move the your mouse over the webpage, sections should go blue. Click on a heading
    Right click on the BBC news website. Inspect line highlighted

  7. Now in the toolbar, some of the code should be highlighted in blue! Look for the line that NEXT begins with <h3 ...
    Right click on the BBC news website. Inspect line highlighted

  8. Notice the black text in this line is the same as the heading. Double-click on this black text
    Right click on the BBC news website. Inspect line highlighted

  9. Now just this black text should be highlighted in blue. Press delete or backspace to get rid of this text. Write whatver you want to (if you are stuck, we suggest Taught by Humans is awesome!, hehe). When you are finished press the enter key
    Right click on the BBC news website. Inspect line highlighted

  10. Looking at the panel on the right-hand side of the toolbar, you might notice this looks different from the code in the main panel and that the actual panel moves separately. Scroll this panel down until you see a line like .nw-o-split-text. In between the curly brackets { } there will be a colour (probably black, beginning with a #) double click on this. Repeat what you did for the heading (delete, type, enter) with a colour (red, blue, green, pink, purple all work)
    Right click on the BBC news website. Inspect line highlighted