Make Your Own Million-Pound App: A Tutorial

Labber Rob Cochran developed this tutorial with the help of Alex Norton, Alli Shultes and Rachel Wilson for the BBC Digital Taster Event in Middlesbrough, where News Labs ran a workshop on building web applications for students ages 13-19.

This is an introduction to building a web application using HTML, CSS and JavaScript. We'll be building an app that pulls news articles from a news API and presents them to readers with user-friendly design techniques.

You will learn how to:

  • Create HTML using a JavaScript library called React.
  • Customise CSS stylesheets to improve the look of an app
  • Manipulate stylesheets using Chrome's "developer tools" console as a previewing environment
  • Manipulate JavaScript to make an app more dynamic

For a more in-depth overview of the building blocks of a web application, see our introductory blog post. There are quite a lot of building blocks, so you might want to read this later! You should be able to start this tutorial straight away, without needing to understand absolutely everything.

Getting Started

Visit this tutorial's codepen in Chrome. Codepen is a special website in that it allows you to simultaneously write code and see the results of your code displayed on the same page. In this case, the results of your code will be a web page, just the same as it would look if you found it in a web browser like Chrome or Firefox.

To get you started we've built a simple "news feed" application that requests the latest 10 news stories from a free news service, newsapi.org, and then dispays the results as a web page.

We'll be asking you to modify pieces of the code to change the app's colour scheme, add images and introductory text to the newsfeed and — as a bonus challenge — you can change the news service to something more to your liking.

The top-left panel of the "pen" contains HTML, the top-middle panel contains a CSS stylesheet and the top-right panel contains the JavaScript. The panel at the bottom contains the application as your user would see it.

1. HTML

What is HTML for?

Find the text 'News App' inside the JS window. Highlight the title and change it to "My Million-Pound News App".

Note: Notice that the title sits inside some code with '<' and '>' around it. These are called 'tags' and this is HTML. These tags tell the web browser how to display the text inside the tags by using a style, which we will come to later.

The <h1> tag is a 'Heading 1' tag. This means that it's the most important heading on the page. After <h1> you can create sub-headings using <h2> for the next most-important heading and so on, all the way up to <h6>.

Why is it so important to only have one <h1> on a web page? Because it helps Search Engine Optimization, or SEO. When sites like Google index search results, they look for clues to figure out which websites are most relevant. <h1> tags tell Google what a story or a website is about, and so it's important to use these sparingly.

You'll notice some other tags, like <p> (for 'paragraph') and <img> (for 'image'). For more information on tags, refer to the HTML guide linked to in the Million-Pound App blog post.

2.Cascading Style Sheets (CSS)

Using the Chrome Developer Tools to preview changes

Stylesheets are used to apply a style — such as colour, or underlining, or font — to the text and images on your web page.

But did you know that you can view the HTML and styles of any web page on the internet?

Right-click on the headline of the first story in your webpage preview panel and select "Inspect". This will open the "Developer Tools" window.

You can think of the developer tools as being the x-ray specs of the internet! You can turn them on and see for yourself the code behind any web page..

Look at the newly opened developer tools window. The HTML element that you selected to ""inspect" is highlighted in the left pane. This pane shows you all of this page's HTML. And the styles from the CSS that are associated with this element are displayed in the right pane.

Sometimes the developer tools window opens on the right hand side of your screen which can make your code very squashed. You can move the window to the bottom of your page by clicking on the three stacked dots, next to the close button, in the top right of the developer tools window. From the menu that opens up choose the middle option next to "Dock side".

You'll see that the title has some styles associated with it already:

  article h2 {
    text-decoration: underline;
  }

This means that the title is an <h2> tag, and that it's inside an <article> tag.

You can use this window to experiment and switch on/off styles to see the effect it would have. The effect is only temporary. If you want to save the change you will have to change the CSS code in your code pen.

Now, in the "Style" pane of the developer tools window, hover over the line text-decoration: underline. You will see a blue tick appear. If you click it, it will turn off this style.

