{"id":14457,"date":"2012-07-26T23:01:50","date_gmt":"2012-07-26T15:01:50","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=14457"},"modified":"2025-04-24T17:06:50","modified_gmt":"2025-04-24T09:06:50","slug":"responsive-resume","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/responsive-resume\/","title":{"rendered":"Coding a Responsive Resume in HTML5\/CSS3"},"content":{"rendered":"

Almost everybody in the business section has created a resume at some point. When working as a freelancer, you are always vying to land new projects. Because of this transitory work cycle, it helps to offer potential clients a brief peek into your past experience. What better opportunity than offering your professional resume<\/a> online?<\/p>\n

\n Demo<\/a>\n Download Source Code<\/a>\n<\/div>\n

In this tutorial, I want to demonstrate how we can build a responsive single-page resume layout<\/strong>. I\u2019ll be coding everything in HTML5\/CSS3 to work properly at various screen resolutions. The resume will also support microdata powered by schema.org<\/a> for more technical SEO advantages.<\/p>\n

Building the Document<\/h2>\n

I\u2019m starting the webpage with an HTML5 doctype and standard meta elements. But to get this layout responsive, we\u2019ll need to set up some additional components. Most of these are typical meta tags and will be supported in all modern-day browsers.<\/p>\n

\r\n<!doctype html>\r\n<html lang=\"en\">\r\n  <head>\r\n    <meta http-equiv=\"Content-Type\" content=\"text\/html; charset=utf-8\" \/>\r\n    <title>Online Responsive Resume Demo<\/title>\r\n    <meta name=\"author\" content=\"Jake Rocheleau\">\r\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\">\r\n    <meta name=\"HandheldFriendly\" content=\"true\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no\">\r\n    <link rel=\"stylesheet\" type=\"text\/css\" href=\"http:\/\/fonts.googleapis.com\/css?family=Simonetta:400,900|Balthazar\">\r\n    <link rel=\"stylesheet\" type=\"text\/css\" href=\"styles.css\">\r\n    <link rel=\"stylesheet\" type=\"text\/css\" href=\"responsive.css\">\r\n    <!--[if lt IE 9]>\r\n      <script src=\"http:\/\/html5shim.googlecode.com\/svn\/trunk\/html5.js\"><\/script>\r\n      <script src=\"http:\/\/css3-mediaqueries-js.googlecode.com\/svn\/trunk\/css3-mediaqueries.js\"><\/script>\r\n    <![endif]-->\r\n  <\/head>\r\n<\/pre>\n
The meta viewport<\/code> tag is crucial for getting the responsive technique to work on smartphones. We reset the scale as 1:1 so the layout is displayed pixel-perfect. You\u2019ll also notice I have included an external stylesheet from Google Web Fonts<\/a>. I\u2019m using two custom typefaces, \u201cSimonetta\u201d and \u201cBalthazar\u201d. Unique fonts certainly grab your visitor\u2019s attention and fit harmoniously into a single-page design.<\/p>\n
I have also set up a small IE conditional which includes some open-source scripts for legacy browsers. Internet Explorer 8 and older have issues rendering HTML5 elements and CSS3 media queries. But thankfully, some smart developers have figured out how to get these working through JavaScript.<\/p>\n
Main Content Blocks<\/h2>\n
The whole document is wrapped in a div with many various block sections inside. The top <header><\/code> tag includes my photo, name, e-mail address, and other important metadata. Afterwards, I\u2019ve broken each block into a <section><\/code> element for the rest of the content.<\/p>\n
As you resize the page, these block elements fall beneath each other gracefully. I\u2019ve set up a few different instances of media queries in an external stylesheet. This makes it easier keeping track of styles when going back to edit something later.<\/p>\n
\r\n<header class=\"clearfix\">\r\n  <div id=\"info\">\r\n    <h1><span itemprop=\"name\">Jake Rocheleau<\/span><\/h1>\r\n    <h4><span itemprop=\"jobTitle\">Freelance Writer & Web Developer<\/span><\/h4>\r\n    <small itemprop=\"address\" itemscope itemtype=\"https:\/\/schema.org\/PostalAddress\">\r\n      <span itemprop=\"addressLocality\">Hudson<\/span>,\r\n      <span itemprop=\"addressRegion\">Massachusetts<\/span>,\r\n      <span itemprop=\"addressCountry\">USA<\/span>\r\n    <\/small>\r\n    <small><span itemprop=\"email\">jakerocheleau@gmail.com<\/span><\/small>\r\n    <small><a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/byjakewithlove.com\/\" itemprop=\"url\">My Portfolio<\/a> \u2022 <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/twitter.com\/jakerocheleau\" itemprop=\"url\">@jakerocheleau<\/a><\/small>\r\n  <\/div>\r\n\r\n  <div id=\"photo\">\r\n    <img src=\"https:\/\/assets.hongkiat.com\/uploads\/responsive-resume\/jake-rocheleau-250.jpg\" alt=\"Jake Rocheleau resume photo\" itemprop=\"image\" \/>\r\n  <\/div>\r\n<\/header>\r\n<\/pre>\n
Before we jump into detailed CSS, I want to explain more about the use of microdata. If you look closely, I\u2019ve littered attributes inside many different elements with the names itemtype<\/strong>, itemscope<\/strong>, and itemprop<\/strong>. These all relate to the Schema project<\/a>, which hopes to offer a data structure for the web.<\/p>\n
Formatting Useful Microdata<\/h2>\n
All of the major search engines, including Google, Yahoo!, and Bing, have accepted Schema as the best syntax for data markup. By labeling details about yourself, it helps these search engines display related results for your content online. Let\u2019s break down how to set these up.<\/p>\n
\r\n<div id=\"w\" itemscope itemtype=\"https:\/\/schema.org\/Person\">\r\n<\/pre>\n
The itemscope attribute is applied to any container which holds information on a schema item. This is always followed by the itemtype attribute, which in this scenario is describing a person<\/a>. Inside this wrapper div, I can label any content by using itemprop along with any of the details listed on their documentation page.<\/p>\n
The recommended method is to wrap your content inside a span tag instead of appending directly to the element. When you\u2019re labeling something like a photo, you should attach itemprop to the img<\/code> element directly. But otherwise, you\u2019ll have much cleaner markup by wrapping your data in span tags.<\/p>\n
How Much is Too Much?<\/h3>\n
I would argue that there is no limit to the amount of detail you can go into. Microdata is available to help computers recognize people, organizations, products, and other items within an online context. The more information you can offer, the better.<\/p>\n
It\u2019s worthwhile to keep an open mind and see how you can use this microdata in aspects of your own website. If you spend 10-15 minutes going through the Schema documentation, it\u2019s a lot easier than you\u2019d think. We can look at two solid examples from the resume demo:<\/p>\n
\r\n<section id=\"skills\" class=\"clearfix\" itemscope itemtype=\"https:\/\/schema.org\/ItemList\">\r\n  <h2 itemprop=\"name\">Skillset<\/h2>\r\n  <section id=\"skills-left\">\r\n    <h5 itemprop=\"about\">Development<\/h5>\r\n    <ul>\r\n      <li itemprop=\"itemListElement\">HTML5\/CSS3<\/li>\r\n      <li itemprop=\"itemListElement\">JavaScript & jQuery<\/li>\r\n      <li itemprop=\"itemListElement\">PHP Backend<\/li>\r\n      <li itemprop=\"itemListElement\">SQL Databases<\/li>\r\n      <li itemprop=\"itemListElement\">Wordpress<\/li>\r\n      <li itemprop=\"itemListElement\">Pligg CMS<\/li>\r\n      <li itemprop=\"itemListElement\">Some Objective-C<\/li>\r\n    <\/ul>\r\n  <\/section>\r\n\r\n  <section id=\"skills-right\">\r\n    <h5 itemprop=\"about\">Software<\/h5>\r\n    <ul>\r\n      <li itemprop=\"itemListElement\">Adobe Photoshop<\/li>\r\n      <li itemprop=\"itemListElement\">Adobe Dreamweaver<\/li>\r\n      <li itemprop=\"itemListElement\">MS Office 2007-2010<\/li>\r\n      <li itemprop=\"itemListElement\">cPanel & phpMyAdmin<\/li>\r\n      <li itemprop=\"itemListElement\">Xcode 4<\/li>\r\n    <\/ul>\r\n  <\/section>\r\n<\/section>\r\n<\/pre>\n
When listing my various skills, I\u2019ve set up a new container defining the ItemList schema<\/a>. There wasn\u2019t any type of skillset or experience to list under a Person, so this is a safe alternative. The value here is that Google can understand each itemListElement<\/code> is related to each other. In this case, we have a list of languages and software I know how to work with.<\/p>\n
\r\n<section id=\"articles\">\r\n  <h2>Recent Articles<\/h2>\r\n  <p itemscope itemtype=\"https:\/\/schema.org\/Article\">\r\n    <span itemprop=\"name\">\r\n      <a href=\"https:\/\/www.hongkiat.com\/blog\/css-javascript-fallback-methods\/\" itemprop=\"url\" title=\"10 Useful Fallback Methods For CSS And Javascript\">10 Useful Fallback Methods For CSS And Javascript<\/a>\r\n    <\/span> \u2022 Published in <span itemprop=\"datePublished\">July 2012<\/span>\r\n  <\/p>\r\n\r\n  <p itemscope itemtype=\"https:\/\/schema.org\/Article\">\r\n    <span itemprop=\"name\">\r\n      <a href=\"https:\/\/www.hongkiat.com\/blog\/wordpress-url-rewrite\/\" itemprop=\"url\" title=\"Rewriting URLs In WordPress: Tips And Plugins\">Rewriting URLs In WordPress: Tips And Plugins<\/a>\r\n    <\/span> \u2022 Published in <span itemprop=\"datePublished\">July 2012<\/span>\r\n  <\/p>\r\n\r\n  <p itemscope itemtype=\"https:\/\/schema.org\/Article\">\r\n    <span itemprop=\"name\">\r\n      <a href=\"https:\/\/www.hongkiat.com\/blog\/jpeg-optimization-guide\/\" itemprop=\"url\" title=\"JPEG Optimization For The Web - Ultimate Guide\">JPEG Optimization For The Web - Ultimate Guide<\/a>\r\n    <\/span> \u2022 Published in <span itemprop=\"datePublished\">July 2012<\/span>\r\n  <\/p>\r\n\r\n  <p itemscope itemtype=\"https:\/\/schema.org\/Article\">\r\n    <span itemprop=\"name\">\r\n      <a href=\"https:\/\/www.hongkiat.com\/blog\/design-perfect-newsletter\/\" itemprop=\"url\" title=\"9 Tricks To Design The Perfect HTML Newsletter\">9 Tricks To Design The Perfect HTML Newsletter<\/a>\r\n    <\/span> \u2022 Published in <span itemprop=\"datePublished\">May 2012<\/span>\r\n  <\/p>\r\n\r\n  <p itemscope itemtype=\"https:\/\/schema.org\/Article\">\r\n    <span itemprop=\"name\">\r\n      <a href=\"https:\/\/www.hongkiat.com\/blog\/google-website-optimizer-ab-testing-guide\/\" itemprop=\"url\" title=\"Guide To A\/B Testing With Google Website Optimizer\">Guide To A\/B Testing With Google Website Optimizer<\/a>\r\n    <\/span> \u2022 Published in <span itemprop=\"datePublished\">March 2012<\/span>\r\n  <\/p>\r\n<\/section>\r\n<\/pre>\n
Another good example is the articles listing found at the very bottom. There is a schema set up for articles and blog posts, all related to content found online. I\u2019ve indicated the article URL and date of publication, which is more than enough info for these search engine crawlers.<\/p>\n
Just keep in mind that microdata is all about formatting content to be organized by computers. This single-page resume is the perfect example to define traits about a specific person. These aren\u2019t going to be useful on every website, but it\u2019s an exciting methodology to understand.<\/p>\n
Relative CSS Styles<\/h2>\n
In this last section, let\u2019s take a look into how to style this whole webpage. Towards the top of our stylesheet, I\u2019m defining some initial resets and basic element properties. These include headers, list items, and anchor link hover effects.<\/p>\n
\r\n* { margin: 0; padding: 0; }\r\nhtml { height: 101%; }\r\nbody { background: #f2f2f2 url('https:\/\/assets.hongkiat.com\/uploads\/responsive-resume\/bg-tile.png'); font-size: 62.5%; padding-bottom: 65px; }\r\n\r\nh1 { font-family: \"Simonetta\", \"Trebuchet MS\", Arial, sans-serif; color: #454545; font-size: 3.6em; margin-bottom: 6px; }\r\nh2 { font-family: \"Simonetta\", \"Trebuchet MS\", Arial, sans-serif; color: #484848; font-size: 2.5em; margin-bottom: 10px; text-decoration: underline; }\r\nh4 { font-family: \"Trebuchet MS\", Verdana, Arial, sans-serif; color: #777; font-weight: normal; font-size: 1.8em; margin-bottom: 10px; }\r\nh5 { font-family: \"Trebuchet MS\", Verdana, Arial, sans-serif; color: #656565; font-weight: bold; font-size: 1.75em; margin-bottom: 4px; }\r\n\r\np { font-family: \"Balthazar\", \"Droid Serif\", Times New Roman, serif; color: #565656; font-size: 1.8em; line-height: 1.4em; margin-bottom: 15px; padding-left: 35px; }\r\nsmall { font-family: \"Balthazar\", serif; color: #656565; font-size: 1.6em; display: block; margin-bottom: 6px; }\r\nul { display: block; list-style: none; }\r\nul li { padding-left: 45px; list-style-type: none; vertical-align: top; background: url('https:\/\/assets.hongkiat.com\/uploads\/responsive-resume\/bullet.png') 25px 5px no-repeat; margin-bottom: 5px; font-family: \"Balthazar\", serif; color: #666; font-size: 1.6em; line-height: 2.3em; }\r\n\r\nimg { border: 0; max-width: 100%; }\r\n\r\na { color: #5582d6; text-decoration: none; }\r\na:hover { text-decoration: underline; }\r\n<\/pre>\n
Nothing too interesting except for some of the custom font stacks. I also grabbed a unique bullet icon instead of using the default \u201cdisc\u201d. You can try searching through a directory like Icon Finder<\/a> when trying to locate a similar design.<\/p>\n
\r\n\/** @group core layout **\/\r\n#w { margin: 0px 50px; padding: 20px 40px; padding-top: 35px; background: #fff; min-width: 260px; max-width: 900px; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; -webkit-border-bottom-left-radius: 8px; -webkit-border-bottom-right-radius: 8px; -moz-border-radius-bottomleft: 8px; -moz-border-radius-bottomright: 8px; }\r\n\r\nheader { width: 100%; }\r\n\r\n\/** @group personal settings **\/\r\n#info { float: left; margin-bottom: 12px; }\r\n#photo { float: right; }\r\n#photo img {\r\n  -webkit-border-radius: 3px;\r\n  -moz-border-radius: 3px;\r\n  border-radius: 3px;\r\n  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\r\n  -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\r\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\r\n  background-color: #fff;\r\n  border: 1px solid #ccc;\r\n  padding: 5px;\r\n}\r\n<\/pre>\n
There are only a few important block areas on the page which require attention. Of course, the wrapper div is set up with extra margins and padding. Also, the max width is limited at 900px because any larger size feels like the page has too much whitespace. I\u2019ve also used rounded corners at the bottom of the page for a smoother effect on the eyes.<\/p>\n
Responsive Design<\/h3>\n
Possibly the most crucial aspect of this online resume is the responsive functionality. I have five different breakpoints set up to achieve various effects when resizing the browser window.<\/p>\n
\r\n@media only screen and (max-width: 740px) {\r\n  h1 { font-size: 4.5em; }\r\n  h4 { font-size: 2.2em; }\r\n  h2 { display: block; text-align: center; }\r\n  #info { float: none; display: block; text-align: center; }\r\n  #photo {\r\n    float: none;\r\n    display: block;\r\n    text-align: center;\r\n  }\r\n  #w { padding: 20px 15px; }\r\n  p { padding: 0; }\r\n}\r\n<\/pre>\n
The initial 740px<\/code> is right around where the photo image will clash with our header text. Instead of letting the photo drop down onto the right side, we clear both elements and center the whole layout. I\u2019ve also increased the header text size to leave a more solid impact.<\/p>\n
As the window gets smaller, I have removed some extra padding from the wrapper div and paragraphs. The next problem we run into after the header is from the skills UL listing. I break down the two-column approach and instead have list items floating next to each other.<\/p>\n
\r\n@media only screen and (max-width: 570px) {\r\n  ul li {\r\n    display: inline-block;\r\n    padding-left: 15px;\r\n    width: 140px;\r\n    background-position: -5px 0px;\r\n    margin-right: 6px;\r\n    line-height: 1.7em;\r\n  }\r\n  #skills-left, skills-right { margin-bottom: 15px; }\r\n}\r\n<\/pre>\n
This also requires repositioning many of the default text properties. We have to update the line height and reposition each list item\u2019s bullet icon. I\u2019ve set a fixed width so the grid appears more organized until the next breakpoint.<\/p>\n
Coding for Smartphones<\/h3>\n
The last three media queries are small yet very important. As you switch between landscape and portrait mode, the iPhone will resize any mobile browser. This is also the case with most Android devices and Windows Mobile phones.<\/p>\n
\r\n@media only screen and (max-width: 480px) {\r\n  ul li { width: 120px; }\r\n  #w { margin: 0 20px; }\r\n}\r\n\r\n@media only screen and (max-width: 320px) {\r\n  #w { margin: 0 10px; }\r\n}\r\n\r\n\/** iPhone only **\/\r\n@media screen and (max-device-width: 480px) {\r\n  ul li { width: 150px; }\r\n}\r\n<\/pre>\n
When first hitting 480px or smaller, we remove some more padding from the wrapper and also resize the list items again. Then at 320px, I\u2019ve removed some of the margin space outside the document. You can still see the textured background, but it\u2019s not very important on such a slim vertical viewport.<\/p>\n
\n  \"Responsive<\/a>\n<\/figure>\n
Lastly, I\u2019m using max-device-width<\/code> to target the iPhone device itself, or namely any other mobile screen with a maximum width of 480px. In this case, I want to update the list items a bit wider so that they fill in the whole screen. It will only affect the skills listings in landscape view since portrait is too skinny to notice any differences.<\/p>\n
\n    Demo<\/a>\n    Download Source Code<\/a>\n<\/div>\n
Final Thoughts<\/h3>\n
Working over the Internet often requires at least some type of portfolio online. When you can link to a single-page resume with all your details organized together, it shows that you mean business. Serious employers and potential clients will fall head over heels for such a charismatic display of professionalism in web design.<\/p>\n
I hope you can take some key points away from this tutorial. Freelancers in any location around the world can market themselves with just a bit of technical effort. Feel free to download my demo source code above and share your thoughts on this article in our comments area.<\/p>","protected":false},"excerpt":{"rendered":"
Almost everybody in the business section has created a resume at some point. When working as a freelancer, you are always vying to land new projects. Because of this transitory work cycle, it helps to offer potential clients a brief peek into your past experience. What better opportunity than offering your professional resume online? Demo…<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392,352],"tags":[2065,2066,4647],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nCoding a Responsive Resume in HTML5\/CSS3 - Hongkiat<\/title>\n<meta name=\"description\" content=\"Almost everybody in the business section has created a resume at some point. When working as a freelancer, you are always vying to land new projects.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/responsive-resume\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Coding a Responsive Resume in HTML5\/CSS3\" \/>\n<meta property=\"og:description\" content=\"Almost everybody in the business section has created a resume at some point. When working as a freelancer, you are always vying to land new projects.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/responsive-resume\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2012-07-26T15:01:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-24T09:06:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/responsive-resume\/responsive-resume-mobile-safari-iphone-preview.png\" \/>\n<meta name=\"author\" content=\"Jake Rocheleau\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jake Rocheleau\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/responsive-resume\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/responsive-resume\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"Coding a Responsive Resume in HTML5\\\/CSS3\",\"datePublished\":\"2012-07-26T15:01:50+00:00\",\"dateModified\":\"2025-04-24T09:06:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/responsive-resume\\\/\"},\"wordCount\":1409,\"commentCount\":35,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/responsive-resume\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/responsive-resume\\\/responsive-resume-mobile-safari-iphone-preview.png\",\"keywords\":[\"responsive\",\"Responsive Web Design\",\"Resume Tools and Tips\"],\"articleSection\":[\"Coding\",\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/responsive-resume\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/responsive-resume\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/responsive-resume\\\/\",\"name\":\"Coding a Responsive Resume in HTML5\\\/CSS3 - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/responsive-resume\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/responsive-resume\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/responsive-resume\\\/responsive-resume-mobile-safari-iphone-preview.png\",\"datePublished\":\"2012-07-26T15:01:50+00:00\",\"dateModified\":\"2025-04-24T09:06:50+00:00\",\"description\":\"Almost everybody in the business section has created a resume at some point. When working as a freelancer, you are always vying to land new projects.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/responsive-resume\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/responsive-resume\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/responsive-resume\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/responsive-resume\\\/responsive-resume-mobile-safari-iphone-preview.png\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/responsive-resume\\\/responsive-resume-mobile-safari-iphone-preview.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/responsive-resume\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Coding a Responsive Resume in HTML5\\\/CSS3\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\",\"name\":\"Jake Rocheleau\",\"description\":\"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/jake\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Coding a Responsive Resume in HTML5\/CSS3 - Hongkiat","description":"Almost everybody in the business section has created a resume at some point. When working as a freelancer, you are always vying to land new projects.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/responsive-resume\/","og_locale":"en_US","og_type":"article","og_title":"Coding a Responsive Resume in HTML5\/CSS3","og_description":"Almost everybody in the business section has created a resume at some point. When working as a freelancer, you are always vying to land new projects.","og_url":"https:\/\/www.hongkiat.com\/blog\/responsive-resume\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2012-07-26T15:01:50+00:00","article_modified_time":"2025-04-24T09:06:50+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/responsive-resume\/responsive-resume-mobile-safari-iphone-preview.png","type":"","width":"","height":""}],"author":"Jake Rocheleau","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Jake Rocheleau","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/responsive-resume\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/responsive-resume\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"Coding a Responsive Resume in HTML5\/CSS3","datePublished":"2012-07-26T15:01:50+00:00","dateModified":"2025-04-24T09:06:50+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/responsive-resume\/"},"wordCount":1409,"commentCount":35,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/responsive-resume\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/responsive-resume\/responsive-resume-mobile-safari-iphone-preview.png","keywords":["responsive","Responsive Web Design","Resume Tools and Tips"],"articleSection":["Coding","Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/responsive-resume\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/responsive-resume\/","url":"https:\/\/www.hongkiat.com\/blog\/responsive-resume\/","name":"Coding a Responsive Resume in HTML5\/CSS3 - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/responsive-resume\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/responsive-resume\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/responsive-resume\/responsive-resume-mobile-safari-iphone-preview.png","datePublished":"2012-07-26T15:01:50+00:00","dateModified":"2025-04-24T09:06:50+00:00","description":"Almost everybody in the business section has created a resume at some point. When working as a freelancer, you are always vying to land new projects.","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/responsive-resume\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/responsive-resume\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/responsive-resume\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/responsive-resume\/responsive-resume-mobile-safari-iphone-preview.png","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/responsive-resume\/responsive-resume-mobile-safari-iphone-preview.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/responsive-resume\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Coding a Responsive Resume in HTML5\/CSS3"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a","name":"Jake Rocheleau","description":"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers","sameAs":["https:\/\/www.hongkiat.com"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/jake\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-3Lb","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/14457","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=14457"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/14457\/revisions"}],"predecessor-version":[{"id":74096,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/14457\/revisions\/74096"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=14457"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=14457"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=14457"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=14457"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}