Building a sales page for Boeing's AH-6 Helicopter

The objective of building this project was to practice building a webpage using HTML semantic tags. The websites I had built previously, while functional, didn’t utilize the semantic capabilities enough. I'm a bit of a military history enthusiast, so over the course of two days I built a mock-up sales page for Boeing's AH-6 helicopter, making sure to focus on semantics and accessibility during the course of the project. Read on to see the outcome!

If you'd to check out the page, click the links below:

The page

Github

Note

All copy on the page was written by me, including feature descriptions. All information is as accurate as I could make it after conducting research on the helicopter. The only non factual information on the page is the price of weapons/fuel tanks in the customization section. These are rough estimates, as the actual prices are not readily available to the public

Notable Features

Navbar

At the top of my page I built a navbar with links to sections of my helicopter sales page. During construction of the navbar I thought it would be cool to have sections of the navbar highlight themselves when a user hovered over one of the buttons. Bootstrap 4 has a navbar very similar to the one I wanted to build, but for the purpose of practicing custom CSS I decided to build my navbar completely from scratch.

After some experimentation, I decided to wrap each of my links in a div tag and darken the divs instead of the links. Once this was working, I ran into an issue with the div’s opacity. I wanted to lighten the opacity of divs surrounding each link so some of the navbar color showed through. Turning down the opacity of the entire div caused the text within it to disappear, so I had to abandon adjusting the overall opacity. Instead, I used the rgba color attribute and turned down the alpha so that just the background text was transparent when a user hovers over a link. This solution gave me the desired effect.

Feature Selector

The other major element of the page is the feature/info selector. I positioned several points on an image of the helicopter the webpage is supposed to be selling. On the outside of the image are arrows, which allow the user to scroll through the points. Each point corresponds with a feature on the helicopter. When a point is focused on, a text box pops open with information on that specific feature.

I handled this functionality using vanilla Javascript and CSS. At the time of building this project, I didn’t know any AJAX or Javascript libraries. However, that is something I plan on changing in the near future. Once I complete my current programming courses, I’m going to enroll in a React course (I may have completed it by the time the reader sees this).

Things I Could Have Improved On

For this project, I definitely could have improved the way I positioned my dots and text boxes for the features section. I hard coded in values when I should have used percentages, which will cause the dots and boxes to be in the wrong positions for people on different screen sizes. I also don’t know how to build responsive websites at the moment, which is another thing I plan on changing soon.