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">