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.

X Days of Code: No. 3 — A Product Landing Page was originally published on Posts by Gina


X Days of Code No. 1 – a tribute

The first project in the FreeCode Camp Responsive Web certification section was to create a tribute page with a responsive image. Simple enough, right? Basic HTML and CSS. Except I struggled for a hot minute and then some.

Continue reading →

Creative Energy in Unexpected Places

I never anticipated building relationships with the parents of my childhood friends. And yet, here I am, in my early thirties with two surrogate father figures who I adore and am grateful for. Funny how small this world is, and funnier that life unravels in this way. Funnier still that both of these people are named Scott.

I guess this could’ve been called the Story of Two Scotts, but maybe that’s a chapter title for a yet-to-be-written memoir. Today, I’m only talking about one Scott. Confusion avoided!

Continue reading →

X Days of Code

…because #100DaysofCode feels inadequate for my purposes or… rather, since I don’t code every day, using that designation seems unfair, hence the nondescript, non-committal “X Days of Code.” Maybe someone can argue otherwise for me. After a few months of not coding since receiving my Front End Web Developer nanodegree from Udacity (I know, I…

X Days of Code was originally published on Posts by Gina

List: My Top Books from 2018

If you read my previous post, I shared 18-ish moments that happened last year. Those were the most notable. On top of regular ol’ Life, I also read a lot of books. The most I’ve ever read, and the most fiction I’ve ever read. I also watched a good number of films but I’ll put…

List: My Top Books from 2018 was originally published on Posts by Gina