{"id":14647,"date":"2020-04-13T22:48:26","date_gmt":"2020-04-14T05:48:26","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=14647"},"modified":"2023-12-01T02:37:23","modified_gmt":"2023-12-01T10:37:23","slug":"css-float","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/css-float\/","title":{"rendered":"CSS Float"},"content":{"rendered":"\n<p>When you\u2019re designing a web page, you may decide that a particular element should appear in a certain position on the page. For instance, you may want a box containing an image to appear at the right of a page.<\/p>\n\n\n\n<p>In CSS, the float property is used to specify how an element should be positioned. Float can be used to position an element to the left or right of a web page.<\/p>\n\n\n\n<p>This tutorial will discuss, with reference to examples, how to use the CSS float property to position elements on a web page. By the end of reading this tutorial, you\u2019ll be an expert at floating elements on a web page using CSS.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">CSS Float Property<\/h2>\n\n\n\n<p>The float property can be used to position an element to the left or right of a web page. For instance, float could be used to position an image to the right of the text in a box on a web page.<\/p>\n\n\n\n<p>The float property only applies to elements that generate boxes and are not positioned absolutely on the web page. Absolutely positioned elements are web elements which are positioned relative to the first parent element that has a position other than static.<\/p>\n\n\n\n<p>The four most common values used with the float property are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>left (floats an element to the left of the container)<\/li>\n\n\n\n<li>right (floats an element to the right of the container)<\/li>\n\n\n\n<li>none (there is no float applied to an element)<\/li>\n\n\n\n<li>inherit (the element is floated using the float property applied to its parent container).<\/li>\n<\/ul>\n\n\n\n<p>The most common usage of the float property is to wrap text around an image in CSS.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">CSS Float Example<\/h2>\n\n\n\n<p>Let\u2019s say we are designing a website for the local <code>Stargazer Blazers<\/code> stargazing society. The club wants to have a web page that outlines the history of their organization. This web page should have a brief description of the club, as well as an image of the stars positioned to the left of the page.<\/p>\n\n\n\n<p>We could use the float property to create this web page. Here\u2019s the basic code that we will use for our web page, without any float applied:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>index.html\n&lt;div&gt;\n&lt;p&gt;&lt;img src=\"https:\/\/images.unsplash.com\/photo-1465101162946-4377e57745c3?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1357&amp;q=80\" height=\"200\" width=\"200\" \/&gt; The Stargazer Blazers society, founded in 2017, is dedicated to viewing the stars in San Francisco, CA. The society was created after a meeting of two passionate stargazers in the Bay Area, Jeff Holmes and Paula Ingleson, who were looking to find other people with whom to discuss their passion. Today, our organization has over 200 members in the Bay Area, and meets monthly to gaze at the stars and discuss our members' discoveries.\n&lt;\/p&gt;\n&lt;\/div&gt;<\/pre><\/div>\n\n\n\n<p>Our code returns:<br><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/wy4yfGEquMzcqaFkvMrkKr1BvcSDTUZjJX_NU0SKi9qHtOytSPd8ME6zUtDAQNA2lwKVFoE3wepEjThmmY-fZ7VoD0reMk0aW7GIpWhCqED1iJxaGRDb14_wkZW8rzKMDx9vF2Gp\" alt=\"\"\/><\/figure>\n\n\n\n<p>In this example, our image appears before our text, and overall the page is not very aesthetically pleasing. However, by using the float property, we can position our image next to our text.<\/p>\n\n\n\n<p>Here\u2019s the code we would use to position our image to the right of the text (which was what the stargazing society requested):<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>styles.css\nimg {\n\tfloat: right;\n}<\/pre><\/div>\n\n\n\n<p>Our code returns:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/Tb8WWYMr7hnC0Szen2YCyeaBPAaxma8ruwKoJG12z3KdOZTvg0cXwB01kJuvv0-5vEvMxLO7CZI4uFHzbCLRuLB5-TrPRX1iNSjB7e1eU2GvWxoIQBUUaC6kjEJBkfDTAZ1GUXKz\" alt=\"\"\/><\/figure>\n\n\n\n<p>Let\u2019s break down our code. First, we defined a &lt;div&gt; in which the code for our web page is written. Then we used a &lt;p&gt; tag to create our body of text, which includes a description about the history of the Stargazer Blazers club. Inside our &lt;p&gt; tag, we also included an image of the stars, which is 200&#215;200 in size.<\/p>\n\n\n\n<p>In our styles.css file, which includes the style code for our web page, we used the float: right; attribute to float our image to the right of the text. As you can see in the above example, our image is positioned to the right of our text. By default, the image would appear before our text.<\/p>\n\n\n\n<p>Now, suppose the stargazing club has asked us to position the image to the left of the text. We could do so using this code:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>styles.css\nimg {\n\tfloat: left;\n\tmargin-right: 20px;\n}<\/pre><\/div>\n\n\n\n<p>Our code returns:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/SiBFgmf49SahKTTCPw7IlL-bYyVN8U8AcdPuhhSj8b3JkHz4pHGn8gZQTMl3AHEPyjEurMRzfT47Q2AVS137meOCcQ6HejB8Gw5HIa_WahTIEPuisawKCkjeHltZbSs93I19c1ym\" alt=\"\"\/><\/figure>\n\n\n\n<p>In this example, we floated our image to the left of our text. We also specified a margin-right: 20px; property, which creates a space between the left of our image and our text.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Box Grid with Float<\/h2>\n\n\n\n<p>The float property allows you to create boxes of content that appear side-by-side.<\/p>\n\n\n\n<p>Suppose the stargazing society wanted three images to appear side-by-side, which show the stars people could see if they joined.<\/p>\n\n\n\n<p>We could use the following code to accomplish this task:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>index.html\n&lt;div&gt;\n&lt;img src=\"https:\/\/images.unsplash.com\/photo-1492446190781-58ac4285911d?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1294&amp;q=80\" height=\"200\" width=\"200\" class=\"image\" \/&gt;\n&lt;img src=\"https:\/\/images.unsplash.com\/photo-1456154875099-97a3a56074d3?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1189&amp;q=80\" height=\"200\" width=\"200\" class=\"image\" \/&gt;\n&lt;img src=\"https:\/\/images.unsplash.com\/photo-1435224668334-0f82ec57b605?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1350&amp;q=80\" height=\"200\" width=\"200\" class=\"image\" \/&gt;\n&lt;\/div&gt;<\/pre><\/div>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>styles.css\n* { box-sizing: border-box };\n.image {\n\tfloat: left;\n\twidth: 25%;\n\tpadding: 25px;\n}<\/pre><\/div>\n\n\n\n<p>Our code returns:&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/am4S41BOTwibXlcQI2NEFxu6SrXwBYVoCm5K1WoMNHoyAO_a-Tl73Y2v0v2AO3qBwY_twxHhQOHBpbHe888g3aNzao-DDdnMbrTXhzSnK9QmsWehOBwz0x67VSNhaphu0E3sxCY6\" alt=\"\"\/><\/figure>\n\n\n\n<p>Let\u2019s break down our code. In our HTML file, we have a &lt;div&gt; tag which contains three images (represented by &lt;img&gt; tags). Each image is 200&#215;200 in dimensions and links to a unique image of the stars. In addition, each image is assigned the class <code>image<\/code>.<\/p>\n\n\n\n<p>In our styles.css file, we:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Apply the box-sizing: border-box; style to every item in our list, so the padding and border of an element will be included in its total width and height. This allows us to position our elements side-by-side with no default spaces.<\/li>\n\n\n\n<li>Use float: left; to make our images appear side-by-side.<\/li>\n\n\n\n<li>Use width: 25% to make each image take up 25% of the width of the web page.<\/li>\n\n\n\n<li>Use padding: 25px; to create a 25px space between each image.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>The CSS float property is used to place an element on the left or right side of its container. This allows text and other elements to wrap around the floating element.<\/p>\n\n\n\n<p>This tutorial discussed, with reference to examples, how to use the CSS float attribute to position elements to the left and right of a container in CSS. Now you\u2019re ready to start using the float attribute like a CSS expert!<\/p>\n","protected":false},"excerpt":{"rendered":"When you\u2019re designing a web page, you may decide that a particular element should appear in a certain position on the page. For instance, you may want a box containing an image to appear at the right of a page. In CSS, the float property is used to specify how an element should be positioned.&hellip;","protected":false},"author":240,"featured_media":14648,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17287],"tags":[],"class_list":{"0":"post-14647","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>Positioning elements on web page with CSS float property.<\/title>\n<meta name=\"description\" content=\"The CSS float property is used to float an element to the left or right side of its container. On Career Karma, learn how to use the CSS float property.\" \/>\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-float\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Float\" \/>\n<meta property=\"og:description\" content=\"The CSS float property is used to float an element to the left or right side of its container. On Career Karma, learn how to use the CSS float property.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/css-float\/\" \/>\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-04-14T05:48:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-01T10:37:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/business-coffee-computer-desk-374006.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-float\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-float\/\"},\"author\":{\"name\":\"James Gallagher\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94\"},\"headline\":\"CSS Float\",\"datePublished\":\"2020-04-14T05:48:26+00:00\",\"dateModified\":\"2023-12-01T10:37:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-float\/\"},\"wordCount\":864,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-float\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/business-coffee-computer-desk-374006.jpg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/careerkarma.com\/blog\/css-float\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-float\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/css-float\/\",\"name\":\"Positioning elements on web page with CSS float property.\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-float\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-float\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/business-coffee-computer-desk-374006.jpg\",\"datePublished\":\"2020-04-14T05:48:26+00:00\",\"dateModified\":\"2023-12-01T10:37:23+00:00\",\"author\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94\"},\"description\":\"The CSS float property is used to float an element to the left or right side of its container. On Career Karma, learn how to use the CSS float property.\",\"breadcrumb\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-float\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/careerkarma.com\/blog\/css-float\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-float\/#primaryimage\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/business-coffee-computer-desk-374006.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/business-coffee-computer-desk-374006.jpg\",\"width\":1020,\"height\":680},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-float\/#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\":\"CSS Float\"}]},{\"@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":"Positioning elements on web page with CSS float property.","description":"The CSS float property is used to float an element to the left or right side of its container. On Career Karma, learn how to use the CSS float property.","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-float\/","og_locale":"en_US","og_type":"article","og_title":"CSS Float","og_description":"The CSS float property is used to float an element to the left or right side of its container. On Career Karma, learn how to use the CSS float property.","og_url":"https:\/\/careerkarma.com\/blog\/css-float\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-04-14T05:48:26+00:00","article_modified_time":"2023-12-01T10:37:23+00:00","og_image":[{"width":1020,"height":680,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/business-coffee-computer-desk-374006.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-float\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/css-float\/"},"author":{"name":"James Gallagher","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"headline":"CSS Float","datePublished":"2020-04-14T05:48:26+00:00","dateModified":"2023-12-01T10:37:23+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-float\/"},"wordCount":864,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-float\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/business-coffee-computer-desk-374006.jpg","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/css-float\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/css-float\/","url":"https:\/\/careerkarma.com\/blog\/css-float\/","name":"Positioning elements on web page with CSS float property.","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-float\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-float\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/business-coffee-computer-desk-374006.jpg","datePublished":"2020-04-14T05:48:26+00:00","dateModified":"2023-12-01T10:37:23+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"description":"The CSS float property is used to float an element to the left or right side of its container. On Career Karma, learn how to use the CSS float property.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/css-float\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/css-float\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/css-float\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/business-coffee-computer-desk-374006.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/business-coffee-computer-desk-374006.jpg","width":1020,"height":680},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/css-float\/#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":"CSS Float"}]},{"@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\/14647","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=14647"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/14647\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/14648"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=14647"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=14647"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=14647"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}