A day in the life of a Junior Web Designer

Your First Day

  • From: The Boss
  • To: YOU
  • Subject: We need you to sort this out

The Design

The Page

Send for Review

The page doesn't look at all right at the moment!

It doesn't seem to have any styling at all. Something is missing, but what?

What Bootstrap files do we need to link to, to pick up the Bootstrap styling?

Hmmm. That's not right.

Remember, we're trying to style the page.

Stylesheet Javascript React

Some of the logo thumbnails are too wide

They should each cover a quarter of the width of the page rather than half of the width of the page.

We need to change the column class, so it covers one quarter of the twelve column grid. Remember, the number in the column class shows how many columns it covers.

Hmmm. That's not right.

Remember, there are twelve columns. We want to cover a quarter of them, so what's one quarter of twelve?

col-md-12 col-md-4 col-md-3

This content is not centre aligned

The design shows that this content needs to be centred.

This content covers 10 out of the 12 columns and we need to add an 'offset class' to push it into the middle.

The formula for this was ([Number of columns in grid] - [Number of columns of thing we wish to centre])/2, so what's the right offset class?

Hmmm. That's not right.

There are 12 columns in the grid and we wish to centre 10, so the calculation is:

(12 - 10) ÷ 2 which is the same as 2 ÷ 2.

col-md-offset-0 col-md-offset-1 col-md-offset-2

There's a team member missing

In the design there are four team members, so we need to add another thumbnail component.

What is the definition of 'component'?

Hmmm. That's not right.

Individual components are included in Bootstrap to create the whole page.

A part or element of a larger whole A device or program enabling a user to communicate with a computer A hypertext document connected to the World Wide Web

Sorry

Your screen is too small to complete these tasks.

Please try again when you have access to a larger screen.

;