In the course of several weeks to come, I will be documenting my process in building a Weight Tracker app. So this post is one of many parts, the number of which I don't know yet. This post is a part of a task given as a mentee under a mentorship program organized by @bytenaija.

In as much as I still consider myself a newbie in coding, I am not entirely green as I could find my way around a few things. So the task is to build Weight Tracker app that allows users to input their weight and also allow users to edit or delete figures inputted. The app should also be able to calculate Body Mass Index (BMI), and also display results in charts amongst other things. All of these plus more are features that will be added in the course of building the app. But the first task is to start with buidling a front end with HTML and CSS. Documented below is the process I went through in trying to carry out this task.

1. Research

Considering that I had no prior knowledge of what a weight tracker app should look like as I haven't used one before, I had to research to find some case studies. My research shows that most weight tracker apps are mobile apps. There are not so many that are web apps. So I had to download a few mobile apps to have a feel of what a weight tracker should look like. This is what I find in summary;

• Users should be able to create a profile or register an account

• Users should be able to input current weight, set a weight goal to achieve, input height (required for BMI calculations), input date the weight was recorded, and add a note (optional).

• App should be able to calculate BMI, display results in charts, show history in weeks, months or years, shows progress of weight loss or weight gain and what difference is left to make up.

2. Design

Being new to design as it relates to web development, I decided to try to design the web app on figma (at least the landing page) before starting to code. I came up with this:

I promptly decided to carry on to coding without completing the design first. I changed the name of the app from Trackit! to BodiTrack and also decided against an image background.

3. Coding the First Page of the Weight Tracker App

So I decided to make this a single page that scrolls to the different sections of the page. The page consist of a landing section with a some of welcoming phrase and a button that scrolls on-click, to the next action to be taken which is to create an account. Rather than just making the account creation about just collecting emails and password, I decided that users will be able to get started immediately by inputting their current weight, their weight goal or target, and height so that these inputs will serve as their first record by the time backend functionality is added. I placed the sign-in section at the bottom of this page. The page scrolls to that section upon clicking on sign-in.

Conclusion and Lessons Learnt

The app was then hosted on netlify. The responsiveness of the site was not great on first commit which prompted further commits to make the site more responsive on mobile. Here is the live url of the app and the github repo here.

Lessons learnt are as follows:

• Hosted site on netlify first the time. Learnt how to link netlify to github repo for auto deploy
• CSS positioning. I haven't used CSS position before now. Learnt how to use CSS positioning to centre a div horizontally and vertically. Also used to it to put the header in a fixed position.
• CSS tranistion properties. Used this also for the first time to time the button hover effect.

I still don't completely have a clear idea on how this app will pan out eventually but baby steps....