{"id":18932,"date":"2020-07-02T15:44:35","date_gmt":"2020-07-02T22:44:35","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=18932"},"modified":"2020-07-24T04:00:40","modified_gmt":"2020-07-24T11:00:40","slug":"css-clearfix","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/css-clearfix\/","title":{"rendered":"When and How to Use the CSS Clearfix Hack"},"content":{"rendered":"\n

As coders and programmers in the generation of CSS Flexbox and CSS Grid, we don\u2019t often consider CSS Clearfix. CSS Flexbox and Grid solve the position of elements a little better (and a little easier!) than using floats. 
<\/p>\n\n\n\n

Nevertheless, we should all still be aware of this for those few instances where we are working with legacy code that uses floats and there isn\u2019t time or money to switch to a more modern handling of the codebase. 
<\/p>\n\n\n\n

In this article, we\u2019ll explore the clearfix hack and discuss display: flow-root as a newer replacement of the clearfix solution. <\/p>\n\n\n\n

What is a Float?<\/h2>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n

As a reminder, the float<\/em> property basically takes the element you want to float and puts it to the left or the right of its container: 
<\/p>\n\n\n\n

<!DOCTYPE html>\n<html lang="en>\n<head>\n\t<title>CSS Clearfix<\/title>\n\t<meta name="viewport" content="width=device-width, initial-scale=1">\n\t<style>\nbody {\n  background-color: grey;\n}\n\nul {\n  max-width: 800px;\n  width: 100%;\n  background: lightblue;\n  border: 5px double black;\n  padding: 20px;\n}\n\nimg {\n  width: 300px;\n  margin: 20px;\n}\n\nli {\n  list-style: none;\n  float: left;\n}\n\n<\/style>\n<\/head>\n<body>\n<!-- https:\/\/unsplash.com\/photos\/2PPjq7I3bs4 -->\n<ul>\n  <li>\n    <img src="https:\/\/images.unsplash.com\/photo-1567268377583-d1aaf9ccfc22?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3300&q=80" \/>     <\/li>\n<!--  https:\/\/unsplash.com\/photos\/vYhBeZ_G_xE  -->\n  <li>\n    <img src="https:\/\/images.unsplash.com\/photo-1592283338081-beb63fa6a156?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1850&q=80" \/>     <\/li>\n<!--  https:\/\/unsplash.com\/photos\/7UduWMpT618  -->\n  <li>\n    <img src="https:\/\/images.unsplash.com\/photo-1583513702439-2e611c58e93d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3298&q=80" \/>     <\/li>\n<!--  https:\/\/unsplash.com\/photos\/Ah_QC2v2alE  -->\n  <li>\n    <img src="https:\/\/images.unsplash.com\/photo-1552944150-6dd1180e5999?ixlib=rb-1.2.1&auto=format&fit=crop&w=1850&q=80" \/>     \n  <\/li>\n<!--  https:\/\/unsplash.com\/photos\/T-0EW-SEbsE  -->\n  <li>\n    <img src="https:\/\/images.unsplash.com\/photo-1548199973-03cce0bbc87b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" \/>     <\/li>\n<\/ul>\n<p>Here is a sample paragraph element. Something is wrong about where I am in the layout. What else is wrong with the layout?<\/p>\n<\/body>\n<\/html>\n<\/pre><\/div>\n\n\n\n
At this moment, there are some images that are supposed to be in a <ul><\/code>, the container that has a light blue background, but those images are taller than the other elements of the <ul><\/code>. This results in an overflow that doesn\u2019t clear the float and collapsed horizontal margins. 
<\/p>\n\n\n\n
This is why the light blue container is so short, why the floats are placed where they are and why we have a paragraph element side-by-side with the float elements. This is the default value when using float with child elements that are taller than the parent container. <\/p>\n\n\n\n
The Fix<\/h2>\n\n\n\n
The first possible solution is what is called the clearfix hack<\/em><\/strong>. This hack inserts some empty content after the parent container so it expands to include the floated elements. We will use the pseudo-element ::after to achieve this:
<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang="en>\n<head>\n\t<title>CSS Clearfix<\/title>\n\t<meta name="viewport" content="width=device-width, initial-scale=1">\n\t<style>\nbody {\n  background-color: grey;\n}\n\nul {\n  max-width: 800px;\n  width: 100%;\n  background: lightblue;\n  border: 5px double black;\n  padding: 20px;\n}\n\nimg {\n  width: 300px;\n}\n\nli {\n  list-style: none;\n  float: left;\n  margin: 20px;\n}\n\n.clearfix-hack::after {\n  content: " ";\n  clear: both;\n  display: table;\n}\n\n<\/style>\n<\/head>\n<body>\n<!-- https:\/\/unsplash.com\/photos\/2PPjq7I3bs4 -->\n<ul>\n  <li>\n    <img src="https:\/\/images.unsplash.com\/photo-1567268377583-d1aaf9ccfc22?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3300&q=80" \/>     <\/li>\n<!--  https:\/\/unsplash.com\/photos\/vYhBeZ_G_xE  -->\n  <li>\n    <img src="https:\/\/images.unsplash.com\/photo-1592283338081-beb63fa6a156?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1850&q=80" \/>     <\/li>\n<!--  https:\/\/unsplash.com\/photos\/7UduWMpT618  -->\n  <li>\n    <img src="https:\/\/images.unsplash.com\/photo-1583513702439-2e611c58e93d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3298&q=80" \/>     <\/li>\n<!--  https:\/\/unsplash.com\/photos\/Ah_QC2v2alE  -->\n  <li>\n    <img src="https:\/\/images.unsplash.com\/photo-1552944150-6dd1180e5999?ixlib=rb-1.2.1&auto=format&fit=crop&w=1850&q=80" \/>     \n  <\/li>\n<!--  https:\/\/unsplash.com\/photos\/T-0EW-SEbsE  -->\n  <li>\n    <img src="https:\/\/images.unsplash.com\/photo-1548199973-03cce0bbc87b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" \/>     <\/li>\n<\/ul>\n<p>Here is a sample paragraph element. Something is wrong about where I am in the layout. What else is wrong with the layout?<\/p>\n<\/body>\n<\/html>\n<\/pre><\/div>\n\n\n\n
Aside from a little bit of margin I added to the <li><\/code> to make the spacing a better, all that was added was the .clearfix-hack::after <\/code>selector. It takes three properties: content, display and clear. 
<\/p>\n\n\n\n
An empty string occupies the value of the content property, we\u2019re moving the border of the element below the end of both<\/em> types of floats in the clear property and we are setting our display to block<\/code> <\/em>or <\/em>table<\/code> <\/em>to present the data\/images on the page. 
<\/p>\n\n\n\n
This results in an acceptable display of images inside a container and <p> tag below it. <\/p>\n\n\n\n
Is This the End for Clearfix?<\/h2>\n\n\n\n
With the advent of Flexbox and Grid, the need for clearfix is disappearing. Even more so with a newer way of handling clearfix in CSS:
<\/p>\n\n\n\n
.clearfix-hack {\n\tdisplay: flow-root\n}\n<\/pre><\/div>\n\n\n\n
Replace the .clearfix-hack::after<\/code> selector with the above code. Does anything change? 

display: flow-root <\/code>performs the clearfix hack for us and makes our code even more readable. 
<\/p>\n\n\n\n
Conclusion<\/h2>\n\n\n\n
We discussed two different ways to fix the bug that is created when we add the float property to a child element: the clearfix hack and using display: flow-root<\/code>. More than likely, you will only ever be using these hacks on legacy code and not on any code you actually create from scratch because of the creation of Flexbox and Grid.<\/p>\n","protected":false},"excerpt":{"rendered":"As coders and programmers in the generation of CSS Flexbox and CSS Grid, we don\u2019t often consider CSS Clearfix. CSS Flexbox and Grid solve the position of elements a little better (and a little easier!) than using floats.  Nevertheless, we should all still be aware of this for those few instances where we are working…","protected":false},"author":77,"featured_media":18934,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17287],"tags":[],"class_list":{"0":"post-18932","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":null,"is_sponser_post":[],"is_guest_post":[]},"yoast_head":"\nCSS Tutorials: CSS Clearfix | Career Karma<\/title>\n<meta name=\"description\" content=\"When using float properties, a situation may arise when you need to use what\u2019s called the clearfix \u201chack\u201d. This is how to implement it.\" \/>\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-clearfix\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"When and How to Use the CSS Clearfix Hack\" \/>\n<meta property=\"og:description\" content=\"When using float properties, a situation may arise when you need to use what\u2019s called the clearfix \u201chack\u201d. This is how to implement it.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/css-clearfix\/\" \/>\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-07-02T22:44:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-07-24T11:00:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/photo-1557637675-2149a5295fb7.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"667\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Christina Kopecky\" \/>\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=\"Christina Kopecky\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-clearfix\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-clearfix\\\/\"},\"author\":{\"name\":\"Christina Kopecky\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/ae0cdc4a5d198690d78482646894074e\"},\"headline\":\"When and How to Use the CSS Clearfix Hack\",\"datePublished\":\"2020-07-02T22:44:35+00:00\",\"dateModified\":\"2020-07-24T11:00:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-clearfix\\\/\"},\"wordCount\":494,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-clearfix\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/photo-1557637675-2149a5295fb7.jpeg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-clearfix\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-clearfix\\\/\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-clearfix\\\/\",\"name\":\"CSS Tutorials: CSS Clearfix | Career Karma\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-clearfix\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-clearfix\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/photo-1557637675-2149a5295fb7.jpeg\",\"datePublished\":\"2020-07-02T22:44:35+00:00\",\"dateModified\":\"2020-07-24T11:00:40+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/ae0cdc4a5d198690d78482646894074e\"},\"description\":\"When using float properties, a situation may arise when you need to use what\u2019s called the clearfix \u201chack\u201d. This is how to implement it.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-clearfix\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-clearfix\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-clearfix\\\/#primaryimage\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/photo-1557637675-2149a5295fb7.jpeg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/photo-1557637675-2149a5295fb7.jpeg\",\"width\":1000,\"height\":667},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-clearfix\\\/#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\":\"When and How to Use the CSS Clearfix Hack\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News & 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\\\/ae0cdc4a5d198690d78482646894074e\",\"name\":\"Christina Kopecky\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/image-3-150x150.jpg\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/image-3-150x150.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/image-3-150x150.jpg\",\"caption\":\"Christina Kopecky\"},\"description\":\"Christina is an experienced technical writer, covering topics as diverse as Java, SQL, Python, and web development. She earned her Master of Music in flute performance from the University of Kansas and a bachelor's degree in music with minors in French and mass communication from Southeast Missouri State. Prior to joining the Career Karma team in June 2020, Christina was a teaching assistant, team lead, and section lead at Lambda School, where she led student groups, performed code and project reviews, and debugged problems for students. Christina's technical content is featured frequently in publications like Codecademy, Repl.it, and Educative.\",\"sameAs\":[\"http:\\\/\\\/www.linkedin.com\\\/in\\\/cmvnk\"],\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/author\\\/christina-kopecky\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"CSS Tutorials: CSS Clearfix | Career Karma","description":"When using float properties, a situation may arise when you need to use what\u2019s called the clearfix \u201chack\u201d. This is how to implement it.","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-clearfix\/","og_locale":"en_US","og_type":"article","og_title":"When and How to Use the CSS Clearfix Hack","og_description":"When using float properties, a situation may arise when you need to use what\u2019s called the clearfix \u201chack\u201d. This is how to implement it.","og_url":"https:\/\/careerkarma.com\/blog\/css-clearfix\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-07-02T22:44:35+00:00","article_modified_time":"2020-07-24T11:00:40+00:00","og_image":[{"width":1000,"height":667,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/photo-1557637675-2149a5295fb7.jpeg","type":"image\/jpeg"}],"author":"Christina Kopecky","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"Christina Kopecky","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/css-clearfix\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/css-clearfix\/"},"author":{"name":"Christina Kopecky","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e"},"headline":"When and How to Use the CSS Clearfix Hack","datePublished":"2020-07-02T22:44:35+00:00","dateModified":"2020-07-24T11:00:40+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-clearfix\/"},"wordCount":494,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-clearfix\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/photo-1557637675-2149a5295fb7.jpeg","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/css-clearfix\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/css-clearfix\/","url":"https:\/\/careerkarma.com\/blog\/css-clearfix\/","name":"CSS Tutorials: CSS Clearfix | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-clearfix\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-clearfix\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/photo-1557637675-2149a5295fb7.jpeg","datePublished":"2020-07-02T22:44:35+00:00","dateModified":"2020-07-24T11:00:40+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e"},"description":"When using float properties, a situation may arise when you need to use what\u2019s called the clearfix \u201chack\u201d. This is how to implement it.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/css-clearfix\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/css-clearfix\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/css-clearfix\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/photo-1557637675-2149a5295fb7.jpeg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/photo-1557637675-2149a5295fb7.jpeg","width":1000,"height":667},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/css-clearfix\/#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":"When and How to Use the CSS Clearfix Hack"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News & 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\/ae0cdc4a5d198690d78482646894074e","name":"Christina Kopecky","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg","caption":"Christina Kopecky"},"description":"Christina is an experienced technical writer, covering topics as diverse as Java, SQL, Python, and web development. She earned her Master of Music in flute performance from the University of Kansas and a bachelor's degree in music with minors in French and mass communication from Southeast Missouri State. Prior to joining the Career Karma team in June 2020, Christina was a teaching assistant, team lead, and section lead at Lambda School, where she led student groups, performed code and project reviews, and debugged problems for students. Christina's technical content is featured frequently in publications like Codecademy, Repl.it, and Educative.","sameAs":["http:\/\/www.linkedin.com\/in\/cmvnk"],"url":"https:\/\/careerkarma.com\/blog\/author\/christina-kopecky\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/18932","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\/77"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=18932"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/18932\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/18934"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=18932"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=18932"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=18932"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}