{"componentChunkName":"component---src-templates-post-post-jsx","path":"/blog/center-align-things-with-css","result":{"data":{"markdownRemark":{"html":"

Many a time I noticed that people find it very difficult to align content to the center either vertically or horizontally using CSS 😐.\nSo I decided to write a few ways of aligning content to the center using CSS πŸ˜ƒ.

\n

Center aligning text in CSS.

\n

So let's start with the easy one aligning text to the center of the screen. To do this just use the style text-align:center on the specific tag you want to align the text to the center.

\n
<!DOCTYPE html>\n<html>\n    <head>\n        <title>center align content</title>\n    </head>\n    <body>\n\n    <h1 style=\"text-align: center;\">πŸ” is center aligned</h1>\n    <p>πŸ’ still in left</p>\n\n    </body>\n</html>
\n

aligning content to the center

\n

Now let's get into a little complicated stuff. Aligning a div or any content to the center. So the trick is using margin:auto and giving a specific width to the div. This will get the div aligned horizontally center to the parent element.

\n
<!DOCTYPE html>\n<html>\n    <head>\n        <title>center align content</title>\n    </head>\n    <style>\n        body{\n            margin: 0;\n        }\n        .box{\n            height:25rem;\n            background-color: blueviolet;\n            width: 25rem;\n            margin: auto;\n        }\n    </style>\n    <body>\n            <div class=\"box\"></div>\n    </body>\n</html>
\n

To align an image to the center for an img tag you need to just add one more CSS property that is display:block.

\n
<!DOCTYPE html>\n<html>\n    <head>\n        <title>center align content</title>\n    </head>\n    <style>\n        body{\n            margin: 0;\n        }\n        .imgCenter{\n            display: block;\n            background-color: blueviolet;\n            margin: auto;\n        }\n    </style>\n    <body>\n            <img class=\"imgCenter\" src=\"https://i.chzbgr.com/full/7588073728/h78549C5D/not-sure-if-i-hate-css-or-i-hate-designers\"/>\n    </body>\n</html>
\n

Suppose you want to align a div both vertically and horizontally to the center of the parent element then you can do that with the below code.

\n
<!DOCTYPE html>\n<html>\n<head>\n<style>\n.centerBox {\n  margin: 0;\n  position: absolute;\n  background-color: blue;\n  height:15rem;\n  width:15rem;\n  top: 50%;\n  left:50%;\n  -ms-transform: translate(-50%, -50%);\n  transform: translate(-50%, -50%);\n}\n</style>\n</head>\n<body>\n  <div class=\"centerBox\"></div>\n</body>\n</html>
\n

Using flex to align content to the center

\n

A still better way of aligning content to the center is by using the flex properties.

\n

Suppose you want to align a div horizontally to the center of the parent element. Then you need to apply the display: flex; align-items: center; justify-content: center; properties to the parent element.

\n
<!DOCTYPE html>\n<html>\n    <head>\n        <title>center align content</title>\n    </head>\n    <style>\n        body{\n            margin: 0;\n        }\n        .container {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n        }\n\n        .box{\n            width: 100px;\n            height: 100px;\n            background-color: blueviolet;\n        }\n      \n    </style>\n    <body>\n          <div class=\"container\">\n              <div class=\"box\"></div>\n          </div>  \n    </body>\n</html>
\n

Suppose you want to vertically and horizontally align a div to the center of the parent element then you need to add the following style to html and body tag.

\n

html, body { height: 100%; } and give some height to the parent element.

\n

That's it your content should be vertically and horizontally aligned to the parent element. The below snippet shows how a div can be aligned to the center.

\n
<!DOCTYPE html>\n<html>\n    <head>\n        <title>center align content</title>\n    </head>\n    <style>\n        html, body {\n            height: 100%;\n        }\n        body{\n            margin: 0;\n        }\n        .container {\n            height: 100%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n        }\n\n        .box{\n            width: 100px;\n            height: 100px;\n            background-color: blueviolet;\n        }\n      \n    </style>\n    <body>\n          <div class=\"container\">\n              <div class=\"box\"></div>\n          </div>  \n    </body>\n</html>
\n

Congrats we are at the end of this post. I hope you enjoyed the topic.

","timeToRead":3,"frontmatter":{"title":"Center aligning content with CSS and flex-box","date":"15 May 2020","tags":["html","css","reactjs"],"path":"blog/center-align-things-with-css","excerpt":"Many a time I noticed that people find it very difficult to align content to the center either vertically or horizontally using CSS. So let's see few ways in how you can align content with css.","cover":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='267'%20viewBox='0%200%20400%20267'%20preserveAspectRatio='none'%3e%3cpath%20d='M0%20134v133h401V0H0v134m41-69v12h154V52H41v13m167-1v12h72V52h-72v12m81%202l1%2015h72V52h-73v14m-81%2023v7h72V81h-72v8M42%2084l-1%2026v25h73V84l-36-1-36%201m81%201v83h72V83h-36c-33%200-36%200-36%202m166%2011v10h73V86h-73v10m-81%2018v13h72v-26h-72v13m82%205v7h71v-15h-71v8m-82%2031v18h153v-36H208v18m-167%203l1%2015h71v-29H41v14m42%2032c-5%202-6%205-6%209%200%206%202%208%2012%2010%204%201%204%203%201%204-2%201-3%201-5-1-3-2-9-2-9%201l4%205c7%207%2019%202%2019-7%200-5-2-8-9-9-4%200-7-2-6-4s6-1%207%201c1%201%207%202%207%200%201-1-1-6-3-7-4-3-9-3-12-2m31%200a9%209%200%20002%2018c7%202%209%204%203%205l-4-1-4-1c-5-1-5%203-2%207%204%204%2015%204%2019%200%205-7%202-14-7-16-5%200-5-1-5-3s5-3%206-1c1%203%207%203%207%200%200-5-7-10-11-9l-4%201m197%201l-5%201-2%204c-4%205-4%2013-1%2018%206%2010%2021%209%2026-1%206-14-5-27-18-22m-265%202c-11%209-6%2027%209%2027%206%201%2010-2%2012-7%202-4%202-5-2-5-3%200-4%201-5%203-4%205-13%200-12-7s7-9%2011-4l6%202c4%200%204-1%202-5-3-7-15-10-21-4m109%2012l1%2015h3l4%201v-10h9v-8h-4c-5%200-5%200-5-3s0-3%205-3%205%200%205-3c1-4%201-4-9-4h-9v15m28%200v16h18v-8h-10v-22l-4-1h-4v15m27%200v16h18v-8h-5c-5%200-5%200-5-3%200-2%200-2%204-2l5%201v-8h-4c-4%200-5%200-5-2s1-2%203-2c7%200%207%200%207-3v-4h-18v15m26-15l4%208%204%206-2%204-5%208c-2%204-2%205%203%205%203-1%204-1%206-5%202-5%204-4%206%201l2%203c9%202%209%200%204-8l-5-8%204-6c5-8%205-8%200-8-3%200-4%200-6%204l-2%203-2-3c-2-4-3-4-7-4h-4m34%2015l1%2015h9c8%200%209-1%2011-3%202-3%203-8%201-11-1-1-2-2-1-4%202-4%201-6-2-9s-3-3-11-3h-8v15m67-14l4%207%204%206-5%207c-5%208-5%2010-2%209h4l4-4c3-5%203-5%206%200%202%204%203%204%207%204s4%200-1-8-5-7%200-15c4-7%204-7-1-7-3%200-4%200-5%204l-3%203-2-3c-2-4-2-4-6-4l-4%201m-26%209c-5%207%203%2017%209%2011%202-2%203-9%201-11-2-3-8-3-10%200'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.4970059880239521,"src":"/static/1c65e8062d6b8d416bbfb2c1b729e891/a7715/flexbox-css.jpg","srcSet":"/static/1c65e8062d6b8d416bbfb2c1b729e891/8f7df/flexbox-css.jpg 250w,\n/static/1c65e8062d6b8d416bbfb2c1b729e891/0f3a1/flexbox-css.jpg 500w,\n/static/1c65e8062d6b8d416bbfb2c1b729e891/a7715/flexbox-css.jpg 1000w,\n/static/1c65e8062d6b8d416bbfb2c1b729e891/8e2a4/flexbox-css.jpg 1140w","sizes":"(max-width: 1000px) 100vw, 1000px"}}}}},"allMarkdownRemark":{"edges":[{"node":{"frontmatter":{"path":"blog/react–the-future-of-web-frontend","title":"React – The Future Of Web Frontend","tags":["reactjs","javascript","typescript","html","css"],"excerpt":"Working with ReactJS - A library by facebook was a great experience for me. React has made building web apps easy by making use of reusable components. This is clearly my viewpoint about the library.","cover":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='225'%20viewBox='0%200%20400%20225'%20preserveAspectRatio='none'%3e%3cpath%20d='M0%20113v112h401V0H0v113m65-36c-2%203-3%209-1%2019%200%202%200%203-5%204-7%203-13%209-13%2013s5%209%2012%2011l6%203-1%206c-3%2018%208%2023%2022%2011l4-3%203%203c12%2011%2022%208%2022-6v-6l-1-6%204-1c18-5%2018-19%201-24l-5-3%201-6c2-15-6-21-17-14l-6%204-2%202-3-2c-6-6-16-9-21-5m3%203c-1%202-2%2010-1%2015%201%203%202%203%2011%201%202%200%208-8%207-10-5-5-14-9-17-6m29%203l-6%204%203%204%204%205%2011%201%201-7c2-11-3-14-13-7m53%206c-2%202-2%203-2%2024%200%2026%200%2027%207%2027%204%200%205-2%205-12v-9h8c9%200%2012%202%2012%209%200%209%202%2012%208%2012%204%200%205-3%204-8l-1-9c0-4-1-6-4-8-2-1-2-1%200-2%208-4%208-18-1-24-4-3-33-3-36%200m183%202l-1%205c0%204%200%205-3%206-4%201-4%205%200%206h3v14c0%2013%201%2014%203%2016%204%204%2016%202%2016-2%200-2-3-4-6-4h-2v-24h3l4-1c1-3%200-5-4-5-3%200-3%200-3-3%200-7-2-9-5-9l-5%201m-173%2012v7h9c10%200%2012-1%2012-7%200-5-2-6-12-7h-9v7m-80-1l-4%207-2%204%203%206c4%206%205%207%2012%207%206%200%209-3%2012-10l2-4-3-6-4-5-7-1c-7%200-8%200-9%202m135-1c-17%204-21%2029-6%2037%2012%206%2031-1%2026-9-1-2-3-2-8%200-5%204-10%204-14%200l-3-5c0-2%200-2%2014-2%2016%200%2016%200%2014-8-3-10-13-16-23-13m42%200c-8%203-12%208-9%2012%202%202%205%201%208-1%205-5%2014-5%2014%201%200%203-1%203-11%205-12%201-17%207-14%2015%203%207%2013%209%2022%205l4-2c0%203%208%205%2010%203%201-2%200-31-2-33-4-5-14-7-22-5m45%200c-9%203-13%209-13%2020-1%2013%206%2019%2019%2019%209-1%2013-3%2015-8%201-3%201-3-1-5-3-3-4-3-8%202-7%207-15%203-15-8s9-16%2015-9c3%204%206%204%208%201%205-7-9-15-20-12m-245%205c-10%205-9%2011%203%2015l5%202%203-5c2-5%202-5%200-10-3-6-4-6-11-2m53%202c-3%206%200%2015%203%2014%2016-4%2018-11%206-17-7-3-7-3-9%203m-26%200c-6%206%203%2015%209%2010%203-2%203-6%201-9-3-4-8-4-10-1m129%203l-3%204c0%201%2013%202%2019%201%201%200-3-6-5-7-4-2-8-1-11%202m51%2013c-9%201-11%205-7%208%204%204%2013-1%2013-7v-3l-6%202m-196%206c-2%207-2%209-1%2012l3%205c3%200%2010-3%2013-7l3-2-4-5c-5-5-14-7-14-3m33-1c-2%200-5%202-6%205l-4%204%204%203c11%209%2018%206%2015-7-1-6-2-7-9-5'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.7857142857142858,"src":"/static/ca31f74a20da556b69057d20ff6abaf2/2a4de/preview.png","srcSet":"/static/ca31f74a20da556b69057d20ff6abaf2/6d161/preview.png 150w,\n/static/ca31f74a20da556b69057d20ff6abaf2/630fb/preview.png 300w,\n/static/ca31f74a20da556b69057d20ff6abaf2/2a4de/preview.png 600w,\n/static/ca31f74a20da556b69057d20ff6abaf2/db955/preview.png 900w,\n/static/ca31f74a20da556b69057d20ff6abaf2/f3583/preview.png 1200w,\n/static/ca31f74a20da556b69057d20ff6abaf2/eeb1b/preview.png 1920w","sizes":"(max-width: 600px) 100vw, 600px"}}}}}},{"node":{"frontmatter":{"path":"blog/hello-world-rolwins-first-blog","title":"Hello World - Rolwin's first blog πŸ˜‡","tags":["javascript","html","css"],"excerpt":"Blogging and writing about tech stacks is always been my thing. I like to experiment with different technologies and write my views on them. Web technologies has always been my passion. Check my blog for codebits on various web technologies.","cover":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='297'%20viewBox='0%200%20400%20297'%20preserveAspectRatio='none'%3e%3cpath%20d='M0%2029v29h3a6118%206118%200%2001171-25l10-1v-7l-3-16-1-9h-14c-12%200-14%200-14%202h-1c0-2-3-2-52-2a873%20873%200%2000-63%201L17%200H0v29M270%208l1%207-2-1h-4c-2%200-5-5-3-6l-1-2h-4c1%203%200%203-2%201-2-1-2-1-1%201l-1%203-1-2-1-1c-1-1-5%201-5%202s-2%201-6-1l-1%202v2l1%202c0%202%200%202-1%201h-2c-2%201-2%201-3-1l-3-2h-3l-6%201-3%201-2%201-2%201c-3%201-3%202-3%204%200%203%200%203-1%202s-1-1-3%201l-3%204-9%203A5943%205943%200%20010%2061a2002%202002%200%200190-10c-2%203-4-4%208%2053%2011%2054%2012%2058%2013%2058a1581%201581%200%200076-13l-2%205-4%2010-2%2010-3%2016v11h7c8%200%2018%203%2019%205%201%201-2%2012-4%2013l-1%203-2%205c-2%202-3%204-3%208%200%206-1%207-3%207h-8l-7-1h-7l2-7c3-8%203-13%200-13l-6%202a4911%204911%200%2000-42%2011c-3%200-3%200-3%203%200%206%201%2011%203%2011l1%202c-1%201%200%203%202%205%203%203%203%205%200%207l-2%204c0%202-1%203-2%203-3%201-4%201-4-5a266%20266%200%2000-4-24l-1-4-6%201-5-1%203-1v-1l-15%203-77%2013-10%202-1%2013%201%2014a671%20671%200%200041-10v-2c1-2%204%200%204%202s0%202%204%201l5-2%2014-2%2035-5c4%200%204%200%204%202s0%202%201%201a256%20256%200%20008%2030l11-8c5-4%2034-13%2036-11%201%201-1%203-7%206l-14%2010-6%206h103l104-1c2-1%205-8%204-8l2-1%204-3%201-2%201-2h2c2%200%202%200%201-1l7-2h10l-2%208-3%209-1%203h30v-41c0%205%200%205-4%206-6%202-12%202-16%201h-6l-10%202a942%20942%200%2000-59%208c-4%200-5%202-1%202%201%200%202%200%201%202l-1%201h-2l-11%202-12%202c-14%202-24-1-26-9-2-4-2-4-12-3-4%201-4%203%200%203l3%201v3h-1l-4-2-6-2c-9-1-15-5-8-5%204%200%2012-3%2012-5l2-2c2-2%201-2-3-4h-9l-9%201c-8%200-9%200-12-2l-5-2c-2%200-5-3-5-5l5-3c1%201%2013-1%2015-2%202-2%203-2%208-1l12%202c3%200%207%202%2015%206%2015%2010%2015%2010%2025%2010%2019-1%2052-8%2065-14%2026-11%2030-14%2024-17l-3-4-2-4-2-3-2-4c-1-1-1-2%204-6%206-5%2018-11%2024-12%206%200%206%200%2014%2021%202%203%202%202%202-19v-22l-5%201c-6%200-6%200-10-8l-2-2c0%203-7%206-9%204l-2-1%201%202v2c-2%200-3-2-3-4l2-1c6-3%208-5%207-7l1-1c2%201%203-2%202-5l-2-4v-5l-2-9c0-7-3-17-3-13%200%202%200%202-1%200l-1-4v-2l1%202c1%201%201%201%201-1l-2-3-1-3c1-2%200-3-1-3h-1c0-3-7-10-13-12-9-4-21-6-40-6-18%200-24%201-24%203l4%203%204%203%202%203%203%203c0%203-6%209-7%209h-2l1%201c1%200-3%205-8%208-4%203-5%203-1-1%202-2%202-3%201-4v-2c-2-1-2-1-2%202v1l-1-17c1-2%200-4-3-6l-3-3-3%202-3%203v3l-2%206c-1%202-1%202-1%200s-1-3-3-1l-4%201-3%201v-5c1-7%203-14%207-21l3-5%201%202%202%206c0%205%202%205%204%201v-7l-2-7c-1-3-1-4-3-3l-1-1%203-1%201-1%202%201c1%202%202%202%205%202%205-1%205-4%202-6-4-2-2-6%202-4%202%201%202%201%202-1-1-3-4-4-7-1-3%204-4%203-1-1l4-3c3%200%203-1%202-11l-1-10-1-1v-2l-1-1-1-3c0-2%200-2-2-2-1%201-2%200-2-1l-2-3c-1-2%200-2%208-3l10-2h-11l-8%202-2%201-1-2c0-1%203-2%2011-3l12-3c1-2%203-3%203-1%200%203%2014%200%2019-4l9-3%205-1%203-1c1-1%202%200%202%201h2l2%201-20%206%203-2%203-2-4%201c-3%201-4%201-3%203%202%201%201%201-11%203-10%202-12%202-11%204a100%20100%200%200029-6l17-4a1030%201030%200%200123-8l-10%201h-24l-31-1h-33v8m122-3a700%20700%200%20013%2047v6l1%208%201%2012%202%2012%201%207V86l-1-18a1960%201960%200%2001-7-63M73%2039a1730%201730%200%2001-22%205c1%202%2034-3%2034-5%201-2%200-2-12%200m84%2015l-3%201-2%201-1%201-1%201-1%203c-3%202%202%204%207%203%206-1%207-3%201-2-4%200-4%200-3-1l5-2%202-1%209-2%2010-2c0-1-7-1-15%201-4%201-5%200-5-1h-3m-52%205l3%201h4l-4%201c-4%201-5%202-2%202l3%201%202%201v1c-2%201-2%201%200%201h3l-3%201-1%201%201%202%201%201v8c-1%201%200%201%201%201%202%200%202%200%201%201l-1%201v2c-1%201-1%201%201%201v2c2%200%202%203-1%206s-3%204%203%204c2%200%202%200%201%201s-1%203%201%204l-1%201h-2l2%201v4l1%201v1c-1%201-1%201%201%201h2l-2%201c-2%200-2%201-1%201v2l1%201v1c-1%201-1%201%201%201s2%200%201%201c-2%200-2%201-1%203v9l1%202%201%201v1c-1%201-1%201%201%201l1%201c-2%201-2%204%200%204v1c-2%201-2%201%200%201s2%200%201%201l-3%202-2%201c0-2-1-2-2-2-1%201-2%204%200%206a685%20685%200%200075-16l-12%202a342%20342%200%2001-26%205h-2l-9%201-8%201-3%201-2%201v-1l1-2%201-2c2%200%202%200%200-1-3%200-4-2-1-3%203%200%202-2-1-1l-2-1%201-2%201-1-1-1c-3%200-2-3%200-3%201-1%201-1-1-1l-2-1-1-1-2-2c-1-3%200-3%202-3s4-2%201-2v-3l1-2%202-2h-2l-2-1%202-2%202-1-4-1-4-1%201-1%201-1-2-1-2-1%202-2%201-1v-1l1-1-3-1h-3c0-1%206-2%208-1%202%200%202-2%201-3s3-1%208-1l2-2-1-1-1-1-1-1c-1-1%200-1%202-1%203%200%204-2%201-2l2-1%203-1h-4c-3%200-3%200-1-1s0-1-4-1h-5l2-1h-3c-2%200-2%200-1-1l-5-1h-3l1-1c0-1%203-2%2010-3l9-2-5-1h-4v-2l1-2%203-1%204-1-4-1h-3c3%200%202-2%200-2-6%202-14%202-14%201l-3-1c-1%200-2%200-1-1l-3-1-4%201m69%205l-5%201-5%201h-6c-10%202-9%202-9%206l1%205h4v-3h4l1%202c1%201%2025-3%2025-4h-2l-3-1%202-1c1%201%205-2%204-3l1-2c1-1-11-2-12-1m32%2012l2%207c2%203%202%205%201%207l-1%205%201-1c1-3%203-4%203-2%200%201%208%204%2013%204l9-2c6-4%2018-8%2023-8%206-1%207%201%202%206-3%203-4%206-2%206%203%200%2013-19%2011-22-1-2-13-3-16-1l-6%202-3%201c-1%202-11%201-11%200h-1l-3%202v2c0%204-2%206-6%204l-4-1-2-1h-1l-2-2-2-2-1-1-2-3c-2-2-2-2-2%200m-26%203h-1c-1-1-13%200-25%203-2%200-2%200-1-1s1-1-2-1l-3%201%201%201c2-1%202%200%203%204%200%205%200%205%203%205s4-1%202-3c-3-3-2-3%201-3%202%200%202%201%202%203s1%202%203%202l19-4c1-1%200-1-1-1-2%200-2%200-1-1l1-2c-1-1%202-4%203-3l-1%202v1l1%201%201%203%201-1h2l4-1c0-1-1-2-3-2s-2-1-2-3c0-3-6-3-7%200m11%2010l-18%203c-22%203-21%203-19%206%201%201%2013-1%2015-3l13-3c6%200%2014-2%2014-3l-1-1-4%201m16%2011c-1%205-1%205-11%207a481%20481%200%2000-23%202l24-5a314%20314%200%2000-42%208l2%201-2%201%201%201c2%201%202%201%201%203l-1%201%202%201c1%201%2013-1%2013-2h-7c-3%201-4%200-1-2%201-2%207-3%2031-7%2013-2%2014-2%2014-9%200-5-1-5-1%200m-25%2021c-27%204-27%204-26%206s30-3%2036-5l10-3%208-2-28%204m3%207l-16%201c-11%201-13%202-7%204%204%201%206%204%203%204l-1%201c1%201%2012-1%2012-3l3-1c2%200%202-1%202-2l2-2v2l2%201%202-2%202-2c1-1%202%200%202%201h-1l-2%201h7l1-2c0-3%200-3-11-1m80%2060l-4%202-4-2c-6-3-9-1-9%206%200%204%200%205-2%206-6%202-7%209-3%2011%202%200%202%201%201%202-2%206%200%209%207%207h7c6%204%2012%201%2010-5%200-2%200-3%204-7%205-5%205-7%200-9-3-2-3-3-3-6%201-4-1-4-1%200-1%204-4%204-5%201%200-3%203-6%206-6%201%201%202-2%200-2l-4%202m-9%2013c-3%205-2%2011%202%2011s6-4%206-9c-1-5-6-6-8-2'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.3513513513513513,"src":"/static/27dc3a779cdfe1f4f30ec2caf3c3fe88/4fe8c/rolwin.jpg","srcSet":"/static/27dc3a779cdfe1f4f30ec2caf3c3fe88/aabdf/rolwin.jpg 150w,\n/static/27dc3a779cdfe1f4f30ec2caf3c3fe88/9dc27/rolwin.jpg 300w,\n/static/27dc3a779cdfe1f4f30ec2caf3c3fe88/4fe8c/rolwin.jpg 600w,\n/static/27dc3a779cdfe1f4f30ec2caf3c3fe88/9842e/rolwin.jpg 900w,\n/static/27dc3a779cdfe1f4f30ec2caf3c3fe88/47498/rolwin.jpg 1200w,\n/static/27dc3a779cdfe1f4f30ec2caf3c3fe88/b4640/rolwin.jpg 2034w","sizes":"(max-width: 600px) 100vw, 600px"}}}}}},{"node":{"frontmatter":{"path":"blog/how-to-build-your-own-compiler","title":"How to build your own compiler ? ( The Worlds smallest compiler )","tags":["javascript"],"excerpt":"Compilers are there everywhere in our day to day use. Most developers tend to ignore it because they feel only the nerdiest of the geeks can code it. Let's build the worlds smallest compiler to understand how compilers work.","cover":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='258'%20viewBox='0%200%20400%20258'%20preserveAspectRatio='none'%3e%3cpath%20d='M290%2012l-10%2012H51v199h34l34%201-11%2013-14%2017-3%204h309v-52h-6l-7-1%207-1h6V0H300l-10%2012M181%2069c-10%202-18%206-26%2012l-6%204%2015%2015%2015%2015%204-2c2-2%206-3%208-3l3-1V67h-3l-10%202m18%2019l1%2021%203%201%207%203%204%202%2015-15%2015-14-3-3c-9-8-24-14-36-16h-6v21m-57%206c-7%209-13%2024-14%2035v5h41l1-3c0-2%201-6%203-8l2-4-15-15-14-15-4%205m90%2010l-15%2015%202%203c2%203%203%203-9%206-10%203-10%203-8%206l2%203%208-4c10-4%2011-4%2011-1%200%202%201%202%2022%202h21v-3c0-5-4-19-7-25-3-7-11-17-12-17l-15%2015m-106%2038l1%207v3h8l7%201%202%205%203%206-5%204-4%206c0%202%2019%2021%2020%2021s4-2%206-5l5-4%206%202%206%203v7l1%207h30v-15l6-2%206-2%205%204c2%203%205%205%206%205s20-19%2020-21l-4-6-5-5%202-5%202-6h8c9-1%209-2%209-8v-5l-22-1h-22l-1%206c-8%2025-45%2024-51-1l-1-5h-44v4'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.5463917525773196,"src":"/static/493231422a84266271f5b40a73e7bac7/2a4de/compiler.png","srcSet":"/static/493231422a84266271f5b40a73e7bac7/6d161/compiler.png 150w,\n/static/493231422a84266271f5b40a73e7bac7/630fb/compiler.png 300w,\n/static/493231422a84266271f5b40a73e7bac7/2a4de/compiler.png 600w,\n/static/493231422a84266271f5b40a73e7bac7/db955/compiler.png 900w,\n/static/493231422a84266271f5b40a73e7bac7/f3583/compiler.png 1200w,\n/static/493231422a84266271f5b40a73e7bac7/f534f/compiler.png 1240w","sizes":"(max-width: 600px) 100vw, 600px"}}}}}},{"node":{"frontmatter":{"path":"blog/django-the-widely-used-python-framework-for-web-development","title":"Django – The widely used python framework for web development","tags":["python","html","css"],"excerpt":"Django is a widely used python framework for web development. Learn what makes django so popular for backend development and why many startups and Tech giants prefer Django.","cover":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='225'%20viewBox='0%200%20400%20225'%20preserveAspectRatio='none'%3e%3cpath%20d='M0%20113v112h401V0H0v113m0%200'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.7857142857142858,"src":"/static/600b89b5e2a7a8d8ef6e3d2a010bd48d/2a4de/django.png","srcSet":"/static/600b89b5e2a7a8d8ef6e3d2a010bd48d/6d161/django.png 150w,\n/static/600b89b5e2a7a8d8ef6e3d2a010bd48d/630fb/django.png 300w,\n/static/600b89b5e2a7a8d8ef6e3d2a010bd48d/2a4de/django.png 600w,\n/static/600b89b5e2a7a8d8ef6e3d2a010bd48d/db955/django.png 900w,\n/static/600b89b5e2a7a8d8ef6e3d2a010bd48d/f3583/django.png 1200w,\n/static/600b89b5e2a7a8d8ef6e3d2a010bd48d/5707d/django.png 1600w","sizes":"(max-width: 600px) 100vw, 600px"}}}}}},{"node":{"frontmatter":{"path":"blog/why-i-migrated-my-website-from-wordpress-to-gatsby","title":"Why I migrated my website from wordpress to gatsby? (gatsby vs wordpress)","tags":["javascript","gatsby","typescript"],"excerpt":"While building a CMS for blogging, worpdress is the most commonly used platform. Gatsby has also topped the list recently. This article talk which one to go for and why I shifted from wordpress to gatsby. Is gatsby better than wordpress is the question I would be answering.","cover":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='225'%20viewBox='0%200%20400%20225'%20preserveAspectRatio='none'%3e%3cpath%20d='M0%20113v112h401V0H0v113m170-45c-4%203-5%208-5%2020l1%209-6%202c-11%205-19%2013-18%2019%202%206%209%2012%2019%2016l5%201v12c-1%2013%201%2017%207%2020h8c4-1%2017-9%2019-11l7%204c13%2010%2025%2010%2028-1v-20c-1-3-1-3%207-7%2021-10%2021-22%200-32l-8-3%201-5c4-26-9-35-29-19l-6%204-4-3c-10-9-20-11-26-6m4%203c-3%202-4%2010-4%2017%201%207%201%207%2010%206%206-1%207-2%2010-5l4-5c3-3%203-3-2-7-8-6-15-8-18-6m43%201c-5%202-12%208-12%209l5%207c4%205%204%205%2011%206l8%201%201-10c0-14-3-17-13-13M64%2074c-11%204-21%2013-26%2024-5%2010-5%2025%200%2036%2015%2029%2054%2032%2073%205%2016-23%205-56-23-64-6-2-18-2-24-1m248%201c-11%202-25%2012-30%2022-20%2043%2034%2082%2067%2049%2029-29%204-78-37-71m-6%206c-6%203-9%205-14%2010-4%204-4%205%204%204l6%201-2%202c-4%200-4-1%203%2019%208%2024%207%2023%2012%2010%203-11%203-12%202-16-2-9-5-13-8-13l-2-1c1-2%2023-2%2024-1l-1%202h-3c-2%201-1%205%205%2021l7%2019%206-25c0-2-1-6-4-10-3-8-3-10%201-14l2-2-3-2c-9-6-25-8-35-4M66%2084c-6%202-12%206-15%2010l-7%2013c0%201%2036%2039%2039%2040s13-4%2018-10c4-4%208-12%208-18l1-3H89l-1%202v3h7l8%201c0%205-12%2019-17%2019l-35-35c0-2%203-8%207-11%2011-9%2026-9%2036%200%205%204%205%204%207%202s2-2-2-5c-8-9-23-12-33-8m128%2014c-5%200-4%200-11%2011l-4%207%203%205%205%2010%203%204h21l3-5%205-9%202-5-3-6c-7-13-7-13-24-12m159%206l-13%2042c-3%207%209-5%2013-13%204-7%205-23%202-29l-2-4v4m-191%200c-18%208-18%2016-2%2024%207%203%208%203%2010-5l3-7-3-7-2-7-6%202m68%205l-2%208%202%206c2%207%203%207%205%206%208-1%2018-9%2018-13%200-2-7-9-12-11-9-4-8-4-11%204m54-4l-1%2011c0%2012%202%2018%2011%2027%208%208%2010%208%207-1a2802%202802%200%2001-16-40l-1%203m-88%201c-10%205-7%2021%205%2021%205%200%2010-6%2010-11%200-4-4-10-7-10h-8M43%20121c2%209%209%2019%2018%2024%203%202%2013%204%2013%203l-29-30c-2-1-2-1-2%203m277-1a644%20644%200%2001-10%2031c0%203%2017%204%2021%201%201%200%200-4-4-14l-7-18m-149%2018c-1%203-1%2018%201%2021%203%205%2012%203%2021-4l3-4-5-6c-5-5-5-6-10-6l-7-2-3%201m50%200c-6%202-8%202-10%205l-5%206-2%202%205%204c9%207%2017%209%2020%204%202-4%201-22-1-22l-7%201'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.7857142857142858,"src":"/static/245aecc3e8c42b31f1e4796cebebd2ce/4fe8c/gatsby-wordpress.jpg","srcSet":"/static/245aecc3e8c42b31f1e4796cebebd2ce/aabdf/gatsby-wordpress.jpg 150w,\n/static/245aecc3e8c42b31f1e4796cebebd2ce/9dc27/gatsby-wordpress.jpg 300w,\n/static/245aecc3e8c42b31f1e4796cebebd2ce/4fe8c/gatsby-wordpress.jpg 600w,\n/static/245aecc3e8c42b31f1e4796cebebd2ce/f9913/gatsby-wordpress.jpg 750w","sizes":"(max-width: 600px) 100vw, 600px"}}}}}},{"node":{"frontmatter":{"path":"blog/react17-new-features","title":"What's new in React 17 ( No new features )","tags":["reactjs"],"excerpt":"In this article let's discuss the new upgrades made to React v17.0 that were released on October 20, 2020. React 17 has no new developer features added to it rather it has features added for backward compatibility.","cover":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='225'%20viewBox='0%200%20400%20225'%20preserveAspectRatio='none'%3e%3cpath%20d='M0%20113v112h401V0H0v113m185-44c-3%201-4%208-3%2013v5l-5%202c-12%205-11%2014%201%2019l4%202v5c-2%2012%205%2016%2016%209l4-3%205%204c11%207%2016%203%2015-11v-4l5-3c11-5%2011-12%201-18l-6-2v-7c0-12-5-15-16-8l-4%203-4-2c-6-5-10-6-13-4m0%204v12h5c4%200%205-1%208-5l2-3-5-3c-5-3-8-4-10-1m26%200c-7%203-7%204-4%208%202%203%203%204%207%204%205%201%205%201%206-4%201-9-3-12-9-8m-18%2019c-4%205-4%206%200%2012l2%205h13l3-5c4-5%204-6%200-12l-3-5h-12l-3%205m-15%200c-9%204-9%209%201%2013l4%202%201-4c2-4%202-4%201-9-1-4-3-5-7-2m41%202c-2%204-2%205%200%209s2%204%205%203l6-4c4-3%203-7-3-10s-6-3-8%202m-21%200l-2%204%202%204%204%202%204-2%202-4-2-4-4-2-4%202m-13%2018v11c2%203%209%202%2013-3%202-1%202-2-1-5-4-4-11-6-12-3m29-1c-3%200-5%201-7%204l-3%204%202%202c5%204%2011%205%2013%202s1-13-1-13l-4%201m-50%2032c-2%202-3%204-3%208-1%205%200%208%202%205l2-1c2%202%208%203%2010%201h15c1%201%203%201%203-2l3-1%203%201c-1%204%202%204%204%201l1-3c-1-2%201-1%202%201%203%204%2011%205%2012%202%200-2%200-2-2-2-4%200-7-1-7-3s7-5%2011-5c5%200%205%200%203%204v6c1%203%204%203%204%200-1-1%200-4%201-6%202-4%202-5%205-5l4-2c0-2-6-2-13-1h-7c-1-2-9%202-11%205-2%204-4%203-4-1l-2-4c-2-1-7%203-9%208l-3%204h-5l-4-1%202-1%204-1c3-1%201-4-2-4-2%200-1-1%202-1%207-2%206-6-1-4-6%200-7%201-8%205l-1%206v3l-4-2-4-1%203-2c3-1%204-4%201-8-2-3-3-3-7%201m86-2v2l3%202h4c1%201-1%203-3%203s-4%203-2%204l1%203c0%203%202%203%204-1l3-3c3-1%204-4%202-4l-1-1c1-3-4-6-7-6l-4%201m58%203c-5%203-6%2010-2%2017%203%206%203%206%209%205%209-3%2013-8%2011-16-2-7-12-11-18-6m-227%200c-7%203-9%2013-4%2018%209%207%2022%200%2019-11-2-6-9-10-15-7m-28%2030c-2%203-1%205%202%205l3-1h1c1%202%202%202%204%201h6c3%200%205-2%205-4s0-2-1-1c-1%202-2%202-2%201-1-1-1-1-2%201-2%201-2%201-1-1l-1-2-2%203-2%202c-2%200-2%200-1-1l2-2c1-3-3-3-4%200-1%202-1%202-1%200%200-4-2-4-2-1l-1%203v-3c0-3-2-3-3%200m32%202c-1%203%200%204%204%203h5l1-3%201-1%201%202c0%203%200%203%202%200l1-3%201%202c0%203%203%204%205%202h1c1%201%208%202%2010%201v-1c-2%200-2%200-1-1l3-1c2%200%203%202%201%202l-1%201h2l2-3v-1l1-1-5-1c-5%200-6%201-6%203l-2%202v-5l-3%201h-1c0-1-1-1-2%201-2%202-2%202-2%200-1-2-7-3-8-1h-1c0-2-2-1-3%202l-3%202c-2%200-2%200%200-1l1-1v-1c1-2%201-2-1-2s-3%201-3%203'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.7857142857142858,"src":"/static/9daa87fd6b59f56f1454a4e46c5a351f/2a4de/react17.png","srcSet":"/static/9daa87fd6b59f56f1454a4e46c5a351f/6d161/react17.png 150w,\n/static/9daa87fd6b59f56f1454a4e46c5a351f/630fb/react17.png 300w,\n/static/9daa87fd6b59f56f1454a4e46c5a351f/2a4de/react17.png 600w,\n/static/9daa87fd6b59f56f1454a4e46c5a351f/db955/react17.png 900w,\n/static/9daa87fd6b59f56f1454a4e46c5a351f/f3583/react17.png 1200w,\n/static/9daa87fd6b59f56f1454a4e46c5a351f/5707d/react17.png 1600w","sizes":"(max-width: 600px) 100vw, 600px"}}}}}},{"node":{"frontmatter":{"path":"blog/promises-in-javascript","title":"Working with promises in Javascript","tags":["javascript","typescript","nodejs","reactjs"],"excerpt":"Let's talk about promises in javascript. What exactly is a promise in javascript and how to handle promises. This article will talk about the different methods to resolve promises.","cover":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='244'%20viewBox='0%200%20400%20244'%20preserveAspectRatio='none'%3e%3cpath%20d='M187%2010c-17%204-29%2017-33%2034l-1%205h-8c-9%200-10%201-12%2010-2%2011-2%2011-8%2011-16-1-27%2018-29%2050%200%2012%200%2012%202%2014l5%203%202%201-13%2043c-13%2040-15%2048-12%2051%202%202%20235%202%20237-1%203-2%202-8-6-33l-8-25%205-1c8%200%2010-1%2011-3%204-5%203-7-1-13-12-14-16-26-17-50-1-20-2-24-12-33l-5-5h-21c-18%200-20%200-20-2a46%2046%200%2000-56-56m-46%2051c-1%206-4%2015-6%2016l-9%201c-6%200-7%200-10%203-7%207-12%2022-12%2040v9h16l-2%207-9%2034-7%2026%202%207c2%208%202%209%208%207l5-1h-6c-3%200-4%200-3-1%203%200%203%200%202-3l-1-3a215%20215%200%200136%201l-4%203c-2%201-1%202%2022%202l24%201h-50a251%20251%200%200070%200c7%200%207%200%2012-2h19l34%203h20l1-7%202-7-4-16-4-16%2014-1%2013-1-3-4a89%2089%200%2001-18-57c0-12-2-19-9-24l-4-3h-32l-32%201%203%206%203%209%201%203-7-1c-9%200-15%202-16%206l-1%203-14-1-15-1c-1%200%202-11%204-14%203-4%206-5%2010-2l4%202%201-2c3-4%204-13%204-21v-6l-26-1h-26v5m85%2046c1%208%202%2012%204%2010l1%201c1%201%206%200%206-1h3l1-1v1h6l1-1h3l3-1%201-2c2%202%203-3%201-6-1-3-1-3-2-2h-2c-2-2-2-2%203-2%203%200%201-1-5-1l-12%201h-1l1-1-6-2-2%202-2%202c-2-1-1-4%201-4%201-1%201-1-1-1l-2-1v9m-85%2058l-3%2011h-8c-2-2-8%200-9%202-1%204%2015%206%2022%203%204-3%205-4%206-14%203-13%203-12-2-12h-5l-1%2010m20-8c-7%204-3%2010%208%2013l7%203c2%204-8%206-13%202-3-2-11%200-8%203%203%204%2018%206%2024%203%2010-5%208-11-4-15-8-2-9-4-8-6h13l3-2-3-1c-4-3-15-3-19%200m48%2031c-3%201-9%206-9%208l3-1c5-5%2010-5%2025-4l14%202-8-3c-10-3-20-3-25-2'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.6483516483516483,"src":"/static/c2e2602606aecbaead43ebcb31d5fc22/2a4de/javascript.png","srcSet":"/static/c2e2602606aecbaead43ebcb31d5fc22/6d161/javascript.png 150w,\n/static/c2e2602606aecbaead43ebcb31d5fc22/630fb/javascript.png 300w,\n/static/c2e2602606aecbaead43ebcb31d5fc22/2a4de/javascript.png 600w,\n/static/c2e2602606aecbaead43ebcb31d5fc22/5e6f2/javascript.png 789w","sizes":"(max-width: 600px) 100vw, 600px"}}}}}},{"node":{"frontmatter":{"path":"blog/code-splitting-in-react","title":"Code splitting in react with React.lazy() and Suspense","tags":["html","css","reactjs"],"excerpt":"Suppose the bundle size of your project is very huge and you don't want to load everything at once during the initial render you can use code splitting along with React to improve the performance and load time of your application.","cover":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='219'%20viewBox='0%200%20400%20219'%20preserveAspectRatio='none'%3e%3cpath%20d='M221%2013A234468%20234468%200%200086%2058c6%2015-8%2035-25%2035-9%200-21-7-24-16l-3-4-17%205-16%206-1%2067v68h401v-26l-1-110V0H260l-39%2013m61%2040v14h28V39h-28v14m1%200v13h26V40h-26v13M155%2083c-2%201-9%2011-9%2013s-2%201-2-2c-2-10-15-15-15-5%200%204%204%208%2010%2010%2015%206%2037-9%2024-15-3-2-5-2-8-1m-1%205l-4%207-3%204%203-1c6-1%2012-4%2013-6%202-6-5-8-9-4m-29%2023v8h18v-5l1-9v-3h-19v9m22%2020v8h19v-17h-19v9'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.829268292682927,"src":"/static/9fe51c6e6dab4ae76d9944746bfff13e/2a4de/codesplitting.png","srcSet":"/static/9fe51c6e6dab4ae76d9944746bfff13e/6d161/codesplitting.png 150w,\n/static/9fe51c6e6dab4ae76d9944746bfff13e/630fb/codesplitting.png 300w,\n/static/9fe51c6e6dab4ae76d9944746bfff13e/2a4de/codesplitting.png 600w,\n/static/9fe51c6e6dab4ae76d9944746bfff13e/db955/codesplitting.png 900w","sizes":"(max-width: 600px) 100vw, 600px"}}}}}}]}},"pageContext":{"postPath":"blog/center-align-things-with-css","translations":[{"hreflang":"en","path":"/blog/center-align-things-with-css"}]}},"staticQueryHashes":["4097791827"]}