In my programming career so far, I’ve spent most of my time lurking behind the scenes - working with data, APIs, and infrastructure. Very little of my time has been dedicated to making websites look the way they do. Before this week I didn’t know the difference between a CSS class and id selector.

Welcome to the results of my learning - my personal site! (style was adapted, code was original). Right now it’s pure HTML and CSS - no frameworks or syntatic sugar.

I made the site responsive since mobile is the new black or whatever. An interesting hiccup I encountered: viewport. Turns out that Apple decided they wanted a default viewing experience on iPhone to be a full-size desktop site, so it sets the default window to a zoomed-out 980px.

The solution: using the viewport meta tag. Your media queries will be useless unless your header contains the following:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

References:

• http://webdesign.tutsplus.com/tutorials/quick-tip-dont-forget-the-viewport-meta-tag--webdesign-5972
• https://stackoverflow.com/questions/13002731/responsive-design-media-query-not-working-on-iphone
• https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html