From d1686619951ad956b158f7b0823e2adcaa004964 Mon Sep 17 00:00:00 2001 From: Akshit Bansal <155195875+akshitbansal2005@users.noreply.github.com> Date: Fri, 18 Oct 2024 20:08:22 +0530 Subject: [PATCH] Update blog.html ### Structure: - **HTML Document**: The document is well-structured, with a proper doctype declaration and language attribute. - **Head Section**: Contains metadata, title, links to stylesheets, and icons, ensuring responsiveness and access to required libraries for icons and styles. ### Components: - **Blog Section**: - Includes a section element with a class and ID for easy styling and JavaScript manipulation. - Contains a container for blog cards that showcase individual blog posts, each represented as a `div` with an image, title, description, and a "Read More" button. - **Blog Cards**: - Each card is visually distinct and contains key information about the blog post, promoting user engagement. - **Modal Implementation**: - A modal element is used for displaying detailed blog content when the "Read More" button is clicked. - The modal includes a close button and dynamically loads content based on user interaction. ### JavaScript Functionality: - **Event Handling**: - Listens for clicks on the "Read More" buttons and the modal close button, enabling a dynamic user experience. - Uses the Fetch API to retrieve blog content from JSON files, ensuring that data is loaded asynchronously without reloading the page. - **Modal Control**: - Displays the modal when a blog is selected and hides it upon user interaction. - Prevents background scrolling when the modal is open to maintain focus on the content. ### Accessibility: - The code includes some accessibility features (like the `aria-label` on the close button), which is crucial for users relying on screen readers. ### Usability: - The design promotes user interaction and keeps content organized and accessible. - The modal enhances usability by presenting additional information without navigating away from the current page. --- blog.html | 201 ++++++++++++++++++++++++++---------------------------- 1 file changed, 96 insertions(+), 105 deletions(-) diff --git a/blog.html b/blog.html index e20dcd7..058aba4 100644 --- a/blog.html +++ b/blog.html @@ -2,128 +2,119 @@
- - - - - - - - -Discover how AI and ML are reshaping the world...
- -Discover how AI and ML are reshaping the world...
+ +Learn how to become a successful Java developer...
- -Learn how to become a successful Java developer...
+ +Starting your coding journey with the right tools...
- -Starting your coding journey with the right tools...
+ +Maximize your coding efficiency with these tips...
- -Maximize your coding efficiency with these tips...
+ +