Bike Camp NYC: Dropdown Menu

I revisited the Adobe XD Creative Challenge I started a few months back, recreating the dropdown menu project. My initial dropdown menu was a very simple mobile web application that guided a user through folder options to obtain reference documents. I wasn’t satisfied with the way it looked or its ‘purpose,’ even if it was fictional.

Continue reading →

Tutorial Hell

The Dante-esque rings of tutorial hell are slowly making their boundaries known. It’s been easy, as a freshly certified front-end web developer, to find comfort and safety in tutorials, free code camps, basic how-to videos, and super cheap boot camp courses. Having a full-time job whilst attempting a career switch also make tutorials an attractive…

Tutorial Hell was originally published on Posts by Gina

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

…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