<![CDATA[Blogs On Web Design]]>https://blogsfromabhinav.hashnode.devRSS for NodeSat, 19 Sep 2026 12:33:13 GMT60<![CDATA[My New Year Project From Masai-Code for Cloning a Fitness Website. #NewYearCoding]]>https://blogsfromabhinav.hashnode.dev/my-new-year-project-from-masai-code-for-cloning-a-fitness-website-newyearcodinghttps://blogsfromabhinav.hashnode.dev/my-new-year-project-from-masai-code-for-cloning-a-fitness-website-newyearcodingSun, 03 Jan 2021 06:24:43 GMTHello there πŸ‘‹, I'm Abhinav Raj, a passionate trainee web developer who loves to share his tech ideas, knowledge and works with the community.

https://github.com/AbhinavRajSing/magnesium

The Idea

Since I am pursuing a Full Stack Web Development course from Masai School, I was given a Project that was to clone a fitness website. Since this is Corona time and we need to stay healthy, it was a pretty good project to work upon. I was given a team of three members including me and the task was to clone the pixel perfect clone of the website.Let's look at how we designed it πŸ‘‡

Screen Shot 2021-01-03 at 10.51.35 AM.png

Screen Shot 2021-01-03 at 9.16.41 PM.png

Screen Shot 2021-01-03 at 10.57.58 AM.png

Screen Shot 2021-01-03 at 11.14.07 AM.png

What this WebSite is all about?

MyNetDiary is basically a website where the user can track his/her diet plans ,exercise, how much calories he/she is taking, fats, protein intake from every diet ,carbs and a lot more to stay fit. MyNetDiary helps the user to loose or gain weight according to what they want. this information is taken from the Signup page where the page takes all the details of user. πŸ‘‡

Screen Shot 2021-01-03 at 8.56.58 PM.png

Team Mates

  1. Abhinav Raj
  2. Sohail Shaikh
  3. Bharath Reddy

The team that i worked with was a great team.They Put tremendous efforts to make it happen. This website was build in just Three days which to be honest was a difficult task, but thanks to my team members Sohail Shaikh & Bharath Reddy who made it possible to complete this project .

Tech Stack

  • HTML
  • CSS
  • JavaScript

External sources were also used for Ajax, J Query and CanvasJS from Cloudflare CDN πŸ‘‡

Screen Shot 2021-01-03 at 11.33.02 AM.png

Screen Shot 2021-01-03 at 11.32.46 AM.png

Coding

First of all, let's have a look at the file tree πŸ‘‡ It consists of common Frontend components like

homepage.html, signin.css and food.js

Screen Shot 2021-01-03 at 11.29.36 AM.png

Code for Home Page

Here goes the code for our home page πŸ‘‡

Screen Shot 2021-01-03 at 11.35.15 AM.png

How the Home Page looksπŸ‘‡

Screen Shot 2021-01-03 at 10.51.35 AM.png

Code for DashBoard Page

Here goes the code for our DashBoard page πŸ‘‡

Screen Shot 2021-01-03 at 9.07.28 PM.png

How the DashBoard page looksπŸ‘‡

Screen Shot 2021-01-03 at 9.06.46 PM.png

Code for Food Page

Here goes the code for our Food page πŸ‘‡

Screen Shot 2021-01-03 at 9.10.21 PM.png

Screen Shot 2021-01-03 at 9.10.39 PM.png

How the Food Page looksπŸ‘‡

Screen Shot 2021-01-03 at 11.14.07 AM.png

Now, Food page in this project holds a special place as it keeps the count of

  • Calories
  • Fats
  • Protein
  • Carbs

which helps the user to maintain their diet plan and stay in the routine.

Don't worry, I am not gonna overwhelm you with all the codes. The above codes are just an example of our work.

That's It, we have just developed our website πŸš€

minion.gif

Endings

Hope our work has impressed you all. Looking forward to make more projects like this. Its just a start.

On that note Wishing you all a Very Happy and Prosperous New Year

newyr.gif

]]>