{"id":8677,"date":"2024-01-20T17:55:00","date_gmt":"2024-01-20T17:55:00","guid":{"rendered":"https:\/\/codehim.com\/?p=8677"},"modified":"2024-01-22T15:55:37","modified_gmt":"2024-01-22T10:55:37","slug":"css-image-grid-different-sizes","status":"publish","type":"post","link":"https:\/\/codehim.com\/html5-css3\/css-image-grid-different-sizes\/","title":{"rendered":"CSS Image Grid Different Sizes"},"content":{"rendered":"<p>This HTML &amp; CSS code snippet helps you to arrange your images in a responsive grid layout with different sizes. It utilizes <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/grid\" target=\"_blank\" rel=\"noopener\">CSS grid properties<\/a> to arrange images with various sizes and positions.<\/p>\n<p>You can use this grid layout image in your gallery project, photography website, or personal portfolio to showcase your work. Moreover, you can customize the design and layout according to your needs.<\/p>\n<h2>How to Create CSS Image Grid Different Sizes<\/h2>\n<p>1. First, let&#8217;s set up the HTML structure for our image grid. Place the following code within the <code>&lt;body&gt;<\/code> of your HTML document:<\/p>\n<pre class=\"prettyprint linenums lang-html\">&lt;div class=\"parent\"&gt;\r\n    &lt;img class=\"general val1\" src=\"https:\/\/cdn.pixabay.com\/photo\/2023\/07\/11\/17\/24\/ai-generated-8121001_1280.jpg\" \/&gt;\r\n    &lt;img class=\"general val2\" src=\"https:\/\/cdn.pixabay.com\/photo\/2023\/08\/03\/13\/49\/ai-generated-8167209_640.png\" \/&gt;\r\n    &lt;img class=\"general val3\" src=\"https:\/\/cdn.pixabay.com\/photo\/2022\/12\/03\/16\/26\/crater-7633035_640.png\" \/&gt;\r\n    &lt;img class=\"general val4\" src=\"https:\/\/cdn.pixabay.com\/photo\/2023\/08\/04\/08\/35\/ai-generated-8168687_640.jpg\" \/&gt;\r\n    &lt;img class=\"general val5\" src=\"https:\/\/cdn.pixabay.com\/photo\/2023\/07\/28\/12\/29\/ai-generated-8155175_640.png\" \/&gt;\r\n    &lt;img class=\"general val6\" src=\"https:\/\/cdn.pixabay.com\/photo\/2023\/02\/20\/20\/44\/ai-generated-7803070_640.jpg\" \/&gt;\r\n    &lt;img class=\"general val7\" src=\"https:\/\/cdn.pixabay.com\/photo\/2023\/07\/03\/09\/36\/ai-generated-8103801_1280.jpg\" \/&gt;\r\n    &lt;img class=\"general val8\" src=\"https:\/\/cdn.pixabay.com\/photo\/2023\/02\/17\/10\/44\/ai-generated-7795744_640.jpg\" \/&gt;\r\n    &lt;img class=\"general val9\" src=\"https:\/\/cdn.pixabay.com\/photo\/2023\/08\/03\/11\/57\/ai-generated-8166964_640.jpg\" \/&gt;\r\n  &lt;\/div&gt;<\/pre>\n<p>Make sure each image has a unique class name (e.g., <code>val1<\/code>, <code>val2<\/code>, etc.) and a valid <code>src<\/code> attribute pointing to your image file.<\/p>\n<p>2. Now, it&#8217;s time to style our <a href=\"https:\/\/codehim.com\/html5-css3\/3x3-image-grid-in-html-and-css\/\" target=\"_blank\" rel=\"noopener\">image grid<\/a>. The following CSS code will help you achieve the desired layout. Ensure that you include this CSS code within your HTML document or link to an external CSS file.<\/p>\n<p>It\u00a0creates a responsive grid using CSS grid properties. It also assigns specific columns and rows for each image class, which will determine their positions and sizes within the grid.<\/p>\n<pre class=\"prettyprint linenums lang-css\">body{\r\n  background-color: black;\r\n}\r\n\r\n.parent {\r\n  display: grid;\r\n  grid-template-columns: repeat(4, 1fr);\r\n  grid-column-gap: 10px;\r\n  grid-row-gap: 10px;\r\n}\r\n\r\n.general {\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n\r\n.val1 {\r\n  grid-column: 1 \/ span 1;\r\n  grid-row: 1 \/ span 1;\r\n}\r\n\r\n.val2 {\r\n  grid-column: 2 \/ span 1;\r\n  grid-row: 1 \/ span 1;\r\n}\r\n\r\n.val3 {\r\n  grid-column: 3 \/ span 1;\r\n  grid-row: 1 \/ span 2;\r\n}\r\n\r\n.val4 {\r\n  grid-column: 4 \/ span 1;\r\n  grid-row: 1 \/ span 1;\r\n}\r\n\r\n.val5 {\r\n  grid-column: 1 \/ span 2;\r\n  grid-row: 2 \/ span 1;\r\n}\r\n\r\n.val6 {\r\n  grid-column: 4 \/ span 1;\r\n  grid-row: 2 \/ span 2;\r\n}\r\n\r\n.val7 {\r\n  grid-column: 1 \/ span 2;\r\n  grid-row: 3 \/ span 2;\r\n}\r\n\r\n.val8 {\r\n  grid-column: 3 \/ span 1;\r\n  grid-row: 3 \/ span 1;\r\n}\r\n\r\n.val9 {\r\n  grid-column: 3 \/ span 2;\r\n  grid-row: 4 \/ span 1;\r\n}\r\n\r\n@media (min-width: 320px) {\r\n  .parent {\r\n    margin: 20px;\r\n  }\r\n}\r\n\r\n@media (min-width: 480px) {\r\n  .parent {\r\n    margin: 20px 50px;\r\n  }\r\n}\r\n\r\n@media (min-width: 600px) {\r\n  .parent {\r\n    margin: 50px 150px;\r\n  }\r\n}\r\n\r\n@media (min-width: 801px) {\r\n  .parent {\r\n    margin: 50px 200px;\r\n  }\r\n}\r\n\r\n@media (min-width: 1025px) {\r\n  .parent {\r\n    margin: 50px 300px;\r\n  }\r\n}<\/pre>\n<p>That&#8217;s all! You&#8217;ve successfully created a responsive CSS image grid with different sizes. This code allows you to showcase your images in an elegant and organized manner on your website. If you have any questions or suggestions, feel free to comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This HTML &amp; CSS code snippet helps you to arrange your images in a responsive grid layout with different sizes&#8230;.<\/p>\n","protected":false},"author":1,"featured_media":8683,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[63],"tags":[],"class_list":["post-8677","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html5-css3"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>CSS Image Grid Different Sizes &#8212; CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a free code snippet to create a CSS Image Grid Different Sizes. You can view demo and download the source code.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codehim.com\/html5-css3\/css-image-grid-different-sizes\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Image Grid Different Sizes &#8212; CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a free code snippet to create a CSS Image Grid Different Sizes. You can view demo and download the source code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/html5-css3\/css-image-grid-different-sizes\/\" \/>\n<meta property=\"og:site_name\" content=\"CodeHim\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codehimofficial\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-20T17:55:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-22T10:55:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/09\/CSS-Image-Grid-Different-Sizes.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"960\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Asif Mughal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:site\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Asif Mughal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codehim.com\/html5-css3\/css-image-grid-different-sizes\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/css-image-grid-different-sizes\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"CSS Image Grid Different Sizes\",\"datePublished\":\"2024-01-20T17:55:00+00:00\",\"dateModified\":\"2024-01-22T10:55:37+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/css-image-grid-different-sizes\/\"},\"wordCount\":233,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/css-image-grid-different-sizes\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/09\/CSS-Image-Grid-Different-Sizes.png\",\"articleSection\":[\"HTML5 &amp; CSS3\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/html5-css3\/css-image-grid-different-sizes\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/html5-css3\/css-image-grid-different-sizes\/\",\"url\":\"https:\/\/codehim.com\/html5-css3\/css-image-grid-different-sizes\/\",\"name\":\"CSS Image Grid Different Sizes &#8212; CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/css-image-grid-different-sizes\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/css-image-grid-different-sizes\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/09\/CSS-Image-Grid-Different-Sizes.png\",\"datePublished\":\"2024-01-20T17:55:00+00:00\",\"dateModified\":\"2024-01-22T10:55:37+00:00\",\"description\":\"Here is a free code snippet to create a CSS Image Grid Different Sizes. You can view demo and download the source code.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/css-image-grid-different-sizes\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/html5-css3\/css-image-grid-different-sizes\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/html5-css3\/css-image-grid-different-sizes\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/09\/CSS-Image-Grid-Different-Sizes.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/09\/CSS-Image-Grid-Different-Sizes.png\",\"width\":1280,\"height\":960,\"caption\":\"CSS Image Grid Different Sizes\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/html5-css3\/css-image-grid-different-sizes\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML5 &amp; CSS3\",\"item\":\"https:\/\/codehim.com\/category\/html5-css3\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"CSS Image Grid Different Sizes\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codehim.com\/#website\",\"url\":\"https:\/\/codehim.com\/\",\"name\":\"CodeHim\",\"description\":\"Web Design Code Snippets\",\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"alternateName\":\"Web Design Codes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codehim.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/codehim.com\/#organization\",\"name\":\"CodeHim - Web Design Code & Scripts\",\"url\":\"https:\/\/codehim.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"contentUrl\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"width\":280,\"height\":280,\"caption\":\"CodeHim - Web Design Code & Scripts\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/codehimofficial\",\"https:\/\/x.com\/CodeHimOfficial\",\"https:\/\/www.instagram.com\/codehim\/\",\"https:\/\/www.linkedin.com\/company\/codehim\",\"https:\/\/co.pinterest.com\/codehim\/\",\"https:\/\/www.youtube.com\/@codehim\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\",\"name\":\"Asif Mughal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"caption\":\"Asif Mughal\"},\"description\":\"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.\",\"sameAs\":[\"https:\/\/codehim.com\"],\"url\":\"https:\/\/codehim.com\/author\/asif-mughal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Image Grid Different Sizes &#8212; CodeHim","description":"Here is a free code snippet to create a CSS Image Grid Different Sizes. You can view demo and download the source code.","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:\/\/codehim.com\/html5-css3\/css-image-grid-different-sizes\/","og_locale":"en_US","og_type":"article","og_title":"CSS Image Grid Different Sizes &#8212; CodeHim","og_description":"Here is a free code snippet to create a CSS Image Grid Different Sizes. You can view demo and download the source code.","og_url":"https:\/\/codehim.com\/html5-css3\/css-image-grid-different-sizes\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-01-20T17:55:00+00:00","article_modified_time":"2024-01-22T10:55:37+00:00","og_image":[{"width":1280,"height":960,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/09\/CSS-Image-Grid-Different-Sizes.png","type":"image\/png"}],"author":"Asif Mughal","twitter_card":"summary_large_image","twitter_creator":"@CodeHimOfficial","twitter_site":"@CodeHimOfficial","twitter_misc":{"Written by":"Asif Mughal","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/html5-css3\/css-image-grid-different-sizes\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/html5-css3\/css-image-grid-different-sizes\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"CSS Image Grid Different Sizes","datePublished":"2024-01-20T17:55:00+00:00","dateModified":"2024-01-22T10:55:37+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/html5-css3\/css-image-grid-different-sizes\/"},"wordCount":233,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/html5-css3\/css-image-grid-different-sizes\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/09\/CSS-Image-Grid-Different-Sizes.png","articleSection":["HTML5 &amp; CSS3"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/html5-css3\/css-image-grid-different-sizes\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/html5-css3\/css-image-grid-different-sizes\/","url":"https:\/\/codehim.com\/html5-css3\/css-image-grid-different-sizes\/","name":"CSS Image Grid Different Sizes &#8212; CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/html5-css3\/css-image-grid-different-sizes\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/html5-css3\/css-image-grid-different-sizes\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/09\/CSS-Image-Grid-Different-Sizes.png","datePublished":"2024-01-20T17:55:00+00:00","dateModified":"2024-01-22T10:55:37+00:00","description":"Here is a free code snippet to create a CSS Image Grid Different Sizes. You can view demo and download the source code.","breadcrumb":{"@id":"https:\/\/codehim.com\/html5-css3\/css-image-grid-different-sizes\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/html5-css3\/css-image-grid-different-sizes\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/html5-css3\/css-image-grid-different-sizes\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/09\/CSS-Image-Grid-Different-Sizes.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/09\/CSS-Image-Grid-Different-Sizes.png","width":1280,"height":960,"caption":"CSS Image Grid Different Sizes"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/html5-css3\/css-image-grid-different-sizes\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"HTML5 &amp; CSS3","item":"https:\/\/codehim.com\/category\/html5-css3\/"},{"@type":"ListItem","position":3,"name":"CSS Image Grid Different Sizes"}]},{"@type":"WebSite","@id":"https:\/\/codehim.com\/#website","url":"https:\/\/codehim.com\/","name":"CodeHim","description":"Web Design Code Snippets","publisher":{"@id":"https:\/\/codehim.com\/#organization"},"alternateName":"Web Design Codes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codehim.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codehim.com\/#organization","name":"CodeHim - Web Design Code & Scripts","url":"https:\/\/codehim.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/","url":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","contentUrl":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","width":280,"height":280,"caption":"CodeHim - Web Design Code & Scripts"},"image":{"@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codehimofficial","https:\/\/x.com\/CodeHimOfficial","https:\/\/www.instagram.com\/codehim\/","https:\/\/www.linkedin.com\/company\/codehim","https:\/\/co.pinterest.com\/codehim\/","https:\/\/www.youtube.com\/@codehim"]},{"@type":"Person","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed","name":"Asif Mughal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","caption":"Asif Mughal"},"description":"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.","sameAs":["https:\/\/codehim.com"],"url":"https:\/\/codehim.com\/author\/asif-mughal\/"}]}},"views":4028,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/8677","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/comments?post=8677"}],"version-history":[{"count":0,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/8677\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/8683"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=8677"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=8677"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=8677"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}