{"id":3999,"date":"2023-06-13T06:00:49","date_gmt":"2023-06-12T22:00:49","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=3999"},"modified":"2023-06-12T21:34:14","modified_gmt":"2023-06-12T13:34:14","slug":"20-useful-css-tips-for-beginners","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/20-useful-css-tips-for-beginners\/","title":{"rendered":"20 Basic CSS Tips for Designers"},"content":{"rendered":"<p>Mastering the art of Cascading Style Sheets (CSS) is a game-changer. Whether you\u2019re a beginner dipping your toes in the web design waters or a seasoned professional looking to enhance your skill set, understanding CSS is non-negotiable.<\/p>\n<p>Welcome to our comprehensive guide, \u201c20 Basic CSS Tips for Designers.\u201d This blog post is your one-stop resource, designed to help you navigate the intricacies of CSS with ease and confidence. We\u2019ve curated a list of 20 essential CSS tips, each explained with an examples, to empower you to create more efficient, responsive, and visually appealing web designs.<\/p>\n<p>From mastering the CSS box model, positioning, and transitions, to leveraging the power of pseudo-elements and understanding the importance of cross-browser compatibility, we\u2019ve got you covered. We\u2019ll delve into the world of CSS resets, shorthand properties, media queries, and much more.<\/p>\n<p>So, whether you\u2019re designing a simple website or working on a complex web development project, these CSS tips will serve as your handy guide, ensuring your designs stand out in the crowded digital landscape<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/common-css-mistakes\/\" class=\"ref-block__link\" title=\"Read More: 10 Common CSS Mistakes Developers Often Make\" rel=\"bookmark\"><span class=\"screen-reader-text\">10 Common CSS Mistakes Developers Often Make<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/common-css-mistakes.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-67307 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/common-css-mistakes.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">10 Common CSS Mistakes Developers Often Make<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tHow to avoid these common pitfalls to write cleaner, more efficient CSS code.\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h3>1. Use CSS Reset<\/h3>\n<p>CSS Reset helps to reduce browser inconsistencies by providing a clean slate for styling elements. For example, you can use the following <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/meyerweb.com\/eric\/tools\/css\/reset\/\">CSS reset by Eric Meyer:<\/a><\/p>\n<pre>\r\nhtml, body, div, span, applet, object, iframe,\r\nh1, h2, h3, h4, h5, h6, p, blockquote, pre,\r\na, abbr, acronym, address, big, cite, code,\r\ndel, dfn, em, img, ins, kbd, q, s, samp,\r\nsmall, strike, strong, sub, sup, tt, var,\r\nb, u, i, center,\r\ndl, dt, dd, ol, ul, li,\r\nfieldset, form, label, legend,\r\ntable, caption, tbody, tfoot, thead, tr, th, td,\r\narticle, aside, canvas, details, embed, \r\nfigure, figcaption, footer, header, hgroup, \r\nmenu, nav, output, ruby, section, summary,\r\ntime, mark, audio, video {\r\n    margin: 0;\r\n    padding: 0;\r\n    border: 0;\r\n    font-size: 100%;\r\n    font: inherit;\r\n    vertical-align: baseline;\r\n}<\/pre>\n<hr>\n<h3>2. Use Shorthand Properties<\/h3>\n<p>Shorthand properties can help you write cleaner code and save time. For example, instead of writing:<\/p>\n<pre>\r\nmargin-top: 10px;\r\nmargin-right: 20px;\r\nmargin-bottom: 10px;\r\nmargin-left: 20px;<\/pre>\n<p>You can write:<\/p>\n<pre>\r\nmargin: 10px 20px;\r\n<\/pre>\n<hr>\n<h3>3. Use CSS Variables<\/h3>\n<p>CSS variables, also known as custom properties, allow you to store specific values to reuse throughout your CSS.<\/p>\n<p><strong>Example:<\/strong><\/p>\n<pre>\r\n:root {\r\n    --main-color: #c06c84;\r\n}\r\n\r\nbody {\r\n    background-color: var(--main-color);\r\n}<\/pre>\n<hr>\n<h3>4. Use Flexbox and Grid for Layouts<\/h3>\n<p>Flexbox and Grid are powerful layout systems in CSS. They can make creating complex layouts easier. For example, to create a simple flex container:<\/p>\n<pre>\r\n.container {\r\n    display: flex;\r\n}<\/pre>\n<hr>\n<h3>5. Use Media Queries for Responsive Design<\/h3>\n<p>Media queries allow you to apply different styles for different devices or screen widths.<\/p>\n<p><strong>Example:<\/strong><\/p>\n<pre>\r\n@media (max-width: 600px) {\r\n    body {\r\n        background-color: lightblue;\r\n    }\r\n}<\/pre>\n<hr>\n<h3>6. Use the Cascade to Your Advantage<\/h3>\n<p>CSS stands for Cascading Style Sheets, and understanding how the cascade works can help you write more efficient code. For example, you can set global styles and then override them for specific elements or components.<\/p>\n<hr>\n<h3>7. Understand Specificity<\/h3>\n<p>CSS specificity determines which CSS rule is applied by the browsers. It\u2019s calculated based on the number of <code>ID<\/code> selectors, <code>class<\/code> selectors, and <code>type<\/code> selectors. For example, an <code>ID<\/code> selector has a higher specificity than <code>class<\/code> selectors and <code>type<\/code> selectors.<\/p>\n<hr>\n<h3>8. Use Pseudo-classes and Pseudo-elements<\/h3>\n<p>Pseudo-classes and pseudo-elements allow you to style specific parts of an element. For example, you can style the hover state of a button:<\/p>\n<pre>\r\nbutton:hover {\r\n    background-color: blue;\r\n}<\/pre>\n<hr>\n<h3>9. Use CSS Functions<\/h3>\n<p>CSS functions can be used to make your code more dynamic. For example, the <code>calc()<\/code> function can be used to calculate values:<\/p>\n<pre>\r\n.element {\r\n    width: calc(100% - 80px);\r\n}<\/pre>\n<hr>\n<h3>10. Use Comments to Organize Your Code<\/h3>\n<p><a href=\"https:\/\/www.hongkiat.com\/blog\/source-code-comment-styling-tips\/\">Comments<\/a> can help you and others understand your code better. They can be used to section off parts of your CSS for easier navigation.<\/p>\n<p><strong>Example:<\/strong><\/p>\n<pre>\r\n\/* This is a comment *\/\r\nbody {\r\n    background-color: white;\r\n}<\/pre>\n<hr>\n<h3>11. Use the Box Model<\/h3>\n<p>The CSS box model is the foundation of layout design in CSS. It consists of margins, borders, padding, and the actual content.<\/p>\n<p><strong>Example:<\/strong><\/p>\n<pre>\r\n.box {\r\n    width: 300px;\r\n    border: 15px solid green;\r\n    padding: 50px;\r\n    margin: 20px;\r\n}<\/pre>\n<hr>\n<h3>12. Understand Positioning<\/h3>\n<p>CSS positioning properties (<code>static<\/code>, <code>relative<\/code>, <code>fixed<\/code>, <code>absolute<\/code>, and <code>sticky<\/code>) allow you to control the layout of elements. For example, to position an element relative to its normal position:<\/p>\n<pre>\r\n.element {\r\n    position: relative;\r\n    top: 20px;\r\n    left: 30px;\r\n}<\/pre>\n<hr>\n<h3>13. Use <code>em<\/code> and <code>rem<\/code> Units<\/h3>\n<p><code>em<\/code> and <code>rem<\/code> are scalable units in CSS. <code>em<\/code> is relative to the font-size of its closest parent, while <code>rem<\/code> is relative to the root element\u2019s font-size.<\/p>\n<p><strong>Example:<\/strong><\/p>\n<pre>\r\n.element {\r\n    font-size: 2em; \/* 2 times the font-size of the parent element *\/\r\n}<\/pre>\n<hr>\n<h3>14. Use <code>:before<\/code> and <code>:after<\/code> Pseudo-elements<\/h3>\n<p>These pseudo-elements can be used to insert content before or after an element\u2019s content.<\/p>\n<p><strong>Example:<\/strong><\/p>\n<pre>\r\n.element:before {\r\n    content: \"Before\";\r\n}\r\n\r\n.element:after {\r\n    content: \"After\";\r\n}<\/pre>\n<hr>\n<h3>15. Use Vendor Prefixes for Cross-Browser Compatibility<\/h3>\n<p>Vendor prefixes ensure that CSS properties work across different browsers.<\/p>\n<p><strong>Example:<\/strong><\/p>\n<pre>\r\n.element {\r\n    -webkit-transform: rotate(30deg);\r\n    -moz-transform: rotate(30deg);\r\n    -ms-transform: rotate(30deg);\r\n    transform: rotate(30deg);\r\n}<\/pre>\n<hr>\n<h3>16. Use <code>transition<\/code> for Smooth Animations<\/h3>\n<p>The <code>transition<\/code> property can animate changes in CSS properties over a specified duration.<\/p>\n<p><strong>Example:<\/strong><\/p>\n<pre>\r\n.element {\r\n    transition: background-color 0.5s ease;\r\n}\r\n\r\n.element:hover {\r\n    background-color: red;\r\n}<\/pre>\n<hr>\n<h3>17. Use <code>rgba<\/code> for Transparency<\/h3>\n<p>The <code>rgba<\/code> function can be used to set colors with alpha transparency.<\/p>\n<p><strong>Example:<\/strong><\/p>\n<pre>\r\n.element {\r\n    background-color: rgba(255, 0, 0, 0.5); \/* semi-transparent red *\/\r\n}<\/pre>\n<hr>\n<h3>18. Use <code>transform<\/code> for 2D and 3D Transformations<\/h3>\n<p>The <code>transform<\/code> property can be used to rotate, scale, skew, or translate an element.<\/p>\n<p><strong>Example:<\/strong><\/p>\n<pre>\r\n.element {\r\n    transform: rotate(30deg);\r\n}<\/pre>\n<hr>\n<h3>19. Use <code>@import<\/code> to Include External CSS<\/h3>\n<p>The <code>@import<\/code> rule allows you to include external CSS files.<\/p>\n<p><strong>Example:<\/strong><\/p>\n<pre>\r\n@import url(\"styles.css\");\r\n<\/pre>\n<hr>\n<h3>20. Use <code>!important<\/code> Sparingly<\/h3>\n<p>The <code>!important<\/code> rule overrides other declarations, but it can make debugging difficult because it breaks the natural cascading in your stylesheets. Use it sparingly and only when necessary.<\/p>\n<p><strong>Example:<\/strong><\/p>\n<pre>\r\n.element {\r\n    color: red !important;\r\n}<\/pre>","protected":false},"excerpt":{"rendered":"<p>Boost your web designs with our guide to 20 must-know CSS tips and tricks.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[507],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>20 Basic CSS Tips for Designers - Hongkiat<\/title>\n<meta name=\"description\" content=\"Boost your web designs with our guide to 20 must-know CSS tips and tricks.\" \/>\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\/20-useful-css-tips-for-beginners\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"20 Basic CSS Tips for Designers\" \/>\n<meta property=\"og:description\" content=\"Boost your web designs with our guide to 20 must-know CSS tips and tricks.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/20-useful-css-tips-for-beginners\/\" \/>\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=\"2023-06-12T22:00:49+00:00\" \/>\n<meta name=\"author\" content=\"Hongkiat Lim\" \/>\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=\"Hongkiat Lim\" \/>\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:\\\/\\\/www.hongkiat.com\\\/blog\\\/20-useful-css-tips-for-beginners\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/20-useful-css-tips-for-beginners\\\/\"},\"author\":{\"name\":\"Hongkiat Lim\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e3613a3bf757e4f67770f0b7a339edd0\"},\"headline\":\"20 Basic CSS Tips for Designers\",\"datePublished\":\"2023-06-12T22:00:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/20-useful-css-tips-for-beginners\\\/\"},\"wordCount\":681,\"commentCount\":174,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"keywords\":[\"CSS\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/20-useful-css-tips-for-beginners\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/20-useful-css-tips-for-beginners\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/20-useful-css-tips-for-beginners\\\/\",\"name\":\"20 Basic CSS Tips for Designers - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"datePublished\":\"2023-06-12T22:00:49+00:00\",\"description\":\"Boost your web designs with our guide to 20 must-know CSS tips and tricks.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/20-useful-css-tips-for-beginners\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/20-useful-css-tips-for-beginners\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/20-useful-css-tips-for-beginners\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"20 Basic CSS Tips for Designers\"}]},{\"@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\\\/e3613a3bf757e4f67770f0b7a339edd0\",\"name\":\"Hongkiat Lim\",\"description\":\"Founder and Editor in Chief of Hongkiat.com. Hongkiat is also a designer, developer, entrepreneur, and an active investor in the US stock market.\",\"sameAs\":[\"http:\\\/\\\/www.hongkiat.com\\\/blog\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/hongkiat\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"20 Basic CSS Tips for Designers - Hongkiat","description":"Boost your web designs with our guide to 20 must-know CSS tips and tricks.","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\/20-useful-css-tips-for-beginners\/","og_locale":"en_US","og_type":"article","og_title":"20 Basic CSS Tips for Designers","og_description":"Boost your web designs with our guide to 20 must-know CSS tips and tricks.","og_url":"https:\/\/www.hongkiat.com\/blog\/20-useful-css-tips-for-beginners\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2023-06-12T22:00:49+00:00","author":"Hongkiat Lim","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Hongkiat Lim","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/20-useful-css-tips-for-beginners\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/20-useful-css-tips-for-beginners\/"},"author":{"name":"Hongkiat Lim","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e3613a3bf757e4f67770f0b7a339edd0"},"headline":"20 Basic CSS Tips for Designers","datePublished":"2023-06-12T22:00:49+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/20-useful-css-tips-for-beginners\/"},"wordCount":681,"commentCount":174,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"keywords":["CSS"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/20-useful-css-tips-for-beginners\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/20-useful-css-tips-for-beginners\/","url":"https:\/\/www.hongkiat.com\/blog\/20-useful-css-tips-for-beginners\/","name":"20 Basic CSS Tips for Designers - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"datePublished":"2023-06-12T22:00:49+00:00","description":"Boost your web designs with our guide to 20 must-know CSS tips and tricks.","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/20-useful-css-tips-for-beginners\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/20-useful-css-tips-for-beginners\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/20-useful-css-tips-for-beginners\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"20 Basic CSS Tips for Designers"}]},{"@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\/e3613a3bf757e4f67770f0b7a339edd0","name":"Hongkiat Lim","description":"Founder and Editor in Chief of Hongkiat.com. Hongkiat is also a designer, developer, entrepreneur, and an active investor in the US stock market.","sameAs":["http:\/\/www.hongkiat.com\/blog"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/hongkiat\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-12v","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/3999","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\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=3999"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/3999\/revisions"}],"predecessor-version":[{"id":67433,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/3999\/revisions\/67433"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=3999"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=3999"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=3999"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=3999"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}