Veri + - a simple HTML5 web page

My first touch with HTML5 and CSS3 was when I builded my health tracking web page, Veri+ (Blood+). Its basic function was to add your own blood pressure and sugar values through a basic HTML5 form. The page also gives the user the reference values for a good blood pressure and sugar values.

The project was started with designing what your going to do, what are the requirements and how you should start your project. Firstly we decided the subject for the website and wrote a short presentation of the subject then we used NinjaMock to create a wireframe for the website. Working with this project was really free and most of the work was done outside of class.

The only requirements for the project was that the website should contain of basic HTML5 code as well as CSS3. Also, we needed to create some kind of a form and array with different elements and practice with positioning.

The home page consists of welcoming text and explanation of the purpose of the website. In every page there's links to the other pages (kind of a navbar).

Veri+ (Blood+) front page

In this second page the user can add their personal information and the blood pressure and blood sugar results. Submitting the form the user is redirected to a "thank you"-page, but the form is not handled in any way. The assignment was to practice linking pages, formatting forms and using different elements.

Form for user's values

The pages below are the reference value pages where the user can check how their own blood pressure or blood sugar values fits to the reference values. There's also a little tip, concerning blood sugar or blood pressure, for the users. :)

Reference values of blood pressure

Reference values of blood sugar

#web #HTML5 #CSS3 #Form #Health

Featured Posts
Päivityksiä tulee pian
Pysy kanavalla...
Recent Posts
Archive
Search By Tags
Tunnisteita ei vielä ole.
Follow Us
  • Facebook Basic Square
  • Twitter Basic Square
  • Google+ Basic Square