Posts by Gina

Freelance writer, photog, and social science person. Interested in race, political economy, education, health, and science.

Ride Report: 718c Micro Tour 3

SUNSCREEN. Don’t knock it.

If Micro Tour 2 was lush wonderland with green canopy providing cover from the harsh sun, Micro Tour 3 was its opposite: a beautiful ride under an unobstructed blanket of UV rays penetrating the Earth’s surface, and the breeze the only reprieve from the unceasing heat of the sun. The end result? Getting sun-baked as fuck and suffering varying degrees of sun burns and sun rashes.

But I digress. This isn’t about how badly sunburned we were. This is about Micro Tour 3 to Floyd Bennett Field!

Continue reading →


Ride Report: 718c Micro Tour 2

I was going to sit out Micro Tour 2 and give my legs time to recover. A week out from the ride date, I succumbed to Joy and Happiness, and signed up for the ride. It was literally two weeks after MT1 to Rhinebeck. What am I doing with myself?

I’ve made a huge mistake. Again.

Continue reading →

Ride Report – 718c Micro Tour 1

Sometimes riding in the rain is nice. The pattering of droplets against your body as you cruise around has a meditative quality that’s different from cruising around on a beautiful sunny day. Sure, it’s inconvenient but what really gets you, what really chills you to the core and makes you wish you were anywhere else but the flat surface of 9G is the wind.

Combine the wind with camping gear strapped to your steel bike, and you have a recipe for “I’ve made a huge mistake.”

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