Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Frontend Progress #7

Open
nikhilc3 opened this issue Oct 17, 2023 · 0 comments
Open

Frontend Progress #7

nikhilc3 opened this issue Oct 17, 2023 · 0 comments

Comments

@nikhilc3
Copy link
Collaborator

nikhilc3 commented Oct 17, 2023

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.

@Krishiv111 Krishiv111 moved this to Done/Review Tickets in KPNS Team Project Jun 3, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: Done/Review Tickets
Development

No branches or pull requests

1 participant