Budget Vacations

Project Overview

An interesting project I completed a while back was creating a multi-page website that looked visually appealing without Javascript. This was a little new to me because I often resort to using Javascript whenever it's reasonably possible, so this project was nice in order to develop my basic CSS and HTML skills. Beyond the website requiring no javascript, its multipage requirement meant that I had to make sure it worked seamlessly from page to page, from working links to forms.

Problem Statement

The challenge lay in developing a website without JavaScript for a school project. I had to create multiple pages showcasing vacation destinations while ensuring the site's design was visually appealing. This necessitated finding creative solutions within the confines of HTML and CSS alone. I found this especially frustrating at the time when it came to creating a working form that sent readable data.

Project Role

Developer and Designer

So What did I do?

Started With the Foundation

Beginning with the establishment of a standardized page format encompassing essential elements like the header, footer, logo, and CSS variables, I laid the groundwork for consistency across all pages. Building upon this foundation, I made the home page, which involved integrating elements such as a hero image, testimonials, and call-to-action sections to engage users effectively.

In order to expand the website's functionality, I moved my focus towards the destination page. Here, I added comprehensive information about different places -the location, details about the destination, pricing, and immersive videos showcasing tourist attractions in the area- and added them to individual cards. This section aimed to provide visitors with in-depth insights into various vacation spots, helping them see what kind of specific services the company behind the site provided.

Following the destination page, I then created the related packages page, offering users the opportunity to preview discounted travel packages. These curated deals were meant to show added value, enabling users to access reduced rates on accommodations and other amenities for their chosen destination.

Due in part to project requirements, as well as personal interest, I finished the basic website with a Contact Us page. Here, I designed and integrated a functional form, which was set up to work without using Javascript. This addition to the site helped ensure visitors could connect with the business effortlessly.

Outcome

Despite the constraints, the project yielded a well-designed website showcasing vacation destinations. It served as a platform to hone HTML and CSS skills, fostering creativity and problem-solving within limitations. By successfully developing a JavaScript-free website, I gained confidence in adapting and innovating in challenging circumstances, as well as figuring out ways certain designs can be implemented without having to resort to Javascript, which helps with accessibility.

Reflection

This was a quick little project that helped me learn much more about the capabilities of HTML and CSS. Before this, I had read about how limiting HTML and CSS were -which to be fair, they are pretty limited in what they can do without javascript- and just proceeded to use javascript whenever possible. This project opened my eyes to just how much you can actually do with HTML, especially HTML5.