You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
The text was updated successfully, but these errors were encountered:
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:
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.
The text was updated successfully, but these errors were encountered: