Page Editor - Priyadharshani
Role: Web Developer
Technical Description
HTML Techniques Used:
Semantic HTML5 Structure:
Uses header, nav, footer, section and div for structured content.
Navigation & Dropdowns:
Implements a hamburger menu for mobile.
Dropdown menus with hover effects.
Media & Images:
Uses img elements effectively.
Includes box shadows and responsive adjustments.
Typography & External Resources:
Google Fonts (Abhaya Libre, Kaushan Script).
FontAwesome for icons.
Animations & Interactive Elements:
Scroll-based animations (animate-on-scroll).
Fade-in effects.
News Section with External Links:
Uses target="_blank" for opening articles in new tabs.
Footer with Call-to-Actions & Social Media Links:
Well-structured with social icons and legal information.
CSS Techniques Used:
Animations & Transitions:
@keyframes fadeInFromSplash, fadeInUp, and scrollreveal.
Hover effects (transform: scale(1.1);).
Responsive Design (Media Queries):
Adjusts navigation, images, and layout for various screen sizes.
Flexbox & Grid Layouts:
Uses Flexbox for navigation, footer, and hero section.
Uses CSS Grid for the card and news section.
Hover & Interactive Effects:
Underline animation on hover using ::after.
Dropdown menus with opacity and transform animations.
Positioning & Layering:
Uses absolute, relative, and z-index to control layout.
Accessibility Enhancements:
High contrast for readability.
Proper font choices and button styling.
Scroll-Based Effects:
Elements fade in or slide as they appear on the screen.
Depth & Shadows:
Uses box-shadow for navbar, cards, and buttons to add depth.
Hidden Elements for Mobile Navigation:
Implements a hamburger menu and hides the search box for smaller screens.
Challenges & Lessons Learned
1. Using Media Queries & Flexbox/Grid properly to handle responsiveness.
2.Optimizing animations & images for better performance.
3.Testing across multiple devices & browsers to fix compatibility issues.
4.Improving usability & accessibility by adjusting colors, font sizes, and navigation.
Accessibility & Compliance
Implemented high contrast text, keyboard navigation, alt text for images, ARIA roles, semantic HTML, accessible forms, and avoiding auto-play media. Compliance requires maintaining proper contrast ratios, keyboard-friendly navigation, clear labels, and screen reader support.
