Out 'n About - Blog Website

Out 'n About is a blog website developed for Project Exam 1 in my Front-End Development course. The website focuses on outdoor adventures such as climbing, skiing, and mountaineering, showcasing a clean, accessible design and dynamic functionality powered by JavaScript and WordPress as a headless CMS.

Preview of the landing page:

Explore the project by visiting the live website - Out 'n About

Key Features

• Home Page with a slider displaying the latest posts.
• Blog Post Pages dynamically built using query string parameters, featuring clickable images displayed in modals.
• Blog List Page displaying at least 12 posts, with 10 shown initially and a button to load more posts.
• Contact Page with a form validated via JavaScript, including fields for name, email, subject, and message content.
• Search Bar to filter blog posts in real-time.
• Category Filtering to dynamically display posts by category.

Technical Overview

The project uses WordPress as a headless CMS, with the REST API fetching and displaying content dynamically using JavaScript. I implemented features like a custom-built image carousel, form validation, and real-time search functionality. The blog post content is parsed using the DOMParser to manage and display the markup efficiently.

Technologies Used

• JavaScript for dynamic content rendering and interactive features.
• WordPress REST API for fetching and managing blog content.
• HTML5 and CSS3 for structuring and styling the website.
• Responsive Design ensuring usability across different screen sizes.
• WCAG 2.1 Compliance with a focus on accessibility, including alt text for images, keyboard navigation, and semantic HTML.

Future Improvements

• Implementing a dark/light mode toggle.
• Optimizing lazy-loading for images to improve performance.
• Save form submissions to WordPress

---