Lesson 5

Designing our User Interface

Getting creative with CSS

Now we've got everything set up, we can start to design our user interface. Cast your mind back to our wireframe:

We want to centre everything and we might want a nice punchy background colour. We are designing a mobile app, so we will need to set a phone-sized maximum width. Let's see what this looks like in CSS:

The great thing about CSS is you can kind of read what it's doing. For the sake of absolute clarity, let's have a look at what this block of CSS would look like with comments after each line:

Looking at our wireframe, we want to only display one question at a time. Using JavaScript later on, we can show or hide different questions based on where they are in the "user journey" through our app. So for now, let's hide all the questions, and then just display the first one:

We start by targeting all paragraphs and setting their display property to "none". Then, we targeted just the first question and set its display property to "block", which is CSS's way of saying "show".

nth-of-type(n) is what's called a pseudo-selector; it allows you to get one of a specified group of elements.

Please note, the authors had to Google "targeting first paragraph with CSS" as it's not something we'd done before! As a coder, you're not expected to know all the answers. Search engines are always right there – it doesn't make sense trying to remember all the commands, and we're all learning all the time!

You should now have just one question showing. Let's style up the answer boxes by targeting the spans inside the paragraphs and making them big and bold. Let's also make the paragraphs a bit bigger and make them bold as well. We've already done this for the heading, so this bit should be a doddle :)

Padding is the space around the inside of an element, between the content and any border. Margin is the space around the outside. We've used "p span" as we only want to target spans that are inside paragraphs.

Wouldn't it be nice if the buttons changed when you hovered over them? We can do this by defining an extra list of styles for when it's hovered over (with ":hover" being another pseudo-selector!)

Finally, let's style up our score box. We want it to appear at the bottom of the page and stick there:

We've given it the same background colour as the rest of the page. This means that if your questions are very long, they will scroll behind the score. The instruction for padding is the equivalent of writing:

The answers to the question have no room to scroll and the score box is sitting over them. Let's add some padding to the bottom of the body; this means the page can scroll comfortably:

Be as creative as you like

Once you understand the principle of CSS you can add as many rules for each bit of the page as you like. What's great too is that they're all interchangeable, so if you know how to change the font-size of a heading, you can change the font-size of a paragraph (or anything else you like!)

Extra Step : Fonts

If you're feeling brave, why not add a custom font to your web app. Google have a great tool called "Google Fonts" which allows you to import a font directly into your page. Have a look at it here.

Extra step: Colours in CSS

There are a set number of "word colours" that have already been defined by developers, but if you want to truly customise your design you'll need to pick your own.

To do this, you can go to colorpicker.com, and you'll see that each colour has an R, G and B value (standing for red, green, blue). Just select a colour you like, and then copy the RGB colours to your CSS. For example, you might change your heading colour to a lovely shade of pink:

If you'd like to have a bit of transparency in your colour, you can also give it an "alpha" value between 0 and 1, with 0 being completely transparent and 1 being completely opaque.

Go to the next lesson

index.html

style.css

the web page

New Window
Next Lesson