{"id":17393,"date":"2020-05-25T00:23:20","date_gmt":"2020-05-25T07:23:20","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=17393"},"modified":"2023-12-01T03:02:41","modified_gmt":"2023-12-01T11:02:41","slug":"css-hero","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/css-hero\/","title":{"rendered":"How to Create a CSS Hero Image"},"content":{"rendered":"\n<p>Hero images are a common feature on websites. Hero images, often placed at the top of a page on a website, are large images with text that appears in front of the image.<br><\/p>\n\n\n\n<p>Hero images allow you to add a visual component to a site, while still allowing you to present information, like a title. While the exact features in a hero are up to you, most hero images include a title, a subtitle, and a button that links to another part of a website.<br><\/p>\n\n\n\n<p>This tutorial will discuss, with examples, the basics of hero images, and how you can use HTML and CSS to create a hero image. By the end of reading this tutorial, you\u2019ll be an expert at creating hero images using HTML and CSS.<br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Hero Images<\/h2>\n\n\n\n<p>Hero images appear all over a wide range of websites.<br><\/p>\n\n\n\n<p>Many website home pages, for example, use a hero image to attract attention to the top part of the home page. In addition, many blogs use hero images to add a visual component to a webpage that would otherwise be mainly text.<br><\/p>\n\n\n\n<p>But how do you create a hero image? To do so, we need to use both HTML and CSS. We\u2019ll use HTML to define the structure of our hero image\u2014what it should include\u2014and then we will use CSS to add styles to our hero image.<br><\/p>\n\n\n\n<p>For this example, we are going to design a hero image for Le Cafe 2020, a new French cafe that has opened up in the neighborhood who is looking to create a website. Here is the final result of the code we write in this tutorial:<br><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/RER4cSY2NSGUP1RQfSat47eIN7YR0qU0deN6nyPg-Inrk5TqIAAc9lkiSZlzzlHvHEyognCjH_H8GwvodOFEnKas-g0OGK2rjMbzA5TZCYZr97xBKYgLG5yYrleej7NMs5tcvSTo\" alt=\"\"\/><\/figure>\n\n\n\n<p>Now, let\u2019s get started creating our HTML and CSS hero image!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 1: Write the HTML Code<\/h2>\n\n\n\n<p>To get started, we are going to define the structure of our image using HTML.<br><\/p>\n\n\n\n<p>Le Cafe 2020, the French cafe whose website we are designing, wants a hero image to appear at the top of their web site\u2019s home page. The hero image should:<br><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use a stock image of a restaurant<\/li>\n\n\n\n<li>Show off the heading \u201cLe Cafe 2020\u201d<\/li>\n\n\n\n<li>Display the subheading \u201cPremier restaurant serving fine French cuisine and wines in Brooklyn, NY.\u201d<\/li>\n\n\n\n<li>Show a button with the text \u201cBook a Table\u201d. This button should link to the page \u201cbook.html\u201d.<\/li>\n<\/ul>\n\n\n\n<p>Here\u2019s the code we could use to create the structure for our hero image:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;div class=\"heroImage\"&gt;\n\t&lt;div class=\"heroContents\"&gt;\n\t\t&lt;h1&gt;Le Cafe 2020&lt;\/h1&gt;\n\t\t&lt;p&gt;Premier restaurant serving fine French cuisine and wines in Brooklyn, NY.&lt;\/p&gt;\n\t\t&lt;a href=\"\/book.html\"&gt;&lt;button class=\"bookButton\"&gt;Book a Table&lt;\/button&gt;&lt;\/a&gt;\n\t&lt;\/div&gt;\n&lt;\/div&gt;<\/pre><\/div>\n\n\n\n<p>Let\u2019s break down our code. First, we create a &lt;div&gt; tag with the class \u201cheroImage\u201d. In our CSS code, we\u2019ll use this class to add a background image to our hero.<br><\/p>\n\n\n\n<p>Then, we create a &lt;div&gt; tag with the class \u201cheroContents\u201d. This &lt;div&gt; tag contains the contents of our hero image: the text and button.<br><\/p>\n\n\n\n<p>Next, we use a &lt;h1&gt; tag to create our header, a &lt;p&gt; tag to declare the subheading that should appear in our hero, and a &lt;button&gt; tag to add a button which displays the text \u201cBook a Table\u201d on our web page. The &lt;button&gt; tag is surrounded by an &lt;a&gt; tag, which allows us to link the button to the \u201cbook.html\u201d page on our website.<br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 2: Write the CSS Code<\/h2>\n\n\n\n<p>Now that we\u2019ve defined the structure of our hero, we can add styles.<br><\/p>\n\n\n\n<p>First, we are going to create the styles for the \u201cheroImage\u201d class. This class will display the background image for our hero. Here are the styles we will apply to the \u201cheroImage\u201d class:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>.heroImage {\n\tbackground: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.9)), url(\"https:\/\/images.unsplash.com\/photo-1414235077428-338989a2e8c0?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80\");\n\theight: 50%;\n\tbackground-position: center;\n\tbackground-repeat: no-repeat;\n\tposition: relative;\n}<\/pre><\/div>\n\n\n\n<p>Let\u2019s break down these styles. First, we use the background CSS property to create the background for our hero. We specify a linear gradient, which adds a gray effect in front of our image so that the text in our hero is easily visible, then we specify the background image we want to appear in our hero.<br><\/p>\n\n\n\n<p>Next, we set the height of the hero image to be 50% of the size of the web page. We then use the \u201cbackground-position: center\u201d rule to make our image appear in the center of our hero. We also use the \u201cbackground-repeat: no-repeat\u201d rule to prevent our image from appearing multiple times in the hero, which could happen depending on the resolution of the user\u2019s device.<br><\/p>\n\n\n\n<p>Next, we are going to style the contents of our hero image, which are stored within a &lt;div&gt; tag with the class \u201cheroContents\u201d. Here are the styles we will apply to the \u201cheroContents\u201d class:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>.heroContents {\n\tpadding-top: 25px;\n\ttext-align: center;\n\tcolor: white;\n}<\/pre><\/div>\n\n\n\n<p>In this code, we have aligned all the text in our hero to the center of the hero using the \u201ctext-align: center\u201d rule. We have also added a 25px padding between the border of the top of our hero and the start of our text. Finally, we used the \u201ccolor\u201d property to set the text color of our hero\u2019s contents to white.<br><\/p>\n\n\n\n<p>The final step in styling our hero is to change our button. Le Cafe 2020 wants the button to appear in blue, with no border, and for the button to use white text. The button should have rounded corners. We could use the following code to create this button:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>.bookButton {\n  background-color: blue;\n  border: none;\n  color: white;\n  padding: 10px;\n  font-size: 15px;\n  border-radius: 10px;\n}<\/pre><\/div>\n\n\n\n<p>The above code sets the styles for the button in our hero. Let\u2019s break down each style, line-by-line:<br><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>background-color: blue<\/strong> sets the background color of our button to blue.<\/li>\n\n\n\n<li><strong>border: none<\/strong> removes the default border from our button.<\/li>\n\n\n\n<li><strong>color: white<\/strong> sets the color of the button\u2019s text to white.<\/li>\n\n\n\n<li><strong>padding: 10px<\/strong> creates a 10px-wide gap between the contents of the button and its borders.<\/li>\n\n\n\n<li><strong>font-size: 15px<\/strong> sets the size of the text in the button to 15px.<\/li>\n\n\n\n<li><strong>border-radius: 10px<\/strong> adds a rounded corners effect to our button.<\/li>\n<\/ul>\n\n\n\n<p>When we combine all the code we have written in this tutorial, we get the hero image we showed earlier in this article. And that\u2019s all you need to know to create a basic hero image using HTML and CSS!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Hero images are one way in which you can make a website more aesthetically pleasing. A hero image is a container with a background image that stores a heading, a subheading, or any other web element.<br><\/p>\n\n\n\n<p>This tutorial discussed the basics of hero images and how to create a hero image using HTML and CSS. Now you have the skills you need to start creating your own CSS hero image like a professional web developer!<\/p>\n","protected":false},"excerpt":{"rendered":"Hero images are a common feature on websites. Hero images, often placed at the top of a page on a website, are large images with text that appears in front of the image. Hero images allow you to add a visual component to a site, while still allowing you to present information, like a title.&hellip;","protected":false},"author":240,"featured_media":17394,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17287],"tags":[],"class_list":{"0":"post-17393","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-css"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"CSS","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":"","is_sponser_post":"","is_guest_post":""},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v27.0) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Create a CSS Hero Image: The Complete Guide | Career Karma<\/title>\n<meta name=\"description\" content=\"Hero images are common features on modern websites. On Career Karma, learn how to design a hero image using HTML and CSS.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/css-hero\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create a CSS Hero Image\" \/>\n<meta property=\"og:description\" content=\"Hero images are common features on modern websites. On Career Karma, learn how to design a hero image using HTML and CSS.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/css-hero\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2020-05-25T07:23:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-01T11:02:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/05\/photo-of-people-near-laptops-3184312.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1020\" \/>\n\t<meta property=\"og:image:height\" content=\"680\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"James Gallagher\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"James Gallagher\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-hero\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-hero\/\"},\"author\":{\"name\":\"James Gallagher\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94\"},\"headline\":\"How to Create a CSS Hero Image\",\"datePublished\":\"2020-05-25T07:23:20+00:00\",\"dateModified\":\"2023-12-01T11:02:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-hero\/\"},\"wordCount\":1073,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-hero\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/05\/photo-of-people-near-laptops-3184312.jpg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/careerkarma.com\/blog\/css-hero\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-hero\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/css-hero\/\",\"name\":\"How to Create a CSS Hero Image: The Complete Guide | Career Karma\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-hero\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-hero\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/05\/photo-of-people-near-laptops-3184312.jpg\",\"datePublished\":\"2020-05-25T07:23:20+00:00\",\"dateModified\":\"2023-12-01T11:02:41+00:00\",\"author\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94\"},\"description\":\"Hero images are common features on modern websites. On Career Karma, learn how to design a hero image using HTML and CSS.\",\"breadcrumb\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-hero\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/careerkarma.com\/blog\/css-hero\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-hero\/#primaryimage\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/05\/photo-of-people-near-laptops-3184312.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/05\/photo-of-people-near-laptops-3184312.jpg\",\"width\":1020,\"height\":680},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-hero\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/careerkarma.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\/\/careerkarma.com\/blog\/css\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Create a CSS Hero Image\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\",\"url\":\"https:\/\/careerkarma.com\/blog\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/careerkarma.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94\",\"name\":\"James Gallagher\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg\",\"caption\":\"James Gallagher\"},\"description\":\"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.\",\"url\":\"https:\/\/careerkarma.com\/blog\/author\/jamesgallagher\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Create a CSS Hero Image: The Complete Guide | Career Karma","description":"Hero images are common features on modern websites. On Career Karma, learn how to design a hero image using HTML and CSS.","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:\/\/careerkarma.com\/blog\/css-hero\/","og_locale":"en_US","og_type":"article","og_title":"How to Create a CSS Hero Image","og_description":"Hero images are common features on modern websites. On Career Karma, learn how to design a hero image using HTML and CSS.","og_url":"https:\/\/careerkarma.com\/blog\/css-hero\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-05-25T07:23:20+00:00","article_modified_time":"2023-12-01T11:02:41+00:00","og_image":[{"width":1020,"height":680,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/05\/photo-of-people-near-laptops-3184312.jpg","type":"image\/jpeg"}],"author":"James Gallagher","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"James Gallagher","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/css-hero\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/css-hero\/"},"author":{"name":"James Gallagher","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"headline":"How to Create a CSS Hero Image","datePublished":"2020-05-25T07:23:20+00:00","dateModified":"2023-12-01T11:02:41+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-hero\/"},"wordCount":1073,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-hero\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/05\/photo-of-people-near-laptops-3184312.jpg","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/css-hero\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/css-hero\/","url":"https:\/\/careerkarma.com\/blog\/css-hero\/","name":"How to Create a CSS Hero Image: The Complete Guide | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-hero\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-hero\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/05\/photo-of-people-near-laptops-3184312.jpg","datePublished":"2020-05-25T07:23:20+00:00","dateModified":"2023-12-01T11:02:41+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"description":"Hero images are common features on modern websites. On Career Karma, learn how to design a hero image using HTML and CSS.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/css-hero\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/css-hero\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/css-hero\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/05\/photo-of-people-near-laptops-3184312.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/05\/photo-of-people-near-laptops-3184312.jpg","width":1020,"height":680},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/css-hero\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/careerkarma.com\/blog\/css\/"},{"@type":"ListItem","position":3,"name":"How to Create a CSS Hero Image"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94","name":"James Gallagher","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","caption":"James Gallagher"},"description":"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.","url":"https:\/\/careerkarma.com\/blog\/author\/jamesgallagher\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/17393","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/240"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=17393"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/17393\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/17394"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=17393"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=17393"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=17393"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}