{"publication":{"id":"638a06eb8f2eee71dfe72a98","posts":{"edges":[{"node":{"__typename":"Post","id":"63a309e02864652057864b6b","title":"CSS positioning","slug":"css-positioning","publishedAt":"2022-12-21T13:28:00.084Z","cuid":"clbxowvh0000408jqbotgg875","url":"https://kiranwriteups.hashnode.dev/css-positioning","subtitle":"In this article we are going to understand CSS positioning.","brief":"Positionings\nThere are mainly 5 positions are there,\n\nStatic\n\nRelative\n\nAbsolute\n\nFixed\n\nSticky\nposition: static\nThis is the default position in CSS we can't use properties like top, right, bottom, left, and Z-index properties.\n\n\noutput: By browser d...","readTimeInMinutes":2,"views":22,"author":{"__typename":"User","id":"638a044fc9c4b3711abf1399","username":"KiranM","name":"Kiran Madiwalar","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1670078800702/bvi6dP8os.jpeg","followersCount":0},"coverImage":{"__typename":"PostCoverImage","url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1671627381303/dqTsShYVU.jpg","isPortrait":false,"isAttributionHidden":false}},"cursor":"NjNhMzA5ZTAyODY0NjUyMDU3ODY0YjZiXzIwMjItMTItMjFUMTM6Mjg6MDAuMDg0Wg==","__typename":"PostEdge"},{"node":{"__typename":"Post","id":"63a300914ebf7572e67bec66","title":"CSS Grid","slug":"css-grid","publishedAt":"2022-12-21T12:48:17.010Z","cuid":"clbxnhsoh000308mphxcpdctp","url":"https://kiranwriteups.hashnode.dev/css-grid","subtitle":"In this article we can understand about grid in CSS.","brief":"Gird\nIt is a set of horizontal and verticle lines of rows and columns, elements are placed with the lines of rows and columns.\nGrid container\nWe can create a grid by declaring display: grid; in CSS on an element when we do this all children of the el...","readTimeInMinutes":2,"views":28,"author":{"__typename":"User","id":"638a044fc9c4b3711abf1399","username":"KiranM","name":"Kiran Madiwalar","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1670078800702/bvi6dP8os.jpeg","followersCount":0},"coverImage":{"__typename":"PostCoverImage","url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1671626826110/_Me79yLFE.jpg","isPortrait":false,"isAttributionHidden":false}},"cursor":"NjNhMzAwOTE0ZWJmNzU3MmU2N2JlYzY2XzIwMjItMTItMjFUMTI6NDg6MTcuMDEwWg==","__typename":"PostEdge"},{"node":{"__typename":"Post","id":"63a2a5f45688fe4efa091ea1","title":"Media Querry","slug":"media-querry","publishedAt":"2022-12-21T06:21:40.161Z","cuid":"clbx9olvl002c08jq49e4eg9o","url":"https://kiranwriteups.hashnode.dev/media-querry","subtitle":"In this article we can understand about media queries in breif.","brief":"Media queries allow us to apply CSS depending on various devices, it uses general types like screen, print, and based on resolution also with browser viewport width it will start to apply.\nMedia types\nIt is a category of devices, almost websites are ...","readTimeInMinutes":1,"views":22,"author":{"__typename":"User","id":"638a044fc9c4b3711abf1399","username":"KiranM","name":"Kiran Madiwalar","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1670078800702/bvi6dP8os.jpeg","followersCount":0},"coverImage":{"__typename":"PostCoverImage","url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1671603538574/RyKgH15jH.png","isPortrait":false,"isAttributionHidden":false}},"cursor":"NjNhMmE1ZjQ1Njg4ZmU0ZWZhMDkxZWExXzIwMjItMTItMjFUMDY6MjE6NDAuMTYxWg==","__typename":"PostEdge"},{"node":{"__typename":"Post","id":"63a29c46c0f1c5808a226945","title":"CSS Box Model","slug":"css-box-model","publishedAt":"2022-12-21T05:40:22.718Z","cuid":"clbx87i9q000208l2ara0a7as","url":"https://kiranwriteups.hashnode.dev/css-box-model","subtitle":"In this article we are going to see CSS box model properties.","brief":"The Box model consists of margins, borders, padding and content.\n\nContent\nthis is the place where texts and images appear in the box.\nPadding\nIt adds space around the content and it is transparent. and we can say that padding is an area created insid...","readTimeInMinutes":1,"views":34,"author":{"__typename":"User","id":"638a044fc9c4b3711abf1399","username":"KiranM","name":"Kiran Madiwalar","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1670078800702/bvi6dP8os.jpeg","followersCount":0},"coverImage":{"__typename":"PostCoverImage","url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1671601619757/q1aNdz_Nr.png","isPortrait":false,"isAttributionHidden":false}},"cursor":"NjNhMjljNDZjMGYxYzU4MDhhMjI2OTQ1XzIwMjItMTItMjFUMDU6NDA6MjIuNzE4Wg==","__typename":"PostEdge"},{"node":{"__typename":"Post","id":"639c0de6f55e3b3ffbc2317c","title":"Flex-Box","slug":"flex-box","publishedAt":"2022-12-16T06:19:18.821Z","cuid":"clbq4ebhh000b08js0u5u63du","url":"https://kiranwriteups.hashnode.dev/flex-box","subtitle":"In this article we are going to understand about flexbox in brief.","brief":"First mainly flex-box is a CSS element.\nFlex-box is a one-dimensional layout method for arranging items in rows or columns.\nflex expand to fill additional space or shrink to fit into smaller spaces.\nIn flex-box it provides a property called flex-dire...","readTimeInMinutes":2,"views":39,"author":{"__typename":"User","id":"638a044fc9c4b3711abf1399","username":"KiranM","name":"Kiran Madiwalar","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1670078800702/bvi6dP8os.jpeg","followersCount":0},"coverImage":{"__typename":"PostCoverImage","url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1671170461608/3svwnb56j.jpg","isPortrait":false,"isAttributionHidden":false}},"cursor":"NjM5YzBkZTZmNTVlM2IzZmZiYzIzMTdjXzIwMjItMTItMTZUMDY6MTk6MTguODIxWg==","__typename":"PostEdge"},{"node":{"__typename":"Post","id":"6395e4f7aa513b26339cf694","title":"Audio and video tags","slug":"audio-and-video-tags","publishedAt":"2022-12-11T14:11:03.662Z","cuid":"clbjg1qb2000208jr8l425gj6","url":"https://kiranwriteups.hashnode.dev/audio-and-video-tags","subtitle":"In this article we are understanding about audio and video tags in HTML.","brief":"

Heading is here