Prototyping 1: Constructing and Styling | MMB Project Log 5

Web DevelopmentProject Log, Website

Constructing Prototype with HTML

1. Preparation

Add elements/links to head

  1. important meta tags: charset, viewport, description, keywords and title
  2. link to google fonts
  3. link to jQuery
  4. link to CSS file
  5. link to JavaScript file

2. Construct bone structure inside body tag.

First of all, I constructed bone structure inside body tag, as according to sketches and visual designs.

Click to enlarge


Div container is placed immediately after body tag, which holds header, main and footer tags. This tag is simply used to hold all the tags and to maintain their position.


Header tag often holds a website name, a logo, links to SNS and a site navigation. In this project, header hosts only a navigation and a tab bar.


Main holds 6 sections, home, about, class, testimo and contact. Main tag is used to clear the site structure and is not used to maintain style with CSS. Therefore, the website works perfectly without having main tag.


Each section tag hold h1/h2/h3 headings, video and/or text contents depend on the section.

  • home: h1 site title and background video
  • about and class: h2 heading, YouTube video and text contents
  • teacher and testimo: h2 heading, YouTube video, h3 heading to state a name of a person in the video and text contents
  • contact: contact form


It consists of copyright and a link to Facebook page.

3. Div tags for styling purpose


maintains background video


gives padding to section contents


maintain YouTube videos


maintain text contents

Click to enlarge

4. Div tags for functions


is used to create a hamburger navigation


is used to create a scroll up button

Styling Prototype with CSS

CSS outlines



  • Typo General
  • Typo Portrait
  • Typo Landscape


  • Nav General
  • Nav Portrait
  • Nav Landscape


  • Layout General
  • Layout Portrait
  • Layout Landscape

Input area

Video elements

0. General, Portrait and Landscape

General settings hold shareable settings for any occasions, for example;

  • h1: colour white
  • h2: uppercase

Above settings will not affected by devices, screen size or view port. These setting are shareable, so they can be set in general setting.

  • h1: position

Above setting will be different between portrait and landscape; therefore, they are set in media query.

1. Resetting

Resetting some elements to normalize their behaviours.

Idea was inspired by Eric Meyer’s “Reset CSS” and Nicolas Gallagher’s “Normalize.css"

Reset CSS


2. Setting fonts

Click to enlarge

Font family

Setting font family according to mock-up designs, which were agreed by the client.

  • Poiret One: headings and submit button
  • Lato Bold: Strong
  • Lato Italic: emphasis
  • Lato Regular: the rest

3. Viewport Height and Viewport Width

I used viewport height (vh) and viewport width (vw) for many cases such as font size, layout, paddings. This is not always the case, but I use vh when I decide margin top/bottom, but vw is it is left/right.

4. Layout and positions


Header position is:

  • fixed for mobiles: it stays on top page
  • absolute for PCs: is not stay top page


Min height is set to 100vh; it will give minimum 100% height and stretches if it needs more space.


Footer stays the end of the page.

5. Style embedded YouTube video

Ref: Pure CSS solution for embed videos with an aspect ratio of 16:9

Result Screenshots

Screenshot for current state of prototype.

Some videos are missing since they weren’t ready.

Footer section isn’t styled (I forgotten).

Prototype 1 for Mobile

proto1 mobile size
Click to see a whole page

Prototype 1 for PC

Proto 1 for PC
Click to see a whole page

Posted by Aiko Ohakoda