Feel free to experiment and "inspect" other elements on the page. See if you can find the styles that you see in the developer tools window in the CSS stylesheet (the middle pane of your code pen).

Colo(u)rs

Just as you did before, "inspect" the title of an article to bring up its style. Click to the right of the word underline to create a new line, and you should see a new line with a cursor. Type color: and press enter. (Note: CSS was invented in America — don't forget to use the U.S. spelling!).

Now you can choose from a range of pre-defined colour names like 'red' or 'blue'. Do that now and see the color the article titles change.

But what if we want a different colour than one in the list? It's not possible to write down a name for all the colours in the world! We can make the colour be anything we want by using what is called a hex value. Choose a more specific colour by by opening this color picker: Colour Picker and Hex Value Calculator.

In order to use the hex value we need to warn the computer to expect a colour code rather than the name of a colour. We do that by starting the code with a "#".

When you have chosen your colour, copy the 6-character colour code and paste it after color:. You should end up with something like color: #02A360. Press enter and watch the titles change colour!

Updating the app's design

Even though those colour changes appear on your screen, you haven't actually changed the application's code. You've just previewed the new colours using the developer tools. We'll have to update the code to permanently add your new styles to the app.

In the CSS window, scroll until you find:

article {
    border-bottom: 1px solid #666;
    
    h2 {
      text-decoration: underline;
    }
  }

Start a new line after text-decoration: underline. Add your colour changes by retyping color: .... This will apply your change to all of the <h2> elements on the page.

Changing the background colour of your app

Stay in the CSS window and scroll up to the top. You will see the body styles. Set the page to have a dark background by adding background: #333333. This will set the background to a dark grey.

The text has disappeared because we've set it to the same colour as the app's background.

Now change the color value to be#ffffff, which will set the text to white.

Note: In CSS, `background` or `background-color` changes an element's background, and `color` changes the colour of the text within an element. CSS works by applying styles to everything on the page beneath and including the targeted element, unless you tell it to do otherwise. So, in this case, we've changed the colour of all of the text on the page since all of the text falls inside the <body> tag.

3.Touching JavaScript and React

Add an explanation to the top of the app

Your application doesn't explain to your users what it does, so add a small paragraph to tell users what they can expect to see.

Remember back to the first change you made? You changed what's called a "constant" value that had been defined at the top of the page called "Title." A constant is a value that you can reuse by using its name, and you can trust that it never changes. The "Title" constant is used at the bottom of the page to display (also called "render") on your application's web page.

To see where the constant "Title" is used, look for it at around line 42 inside the JS window. To add an introduction to the paragraph start a new line after the line <Title /> and type the line <Intro />. You should now see:

  <Title />
  <Intro />
  <ArticlesList articles={this.state.articles} />

The preview of the app in the bottom frame will disappear. This is because it's trying to render something called 'Intro' which you've not defined yet!

The Console

The console is very useful to help you diagnose problems with your application. This is where errors are printed. And you can even print your own messages here from code - we'll come to that later.

The console is in the developer tools window (if you've closed the developer tools you can open it again by clicking anywhere in your preview area and right clicking, and select "Inspect" again), on the top row of the developer tools window you'll see next to 'Elements', a tab called 'Console', click on it.

Fixing the Error

Scroll up to line 1 of the JS window and see where the "constant" Title is defined. You don't need to understand everything here, but basically what this code is saying is that we're defining a const, called Title and to that constant's name we're assigning (=) some stuff to it. In this case that "stuff" is some HTML. This is very similar to how you'll define a constant called Intro, but with different stuff in it.

Copy lines 1-3 and paste them on line 5. Change the name from Title to Intro, and change the second line of your new constant to <p>Read the latest 10 news stories from all around the web</p>. You should see two constants defined like this:

const Title = () => (
  <h1>My Million-Pound News App</h1>
);

const Intro = () => (
  <p>Read the latest 10 news stories from all around the web</p>
);

Once you've added the definition of the constant the error will be fixed and you will see your introduction appear below the title in the preview area.

You should see your introduction appear below the title in the bottom frame.

Note: the <p> tag means 'paragraph'. It's typically used for any sentences you want to display. To make the size of your introductory text bigger, swap out <p> for <h2> or <h3>. Don't forget to change the closing tag (</p>) at the end of the line!

Add images to news articles

Before modifying any more code, we'll dig into what information we know about articles by using the console.

Remember that we're fetching all our data from a news service? Well, that data response is turned into objects that our code can use when we make a request.

Scroll down in the JS pane and you'll see a function called componentDidMount. This is run when the app is loaded. This function uses a 'fetch' to get the news stories from the news API.

Find the line this.setState(...) (around line 35), and start a new line before it. Enter the following: console.log(response). This line tells the computer to log (or print) the value of the constant called response to the console.

You should see something appear in the console that looks like:

Object {status: "ok", source: "the-next-web", sortBy: "latest", articles: Array[10]}

Note: Sometimes it just says Object (depending on the version of your computer).

Click on the triangle to the left of the word Object and further open up the tree up by clicking on the triangles next to Object and then articles and then 0. You should see that this object contains the following attributes: 'author, description, publishedAt, title, url, urlToImage'. This is the data for the first article that was returned from the API. It should have the same title as the first story in your application's preview area.

You can see here that there are some attributes in the article object that we're not yet displaying on the page. What we want to do is add the images in, so find the line beginning const ArticlesListItem = ...

.

Below the line <h2>{article.title}</h2> you can add new code to tajke the attribute "urlToImage" and then display it as an image. Copy and paste this:

    <figure>
      <img src={article.urlToImage} />
    <figure>
See if you can guess what this code is saying. Hint: "img" is short for "image", and "src" is short for "source". If you want, you can Google for "html figure" and see what else you can find out.

Now you should see images with each article!

4.Extra for experts

Let's take a look at the data that is returned by the API.

Find the line in code that fetches the data from the news API. If you've gotent this far, you should be able to work out by yourself!

Open a new tab in your browser and copy and paste the link. You should see a LOT of data on your screen. But you should be able to make out words your recognise, such as the titles and imageUrls. What's happening is that the raw data that you see is being converted into objects by your application code.

The data is returned in a format called JSON. This is a agreed, standard, predictable format that computers can read.There are other standard data formats such as XML, but we'll let you read about those another time. JSON is easier to read for humans when you put it through a formatter like this one. Copy and paste the data into the formatter and click the "Process" button. Phew, that's easier to read.

More APIs

An API is way for organisations or individuals to share their raw data for other people and applications to use however they like.

We're using newsapi.org, but there are thousands of APIs out there and open to the public. There are ...

Note: APIS often require you to ask the API owner for a "API key". Think of it a bit like a combined username and password that the owners will give to you in order to use it.

Try another one of the APIs here which do not require you to use a key.

How might you change the code to read from a different API and output different results?

Even more APIs

Here are some lists of other interesting public APIs:

What would happen if we could combine them together? Could we ask questions like "Do more people vote when it's a sunny day?", or "Are there more crimes in areas with bad air quality?", or "Are more goals scored on weeks when Justin Beiber is number one?".

If you were a journalist you could write your own story about the answers and publish it on your Million Pound News App!

5. More ideas for experts

Now you've got some idea of what the technologies allow, you might be interested in making the application more interactive. Instead of just displaying data, we could accept some user input.

Have a look at the API documentation. Notice that it is possible to ask the API to return articles sorted in different ways. Perhaps you could add some buttons so the user can choose to display either the top stories on the homepage, the newest stories or the most popular across the web?

We will not tell you how to do this. With the help of the newsapi documentation, and the information available via the Million-Pound App blog post, it is possible to complete this challenge. Hint: there is an example of a button in the React tutorial linked from the blog post.

Note: The newsapi API key we have provided in the demo is registered to the BBC. If you take this idea further, please register on newsapi.org to get your own free key.

Send us the url to your codepen via Twitter @BBC_News_Labs or email us at newslabs@bbc.co.uk, and we'll send you some feedback!