Frontend Progress

[nikhilc3]

Building the Cancer Research Website

When I set out to build the Cancer Research website, my primary goal was to create a user-friendly platform that presented comprehensive information about various types of cancer, recent research, and breakthroughs. Here's an overview of the steps I took:

1. Setting Up the Document Structure

I began by defining the standard HTML5 document structure, ensuring proper responsiveness and compatibility with different browsers.

2. Styling the Website

Using CSS, I styled the website to give it a clean and modern look. I chose a neutral color palette with a pop of green (#4CAF50). I applied consistent styles to typography elements, ensuring legibility and visual appeal.

3. Creating a Fixed Navbar

To ensure easy navigation, I implemented a fixed navbar at the top of the page. This navbar includes the Cancer Research logo, which I linked from GitHub.

4. Designing the Main Content Area

The main content area is designed to engage users right away. I added:

• A welcoming message and brief description of the site.
• An interactive image with the caption "Hover Over me!" to draw attention.
• A search box to allow users to quickly find specific cancer types.

5. Highlighting Key Features

I showcased three main features of the website:

• Research: Keeping users updated with the latest findings.
• Experts: Connecting users with oncology specialists.
• Community: Providing a space for users to share experiences and find support.

6. Implementing Dynamic Loading Animation

To enhance the user experience, I added a loading animation that displays the website's loading progress. This animation fades out once the website is fully loaded. I used JavaScript to incrementally update the loading percentage and control the display properties.

7. Animating Feature Blocks

To create a smooth user experience, I added a fade-in animation to the feature blocks. Each block fades in sequentially, drawing the user's attention as they scroll.

8. Adding Interactivity with JavaScript

I incorporated JavaScript to handle animations and events. This ensures that the website is not just visually appealing but also interactive and dynamic.

9. Wireframe

I made a wireframe outline where i put a picture of a body, and what we are planning to do with the backend now is that whenever I hover over a body part, a small pop up will show up and show the cancer data specific to the body part that the user hovered over. There is also a text saying "Hover Over me!" above to guide the users.