X Days of Code: No. 3 — A Product Landing Page

Last week I completed Project 3 in Freecode Camp’s curriculum. I definitely over-thought this process, trying to be cool and doing more than what I knew how to do.

The objective was to create a simple product landing page with key objectives, including:

  • a top navigation that remains visible while scrolling,
  • three navigation items that link to a place on the page,
  • an embedded video,
  • an email subscribe form with submit button,
  • and at least one CSS media query.

Rather than creating a “consumer product” page, however, I thought this would be an opportunity to create a landing page relevant to my 9-to-5 job in education management.

Currently at work, my team is undergoing a website redesign and launch for our organization and affiliated regional and school assets. One of the challenges we’re facing is how to streamline website management without having too many individual websites to oversee — a pain point with our current setup where each high school has its own specialized page that looks completely different from its elementary, middle, and regional pages. As the primary owner of web content management, I had selfish reasons for keeping this simple, manageable, and sustainable, but I also wanted it to be the same for my regional and school-specific colleagues who may be trained to maintain their websites for quick updates.

My mock-up using publicly-availble information from Uncommon Schools to create a fictional high school landing page. (Created in Lunacy)

Running with this idea, I decided to create a “product landing page” that was focused on a pseudo-fictional high school. I sketched out my idea, laying out each project objective to make sure I didn’t miss anything. Then, I drew this up in Lunacy (the PC version of the MAC-only Sketch program) with visual elements.

Once satisfied with the layout, I started coding the skeleton into Visual Studio Code. After a few days working out the basics, I felt frustrated. Then it dawned on me: I’m over-thinking this project.

I wanted to create a “wow”-factor landing page but for the purposes of the curriculum, I realized I was doing too much. Too much in the sense that I can iterate on this project at another time so I can refocus and get through the Freecode Camp curriculum.

While keeping the initial motivation as the point of reference (a school resource page), I dumped my initial code and started over. This time keeping the objectives in the forefront.

It’s not a pretty landing page, and there are some elements that are a bit wonky, but the functionality more or less met the requirements of the project. The other pro: it’s allowing me to keep ideas in my mind for when I sit down and create a new portfolio from scratch.

Here’s my CodePen for the project:

See the Pen Freecode Camp – Product Landing Page (Responsive Web Design) by gina (@ginamc) on CodePen.

– 30 –

Project No. 2 was a simple survey, which you can see here.

Scroll Up
%d bloggers like this: