Ocean Intern

Screen shot of the Ocean Intern website

Timeline: Oct - Dec 2015

Project Type: Internship

My Role: Frontend Developer

Tools: HTML, CSS, Javascript, jQuery, Drupal, Flexbox

Skills: Web Development

Context

My first internship

In Autum quarter of 2015, I started my first internship as a Frontend Engineer Intern at KCTS9, the public television station. Being my first internship, I'm grateful the for the amount of flexibility/responsibility I was given. I'm also grateful to have been able to work with Laila Kazmi and Joseph Liu - my two bosses who really cared about making sure I got a strong learning experience from my time at KCTS9.

"I got to know Cedric when he joined KCTS as a Web production intern. He is extremely bright, works very hard, and eager to learn. He eagerly took on challenging projects and welcomed opportunities to learn new skills. He is also very respectful of team members, takes instructions well, and offers suggestions when needed. It was an absolute pleasure to work with Cedric! Given his hard work and eagerness to learn, Cedric would be a great asset to any organization that he joins!" - Laila Kazmi

Project Brief

While I took on many different projects (ranging from transcribing interviews to transfering pages from Drupal 6 to 7) during my internship, my main project was to build an interactive map for their high school oceanography intern program, Ocean Intern.

My Contribution

When we were presented with the project, I was a big proponent in deciding the overall layout of the page. I proposed the sidebar + map interface and we ended up going with that. Besides that though, the rest of the UI was designed by the graphic designer on our team. My sole job was to implement his design. I worked very closely with him while building the site. I built the website from scratch with vanilla HTML, CSS, and Javascript (and a little help from Flexbox).

What I Learned From This Project

This was one of the first times I built a complete website and I learned everything from browser compatibility to mobile responsive break points. I know I became a much better web developer coming out of this job.

  • Cross browser compatibility and the horrors of accommodating Internet Explorer. *shivers*
  • Using media queries for different screen widths to identify mobile/tablet break points.
  • The use of VW/VH for more responsive design. (I used that to make the "Site Dots" stay in the right place on the map as the screen size changed.)
  • Using JS/jQuery to create dynamically generating content. When the side bar changes to a different "Site Dot", it dynamically changes the content. (I wrote over 500 lines of JS)

What I'd Do Differently

As a whole, I think I did the most I could in the time I had. But if I had more time and was responsible for the entirety of the project (ie. the design as well), here are some of the changes I would've made:

  • Aesthetically, I think there are a few too many colors going on. I would keep the base blue as well as the map colors. Additionally, the map looks a little too childish. I would decrease the width of the black boarders on the map.
  • I would also decrease the text kerning to improve readability. (I had just discovered letter-spacing and went a little wild)
  • I would check to see if those colors followed the Web Accessibility Guide on color.

Thanks for scrolling!