1. Web Design
  2. Web Apps

Building an API-Driven Web App With HTML and CSS

This post is part of a series called Building a Mini, API-Driven Web App.
Designing an API-Driven Web App in Sketch
Connecting an API-Driven Web App with Javascript
Final product image
What You'll Be Creating

Having designed some visual mocks to help guide us in building our little app for the browser, let’s get to the exciting part and start building!

File Structure

Let’s setup our file structure for the project. It’ll look something like this (with each respective asset living in its corresponding folder):

We now have a folder for each of our assets, as well as the .sketch file we created earlier which holds our page mocks.

Initial HTML

Based on our file structure, let’s setup our basic HTML document with links to our assets (which we will create in a moment).

Here’s what we have so far:

  • Basic HTML page structure with header, main content, and footer areas.
  • Link to our custom CSS (which we will create)
  • Link to Pacifico on Google Fonts (as mentioned earlier, this is the font we will use to display our little app’s name)
  • Links to our custom javascript (which we will create) as well as the jQuery library on Google’s Hosted Libraries CDN

Initial CSS

Because this little app is relatively small and simple, I’m going to favor using vanilla CSS in this project (no preprocessor), but you can obviously write your CSS in whatever form you like.

Let’s start by setting up some basic page styles and making comment references to the colors we will be using. In assets/css/styles.css let’s do the following:

Here we’ve setup a few basic page styles governing images, links, and the box model we’ll be using. As you may have noticed, we are using the body tag as a wrapper by setting its max-width. This will keep all of our content centered in the middle of the page without extending beyond a certain width.

Notice we also defined the color values we will be using in the top comments. Since we’re not using a preprocessor that allows us to set variables, these will come in handy as we continue writing our styles.

App Header

Let’s create the header of our app. Remember, in Sketch we designed this:

Screenshot of the header component in Sketch

So, let’s create the HTML to match our mock. We will put this content in the header element we created earlier.

Now we have our app’s name and description at the top of the page. But the styles are pretty basic.

Screenshot of HTML header

Let’s write some styles for our page header that brings it more in line with our mock:

Here’s a brief overview of what we did:

  • Color and spacing for the header container
  • App name header h1 is set to use Pacicifo from Google Fonts (remember, we set a link to this resource in our header)
  • App description header p is slightly offset to avoid running into the descender of the “G” on the app name.

Now we have our header looking more like the design:

Screenshot of HTML header after adding styles

However, remember that our app is going to be responsive! So if we check these styles on a narrower width using Chrome’s dev tools, you’ll notice the text wrapping for the description is a little funky because of our text-indent.

Screenshot of header text wrapping

To alleviate this, at narrower widths, we’ll remove the text indentation and bump the description text down with a larger margin-top so wrapping looks more natural. Let’s write a media query to help us:

There, now we have a responsive header!

Screenshot of completed header

App Input

The next stage is to move on to the input and output areas of our mock. Remember they looked something like this:

Screenshot of the input component in Sketch

First, let’s add the input field to the main HTML element we created earlier:

Now we have a form with an input and a submit button. Good semantics thus far, but it’s not quite looking how we want it. We’ll need to add some styles.

Screenshot of app input without styles

Let’s add some styles to our form input and button elements.

Here we added some styles to our form input and button as well as some different states like :hover, :focus, and :disabled. This has given us an input styled just the way we designed it in our mock.

Screenshot of styled input

App Output

At this point we can create what we’ve been calling the “output” area. This is where we will dynamically render the icon returned by the iTunes API. However, on the initial page load, the user hasn’t yet requested anything. So we’re going to use our zero state design for now. Remember from our mocks, it looks like this:

Screenshot of the zero state in Sketch

We’ll continue to add to the main HTML element we’ve been working in:

Notice that we added the output HTML right after our input HTML. It consists of a wrapper, which acts as the big white box in our design, and the content, which is centered inside of that. We’ll use CSS to set the .content element to have a max-width of 512 pixels, as that’s the largest size at which we will display our icon. For now though, we have something that looks like this:

Screenshot of output without styles

Notice our icon placeholder is missing. If we go back to our Sketch document, we can easily output that asset as an SVG for use in the browser.

Screenshot of outputing icon placeholder in sketch

Now we should have the image showing up in the browser.

Screenshot of output without styles

Let’s add some styles to our output box.

Most of the CSS we added here has comments in the code to explain it. We added styles to our outside wrapper, then, because we didn’t do a full CSS reset on the page, we did a simple reset on HTML elements inside of our content area by applying .content *.

Lastly, we added some styling for bolded elements in our zero state. Now we should have something resembling our mock!

Screenshot of output with styles

Great Job!

Now that we have our HTML structure all setup, along with corresponding styles, we’re ready to jump in and handle the interactions of the page with JavaScript!

In the next (and final) tutorial of this series, we’ll figure out how to take user input, make an API request, and render the output in the browser. See you there!

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.