Lesson #5: Web Tools & Advanced Styling

Web Tools & Advanced Styling

As well as all the interesting styling/formatting tools available within BUzz, we also suggest using external sites to assist in the creation of exciting and engaging journalism.


Google Maps Engine – Create customised maps & import data.

Try the Google Maps Exercise

StoryMap JS – Maps that tell stories.

Carto DB – Turn data sets into maps on this easy to use website

Mapbox – Design and publish custom maps

Data Visualisation

Google fusion Tables – Simple data visualisation from Google drive

Flourish – Powerful, beautiful, easy data visualisation..

Piktochart – Easy-to-Use Infographic Maker

Infogr.am – Create interactive data-visualisations & infographics

Try the Infogram exercise

Interactive Storytelling

Thinglink – Help tell your story by creating interactive images and videos for web & social.

Create an interactive image in Thinglink using this image and these links.

Timeline JS – Beautifully crafted timelines generated through a Google Spreadsheet.

Creating a Timeline JS example from this information and this article

Slices – Multimedia stories for the web.

Polls & Surveys

Poll Daddy – Embeddable surveys & polls

Survey Monkey – Create and publish online surveys in minutes

Advanced Styling

Put columns to use in The Breaker to achieve more advanced styles and layouts for your articles

Basic HTML

Thanks to the evolution of the CMS, knowing HTML will not be an essential skill when you make the transition from education to industry, however a basic understanding of the HTML language may prove useful in advancing your online journalism and making your articles look exactly as you’d like them to.

Codacademy logo

To learn HTML, CSS and other languages that can add to your journalistic skills and employability, we recommend using Codecademy – a website featuring online coding tutorials with easy-to-follow instructions, immediate feedback, and a tested curriculum.

Advanced Styling Exercise

Advanced Styling Exercise #1

Create a post on The Breaker ensuring the following styling is added:

  1. Add a Headline
  2. Add a Lead
  3. Find and add a Featured Image
  4. Format text (bold, italic, blockquotes, heading etc)
  5. Style the Q&A to emphasise the questions & responses from different interviewees.
  6. Add ‘Hyperlinks’, assign to ‘Category’ and ‘Tag’ relevant information
  7. Put the ‘Freegan Facts’ section into a Content Box
  8. Divide the Freegan profiles in the ‘Why Freeganism’ section into 3 columns, making sure each profile has the relevant picture at the top (from the images folder)
  9. Insert 2 images of your choice into 2 columns
  10. Separate the Audio, Video & Chart into 3 separate tabs
Leave a Reply