{"componentChunkName":"component---src-gatsby-theme-try-ghost-templates-post-js","path":"/css-variables-and-how-to-use-them/","result":{"data":{"customPost":{"id":"Ghost__Post__6127ba1b3ed159214d382e6c","title":"CSS Variables and How To Use Them","slug":"css-variables-and-how-to-use-them","featured":false,"feature_image":"https://res-2.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/carbon--1-.png","excerpt":"A lot of people don’t know about CSS variables, and you might be one of them! It’s time to learn about CSS variables and how you can use them.","custom_excerpt":"A lot of people don’t know about CSS variables, and you might be one of them! It’s time to learn about CSS variables and how you can use them.","visibility":"public","created_at_pretty":"26 Oct 2020","published_at_pretty":"21 Apr 2019","updated_at_pretty":"26 Aug 2021","created_at":"2020-10-26T21:28:48.000+00:00","published_at":"2019-04-21T21:28:00.000+00:00","updated_at":"2021-08-26T17:54:30.000+00:00","meta_title":null,"meta_description":null,"og_description":null,"og_image":null,"og_title":null,"twitter_description":null,"twitter_image":null,"twitter_title":null,"authors":[{"slug":"shahed","url":"https://backend.shahednasser.com/author/shahed/","name":"Shahed Nasser","bio":null,"cover_image":null,"profile_image":"https://backend.shahednasser.com/content/images/2022/03/IMG_0591.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":null}],"primary_author":{"slug":"shahed","url":"https://backend.shahednasser.com/author/shahed/","name":"Shahed Nasser","bio":null,"cover_image":null,"profile_image":"https://backend.shahednasser.com/content/images/2022/03/IMG_0591.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":{"base":"IMG_0591.jpg","publicURL":"/static/ceb49c3c631485453e71e00d7f84b069/IMG_0591.jpg","imageMeta":{"width":1182,"height":1179},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAAMEAQL/xAAWAQEBAQAAAAAAAAAAAAAAAAADBAL/2gAMAwEAAhADEAAAAdXiFM6i0CohUWXoKn//xAAcEAACAgIDAAAAAAAAAAAAAAACAwESBBEhM0H/2gAIAQEAAQUCWySE3WEr7SzbXjAj4iKty+sOQ//EABYRAQEBAAAAAAAAAAAAAAAAAAERIP/aAAgBAwEBPwEhj//EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQIBAT8BH//EAB4QAAIBBAMBAAAAAAAAAAAAAAABIRESMUECECJx/9oACAEBAAY/ApVGWvOjzgtUwLlTZA0sdL4f/8QAHBAAAwACAwEAAAAAAAAAAAAAAAERITFBkbHB/9oACAEBAAE/IahkCy+N2GwZpjQiJHJCspUFY0QrSi+HqiW2rgf/2gAMAwEAAgADAAAAEPw3/wD/xAAYEQEBAAMAAAAAAAAAAAAAAAAAARExQf/aAAgBAwEBPxCtjDqP/8QAFxEBAQEBAAAAAAAAAAAAAAAAAQAxEf/aAAgBAgEBPxBFus6Tt//EAB8QAQEAAgIBBQAAAAAAAAAAAAERACExQWFRcYGR0f/aAAgBAQABPxAuaBPPzkO1wyX7F4wkwXanfZrFQgeqE9JgS14vVOvrERIJomVBKwt2jebAeP0yVa8h1n//2Q==","aspectRatio":1,"src":"/static/ceb49c3c631485453e71e00d7f84b069/31709/IMG_0591.jpg","srcSet":"/static/ceb49c3c631485453e71e00d7f84b069/f340b/IMG_0591.jpg 28w,\n/static/ceb49c3c631485453e71e00d7f84b069/22d64/IMG_0591.jpg 55w,\n/static/ceb49c3c631485453e71e00d7f84b069/31709/IMG_0591.jpg 110w,\n/static/ceb49c3c631485453e71e00d7f84b069/aa249/IMG_0591.jpg 165w,\n/static/ceb49c3c631485453e71e00d7f84b069/0dc33/IMG_0591.jpg 220w,\n/static/ceb49c3c631485453e71e00d7f84b069/d8257/IMG_0591.jpg 1182w","srcWebp":"/static/ceb49c3c631485453e71e00d7f84b069/8678c/IMG_0591.webp","srcSetWebp":"/static/ceb49c3c631485453e71e00d7f84b069/59cda/IMG_0591.webp 28w,\n/static/ceb49c3c631485453e71e00d7f84b069/7da75/IMG_0591.webp 55w,\n/static/ceb49c3c631485453e71e00d7f84b069/8678c/IMG_0591.webp 110w,\n/static/ceb49c3c631485453e71e00d7f84b069/f282e/IMG_0591.webp 165w,\n/static/ceb49c3c631485453e71e00d7f84b069/a7b21/IMG_0591.webp 220w,\n/static/ceb49c3c631485453e71e00d7f84b069/63099/IMG_0591.webp 1182w","sizes":"(max-width: 110px) 100vw, 110px"}}}},"primary_tag":{"slug":"css","url":"https://backend.shahednasser.com/tag/css/","name":"CSS","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/photo-1610986603166-f78428624e76-2.jpeg","description":"Learn more about CSS through tutorials, articles, and tips.","meta_title":null,"meta_description":null,"featureImageSharp":{"base":"photo-1610986603166-f78428624e76-2.jpeg","publicURL":"/static/2e4062ead6b64acea03c5c5ba3437c96/photo-1610986603166-f78428624e76-2.jpeg","imageMeta":{"width":2000,"height":1352},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAOABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAIBAwX/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/aAAwDAQACEAMQAAABymIKxiv/xAAaEAACAgMAAAAAAAAAAAAAAAAAEQECEBIh/9oACAEBAAEFAqolalUcx//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABURAQEAAAAAAAAAAAAAAAAAAAAR/9oACAECAQE/AUf/xAAZEAACAwEAAAAAAAAAAAAAAAAQIQABEYH/2gAIAQEABj8CcVd0M//EABsQAAIDAAMAAAAAAAAAAAAAAAABESExEFGB/9oACAEBAAE/IdKGJM+nDWSDSdkH/9oADAMBAAIAAwAAABCL7//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QP//EABURAQEAAAAAAAAAAAAAAAAAAAEQ/9oACAECAQE/EAY//8QAGhABAQADAQEAAAAAAAAAAAAAAREAITEQYf/aAAgBAQABPxAsEuSsxwBHaV8nMjhCkPIbwwjTs8f/2Q==","aspectRatio":1.4772727272727273,"src":"/static/2e4062ead6b64acea03c5c5ba3437c96/d5c54/photo-1610986603166-f78428624e76-2.jpg","srcSet":"/static/2e4062ead6b64acea03c5c5ba3437c96/65d8c/photo-1610986603166-f78428624e76-2.jpg 260w,\n/static/2e4062ead6b64acea03c5c5ba3437c96/c5f21/photo-1610986603166-f78428624e76-2.jpg 520w,\n/static/2e4062ead6b64acea03c5c5ba3437c96/d5c54/photo-1610986603166-f78428624e76-2.jpg 1040w,\n/static/2e4062ead6b64acea03c5c5ba3437c96/81a53/photo-1610986603166-f78428624e76-2.jpg 1560w,\n/static/2e4062ead6b64acea03c5c5ba3437c96/4e5f3/photo-1610986603166-f78428624e76-2.jpg 2000w","srcWebp":"/static/2e4062ead6b64acea03c5c5ba3437c96/e4875/photo-1610986603166-f78428624e76-2.webp","srcSetWebp":"/static/2e4062ead6b64acea03c5c5ba3437c96/dc8f3/photo-1610986603166-f78428624e76-2.webp 260w,\n/static/2e4062ead6b64acea03c5c5ba3437c96/2db4b/photo-1610986603166-f78428624e76-2.webp 520w,\n/static/2e4062ead6b64acea03c5c5ba3437c96/e4875/photo-1610986603166-f78428624e76-2.webp 1040w,\n/static/2e4062ead6b64acea03c5c5ba3437c96/f5845/photo-1610986603166-f78428624e76-2.webp 1560w,\n/static/2e4062ead6b64acea03c5c5ba3437c96/49d6b/photo-1610986603166-f78428624e76-2.webp 2000w","sizes":"(max-width: 1040px) 100vw, 1040px"}}}},"tags":[{"slug":"css","url":"https://backend.shahednasser.com/tag/css/","name":"CSS","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/photo-1610986603166-f78428624e76-2.jpeg","description":"Learn more about CSS through tutorials, articles, and tips.","meta_title":null,"meta_description":null,"featureImageSharp":null},{"slug":"beginner","url":"https://backend.shahednasser.com/tag/beginner/","name":"Beginners","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/photo-1521185496955-15097b20c5fe-2.jpeg","description":"Tutorials, articles, and tips to help beginners accelerate their journey in programming.","meta_title":"Beginners","meta_description":"Tutorials, articles, and tips to help beginners accelerate their journey in programming.","featureImageSharp":null},{"slug":"tips","url":"https://backend.shahednasser.com/tag/tips/","name":"Tips","visibility":"public","feature_image":null,"description":"Learn more about programming and development through these articles that have essential tips!","meta_title":"Tips on Technology and Programming","meta_description":null,"featureImageSharp":null}],"plaintext":"A lot of people don’t know about CSS variables, and you might be one of them!\nIt’s time to learn about CSS variables and how you can use them.\n\nCSS variables are declared for a specific element as a custom property. Then,\nyou can use that custom property anywhere you use that element.\n\n\n--------------------------------------------------------------------------------\n\nDeclaration and Usage\nHere’s how you declare a custom property:\n\nelement { \n\t--background-color: #f00;\n}\n\nHere, element can be a selector of any element, for example, div, p, .test, etc…\n\nWhat we did is that we declared a custom property for this element called \n--background-color . All CSS custom properties must start with -- .\n\nNow, we can use this custom property inside element using the var function.\n\nelement { \n\tbackground-color: var(--background-color);\n}\n\nHere, we assigned the background-color property of element to the variable we\ndeclared earlier.\n\nThis is nice and all, but usually we have repetition inside different elements,\nnot just one. declaring a custom variable inside one element type is not very\nconvenient.\n\nIn order to use a custom property inside more than one element type, we can\ndeclare the custom property inside the :root pseudo-class.\n\n:root { \n\t--primary-color: #333;\n}\n\nNow, we can use the variable --primary-color inside any element in our document:\n\ndiv { \n\tcolor: var(--primary-color);\n}\np { \n\tbackground-color: var(--primary-color);\n}\n.fancy { \n\tborder-color: var(--primary-color);\n}\n\nBy declaring our custom property inside :root , we are now able to use it inside \ndiv to set the text color, p to set the background color, and any element having\nclass fancy to set the border color. This way, not only did we minimize\nrepetition, but we also made it easier to edit and change our website’s primary\ncolor at any given point.\n\n\n--------------------------------------------------------------------------------\n\nInheritance\nElements can also inherit custom properties. For example, let’s say we have the\nfollowing HTML:\n\n
\n\t
\n
\n
\n\nThen, we declare a variable called --text-size on .parent :\n\n.parent { \n\t--text-size: 15px;\n}\n\nNow, we can use --text-size not only inside .parent , but also inside its\nchildren as well:\n\n.first-child {\n font-size: var(--text-size);\n}\n\nWe can also override custom properties. We can do that by redeclaring the custom\nproperty inside the child element:\n\n.second-child { \n\t--text-size: 30px;\n}\n\nNow, if you use --text-size inside .second-child , it’ll be evaluated to 30px,\nbut if you use it inside .first-child or .parent, it will still be 15px.\n\n\n--------------------------------------------------------------------------------\n\nFallback Values\nYou can also define a fallback value for a variable by passing a second\nparameter to var . For example:\n\n.second-child { \n\tfont-size: var(--text-size, 30px);\n}\n\nFallback values are used when the variable is not defined yet. They are not used\nas a fallback to browser incompatibility.\n\n\n--------------------------------------------------------------------------------\n\nConclusion\nAnd that’s how you can use CSS variables! Keep in mind that some browsers like\nInternet Explorer don’t support them, so if you need to support all browsers you\nneed to take that into consideration.","html":"

A lot of people don’t know about CSS variables, and you might be one of them! It’s time to learn about CSS variables and how you can use them.

CSS variables are declared for a specific element as a custom property. Then, you can use that custom property anywhere you use that element.

Declaration and Usage

Here’s how you declare a custom property:

element { \n\t--background-color: #f00;\n}

Here, element can be a selector of any element, for example, div, p, .test, etc…

What we did is that we declared a custom property for this element called --background-color . All CSS custom properties must start with -- .

Now, we can use this custom property inside element using the var function.

element {  \n\tbackground-color: var(--background-color);\n}

Here, we assigned the background-color property of element to the variable we declared earlier.

This is nice and all, but usually we have repetition inside different elements, not just one. declaring a custom variable inside one element type is not very convenient.

In order to use a custom property inside more than one element type, we can declare the custom property inside the :root pseudo-class.

:root {  \n\t--primary-color: #333;\n}

Now, we can use the variable --primary-color inside any element in our document:

div {  \n\tcolor: var(--primary-color);\n}\np {  \n\tbackground-color: var(--primary-color);\n}\n.fancy {  \n\tborder-color: var(--primary-color);\n}

By declaring our custom property inside :root , we are now able to use it inside div to set the text color, p to set the background color, and any element having class fancy to set the border color. This way, not only did we minimize repetition, but we also made it easier to edit and change our website’s primary color at any given point.

Inheritance

Elements can also inherit custom properties. For example, let’s say we have the following HTML:

<div class=\"parent\">\n\t<div class=\"first-child\"></div>  \n    <div class=\"second-child\"><div>\n</div>

Then, we declare a variable called --text-size on .parent :

.parent {  \n\t--text-size: 15px;\n}

Now, we can use --text-size not only inside .parent , but also inside its children as well:

.first-child {\n    font-size: var(--text-size);\n}

We can also override custom properties. We can do that by redeclaring the custom property inside the child element:

.second-child {  \n\t--text-size: 30px;\n}

Now, if you use --text-size inside .second-child , it’ll be evaluated to 30px, but if you use it inside .first-child or .parent, it will still be 15px.

Fallback Values

You can also define a fallback value for a variable by passing a second parameter to var . For example:

.second-child {  \n\tfont-size: var(--text-size, 30px);\n}

Fallback values are used when the variable is not defined yet. They are not used as a fallback to browser incompatibility.

Conclusion

And that’s how you can use CSS variables! Keep in mind that some browsers like Internet Explorer don’t support them, so if you need to support all browsers you need to take that into consideration.

","url":"https://backend.shahednasser.com/css-variables-and-how-to-use-them/","canonical_url":null,"uuid":"294be2c5-8cd6-41a1-94b5-28838e34c151","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"5f973f90b366d4001e86cc54","reading_time":2,"send_email_when_published":null,"email_subject":null,"childHtmlRehype":{"html":"

A lot of people don’t know about CSS variables, and you might be one of them! It’s time to learn about CSS variables and how you can use them.

CSS variables are declared for a specific element as a custom property. Then, you can use that custom property anywhere you use that element.

Declaration and Usage

Here’s how you declare a custom property:

element { \n\t--background-color: #f00;\n}

Here, element can be a selector of any element, for example, div, p, .test, etc…

What we did is that we declared a custom property for this element called --background-color . All CSS custom properties must start with -- .

Now, we can use this custom property inside element using the var function.

element {  \n\tbackground-color: var(--background-color);\n}

Here, we assigned the background-color property of element to the variable we declared earlier.

This is nice and all, but usually we have repetition inside different elements, not just one. declaring a custom variable inside one element type is not very convenient.

In order to use a custom property inside more than one element type, we can declare the custom property inside the :root pseudo-class.

:root {  \n\t--primary-color: #333;\n}

Now, we can use the variable --primary-color inside any element in our document:

div {  \n\tcolor: var(--primary-color);\n}\np {  \n\tbackground-color: var(--primary-color);\n}\n.fancy {  \n\tborder-color: var(--primary-color);\n}

By declaring our custom property inside :root , we are now able to use it inside div to set the text color, p to set the background color, and any element having class fancy to set the border color. This way, not only did we minimize repetition, but we also made it easier to edit and change our website’s primary color at any given point.

Inheritance

Elements can also inherit custom properties. For example, let’s say we have the following HTML:

<div class=\"parent\">\n\t<div class=\"first-child\"></div>  \n    <div class=\"second-child\"><div>\n</div>

Then, we declare a variable called --text-size on .parent :

.parent {  \n\t--text-size: 15px;\n}

Now, we can use --text-size not only inside .parent , but also inside its children as well:

.first-child {\n    font-size: var(--text-size);\n}

We can also override custom properties. We can do that by redeclaring the custom property inside the child element:

.second-child {  \n\t--text-size: 30px;\n}

Now, if you use --text-size inside .second-child , it’ll be evaluated to 30px, but if you use it inside .first-child or .parent, it will still be 15px.

Fallback Values

You can also define a fallback value for a variable by passing a second parameter to var . For example:

.second-child {  \n\tfont-size: var(--text-size, 30px);\n}

Fallback values are used when the variable is not defined yet. They are not used as a fallback to browser incompatibility.

Conclusion

And that’s how you can use CSS variables! Keep in mind that some browsers like Internet Explorer don’t support them, so if you need to support all browsers you need to take that into consideration.

","htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"A lot of people don’t know about CSS variables, and you might be one of them! It’s time to learn about CSS variables and how you can use them."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"CSS variables are declared for a specific element as a custom property. Then, you can use that custom property anywhere you use that element."}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h1","properties":{"id":"declaration-and-usage"},"children":[{"type":"text","value":"Declaration and Usage"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Here’s how you declare a custom property:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":"element"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" \n\t"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"--background-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" #f00"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Here, "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"element"}]},{"type":"text","value":" can be a selector of any element, for example, div, p, .test, etc…"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"What we did is that we declared a custom property for this element called "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"--background-color"}]},{"type":"text","value":" . All CSS custom properties must start with "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"--"}]},{"type":"text","value":" ."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Now, we can use this custom property inside "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"element"}]},{"type":"text","value":" using the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"var"}]},{"type":"text","value":" function."}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":"element"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" \n\t"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"background-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"var"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"--background-color"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Here, we assigned the background-color property of "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"element"}]},{"type":"text","value":" to the variable we declared earlier."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This is nice and all, but usually we have repetition inside different elements, not just one. declaring a custom variable inside one element type is not very convenient."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In order to use a custom property inside more than one element type, we can declare the custom property inside the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":":root"}]},{"type":"text","value":" pseudo-class."}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":":root"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" \n\t"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"--primary-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" #333"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Now, we can use the variable "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"--primary-color"}]},{"type":"text","value":" inside any element in our document:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":"div"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" \n\t"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"var"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"--primary-color"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":"p"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" \n\t"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"background-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"var"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"--primary-color"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".fancy"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" \n\t"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"border-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"var"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"--primary-color"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"By declaring our custom property inside "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":":root"}]},{"type":"text","value":" , we are now able to use it inside "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"div"}]},{"type":"text","value":" to set the text color, "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"p"}]},{"type":"text","value":" to set the background color, and any element having class "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"fancy"}]},{"type":"text","value":" to set the border color. This way, not only did we minimize repetition, but we also made it easier to edit and change our website’s primary color at any given point."}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h1","properties":{"id":"inheritance"},"children":[{"type":"text","value":"Inheritance"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Elements can also inherit custom properties. For example, let’s say we have the following HTML:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"html"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-html"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-html"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"div"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"class"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"parent"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n\t"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"div"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"class"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"first-child"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":""}]}]},{"type":"text","value":" \n "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"div"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"class"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"second-child"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"div"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":""}]}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Then, we declare a variable called "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"--text-size"}]},{"type":"text","value":" on "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":".parent"}]},{"type":"text","value":" :"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".parent"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" \n\t"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"--text-size"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 15px"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Now, we can use "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"--text-size"}]},{"type":"text","value":" not only inside "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":".parent"}]},{"type":"text","value":" , but also inside its children as well:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".first-child"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"font-size"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"var"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"--text-size"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"We can also override custom properties. We can do that by redeclaring the custom property inside the child element:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".second-child"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" \n\t"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"--text-size"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 30px"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Now, if you use "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"--text-size"}]},{"type":"text","value":" inside "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":".second-child"}]},{"type":"text","value":" , it’ll be evaluated to 30px, but if you use it inside "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":".first-child"}]},{"type":"text","value":" or "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":".parent"}]},{"type":"text","value":", it will still be 15px."}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h1","properties":{"id":"fallback-values"},"children":[{"type":"text","value":"Fallback Values"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can also define a fallback value for a variable by passing a second parameter to "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"var"}]},{"type":"text","value":" . For example:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".second-child"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" \n\t"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"font-size"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"var"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"--text-size"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" 30px"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Fallback values are used when the variable is not defined yet. They are "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"em","properties":{},"children":[{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"not"}]}]}]}]},{"type":"text","value":" used as a fallback to browser incompatibility."}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h1","properties":{"id":"conclusion"},"children":[{"type":"text","value":"Conclusion"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"And that’s how you can use CSS variables! Keep in mind that some browsers like Internet Explorer don’t support them, so if you need to support all browsers you need to take that into consideration."}]}],"data":{"quirksMode":false}},"tableOfContents":[{"id":"declaration-and-usage","heading":"Declaration and Usage"},{"id":"inheritance","heading":"Inheritance"},{"id":"fallback-values","heading":"Fallback Values"},{"id":"conclusion","heading":"Conclusion"}]},"featureImageSharp":{"base":"carbon--1-.png","publicURL":"/static/ffa580b4a342c60287433e8f82cb8e58/carbon--1-.png","imageMeta":{"width":1080,"height":836},"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsTAAALEwEAmpwYAAAB8klEQVQ4y6WUy27aQBSGeZaCTTC2xzeMjT2AjblfWilqVVXpE7RSVlGbRdVdV5SEKH06IqKEVcI7+K9m7HBpXRKpi8//eGbOr3PsM5PrX9xhcHmP3vUDuldrDK/WGP1aY/hC+N7rR+7BvHKDyxW6P5cIP3xH5+QzzJNT6JNT6G9ehjb5BOv9N/RnSzCv3HC+Qnu6gOd10KQSRErwSlJRUFQUZBV5eau7Y6YFhSAvSThyIvSmCwzmqyTD/vQGRTpGXnch+20ofoii5UE0XIhmjVNMEffwIGgVSPUJetObJEP2YC8SHUGqOChaNcheEyTsQqm3EmiIiu3BdCgEw4GoVyEyNVwIxOSxmYalipts2gQ4yVivcn2aF9K1g4al+giyYYNYHkq2v2+6MXA2xsn6MxlKZhXliget1QEJIqgNVnIIhQb8M6g0hOwHIK0uZBpCaUTQ2Fp9vP9TNoZ2DQXdRUGrbsvdyS6LAxmOUTRtELcGxfH/Ki+L7JLniWG58ZpnSGoURtSB7AVQaIu3kNJoQ212UPZDrqoXpC2V1TbccIEjN0LJ0JGXNeQVAkFlaIkSLR1vOdDY93F/toztjz9i4/gstt6dx+bbrylfdvRP2Px5bB6f8VjmwbxyT5cDO+CjnQP/HP+8HPoXdw+c2e3/kfr8BonVY0AbLAheAAAAAElFTkSuQmCC","aspectRatio":1.2935323383084578,"src":"/static/ffa580b4a342c60287433e8f82cb8e58/50033/carbon--1-.png","srcSet":"/static/ffa580b4a342c60287433e8f82cb8e58/bcfcb/carbon--1-.png 260w,\n/static/ffa580b4a342c60287433e8f82cb8e58/19d75/carbon--1-.png 520w,\n/static/ffa580b4a342c60287433e8f82cb8e58/50033/carbon--1-.png 1040w,\n/static/ffa580b4a342c60287433e8f82cb8e58/14010/carbon--1-.png 1080w","srcWebp":"/static/ffa580b4a342c60287433e8f82cb8e58/e4875/carbon--1-.webp","srcSetWebp":"/static/ffa580b4a342c60287433e8f82cb8e58/dc8f3/carbon--1-.webp 260w,\n/static/ffa580b4a342c60287433e8f82cb8e58/2db4b/carbon--1-.webp 520w,\n/static/ffa580b4a342c60287433e8f82cb8e58/e4875/carbon--1-.webp 1040w,\n/static/ffa580b4a342c60287433e8f82cb8e58/788b4/carbon--1-.webp 1080w","sizes":"(max-width: 1040px) 100vw, 1040px"}}}},"ghostPost":{"id":"Ghost__Post__6127ba1b3ed159214d382e6c","title":"CSS Variables and How To Use Them","slug":"css-variables-and-how-to-use-them","featured":false,"feature_image":"https://res-2.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/carbon--1-.png","excerpt":"A lot of people don’t know about CSS variables, and you might be one of them! It’s time to learn about CSS variables and how you can use them.","custom_excerpt":"A lot of people don’t know about CSS variables, and you might be one of them! It’s time to learn about CSS variables and how you can use them.","visibility":"public","created_at_pretty":"26 Oct 2020","published_at_pretty":"21 Apr 2019","updated_at_pretty":"26 Aug 2021","created_at":"2020-10-26T21:28:48.000+00:00","published_at":"2019-04-21T21:28:00.000+00:00","updated_at":"2021-08-26T17:54:30.000+00:00","meta_title":null,"meta_description":null,"og_description":null,"og_image":null,"og_title":null,"twitter_description":null,"twitter_image":null,"twitter_title":null,"authors":[{"slug":"shahed","url":"https://backend.shahednasser.com/author/shahed/","name":"Shahed Nasser","bio":null,"cover_image":null,"profile_image":"https://backend.shahednasser.com/content/images/2022/03/IMG_0591.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":null}],"primary_author":{"slug":"shahed","url":"https://backend.shahednasser.com/author/shahed/","name":"Shahed Nasser","bio":null,"cover_image":null,"profile_image":"https://backend.shahednasser.com/content/images/2022/03/IMG_0591.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":{"base":"IMG_0591.jpg","publicURL":"/static/ceb49c3c631485453e71e00d7f84b069/IMG_0591.jpg","imageMeta":{"width":1182,"height":1179},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAAMEAQL/xAAWAQEBAQAAAAAAAAAAAAAAAAADBAL/2gAMAwEAAhADEAAAAdXiFM6i0CohUWXoKn//xAAcEAACAgIDAAAAAAAAAAAAAAACAwESBBEhM0H/2gAIAQEAAQUCWySE3WEr7SzbXjAj4iKty+sOQ//EABYRAQEBAAAAAAAAAAAAAAAAAAERIP/aAAgBAwEBPwEhj//EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQIBAT8BH//EAB4QAAIBBAMBAAAAAAAAAAAAAAABIRESMUECECJx/9oACAEBAAY/ApVGWvOjzgtUwLlTZA0sdL4f/8QAHBAAAwACAwEAAAAAAAAAAAAAAAERITFBkbHB/9oACAEBAAE/IahkCy+N2GwZpjQiJHJCspUFY0QrSi+HqiW2rgf/2gAMAwEAAgADAAAAEPw3/wD/xAAYEQEBAAMAAAAAAAAAAAAAAAAAARExQf/aAAgBAwEBPxCtjDqP/8QAFxEBAQEBAAAAAAAAAAAAAAAAAQAxEf/aAAgBAgEBPxBFus6Tt//EAB8QAQEAAgIBBQAAAAAAAAAAAAERACExQWFRcYGR0f/aAAgBAQABPxAuaBPPzkO1wyX7F4wkwXanfZrFQgeqE9JgS14vVOvrERIJomVBKwt2jebAeP0yVa8h1n//2Q==","aspectRatio":1,"src":"/static/ceb49c3c631485453e71e00d7f84b069/31709/IMG_0591.jpg","srcSet":"/static/ceb49c3c631485453e71e00d7f84b069/f340b/IMG_0591.jpg 28w,\n/static/ceb49c3c631485453e71e00d7f84b069/22d64/IMG_0591.jpg 55w,\n/static/ceb49c3c631485453e71e00d7f84b069/31709/IMG_0591.jpg 110w,\n/static/ceb49c3c631485453e71e00d7f84b069/aa249/IMG_0591.jpg 165w,\n/static/ceb49c3c631485453e71e00d7f84b069/0dc33/IMG_0591.jpg 220w,\n/static/ceb49c3c631485453e71e00d7f84b069/d8257/IMG_0591.jpg 1182w","srcWebp":"/static/ceb49c3c631485453e71e00d7f84b069/8678c/IMG_0591.webp","srcSetWebp":"/static/ceb49c3c631485453e71e00d7f84b069/59cda/IMG_0591.webp 28w,\n/static/ceb49c3c631485453e71e00d7f84b069/7da75/IMG_0591.webp 55w,\n/static/ceb49c3c631485453e71e00d7f84b069/8678c/IMG_0591.webp 110w,\n/static/ceb49c3c631485453e71e00d7f84b069/f282e/IMG_0591.webp 165w,\n/static/ceb49c3c631485453e71e00d7f84b069/a7b21/IMG_0591.webp 220w,\n/static/ceb49c3c631485453e71e00d7f84b069/63099/IMG_0591.webp 1182w","sizes":"(max-width: 110px) 100vw, 110px"}}}},"primary_tag":{"slug":"css","url":"https://backend.shahednasser.com/tag/css/","name":"CSS","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/photo-1610986603166-f78428624e76-2.jpeg","description":"Learn more about CSS through tutorials, articles, and tips.","meta_title":null,"meta_description":null,"featureImageSharp":{"base":"photo-1610986603166-f78428624e76-2.jpeg","publicURL":"/static/2e4062ead6b64acea03c5c5ba3437c96/photo-1610986603166-f78428624e76-2.jpeg","imageMeta":{"width":2000,"height":1352},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAOABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAIBAwX/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/aAAwDAQACEAMQAAABymIKxiv/xAAaEAACAgMAAAAAAAAAAAAAAAAAEQECEBIh/9oACAEBAAEFAqolalUcx//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABURAQEAAAAAAAAAAAAAAAAAAAAR/9oACAECAQE/AUf/xAAZEAACAwEAAAAAAAAAAAAAAAAQIQABEYH/2gAIAQEABj8CcVd0M//EABsQAAIDAAMAAAAAAAAAAAAAAAABESExEFGB/9oACAEBAAE/IdKGJM+nDWSDSdkH/9oADAMBAAIAAwAAABCL7//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QP//EABURAQEAAAAAAAAAAAAAAAAAAAEQ/9oACAECAQE/EAY//8QAGhABAQADAQEAAAAAAAAAAAAAAREAITEQYf/aAAgBAQABPxAsEuSsxwBHaV8nMjhCkPIbwwjTs8f/2Q==","aspectRatio":1.4772727272727273,"src":"/static/2e4062ead6b64acea03c5c5ba3437c96/d5c54/photo-1610986603166-f78428624e76-2.jpg","srcSet":"/static/2e4062ead6b64acea03c5c5ba3437c96/65d8c/photo-1610986603166-f78428624e76-2.jpg 260w,\n/static/2e4062ead6b64acea03c5c5ba3437c96/c5f21/photo-1610986603166-f78428624e76-2.jpg 520w,\n/static/2e4062ead6b64acea03c5c5ba3437c96/d5c54/photo-1610986603166-f78428624e76-2.jpg 1040w,\n/static/2e4062ead6b64acea03c5c5ba3437c96/81a53/photo-1610986603166-f78428624e76-2.jpg 1560w,\n/static/2e4062ead6b64acea03c5c5ba3437c96/4e5f3/photo-1610986603166-f78428624e76-2.jpg 2000w","srcWebp":"/static/2e4062ead6b64acea03c5c5ba3437c96/e4875/photo-1610986603166-f78428624e76-2.webp","srcSetWebp":"/static/2e4062ead6b64acea03c5c5ba3437c96/dc8f3/photo-1610986603166-f78428624e76-2.webp 260w,\n/static/2e4062ead6b64acea03c5c5ba3437c96/2db4b/photo-1610986603166-f78428624e76-2.webp 520w,\n/static/2e4062ead6b64acea03c5c5ba3437c96/e4875/photo-1610986603166-f78428624e76-2.webp 1040w,\n/static/2e4062ead6b64acea03c5c5ba3437c96/f5845/photo-1610986603166-f78428624e76-2.webp 1560w,\n/static/2e4062ead6b64acea03c5c5ba3437c96/49d6b/photo-1610986603166-f78428624e76-2.webp 2000w","sizes":"(max-width: 1040px) 100vw, 1040px"}}}},"tags":[{"slug":"css","url":"https://backend.shahednasser.com/tag/css/","name":"CSS","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/photo-1610986603166-f78428624e76-2.jpeg","description":"Learn more about CSS through tutorials, articles, and tips.","meta_title":null,"meta_description":null,"featureImageSharp":null},{"slug":"beginner","url":"https://backend.shahednasser.com/tag/beginner/","name":"Beginners","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/photo-1521185496955-15097b20c5fe-2.jpeg","description":"Tutorials, articles, and tips to help beginners accelerate their journey in programming.","meta_title":"Beginners","meta_description":"Tutorials, articles, and tips to help beginners accelerate their journey in programming.","featureImageSharp":null},{"slug":"tips","url":"https://backend.shahednasser.com/tag/tips/","name":"Tips","visibility":"public","feature_image":null,"description":"Learn more about programming and development through these articles that have essential tips!","meta_title":"Tips on Technology and Programming","meta_description":null,"featureImageSharp":null}],"plaintext":"A lot of people don’t know about CSS variables, and you might be one of them!\nIt’s time to learn about CSS variables and how you can use them.\n\nCSS variables are declared for a specific element as a custom property. Then,\nyou can use that custom property anywhere you use that element.\n\n\n--------------------------------------------------------------------------------\n\nDeclaration and Usage\nHere’s how you declare a custom property:\n\nelement { \n\t--background-color: #f00;\n}\n\nHere, element can be a selector of any element, for example, div, p, .test, etc…\n\nWhat we did is that we declared a custom property for this element called \n--background-color . All CSS custom properties must start with -- .\n\nNow, we can use this custom property inside element using the var function.\n\nelement { \n\tbackground-color: var(--background-color);\n}\n\nHere, we assigned the background-color property of element to the variable we\ndeclared earlier.\n\nThis is nice and all, but usually we have repetition inside different elements,\nnot just one. declaring a custom variable inside one element type is not very\nconvenient.\n\nIn order to use a custom property inside more than one element type, we can\ndeclare the custom property inside the :root pseudo-class.\n\n:root { \n\t--primary-color: #333;\n}\n\nNow, we can use the variable --primary-color inside any element in our document:\n\ndiv { \n\tcolor: var(--primary-color);\n}\np { \n\tbackground-color: var(--primary-color);\n}\n.fancy { \n\tborder-color: var(--primary-color);\n}\n\nBy declaring our custom property inside :root , we are now able to use it inside \ndiv to set the text color, p to set the background color, and any element having\nclass fancy to set the border color. This way, not only did we minimize\nrepetition, but we also made it easier to edit and change our website’s primary\ncolor at any given point.\n\n\n--------------------------------------------------------------------------------\n\nInheritance\nElements can also inherit custom properties. For example, let’s say we have the\nfollowing HTML:\n\n
\n\t
\n
\n
\n\nThen, we declare a variable called --text-size on .parent :\n\n.parent { \n\t--text-size: 15px;\n}\n\nNow, we can use --text-size not only inside .parent , but also inside its\nchildren as well:\n\n.first-child {\n font-size: var(--text-size);\n}\n\nWe can also override custom properties. We can do that by redeclaring the custom\nproperty inside the child element:\n\n.second-child { \n\t--text-size: 30px;\n}\n\nNow, if you use --text-size inside .second-child , it’ll be evaluated to 30px,\nbut if you use it inside .first-child or .parent, it will still be 15px.\n\n\n--------------------------------------------------------------------------------\n\nFallback Values\nYou can also define a fallback value for a variable by passing a second\nparameter to var . For example:\n\n.second-child { \n\tfont-size: var(--text-size, 30px);\n}\n\nFallback values are used when the variable is not defined yet. They are not used\nas a fallback to browser incompatibility.\n\n\n--------------------------------------------------------------------------------\n\nConclusion\nAnd that’s how you can use CSS variables! Keep in mind that some browsers like\nInternet Explorer don’t support them, so if you need to support all browsers you\nneed to take that into consideration.","html":"

A lot of people don’t know about CSS variables, and you might be one of them! It’s time to learn about CSS variables and how you can use them.

CSS variables are declared for a specific element as a custom property. Then, you can use that custom property anywhere you use that element.

Declaration and Usage

Here’s how you declare a custom property:

element { \n\t--background-color: #f00;\n}

Here, element can be a selector of any element, for example, div, p, .test, etc…

What we did is that we declared a custom property for this element called --background-color . All CSS custom properties must start with -- .

Now, we can use this custom property inside element using the var function.

element {  \n\tbackground-color: var(--background-color);\n}

Here, we assigned the background-color property of element to the variable we declared earlier.

This is nice and all, but usually we have repetition inside different elements, not just one. declaring a custom variable inside one element type is not very convenient.

In order to use a custom property inside more than one element type, we can declare the custom property inside the :root pseudo-class.

:root {  \n\t--primary-color: #333;\n}

Now, we can use the variable --primary-color inside any element in our document:

div {  \n\tcolor: var(--primary-color);\n}\np {  \n\tbackground-color: var(--primary-color);\n}\n.fancy {  \n\tborder-color: var(--primary-color);\n}

By declaring our custom property inside :root , we are now able to use it inside div to set the text color, p to set the background color, and any element having class fancy to set the border color. This way, not only did we minimize repetition, but we also made it easier to edit and change our website’s primary color at any given point.

Inheritance

Elements can also inherit custom properties. For example, let’s say we have the following HTML:

<div class=\"parent\">\n\t<div class=\"first-child\"></div>  \n    <div class=\"second-child\"><div>\n</div>

Then, we declare a variable called --text-size on .parent :

.parent {  \n\t--text-size: 15px;\n}

Now, we can use --text-size not only inside .parent , but also inside its children as well:

.first-child {\n    font-size: var(--text-size);\n}

We can also override custom properties. We can do that by redeclaring the custom property inside the child element:

.second-child {  \n\t--text-size: 30px;\n}

Now, if you use --text-size inside .second-child , it’ll be evaluated to 30px, but if you use it inside .first-child or .parent, it will still be 15px.

Fallback Values

You can also define a fallback value for a variable by passing a second parameter to var . For example:

.second-child {  \n\tfont-size: var(--text-size, 30px);\n}

Fallback values are used when the variable is not defined yet. They are not used as a fallback to browser incompatibility.

Conclusion

And that’s how you can use CSS variables! Keep in mind that some browsers like Internet Explorer don’t support them, so if you need to support all browsers you need to take that into consideration.

","url":"https://backend.shahednasser.com/css-variables-and-how-to-use-them/","canonical_url":null,"uuid":"294be2c5-8cd6-41a1-94b5-28838e34c151","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"5f973f90b366d4001e86cc54","reading_time":2,"send_email_when_published":null,"email_subject":null,"childHtmlRehype":{"html":"

A lot of people don’t know about CSS variables, and you might be one of them! It’s time to learn about CSS variables and how you can use them.

CSS variables are declared for a specific element as a custom property. Then, you can use that custom property anywhere you use that element.

Declaration and Usage

Here’s how you declare a custom property:

element { \n\t--background-color: #f00;\n}

Here, element can be a selector of any element, for example, div, p, .test, etc…

What we did is that we declared a custom property for this element called --background-color . All CSS custom properties must start with -- .

Now, we can use this custom property inside element using the var function.

element {  \n\tbackground-color: var(--background-color);\n}

Here, we assigned the background-color property of element to the variable we declared earlier.

This is nice and all, but usually we have repetition inside different elements, not just one. declaring a custom variable inside one element type is not very convenient.

In order to use a custom property inside more than one element type, we can declare the custom property inside the :root pseudo-class.

:root {  \n\t--primary-color: #333;\n}

Now, we can use the variable --primary-color inside any element in our document:

div {  \n\tcolor: var(--primary-color);\n}\np {  \n\tbackground-color: var(--primary-color);\n}\n.fancy {  \n\tborder-color: var(--primary-color);\n}

By declaring our custom property inside :root , we are now able to use it inside div to set the text color, p to set the background color, and any element having class fancy to set the border color. This way, not only did we minimize repetition, but we also made it easier to edit and change our website’s primary color at any given point.

Inheritance

Elements can also inherit custom properties. For example, let’s say we have the following HTML:

<div class=\"parent\">\n\t<div class=\"first-child\"></div>  \n    <div class=\"second-child\"><div>\n</div>

Then, we declare a variable called --text-size on .parent :

.parent {  \n\t--text-size: 15px;\n}

Now, we can use --text-size not only inside .parent , but also inside its children as well:

.first-child {\n    font-size: var(--text-size);\n}

We can also override custom properties. We can do that by redeclaring the custom property inside the child element:

.second-child {  \n\t--text-size: 30px;\n}

Now, if you use --text-size inside .second-child , it’ll be evaluated to 30px, but if you use it inside .first-child or .parent, it will still be 15px.

Fallback Values

You can also define a fallback value for a variable by passing a second parameter to var . For example:

.second-child {  \n\tfont-size: var(--text-size, 30px);\n}

Fallback values are used when the variable is not defined yet. They are not used as a fallback to browser incompatibility.

Conclusion

And that’s how you can use CSS variables! Keep in mind that some browsers like Internet Explorer don’t support them, so if you need to support all browsers you need to take that into consideration.

","htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"A lot of people don’t know about CSS variables, and you might be one of them! It’s time to learn about CSS variables and how you can use them."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"CSS variables are declared for a specific element as a custom property. Then, you can use that custom property anywhere you use that element."}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h1","properties":{"id":"declaration-and-usage"},"children":[{"type":"text","value":"Declaration and Usage"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Here’s how you declare a custom property:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":"element"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" \n\t"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"--background-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" #f00"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Here, "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"element"}]},{"type":"text","value":" can be a selector of any element, for example, div, p, .test, etc…"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"What we did is that we declared a custom property for this element called "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"--background-color"}]},{"type":"text","value":" . All CSS custom properties must start with "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"--"}]},{"type":"text","value":" ."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Now, we can use this custom property inside "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"element"}]},{"type":"text","value":" using the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"var"}]},{"type":"text","value":" function."}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":"element"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" \n\t"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"background-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"var"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"--background-color"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Here, we assigned the background-color property of "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"element"}]},{"type":"text","value":" to the variable we declared earlier."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This is nice and all, but usually we have repetition inside different elements, not just one. declaring a custom variable inside one element type is not very convenient."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In order to use a custom property inside more than one element type, we can declare the custom property inside the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":":root"}]},{"type":"text","value":" pseudo-class."}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":":root"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" \n\t"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"--primary-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" #333"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Now, we can use the variable "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"--primary-color"}]},{"type":"text","value":" inside any element in our document:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":"div"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" \n\t"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"var"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"--primary-color"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":"p"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" \n\t"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"background-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"var"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"--primary-color"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".fancy"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" \n\t"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"border-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"var"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"--primary-color"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"By declaring our custom property inside "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":":root"}]},{"type":"text","value":" , we are now able to use it inside "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"div"}]},{"type":"text","value":" to set the text color, "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"p"}]},{"type":"text","value":" to set the background color, and any element having class "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"fancy"}]},{"type":"text","value":" to set the border color. This way, not only did we minimize repetition, but we also made it easier to edit and change our website’s primary color at any given point."}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h1","properties":{"id":"inheritance"},"children":[{"type":"text","value":"Inheritance"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Elements can also inherit custom properties. For example, let’s say we have the following HTML:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"html"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-html"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-html"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"div"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"class"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"parent"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n\t"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"div"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"class"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"first-child"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":""}]}]},{"type":"text","value":" \n "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"div"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"class"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"second-child"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"div"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":""}]}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Then, we declare a variable called "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"--text-size"}]},{"type":"text","value":" on "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":".parent"}]},{"type":"text","value":" :"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".parent"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" \n\t"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"--text-size"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 15px"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Now, we can use "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"--text-size"}]},{"type":"text","value":" not only inside "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":".parent"}]},{"type":"text","value":" , but also inside its children as well:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".first-child"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"font-size"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"var"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"--text-size"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"We can also override custom properties. We can do that by redeclaring the custom property inside the child element:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".second-child"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" \n\t"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"--text-size"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 30px"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Now, if you use "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"--text-size"}]},{"type":"text","value":" inside "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":".second-child"}]},{"type":"text","value":" , it’ll be evaluated to 30px, but if you use it inside "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":".first-child"}]},{"type":"text","value":" or "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":".parent"}]},{"type":"text","value":", it will still be 15px."}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h1","properties":{"id":"fallback-values"},"children":[{"type":"text","value":"Fallback Values"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can also define a fallback value for a variable by passing a second parameter to "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"var"}]},{"type":"text","value":" . For example:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".second-child"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" \n\t"},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"font-size"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"var"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"--text-size"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" 30px"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Fallback values are used when the variable is not defined yet. They are "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"em","properties":{},"children":[{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"not"}]}]}]}]},{"type":"text","value":" used as a fallback to browser incompatibility."}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h1","properties":{"id":"conclusion"},"children":[{"type":"text","value":"Conclusion"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"And that’s how you can use CSS variables! Keep in mind that some browsers like Internet Explorer don’t support them, so if you need to support all browsers you need to take that into consideration."}]}],"data":{"quirksMode":false}},"tableOfContents":[{"id":"declaration-and-usage","heading":"Declaration and Usage"},{"id":"inheritance","heading":"Inheritance"},{"id":"fallback-values","heading":"Fallback Values"},{"id":"conclusion","heading":"Conclusion"}]},"featureImageSharp":{"base":"carbon--1-.png","publicURL":"/static/ffa580b4a342c60287433e8f82cb8e58/carbon--1-.png","imageMeta":{"width":1080,"height":836},"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsTAAALEwEAmpwYAAAB8klEQVQ4y6WUy27aQBSGeZaCTTC2xzeMjT2AjblfWilqVVXpE7RSVlGbRdVdV5SEKH06IqKEVcI7+K9m7HBpXRKpi8//eGbOr3PsM5PrX9xhcHmP3vUDuldrDK/WGP1aY/hC+N7rR+7BvHKDyxW6P5cIP3xH5+QzzJNT6JNT6G9ehjb5BOv9N/RnSzCv3HC+Qnu6gOd10KQSRErwSlJRUFQUZBV5eau7Y6YFhSAvSThyIvSmCwzmqyTD/vQGRTpGXnch+20ofoii5UE0XIhmjVNMEffwIGgVSPUJetObJEP2YC8SHUGqOChaNcheEyTsQqm3EmiIiu3BdCgEw4GoVyEyNVwIxOSxmYalipts2gQ4yVivcn2aF9K1g4al+giyYYNYHkq2v2+6MXA2xsn6MxlKZhXliget1QEJIqgNVnIIhQb8M6g0hOwHIK0uZBpCaUTQ2Fp9vP9TNoZ2DQXdRUGrbsvdyS6LAxmOUTRtELcGxfH/Ki+L7JLniWG58ZpnSGoURtSB7AVQaIu3kNJoQ212UPZDrqoXpC2V1TbccIEjN0LJ0JGXNeQVAkFlaIkSLR1vOdDY93F/toztjz9i4/gstt6dx+bbrylfdvRP2Px5bB6f8VjmwbxyT5cDO+CjnQP/HP+8HPoXdw+c2e3/kfr8BonVY0AbLAheAAAAAElFTkSuQmCC","aspectRatio":1.2935323383084578,"src":"/static/ffa580b4a342c60287433e8f82cb8e58/50033/carbon--1-.png","srcSet":"/static/ffa580b4a342c60287433e8f82cb8e58/bcfcb/carbon--1-.png 260w,\n/static/ffa580b4a342c60287433e8f82cb8e58/19d75/carbon--1-.png 520w,\n/static/ffa580b4a342c60287433e8f82cb8e58/50033/carbon--1-.png 1040w,\n/static/ffa580b4a342c60287433e8f82cb8e58/14010/carbon--1-.png 1080w","srcWebp":"/static/ffa580b4a342c60287433e8f82cb8e58/e4875/carbon--1-.webp","srcSetWebp":"/static/ffa580b4a342c60287433e8f82cb8e58/dc8f3/carbon--1-.webp 260w,\n/static/ffa580b4a342c60287433e8f82cb8e58/2db4b/carbon--1-.webp 520w,\n/static/ffa580b4a342c60287433e8f82cb8e58/e4875/carbon--1-.webp 1040w,\n/static/ffa580b4a342c60287433e8f82cb8e58/788b4/carbon--1-.webp 1080w","sizes":"(max-width: 1040px) 100vw, 1040px"}}}},"prev":{"id":"Ghost__Post__6127ba1b3ed159214d382e6d","title":"Best Websites to Find Free Resources for Frontend Web Developers and Designers","slug":"best-websites-to-find-free-resources-for-frontend-web-developers-and-designers","featured":false,"feature_image":"https://res-2.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/photo-1505304451-3b3b85a91afe.jpg","excerpt":"Perhaps one of the hardest tasks is finding free resources for your projects. This list will hold websites that offer freebies.","custom_excerpt":"Perhaps one of the hardest tasks is finding free resources for your projects. This list will hold websites that offer freebies.","visibility":"public","created_at_pretty":"26 Oct 2020","published_at_pretty":"26 Aug 2019","updated_at_pretty":"26 Aug 2021","created_at":"2020-10-26T21:33:46.000+00:00","published_at":"2019-08-26T21:33:00.000+00:00","updated_at":"2021-08-26T17:54:20.000+00:00","meta_title":null,"meta_description":null,"og_description":null,"og_image":null,"og_title":null,"twitter_description":null,"twitter_image":null,"twitter_title":null,"authors":[{"slug":"shahed","url":"https://backend.shahednasser.com/author/shahed/","name":"Shahed Nasser","bio":null,"cover_image":null,"profile_image":"https://backend.shahednasser.com/content/images/2022/03/IMG_0591.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":null}],"primary_author":{"slug":"shahed","url":"https://backend.shahednasser.com/author/shahed/","name":"Shahed Nasser","bio":null,"cover_image":null,"profile_image":"https://backend.shahednasser.com/content/images/2022/03/IMG_0591.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":{"base":"IMG_0591.jpg","publicURL":"/static/ceb49c3c631485453e71e00d7f84b069/IMG_0591.jpg","imageMeta":{"width":1182,"height":1179},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAAMEAQL/xAAWAQEBAQAAAAAAAAAAAAAAAAADBAL/2gAMAwEAAhADEAAAAdXiFM6i0CohUWXoKn//xAAcEAACAgIDAAAAAAAAAAAAAAACAwESBBEhM0H/2gAIAQEAAQUCWySE3WEr7SzbXjAj4iKty+sOQ//EABYRAQEBAAAAAAAAAAAAAAAAAAERIP/aAAgBAwEBPwEhj//EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQIBAT8BH//EAB4QAAIBBAMBAAAAAAAAAAAAAAABIRESMUECECJx/9oACAEBAAY/ApVGWvOjzgtUwLlTZA0sdL4f/8QAHBAAAwACAwEAAAAAAAAAAAAAAAERITFBkbHB/9oACAEBAAE/IahkCy+N2GwZpjQiJHJCspUFY0QrSi+HqiW2rgf/2gAMAwEAAgADAAAAEPw3/wD/xAAYEQEBAAMAAAAAAAAAAAAAAAAAARExQf/aAAgBAwEBPxCtjDqP/8QAFxEBAQEBAAAAAAAAAAAAAAAAAQAxEf/aAAgBAgEBPxBFus6Tt//EAB8QAQEAAgIBBQAAAAAAAAAAAAERACExQWFRcYGR0f/aAAgBAQABPxAuaBPPzkO1wyX7F4wkwXanfZrFQgeqE9JgS14vVOvrERIJomVBKwt2jebAeP0yVa8h1n//2Q==","aspectRatio":1,"src":"/static/ceb49c3c631485453e71e00d7f84b069/31709/IMG_0591.jpg","srcSet":"/static/ceb49c3c631485453e71e00d7f84b069/f340b/IMG_0591.jpg 28w,\n/static/ceb49c3c631485453e71e00d7f84b069/22d64/IMG_0591.jpg 55w,\n/static/ceb49c3c631485453e71e00d7f84b069/31709/IMG_0591.jpg 110w,\n/static/ceb49c3c631485453e71e00d7f84b069/aa249/IMG_0591.jpg 165w,\n/static/ceb49c3c631485453e71e00d7f84b069/0dc33/IMG_0591.jpg 220w,\n/static/ceb49c3c631485453e71e00d7f84b069/d8257/IMG_0591.jpg 1182w","srcWebp":"/static/ceb49c3c631485453e71e00d7f84b069/8678c/IMG_0591.webp","srcSetWebp":"/static/ceb49c3c631485453e71e00d7f84b069/59cda/IMG_0591.webp 28w,\n/static/ceb49c3c631485453e71e00d7f84b069/7da75/IMG_0591.webp 55w,\n/static/ceb49c3c631485453e71e00d7f84b069/8678c/IMG_0591.webp 110w,\n/static/ceb49c3c631485453e71e00d7f84b069/f282e/IMG_0591.webp 165w,\n/static/ceb49c3c631485453e71e00d7f84b069/a7b21/IMG_0591.webp 220w,\n/static/ceb49c3c631485453e71e00d7f84b069/63099/IMG_0591.webp 1182w","sizes":"(max-width: 110px) 100vw, 110px"}}}},"primary_tag":{"slug":"beginner","url":"https://backend.shahednasser.com/tag/beginner/","name":"Beginners","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/photo-1521185496955-15097b20c5fe-2.jpeg","description":"Tutorials, articles, and tips to help beginners accelerate their journey in programming.","meta_title":"Beginners","meta_description":"Tutorials, articles, and tips to help beginners accelerate their journey in programming.","featureImageSharp":{"base":"photo-1521185496955-15097b20c5fe-2.jpeg","publicURL":"/static/13f953658eaecb779984996ea356b1c4/photo-1521185496955-15097b20c5fe-2.jpeg","imageMeta":{"width":2000,"height":1547},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAQCBf/EABYBAQEBAAAAAAAAAAAAAAAAAAIAAf/aAAwDAQACEAMQAAABhU05c9sV/8QAGRAAAwEBAQAAAAAAAAAAAAAAAQIDABIR/9oACAEBAAEFAuTgGxGjVeRdPLOHf//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABkQAAMBAQEAAAAAAAAAAAAAAAABEXECEP/aAAgBAQAGPwL2dJaOqYVH/8QAGhAAAwADAQAAAAAAAAAAAAAAAAERITFBYf/aAAgBAQABPyFpWJH6IutKCacL+lRRGxiDm+H/2gAMAwEAAgADAAAAEK//AP/EABYRAQEBAAAAAAAAAAAAAAAAAAEREP/aAAgBAwEBPxAI3P/EABYRAQEBAAAAAAAAAAAAAAAAAAERAP/aAAgBAgEBPxBaR03/xAAbEAEBAAIDAQAAAAAAAAAAAAABEQAhMUGxcf/aAAgBAQABPxAInmDF9wQ6urfMI5JgA/si0141k9pEa4fcjFJmybz/2Q==","aspectRatio":1.2935323383084578,"src":"/static/13f953658eaecb779984996ea356b1c4/d5c54/photo-1521185496955-15097b20c5fe-2.jpg","srcSet":"/static/13f953658eaecb779984996ea356b1c4/65d8c/photo-1521185496955-15097b20c5fe-2.jpg 260w,\n/static/13f953658eaecb779984996ea356b1c4/c5f21/photo-1521185496955-15097b20c5fe-2.jpg 520w,\n/static/13f953658eaecb779984996ea356b1c4/d5c54/photo-1521185496955-15097b20c5fe-2.jpg 1040w,\n/static/13f953658eaecb779984996ea356b1c4/81a53/photo-1521185496955-15097b20c5fe-2.jpg 1560w,\n/static/13f953658eaecb779984996ea356b1c4/4e5f3/photo-1521185496955-15097b20c5fe-2.jpg 2000w","srcWebp":"/static/13f953658eaecb779984996ea356b1c4/e4875/photo-1521185496955-15097b20c5fe-2.webp","srcSetWebp":"/static/13f953658eaecb779984996ea356b1c4/dc8f3/photo-1521185496955-15097b20c5fe-2.webp 260w,\n/static/13f953658eaecb779984996ea356b1c4/2db4b/photo-1521185496955-15097b20c5fe-2.webp 520w,\n/static/13f953658eaecb779984996ea356b1c4/e4875/photo-1521185496955-15097b20c5fe-2.webp 1040w,\n/static/13f953658eaecb779984996ea356b1c4/f5845/photo-1521185496955-15097b20c5fe-2.webp 1560w,\n/static/13f953658eaecb779984996ea356b1c4/49d6b/photo-1521185496955-15097b20c5fe-2.webp 2000w","sizes":"(max-width: 1040px) 100vw, 1040px"}}}},"tags":[{"slug":"beginner","url":"https://backend.shahednasser.com/tag/beginner/","name":"Beginners","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/photo-1521185496955-15097b20c5fe-2.jpeg","description":"Tutorials, articles, and tips to help beginners accelerate their journey in programming.","meta_title":"Beginners","meta_description":"Tutorials, articles, and tips to help beginners accelerate their journey in programming.","featureImageSharp":null},{"slug":"tips","url":"https://backend.shahednasser.com/tag/tips/","name":"Tips","visibility":"public","feature_image":null,"description":"Learn more about programming and development through these articles that have essential tips!","meta_title":"Tips on Technology and Programming","meta_description":null,"featureImageSharp":null},{"slug":"open-source","url":"https://backend.shahednasser.com/tag/open-source/","name":"Open Source","visibility":"public","feature_image":null,"description":null,"meta_title":null,"meta_description":null,"featureImageSharp":null},{"slug":"design","url":"https://backend.shahednasser.com/tag/design/","name":"Design","visibility":"public","feature_image":null,"description":"Learn more about Web Design through tutorials, articles and tips.","meta_title":null,"meta_description":null,"featureImageSharp":null}],"plaintext":"Perhaps one of the hardest tasks is finding free resources for your projects.\nThis list will hold websites that offer freebies. I will try to keep the list\nupdated along the way.\n\nSome of the websites may have a different license for each resource they offer,\nso you might need to look out for that.\n\n\n--------------------------------------------------------------------------------\n\nGeneral\n 1. Freebie Supply [https://freebiesupply.com/]: Free icons, vectors, fonts,\n templates, themes and more.\n 2. Freebiesbug [https://freebiesbug.com/]: Another website that has a wide\n collection of icons, vectors, templates, and more.\n 3. Neede [https://neede.co/]: It’s aimed more towards designers, but developers\n might find some useful stuff like templates, colors, illustrations and more.\n\nFonts\n 1. Google Fonts [https://fonts.google.com/]\n 2. 1001 Fonts [https://www.1001fonts.com/]\n\nIcons\n 1. Material Design Icons [https://material.io/resources/icons/]\n 2. Feather [https://feathericons.com/]\n 3. SVG Repo [https://www.svgrepo.com/]\n\nWebsite Templates\n 1. Free CSS [https://www.free-css.com/]: Free CSS templates, layouts, and\n menus.\n 2. Free Web Templates [https://www.freewebtemplates.com/]\n 3. Free Website Templates [https://freewebsitetemplates.com/]\n 4. One Page HTML templates [https://onepagelove.com/templates/html-templates]\n 5. BootstrapMade [https://bootstrapmade.com/]: Free website templates (requires\n attribution)\n 6. HTML5 UP! [https://html5up.net/]: Free responsive HTML5 templates (requires\n attribution)\n 7. TEMPLATD [https://templated.co/]: Free HTML templates (requires attribution)\n\nIllustrations\n 1. unDraw [https://undraw.co/]: Free illustrations for any project you can\n think of.\n 2. Lukasz Adam’s Free Illustrations [https://lukaszadam.com/illustrations]: \n Free unique illustrations.\n 3. DrawKit [https://www.drawkit.io/]: Free wide range of illustrations.\n\nImages\n 1. Unsplash [https://unsplash.com/]: Free images with no attribution required.\n 2. Pexels [https://www.pexels.com/]: Free stock images with no attribution\n required.\n\nGradients and Colors\n 1. WebGradients [https://webgradients.com/]: Free gradients that you can either\n copy as CSS rules or download them as .sketch or .psd\n 2. uiGradients [https://uigradients.com/#Pinky]: Free gradients that you can\n either copy as CSS rules or download them as .jpg images.\n 3. Gradient Hunt [https://gradienthunt.com/]: Free gradients that you can\n either copy as CSS rules or download them as .png images. They also offer a\n Chrome extension.\n 4. Color Hunt [https://colorhunt.co/]: Free color schemas. Also offers a Chrome\n extension.\n\nOther\n 1. Pattern Cooler [https://www.patterncooler.com/]: Free background patterns.\n 2. The Pattern Library [http://thepatternlibrary.com/]: Free background\n patterns.\n 3. hatchful [https://hatchful.shopify.com/]: Free logo generator.","html":"

Perhaps one of the hardest tasks is finding free resources for your projects. This list will hold websites that offer freebies. I will try to keep the list updated along the way.

Some of the websites may have a different license for each resource they offer, so you might need to look out for that.

General

  1. Freebie Supply: Free icons, vectors, fonts, templates, themes and more.
  2. Freebiesbug: Another website that has a wide collection of icons, vectors, templates, and more.
  3. Neede: It’s aimed more towards designers, but developers might find some useful stuff like templates, colors, illustrations and more.

Fonts

  1. Google Fonts
  2. 1001 Fonts

Icons

  1. Material Design Icons
  2. Feather
  3. SVG Repo

Website Templates

  1. Free CSS: Free CSS templates, layouts, and menus.
  2. Free Web Templates
  3. Free Website Templates
  4. One Page HTML templates
  5. BootstrapMade: Free website templates (requires attribution)
  6. HTML5 UP!: Free responsive HTML5 templates (requires attribution)
  7. TEMPLATD: Free HTML templates (requires attribution)

Illustrations

  1. unDraw: Free illustrations for any project you can think of.
  2. Lukasz Adam’s Free Illustrations: Free unique illustrations.
  3. DrawKit: Free wide range of illustrations.

Images

  1. Unsplash: Free images with no attribution required.
  2. Pexels: Free stock images with no attribution required.

Gradients and Colors

  1. WebGradients: Free gradients that you can either copy as CSS rules or download them as .sketch or .psd
  2. uiGradients: Free gradients that you can either copy as CSS rules or download them as .jpg images.
  3. Gradient Hunt: Free gradients that you can either copy as CSS rules or download them as .png images. They also offer a Chrome extension.
  4. Color Hunt: Free color schemas. Also offers a Chrome extension.

Other

  1. Pattern Cooler: Free background patterns.
  2. The Pattern Library: Free background patterns.
  3. hatchful: Free logo generator.
","url":"https://backend.shahednasser.com/best-websites-to-find-free-resources-for-frontend-web-developers-and-designers/","canonical_url":null,"uuid":"09c132ce-ef97-45b9-8943-a38cf875e93f","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"5f9740bab366d4001e86cc8c","reading_time":1,"send_email_when_published":null,"email_subject":null,"childHtmlRehype":{"html":"

Perhaps one of the hardest tasks is finding free resources for your projects. This list will hold websites that offer freebies. I will try to keep the list updated along the way.

Some of the websites may have a different license for each resource they offer, so you might need to look out for that.

General

  1. Freebie Supply: Free icons, vectors, fonts, templates, themes and more.
  2. Freebiesbug: Another website that has a wide collection of icons, vectors, templates, and more.
  3. Neede: It’s aimed more towards designers, but developers might find some useful stuff like templates, colors, illustrations and more.

Fonts

  1. Google Fonts
  2. 1001 Fonts

Icons

  1. Material Design Icons
  2. Feather
  3. SVG Repo

Website Templates

  1. Free CSS: Free CSS templates, layouts, and menus.
  2. Free Web Templates
  3. Free Website Templates
  4. One Page HTML templates
  5. BootstrapMade: Free website templates (requires attribution)
  6. HTML5 UP!: Free responsive HTML5 templates (requires attribution)
  7. TEMPLATD: Free HTML templates (requires attribution)

Illustrations

  1. unDraw: Free illustrations for any project you can think of.
  2. Lukasz Adam’s Free Illustrations: Free unique illustrations.
  3. DrawKit: Free wide range of illustrations.

Images

  1. Unsplash: Free images with no attribution required.
  2. Pexels: Free stock images with no attribution required.

Gradients and Colors

  1. WebGradients: Free gradients that you can either copy as CSS rules or download them as .sketch or .psd
  2. uiGradients: Free gradients that you can either copy as CSS rules or download them as .jpg images.
  3. Gradient Hunt: Free gradients that you can either copy as CSS rules or download them as .png images. They also offer a Chrome extension.
  4. Color Hunt: Free color schemas. Also offers a Chrome extension.

Other

  1. Pattern Cooler: Free background patterns.
  2. The Pattern Library: Free background patterns.
  3. hatchful: Free logo generator.
","htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Perhaps one of the hardest tasks is finding free resources for your projects. This list will hold websites that offer freebies. I will try to keep the list updated along the way."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Some of the websites may have a different license for each resource they offer, so you might need to look out for that."}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h2","properties":{"id":"general"},"children":[{"type":"text","value":"General"}]},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://freebiesupply.com/","rel":["noopener","nofollow"]},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Freebie Supply"}]}]}]},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":": "}]}]},{"type":"text","value":"Free icons, vectors, fonts, templates, themes and more."}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://freebiesbug.com/","rel":["noopener","nofollow"]},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Freebiesbug"}]}]}]},{"type":"text","value":": Another website that has a wide collection of icons, vectors, templates, and more."}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://neede.co/","rel":["noopener","nofollow"]},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Neede"}]}]}]},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":": "}]}]},{"type":"text","value":"It’s aimed more towards designers, but developers might find some useful stuff like templates, colors, illustrations and more."}]}]},{"type":"element","tagName":"h2","properties":{"id":"fonts"},"children":[{"type":"text","value":"Fonts"}]},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://fonts.google.com/","rel":["noopener","nofollow"]},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Google Fonts"}]}]}]}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://www.1001fonts.com/","rel":["noopener","nofollow"]},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"1001 Fonts"}]}]}]}]}]},{"type":"element","tagName":"h2","properties":{"id":"icons"},"children":[{"type":"text","value":"Icons"}]},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://material.io/resources/icons/","rel":["noopener","nofollow"]},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Material Design Icons"}]}]}]}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://feathericons.com/","rel":["noopener","nofollow"]},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Feather"}]}]}]}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://www.svgrepo.com/","rel":["noopener","nofollow"]},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"SVG Repo"}]}]}]}]}]},{"type":"element","tagName":"h2","properties":{"id":"website-templates"},"children":[{"type":"text","value":"Website Templates"}]},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://www.free-css.com/","rel":["noopener","nofollow"]},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Free CSS"}]}]}]},{"type":"text","value":": Free CSS templates, layouts, and menus."}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://www.freewebtemplates.com/","rel":["noopener","nofollow"]},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Free Web Templates"}]}]}]}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://freewebsitetemplates.com/","rel":["noopener","nofollow"]},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Free Website Templates"}]}]}]}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://onepagelove.com/templates/html-templates","rel":["noopener","nofollow"]},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"One Page HTML templates"}]}]}]}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://bootstrapmade.com/","rel":["noopener","nofollow"]},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"BootstrapMade"}]}]}]},{"type":"text","value":": Free website templates (requires attribution)"}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://html5up.net/","rel":["noopener","nofollow"]},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"HTML5 UP!"}]}]}]},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":": "}]}]},{"type":"text","value":"Free responsive HTML5 templates (requires attribution)"}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://templated.co/","rel":["noopener","nofollow"]},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"TEMPLATD"}]}]}]},{"type":"text","value":": Free HTML templates (requires attribution)"}]}]},{"type":"element","tagName":"h2","properties":{"id":"illustrations"},"children":[{"type":"text","value":"Illustrations"}]},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://undraw.co/","rel":["noopener","nofollow"]},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"unDraw"}]}]}]},{"type":"text","value":": Free illustrations for any project you can think of."}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://lukaszadam.com/illustrations","rel":["noopener","nofollow"]},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Lukasz Adam’s Free Illustrations"}]}]}]},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":": "}]}]},{"type":"text","value":"Free unique illustrations."}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://www.drawkit.io/","rel":["noopener","nofollow"]},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"DrawKit"}]}]}]},{"type":"text","value":": Free wide range of illustrations."}]}]},{"type":"element","tagName":"h2","properties":{"id":"images"},"children":[{"type":"text","value":"Images"}]},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://unsplash.com/","rel":["noopener","nofollow"]},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Unsplash"}]}]}]},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":": "}]}]},{"type":"text","value":"Free images with no attribution required."}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://www.pexels.com/","rel":["noopener","nofollow"]},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Pexels"}]}]}]},{"type":"text","value":": Free stock images with no attribution required."}]}]},{"type":"element","tagName":"h2","properties":{"id":"gradients-and-colors"},"children":[{"type":"text","value":"Gradients and Colors"}]},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://webgradients.com/","rel":["noopener","nofollow"]},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"WebGradients"}]}]}]},{"type":"text","value":": Free gradients that you can either copy as CSS rules or download them as .sketch or .psd"}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://uigradients.com/#Pinky","rel":["noopener","nofollow"]},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"uiGradients"}]}]}]},{"type":"text","value":": Free gradients that you can either copy as CSS rules or download them as .jpg images."}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://gradienthunt.com/","rel":["noopener","nofollow"]},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Gradient Hunt"}]}]}]},{"type":"text","value":": Free gradients that you can either copy as CSS rules or download them as .png images. They also offer a Chrome extension."}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://colorhunt.co/","rel":["noopener","nofollow"]},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Color Hunt"}]}]}]},{"type":"text","value":": Free color schemas. Also offers a Chrome extension."}]}]},{"type":"element","tagName":"h2","properties":{"id":"other"},"children":[{"type":"text","value":"Other"}]},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://www.patterncooler.com/","rel":["noopener","nofollow"]},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Pattern Cooler"}]}]}]},{"type":"text","value":": Free background patterns."}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"http://thepatternlibrary.com/","rel":["noopener","nofollow"]},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"The Pattern Library"}]}]}]},{"type":"text","value":": Free background patterns."}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://hatchful.shopify.com/","rel":["noopener","nofollow"]},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"hatchful"}]}]}]},{"type":"text","value":": Free logo generator."}]}]}],"data":{"quirksMode":false}},"tableOfContents":[{"id":"general","heading":"General"},{"id":"fonts","heading":"Fonts"},{"id":"icons","heading":"Icons"},{"id":"website-templates","heading":"Website Templates"},{"id":"illustrations","heading":"Illustrations"},{"id":"images","heading":"Images"},{"id":"gradients-and-colors","heading":"Gradients and Colors"},{"id":"other","heading":"Other"}]},"featureImageSharp":{"base":"photo-1505304451-3b3b85a91afe.jpg","publicURL":"/static/5b5b3cb18304a6e7b147980c13d0c5b3/photo-1505304451-3b3b85a91afe.jpg","imageMeta":{"width":2000,"height":1125},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAMEAv/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAFdUUwgwR//xAAbEAEAAgIDAAAAAAAAAAAAAAABAgMABBMiMf/aAAgBAQABBQLX7FsXJqTqsmPPasvf/8QAFREBAQAAAAAAAAAAAAAAAAAAEBH/2gAIAQMBAT8Bh//EABYRAAMAAAAAAAAAAAAAAAAAABARIf/aAAgBAgEBPwFwf//EABsQAQACAgMAAAAAAAAAAAAAAAEAAhEhEBIx/9oACAEBAAY/An0me9tRhUdRzd4//8QAGhAAAwEBAQEAAAAAAAAAAAAAAAERITFBUf/aAAgBAQABPyGW9r2xJGLH0paKO3fSKn5GiMDNu31n/9oADAMBAAIAAwAAABBv3//EABYRAAMAAAAAAAAAAAAAAAAAAAABIf/aAAgBAwEBPxCHRn//xAAWEQEBAQAAAAAAAAAAAAAAAAAAIQH/2gAIAQIBAT8QuGP/xAAdEAEAAwABBQAAAAAAAAAAAAABABEhMUFRYXGh/9oACAEBAAE/EKUdjLuR9lP3wg8Zce+b0WxhiG0Ngsg4MipLor1n/9k=","aspectRatio":1.7857142857142858,"src":"/static/5b5b3cb18304a6e7b147980c13d0c5b3/ea4ab/photo-1505304451-3b3b85a91afe.jpg","srcSet":"/static/5b5b3cb18304a6e7b147980c13d0c5b3/477ba/photo-1505304451-3b3b85a91afe.jpg 175w,\n/static/5b5b3cb18304a6e7b147980c13d0c5b3/06776/photo-1505304451-3b3b85a91afe.jpg 350w,\n/static/5b5b3cb18304a6e7b147980c13d0c5b3/ea4ab/photo-1505304451-3b3b85a91afe.jpg 700w,\n/static/5b5b3cb18304a6e7b147980c13d0c5b3/3055e/photo-1505304451-3b3b85a91afe.jpg 1050w,\n/static/5b5b3cb18304a6e7b147980c13d0c5b3/eff08/photo-1505304451-3b3b85a91afe.jpg 1400w,\n/static/5b5b3cb18304a6e7b147980c13d0c5b3/4e5f3/photo-1505304451-3b3b85a91afe.jpg 2000w","srcWebp":"/static/5b5b3cb18304a6e7b147980c13d0c5b3/89afa/photo-1505304451-3b3b85a91afe.webp","srcSetWebp":"/static/5b5b3cb18304a6e7b147980c13d0c5b3/9fca7/photo-1505304451-3b3b85a91afe.webp 175w,\n/static/5b5b3cb18304a6e7b147980c13d0c5b3/37a4e/photo-1505304451-3b3b85a91afe.webp 350w,\n/static/5b5b3cb18304a6e7b147980c13d0c5b3/89afa/photo-1505304451-3b3b85a91afe.webp 700w,\n/static/5b5b3cb18304a6e7b147980c13d0c5b3/78e7a/photo-1505304451-3b3b85a91afe.webp 1050w,\n/static/5b5b3cb18304a6e7b147980c13d0c5b3/03d34/photo-1505304451-3b3b85a91afe.webp 1400w,\n/static/5b5b3cb18304a6e7b147980c13d0c5b3/49d6b/photo-1505304451-3b3b85a91afe.webp 2000w","sizes":"(max-width: 700px) 100vw, 700px"}}}},"next":{"id":"Ghost__Post__6127ba1b3ed159214d382e72","title":"React Hooks Tutorial — Create a Number Trivia Generator Website","slug":"react-hooks-tutorial-create-a-number-trivia-generator-website","featured":false,"feature_image":"https://res-1.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/1_-Ijet6kVJqGgul6adezDLQ.png","excerpt":"In this tutorial, you’ll learn how to exactly use hooks in React. We will build a simple website that generates number trivia.","custom_excerpt":"In this tutorial, you’ll learn how to exactly use hooks in React. We will build a simple website that generates number trivia.","visibility":"public","created_at_pretty":"10 Nov 2020","published_at_pretty":"16 Apr 2019","updated_at_pretty":"10 Nov 2020","created_at":"2020-11-10T07:34:40.000+00:00","published_at":"2019-04-16T07:34:00.000+00:00","updated_at":"2020-11-10T08:20:26.000+00:00","meta_title":null,"meta_description":null,"og_description":null,"og_image":null,"og_title":null,"twitter_description":null,"twitter_image":null,"twitter_title":null,"authors":[{"slug":"shahed","url":"https://backend.shahednasser.com/author/shahed/","name":"Shahed Nasser","bio":null,"cover_image":null,"profile_image":"https://backend.shahednasser.com/content/images/2022/03/IMG_0591.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":null}],"primary_author":{"slug":"shahed","url":"https://backend.shahednasser.com/author/shahed/","name":"Shahed Nasser","bio":null,"cover_image":null,"profile_image":"https://backend.shahednasser.com/content/images/2022/03/IMG_0591.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":{"base":"IMG_0591.jpg","publicURL":"/static/ceb49c3c631485453e71e00d7f84b069/IMG_0591.jpg","imageMeta":{"width":1182,"height":1179},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAAMEAQL/xAAWAQEBAQAAAAAAAAAAAAAAAAADBAL/2gAMAwEAAhADEAAAAdXiFM6i0CohUWXoKn//xAAcEAACAgIDAAAAAAAAAAAAAAACAwESBBEhM0H/2gAIAQEAAQUCWySE3WEr7SzbXjAj4iKty+sOQ//EABYRAQEBAAAAAAAAAAAAAAAAAAERIP/aAAgBAwEBPwEhj//EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQIBAT8BH//EAB4QAAIBBAMBAAAAAAAAAAAAAAABIRESMUECECJx/9oACAEBAAY/ApVGWvOjzgtUwLlTZA0sdL4f/8QAHBAAAwACAwEAAAAAAAAAAAAAAAERITFBkbHB/9oACAEBAAE/IahkCy+N2GwZpjQiJHJCspUFY0QrSi+HqiW2rgf/2gAMAwEAAgADAAAAEPw3/wD/xAAYEQEBAAMAAAAAAAAAAAAAAAAAARExQf/aAAgBAwEBPxCtjDqP/8QAFxEBAQEBAAAAAAAAAAAAAAAAAQAxEf/aAAgBAgEBPxBFus6Tt//EAB8QAQEAAgIBBQAAAAAAAAAAAAERACExQWFRcYGR0f/aAAgBAQABPxAuaBPPzkO1wyX7F4wkwXanfZrFQgeqE9JgS14vVOvrERIJomVBKwt2jebAeP0yVa8h1n//2Q==","aspectRatio":1,"src":"/static/ceb49c3c631485453e71e00d7f84b069/31709/IMG_0591.jpg","srcSet":"/static/ceb49c3c631485453e71e00d7f84b069/f340b/IMG_0591.jpg 28w,\n/static/ceb49c3c631485453e71e00d7f84b069/22d64/IMG_0591.jpg 55w,\n/static/ceb49c3c631485453e71e00d7f84b069/31709/IMG_0591.jpg 110w,\n/static/ceb49c3c631485453e71e00d7f84b069/aa249/IMG_0591.jpg 165w,\n/static/ceb49c3c631485453e71e00d7f84b069/0dc33/IMG_0591.jpg 220w,\n/static/ceb49c3c631485453e71e00d7f84b069/d8257/IMG_0591.jpg 1182w","srcWebp":"/static/ceb49c3c631485453e71e00d7f84b069/8678c/IMG_0591.webp","srcSetWebp":"/static/ceb49c3c631485453e71e00d7f84b069/59cda/IMG_0591.webp 28w,\n/static/ceb49c3c631485453e71e00d7f84b069/7da75/IMG_0591.webp 55w,\n/static/ceb49c3c631485453e71e00d7f84b069/8678c/IMG_0591.webp 110w,\n/static/ceb49c3c631485453e71e00d7f84b069/f282e/IMG_0591.webp 165w,\n/static/ceb49c3c631485453e71e00d7f84b069/a7b21/IMG_0591.webp 220w,\n/static/ceb49c3c631485453e71e00d7f84b069/63099/IMG_0591.webp 1182w","sizes":"(max-width: 110px) 100vw, 110px"}}}},"primary_tag":null,"tags":[],"plaintext":"Hooks have been officially added to React as of React 16.8. One of the main\nbenefits of Hooks in React is that you can use state and effect (which is\ngenerally a combination of different life cycles into one) in a component\nwithout creating a class.\n\nIn this tutorial, you’ll learn how to exactly use hooks in React. We will build\na simple website that gives the user some options to pick from in order to\ngenerate some random number trivia.\n\nYou can check out the demo for the website here\n[http://numbers-trivia.surge.sh/], and the source code on the GitHub repository\n[https://github.com/shahednasser/numbers-trivia].\n\nLet’s first start by creating a react app. Since our website will be very\nsimple, we will use the create-react-app command. If you don’t have it\ninstalled, you can install it using npm.\n\nRun the following in your terminal or CMD:\n\nnpm i -g create-react-app\n\nThis will install create-react-app globally.\n\nNow we can create our React app:\n\ncreate-react-app numbers-trivia\n\nRunning this command will create a directory in the working directory with the\nname you supply for the React app. I named it numbers-trivia but you can call it\nwhatever you want.\n\nInside that directory, it will also install all the packages and files needed to\nrun the website. It will install packages like react, react-dom, react-scripts \nand more.\n\nOnce it’s done, change into the newly created directory and start the server:\n\ncd numbers-trivia\nnpm start\n\nOnce you start the server, a web page of your website in your favorite browser\nwill open. You will see a page with just the logo and a link to learn React.\n\nBefore we start changing the page, if you are not familiar with React, let’s\ntake a look at the structure of our React app. It should look something like\nthis:\n\nIn our root directory, we will find a bunch of directories. node_modules holds\nall the packages React needs to run and any package you might add. public holds\nthe files our server serves.\n\nThe directory that we will spend most of our time in is the src directory. This\ndirectory will hold all of our React components.\n\nAs you can see there are a bunch of files in that directory. index.js is\nbasically the file that renders our highest React component.\n\nWe only have one React component right now which is in App.js. If you open it,\nyou will find the code that renders the logo with the link to learn React that\nyou currently see on the website.\n\nSo, in order to see how changing our App component will change the content of\nthe website, let’s modify the code by removing the current content and replacing\nit with our favorite phrase: “Hello, World!”\n\nimport React, { Component } from 'react' \nimport logo from './logo.svg' \nimport './App.css' \nclass App extends Component {\n render() {\n return (\n
\n
\n

Hello, World!

\n
\n
\n )\n }\n }\nexport default App\n\nWe just replaced the content of the header element. Now, if your server is still\nrunning you will see that your page updated without you refreshing it, and you\nwill see that the previous content is replaced with Hello, World!\n\nSo now we know how and where we should edit our React components in order to get\nthe result we want. We can go ahead and start with our objective.\n\nWhat we’ll do for this website is the following:\n\n 1. Show a welcome message the first time the user opens the website, then\n replace it with a message prompting the user to try the generator.\n 2. Render a form with text and select inputs. The text input is where the user\n can enter the number they want to see trivia about, and the select input\n will provide the user with options related to the trivia.\n 3. On submitting the form, send a request to this API [http://numbersapi.com/] \n to fetch the trivia we need.\n 4. Render the trivia for the user to see it.\n\nLet’s start by organizing our directory structure first. In React it’s good\npractice to create a directory inside src holding all the components. We’ll\ncreate a directory called components. Once you create the directory, move App.js \ninto there. We will also create a directory called styles and move App.css and \nindex.css into it.\n\nWhen you do that, you will need to change the imports in your files as\nfollowing:\n\n 1. in index.js:\n\nimport React from 'react'; \nimport ReactDOM from 'react-dom'; \nimport '../styles/index.css'; \nimport App from './components/App'; \nimport as serviceWorker from './serviceWorker';\n\n2. in App.js:\n\nimport React, { Component } from 'react'; \nimport logo from './logo.svg'; \nimport '../styles/App.css';\n\nOur directory structure should look like this now:\n\nWe will go ahead now and start building our webpage.\n\nThe first thing in our objectives list is showing a welcome message when the\nuser first opens the webpage. It will show up for 3 seconds, and then changes to\nanother message that will prompt the user to try out the trivia generator.\n\nWithout hooks, this could be done by using React’s lifecycle method \ncomponentDidMount which runs right after the component first renders.\n\nNow, we can use the effect hook [https://reactjs.org/docs/hooks-effect.html] \ninstead. It will look something like this:\n\nuseEffect(() => {\n //perform something post render\n});\n\nThe function you pass to useEffect will be executed after every render. This\ncombines the lifecycles methods componentDidMount and componentDidUpdate into\none.\n\nWhat if you want to do something just after the first time the component\nrenders, like in componentDidMount? You can do this by passing a second\nparameter to useEffect.\n\nuseEffect accepts an array as a second parameter. This parameter is used as a\ncondition on when to perform the passed function. So, let’s say you want to\nchange a counter only after the variable counter changes, you can do it like so:\n\nuseEffect(() => document.title = `You have clicked ${counter} times`, [counter]);\n\nThis way, the function passed to useEffect will run after render only if the\nvalue for counter changes.\n\nIf we want the function to run only after the first render, we can do that by\npassing an empty array as the second parameter.\n\nLet’s come back now to what we want to do. We want to show a welcome message\nwhen the user first opens the page, then change that message after 3 seconds. We\ncan do that by adding the following inside App.js:\n\nimport React, {useEffect} from 'react'; \nimport Form from './Form'; \nimport '../styles/App.css'; \n \nfunction App() {\n useEffect(() => {\n setTimeout(() => {\n let welcomeMessage = document.getElementById(\"welcomeMessage\");\n welcomeMessage.innerHTML = \"Try Out Our Trivia Generator!\";\n }, 3000);\n }, []);\n return (\n
\n
\n

Welcome to Numbers Trivia!

\n
\n
\n
\n ); } \nexport default App;\n\nHere’s what we’re doing:\n\n 1. Line 1: We added an import for useEffect\n 2. Line 4: We changed our class component into a function component\n 3. Line 5–10: we added an effect to our function component. This effect sets a\n timer after 3 seconds that will change the text in the element with the id \n welcomeMessage. Because we passed an empty array to useEffect, this effect\n will only run once.\n 4. Line 11–17: We replaced the previous code in App.js to render an h1 element\n having the id welcomeMessage, which is our target element.\n\nOkay, now go to our web page and see the changes. At first, the welcome message\n“Welcome to Numbers Trivia!” will show up, then 3 seconds later it will change\ninto “Try Out Our Trivia Generator!” We just used a React Hook!\n\nNext, let’s create our form input elements. To do that, we will create a new\nReact component called Form. Create in the directory components the file \nForm.js. For now, it will just include the following:\n\nimport React from 'react'; \nfunction Form(props){\n}\nexport default Form;\n\nThis will create the new React component. We’re just importing React, then we’re\ncreating a function called Form. As we said earlier in the tutorial, with the\nuse of hooks we can now create components as stateful functions rather than\nclasses. And in the last line, we’re exporting Form in order to import it in\nother files.\n\nIn the form, we will have a text input and select elements. This is based on the\nAPI we’re using. In the API, two parameters can be sent:\n\n 1. number: the number you want to get the trivia for. It can be an integer, a\n date of the form month/day, or the keyword random which will retrieve facts\n about a random number.\n 2. type: the type of information you want to get. There are a few types: math,\n date, year, or, the default, trivia.\n\nWe will consider the text input element as optional. If the user does not enter\na number or a date, we will send the keyword random for the number element.\n\nLet’s add the following code inside the Form function in order to render our\nform:\n\nfunction Form(props){\n return (\n
\n \n
\n
\n \n
\n \n ); \n}\n\nThis will create the form with the text input and select and button elements.\n\nAfter that, we need to import and render the Form component in our App \ncomponent:\n\nimport React, {useEffect} from 'react';\nimport Form from './Form';\nimport '../styles/App.css'; \nfunction App() {\n useEffect(() => {\n setTimeout(() => {\n let welcomeMessage = document.getElementById(\"welcomeMessage\");\n welcomeMessage.innerHTML = \"Try Out Our Trivia Generator!\";\n }, 3000);\n }, []);\n return (\n
\n
\n

Welcome to Numbers Trivia!

\n
\n
\n
\n );\n }\nexport default App;\n\nWe have changed the imports to import our Form component, and we added \nto render the form.\n\nLet’s also add more styles just to make our form look a little better. Add the\nfollowing at the end of App.css:\n\nform {\n font-size: 15px;\n} \nform input, form select {\n padding: 5px;\n} \nform select {\n width: 100%; \n} \nform div {\n margin-bottom: 8px;\n}\n\nIf you refresh the page now, you will find it has changed and now it’s showing\nour form.\n\nNow, we need to add some logic to our form. On Submit, we need to get the values\nof our input elements, then call the API to retrieve the results.\n\nTo handle form elements and their values, you need to use the state of the\ncomponent. You make the value of the element equal to a property in the state of\nthe component.\n\nBefore hooks, in order to get the value in the state you would have to use \nthis.state.value, and then to set the state, you will need to call this.setState\n.\n\nNow, you can use the state hook. The state hook is the useState function. It\naccepts one argument, which is the initial value, and it returns a pair of\nvalues: the current state and a function that updates it. Then, you will be able\nto access the current state using the first returned value, and update it using\nthe second returned value which is the function.\n\nHere’s an example:\n\nconst [count, setCount] = useState(0);\n\nin this example, we call the useState hook and pass it 0, and we set the\nreturned value equal to count and setCount. This means that we have created\nstate variable called count. Its initial value is 0, and to change its value we\ncan use setCount.\n\nFor our Form component, we need two state variables, one for the text input\nwhich we will call number, and one for the select input which we will call type.\nThen, on change event for these two input elements, we will change the values\nfor number and type using the function returned by setState.\n\nOpen our Form component and change it to the following:\n\nimport React, { useState } from 'react';\nfunction Form(props){\n let [number, setNumber] = useState(\"random\");\n let [type, setType] = useState(\"trivia\");\n function onNumberChanged(e){\n let value = e.target.value.trim();\n if(!value.length){\n setNumber(\"random\"); //default value\n } else {\n setNumber(value);\n }\n }\n function onTypeChanged(e){\n let value = e.target.value.trim();\n if(!value.length){\n setType(\"trivia\"); //default value\n } else {\n setType(value);\n }\n }\n return (\n
\n \n
\n
\n \n
\n \n);\n}\nexport default Form;\n\n 1. Line 1: add an import for useState hook.\n 2. Line 3–4: create two state variables number and type using useState . Here\n we pass random as the initial value for number, and trivia as initial value\n for type because they are the default values for the parameters in the API.\n 3. Line 5–10: implement input change handler functions for both text and select\n inputs, where we change the value of the state variables using the functions\n returned by useState . If the value is unset, we automatically change the\n values to the default value.\n 4. Line 13: pass the onNumberChanged function to onChange event for text input.\n 5. Line 16: pass the onTypeChanged function to onChange event for select input.\n\nIn addition, let’s go back to our App component to modify it and use states.\nInstead of modifying our welcome message by changing the innerHTML of the\nelement, we will use a state. Our App component should now be like this:\n\nimport React, {useEffect, useState} from 'react'; \nimport Form from './Form'; \nimport '../styles/App.css'; \n \nfunction App() {\n const [ welcomeMessage, setWelcomeMessage ] = useState(\n \"Welcome to Numbers Trivia!\",\n );\nuseEffect(() => {\n setTimeout(() => {\n setWelcomeMessage(\"Try Out Our Trivia Generator!\");\n }, 3000);\n }, []);\nreturn (\n
\n
\n

{welcomeMessage}

\n
\n
\n
\n );\n}\nexport default App;\n\nNow, we are using useState to declare and initialize our welcome message. It\nwill return welcomeMessage , our state variable, and setWelcomeMessage , which\nwe will use to change the value of welcomeMessage after 3 seconds from “Welcome\nto Numbers Trivia!” to “Try Out Our Trivia Generator!”\n\nWhat’s left now is to add a function to handle the form’s onSubmit event. On\nsubmit, we will send a request to the API with our parameters, then display the\nresult.\n\nIn order to perform the request, we need to install axios\n[https://github.com/axios/axios]:\n\nnpm i axios\n\nThen, require axios at the beginning of Form.js:\n\nconst axios = require('axios');\n\nNow, add the following function below onTypeChanged in our Form component:\n\nfunction onSubmit(e){\n e.preventDefault();\n axios.get('http://numbersapi.com/' + number + '/' + type)\n .then(function(response){\n let elm = document.getElementById('result');\n elm.innerHTML = response.data;\n }).catch(function(e){\n console.log(\"error\", e); //simple error handling\n });\n}\n\nWe’re just performing a request to the API, passing the number and type then\ndisplaying the result in an element of id result (which we will add in a\nminute). In case of an error, we’re just displaying it in the console just as a\nsimple error handling.\n\nNow, let’s add this function as the handler for the form onSubmit event in the\nreturn statement in Form.js:\n\n\n\nThe only thing left is to add the #result element. We can add it in App.js \nbefore :\n\n
\n\nAlright, now go to your website and discover all new trivia about numbers!\n\n\n--------------------------------------------------------------------------------\n\nConclusion\nYou just created a React app and used some React Hooks! Of course, there’s still\nmore to explore and learn, so be sure to head to the docs\n[https://reactjs.org/docs/hooks-intro.html] to learn more about React Hooks.","html":"

Hooks have been officially added to React as of React 16.8. One of the main benefits of Hooks in React is that you can use state and effect (which is generally a combination of different life cycles into one) in a component without creating a class.

In this tutorial, you’ll learn how to exactly use hooks in React. We will build a simple website that gives the user some options to pick from in order to generate some random number trivia.

You can check out the demo for the website here, and the source code on the GitHub repository.

Let’s first start by creating a react app. Since our website will be very simple, we will use the create-react-app command. If you don’t have it installed, you can install it using npm.

Run the following in your terminal or CMD:

npm i -g create-react-app

This will install create-react-app globally.

Now we can create our React app:

create-react-app numbers-trivia

Running this command will create a directory in the working directory with the name you supply for the React app. I named it numbers-trivia but you can call it whatever you want.

Inside that directory, it will also install all the packages and files needed to run the website. It will install packages like react, react-dom, react-scripts and more.

Once it’s done, change into the newly created directory and start the server:

cd numbers-trivia\nnpm start

Once you start the server, a web page of your website in your favorite browser will open. You will see a page with just the logo and a link to learn React.

Before we start changing the page, if you are not familiar with React, let’s take a look at the structure of our React app. It should look something like this:

In our root directory, we will find a bunch of directories. node_modules holds all the packages React needs to run and any package you might add. public holds the files our server serves.

The directory that we will spend most of our time in is the src directory. This directory will hold all of our React components.

As you can see there are a bunch of files in that directory. index.js is basically the file that renders our highest React component.

We only have one React component right now which is in App.js. If you open it, you will find the code that renders the logo with the link to learn React that you currently see on the website.

So, in order to see how changing our App component will change the content of the website, let’s modify the code by removing the current content and replacing it with our favorite phrase: “Hello, World!”

import React, { Component } from 'react' \nimport logo from './logo.svg' \nimport './App.css'  \nclass App extends Component {\n   render() {\n     return (\n       <div className=\"App\">\n         <header className=\"App-header\">\n           <h1>Hello, World!</h1>\n         </header>\n       </div>\n     )\n   }\n }\nexport default App

We just replaced the content of the header element. Now, if your server is still running you will see that your page updated without you refreshing it, and you will see that the previous content is replaced with Hello, World!

So now we know how and where we should edit our React components in order to get the result we want. We can go ahead and start with our objective.

What we’ll do for this website is the following:

  1. Show a welcome message the first time the user opens the website, then replace it with a message prompting the user to try the generator.
  2. Render a form with text and select inputs. The text input is where the user can enter the number they want to see trivia about, and the select input will provide the user with options related to the trivia.
  3. On submitting the form, send a request to this API to fetch the trivia we need.
  4. Render the trivia for the user to see it.

Let’s start by organizing our directory structure first. In React it’s good practice to create a directory inside src holding all the components. We’ll create a directory called components. Once you create the directory, move App.js into there. We will also create a directory called styles and move App.css and index.css into it.

When you do that, you will need to change the imports in your files as following:

  1. in index.js:
import React from 'react'; \nimport ReactDOM from 'react-dom'; \nimport '../styles/index.css'; \nimport App from './components/App'; \nimport  as serviceWorker from './serviceWorker';

2. in App.js:

import React, { Component } from 'react'; \nimport logo from './logo.svg'; \nimport '../styles/App.css';

Our directory structure should look like this now:

We will go ahead now and start building our webpage.

The first thing in our objectives list is showing a welcome message when the user first opens the webpage. It will show up for 3 seconds, and then changes to another message that will prompt the user to try out the trivia generator.

Without hooks, this could be done by using React’s lifecycle method componentDidMount which runs right after the component first renders.

Now, we can use the effect hook instead. It will look something like this:

useEffect(() => {\n  //perform something post render\n});

The function you pass to useEffect will be executed after every render. This combines the lifecycles methods componentDidMount and componentDidUpdate into one.

What if you want to do something just after the first time the component renders, like in componentDidMount? You can do this by passing a second parameter to useEffect.

useEffect accepts an array as a second parameter. This parameter is used as a condition on when to perform the passed function. So, let’s say you want to change a counter only after the variable counter changes, you can do it like so:

useEffect(() => document.title = `You have clicked ${counter} times`, [counter]);

This way, the function passed to useEffect will run after render only if the value for counter changes.

If we want the function to run only after the first render, we can do that by passing an empty array as the second parameter.

Let’s come back now to what we want to do. We want to show a welcome message when the user first opens the page, then change that message after 3 seconds. We can do that by adding the following inside App.js:

import React, {useEffect} from 'react'; \nimport Form from './Form'; \nimport '../styles/App.css'; \n \nfunction App() {\n   useEffect(() => {\n     setTimeout(() => {\n       let welcomeMessage = document.getElementById(\"welcomeMessage\");\n       welcomeMessage.innerHTML = \"Try Out Our Trivia Generator!\";\n     }, 3000);\n   }, []);\n   return (\n     <div className=\"App\">\n       <header className=\"App-header\">\n         <h1 id=\"welcomeMessage\">Welcome to Numbers Trivia!</h1>\n         <Form />\n       </header>\n     </div>\n   ); }  \nexport default App;

Here’s what we’re doing:

  1. Line 1: We added an import for useEffect
  2. Line 4: We changed our class component into a function component
  3. Line 5–10: we added an effect to our function component. This effect sets a timer after 3 seconds that will change the text in the element with the id welcomeMessage. Because we passed an empty array to useEffect, this effect will only run once.
  4. Line 11–17: We replaced the previous code in App.js to render an h1 element having the id welcomeMessage, which is our target element.

Okay, now go to our web page and see the changes. At first, the welcome message “Welcome to Numbers Trivia!” will show up, then 3 seconds later it will change into “Try Out Our Trivia Generator!” We just used a React Hook!

Next, let’s create our form input elements. To do that, we will create a new React component called Form. Create in the directory components the file Form.js. For now, it will just include the following:

import React from 'react';  \nfunction Form(props){\n}\nexport default Form;

This will create the new React component. We’re just importing React, then we’re creating a function called Form. As we said earlier in the tutorial, with the use of hooks we can now create components as stateful functions rather than classes. And in the last line, we’re exporting Form in order to import it in other files.

In the form, we will have a text input and select elements. This is based on the API we’re using. In the API, two parameters can be sent:

  1. number: the number you want to get the trivia for. It can be an integer, a date of the form month/day, or the keyword random which will retrieve facts about a random number.
  2. type: the type of information you want to get. There are a few types: math, date, year, or, the default, trivia.

We will consider the text input element as optional. If the user does not enter a number or a date, we will send the keyword random for the number element.

Let’s add the following code inside the Form function in order to render our form:

function Form(props){\n  return (<form>\n             <div>\n              <input type=\"text\" name=\"number\" placeholder=\"Enter a number (Optional)\" />\n             </div>\n             <div>\n              <select name=\"type\">\n               <option value=\"trivia\">Trivia</option>\n               <option value=\"math\">Math</option>\n               <option value=\"date\">Date</option>\n               <option value=\"year\">Year</option>\n              </select>\n             </div>\n             <button type=\"submit\">Generate</button>\n            </form>); \n}

This will create the form with the text input and select and button elements.

After that, we need to import and render the Form component in our App component:

import React, {useEffect} from 'react';\nimport Form from './Form';\nimport '../styles/App.css';  \nfunction App() {\n   useEffect(() => {\n     setTimeout(() => {\n       let welcomeMessage = document.getElementById(\"welcomeMessage\");\n       welcomeMessage.innerHTML = \"Try Out Our Trivia Generator!\";\n     }, 3000);\n   }, []);\n   return (\n     <div className=\"App\">\n       <header className=\"App-header\">\n         <h1 id=\"welcomeMessage\">Welcome to Numbers Trivia!</h1>\n         <Form />\n       </header>\n     </div>\n   );\n }\nexport default App;

We have changed the imports to import our Form component, and we added <Form /> to render the form.

Let’s also add more styles just to make our form look a little better. Add the following at the end of App.css:

form {\n   font-size: 15px;\n}  \nform input, form select {\n   padding: 5px;\n}  \nform select {\n   width: 100%; \n}  \nform div {\n   margin-bottom: 8px;\n}

If you refresh the page now, you will find it has changed and now it’s showing our form.

Now, we need to add some logic to our form. On Submit, we need to get the values of our input elements, then call the API to retrieve the results.

To handle form elements and their values, you need to use the state of the component. You make the value of the element equal to a property in the state of the component.

Before hooks, in order to get the value in the state you would have to use this.state.value, and then to set the state, you will need to call this.setState.

Now, you can use the state hook. The state hook is the useState function. It accepts one argument, which is the initial value, and it returns a pair of values: the current state and a function that updates it. Then, you will be able to access the current state using the first returned value, and update it using the second returned value which is the function.

Here’s an example:

const [count, setCount] = useState(0);

in this example, we call the useState hook and pass it 0, and we set the returned value equal to count and setCount. This means that we have created state variable called count. Its initial value is 0, and to change its value we can use setCount.

For our Form component, we need two state variables, one for the text input which we will call number, and one for the select input which we will call type. Then, on change event for these two input elements, we will change the values for number and type using the function returned by setState.

Open our Form component and change it to the following:

import React, { useState } from 'react';\nfunction Form(props){\n  let [number, setNumber] = useState(\"random\");\n  let [type, setType] = useState(\"trivia\");\n  function onNumberChanged(e){\n    let value = e.target.value.trim();\n    if(!value.length){\n      setNumber(\"random\"); //default value\n    } else {\n      setNumber(value);\n    }\n  }\n  function onTypeChanged(e){\n    let value = e.target.value.trim();\n    if(!value.length){\n      setType(\"trivia\"); //default value\n    } else {\n      setType(value);\n    }\n  }\n  return (<form>\n            <div>\n              <input type=\"text\" name=\"number\" placeholder=\"Enter a number (Optional)\" value={number} onChange={onNumberChanged} />\n            </div>\n            <div>\n              <select name=\"type\" value={type} onChange={onTypeChanged}>\n                <option value=\"trivia\">Trivia</option>\n                <option value=\"math\">Math</option>\n                <option value=\"date\">Date</option>\n                <option value=\"year\">Year</option>\n              </select>\n            </div>\n            <button type=\"submit\">Generate</button>\n</form>);\n}\nexport default Form;
  1. Line 1: add an import for useState hook.
  2. Line 3–4: create two state variables number and type using useState . Here we pass random as the initial value for number, and trivia as initial value for type because they are the default values for the parameters in the API.
  3. Line 5–10: implement input change handler functions for both text and select inputs, where we change the value of the state variables using the functions returned by useState . If the value is unset, we automatically change the values to the default value.
  4. Line 13: pass the onNumberChanged function to onChange event for text input.
  5. Line 16: pass the onTypeChanged function to onChange event for select input.

In addition, let’s go back to our App component to modify it and use states. Instead of modifying our welcome message by changing the innerHTML of the element, we will use a state. Our App component should now be like this:

import React, {useEffect, useState} from 'react'; \nimport Form from './Form'; \nimport '../styles/App.css'; \n \nfunction App() {\n  const [ welcomeMessage, setWelcomeMessage ] = useState(\n    \"Welcome to Numbers Trivia!\",\n  );\nuseEffect(() => {\n    setTimeout(() => {\n      setWelcomeMessage(\"Try Out Our Trivia Generator!\");\n    }, 3000);\n  }, []);\nreturn (\n    <div className=\"App\">\n      <header className=\"App-header\">\n        <h1>{welcomeMessage}</h1>\n      </header>\n      <Form/>\n    </div>\n  );\n}\nexport default App;

Now, we are using useState to declare and initialize our welcome message. It will return welcomeMessage , our state variable, and setWelcomeMessage , which we will use to change the value of welcomeMessage after 3 seconds from “Welcome to Numbers Trivia!” to “Try Out Our Trivia Generator!”

What’s left now is to add a function to handle the form’s onSubmit event. On submit, we will send a request to the API with our parameters, then display the result.

In order to perform the request, we need to install axios:

npm i axios

Then, require axios at the beginning of Form.js:

const axios = require('axios');

Now, add the following function below onTypeChanged in our Form component:

function onSubmit(e){\n  e.preventDefault();\n  axios.get('http://numbersapi.com/' + number + '/' + type)\n       .then(function(response){\n         let elm = document.getElementById('result');\n         elm.innerHTML = response.data;\n       }).catch(function(e){\n         console.log(\"error\", e); //simple error handling\n       });\n}

We’re just performing a request to the API, passing the number and type then displaying the result in an element of id result (which we will add in a minute). In case of an error, we’re just displaying it in the console just as a simple error handling.

Now, let’s add this function as the handler for the form onSubmit event in the return statement in Form.js:

<form onSubmit={onSubmit}>

The only thing left is to add the #result element. We can add it in App.js before <Form /> :

<div id=\"result\" style={{marginBottom: '15px'}}></div>

Alright, now go to your website and discover all new trivia about numbers!

Conclusion

You just created a React app and used some React Hooks! Of course, there’s still more to explore and learn, so be sure to head to the docs to learn more about React Hooks.

","url":"https://backend.shahednasser.com/react-hooks-tutorial-create-a-number-trivia-generator-website/","canonical_url":null,"uuid":"033786bf-592f-454b-b640-42920b676fb8","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"5faa42902280bc001e2ccc95","reading_time":11,"send_email_when_published":null,"email_subject":null,"childHtmlRehype":{"html":"

Hooks have been officially added to React as of React 16.8. One of the main benefits of Hooks in React is that you can use state and effect (which is generally a combination of different life cycles into one) in a component without creating a class.

In this tutorial, you’ll learn how to exactly use hooks in React. We will build a simple website that gives the user some options to pick from in order to generate some random number trivia.

You can check out the demo for the website here, and the source code on the GitHub repository.

Let’s first start by creating a react app. Since our website will be very simple, we will use the create-react-app command. If you don’t have it installed, you can install it using npm.

Run the following in your terminal or CMD:

npm i -g create-react-app

This will install create-react-app globally.

Now we can create our React app:

create-react-app numbers-trivia

Running this command will create a directory in the working directory with the name you supply for the React app. I named it numbers-trivia but you can call it whatever you want.

Inside that directory, it will also install all the packages and files needed to run the website. It will install packages like react, react-dom, react-scripts and more.

Once it’s done, change into the newly created directory and start the server:

cd numbers-trivia\nnpm start

Once you start the server, a web page of your website in your favorite browser will open. You will see a page with just the logo and a link to learn React.

Before we start changing the page, if you are not familiar with React, let’s take a look at the structure of our React app. It should look something like this:

\"\"

In our root directory, we will find a bunch of directories. node_modules holds all the packages React needs to run and any package you might add. public holds the files our server serves.

The directory that we will spend most of our time in is the src directory. This directory will hold all of our React components.

As you can see there are a bunch of files in that directory. index.js is basically the file that renders our highest React component.

We only have one React component right now which is in App.js. If you open it, you will find the code that renders the logo with the link to learn React that you currently see on the website.

So, in order to see how changing our App component will change the content of the website, let’s modify the code by removing the current content and replacing it with our favorite phrase: “Hello, World!”

import React, { Component } from 'react' \nimport logo from './logo.svg' \nimport './App.css'  \nclass App extends Component {\n   render() {\n     return (\n       <div className=\"App\">\n         <header className=\"App-header\">\n           <h1>Hello, World!</h1>\n         </header>\n       </div>\n     )\n   }\n }\nexport default App

We just replaced the content of the header element. Now, if your server is still running you will see that your page updated without you refreshing it, and you will see that the previous content is replaced with Hello, World!

So now we know how and where we should edit our React components in order to get the result we want. We can go ahead and start with our objective.

What we’ll do for this website is the following:

  1. Show a welcome message the first time the user opens the website, then replace it with a message prompting the user to try the generator.
  2. Render a form with text and select inputs. The text input is where the user can enter the number they want to see trivia about, and the select input will provide the user with options related to the trivia.
  3. On submitting the form, send a request to this API to fetch the trivia we need.
  4. Render the trivia for the user to see it.

Let’s start by organizing our directory structure first. In React it’s good practice to create a directory inside src holding all the components. We’ll create a directory called components. Once you create the directory, move App.js into there. We will also create a directory called styles and move App.css and index.css into it.

When you do that, you will need to change the imports in your files as following:

  1. in index.js:
import React from 'react'; \nimport ReactDOM from 'react-dom'; \nimport '../styles/index.css'; \nimport App from './components/App'; \nimport  as serviceWorker from './serviceWorker';

2. in App.js:

import React, { Component } from 'react'; \nimport logo from './logo.svg'; \nimport '../styles/App.css';

Our directory structure should look like this now:

\"\"

We will go ahead now and start building our webpage.

The first thing in our objectives list is showing a welcome message when the user first opens the webpage. It will show up for 3 seconds, and then changes to another message that will prompt the user to try out the trivia generator.

Without hooks, this could be done by using React’s lifecycle method componentDidMount which runs right after the component first renders.

Now, we can use the effect hook instead. It will look something like this:

useEffect(() => {\n  //perform something post render\n});

The function you pass to useEffect will be executed after every render. This combines the lifecycles methods componentDidMount and componentDidUpdate into one.

What if you want to do something just after the first time the component renders, like in componentDidMount? You can do this by passing a second parameter to useEffect.

useEffect accepts an array as a second parameter. This parameter is used as a condition on when to perform the passed function. So, let’s say you want to change a counter only after the variable counter changes, you can do it like so:

useEffect(() => document.title = `You have clicked ${counter} times`, [counter]);

This way, the function passed to useEffect will run after render only if the value for counter changes.

If we want the function to run only after the first render, we can do that by passing an empty array as the second parameter.

Let’s come back now to what we want to do. We want to show a welcome message when the user first opens the page, then change that message after 3 seconds. We can do that by adding the following inside App.js:

import React, {useEffect} from 'react'; \nimport Form from './Form'; \nimport '../styles/App.css'; \n \nfunction App() {\n   useEffect(() => {\n     setTimeout(() => {\n       let welcomeMessage = document.getElementById(\"welcomeMessage\");\n       welcomeMessage.innerHTML = \"Try Out Our Trivia Generator!\";\n     }, 3000);\n   }, []);\n   return (\n     <div className=\"App\">\n       <header className=\"App-header\">\n         <h1 id=\"welcomeMessage\">Welcome to Numbers Trivia!</h1>\n         <Form />\n       </header>\n     </div>\n   ); }  \nexport default App;

Here’s what we’re doing:

  1. Line 1: We added an import for useEffect
  2. Line 4: We changed our class component into a function component
  3. Line 5–10: we added an effect to our function component. This effect sets a timer after 3 seconds that will change the text in the element with the id welcomeMessage. Because we passed an empty array to useEffect, this effect will only run once.
  4. Line 11–17: We replaced the previous code in App.js to render an h1 element having the id welcomeMessage, which is our target element.

Okay, now go to our web page and see the changes. At first, the welcome message “Welcome to Numbers Trivia!” will show up, then 3 seconds later it will change into “Try Out Our Trivia Generator!” We just used a React Hook!

Next, let’s create our form input elements. To do that, we will create a new React component called Form. Create in the directory components the file Form.js. For now, it will just include the following:

import React from 'react';  \nfunction Form(props){\n}\nexport default Form;

This will create the new React component. We’re just importing React, then we’re creating a function called Form. As we said earlier in the tutorial, with the use of hooks we can now create components as stateful functions rather than classes. And in the last line, we’re exporting Form in order to import it in other files.

In the form, we will have a text input and select elements. This is based on the API we’re using. In the API, two parameters can be sent:

  1. number: the number you want to get the trivia for. It can be an integer, a date of the form month/day, or the keyword random which will retrieve facts about a random number.
  2. type: the type of information you want to get. There are a few types: math, date, year, or, the default, trivia.

We will consider the text input element as optional. If the user does not enter a number or a date, we will send the keyword random for the number element.

Let’s add the following code inside the Form function in order to render our form:

function Form(props){\n  return (<form>\n             <div>\n              <input type=\"text\" name=\"number\" placeholder=\"Enter a number (Optional)\" />\n             </div>\n             <div>\n              <select name=\"type\">\n               <option value=\"trivia\">Trivia</option>\n               <option value=\"math\">Math</option>\n               <option value=\"date\">Date</option>\n               <option value=\"year\">Year</option>\n              </select>\n             </div>\n             <button type=\"submit\">Generate</button>\n            </form>); \n}

This will create the form with the text input and select and button elements.

After that, we need to import and render the Form component in our App component:

import React, {useEffect} from 'react';\nimport Form from './Form';\nimport '../styles/App.css';  \nfunction App() {\n   useEffect(() => {\n     setTimeout(() => {\n       let welcomeMessage = document.getElementById(\"welcomeMessage\");\n       welcomeMessage.innerHTML = \"Try Out Our Trivia Generator!\";\n     }, 3000);\n   }, []);\n   return (\n     <div className=\"App\">\n       <header className=\"App-header\">\n         <h1 id=\"welcomeMessage\">Welcome to Numbers Trivia!</h1>\n         <Form />\n       </header>\n     </div>\n   );\n }\nexport default App;

We have changed the imports to import our Form component, and we added <Form /> to render the form.

Let’s also add more styles just to make our form look a little better. Add the following at the end of App.css:

form {\n   font-size: 15px;\n}  \nform input, form select {\n   padding: 5px;\n}  \nform select {\n   width: 100%; \n}  \nform div {\n   margin-bottom: 8px;\n}

If you refresh the page now, you will find it has changed and now it’s showing our form.

Now, we need to add some logic to our form. On Submit, we need to get the values of our input elements, then call the API to retrieve the results.

To handle form elements and their values, you need to use the state of the component. You make the value of the element equal to a property in the state of the component.

Before hooks, in order to get the value in the state you would have to use this.state.value, and then to set the state, you will need to call this.setState.

Now, you can use the state hook. The state hook is the useState function. It accepts one argument, which is the initial value, and it returns a pair of values: the current state and a function that updates it. Then, you will be able to access the current state using the first returned value, and update it using the second returned value which is the function.

Here’s an example:

const [count, setCount] = useState(0);

in this example, we call the useState hook and pass it 0, and we set the returned value equal to count and setCount. This means that we have created state variable called count. Its initial value is 0, and to change its value we can use setCount.

For our Form component, we need two state variables, one for the text input which we will call number, and one for the select input which we will call type. Then, on change event for these two input elements, we will change the values for number and type using the function returned by setState.

Open our Form component and change it to the following:

import React, { useState } from 'react';\nfunction Form(props){\n  let [number, setNumber] = useState(\"random\");\n  let [type, setType] = useState(\"trivia\");\n  function onNumberChanged(e){\n    let value = e.target.value.trim();\n    if(!value.length){\n      setNumber(\"random\"); //default value\n    } else {\n      setNumber(value);\n    }\n  }\n  function onTypeChanged(e){\n    let value = e.target.value.trim();\n    if(!value.length){\n      setType(\"trivia\"); //default value\n    } else {\n      setType(value);\n    }\n  }\n  return (<form>\n            <div>\n              <input type=\"text\" name=\"number\" placeholder=\"Enter a number (Optional)\" value={number} onChange={onNumberChanged} />\n            </div>\n            <div>\n              <select name=\"type\" value={type} onChange={onTypeChanged}>\n                <option value=\"trivia\">Trivia</option>\n                <option value=\"math\">Math</option>\n                <option value=\"date\">Date</option>\n                <option value=\"year\">Year</option>\n              </select>\n            </div>\n            <button type=\"submit\">Generate</button>\n</form>);\n}\nexport default Form;
  1. Line 1: add an import for useState hook.
  2. Line 3–4: create two state variables number and type using useState . Here we pass random as the initial value for number, and trivia as initial value for type because they are the default values for the parameters in the API.
  3. Line 5–10: implement input change handler functions for both text and select inputs, where we change the value of the state variables using the functions returned by useState . If the value is unset, we automatically change the values to the default value.
  4. Line 13: pass the onNumberChanged function to onChange event for text input.
  5. Line 16: pass the onTypeChanged function to onChange event for select input.

In addition, let’s go back to our App component to modify it and use states. Instead of modifying our welcome message by changing the innerHTML of the element, we will use a state. Our App component should now be like this:

import React, {useEffect, useState} from 'react'; \nimport Form from './Form'; \nimport '../styles/App.css'; \n \nfunction App() {\n  const [ welcomeMessage, setWelcomeMessage ] = useState(\n    \"Welcome to Numbers Trivia!\",\n  );\nuseEffect(() => {\n    setTimeout(() => {\n      setWelcomeMessage(\"Try Out Our Trivia Generator!\");\n    }, 3000);\n  }, []);\nreturn (\n    <div className=\"App\">\n      <header className=\"App-header\">\n        <h1>{welcomeMessage}</h1>\n      </header>\n      <Form/>\n    </div>\n  );\n}\nexport default App;

Now, we are using useState to declare and initialize our welcome message. It will return welcomeMessage , our state variable, and setWelcomeMessage , which we will use to change the value of welcomeMessage after 3 seconds from “Welcome to Numbers Trivia!” to “Try Out Our Trivia Generator!”

What’s left now is to add a function to handle the form’s onSubmit event. On submit, we will send a request to the API with our parameters, then display the result.

In order to perform the request, we need to install axios:

npm i axios

Then, require axios at the beginning of Form.js:

const axios = require('axios');

Now, add the following function below onTypeChanged in our Form component:

function onSubmit(e){\n  e.preventDefault();\n  axios.get('http://numbersapi.com/' + number + '/' + type)\n       .then(function(response){\n         let elm = document.getElementById('result');\n         elm.innerHTML = response.data;\n       }).catch(function(e){\n         console.log(\"error\", e); //simple error handling\n       });\n}

We’re just performing a request to the API, passing the number and type then displaying the result in an element of id result (which we will add in a minute). In case of an error, we’re just displaying it in the console just as a simple error handling.

Now, let’s add this function as the handler for the form onSubmit event in the return statement in Form.js:

<form onSubmit={onSubmit}>

The only thing left is to add the #result element. We can add it in App.js before <Form /> :

<div id=\"result\" style={{marginBottom: '15px'}}></div>

Alright, now go to your website and discover all new trivia about numbers!

Conclusion

You just created a React app and used some React Hooks! Of course, there’s still more to explore and learn, so be sure to head to the docs to learn more about React Hooks.

","htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Hooks have been officially added to React as of React 16.8. One of the main benefits of Hooks in React is that you can use state and effect (which is generally a combination of different life cycles into one) in a component without creating a class."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In this tutorial, you’ll learn how to exactly use hooks in React. We will build a simple website that gives the user some options to pick from in order to generate some random number trivia."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can check out the demo for the website "},{"type":"element","tagName":"a","properties":{"href":"http://numbers-trivia.surge.sh/","rel":["noopener","nofollow"]},"children":[{"type":"text","value":"here"}]},{"type":"text","value":", and the source code on the "},{"type":"element","tagName":"a","properties":{"href":"https://github.com/shahednasser/numbers-trivia","rel":["noopener","nofollow"]},"children":[{"type":"text","value":"GitHub repository"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Let’s first start by creating a react app. Since our website will be very simple, we will use the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"create-react-app"}]},{"type":"text","value":" command. If you don’t have it installed, you can install it using "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"npm"}]},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"."}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Run the following in your terminal or CMD:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"shell"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-shell"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-shell"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"npm"}]},{"type":"text","value":" i -g create-react-app"}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This will install "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"create-react-app"}]},{"type":"text","value":" globally."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Now we can create our React app:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"shell"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-shell"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-shell"]},"children":[{"type":"text","value":"create-react-app numbers-trivia"}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Running this command will create a directory in the working directory with the name you supply for the React app. I named it "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"numbers-trivia"}]}]},{"type":"text","value":" but you can call it whatever you want."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Inside that directory, it will also install all the packages and files needed to run the website. It will install packages like "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"react"}]}]},{"type":"text","value":", "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"react-dom"}]}]},{"type":"text","value":", "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"react-scripts"}]}]},{"type":"text","value":" and more."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Once it’s done, change into the newly created directory and start the server:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"shell"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-shell"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-shell"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","builtin","class-name"]},"children":[{"type":"text","value":"cd"}]},{"type":"text","value":" numbers-trivia\n"},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"npm"}]},{"type":"text","value":" start"}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Once you start the server, a web page of your website in your favorite browser will open. You will see a page with just the logo and a link to learn React."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Before we start changing the page, if you are not familiar with React, let’s take a look at the structure of our React app. It should look something like this:"}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://res-3.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/1_R1irPlPj9UsboCM_KI5CgA.png","className":["kg-image"],"alt":"","loading":"lazy"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In our root directory, we will find a bunch of directories. "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"node_modules "}]}]},{"type":"text","value":"holds all the packages React needs to run and any package you might add. "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"public "}]}]},{"type":"text","value":"holds the files our server serves."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The directory that we will spend most of our time in is the "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"src"}]}]},{"type":"text","value":" directory. This directory will hold all of our React components."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"As you can see there are a bunch of files in that directory. "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"index.js"}]}]},{"type":"text","value":" is basically the file that renders our highest React component."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"We only have one React component right now which is in "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"App.js. "}]}]},{"type":"text","value":"If you open it, you will find the code that renders the logo with the link to learn React that you currently see on the website."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"So, in order to see how changing our App component will change the content of the website, let’s modify the code by removing the current content and replacing it with our favorite phrase: “Hello, World!”"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"import"}]},{"type":"text","value":" React"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" Component "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"from"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'react'"}]},{"type":"text","value":" \n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"import"}]},{"type":"text","value":" logo "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"from"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'./logo.svg'"}]},{"type":"text","value":" \n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"import"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'./App.css'"}]},{"type":"text","value":" \n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"class"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","class-name"]},"children":[{"type":"text","value":"App"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"extends"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","class-name"]},"children":[{"type":"text","value":"Component"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"render"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"div className"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"App\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"header className"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"App-header\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"h1"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"Hello"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" World"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"!"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"h1"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"header"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"div"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"export"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"default"}]},{"type":"text","value":" App"}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"We just replaced the content of the "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"header"}]}]},{"type":"text","value":" element. Now, if your server is still running you will see that your page updated without you refreshing it, and you will see that the previous content is replaced with "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Hello, World!"}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"So now we know how and where we should edit our React components in order to get the result we want. We can go ahead and start with our objective."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"What we’ll do for this website is the following:"}]},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Show a welcome message the first time the user opens the website, then replace it with a message prompting the user to try the generator."}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Render a form with "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"text "}]}]},{"type":"text","value":"and "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"select"}]}]},{"type":"text","value":" inputs. The "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"text "}]}]},{"type":"text","value":"input is where the user can enter the number they want to see trivia about, and the "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"select "}]}]},{"type":"text","value":"input will provide the user with options related to the trivia."}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"On submitting the form, send a request to "},{"type":"element","tagName":"a","properties":{"href":"http://numbersapi.com/","rel":["noopener","nofollow"]},"children":[{"type":"text","value":"this API"}]},{"type":"text","value":" to fetch the trivia we need."}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Render the trivia for the user to see it."}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Let’s start by organizing our directory structure first. In React it’s good practice to create a directory inside "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"src"}]}]},{"type":"text","value":" holding all the components. We’ll create a directory called "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"components"}]}]},{"type":"text","value":". Once you create the directory, move "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"App.js"}]}]},{"type":"text","value":" into there. We will also create a directory called "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"styles"}]}]},{"type":"text","value":" and move "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"App.css "}]}]},{"type":"text","value":"and "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"index.css "}]}]},{"type":"text","value":"into it."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When you do that, you will need to change the imports in your files as following:"}]},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"in "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"index.js:"}]}]}]}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"import"}]},{"type":"text","value":" React "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"from"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'react'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":" \n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"import"}]},{"type":"text","value":" ReactDOM "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"from"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'react-dom'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":" \n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"import"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'../styles/index.css'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":" \n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"import"}]},{"type":"text","value":" App "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"from"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'./components/App'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":" \n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"import"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"as"}]},{"type":"text","value":" serviceWorker "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"from"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'./serviceWorker'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"2. in "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"App.js:"}]}]}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"import"}]},{"type":"text","value":" React"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" Component "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"from"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'react'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":" \n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"import"}]},{"type":"text","value":" logo "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"from"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'./logo.svg'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":" \n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"import"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'../styles/App.css'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Our directory structure should look like this now:"}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://res-4.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/1_Aqgelb3qbhJiESUbGGNUoQ.png","className":["kg-image"],"alt":"","loading":"lazy"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"We will go ahead now and start building our webpage."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The first thing in our objectives list is showing a welcome message when the user first opens the webpage. It will show up for 3 seconds, and then changes to another message that will prompt the user to try out the trivia generator."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Without hooks, this could be done by using React’s lifecycle method "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"componentDidMount"}]},{"type":"element","tagName":"em","properties":{},"children":[{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":" "}]}]},{"type":"text","value":"which runs right after the component first renders."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Now, we can use the "},{"type":"element","tagName":"a","properties":{"href":"https://reactjs.org/docs/hooks-effect.html","rel":["noopener","nofollow"]},"children":[{"type":"element","tagName":"em","properties":{},"children":[{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"effect hook"}]}]}]},{"type":"element","tagName":"em","properties":{},"children":[{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":" "}]}]},{"type":"text","value":"instead. It will look something like this:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"useEffect"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"//perform something post render"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The function you pass to "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"useEffect"}]},{"type":"text","value":" will be executed after every render. This combines the lifecycles methods "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"componentDidMount"}]},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":" "}]}]},{"type":"text","value":"and "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"componentDidUpdate"}]},{"type":"text","value":" into one."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"What if you want to do something just after the first time the component renders, like in "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"componentDidMount"}]},{"type":"text","value":"? You can do this by passing a second parameter to "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"useEffect"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"useEffect"}]},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":" "}]}]},{"type":"text","value":"accepts an array as a second parameter. This parameter is used as a condition on when to perform the passed function. So, let’s say you want to change a counter only after the variable "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"counter "}]}]},{"type":"text","value":"changes, you can do it like so:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"useEffect"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":" document"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"title "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","template-string"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","template-punctuation","string"]},"children":[{"type":"text","value":"`"}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"You have clicked "}]},{"type":"element","tagName":"span","properties":{"className":["token","interpolation"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","interpolation-punctuation","punctuation"]},"children":[{"type":"text","value":"${"}]},{"type":"text","value":"counter"},{"type":"element","tagName":"span","properties":{"className":["token","interpolation-punctuation","punctuation"]},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":" times"}]},{"type":"element","tagName":"span","properties":{"className":["token","template-punctuation","string"]},"children":[{"type":"text","value":"`"}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"text","value":"counter"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This way, the function passed to "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"useEffect"}]},{"type":"text","value":" will run after render only if the value for "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"counter"}]},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":" "}]}]},{"type":"text","value":"changes."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If we want the function to run only after the first render, we can do that by passing an "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"empty"}]}]},{"type":"text","value":" array as the second parameter."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Let’s come back now to what we want to do. We want to show a welcome message when the user first opens the page, then change that message after 3 seconds. We can do that by adding the following inside "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"App.js"}]}]},{"type":"text","value":":"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"import"}]},{"type":"text","value":" React"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"useEffect"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"from"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'react'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":" \n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"import"}]},{"type":"text","value":" Form "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"from"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'./Form'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":" \n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"import"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'../styles/App.css'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":" \n \n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"App"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"useEffect"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"setTimeout"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"let"}]},{"type":"text","value":" welcomeMessage "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" document"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"getElementById"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"welcomeMessage\""}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n welcomeMessage"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"innerHTML "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"Try Out Our Trivia Generator!\""}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"3000"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"div className"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"App\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"header className"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"App-header\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"h1 id"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"welcomeMessage\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"Welcome to Numbers Trivia"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"!"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"h1"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"Form "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"header"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"div"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" \n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"export"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"default"}]},{"type":"text","value":" App"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Here’s what we’re doing:"}]},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Line 1:"}]}]},{"type":"text","value":" We added an import for "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"useEffect"}]}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Line 4: "}]}]},{"type":"text","value":"We changed our class component into a function component"}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Line 5–10: "}]}]},{"type":"text","value":"we added an effect to our function component. This effect sets a timer after 3 seconds that will change the text in the element with the id "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"welcomeMessage"}]},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":". "}]}]},{"type":"text","value":"Because we passed an "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"empty"}]}]},{"type":"text","value":" array to "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"useEffect"}]},{"type":"text","value":", this effect will only run once."}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Line 11–17: "}]}]},{"type":"text","value":"We replaced the previous code in "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"App.js "}]}]},{"type":"text","value":"to render an "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"h1 "}]}]},{"type":"text","value":"element having the id "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"welcomeMessage"}]},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":", "}]}]},{"type":"text","value":"which is our target element."}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Okay, now go to our web page and see the changes. At first, the welcome message “"},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Welcome to Numbers Trivia!"}]}]},{"type":"text","value":"” will show up, then 3 seconds later it will change into “"},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Try Out Our Trivia Generator!"}]}]},{"type":"text","value":"” We just used a React Hook!"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Next, let’s create our form input elements. To do that, we will create a new React component called "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Form"}]},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":". "}]}]},{"type":"text","value":"Create in the directory "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"components"}]}]},{"type":"text","value":" the file "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Form.js. "}]}]},{"type":"text","value":"For now, it will just include the following:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"import"}]},{"type":"text","value":" React "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"from"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'react'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":" \n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"Form"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","parameter"]},"children":[{"type":"text","value":"props"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"export"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"default"}]},{"type":"text","value":" Form"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This will create the new React component. We’re just importing React, then we’re creating a function called Form. As we said earlier in the tutorial, with the use of hooks we can now create components as stateful functions rather than classes. And in the last line, we’re exporting "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Form"}]}]},{"type":"text","value":" in order to import it in other files."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In the form, we will have a "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"text "}]}]},{"type":"text","value":"input and "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"select "}]}]},{"type":"text","value":"elements. This is based on the API we’re using. In the API, two parameters can be sent:"}]},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"number: "}]}]},{"type":"text","value":"the number you want to get the trivia for. It can be an "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"integer"}]}]},{"type":"text","value":", a date of the form "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"month/day, "}]}]},{"type":"text","value":"or the keyword "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"random "}]}]},{"type":"text","value":"which will retrieve facts about a random number."}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"type: "}]}]},{"type":"text","value":"the type of information you want to get. There are a few types: "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"math, date, year, "}]}]},{"type":"text","value":"or, the default, "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"trivia."}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"We will consider the text input element as optional. If the user does not enter a number or a date, we will send the keyword "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"random"}]}]},{"type":"text","value":" for the number element."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Let’s add the following code inside the "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Form"}]}]},{"type":"text","value":" function in order to render our form:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"Form"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","parameter"]},"children":[{"type":"text","value":"props"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"form"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"div"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"input type"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"text\""}]},{"type":"text","value":" name"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"number\""}]},{"type":"text","value":" placeholder"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"Enter a number (Optional)\""}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"div"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"div"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"select name"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"type\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"option value"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"trivia\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"Trivia"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"option"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"option value"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"math\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"Math"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"option"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"option value"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"date\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"Date"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"option"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"option value"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"year\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"Year"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"option"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"select"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"div"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"button type"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"submit\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"Generate"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"button"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"form"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":" \n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This will create the form with the "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"text "}]}]},{"type":"text","value":"input and "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"select "}]}]},{"type":"text","value":"and "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"button "}]}]},{"type":"text","value":"elements."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"After that, we need to import and render the "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Form"}]}]},{"type":"text","value":" component in our "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"App "}]}]},{"type":"text","value":"component:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"import"}]},{"type":"text","value":" React"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"useEffect"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"from"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'react'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"import"}]},{"type":"text","value":" Form "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"from"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'./Form'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"import"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'../styles/App.css'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":" \n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"App"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"useEffect"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"setTimeout"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"let"}]},{"type":"text","value":" welcomeMessage "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" document"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"getElementById"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"welcomeMessage\""}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n welcomeMessage"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"innerHTML "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"Try Out Our Trivia Generator!\""}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"3000"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"div className"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"App\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"header className"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"App-header\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"h1 id"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"welcomeMessage\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"Welcome to Numbers Trivia"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"!"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"h1"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"Form "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"header"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"div"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"export"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"default"}]},{"type":"text","value":" App"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"We have changed the imports to import our "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Form"}]},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":" "}]}]},{"type":"text","value":"component, and we added "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":""}]},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":" "}]}]},{"type":"text","value":"to render the form."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Let’s also add more styles just to make our form look a little better. Add the following at the end of "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"App.css"}]}]},{"type":"text","value":":"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":"form"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"font-size"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 15px"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" \n"},{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":"form input, form select"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"padding"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 5px"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" \n"},{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":"form select"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"width"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 100%"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":" \n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" \n"},{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":"form div"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"margin-bottom"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 8px"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you refresh the page now, you will find it has changed and now it’s showing our form."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Now, we need to add some logic to our form. "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"On Submit"}]}]},{"type":"text","value":", we need to get the values of our input elements, then call the API to retrieve the results."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To handle form elements and their values, you need to use the state of the component. You make the value of the element equal to a property in the state of the component."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Before hooks, in order to get the value in the state you would have to use "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"this.state.value"}]},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":", "}]}]},{"type":"text","value":"and then to set the state, you will need to call "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"this.setState"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Now, you can use the state hook. The state hook is the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"useState"}]},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":" "}]}]},{"type":"text","value":"function. It accepts one argument, which is the initial value, and it returns a pair of values: the "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"current state"}]}]},{"type":"text","value":" and a "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"function"}]}]},{"type":"text","value":" that updates it. Then, you will be able to access the current state using the first returned value, and update it using the second returned value which is the function."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Here’s an example:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"text","value":"count"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" setCount"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"useState"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"0"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"in this example, we call the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"useState"}]},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":" "}]}]},{"type":"text","value":"hook and pass it 0, and we set the returned value equal to "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"count"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"setCount"}]},{"type":"text","value":". This means that we have created state variable called "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"count"}]},{"type":"text","value":". Its initial value is 0, and to change its value we can use "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"setCount"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For our "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Form"}]},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":" "}]}]},{"type":"text","value":"component, we need two state variables, one for the text"},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":" "}]}]},{"type":"text","value":"input which we will call "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"number"}]},{"type":"text","value":", and one for the select"},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":" "}]}]},{"type":"text","value":"input which we will call "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"type"}]},{"type":"text","value":". Then, on change event for these two input elements, we will change the values for "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"number"}]},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":" "}]}]},{"type":"text","value":"and "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"type"}]},{"type":"text","value":" using the function returned by "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"setState"}]},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"."}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Open our "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Form"}]},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":" "}]}]},{"type":"text","value":"component and change it to the following:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"import"}]},{"type":"text","value":" React"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" useState "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"from"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'react'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"Form"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","parameter"]},"children":[{"type":"text","value":"props"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"let"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"text","value":"number"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" setNumber"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"useState"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"random\""}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"let"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"text","value":"type"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" setType"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"useState"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"trivia\""}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"onNumberChanged"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","parameter"]},"children":[{"type":"text","value":"e"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"let"}]},{"type":"text","value":" value "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" e"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"target"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"value"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"trim"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"if"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"!"}]},{"type":"text","value":"value"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"length"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"setNumber"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"random\""}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"//default value"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"else"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"setNumber"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"value"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"onTypeChanged"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","parameter"]},"children":[{"type":"text","value":"e"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"let"}]},{"type":"text","value":" value "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" e"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"target"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"value"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"trim"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"if"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"!"}]},{"type":"text","value":"value"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"length"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"setType"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"trivia\""}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"//default value"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"else"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"setType"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"value"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"form"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"div"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"input type"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"text\""}]},{"type":"text","value":" name"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"number\""}]},{"type":"text","value":" placeholder"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"Enter a number (Optional)\""}]},{"type":"text","value":" value"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"number"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" onChange"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"onNumberChanged"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"div"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"div"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"select name"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"type\""}]},{"type":"text","value":" value"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"type"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" onChange"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"onTypeChanged"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"option value"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"trivia\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"Trivia"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"option"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"option value"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"math\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"Math"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"option"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"option value"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"date\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"Date"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"option"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"option value"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"year\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"Year"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"option"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"select"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"div"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"button type"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"submit\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"Generate"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"button"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"form"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"export"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"default"}]},{"type":"text","value":" Form"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Line 1: "}]}]},{"type":"text","value":"add an import for "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"useState"}]},{"type":"text","value":" hook."}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Line 3–4: "}]}]},{"type":"text","value":"create two state variables "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"number"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"type"}]},{"type":"text","value":" using "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"useState"}]},{"type":"text","value":" . Here we pass "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"random "}]}]},{"type":"text","value":"as the initial value for number, and "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"trivia "}]}]},{"type":"text","value":"as initial value for type because they are the default values for the parameters in the API."}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Line 5–10: "}]}]},{"type":"text","value":"implement input change handler functions for both text and select inputs, where we change the value of the state variables using the functions returned by "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"useState"}]},{"type":"text","value":" . If the value is unset, we automatically change the values to the default value."}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Line 13: "}]}]},{"type":"text","value":"pass the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"onNumberChanged"}]},{"type":"text","value":" function to "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"onChange"}]},{"type":"text","value":" event for text input."}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Line 16: "}]}]},{"type":"text","value":"pass the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"onTypeChanged"}]},{"type":"text","value":" function to "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"onChange"}]},{"type":"text","value":" event for select input."}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In addition, let’s go back to our "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"App"}]},{"type":"text","value":" component to modify it and use states. Instead of modifying our welcome message by changing the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"innerHTML"}]},{"type":"text","value":" of the element, we will use a state. Our App component should now be like this:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"import React, {useEffect, useState} from 'react'; \nimport Form from './Form'; \nimport '../styles/App.css'; \n \nfunction App() {\n const [ welcomeMessage, setWelcomeMessage ] = useState(\n \"Welcome to Numbers Trivia!\",\n );\nuseEffect(() => {\n setTimeout(() => {\n setWelcomeMessage(\"Try Out Our Trivia Generator!\");\n }, 3000);\n }, []);\nreturn (\n
\n
\n

{welcomeMessage}

\n
\n \n
\n );\n}\nexport default App;"}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Now, we are using "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"useState"}]},{"type":"text","value":" to declare and initialize our welcome message. It will return "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"welcomeMessage"}]},{"type":"text","value":" , our state variable, and "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"setWelcomeMessage"}]},{"type":"text","value":" , which we will use to change the value of "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"welcomeMessage"}]},{"type":"text","value":" after 3 seconds from “"},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Welcome to Numbers Trivia!"}]}]},{"type":"text","value":"” to “"},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Try Out Our Trivia Generator!"}]}]},{"type":"text","value":"”"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"What’s left now is to add a function to handle the form’s "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"onSubmit"}]},{"type":"text","value":" event. On submit, we will send a request to the API with our parameters, then display the result."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In order to perform the request, we need to install "},{"type":"element","tagName":"a","properties":{"href":"https://github.com/axios/axios","rel":["noopener","nofollow"]},"children":[{"type":"text","value":"axios"}]},{"type":"text","value":":"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"shell"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-shell"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-shell"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"npm"}]},{"type":"text","value":" i axios"}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Then, require axios at the beginning of "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Form.js:"}]}]}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" axios "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"require"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'axios'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Now, add the following function below "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"onTypeChanged"}]},{"type":"text","value":" in our "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Form"}]}]},{"type":"text","value":" component:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"onSubmit"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","parameter"]},"children":[{"type":"text","value":"e"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n e"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"preventDefault"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n axios"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"get"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'http://numbersapi.com/'"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" number "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'/'"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" type"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"then"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","parameter"]},"children":[{"type":"text","value":"response"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"let"}]},{"type":"text","value":" elm "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" document"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"getElementById"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'result'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n elm"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"innerHTML "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" response"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"data"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"catch"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","parameter"]},"children":[{"type":"text","value":"e"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n console"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"log"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"error\""}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" e"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"//simple error handling"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"We’re just performing a request to the API, passing the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"number"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"type"}]},{"type":"text","value":" then displaying the result in an element of id "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"result"}]},{"type":"text","value":" (which we will add in a minute). In case of an error, we’re just displaying it in the console just as a simple error handling."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Now, let’s add this function as the handler for the form "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"onSubmit"}]},{"type":"text","value":" event in the return statement in Form.js:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"jsx"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-jsx"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-jsx"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"form"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"onSubmit"}]},{"type":"element","tagName":"span","properties":{"className":["token","script","language-javascript"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","script-punctuation","punctuation"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"onSubmit"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The only thing left is to add the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"#result"}]},{"type":"text","value":" element. We can add it in "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"App.js "}]}]},{"type":"text","value":"before "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":""}]},{"type":"text","value":" :"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"jsx"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-jsx"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-jsx"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"div"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"id"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"result"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"style"}]},{"type":"element","tagName":"span","properties":{"className":["token","script","language-javascript"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","script-punctuation","punctuation"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"marginBottom"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'15px'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":""}]}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Alright, now go to your website and discover all new trivia about numbers!"}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h2","properties":{"id":"conclusion"},"children":[{"type":"text","value":"Conclusion"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You just created a React app and used some React Hooks! Of course, there’s still more to explore and learn, so be sure to head to the "},{"type":"element","tagName":"a","properties":{"href":"https://reactjs.org/docs/hooks-intro.html","rel":["noopener","nofollow"]},"children":[{"type":"text","value":"docs"}]},{"type":"text","value":" to learn more about React Hooks."}]}],"data":{"quirksMode":false}},"tableOfContents":[{"id":"conclusion","heading":"Conclusion"}]},"featureImageSharp":{"base":"1_-Ijet6kVJqGgul6adezDLQ.png","publicURL":"/static/811e7e5724a90f775f8832f17c9353ff/1_-Ijet6kVJqGgul6adezDLQ.png","imageMeta":{"width":700,"height":350},"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAIAAAA7N+mxAAAACXBIWXMAAAsTAAALEwEAmpwYAAABLElEQVQoz5WS3UrDQBCF8yDd7M5MdwesMf2NpSaUPkAvJCUNUqxKoNKgEStUsMU7vRJ8ZKFp2kYv1MMy7M03ezhnLTwU0fb8Tdb+CgBSbue3jb/DWpuTetWwcVwA2FCU7yyWEGxUhonAFlxvdW/uzubL5vkFgEIAIQQiMjMiGmOEEMystcaCt3LDpE07mvaXb4PVR/CwNt3A67Rns9nldBqORkmSxHGcZdlkMvF937bt3FQBG26Pr/vP74PXzyBbm17/1PPSNE2SJAzDeZrGcfy4WERRNBwOK5XKAUykbMEtr3f75N+/dMZXoBQiSimZ2XEcw1yr1aSUjUaDmaFke/M6ac1uUx8dG8fFIjAAUErlk4iklD8C21dlg1K7qqjQLnkq12aVK63+65N8AWEWZr2hm3MKAAAAAElFTkSuQmCC","aspectRatio":1.9886363636363635,"src":"/static/811e7e5724a90f775f8832f17c9353ff/60290/1_-Ijet6kVJqGgul6adezDLQ.png","srcSet":"/static/811e7e5724a90f775f8832f17c9353ff/847ef/1_-Ijet6kVJqGgul6adezDLQ.png 175w,\n/static/811e7e5724a90f775f8832f17c9353ff/91cba/1_-Ijet6kVJqGgul6adezDLQ.png 350w,\n/static/811e7e5724a90f775f8832f17c9353ff/60290/1_-Ijet6kVJqGgul6adezDLQ.png 700w","srcWebp":"/static/811e7e5724a90f775f8832f17c9353ff/89afa/1_-Ijet6kVJqGgul6adezDLQ.webp","srcSetWebp":"/static/811e7e5724a90f775f8832f17c9353ff/9fca7/1_-Ijet6kVJqGgul6adezDLQ.webp 175w,\n/static/811e7e5724a90f775f8832f17c9353ff/37a4e/1_-Ijet6kVJqGgul6adezDLQ.webp 350w,\n/static/811e7e5724a90f775f8832f17c9353ff/89afa/1_-Ijet6kVJqGgul6adezDLQ.webp 700w","sizes":"(max-width: 700px) 100vw, 700px"}}}},"allGhostPost":{"edges":[{"node":{"id":"Ghost__Post__61fa773460a9ab05cc5e69de","title":"How to Style a Scrollbar with CSS","slug":"how-to-style-a-scrollbar-with-css","featured":true,"feature_image":"https://backend.shahednasser.com/content/images/2022/03/How-to-Style-a-Scrollbar-with-CSS.webp","excerpt":"In this article, you'll learn how you can style a scrollbar with CSS and which pseudo-element selectors you need to use.","custom_excerpt":"In this article, you'll learn how you can style a scrollbar with CSS and which pseudo-element selectors you need to use.","visibility":"public","created_at_pretty":"2 Feb 2022","published_at_pretty":"15 Feb 2022","updated_at_pretty":"27 Mar 2022","created_at":"2022-02-02T12:21:08.000+00:00","published_at":"2022-02-15T10:00:19.000+00:00","updated_at":"2022-03-27T10:39:54.000+00:00","meta_title":null,"meta_description":null,"og_description":null,"og_image":null,"og_title":null,"twitter_description":null,"twitter_image":null,"twitter_title":null,"authors":[{"slug":"shahed","url":"https://backend.shahednasser.com/author/shahed/","name":"Shahed Nasser","bio":null,"cover_image":null,"profile_image":"https://backend.shahednasser.com/content/images/2022/03/IMG_0591.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":null}],"primary_author":{"slug":"shahed","url":"https://backend.shahednasser.com/author/shahed/","name":"Shahed Nasser","bio":null,"cover_image":null,"profile_image":"https://backend.shahednasser.com/content/images/2022/03/IMG_0591.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":{"base":"IMG_0591.jpg","publicURL":"/static/ceb49c3c631485453e71e00d7f84b069/IMG_0591.jpg","imageMeta":{"width":1182,"height":1179},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAAMEAQL/xAAWAQEBAQAAAAAAAAAAAAAAAAADBAL/2gAMAwEAAhADEAAAAdXiFM6i0CohUWXoKn//xAAcEAACAgIDAAAAAAAAAAAAAAACAwESBBEhM0H/2gAIAQEAAQUCWySE3WEr7SzbXjAj4iKty+sOQ//EABYRAQEBAAAAAAAAAAAAAAAAAAERIP/aAAgBAwEBPwEhj//EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQIBAT8BH//EAB4QAAIBBAMBAAAAAAAAAAAAAAABIRESMUECECJx/9oACAEBAAY/ApVGWvOjzgtUwLlTZA0sdL4f/8QAHBAAAwACAwEAAAAAAAAAAAAAAAERITFBkbHB/9oACAEBAAE/IahkCy+N2GwZpjQiJHJCspUFY0QrSi+HqiW2rgf/2gAMAwEAAgADAAAAEPw3/wD/xAAYEQEBAAMAAAAAAAAAAAAAAAAAARExQf/aAAgBAwEBPxCtjDqP/8QAFxEBAQEBAAAAAAAAAAAAAAAAAQAxEf/aAAgBAgEBPxBFus6Tt//EAB8QAQEAAgIBBQAAAAAAAAAAAAERACExQWFRcYGR0f/aAAgBAQABPxAuaBPPzkO1wyX7F4wkwXanfZrFQgeqE9JgS14vVOvrERIJomVBKwt2jebAeP0yVa8h1n//2Q==","aspectRatio":1,"src":"/static/ceb49c3c631485453e71e00d7f84b069/31709/IMG_0591.jpg","srcSet":"/static/ceb49c3c631485453e71e00d7f84b069/f340b/IMG_0591.jpg 28w,\n/static/ceb49c3c631485453e71e00d7f84b069/22d64/IMG_0591.jpg 55w,\n/static/ceb49c3c631485453e71e00d7f84b069/31709/IMG_0591.jpg 110w,\n/static/ceb49c3c631485453e71e00d7f84b069/aa249/IMG_0591.jpg 165w,\n/static/ceb49c3c631485453e71e00d7f84b069/0dc33/IMG_0591.jpg 220w,\n/static/ceb49c3c631485453e71e00d7f84b069/d8257/IMG_0591.jpg 1182w","srcWebp":"/static/ceb49c3c631485453e71e00d7f84b069/8678c/IMG_0591.webp","srcSetWebp":"/static/ceb49c3c631485453e71e00d7f84b069/59cda/IMG_0591.webp 28w,\n/static/ceb49c3c631485453e71e00d7f84b069/7da75/IMG_0591.webp 55w,\n/static/ceb49c3c631485453e71e00d7f84b069/8678c/IMG_0591.webp 110w,\n/static/ceb49c3c631485453e71e00d7f84b069/f282e/IMG_0591.webp 165w,\n/static/ceb49c3c631485453e71e00d7f84b069/a7b21/IMG_0591.webp 220w,\n/static/ceb49c3c631485453e71e00d7f84b069/63099/IMG_0591.webp 1182w","sizes":"(max-width: 110px) 100vw, 110px"}}}},"primary_tag":{"slug":"css","url":"https://backend.shahednasser.com/tag/css/","name":"CSS","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/photo-1610986603166-f78428624e76-2.jpeg","description":"Learn more about CSS through tutorials, articles, and tips.","meta_title":null,"meta_description":null,"featureImageSharp":{"base":"photo-1610986603166-f78428624e76-2.jpeg","publicURL":"/static/2e4062ead6b64acea03c5c5ba3437c96/photo-1610986603166-f78428624e76-2.jpeg","imageMeta":{"width":2000,"height":1352},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAOABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAIBAwX/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/aAAwDAQACEAMQAAABymIKxiv/xAAaEAACAgMAAAAAAAAAAAAAAAAAEQECEBIh/9oACAEBAAEFAqolalUcx//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABURAQEAAAAAAAAAAAAAAAAAAAAR/9oACAECAQE/AUf/xAAZEAACAwEAAAAAAAAAAAAAAAAQIQABEYH/2gAIAQEABj8CcVd0M//EABsQAAIDAAMAAAAAAAAAAAAAAAABESExEFGB/9oACAEBAAE/IdKGJM+nDWSDSdkH/9oADAMBAAIAAwAAABCL7//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QP//EABURAQEAAAAAAAAAAAAAAAAAAAEQ/9oACAECAQE/EAY//8QAGhABAQADAQEAAAAAAAAAAAAAAREAITEQYf/aAAgBAQABPxAsEuSsxwBHaV8nMjhCkPIbwwjTs8f/2Q==","aspectRatio":1.4772727272727273,"src":"/static/2e4062ead6b64acea03c5c5ba3437c96/d5c54/photo-1610986603166-f78428624e76-2.jpg","srcSet":"/static/2e4062ead6b64acea03c5c5ba3437c96/65d8c/photo-1610986603166-f78428624e76-2.jpg 260w,\n/static/2e4062ead6b64acea03c5c5ba3437c96/c5f21/photo-1610986603166-f78428624e76-2.jpg 520w,\n/static/2e4062ead6b64acea03c5c5ba3437c96/d5c54/photo-1610986603166-f78428624e76-2.jpg 1040w,\n/static/2e4062ead6b64acea03c5c5ba3437c96/81a53/photo-1610986603166-f78428624e76-2.jpg 1560w,\n/static/2e4062ead6b64acea03c5c5ba3437c96/4e5f3/photo-1610986603166-f78428624e76-2.jpg 2000w","srcWebp":"/static/2e4062ead6b64acea03c5c5ba3437c96/e4875/photo-1610986603166-f78428624e76-2.webp","srcSetWebp":"/static/2e4062ead6b64acea03c5c5ba3437c96/dc8f3/photo-1610986603166-f78428624e76-2.webp 260w,\n/static/2e4062ead6b64acea03c5c5ba3437c96/2db4b/photo-1610986603166-f78428624e76-2.webp 520w,\n/static/2e4062ead6b64acea03c5c5ba3437c96/e4875/photo-1610986603166-f78428624e76-2.webp 1040w,\n/static/2e4062ead6b64acea03c5c5ba3437c96/f5845/photo-1610986603166-f78428624e76-2.webp 1560w,\n/static/2e4062ead6b64acea03c5c5ba3437c96/49d6b/photo-1610986603166-f78428624e76-2.webp 2000w","sizes":"(max-width: 1040px) 100vw, 1040px"}}}},"tags":[{"slug":"css","url":"https://backend.shahednasser.com/tag/css/","name":"CSS","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/photo-1610986603166-f78428624e76-2.jpeg","description":"Learn more about CSS through tutorials, articles, and tips.","meta_title":null,"meta_description":null,"featureImageSharp":null},{"slug":"beginner","url":"https://backend.shahednasser.com/tag/beginner/","name":"Beginners","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/photo-1521185496955-15097b20c5fe-2.jpeg","description":"Tutorials, articles, and tips to help beginners accelerate their journey in programming.","meta_title":"Beginners","meta_description":"Tutorials, articles, and tips to help beginners accelerate their journey in programming.","featureImageSharp":null}],"plaintext":"Scrollbars usually are styled based on the browser or operating system the\nwebsite is viewed in. This means that your website's scrollbar will not have a\nunified look across platforms. Although this is generally fine, it's cool to\nhave a good-looking scrollbar regardless of what browser the user is using!\n\nHowever, styling the scrollbar can be tricky in CSS. You'll need to use\npseudo-element selectors.\n\nIn this article, you'll learn how you can style a scrollbar with CSS and which\npseudo-element selectors you need to use.\n\nPseudo-Element Selectos Compatibility\nThe pseudo-element selectors mentioned in this tutorial will only work on Webkit\n[https://en.wikipedia.org/wiki/List_of_web_browsers#WebKit-based] browsers. So,\nit will work on most modern browsers like Chrome and Safari.\n\nHowever, they will not work on Firefox. Alternatively, you can use the \nscrollbar-width\n[https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width] and \nscrollbar-color\n[https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color] properties.\n\n::-webkit-scrollbar\nThis pseudo-element selector is the base selector you need to use when\ncustomizing your scrollbar. It is used to specify the width of a scrollbar.\n\nNote that if this selector is used on a specific element (not the scrollbar of\nthe entire page), then you need to specify overflow: scroll; on the element, or\nelse the scrollbar won't show.\n\nApply the following styling to set the width of the page's scrollbar:\n\n::-webkit-scrollbar {\n width: 30px;\n}\n\nIf you try this out, you'll notice that no scroll bar appears. This is because\nyou need to add a background color for the scrollbar track or handle.\n\n::-webkit-scrollbar-thumb\nYou can use this pseudo-element selector to style the thumb of the scrollbar.\nThis means the part you can drag to scroll the page.\n\nFor example, you can use this selector to make its background red and give it a\nborder-radius:\n\n::-webkit-scrollbar-thumb {\n background: #ef4444;\n border-radius: 20px;\n}\n\n::-webkit-scrollbar-track\nYou can use this pseudo-element selector to style the track. This is the part\nthat is below the thumb.\n\nAnother pseudo-element selector that can be used is \n::-webkit-scrollbar-track-piece, which is the part of the scrollbar not covered\nby the handler. The ::-webkit-scrollbar-track-piece is on a higher layer than \n::-webkit-scrollbar-track.\n\nFor example, you can use it to add a background color to the track:\n\n::-webkit-scrollbar-track {\n background-color: #fca5a5;\n}\n\n::-webkit-scrollbar-button\nYou can use this to style the up and down (or left and right for horizontal\nscrollbars) buttons.\n\nThis will apply styling to all scrollbar buttons. This means it will apply the\nstyling for both the horizontal and vertical scrollbar buttons.\n\nTo apply specific styling for specific buttons here's what you need to use:\n\n 1. ::-webkit-scrollbar-button:vertical:start: This is for the up button in the\n vertical scrollbar.\n 2. ::-webkit-scrollbar-button:vertical:end: This is for the down button in the\n vertical scrollbar.\n 3. ::-webkit-scrollbar-button:horizontal:start: This is for the left button in\n the horizontal scrollbar.\n 4. ::-webkit-scrollbar-button:horizontal:end: This is for the right button in\n the horizontal scrollbar.\n\nAdditionally, each button has a :increment and :decrement selector.\n\nIn this example, I'll add styling for the buttons of a vertical scrollbar:\n\n::-webkit-scrollbar-button {\n display: block;\n background-color: #b91c1c;\n background-repeat: no-repeat; \n background-size: 50%;\n background-position: center;\n}\n\n::-webkit-scrollbar-button:vertical:start:increment {\n background-image: url('https://upload.wikimedia.org/wikipedia/commons/7/7e/Chevron-up.svg'); \n}\n\n::-webkit-scrollbar-button:vertical:start:decrement {\n display: none;\n}\n\n::-webkit-scrollbar-button:vertical:end:increment {\n display: none;\n}\n\n::-webkit-scrollbar-button:vertical:end:decrement {\n background-image: url('https://upload.wikimedia.org/wikipedia/commons/e/ee/Chevron-down.svg'); \n}\n\nThe properties in ::-webkit-scrollbar-button will apply for all scrollbar\nbuttons. In the example, I add a background color. I also set the display to \nblock because some browsers or operating systems might have it hidden by\ndefault. Finally, I add background-related properties because I will use\nbackground images to show the up and down icons.\n\nThe ::-webkit-scrollbar-button:vertical:start:increment selector will target the\nincrement part of the up button of the vertical scrollbar. I use it to show the\nicon as a background image.\n\nThe ::-webkit-scrollbar-button:vertical:start:decrement selector will target the\ndecrement part of the up button of the vertical scrollbar. I use it to hide the\ndecrement part as it is not necessary for the up button.\n\nThe ::-webkit-scrollbar-button:vertical:end:increment selector will target the\nincrement part of the down button of the vertical scrollbar. I use it to hide\nthe increment part as it is not necessary for the down button.\n\nThe ::-webkit-scrollbar-button:vertical:end:decrement selector will target the\ndecrement part of the down button of the vertical scrollbar. I use it to show\nthe icon as a background image.\n\n::-webkit-scrollbar-corner\nThis pseudo-element selector is used to style the space between the vertical and\nhorizontal scrollbars.\n\nFor example, you can use it to set different background color:\n\n::-webkit-scrollbar-corner {\n background-color: #7f1d1d;\n}\n\nConclusion\nScrollbars can be easily styled on your website using these pseudo-element\nselectors. You can style them to make sure they match your website's look and\nfeel regardless of what platform your website is opened on.\n\nAs mentioned earlier, these selectors will only work on Webkit browsers. Please\ncheck out MDN's browser compatibility table\n[https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar#browser_compatibility] \nfor further information.","html":"

Scrollbars usually are styled based on the browser or operating system the website is viewed in. This means that your website's scrollbar will not have a unified look across platforms. Although this is generally fine, it's cool to have a good-looking scrollbar regardless of what browser the user is using!

However, styling the scrollbar can be tricky in CSS. You'll need to use pseudo-element selectors.

In this article, you'll learn how you can style a scrollbar with CSS and which pseudo-element selectors you need to use.

Pseudo-Element Selectos Compatibility

The pseudo-element selectors mentioned in this tutorial will only work on Webkit browsers. So, it will work on most modern browsers like Chrome and Safari.

However, they will not work on Firefox. Alternatively, you can use the scrollbar-width and scrollbar-color properties.

::-webkit-scrollbar

This pseudo-element selector is the base selector you need to use when customizing your scrollbar. It is used to specify the width of a scrollbar.

Note that if this selector is used on a specific element (not the scrollbar of the entire page), then you need to specify overflow: scroll; on the element, or else the scrollbar won't show.

Apply the following styling to set the width of the page's scrollbar:

::-webkit-scrollbar {\n    width: 30px;\n}

If you try this out, you'll notice that no scroll bar appears. This is because you need to add a background color for the scrollbar track or handle.

::-webkit-scrollbar-thumb

You can use this pseudo-element selector to style the thumb of the scrollbar. This means the part you can drag to scroll the page.

For example, you can use this selector to make its background red and give it a border-radius:

::-webkit-scrollbar-thumb {\n    background: #ef4444;\n    border-radius: 20px;\n}

::-webkit-scrollbar-track

You can use this pseudo-element selector to style the track. This is the part that is below the thumb.

Another pseudo-element selector that can be used is ::-webkit-scrollbar-track-piece, which is the part of the scrollbar not covered by the handler. The ::-webkit-scrollbar-track-piece is on a higher layer than ::-webkit-scrollbar-track.

For example, you can use it to add a background color to the track:

::-webkit-scrollbar-track {\n    background-color: #fca5a5;\n}

::-webkit-scrollbar-button

You can use this to style the up and down (or left and right for horizontal scrollbars) buttons.

This will apply styling to all scrollbar buttons. This means it will apply the styling for both the horizontal and vertical scrollbar buttons.

To apply specific styling for specific buttons here's what you need to use:

  1. ::-webkit-scrollbar-button:vertical:start: This is for the up button in the vertical scrollbar.
  2. ::-webkit-scrollbar-button:vertical:end: This is for the down button in the vertical scrollbar.
  3. ::-webkit-scrollbar-button:horizontal:start: This is for the left button in the horizontal scrollbar.
  4. ::-webkit-scrollbar-button:horizontal:end: This is for the right button in the horizontal scrollbar.

Additionally, each button has a :increment and :decrement selector.

In this example, I'll add styling for the buttons of a vertical scrollbar:

::-webkit-scrollbar-button {\n    display: block;\n    background-color: #b91c1c;\n    background-repeat: no-repeat;   \n    background-size: 50%;\n    background-position: center;\n}\n\n::-webkit-scrollbar-button:vertical:start:increment {\n    background-image: url('https://upload.wikimedia.org/wikipedia/commons/7/7e/Chevron-up.svg');   \n}\n\n::-webkit-scrollbar-button:vertical:start:decrement {\n    display: none;\n}\n\n::-webkit-scrollbar-button:vertical:end:increment {\n    display: none;\n}\n\n::-webkit-scrollbar-button:vertical:end:decrement {\n    background-image: url('https://upload.wikimedia.org/wikipedia/commons/e/ee/Chevron-down.svg');   \n}

The properties in ::-webkit-scrollbar-button will apply for all scrollbar buttons. In the example, I add a background color. I also set the display to block because some browsers or operating systems might have it hidden by default. Finally, I add background-related properties because I will use background images to show the up and down icons.

The ::-webkit-scrollbar-button:vertical:start:increment selector will target the increment part of the up button of the vertical scrollbar. I use it to show the icon as a background image.

The ::-webkit-scrollbar-button:vertical:start:decrement selector will target the decrement part of the up button of the vertical scrollbar. I use it to hide the decrement part as it is not necessary for the up button.

The ::-webkit-scrollbar-button:vertical:end:increment selector will target the increment part of the down button of the vertical scrollbar. I use it to hide the increment part as it is not necessary for the down button.

The ::-webkit-scrollbar-button:vertical:end:decrement selector will target the decrement part of the down button of the vertical scrollbar. I use it to show the icon as a background image.

::-webkit-scrollbar-corner

This pseudo-element selector is used to style the space between the vertical and horizontal scrollbars.

For example, you can use it to set different background color:

::-webkit-scrollbar-corner {\n    background-color: #7f1d1d;\n}

Conclusion

Scrollbars can be easily styled on your website using these pseudo-element selectors. You can style them to make sure they match your website's look and feel regardless of what platform your website is opened on.

As mentioned earlier, these selectors will only work on Webkit browsers. Please check out MDN's browser compatibility table for further information.

","url":"https://backend.shahednasser.com/how-to-style-a-scrollbar-with-css/","canonical_url":null,"uuid":"2ae6ce72-a09e-4fac-82ce-22a9fa97d1e2","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"61fa773460a9ab05cc5e69de","reading_time":4,"send_email_when_published":null,"email_subject":null,"childHtmlRehype":{"html":"

Scrollbars usually are styled based on the browser or operating system the website is viewed in. This means that your website's scrollbar will not have a unified look across platforms. Although this is generally fine, it's cool to have a good-looking scrollbar regardless of what browser the user is using!

However, styling the scrollbar can be tricky in CSS. You'll need to use pseudo-element selectors.

In this article, you'll learn how you can style a scrollbar with CSS and which pseudo-element selectors you need to use.

Pseudo-Element Selectos Compatibility

The pseudo-element selectors mentioned in this tutorial will only work on Webkit browsers. So, it will work on most modern browsers like Chrome and Safari.

However, they will not work on Firefox. Alternatively, you can use the scrollbar-width and scrollbar-color properties.

::-webkit-scrollbar

This pseudo-element selector is the base selector you need to use when customizing your scrollbar. It is used to specify the width of a scrollbar.

Note that if this selector is used on a specific element (not the scrollbar of the entire page), then you need to specify overflow: scroll; on the element, or else the scrollbar won't show.

Apply the following styling to set the width of the page's scrollbar:

::-webkit-scrollbar {\n    width: 30px;\n}

If you try this out, you'll notice that no scroll bar appears. This is because you need to add a background color for the scrollbar track or handle.

::-webkit-scrollbar-thumb

You can use this pseudo-element selector to style the thumb of the scrollbar. This means the part you can drag to scroll the page.

For example, you can use this selector to make its background red and give it a border-radius:

::-webkit-scrollbar-thumb {\n    background: #ef4444;\n    border-radius: 20px;\n}
\"\"

::-webkit-scrollbar-track

You can use this pseudo-element selector to style the track. This is the part that is below the thumb.

Another pseudo-element selector that can be used is ::-webkit-scrollbar-track-piece, which is the part of the scrollbar not covered by the handler. The ::-webkit-scrollbar-track-piece is on a higher layer than ::-webkit-scrollbar-track.

For example, you can use it to add a background color to the track:

::-webkit-scrollbar-track {\n    background-color: #fca5a5;\n}
\"\"

::-webkit-scrollbar-button

You can use this to style the up and down (or left and right for horizontal scrollbars) buttons.

This will apply styling to all scrollbar buttons. This means it will apply the styling for both the horizontal and vertical scrollbar buttons.

To apply specific styling for specific buttons here's what you need to use:

  1. ::-webkit-scrollbar-button:vertical:start: This is for the up button in the vertical scrollbar.
  2. ::-webkit-scrollbar-button:vertical:end: This is for the down button in the vertical scrollbar.
  3. ::-webkit-scrollbar-button:horizontal:start: This is for the left button in the horizontal scrollbar.
  4. ::-webkit-scrollbar-button:horizontal:end: This is for the right button in the horizontal scrollbar.

Additionally, each button has a :increment and :decrement selector.

In this example, I'll add styling for the buttons of a vertical scrollbar:

::-webkit-scrollbar-button {\n    display: block;\n    background-color: #b91c1c;\n    background-repeat: no-repeat;   \n    background-size: 50%;\n    background-position: center;\n}\n\n::-webkit-scrollbar-button:vertical:start:increment {\n    background-image: url('https://upload.wikimedia.org/wikipedia/commons/7/7e/Chevron-up.svg');   \n}\n\n::-webkit-scrollbar-button:vertical:start:decrement {\n    display: none;\n}\n\n::-webkit-scrollbar-button:vertical:end:increment {\n    display: none;\n}\n\n::-webkit-scrollbar-button:vertical:end:decrement {\n    background-image: url('https://upload.wikimedia.org/wikipedia/commons/e/ee/Chevron-down.svg');   \n}

The properties in ::-webkit-scrollbar-button will apply for all scrollbar buttons. In the example, I add a background color. I also set the display to block because some browsers or operating systems might have it hidden by default. Finally, I add background-related properties because I will use background images to show the up and down icons.

The ::-webkit-scrollbar-button:vertical:start:increment selector will target the increment part of the up button of the vertical scrollbar. I use it to show the icon as a background image.

The ::-webkit-scrollbar-button:vertical:start:decrement selector will target the decrement part of the up button of the vertical scrollbar. I use it to hide the decrement part as it is not necessary for the up button.

The ::-webkit-scrollbar-button:vertical:end:increment selector will target the increment part of the down button of the vertical scrollbar. I use it to hide the increment part as it is not necessary for the down button.

The ::-webkit-scrollbar-button:vertical:end:decrement selector will target the decrement part of the down button of the vertical scrollbar. I use it to show the icon as a background image.

\"\"
\"\"

::-webkit-scrollbar-corner

This pseudo-element selector is used to style the space between the vertical and horizontal scrollbars.

\"\"

For example, you can use it to set different background color:

::-webkit-scrollbar-corner {\n    background-color: #7f1d1d;\n}
\"\"

Conclusion

Scrollbars can be easily styled on your website using these pseudo-element selectors. You can style them to make sure they match your website's look and feel regardless of what platform your website is opened on.

As mentioned earlier, these selectors will only work on Webkit browsers. Please check out MDN's browser compatibility table for further information.

","htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Scrollbars usually are styled based on the browser or operating system the website is viewed in. This means that your website's scrollbar will not have a unified look across platforms. Although this is generally fine, it's cool to have a good-looking scrollbar regardless of what browser the user is using!"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"However, styling the scrollbar can be tricky in CSS. You'll need to use pseudo-element selectors."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In this article, you'll learn how you can style a scrollbar with CSS and which pseudo-element selectors you need to use."}]},{"type":"element","tagName":"h2","properties":{"id":"pseudo-element-selectos-compatibility"},"children":[{"type":"text","value":"Pseudo-Element Selectos Compatibility"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The pseudo-element selectors mentioned in this tutorial will only work on "},{"type":"element","tagName":"a","properties":{"href":"https://en.wikipedia.org/wiki/List_of_web_browsers#WebKit-based"},"children":[{"type":"text","value":"Webkit"}]},{"type":"text","value":" browsers. So, it will work on most modern browsers like Chrome and Safari."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"However, they will not work on Firefox. Alternatively, you can use the "},{"type":"element","tagName":"a","properties":{"href":"https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width"},"children":[{"type":"text","value":"scrollbar-width"}]},{"type":"text","value":" and "},{"type":"element","tagName":"a","properties":{"href":"https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color"},"children":[{"type":"text","value":"scrollbar-color"}]},{"type":"text","value":" properties."}]},{"type":"element","tagName":"h2","properties":{"id":"webkit-scrollbar"},"children":[{"type":"text","value":"::-webkit-scrollbar"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This pseudo-element selector is the base selector you need to use when customizing your scrollbar. It is used to specify the width of a scrollbar."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Note that if this selector is used on a specific element (not the scrollbar of the entire page), then you need to specify "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"overflow: scroll;"}]},{"type":"text","value":" on the element, or else the scrollbar won't show."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Apply the following styling to set the width of the page's scrollbar:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":"::-webkit-scrollbar"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"width"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 30px"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you try this out, you'll notice that no scroll bar appears. This is because you need to add a background color for the scrollbar track or handle."}]},{"type":"element","tagName":"h2","properties":{"id":"webkit-scrollbar-thumb"},"children":[{"type":"text","value":"::-webkit-scrollbar-thumb"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can use this pseudo-element selector to style the thumb of the scrollbar. This means the part you can drag to scroll the page."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For example, you can use this selector to make its background red and give it a border-radius:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":"::-webkit-scrollbar-thumb"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"background"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" #ef4444"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"border-radius"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 20px"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://backend.shahednasser.com/content/images/2022/03/Screen-Shot-2022-02-02-at-2.43.24-PM-1.png.jpeg","className":["kg-image"],"alt":"","loading":"lazy","width":228,"height":1640},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"webkit-scrollbar-track"},"children":[{"type":"text","value":"::-webkit-scrollbar-track"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can use this pseudo-element selector to style the track. This is the part that is below the thumb."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Another pseudo-element selector that can be used is "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"::-webkit-scrollbar-track-piece"}]},{"type":"text","value":", which is the part of the scrollbar not covered by the handler. The "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"::-webkit-scrollbar-track-piece"}]},{"type":"text","value":" is on a higher layer than "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"::-webkit-scrollbar-track"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For example, you can use it to add a background color to the track:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":"::-webkit-scrollbar-track"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"background-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" #fca5a5"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://backend.shahednasser.com/content/images/2022/03/Screen-Shot-2022-02-02-at-3.19.51-PM.png.jpeg","className":["kg-image"],"alt":"","loading":"lazy","width":358,"height":428},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"webkit-scrollbar-button"},"children":[{"type":"text","value":"::-webkit-scrollbar-button"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can use this to style the up and down (or left and right for horizontal scrollbars) buttons."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This will apply styling to all scrollbar buttons. This means it will apply the styling for both the horizontal and vertical scrollbar buttons."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To apply specific styling for specific buttons here's what you need to use:"}]},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"::-webkit-scrollbar-button:vertical:start"}]},{"type":"text","value":": This is for the up button in the vertical scrollbar."}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"::-webkit-scrollbar-button:vertical:end"}]},{"type":"text","value":": This is for the down button in the vertical scrollbar."}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"::-webkit-scrollbar-button:horizontal:start"}]},{"type":"text","value":": This is for the left button in the horizontal scrollbar."}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"::-webkit-scrollbar-button:horizontal:end"}]},{"type":"text","value":": This is for the right button in the horizontal scrollbar."}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Additionally, each button has a "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":":increment"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":":decrement"}]},{"type":"text","value":" selector."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In this example, I'll add styling for the buttons of a vertical scrollbar:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":"::-webkit-scrollbar-button"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"display"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" block"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"background-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" #b91c1c"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"background-repeat"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" no-repeat"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":" \n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"background-size"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 50%"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"background-position"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" center"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":"::-webkit-scrollbar-button:vertical:start:increment"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"background-image"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","url"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"url"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string","url"]},"children":[{"type":"text","value":"'https://upload.wikimedia.org/wikipedia/commons/7/7e/Chevron-up.svg'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":" \n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":"::-webkit-scrollbar-button:vertical:start:decrement"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"display"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" none"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":"::-webkit-scrollbar-button:vertical:end:increment"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"display"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" none"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":"::-webkit-scrollbar-button:vertical:end:decrement"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"background-image"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","url"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"url"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string","url"]},"children":[{"type":"text","value":"'https://upload.wikimedia.org/wikipedia/commons/e/ee/Chevron-down.svg'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":" \n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The properties in "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"::-webkit-scrollbar-button"}]},{"type":"text","value":" will apply for all scrollbar buttons. In the example, I add a background color. I also set the display to "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"block"}]},{"type":"text","value":" because some browsers or operating systems might have it hidden by default. Finally, I add background-related properties because I will use background images to show the up and down icons."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"::-webkit-scrollbar-button:vertical:start:increment"}]},{"type":"text","value":" selector will target the increment part of the up button of the vertical scrollbar. I use it to show the icon as a background image."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"::-webkit-scrollbar-button:vertical:start:decrement"}]},{"type":"text","value":" selector will target the decrement part of the up button of the vertical scrollbar. I use it to hide the decrement part as it is not necessary for the up button."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"::-webkit-scrollbar-button:vertical:end:increment"}]},{"type":"text","value":" selector will target the increment part of the down button of the vertical scrollbar. I use it to hide the increment part as it is not necessary for the down button."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"::-webkit-scrollbar-button:vertical:end:decrement"}]},{"type":"text","value":" selector will target the decrement part of the down button of the vertical scrollbar. I use it to show the icon as a background image."}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-gallery-card","kg-width-wide"]},"children":[{"type":"element","tagName":"div","properties":{"className":["kg-gallery-container"]},"children":[{"type":"element","tagName":"div","properties":{"className":["kg-gallery-row"]},"children":[{"type":"element","tagName":"div","properties":{"className":["kg-gallery-image"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://backend.shahednasser.com/content/images/2022/03/Screen-Shot-2022-02-02-at-3.41.17-PM.png.jpeg","width":152,"height":174,"loading":"lazy","alt":""},"children":[]}]},{"type":"element","tagName":"div","properties":{"className":["kg-gallery-image"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://backend.shahednasser.com/content/images/2022/03/Screen-Shot-2022-02-02-at-3.41.25-PM.png.jpeg","width":238,"height":170,"loading":"lazy","alt":""},"children":[]}]}]}]}]},{"type":"element","tagName":"h2","properties":{"id":"webkit-scrollbar-corner"},"children":[{"type":"text","value":"::-webkit-scrollbar-corner"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This pseudo-element selector is used to style the space between the vertical and horizontal scrollbars."}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://backend.shahednasser.com/content/images/2022/03/Screen-Shot-2022-02-02-at-3.54.09-PM.png.jpeg","className":["kg-image"],"alt":"","loading":"lazy","width":170,"height":130},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For example, you can use it to set different background color:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":"::-webkit-scrollbar-corner"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"background-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" #7f1d1d"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://backend.shahednasser.com/content/images/2022/03/Screen-Shot-2022-02-02-at-3.56.09-PM.png.jpeg","className":["kg-image"],"alt":"","loading":"lazy","width":230,"height":142},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"conclusion"},"children":[{"type":"text","value":"Conclusion"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Scrollbars can be easily styled on your website using these pseudo-element selectors. You can style them to make sure they match your website's look and feel regardless of what platform your website is opened on."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"As mentioned earlier, these selectors will only work on Webkit browsers. Please check out "},{"type":"element","tagName":"a","properties":{"href":"https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar#browser_compatibility"},"children":[{"type":"text","value":"MDN's browser compatibility table"}]},{"type":"text","value":" for further information."}]}],"data":{"quirksMode":false}},"tableOfContents":[{"id":"pseudo-element-selectos-compatibility","heading":"Pseudo-Element Selectos Compatibility"},{"id":"webkit-scrollbar","heading":"::-webkit-scrollbar"},{"id":"webkit-scrollbar-thumb","heading":"::-webkit-scrollbar-thumb"},{"id":"webkit-scrollbar-track","heading":"::-webkit-scrollbar-track"},{"id":"webkit-scrollbar-button","heading":"::-webkit-scrollbar-button"},{"id":"webkit-scrollbar-corner","heading":"::-webkit-scrollbar-corner"},{"id":"conclusion","heading":"Conclusion"}]},"featureImageSharp":{"base":"How-to-Style-a-Scrollbar-with-CSS.webp","publicURL":"/static/9413f31144928401d71424aa8a4a37e4/How-to-Style-a-Scrollbar-with-CSS.webp","imageMeta":{"width":1000,"height":420},"childImageSharp":{"fluid":{"base64":"data:image/webp;base64,UklGRkgAAABXRUJQVlA4IDwAAAAwAwCdASoUAAgAPtFUo0uoJKMhsAgBABoJaQAAW7k9fNIAAP7zrIDYvVASDH7vclIaLUWVfM6J84sIAAA=","aspectRatio":2.364864864864865,"src":"/static/9413f31144928401d71424aa8a4a37e4/89afa/How-to-Style-a-Scrollbar-with-CSS.webp","srcSet":"/static/9413f31144928401d71424aa8a4a37e4/9fca7/How-to-Style-a-Scrollbar-with-CSS.webp 175w,\n/static/9413f31144928401d71424aa8a4a37e4/37a4e/How-to-Style-a-Scrollbar-with-CSS.webp 350w,\n/static/9413f31144928401d71424aa8a4a37e4/89afa/How-to-Style-a-Scrollbar-with-CSS.webp 700w,\n/static/9413f31144928401d71424aa8a4a37e4/47f67/How-to-Style-a-Scrollbar-with-CSS.webp 1000w","srcWebp":"/static/9413f31144928401d71424aa8a4a37e4/89afa/How-to-Style-a-Scrollbar-with-CSS.webp","srcSetWebp":"/static/9413f31144928401d71424aa8a4a37e4/9fca7/How-to-Style-a-Scrollbar-with-CSS.webp 175w,\n/static/9413f31144928401d71424aa8a4a37e4/37a4e/How-to-Style-a-Scrollbar-with-CSS.webp 350w,\n/static/9413f31144928401d71424aa8a4a37e4/89afa/How-to-Style-a-Scrollbar-with-CSS.webp 700w,\n/static/9413f31144928401d71424aa8a4a37e4/47f67/How-to-Style-a-Scrollbar-with-CSS.webp 1000w","sizes":"(max-width: 700px) 100vw, 700px"}}}}},{"node":{"id":"Ghost__Post__61d2b40c61dbd80628bf99b1","title":"CSS Grid Tutorial For Beginners","slug":"css-grid-tutorial-for-beginners","featured":false,"feature_image":"https://backend.shahednasser.com/content/images/2022/01/sharon-mccutcheon-_Y3IuVbPpmU-unsplash-2.jpg","excerpt":"In this article, I'll go over the basics of CSS Grid for absolute beginners who are looking to grasp the concept to use it in their projects.","custom_excerpt":"In this article, I'll go over the basics of CSS Grid for absolute beginners who are looking to grasp the concept to use it in their projects.","visibility":"public","created_at_pretty":"3 Jan 2022","published_at_pretty":"5 Jan 2022","updated_at_pretty":"10 Jan 2022","created_at":"2022-01-03T08:30:04.000+00:00","published_at":"2022-01-05T13:38:06.000+00:00","updated_at":"2022-01-10T09:59:08.000+00:00","meta_title":null,"meta_description":null,"og_description":null,"og_image":null,"og_title":null,"twitter_description":null,"twitter_image":null,"twitter_title":null,"authors":[{"slug":"shahed","url":"https://backend.shahednasser.com/author/shahed/","name":"Shahed Nasser","bio":null,"cover_image":null,"profile_image":"https://backend.shahednasser.com/content/images/2022/03/IMG_0591.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":null}],"primary_author":{"slug":"shahed","url":"https://backend.shahednasser.com/author/shahed/","name":"Shahed Nasser","bio":null,"cover_image":null,"profile_image":"https://backend.shahednasser.com/content/images/2022/03/IMG_0591.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":{"base":"IMG_0591.jpg","publicURL":"/static/ceb49c3c631485453e71e00d7f84b069/IMG_0591.jpg","imageMeta":{"width":1182,"height":1179},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAAMEAQL/xAAWAQEBAQAAAAAAAAAAAAAAAAADBAL/2gAMAwEAAhADEAAAAdXiFM6i0CohUWXoKn//xAAcEAACAgIDAAAAAAAAAAAAAAACAwESBBEhM0H/2gAIAQEAAQUCWySE3WEr7SzbXjAj4iKty+sOQ//EABYRAQEBAAAAAAAAAAAAAAAAAAERIP/aAAgBAwEBPwEhj//EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQIBAT8BH//EAB4QAAIBBAMBAAAAAAAAAAAAAAABIRESMUECECJx/9oACAEBAAY/ApVGWvOjzgtUwLlTZA0sdL4f/8QAHBAAAwACAwEAAAAAAAAAAAAAAAERITFBkbHB/9oACAEBAAE/IahkCy+N2GwZpjQiJHJCspUFY0QrSi+HqiW2rgf/2gAMAwEAAgADAAAAEPw3/wD/xAAYEQEBAAMAAAAAAAAAAAAAAAAAARExQf/aAAgBAwEBPxCtjDqP/8QAFxEBAQEBAAAAAAAAAAAAAAAAAQAxEf/aAAgBAgEBPxBFus6Tt//EAB8QAQEAAgIBBQAAAAAAAAAAAAERACExQWFRcYGR0f/aAAgBAQABPxAuaBPPzkO1wyX7F4wkwXanfZrFQgeqE9JgS14vVOvrERIJomVBKwt2jebAeP0yVa8h1n//2Q==","aspectRatio":1,"src":"/static/ceb49c3c631485453e71e00d7f84b069/31709/IMG_0591.jpg","srcSet":"/static/ceb49c3c631485453e71e00d7f84b069/f340b/IMG_0591.jpg 28w,\n/static/ceb49c3c631485453e71e00d7f84b069/22d64/IMG_0591.jpg 55w,\n/static/ceb49c3c631485453e71e00d7f84b069/31709/IMG_0591.jpg 110w,\n/static/ceb49c3c631485453e71e00d7f84b069/aa249/IMG_0591.jpg 165w,\n/static/ceb49c3c631485453e71e00d7f84b069/0dc33/IMG_0591.jpg 220w,\n/static/ceb49c3c631485453e71e00d7f84b069/d8257/IMG_0591.jpg 1182w","srcWebp":"/static/ceb49c3c631485453e71e00d7f84b069/8678c/IMG_0591.webp","srcSetWebp":"/static/ceb49c3c631485453e71e00d7f84b069/59cda/IMG_0591.webp 28w,\n/static/ceb49c3c631485453e71e00d7f84b069/7da75/IMG_0591.webp 55w,\n/static/ceb49c3c631485453e71e00d7f84b069/8678c/IMG_0591.webp 110w,\n/static/ceb49c3c631485453e71e00d7f84b069/f282e/IMG_0591.webp 165w,\n/static/ceb49c3c631485453e71e00d7f84b069/a7b21/IMG_0591.webp 220w,\n/static/ceb49c3c631485453e71e00d7f84b069/63099/IMG_0591.webp 1182w","sizes":"(max-width: 110px) 100vw, 110px"}}}},"primary_tag":{"slug":"css","url":"https://backend.shahednasser.com/tag/css/","name":"CSS","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/photo-1610986603166-f78428624e76-2.jpeg","description":"Learn more about CSS through tutorials, articles, and tips.","meta_title":null,"meta_description":null,"featureImageSharp":{"base":"photo-1610986603166-f78428624e76-2.jpeg","publicURL":"/static/2e4062ead6b64acea03c5c5ba3437c96/photo-1610986603166-f78428624e76-2.jpeg","imageMeta":{"width":2000,"height":1352},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAOABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAIBAwX/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/aAAwDAQACEAMQAAABymIKxiv/xAAaEAACAgMAAAAAAAAAAAAAAAAAEQECEBIh/9oACAEBAAEFAqolalUcx//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABURAQEAAAAAAAAAAAAAAAAAAAAR/9oACAECAQE/AUf/xAAZEAACAwEAAAAAAAAAAAAAAAAQIQABEYH/2gAIAQEABj8CcVd0M//EABsQAAIDAAMAAAAAAAAAAAAAAAABESExEFGB/9oACAEBAAE/IdKGJM+nDWSDSdkH/9oADAMBAAIAAwAAABCL7//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QP//EABURAQEAAAAAAAAAAAAAAAAAAAEQ/9oACAECAQE/EAY//8QAGhABAQADAQEAAAAAAAAAAAAAAREAITEQYf/aAAgBAQABPxAsEuSsxwBHaV8nMjhCkPIbwwjTs8f/2Q==","aspectRatio":1.4772727272727273,"src":"/static/2e4062ead6b64acea03c5c5ba3437c96/d5c54/photo-1610986603166-f78428624e76-2.jpg","srcSet":"/static/2e4062ead6b64acea03c5c5ba3437c96/65d8c/photo-1610986603166-f78428624e76-2.jpg 260w,\n/static/2e4062ead6b64acea03c5c5ba3437c96/c5f21/photo-1610986603166-f78428624e76-2.jpg 520w,\n/static/2e4062ead6b64acea03c5c5ba3437c96/d5c54/photo-1610986603166-f78428624e76-2.jpg 1040w,\n/static/2e4062ead6b64acea03c5c5ba3437c96/81a53/photo-1610986603166-f78428624e76-2.jpg 1560w,\n/static/2e4062ead6b64acea03c5c5ba3437c96/4e5f3/photo-1610986603166-f78428624e76-2.jpg 2000w","srcWebp":"/static/2e4062ead6b64acea03c5c5ba3437c96/e4875/photo-1610986603166-f78428624e76-2.webp","srcSetWebp":"/static/2e4062ead6b64acea03c5c5ba3437c96/dc8f3/photo-1610986603166-f78428624e76-2.webp 260w,\n/static/2e4062ead6b64acea03c5c5ba3437c96/2db4b/photo-1610986603166-f78428624e76-2.webp 520w,\n/static/2e4062ead6b64acea03c5c5ba3437c96/e4875/photo-1610986603166-f78428624e76-2.webp 1040w,\n/static/2e4062ead6b64acea03c5c5ba3437c96/f5845/photo-1610986603166-f78428624e76-2.webp 1560w,\n/static/2e4062ead6b64acea03c5c5ba3437c96/49d6b/photo-1610986603166-f78428624e76-2.webp 2000w","sizes":"(max-width: 1040px) 100vw, 1040px"}}}},"tags":[{"slug":"css","url":"https://backend.shahednasser.com/tag/css/","name":"CSS","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/photo-1610986603166-f78428624e76-2.jpeg","description":"Learn more about CSS through tutorials, articles, and tips.","meta_title":null,"meta_description":null,"featureImageSharp":null},{"slug":"beginner","url":"https://backend.shahednasser.com/tag/beginner/","name":"Beginners","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/photo-1521185496955-15097b20c5fe-2.jpeg","description":"Tutorials, articles, and tips to help beginners accelerate their journey in programming.","meta_title":"Beginners","meta_description":"Tutorials, articles, and tips to help beginners accelerate their journey in programming.","featureImageSharp":null}],"plaintext":"CSS Grid Layout is immensely helpful in dividing up elements or the content of a\npage in rows and columns. It allows you to split up an area between components\nand define their size, position, placement, and more.\n\nIn this article, I'll go over the basics of CSS Grid for absolute beginners who\nare looking to understand it and grasp the concept to use it in their projects.\n\nWhy Use CSS Grid\nCSS Grids allow you to place items in a container while maintaining their layout\nand positions. With the Grid Layout, you have more control over where should\neach item be, what its width is, and how it should be placed in a container.\n\nThink of a webpage and how there's usually a navigation bar, a sidebar, and the\ncontent in the middle. A CSS Grid can help you achieve that sort of styling\neasily by dividing up the page into different sections where each element can\ntake place in the specified section.\n\nCSS Grids can also be used in elements in a webpage rather than the entire\nwebpage. Let's say you have a gallery and you want the images in the gallery to\nbe all of the same sizes. You also want a specific number of images per row. You\ncan control all of that using a CSS Grid.\n\nA lot of beginners find the concept of CSS Grid Layout to be confusing. This\narticle will hopefully help you understand the different properties that come\nwith CSS Grid and how you can use them.\n\nYour First Grid\nLet's say we have the following HTML:\n\n
\n

\n

\n

\n
\n\nWe want to make the div with the class container a grid where we can control the\nelements inside as explained earlier.\n\nAll we need to do is change the display property of the class container:\n\n.container {\n display: grid;\n}\n\nThis will make the element with the class container a grid element. If you test\nthis out, you'll see that you can see nothing. The reason behind that is the p \nelements in the .container grid don't have any elements in them or width or\nheight.\n\nAdd the following CSS:\n\n.container p {\n width: 100px;\n height: 100px;\n}\n\n.red {\n background-color: red;\n}\n\n.green {\n background-color: green;\n}\n\n.blue {\n background-color: blue;\n}\n\nThis will set the width and height of the p elements to 100px. It will also give\na different background color for each element.\n\nIf you check your grid now it should look something like this:\n\nThis is your first grid! As you can see, there's nothing fancy here as we\nhaven't yet used any grid properties to place the elements or control their\nsize.\n\nInstead of specifying the width and height of each element, you can also use \ngrid-auto-rows and grid-auto-columns on the grid element to specify the default\nheight and width of elements:\n\n.container {\n ...\n grid-auto-rows: 100px;\n grid-auto-columns: 100px;\n}\n\nElements Placements\nGrids consist of rows and columns. You can have as many rows or columns as you\nwant in a Grid, and you can assign your elements to certain placements in a\ngrid.\n\nColumns\nLet's say you want to place these 3 elements as just 3 items in a row. we can do\nthat  using the grid-template-columns property.\n\nThis property takes an n number of values, where n is the number of columns you\nwant in the grid and each value is the width of each column.\n\nFor example, if you want to have 3 columns in the grid each having their width\nas 100px you can use:\n\ngrid-template-columns: 100px 100px 100px;\n\nThis will divide the grid into 3 columns, and each column will be 100px.\n\nLet's say you want the second column to be 200px:\n\ngrid-template-columns: 100px 200px 100px;\n\nIf you also don't have a specific value to apply you can use the value auto:\n\ngrid-template-columns: auto auto auto;\n\nAlternatively, instead of repeating the values, you can use the repeat()\n[https://developer.mozilla.org/en-US/docs/Web/CSS/repeat()] function:\n\ngrid-template-columns: repeat(3, auto);\n\nThe repeat CSS function takes the first parameter the number of times an\nexpression should be repeated, and the second parameter the statement to repeat.\n\nLet's go back to our example, we'll place our elements in 3 columns, each having\nan automatic width.\n\nChange the properties of .container to the following:\n\n.container {\n display: grid;\n grid-template-columns: repeat(3, auto);\n}\n\nThis will ensure the grid has 3 c0lumns with each having their width set to auto\n.\n\nNext, remove the width property set on the p elements from earlier. It should\nonly have height now:\n\n.container p {\n height: 100px;\n}\n\nIf you check the grid now, it should have 3 elements with equal widths next to\neach other.\n\nGap Between Columns\nIn a lot of cases, you might not want columns to be right next to each other. To\nadd a gap between columns, you can use the property grid-column-gap which takes\nthe length of the gap between the columns as a value.\n\nLet's say we want to add a gap of 5px between our columns. Add the following\nproperty to .container:\n\ngrid-column-gap: 5px;\n\nThis will add a 5px space between the grid columns.\n\nPlacement in Columns\nYou can control the placement of items relative to columns using the \ngrid-column-start and grid-column-end properties. These properties allow you to\nspecify at which column an item in a grid should start, and/or at which column\nan item in a grid should end.\n\nThe value for grid-column-start and grid-column-end can be a number. In this\ncase, it will specify the column to start at and the column to end before.\n\nFor example, if you want to specify that the .red element should start in the\nbeginning and end before the 3rd column you use the following properties:\n\n.red {\n background-color: red;\n grid-column-start: 1;\n grid-column-end: 3;\n}\n\nNow, the .red element will span 2 columns and the .blue element will be pushed\nto the row below.\n\nAlternatively, you can provide a value to grid-column-start and grid-column-end \nin the format span n, where n is the number of columns to span. This does not\nspecify where exactly the column should start or end. Instead, it specifies that\nin its natural place it should take up n columns.\n\nIf we want to apply the same example, we can use the following properties for \n.red instead:\n\n.red {\n background-color: red;\n grid-column-start: span 2;\n}\n\nThis means the element should span 2 columns. This will result in the same\nlayout as shown previously.\n\nThese properties can be used to control the element placements even more. For\nexample, now that the blue element is on its own row let's place it at the end\nof it:\n\n.blue {\n background-color: blue;\n grid-column-start: 3;\n}\n\nNow, instead of the blue element just being shifted down outside of our control,\nwe specify exactly where it should be:\n\nRows\nYou just learned how to place and size our elements in the grid's columns. Next,\nyou'll learn how to do the same, but in rows.\n\nTo specify how many rows a grid has, you can use grid-template-rows. Similar to\ncolumns, the grid-template-rows takes n values, where n is the number of rows\nthe grid will have and the value is the height of each row.\n\nSo, if you want to have 2 rows of 100px height you can use the following:\n\ngrid-template-rows: 100px 100px;\n\nAlternatively, you can use the repeat function:\n\ngrid-template-rows: repeat(2, 100px);\n\nThis will create 2 rows each having 100px height.\n\nLet's go back to our example. In this section, we want to have 2 columns and 2\nrows. Change .container to the following:\n\n.container {\n display: grid;\n grid-template-columns: repeat(2, auto);\n grid-template-rows: repeat(2, 100px);\n grid-column-gap: 5px;\n}\n\nThis will create 2 columns of auto width and 2 rows of 100px height.\n\nNext, reset the rest of the styles that we performed earlier:\n\n.red {\n background-color: red;\n}\n\n.green {\n background-color: green;\n}\n\n.blue {\n background-color: blue;\n}\n\nThis will just set the background color of each of the child elements. Notice\nthat you don't need to set the height and width anymore of the elements as we're\napplying it using grid-template-columns and grid-template-rows.\n\nIf you check your grid now you should have 2 items in one row and an item on the\nsecond.\n\nGap Between Rows\nIn a lot of cases, you won't need the items in different rows right next to each\nother. You can add space between rows using grid-row-gap.\n\nLet's say we want to add a 5px gap between rows. Add the following property to\nthe .container class:\n\ngrid-row-gap: 5px;\n\nThis will add a 5px space between the rows in our grid.\n\nPlacement in Rows\nYou can use the grid layout to control the placement of elements in rows. To do\nthat, you can use the properties grid-row-start and grid-row-end.\n\nThe value of grid-row-start and grid-row-end can be a number. The value of \ngrid-row-start will be the row the element should start on, and the value of \ngrid-row-end will be the row the element should end before.\n\nFor example, to make sure that the red element spans 2 rows we can use the\nfollowing properties:\n\n.red {\n background-color: red;\n grid-row-start: 1;\n grid-row-end: 3;\n}\n\nAlternatively, you can provide a value to the 2 properties in the format span n \nwhere n is the number of rows the element should span.\n\nSo, instead of the previous properties used, you can use the following to make\nsure the red element spans 2 rows:\n\n.red {\n background-color: red;\n grid-row-start: span 2;\n}\n\nThis will result in the same layout.\n\nThese properties are not only helpful for changing how many rows an element\nspans. They can also be used to completely control where each element is placed.\n\nLet's say you want to place the blue column in the first row. You can apply the\nfollowing styling to do that:\n\n.blue {\n background-color: blue;\n grid-row-start: 1;\n}\n\nThis will result in the blue element being in the first row. However, as the\nplacement of elements have changed the red element will be on the right.\n\nTo ensure that the blue item is on the right and the red element remains on the\nleft, you can use the grid-column-start property:\n\n.blue {\n background-color: blue;\n grid-row-start: 1;\n grid-column-start: 2;\n}\n\nThis will retain the original placement of the red element, but the blue item\nwill be in the first column.\n\nAs you can see, you can use both properties for rows and columns to control many\naspects of positioning and sizing of a grid.\n\nGrid Areas\nInstead of controlling a grid as columns and rows, you can control a grid as\nareas.\n\nLet's say we want to implement a header, content, and sidebar layout. The green\nelement will be the header, the red will be the content, and the blue will be\nthe sidebar.\n\nFirst, start by giving the different element area names using the grid-area \nproperty:\n\n.red {\n background-color: red;\n grid-area: Content;\n}\n\n.green {\n background-color: green;\n grid-area: Header;\n}\n\n.blue {\n background-color: blue;\n grid-area: Sidebar;\n}\n\nThis gives the .red element the grid-area name Content, the .green element the\ngrid-area name Header, and the .blue element the grid-area Sidebar.\n\nNext, you use the grid-template-areas property on the grid container element to\ndetermine how these different areas should be distributed. The \ngrid-template-areas takes as a value n string values, where n is the number of\nrows in the grid layout you're creating. The value will be the name of the areas\nseparated by space. Each name specifies a column. So, if you want to have 2\ncolumns in your grid and you want the Header element to take 2 columns in a row,\nyou can use the value \"Header Header\" for the row.\n\nIn our example, we'll create 2 rows and 3 columns. The first row will just be\nthe Header which will span the 3 columns, and the second row will be the Content \nwhich will span 2 columns and the Sidebar which will be just one column:\n\n.container {\n display: grid;\n grid-template-areas: \"Header Header Header\" \n \"Content Content Sidebar\";\n grid-row-gap: 5px;\n grid-column-gap: 5px;\n grid-auto-rows: 100px;\n}\n\nSince we want three columns in the grid, each string value in \ngrid-template-areas should have 3 area names. The first string value is for the\nfirst row in the grid. As we just want the Header to occupy it the value will be\nthe Header repeated 3 times.\n\nThe second string value is for the second row. We want the Content area to span\n2 columns. So, in the string value we repeat the Content area twice then the \nSidebar.\n\nNotice that each string value is wrapped in \" and string values are separated by\na space.\n\nWe also add a gap between rows and columns using grid-row-gap and \ngrid-column-gap. We also set the default row height to 100px using \ngrid-auto-rows.\n\nThis will result in the following layout:\n\nfr Unit\nTo ensure that columns or rows in a grid use the same height or width, you can\nuse the fr Unit\n[https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#fixed_and_flexible_track_sizes]\n. For example, to create 3 columns each having the same width:\n\n.container {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n grid-template-rows: 100px;\n}\n\nConclusion\nIn this tutorial, you learned how CSS Grid Layout works in terms of rows,\ncolumns, and areas. Using a Grid Layout in CSS will help you control the size\nand placement of elements in your page or a container element.","html":"

CSS Grid Layout is immensely helpful in dividing up elements or the content of a page in rows and columns. It allows you to split up an area between components and define their size, position, placement, and more.

In this article, I'll go over the basics of CSS Grid for absolute beginners who are looking to understand it and grasp the concept to use it in their projects.

Why Use CSS Grid

CSS Grids allow you to place items in a container while maintaining their layout and positions. With the Grid Layout, you have more control over where should each item be, what its width is, and how it should be placed in a container.

Think of a webpage and how there's usually a navigation bar, a sidebar, and the content in the middle. A CSS Grid can help you achieve that sort of styling easily by dividing up the page into different sections where each element can take place in the specified section.

CSS Grids can also be used in elements in a webpage rather than the entire webpage. Let's say you have a gallery and you want the images in the gallery to be all of the same sizes. You also want a specific number of images per row. You can control all of that using a CSS Grid.

A lot of beginners find the concept of CSS Grid Layout to be confusing. This article will hopefully help you understand the different properties that come with CSS Grid and how you can use them.

Your First Grid

Let's say we have the following HTML:

<div class=\"container\">\n  <p class=\"red\"></p>\n  <p class=\"green\"></p>\n  <p class=\"blue\"></p>\n</div>

We want to make the div with the class container a grid where we can control the elements inside as explained earlier.

All we need to do is change the display property of the class container:

.container {\n    display: grid;\n}

This will make the element with the class container a grid element. If you test this out, you'll see that you can see nothing. The reason behind that is the p elements in the .container grid don't have any elements in them or width or height.

Add the following CSS:

.container p {\n  width: 100px;\n  height: 100px;\n}\n\n.red {\n  background-color: red;\n}\n\n.green {\n  background-color: green;\n}\n\n.blue {\n  background-color: blue;\n}

This will set the width and height of the p elements to 100px. It will also give a different background color for each element.

If you check your grid now it should look something like this:

This is your first grid! As you can see, there's nothing fancy here as we haven't yet used any grid properties to place the elements or control their size.

Instead of specifying the width and height of each element, you can also use grid-auto-rows and grid-auto-columns on the grid element to specify the default height and width of elements:

.container {\n    ...\n    grid-auto-rows: 100px;\n    grid-auto-columns: 100px;\n}

Elements Placements

Grids consist of rows and columns. You can have as many rows or columns as you want in a Grid, and you can assign your elements to certain placements in a grid.

Columns

Let's say you want to place these 3 elements as just 3 items in a row. we can do that  using the grid-template-columns property.

This property takes an n number of values, where n is the number of columns you want in the grid and each value is the width of each column.

For example, if you want to have 3 columns in the grid each having their width as 100px you can use:

grid-template-columns: 100px 100px 100px;

This will divide the grid into 3 columns, and each column will be 100px.

Let's say you want the second column to be 200px:

grid-template-columns: 100px 200px 100px;

If you also don't have a specific value to apply you can use the value auto:

grid-template-columns: auto auto auto;

Alternatively, instead of repeating the values, you can use the repeat() function:

grid-template-columns: repeat(3, auto);

The repeat CSS function takes the first parameter the number of times an expression should be repeated, and the second parameter the statement to repeat.

Let's go back to our example, we'll place our elements in 3 columns, each having an automatic width.

Change the properties of .container to the following:

.container {\n  display: grid;\n  grid-template-columns: repeat(3, auto);\n}

This will ensure the grid has 3 c0lumns with each having their width set to auto.

Next, remove the width property set on the p elements from earlier. It should only have height now:

.container p {\n  height: 100px;\n}

If you check the grid now, it should have 3 elements with equal widths next to each other.

Gap Between Columns

In a lot of cases, you might not want columns to be right next to each other. To add a gap between columns, you can use the property grid-column-gap which takes the length of the gap between the columns as a value.

Let's say we want to add a gap of 5px between our columns. Add the following property to .container:

grid-column-gap: 5px;

This will add a 5px space between the grid columns.

Placement in Columns

You can control the placement of items relative to columns using the grid-column-start and grid-column-end properties. These properties allow you to specify at which column an item in a grid should start, and/or at which column an item in a grid should end.

The value for grid-column-start and grid-column-end can be a number. In this case, it will specify the column to start at and the column to end before.

For example, if you want to specify that the .red element should start in the beginning and end before the 3rd column you use the following properties:

.red {\n  background-color: red;\n  grid-column-start: 1;\n  grid-column-end: 3;\n}

Now, the .red element will span 2 columns and the .blue element will be pushed to the row below.

Alternatively, you can provide a value to grid-column-start and grid-column-end in the format span n, where n is the number of columns to span. This does not specify where exactly the column should start or end. Instead, it specifies that in its natural place it should take up n columns.

If we want to apply the same example, we can use the following properties for .red instead:

.red {\n  background-color: red;\n  grid-column-start: span 2;\n}

This means the element should span 2 columns. This will result in the same layout as shown previously.

These properties can be used to control the element placements even more. For example, now that the blue element is on its own row let's place it at the end of it:

.blue {\n  background-color: blue;\n  grid-column-start: 3;\n}

Now, instead of the blue element just being shifted down outside of our control, we specify exactly where it should be:

Rows

You just learned how to place and size our elements in the grid's columns. Next, you'll learn how to do the same, but in rows.

To specify how many rows a grid has, you can use grid-template-rows. Similar to columns, the grid-template-rows takes n values, where n is the number of rows the grid will have and the value is the height of each row.

So, if you want to have 2 rows of 100px height you can use the following:

grid-template-rows: 100px 100px;

Alternatively, you can use the repeat function:

grid-template-rows: repeat(2, 100px);

This will create 2 rows each having 100px height.

Let's go back to our example. In this section, we want to have 2 columns and 2 rows. Change .container to the following:

.container {\n  display: grid;\n  grid-template-columns: repeat(2, auto);\n  grid-template-rows: repeat(2, 100px);\n  grid-column-gap: 5px;\n}

This will create 2 columns of auto width and 2 rows of 100px height.

Next, reset the rest of the styles that we performed earlier:

.red {\n  background-color: red;\n}\n\n.green {\n  background-color: green;\n}\n\n.blue {\n  background-color: blue;\n}

This will just set the background color of each of the child elements. Notice that you don't need to set the height and width anymore of the elements as we're applying it using grid-template-columns and grid-template-rows.

If you check your grid now you should have 2 items in one row and an item on the second.

Gap Between Rows

In a lot of cases, you won't need the items in different rows right next to each other. You can add space between rows using grid-row-gap.

Let's say we want to add a 5px gap between rows. Add the following property to the .container class:

grid-row-gap: 5px;

This will add a 5px space between the rows in our grid.

Placement in Rows

You can use the grid layout to control the placement of elements in rows. To do that, you can use the properties grid-row-start and grid-row-end.

The value of grid-row-start and grid-row-end can be a number. The value of grid-row-start will be the row the element should start on, and the value of grid-row-end will be the row the element should end before.

For example, to make sure that the red element spans 2 rows we can use the following properties:

.red {\n  background-color: red;\n  grid-row-start: 1;\n  grid-row-end: 3;\n}

Alternatively, you can provide a value to the 2 properties in the format span n where n is the number of rows the element should span.

So, instead of the previous properties used, you can use the following to make sure the red element spans 2 rows:

.red {\n  background-color: red;\n  grid-row-start: span 2;\n}

This will result in the same layout.

These properties are not only helpful for changing how many rows an element spans. They can also be used to completely control where each element is placed.

Let's say you want to place the blue column in the first row. You can apply the following styling to do that:

.blue {\n  background-color: blue;\n  grid-row-start: 1;\n}

This will result in the blue element being in the first row. However, as the placement of elements have changed the red element will be on the right.

To ensure that the blue item is on the right and the red element remains on the left, you can use the grid-column-start property:

.blue {\n  background-color: blue;\n  grid-row-start: 1;\n  grid-column-start: 2;\n}

This will retain the original placement of the red element, but the blue item will be in the first column.

As you can see, you can use both properties for rows and columns to control many aspects of positioning and sizing of a grid.

Grid Areas

Instead of controlling a grid as columns and rows, you can control a grid as areas.

Let's say we want to implement a header, content, and sidebar layout. The green element will be the header, the red will be the content, and the blue will be the sidebar.

First, start by giving the different element area names using the grid-area property:

.red {\n  background-color: red;\n  grid-area: Content;\n}\n\n.green {\n  background-color: green;\n  grid-area: Header;\n}\n\n.blue {\n  background-color: blue;\n  grid-area: Sidebar;\n}

This gives the .red element the grid-area name Content, the .green element the grid-area name Header, and the .blue element the grid-area Sidebar.

Next, you use the grid-template-areas property on the grid container element to determine how these different areas should be distributed. The grid-template-areas takes as a value n string values, where n is the number of rows in the grid layout you're creating. The value will be the name of the areas separated by space. Each name specifies a column. So, if you want to have 2 columns in your grid and you want the Header element to take 2 columns in a row, you can use the value \"Header Header\" for the row.

In our example, we'll create 2 rows and 3 columns. The first row will just be the Header which will span the 3 columns, and the second row will be the Content which will span 2 columns and the Sidebar which will be just one column:

.container {\n  display: grid;\n  grid-template-areas: \"Header Header Header\" \n    \"Content Content Sidebar\";\n  grid-row-gap: 5px;\n  grid-column-gap: 5px;\n  grid-auto-rows: 100px;\n}

Since we want three columns in the grid, each string value in grid-template-areas should have 3 area names. The first string value is for the first row in the grid. As we just want the Header to occupy it the value will be the Header repeated 3 times.

The second string value is for the second row. We want the Content area to span 2 columns. So, in the string value we repeat the Content area twice then the Sidebar.

Notice that each string value is wrapped in \" and string values are separated by a space.

We also add a gap between rows and columns using grid-row-gap and grid-column-gap. We also set the default row height to 100px using grid-auto-rows.

This will result in the following layout:

fr Unit

To ensure that columns or rows in a grid use the same height or width, you can use the fr Unit. For example, to create 3 columns each having the same width:

.container {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  grid-template-rows: 100px;\n}

Conclusion

In this tutorial, you learned how CSS Grid Layout works in terms of rows, columns, and areas. Using a Grid Layout in CSS will help you control the size and placement of elements in your page or a container element.

","url":"https://backend.shahednasser.com/css-grid-tutorial-for-beginners/","canonical_url":null,"uuid":"a0c875ea-35e2-4123-b961-787e97860554","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"61d2b40c61dbd80628bf99b1","reading_time":10,"send_email_when_published":null,"email_subject":null,"childHtmlRehype":{"html":"

CSS Grid Layout is immensely helpful in dividing up elements or the content of a page in rows and columns. It allows you to split up an area between components and define their size, position, placement, and more.

In this article, I'll go over the basics of CSS Grid for absolute beginners who are looking to understand it and grasp the concept to use it in their projects.

Why Use CSS Grid

CSS Grids allow you to place items in a container while maintaining their layout and positions. With the Grid Layout, you have more control over where should each item be, what its width is, and how it should be placed in a container.

Think of a webpage and how there's usually a navigation bar, a sidebar, and the content in the middle. A CSS Grid can help you achieve that sort of styling easily by dividing up the page into different sections where each element can take place in the specified section.

CSS Grids can also be used in elements in a webpage rather than the entire webpage. Let's say you have a gallery and you want the images in the gallery to be all of the same sizes. You also want a specific number of images per row. You can control all of that using a CSS Grid.

A lot of beginners find the concept of CSS Grid Layout to be confusing. This article will hopefully help you understand the different properties that come with CSS Grid and how you can use them.

Your First Grid

Let's say we have the following HTML:

<div class=\"container\">\n  <p class=\"red\"></p>\n  <p class=\"green\"></p>\n  <p class=\"blue\"></p>\n</div>

We want to make the div with the class container a grid where we can control the elements inside as explained earlier.

All we need to do is change the display property of the class container:

.container {\n    display: grid;\n}

This will make the element with the class container a grid element. If you test this out, you'll see that you can see nothing. The reason behind that is the p elements in the .container grid don't have any elements in them or width or height.

Add the following CSS:

.container p {\n  width: 100px;\n  height: 100px;\n}\n\n.red {\n  background-color: red;\n}\n\n.green {\n  background-color: green;\n}\n\n.blue {\n  background-color: blue;\n}

This will set the width and height of the p elements to 100px. It will also give a different background color for each element.

If you check your grid now it should look something like this:

\"\"

This is your first grid! As you can see, there's nothing fancy here as we haven't yet used any grid properties to place the elements or control their size.

Instead of specifying the width and height of each element, you can also use grid-auto-rows and grid-auto-columns on the grid element to specify the default height and width of elements:

.container {\n    ...\n    grid-auto-rows: 100px;\n    grid-auto-columns: 100px;\n}

Elements Placements

Grids consist of rows and columns. You can have as many rows or columns as you want in a Grid, and you can assign your elements to certain placements in a grid.

Columns

Let's say you want to place these 3 elements as just 3 items in a row. we can do that  using the grid-template-columns property.

This property takes an n number of values, where n is the number of columns you want in the grid and each value is the width of each column.

For example, if you want to have 3 columns in the grid each having their width as 100px you can use:

grid-template-columns: 100px 100px 100px;

This will divide the grid into 3 columns, and each column will be 100px.

Let's say you want the second column to be 200px:

grid-template-columns: 100px 200px 100px;

If you also don't have a specific value to apply you can use the value auto:

grid-template-columns: auto auto auto;

Alternatively, instead of repeating the values, you can use the repeat() function:

grid-template-columns: repeat(3, auto);

The repeat CSS function takes the first parameter the number of times an expression should be repeated, and the second parameter the statement to repeat.

Let's go back to our example, we'll place our elements in 3 columns, each having an automatic width.

Change the properties of .container to the following:

.container {\n  display: grid;\n  grid-template-columns: repeat(3, auto);\n}

This will ensure the grid has 3 c0lumns with each having their width set to auto.

Next, remove the width property set on the p elements from earlier. It should only have height now:

.container p {\n  height: 100px;\n}

If you check the grid now, it should have 3 elements with equal widths next to each other.

\"\"

Gap Between Columns

In a lot of cases, you might not want columns to be right next to each other. To add a gap between columns, you can use the property grid-column-gap which takes the length of the gap between the columns as a value.

Let's say we want to add a gap of 5px between our columns. Add the following property to .container:

grid-column-gap: 5px;

This will add a 5px space between the grid columns.

\"\"

Placement in Columns

You can control the placement of items relative to columns using the grid-column-start and grid-column-end properties. These properties allow you to specify at which column an item in a grid should start, and/or at which column an item in a grid should end.

The value for grid-column-start and grid-column-end can be a number. In this case, it will specify the column to start at and the column to end before.

For example, if you want to specify that the .red element should start in the beginning and end before the 3rd column you use the following properties:

.red {\n  background-color: red;\n  grid-column-start: 1;\n  grid-column-end: 3;\n}

Now, the .red element will span 2 columns and the .blue element will be pushed to the row below.

\"\"

Alternatively, you can provide a value to grid-column-start and grid-column-end in the format span n, where n is the number of columns to span. This does not specify where exactly the column should start or end. Instead, it specifies that in its natural place it should take up n columns.

If we want to apply the same example, we can use the following properties for .red instead:

.red {\n  background-color: red;\n  grid-column-start: span 2;\n}

This means the element should span 2 columns. This will result in the same layout as shown previously.

These properties can be used to control the element placements even more. For example, now that the blue element is on its own row let's place it at the end of it:

.blue {\n  background-color: blue;\n  grid-column-start: 3;\n}

Now, instead of the blue element just being shifted down outside of our control, we specify exactly where it should be:

\"\"

Rows

You just learned how to place and size our elements in the grid's columns. Next, you'll learn how to do the same, but in rows.

To specify how many rows a grid has, you can use grid-template-rows. Similar to columns, the grid-template-rows takes n values, where n is the number of rows the grid will have and the value is the height of each row.

So, if you want to have 2 rows of 100px height you can use the following:

grid-template-rows: 100px 100px;

Alternatively, you can use the repeat function:

grid-template-rows: repeat(2, 100px);

This will create 2 rows each having 100px height.

Let's go back to our example. In this section, we want to have 2 columns and 2 rows. Change .container to the following:

.container {\n  display: grid;\n  grid-template-columns: repeat(2, auto);\n  grid-template-rows: repeat(2, 100px);\n  grid-column-gap: 5px;\n}

This will create 2 columns of auto width and 2 rows of 100px height.

Next, reset the rest of the styles that we performed earlier:

.red {\n  background-color: red;\n}\n\n.green {\n  background-color: green;\n}\n\n.blue {\n  background-color: blue;\n}

This will just set the background color of each of the child elements. Notice that you don't need to set the height and width anymore of the elements as we're applying it using grid-template-columns and grid-template-rows.

If you check your grid now you should have 2 items in one row and an item on the second.

\"\"

Gap Between Rows

In a lot of cases, you won't need the items in different rows right next to each other. You can add space between rows using grid-row-gap.

Let's say we want to add a 5px gap between rows. Add the following property to the .container class:

grid-row-gap: 5px;

This will add a 5px space between the rows in our grid.

\"\"

Placement in Rows

You can use the grid layout to control the placement of elements in rows. To do that, you can use the properties grid-row-start and grid-row-end.

The value of grid-row-start and grid-row-end can be a number. The value of grid-row-start will be the row the element should start on, and the value of grid-row-end will be the row the element should end before.

For example, to make sure that the red element spans 2 rows we can use the following properties:

.red {\n  background-color: red;\n  grid-row-start: 1;\n  grid-row-end: 3;\n}
\"\"

Alternatively, you can provide a value to the 2 properties in the format span n where n is the number of rows the element should span.

So, instead of the previous properties used, you can use the following to make sure the red element spans 2 rows:

.red {\n  background-color: red;\n  grid-row-start: span 2;\n}

This will result in the same layout.

These properties are not only helpful for changing how many rows an element spans. They can also be used to completely control where each element is placed.

Let's say you want to place the blue column in the first row. You can apply the following styling to do that:

.blue {\n  background-color: blue;\n  grid-row-start: 1;\n}

This will result in the blue element being in the first row. However, as the placement of elements have changed the red element will be on the right.

\"\"

To ensure that the blue item is on the right and the red element remains on the left, you can use the grid-column-start property:

.blue {\n  background-color: blue;\n  grid-row-start: 1;\n  grid-column-start: 2;\n}

This will retain the original placement of the red element, but the blue item will be in the first column.

\"\"

As you can see, you can use both properties for rows and columns to control many aspects of positioning and sizing of a grid.

Grid Areas

Instead of controlling a grid as columns and rows, you can control a grid as areas.

Let's say we want to implement a header, content, and sidebar layout. The green element will be the header, the red will be the content, and the blue will be the sidebar.

First, start by giving the different element area names using the grid-area property:

.red {\n  background-color: red;\n  grid-area: Content;\n}\n\n.green {\n  background-color: green;\n  grid-area: Header;\n}\n\n.blue {\n  background-color: blue;\n  grid-area: Sidebar;\n}

This gives the .red element the grid-area name Content, the .green element the grid-area name Header, and the .blue element the grid-area Sidebar.

Next, you use the grid-template-areas property on the grid container element to determine how these different areas should be distributed. The grid-template-areas takes as a value n string values, where n is the number of rows in the grid layout you're creating. The value will be the name of the areas separated by space. Each name specifies a column. So, if you want to have 2 columns in your grid and you want the Header element to take 2 columns in a row, you can use the value \"Header Header\" for the row.

In our example, we'll create 2 rows and 3 columns. The first row will just be the Header which will span the 3 columns, and the second row will be the Content which will span 2 columns and the Sidebar which will be just one column:

.container {\n  display: grid;\n  grid-template-areas: \"Header Header Header\" \n    \"Content Content Sidebar\";\n  grid-row-gap: 5px;\n  grid-column-gap: 5px;\n  grid-auto-rows: 100px;\n}

Since we want three columns in the grid, each string value in grid-template-areas should have 3 area names. The first string value is for the first row in the grid. As we just want the Header to occupy it the value will be the Header repeated 3 times.

The second string value is for the second row. We want the Content area to span 2 columns. So, in the string value we repeat the Content area twice then the Sidebar.

Notice that each string value is wrapped in \" and string values are separated by a space.

We also add a gap between rows and columns using grid-row-gap and grid-column-gap. We also set the default row height to 100px using grid-auto-rows.

This will result in the following layout:

\"\"

fr Unit

To ensure that columns or rows in a grid use the same height or width, you can use the fr Unit. For example, to create 3 columns each having the same width:

.container {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  grid-template-rows: 100px;\n}

Conclusion

In this tutorial, you learned how CSS Grid Layout works in terms of rows, columns, and areas. Using a Grid Layout in CSS will help you control the size and placement of elements in your page or a container element.

","htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"CSS Grid Layout is immensely helpful in dividing up elements or the content of a page in rows and columns. It allows you to split up an area between components and define their size, position, placement, and more."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In this article, I'll go over the basics of CSS Grid for absolute beginners who are looking to understand it and grasp the concept to use it in their projects."}]},{"type":"element","tagName":"h2","properties":{"id":"why-use-css-grid"},"children":[{"type":"text","value":"Why Use CSS Grid"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"CSS Grids allow you to place items in a container while maintaining their layout and positions. With the Grid Layout, you have more control over where should each item be, what its width is, and how it should be placed in a container."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Think of a webpage and how there's usually a navigation bar, a sidebar, and the content in the middle. A CSS Grid can help you achieve that sort of styling easily by dividing up the page into different sections where each element can take place in the specified section."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"CSS Grids can also be used in elements in a webpage rather than the entire webpage. Let's say you have a gallery and you want the images in the gallery to be all of the same sizes. You also want a specific number of images per row. You can control all of that using a CSS Grid."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"A lot of beginners find the concept of CSS Grid Layout to be confusing. This article will hopefully help you understand the different properties that come with CSS Grid and how you can use them."}]},{"type":"element","tagName":"h2","properties":{"id":"your-first-grid"},"children":[{"type":"text","value":"Your First Grid"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Let's say we have the following HTML:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"html"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-html"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-html"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"div"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"class"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"container"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"p"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"class"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"red"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":""}]}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"p"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"class"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"green"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":""}]}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"p"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"class"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"blue"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":""}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":""}]}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"We want to make the div with the class "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"container"}]},{"type":"text","value":" a grid where we can control the elements inside as explained earlier."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"All we need to do is change the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"display"}]},{"type":"text","value":" property of the class "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"container"}]},{"type":"text","value":":"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".container"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"display"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" grid"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This will make the element with the class "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"container"}]},{"type":"text","value":" a grid element. If you test this out, you'll see that you can see nothing. The reason behind that is the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"p"}]},{"type":"text","value":" elements in the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":".container"}]},{"type":"text","value":" grid don't have any elements in them or width or height."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Add the following CSS:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".container p"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"width"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 100px"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"height"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 100px"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".red"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"background-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" red"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".green"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"background-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" green"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".blue"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"background-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" blue"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This will set the width and height of the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"p"}]},{"type":"text","value":" elements to "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"100px"}]},{"type":"text","value":". It will also give a different background color for each element."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you check your grid now it should look something like this:"}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://backend.shahednasser.com/content/images/2022/01/Screen-Shot-2022-01-03-at-10.40.24-AM.png","className":["kg-image"],"alt":"","loading":"lazy","width":502,"height":794},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This is your first grid! As you can see, there's nothing fancy here as we haven't yet used any grid properties to place the elements or control their size."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Instead of specifying the width and height of each element, you can also use "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"grid-auto-rows"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"grid-auto-columns"}]},{"type":"text","value":" on the grid element to specify the default height and width of elements:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".container"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n ...\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"grid-auto-rows"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 100px"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"grid-auto-columns"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 100px"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"h2","properties":{"id":"elements-placements"},"children":[{"type":"text","value":"Elements Placements"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Grids consist of rows and columns. You can have as many rows or columns as you want in a Grid, and you can assign your elements to certain placements in a grid."}]},{"type":"element","tagName":"h2","properties":{"id":"columns"},"children":[{"type":"text","value":"Columns"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Let's say you want to place these 3 elements as just 3 items in a row. we can do that  using the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"grid-template-columns"}]},{"type":"text","value":" property."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This property takes an "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"n"}]},{"type":"text","value":" number of values, where "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"n"}]},{"type":"text","value":" is the number of columns you want in the grid and each value is the width of each column."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For example, if you want to have 3 columns in the grid each having their width as "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"100px"}]},{"type":"text","value":" you can use:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"grid-template-columns"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 100px 100px 100px"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This will divide the grid into 3 columns, and each column will be "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"100px"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Let's say you want the second column to be 200px:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"grid-template-columns"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 100px 200px 100px"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you also don't have a specific value to apply you can use the value "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"auto"}]},{"type":"text","value":":"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"grid-template-columns"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" auto auto auto"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Alternatively, instead of repeating the values, you can use the "},{"type":"element","tagName":"a","properties":{"href":"https://developer.mozilla.org/en-US/docs/Web/CSS/repeat()"},"children":[{"type":"text","value":"repeat()"}]},{"type":"text","value":" function:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"grid-template-columns"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"repeat"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"3"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" auto"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"repeat"}]},{"type":"text","value":" CSS function takes the first parameter the number of times an expression should be repeated, and the second parameter the statement to repeat."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Let's go back to our example, we'll place our elements in 3 columns, each having an automatic width."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Change the properties of "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":".container"}]},{"type":"text","value":" to the following:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".container"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"display"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" grid"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"grid-template-columns"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"repeat"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"3"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" auto"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This will ensure the grid has 3 c0lumns with each having their width set to "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"auto"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Next, remove the width property set on the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"p"}]},{"type":"text","value":" elements from earlier. It should only have height now:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".container p"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"height"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 100px"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you check the grid now, it should have 3 elements with equal widths next to each other."}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://backend.shahednasser.com/content/images/2022/01/Screen-Shot-2022-01-03-at-10.56.04-AM.png","className":["kg-image"],"alt":"","loading":"lazy","width":2000,"height":300,"srcSet":["https://backend.shahednasser.com/content/images/size/w600/2022/01/Screen-Shot-2022-01-03-at-10.56.04-AM.png 600w","https://backend.shahednasser.com/content/images/size/w1000/2022/01/Screen-Shot-2022-01-03-at-10.56.04-AM.png 1000w","https://backend.shahednasser.com/content/images/size/w1600/2022/01/Screen-Shot-2022-01-03-at-10.56.04-AM.png 1600w","https://backend.shahednasser.com/content/images/2022/01/Screen-Shot-2022-01-03-at-10.56.04-AM.png 2042w"],"sizes":"(min-width: 720px) 720px"},"children":[]}]},{"type":"element","tagName":"h3","properties":{"id":"gap-between-columns"},"children":[{"type":"text","value":"Gap Between Columns"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In a lot of cases, you might not want columns to be right next to each other. To add a gap between columns, you can use the property "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"grid-column-gap"}]},{"type":"text","value":" which takes the length of the gap between the columns as a value."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Let's say we want to add a gap of "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"5px"}]},{"type":"text","value":" between our columns. Add the following property to "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":".container"}]},{"type":"text","value":":"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"grid-column-gap"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 5px"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This will add a "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"5px"}]},{"type":"text","value":" space between the grid columns."}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://backend.shahednasser.com/content/images/2022/01/Screen-Shot-2022-01-03-at-10.59.03-AM.png","className":["kg-image"],"alt":"","loading":"lazy","width":2000,"height":259,"srcSet":["https://backend.shahednasser.com/content/images/size/w600/2022/01/Screen-Shot-2022-01-03-at-10.59.03-AM.png 600w","https://backend.shahednasser.com/content/images/size/w1000/2022/01/Screen-Shot-2022-01-03-at-10.59.03-AM.png 1000w","https://backend.shahednasser.com/content/images/size/w1600/2022/01/Screen-Shot-2022-01-03-at-10.59.03-AM.png 1600w","https://backend.shahednasser.com/content/images/2022/01/Screen-Shot-2022-01-03-at-10.59.03-AM.png 2040w"],"sizes":"(min-width: 720px) 720px"},"children":[]}]},{"type":"element","tagName":"h3","properties":{"id":"placement-in-columns"},"children":[{"type":"text","value":"Placement in Columns"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can control the placement of items relative to columns using the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"grid-column-start"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"grid-column-end"}]},{"type":"text","value":" properties. These properties allow you to specify at which column an item in a grid should start, and/or at which column an item in a grid should end."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The value for "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"grid-column-start"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"grid-column-end"}]},{"type":"text","value":" can be a number. In this case, it will specify the column to start at and the column to end before."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For example, if you want to specify that the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":".red"}]},{"type":"text","value":" element should start in the beginning and end before the 3rd column you use the following properties:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".red"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"background-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" red"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"grid-column-start"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 1"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"grid-column-end"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 3"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Now, the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":".red"}]},{"type":"text","value":" element will span 2 columns and the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":".blue"}]},{"type":"text","value":" element will be pushed to the row below."}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://backend.shahednasser.com/content/images/2022/01/Screen-Shot-2022-01-03-at-11.04.33-AM.png","className":["kg-image"],"alt":"","loading":"lazy","width":2000,"height":516,"srcSet":["https://backend.shahednasser.com/content/images/size/w600/2022/01/Screen-Shot-2022-01-03-at-11.04.33-AM.png 600w","https://backend.shahednasser.com/content/images/size/w1000/2022/01/Screen-Shot-2022-01-03-at-11.04.33-AM.png 1000w","https://backend.shahednasser.com/content/images/size/w1600/2022/01/Screen-Shot-2022-01-03-at-11.04.33-AM.png 1600w","https://backend.shahednasser.com/content/images/2022/01/Screen-Shot-2022-01-03-at-11.04.33-AM.png 2038w"],"sizes":"(min-width: 720px) 720px"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Alternatively, you can provide a value to "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"grid-column-start"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"grid-column-end"}]},{"type":"text","value":" in the format "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"span n"}]},{"type":"text","value":", where "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"n"}]},{"type":"text","value":" is the number of columns to span. This does not specify where exactly the column should start or end. Instead, it specifies that in its natural place it should take up "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"n"}]},{"type":"text","value":" columns."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If we want to apply the same example, we can use the following properties for "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":".red"}]},{"type":"text","value":" instead:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".red"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"background-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" red"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"grid-column-start"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" span 2"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This means the element should span 2 columns. This will result in the same layout as shown previously."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"These properties can be used to control the element placements even more. For example, now that the blue element is on its own row let's place it at the end of it:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".blue"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"background-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" blue"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"grid-column-start"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 3"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Now, instead of the blue element just being shifted down outside of our control, we specify exactly where it should be:"}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://backend.shahednasser.com/content/images/2022/01/Screen-Shot-2022-01-03-at-11.09.59-AM.png","className":["kg-image"],"alt":"","loading":"lazy","width":2000,"height":573,"srcSet":["https://backend.shahednasser.com/content/images/size/w600/2022/01/Screen-Shot-2022-01-03-at-11.09.59-AM.png 600w","https://backend.shahednasser.com/content/images/size/w1000/2022/01/Screen-Shot-2022-01-03-at-11.09.59-AM.png 1000w","https://backend.shahednasser.com/content/images/size/w1600/2022/01/Screen-Shot-2022-01-03-at-11.09.59-AM.png 1600w","https://backend.shahednasser.com/content/images/2022/01/Screen-Shot-2022-01-03-at-11.09.59-AM.png 2040w"],"sizes":"(min-width: 720px) 720px"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"rows"},"children":[{"type":"text","value":"Rows"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You just learned how to place and size our elements in the grid's columns. Next, you'll learn how to do the same, but in rows."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To specify how many rows a grid has, you can use "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"grid-template-rows"}]},{"type":"text","value":". Similar to columns, the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"grid-template-rows"}]},{"type":"text","value":" takes "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"n"}]},{"type":"text","value":" values, where "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"n"}]},{"type":"text","value":" is the number of rows the grid will have and the value is the height of each row."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"So, if you want to have 2 rows of "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"100px"}]},{"type":"text","value":" height you can use the following:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"grid-template-rows"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 100px 100px"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Alternatively, you can use the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"repeat"}]},{"type":"text","value":" function:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"grid-template-rows"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"repeat"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"2"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" 100px"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This will create 2 rows each having 100px height."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Let's go back to our example. In this section, we want to have 2 columns and 2 rows. Change "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":".container"}]},{"type":"text","value":" to the following:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".container"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"display"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" grid"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"grid-template-columns"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"repeat"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"2"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" auto"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"grid-template-rows"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"repeat"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"2"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" 100px"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"grid-column-gap"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 5px"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This will create 2 columns of "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"auto"}]},{"type":"text","value":" width and 2 rows of "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"100px"}]},{"type":"text","value":" height."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Next, reset the rest of the styles that we performed earlier:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".red"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"background-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" red"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".green"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"background-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" green"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".blue"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"background-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" blue"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This will just set the background color of each of the child elements. Notice that you don't need to set the height and width anymore of the elements as we're applying it using "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"grid-template-columns"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"grid-template-rows"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you check your grid now you should have 2 items in one row and an item on the second."}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://backend.shahednasser.com/content/images/2022/01/Screen-Shot-2022-01-03-at-11.19.42-AM.png","className":["kg-image"],"alt":"","loading":"lazy","width":2000,"height":429,"srcSet":["https://backend.shahednasser.com/content/images/size/w600/2022/01/Screen-Shot-2022-01-03-at-11.19.42-AM.png 600w","https://backend.shahednasser.com/content/images/size/w1000/2022/01/Screen-Shot-2022-01-03-at-11.19.42-AM.png 1000w","https://backend.shahednasser.com/content/images/size/w1600/2022/01/Screen-Shot-2022-01-03-at-11.19.42-AM.png 1600w","https://backend.shahednasser.com/content/images/2022/01/Screen-Shot-2022-01-03-at-11.19.42-AM.png 2034w"],"sizes":"(min-width: 720px) 720px"},"children":[]}]},{"type":"element","tagName":"h3","properties":{"id":"gap-between-rows"},"children":[{"type":"text","value":"Gap Between Rows"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In a lot of cases, you won't need the items in different rows right next to each other. You can add space between rows using "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"grid-row-gap"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Let's say we want to add a "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"5px"}]},{"type":"text","value":" gap between rows. Add the following property to the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":".container"}]},{"type":"text","value":" class:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"grid-row-gap"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 5px"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This will add a "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"5px"}]},{"type":"text","value":" space between the rows in our grid."}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://backend.shahednasser.com/content/images/2022/01/Screen-Shot-2022-01-03-at-11.21.35-AM.png","className":["kg-image"],"alt":"","loading":"lazy","width":2000,"height":430,"srcSet":["https://backend.shahednasser.com/content/images/size/w600/2022/01/Screen-Shot-2022-01-03-at-11.21.35-AM.png 600w","https://backend.shahednasser.com/content/images/size/w1000/2022/01/Screen-Shot-2022-01-03-at-11.21.35-AM.png 1000w","https://backend.shahednasser.com/content/images/size/w1600/2022/01/Screen-Shot-2022-01-03-at-11.21.35-AM.png 1600w","https://backend.shahednasser.com/content/images/2022/01/Screen-Shot-2022-01-03-at-11.21.35-AM.png 2038w"],"sizes":"(min-width: 720px) 720px"},"children":[]}]},{"type":"element","tagName":"h3","properties":{"id":"placement-in-rows"},"children":[{"type":"text","value":"Placement in Rows"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can use the grid layout to control the placement of elements in rows. To do that, you can use the properties "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"grid-row-start"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"grid-row-end"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The value of "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"grid-row-start"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"grid-row-end"}]},{"type":"text","value":" can be a number. The value of "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"grid-row-start"}]},{"type":"text","value":" will be the row the element should start on, and the value of "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"grid-row-end"}]},{"type":"text","value":" will be the row the element should end before."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For example, to make sure that the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"red"}]},{"type":"text","value":" element spans 2 rows we can use the following properties:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".red"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"background-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" red"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"grid-row-start"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 1"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"grid-row-end"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 3"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://backend.shahednasser.com/content/images/2022/01/Screen-Shot-2022-01-03-at-11.25.12-AM.png","className":["kg-image"],"alt":"","loading":"lazy","width":2000,"height":435,"srcSet":["https://backend.shahednasser.com/content/images/size/w600/2022/01/Screen-Shot-2022-01-03-at-11.25.12-AM.png 600w","https://backend.shahednasser.com/content/images/size/w1000/2022/01/Screen-Shot-2022-01-03-at-11.25.12-AM.png 1000w","https://backend.shahednasser.com/content/images/size/w1600/2022/01/Screen-Shot-2022-01-03-at-11.25.12-AM.png 1600w","https://backend.shahednasser.com/content/images/2022/01/Screen-Shot-2022-01-03-at-11.25.12-AM.png 2040w"],"sizes":"(min-width: 720px) 720px"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Alternatively, you can provide a value to the 2 properties in the format "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"span n"}]},{"type":"text","value":" where "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"n"}]},{"type":"text","value":" is the number of rows the element should span."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"So, instead of the previous properties used, you can use the following to make sure the red element spans 2 rows:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".red"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"background-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" red"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"grid-row-start"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" span 2"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This will result in the same layout."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"These properties are not only helpful for changing how many rows an element spans. They can also be used to completely control where each element is placed."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Let's say you want to place the blue column in the first row. You can apply the following styling to do that:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".blue"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"background-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" blue"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"grid-row-start"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 1"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This will result in the blue element being in the first row. However, as the placement of elements have changed the red element will be on the right."}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://backend.shahednasser.com/content/images/2022/01/Screen-Shot-2022-01-03-at-11.28.48-AM.png","className":["kg-image"],"alt":"","loading":"lazy","width":2000,"height":431,"srcSet":["https://backend.shahednasser.com/content/images/size/w600/2022/01/Screen-Shot-2022-01-03-at-11.28.48-AM.png 600w","https://backend.shahednasser.com/content/images/size/w1000/2022/01/Screen-Shot-2022-01-03-at-11.28.48-AM.png 1000w","https://backend.shahednasser.com/content/images/size/w1600/2022/01/Screen-Shot-2022-01-03-at-11.28.48-AM.png 1600w","https://backend.shahednasser.com/content/images/2022/01/Screen-Shot-2022-01-03-at-11.28.48-AM.png 2032w"],"sizes":"(min-width: 720px) 720px"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To ensure that the blue item is on the right and the red element remains on the left, you can use the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"grid-column-start"}]},{"type":"text","value":" property:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".blue"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"background-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" blue"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"grid-row-start"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 1"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"grid-column-start"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 2"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This will retain the original placement of the red element, but the blue item will be in the first column."}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://backend.shahednasser.com/content/images/2022/01/Screen-Shot-2022-01-03-at-11.30.38-AM.png","className":["kg-image"],"alt":"","loading":"lazy","width":2000,"height":429,"srcSet":["https://backend.shahednasser.com/content/images/size/w600/2022/01/Screen-Shot-2022-01-03-at-11.30.38-AM.png 600w","https://backend.shahednasser.com/content/images/size/w1000/2022/01/Screen-Shot-2022-01-03-at-11.30.38-AM.png 1000w","https://backend.shahednasser.com/content/images/size/w1600/2022/01/Screen-Shot-2022-01-03-at-11.30.38-AM.png 1600w","https://backend.shahednasser.com/content/images/2022/01/Screen-Shot-2022-01-03-at-11.30.38-AM.png 2032w"],"sizes":"(min-width: 720px) 720px"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"As you can see, you can use both properties for rows and columns to control many aspects of positioning and sizing of a grid."}]},{"type":"element","tagName":"h2","properties":{"id":"grid-areas"},"children":[{"type":"text","value":"Grid Areas"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Instead of controlling a grid as columns and rows, you can control a grid as areas."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Let's say we want to implement a header, content, and sidebar layout. The green element will be the header, the red will be the content, and the blue will be the sidebar."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"First, start by giving the different element area names using the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"grid-area"}]},{"type":"text","value":" property:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".red"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"background-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" red"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"grid-area"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" Content"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".green"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"background-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" green"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"grid-area"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" Header"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".blue"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"background-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" blue"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"grid-area"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" Sidebar"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This gives the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":".red"}]},{"type":"text","value":" element the grid-area name "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Content"}]},{"type":"text","value":", the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":".green"}]},{"type":"text","value":" element the grid-area name "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Header"}]},{"type":"text","value":", and the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":".blue"}]},{"type":"text","value":" element the grid-area "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Sidebar"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Next, you use the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"grid-template-areas"}]},{"type":"text","value":" property on the grid container element to determine how these different areas should be distributed. The "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"grid-template-areas"}]},{"type":"text","value":" takes as a value "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"n"}]},{"type":"text","value":" string values, where "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"n"}]},{"type":"text","value":" is the number of rows in the grid layout you're creating. The value will be the name of the areas separated by space. Each name specifies a column. So, if you want to have 2 columns in your grid and you want the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Header"}]},{"type":"text","value":" element to take 2 columns in a row, you can use the value "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"\"Header Header\""}]},{"type":"text","value":" for the row."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In our example, we'll create 2 rows and 3 columns. The first row will just be the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Header"}]},{"type":"text","value":" which will span the 3 columns, and the second row will be the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Content"}]},{"type":"text","value":" which will span 2 columns and the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Sidebar"}]},{"type":"text","value":" which will be just one column:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".container"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"display"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" grid"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"grid-template-areas"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"Header Header Header\""}]},{"type":"text","value":" \n "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"Content Content Sidebar\""}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"grid-row-gap"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 5px"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"grid-column-gap"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 5px"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"grid-auto-rows"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 100px"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Since we want three columns in the grid, each string value in "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"grid-template-areas"}]},{"type":"text","value":" should have 3 area names. The first string value is for the first row in the grid. As we just want the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Header"}]},{"type":"text","value":" to occupy it the value will be the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Header"}]},{"type":"text","value":" repeated 3 times."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The second string value is for the second row. We want the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Content"}]},{"type":"text","value":" area to span 2 columns. So, in the string value we repeat the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Content"}]},{"type":"text","value":" area twice then the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Sidebar"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Notice that each string value is wrapped in "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":" and string values are separated by a space."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"We also add a gap between rows and columns using "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"grid-row-gap"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"grid-column-gap"}]},{"type":"text","value":". We also set the default row height to "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"100px"}]},{"type":"text","value":" using "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"grid-auto-rows"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This will result in the following layout:"}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://backend.shahednasser.com/content/images/2022/01/Screen-Shot-2022-01-03-at-11.50.08-AM.png","className":["kg-image"],"alt":"","loading":"lazy","width":2000,"height":438,"srcSet":["https://backend.shahednasser.com/content/images/size/w600/2022/01/Screen-Shot-2022-01-03-at-11.50.08-AM.png 600w","https://backend.shahednasser.com/content/images/size/w1000/2022/01/Screen-Shot-2022-01-03-at-11.50.08-AM.png 1000w","https://backend.shahednasser.com/content/images/size/w1600/2022/01/Screen-Shot-2022-01-03-at-11.50.08-AM.png 1600w","https://backend.shahednasser.com/content/images/2022/01/Screen-Shot-2022-01-03-at-11.50.08-AM.png 2038w"],"sizes":"(min-width: 720px) 720px"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"fr-unit"},"children":[{"type":"text","value":"fr Unit"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To ensure that columns or rows in a grid use the same height or width, you can use the "},{"type":"element","tagName":"a","properties":{"href":"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#fixed_and_flexible_track_sizes"},"children":[{"type":"text","value":"fr Unit"}]},{"type":"text","value":". For example, to create 3 columns each having the same width:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".container"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"display"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" grid"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"grid-template-columns"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"repeat"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"3"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" 1fr"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"grid-template-rows"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 100px"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"h2","properties":{"id":"conclusion"},"children":[{"type":"text","value":"Conclusion"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In this tutorial, you learned how CSS Grid Layout works in terms of rows, columns, and areas. Using a Grid Layout in CSS will help you control the size and placement of elements in your page or a container element."}]}],"data":{"quirksMode":false}},"tableOfContents":[{"id":"why-use-css-grid","heading":"Why Use CSS Grid"},{"id":"your-first-grid","heading":"Your First Grid"},{"id":"elements-placements","heading":"Elements Placements"},{"id":"columns","heading":"Columns","items":[{"id":"gap-between-columns","heading":"Gap Between Columns"},{"id":"placement-in-columns","heading":"Placement in Columns"}]},{"id":"rows","heading":"Rows","items":[{"id":"gap-between-rows","heading":"Gap Between Rows"},{"id":"placement-in-rows","heading":"Placement in Rows"}]},{"id":"grid-areas","heading":"Grid Areas"},{"id":"fr-unit","heading":"fr Unit"},{"id":"conclusion","heading":"Conclusion"}]},"featureImageSharp":{"base":"sharon-mccutcheon-_Y3IuVbPpmU-unsplash-2.jpg","publicURL":"/static/06c4e4dcfc476f5d1cd13f3d737bf0ee/sharon-mccutcheon-_Y3IuVbPpmU-unsplash-2.jpg","imageMeta":{"width":1920,"height":1222},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAABQD/xAAUAQEAAAAAAAAAAAAAAAAAAAAC/9oADAMBAAIQAxAAAAEZI5EIapH/xAAZEAACAwEAAAAAAAAAAAAAAAAAAQIDESH/2gAIAQEAAQUCqEulTwjYtP/EABcRAQADAAAAAAAAAAAAAAAAAAIBEDH/2gAIAQMBAT8BLeRX/8QAFxEBAAMAAAAAAAAAAAAAAAAAAgEQUf/aAAgBAgEBPwFycr//xAAaEAABBQEAAAAAAAAAAAAAAAAAARARIaEy/9oACAEBAAY/AloiMZTnW//EABsQAQACAgMAAAAAAAAAAAAAAAEAERAhQVFh/9oACAEBAAE/IQrS0F0OcL+t2dwbfeH/2gAMAwEAAgADAAAAEPPv/8QAFxEBAAMAAAAAAAAAAAAAAAAAEQEQYf/aAAgBAwEBPxCEka1//8QAFxEBAAMAAAAAAAAAAAAAAAAAARAhgf/aAAgBAgEBPxABaXI//8QAHRABAQACAQUAAAAAAAAAAAAAAREAIRAxQVFhcf/aAAgBAQABPxCEBAtLN5dARWvXgaEA6R3xEpV2vx84/9k=","aspectRatio":1.5765765765765767,"src":"/static/06c4e4dcfc476f5d1cd13f3d737bf0ee/ea4ab/sharon-mccutcheon-_Y3IuVbPpmU-unsplash-2.jpg","srcSet":"/static/06c4e4dcfc476f5d1cd13f3d737bf0ee/477ba/sharon-mccutcheon-_Y3IuVbPpmU-unsplash-2.jpg 175w,\n/static/06c4e4dcfc476f5d1cd13f3d737bf0ee/06776/sharon-mccutcheon-_Y3IuVbPpmU-unsplash-2.jpg 350w,\n/static/06c4e4dcfc476f5d1cd13f3d737bf0ee/ea4ab/sharon-mccutcheon-_Y3IuVbPpmU-unsplash-2.jpg 700w,\n/static/06c4e4dcfc476f5d1cd13f3d737bf0ee/3055e/sharon-mccutcheon-_Y3IuVbPpmU-unsplash-2.jpg 1050w,\n/static/06c4e4dcfc476f5d1cd13f3d737bf0ee/eff08/sharon-mccutcheon-_Y3IuVbPpmU-unsplash-2.jpg 1400w,\n/static/06c4e4dcfc476f5d1cd13f3d737bf0ee/74fd5/sharon-mccutcheon-_Y3IuVbPpmU-unsplash-2.jpg 1920w","srcWebp":"/static/06c4e4dcfc476f5d1cd13f3d737bf0ee/89afa/sharon-mccutcheon-_Y3IuVbPpmU-unsplash-2.webp","srcSetWebp":"/static/06c4e4dcfc476f5d1cd13f3d737bf0ee/9fca7/sharon-mccutcheon-_Y3IuVbPpmU-unsplash-2.webp 175w,\n/static/06c4e4dcfc476f5d1cd13f3d737bf0ee/37a4e/sharon-mccutcheon-_Y3IuVbPpmU-unsplash-2.webp 350w,\n/static/06c4e4dcfc476f5d1cd13f3d737bf0ee/89afa/sharon-mccutcheon-_Y3IuVbPpmU-unsplash-2.webp 700w,\n/static/06c4e4dcfc476f5d1cd13f3d737bf0ee/78e7a/sharon-mccutcheon-_Y3IuVbPpmU-unsplash-2.webp 1050w,\n/static/06c4e4dcfc476f5d1cd13f3d737bf0ee/03d34/sharon-mccutcheon-_Y3IuVbPpmU-unsplash-2.webp 1400w,\n/static/06c4e4dcfc476f5d1cd13f3d737bf0ee/6833b/sharon-mccutcheon-_Y3IuVbPpmU-unsplash-2.webp 1920w","sizes":"(max-width: 700px) 100vw, 700px"}}}}},{"node":{"id":"Ghost__Post__616af8d07a819fa97764d33f","title":"10 Awesome Web Development Resources You Might Not Know","slug":"10-awesome-web-development-resources-you-might-not-know","featured":false,"feature_image":"https://backend.shahednasser.com/content/images/2021/10/arnel-hasanovic-MNd-Rka1o0Q-unsplash-2.jpg","excerpt":"In this article, I'll focus on resources related to web development that I personally found to be helpful, cool, or unique","custom_excerpt":"In this article, I'll focus on resources related to web development that I personally found to be helpful, cool, or unique","visibility":"public","created_at_pretty":"16 Oct 2021","published_at_pretty":"18 Oct 2021","updated_at_pretty":"21 Oct 2021","created_at":"2021-10-16T16:07:44.000+00:00","published_at":"2021-10-18T14:14:41.000+00:00","updated_at":"2021-10-21T10:27:45.000+00:00","meta_title":null,"meta_description":null,"og_description":null,"og_image":null,"og_title":null,"twitter_description":null,"twitter_image":null,"twitter_title":null,"authors":[{"slug":"shahed","url":"https://backend.shahednasser.com/author/shahed/","name":"Shahed Nasser","bio":null,"cover_image":null,"profile_image":"https://backend.shahednasser.com/content/images/2022/03/IMG_0591.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":null}],"primary_author":{"slug":"shahed","url":"https://backend.shahednasser.com/author/shahed/","name":"Shahed Nasser","bio":null,"cover_image":null,"profile_image":"https://backend.shahednasser.com/content/images/2022/03/IMG_0591.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":{"base":"IMG_0591.jpg","publicURL":"/static/ceb49c3c631485453e71e00d7f84b069/IMG_0591.jpg","imageMeta":{"width":1182,"height":1179},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAAMEAQL/xAAWAQEBAQAAAAAAAAAAAAAAAAADBAL/2gAMAwEAAhADEAAAAdXiFM6i0CohUWXoKn//xAAcEAACAgIDAAAAAAAAAAAAAAACAwESBBEhM0H/2gAIAQEAAQUCWySE3WEr7SzbXjAj4iKty+sOQ//EABYRAQEBAAAAAAAAAAAAAAAAAAERIP/aAAgBAwEBPwEhj//EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQIBAT8BH//EAB4QAAIBBAMBAAAAAAAAAAAAAAABIRESMUECECJx/9oACAEBAAY/ApVGWvOjzgtUwLlTZA0sdL4f/8QAHBAAAwACAwEAAAAAAAAAAAAAAAERITFBkbHB/9oACAEBAAE/IahkCy+N2GwZpjQiJHJCspUFY0QrSi+HqiW2rgf/2gAMAwEAAgADAAAAEPw3/wD/xAAYEQEBAAMAAAAAAAAAAAAAAAAAARExQf/aAAgBAwEBPxCtjDqP/8QAFxEBAQEBAAAAAAAAAAAAAAAAAQAxEf/aAAgBAgEBPxBFus6Tt//EAB8QAQEAAgIBBQAAAAAAAAAAAAERACExQWFRcYGR0f/aAAgBAQABPxAuaBPPzkO1wyX7F4wkwXanfZrFQgeqE9JgS14vVOvrERIJomVBKwt2jebAeP0yVa8h1n//2Q==","aspectRatio":1,"src":"/static/ceb49c3c631485453e71e00d7f84b069/31709/IMG_0591.jpg","srcSet":"/static/ceb49c3c631485453e71e00d7f84b069/f340b/IMG_0591.jpg 28w,\n/static/ceb49c3c631485453e71e00d7f84b069/22d64/IMG_0591.jpg 55w,\n/static/ceb49c3c631485453e71e00d7f84b069/31709/IMG_0591.jpg 110w,\n/static/ceb49c3c631485453e71e00d7f84b069/aa249/IMG_0591.jpg 165w,\n/static/ceb49c3c631485453e71e00d7f84b069/0dc33/IMG_0591.jpg 220w,\n/static/ceb49c3c631485453e71e00d7f84b069/d8257/IMG_0591.jpg 1182w","srcWebp":"/static/ceb49c3c631485453e71e00d7f84b069/8678c/IMG_0591.webp","srcSetWebp":"/static/ceb49c3c631485453e71e00d7f84b069/59cda/IMG_0591.webp 28w,\n/static/ceb49c3c631485453e71e00d7f84b069/7da75/IMG_0591.webp 55w,\n/static/ceb49c3c631485453e71e00d7f84b069/8678c/IMG_0591.webp 110w,\n/static/ceb49c3c631485453e71e00d7f84b069/f282e/IMG_0591.webp 165w,\n/static/ceb49c3c631485453e71e00d7f84b069/a7b21/IMG_0591.webp 220w,\n/static/ceb49c3c631485453e71e00d7f84b069/63099/IMG_0591.webp 1182w","sizes":"(max-width: 110px) 100vw, 110px"}}}},"primary_tag":{"slug":"tips","url":"https://backend.shahednasser.com/tag/tips/","name":"Tips","visibility":"public","feature_image":null,"description":"Learn more about programming and development through these articles that have essential tips!","meta_title":"Tips on Technology and Programming","meta_description":null,"featureImageSharp":null},"tags":[{"slug":"tips","url":"https://backend.shahednasser.com/tag/tips/","name":"Tips","visibility":"public","feature_image":null,"description":"Learn more about programming and development through these articles that have essential tips!","meta_title":"Tips on Technology and Programming","meta_description":null,"featureImageSharp":null},{"slug":"beginner","url":"https://backend.shahednasser.com/tag/beginner/","name":"Beginners","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/photo-1521185496955-15097b20c5fe-2.jpeg","description":"Tutorials, articles, and tips to help beginners accelerate their journey in programming.","meta_title":"Beginners","meta_description":"Tutorials, articles, and tips to help beginners accelerate their journey in programming.","featureImageSharp":null},{"slug":"css","url":"https://backend.shahednasser.com/tag/css/","name":"CSS","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/photo-1610986603166-f78428624e76-2.jpeg","description":"Learn more about CSS through tutorials, articles, and tips.","meta_title":null,"meta_description":null,"featureImageSharp":null},{"slug":"js","url":"https://backend.shahednasser.com/tag/js/","name":"Javascript","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/photo-1592609931095-54a2168ae893-2.jpeg","description":"Learn more about Javascript through tutorials, articles, and tips.","meta_title":null,"meta_description":"Learn more about Javascript through tutorials, articles and tips.","featureImageSharp":null}],"plaintext":"Last year, I created the repository awesome-resources\n[https://github.com/shahednasser/awesome-resources] which aimed to combine\nhelpful resources about many topics in one place. All these resources are added\nby fellow contributors who have personally found these resources helpful for\nthem.\n\nSome of these resources can be necessary basic knowledge including the\ndocumentation of a framework or courses for a programming language.\n\nOn the other hand, some resources are not ones that everyone is familiar with. I\npersonally didn't know about a lot of them and found them cool when reviewing\npull requests.\n\nAlthough this repository has resources related to almost every topic related to\ntechnology in particular, in this article I'll focus on resources related to web\ndevelopment that I personally found to be helpful, cool, or unique.\n\nCSS\nStyle Stage from Modern CSS Solutions [https://stylestage.dev]\nAt first, I was confused about what this website was for, but when I went\nthrough it I loved the idea. Basically, this website shows you the exact same\npage in different stylesheets created by contributors. You can go view the list\nof styles [https://stylestage.dev/styles/] and pick one of them. You'll see\nunique different ways of designing the same page, and you can view the\nstylesheet to learn how it was done.\n\nGrid [https://grid.malven.co] and Flex [https://flexbox.malven.co] Cheat Sheets\nby Chris Malven\nWe've seen many cheat sheets before, so there's nothing unique about a cheat\nsheet. However, this one I really liked because it had a simple visual\nexplanation, and it's simple and to the point. I think most cheat sheets end up\nbeing too condensed as they try to put too much information in one place. This\none is very easy to read and find what you need.\n\nGlassmorphism CSS Generator [https://ui.glass/generator/]\nThis CSS Generator helps you create elements with a glass effect. You can select\nthe type of background you want to use for the element, for example, an image.\nThen, you can specify details related to the color, opacity, and more.\n\nOnce you like the design, you can copy the CSS and HTML and use them on your\nwebsite.\n\nJavaScript\nCoderslangJS [https://js.coderslang.com/]\nCoderlangJS [https://js.coderslang.com/] is another JavaScript course to learn\nJavaScript as a beginner. However, it does so in the form of a game with a\nstoryline. It helps make the learning fun, especially for beginners.\n\nIt also doesn't just focus on the basics, it also focuses on more advanced\ntopics like developing the backend with Node.js, deploying it with Docker, and\nmore.\n\nJavaScript 30 [https://javascript30.com]\nJavaScript 30 [https://javascript30.com] helps you learn Vanilla JavaScript by\nbuilding components and projects without any libraries, frameworks, or any tool\nthat might help you build it. Basically, you have to build everything from\nscratch. If you're looking to practice JavaScript and become advanced in it,\nthis is a great way to start.\n\nFavorite JavaScript Utilities in Single Line of Code - 1LOC [https://1loc.dev]\nThis resource gives you utility functions in both JavaScript and TypeScript in\none line. It includes utilities for Arrays, Date Time, DOM, and more. You are\nvery likely to use these utilities in your project, so it's a nice resource to\nhave bookmarked for when you need them.\n\nJS.ORG [https://js.org]\nJS.ORG [https://js.org] provides repositories that are clearly related to\nJavaScript with a js.org subdomain. For example, foo.js.org. As there has been a\nlot of demand for subdomains, now JS.ORG is making sure to limit the subdomains\nthey provide to those of clear relation to JavaScript.\n\nSo, if your repository is related to JavaScript, you can follow the steps on\ntheir website to get a free subdomain for your project.\n\nReact.js Cheat Sheet by devhints.io [https://devhints.io/react]\nThis cheat sheet is specifically for React [https://reactjs.org] created by \ndevhints.io [https://devhints.io]. It's a simple and to-the-point cheat sheet\nthat is easily readable. It has information on components, lifecycle, hooks, and\nmore.\n\nOther\nWeb Accessibility Evaluation Tools List [https://www.w3.org/WAI/ER/tools/]\nThis resource by W3C gives you tools that allow you to check your pages and make\nsure they properly provide accessibility for all people regardless of their\ndisabilities. You can find tools like WebAccessibility.com\n[https://www.webaccessibility.com] and Color Contrast Accessibility Validator\n[https://color.a11y.com/?wc3].\n\n404 Illustrations [https://error404.fun]\nThis project provides you with free 404 illustrations you can use on your\nwebsites to make the 404 page more creative. The illustrations are available in\nPNG and SVG. You can also see an example of how to use these illustrations for\ninspiration.\n\nBonus\nThis section includes resources that I found helpful but are not necessarily\nrelated to Web Development in particular.\n\nList of Badges, in Markdown [https://naereen.github.io/badges/]\nThis website and GitHub repository give you badges you can use in Markdown\nfiles. This is especially helpful for repository maintainers. You can find\nbadges related to the status of the project, the version it supports, data\nrelated to the maintainer or contributors, and more.\n\nGIT PURR! Git Commands Explained with Cats!\n[https://girliemac.com/blog/2017/12/26/git-purr/]\nI might be biased since I'm a cat lover, but when I saw this one I loved it. Not\nonly is it an easy way for beginners to grasp Git commands with these drawings\nand doodles, but they're also super cute.\n\nMachine Learning Roadmap 2020\n[https://whimsical.com/machine-learning-roadmap-2020-CA7f3ykvXpnJ9Az32vYXva]\nThe reason I like this roadmap is that it's interactive with notes on how to get\nstarted with each roadmap item. I think we're always used to roadmaps related to\nhow to start learning something with images. I personally find interactive\nresources are a better way to understand and learn something.\n\nConclusion\nThrough creating the awsome-resources\n[https://github.com/shahednasser/awesome-resources] repository, I was able to\nlearn about many resources that I personally didn't know existed. I think this\nis also one of the benefits of giving back to the community and contributing to\nopen source projects.\n\nThis list is just a small list of the resources found in the repository\n[https://github.com/shahednasser/awesome-resources]. I encourage you to check it\nout and see other resources added by contributors that might be useful to you or\nothers you might know.","html":"

Last year, I created the repository awesome-resources which aimed to combine helpful resources about many topics in one place. All these resources are added by fellow contributors who have personally found these resources helpful for them.

Some of these resources can be necessary basic knowledge including the documentation of a framework or courses for a programming language.

On the other hand, some resources are not ones that everyone is familiar with. I personally didn't know about a lot of them and found them cool when reviewing pull requests.

Although this repository has resources related to almost every topic related to technology in particular, in this article I'll focus on resources related to web development that I personally found to be helpful, cool, or unique.

CSS

Style Stage from Modern CSS Solutions

At first, I was confused about what this website was for, but when I went through it I loved the idea. Basically, this website shows you the exact same page in different stylesheets created by contributors. You can go view the list of styles and pick one of them. You'll see unique different ways of designing the same page, and you can view the stylesheet to learn how it was done.

Grid and Flex Cheat Sheets by Chris Malven

We've seen many cheat sheets before, so there's nothing unique about a cheat sheet. However, this one I really liked because it had a simple visual explanation, and it's simple and to the point. I think most cheat sheets end up being too condensed as they try to put too much information in one place. This one is very easy to read and find what you need.

Glassmorphism CSS Generator

This CSS Generator helps you create elements with a glass effect. You can select the type of background you want to use for the element, for example, an image. Then, you can specify details related to the color, opacity, and more.

Once you like the design, you can copy the CSS and HTML and use them on your website.

JavaScript

CoderslangJS

CoderlangJS is another JavaScript course to learn JavaScript as a beginner. However, it does so in the form of a game with a storyline. It helps make the learning fun, especially for beginners.

It also doesn't just focus on the basics, it also focuses on more advanced topics like developing the backend with Node.js, deploying it with Docker, and more.

JavaScript 30

JavaScript 30 helps you learn Vanilla JavaScript by building components and projects without any libraries, frameworks, or any tool that might help you build it. Basically, you have to build everything from scratch. If you're looking to practice JavaScript and become advanced in it, this is a great way to start.

Favorite JavaScript Utilities in Single Line of Code - 1LOC

This resource gives you utility functions in both JavaScript and TypeScript in one line. It includes utilities for Arrays, Date Time, DOM, and more. You are very likely to use these utilities in your project, so it's a nice resource to have bookmarked for when you need them.

JS.ORG

JS.ORG provides repositories that are clearly related to JavaScript with a js.org subdomain. For example, foo.js.org. As there has been a lot of demand for subdomains, now JS.ORG is making sure to limit the subdomains they provide to those of clear relation to JavaScript.

So, if your repository is related to JavaScript, you can follow the steps on their website to get a free subdomain for your project.

React.js Cheat Sheet by devhints.io

This cheat sheet is specifically for React created by devhints.io. It's a simple and to-the-point cheat sheet that is easily readable. It has information on components, lifecycle, hooks, and more.

Other

Web Accessibility Evaluation Tools List

This resource by W3C gives you tools that allow you to check your pages and make sure they properly provide accessibility for all people regardless of their disabilities. You can find tools like WebAccessibility.com and Color Contrast Accessibility Validator.

404 Illustrations

This project provides you with free 404 illustrations you can use on your websites to make the 404 page more creative. The illustrations are available in PNG and SVG. You can also see an example of how to use these illustrations for inspiration.

Bonus

This section includes resources that I found helpful but are not necessarily related to Web Development in particular.

List of Badges, in Markdown

This website and GitHub repository give you badges you can use in Markdown files. This is especially helpful for repository maintainers. You can find badges related to the status of the project, the version it supports, data related to the maintainer or contributors, and more.

GIT PURR! Git Commands Explained with Cats!

I might be biased since I'm a cat lover, but when I saw this one I loved it. Not only is it an easy way for beginners to grasp Git commands with these drawings and doodles, but they're also super cute.

Machine Learning Roadmap 2020

The reason I like this roadmap is that it's interactive with notes on how to get started with each roadmap item. I think we're always used to roadmaps related to how to start learning something with images. I personally find interactive resources are a better way to understand and learn something.

Conclusion

Through creating the awsome-resources repository, I was able to learn about many resources that I personally didn't know existed. I think this is also one of the benefits of giving back to the community and contributing to open source projects.

This list is just a small list of the resources found in the repository. I encourage you to check it out and see other resources added by contributors that might be useful to you or others you might know.

","url":"https://backend.shahednasser.com/10-awesome-web-development-resources-you-might-not-know/","canonical_url":null,"uuid":"51a0135c-590e-4273-876d-dde0e171c042","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"616af8d07a819fa97764d33f","reading_time":5,"send_email_when_published":null,"email_subject":null,"childHtmlRehype":{"html":"

Last year, I created the repository awesome-resources which aimed to combine helpful resources about many topics in one place. All these resources are added by fellow contributors who have personally found these resources helpful for them.

Some of these resources can be necessary basic knowledge including the documentation of a framework or courses for a programming language.

On the other hand, some resources are not ones that everyone is familiar with. I personally didn't know about a lot of them and found them cool when reviewing pull requests.

Although this repository has resources related to almost every topic related to technology in particular, in this article I'll focus on resources related to web development that I personally found to be helpful, cool, or unique.

CSS

Style Stage from Modern CSS Solutions

\"\"

At first, I was confused about what this website was for, but when I went through it I loved the idea. Basically, this website shows you the exact same page in different stylesheets created by contributors. You can go view the list of styles and pick one of them. You'll see unique different ways of designing the same page, and you can view the stylesheet to learn how it was done.

Grid and Flex Cheat Sheets by Chris Malven

\"\"

We've seen many cheat sheets before, so there's nothing unique about a cheat sheet. However, this one I really liked because it had a simple visual explanation, and it's simple and to the point. I think most cheat sheets end up being too condensed as they try to put too much information in one place. This one is very easy to read and find what you need.

Glassmorphism CSS Generator

\"\"

This CSS Generator helps you create elements with a glass effect. You can select the type of background you want to use for the element, for example, an image. Then, you can specify details related to the color, opacity, and more.

Once you like the design, you can copy the CSS and HTML and use them on your website.

JavaScript

CoderslangJS

\"\"

CoderlangJS is another JavaScript course to learn JavaScript as a beginner. However, it does so in the form of a game with a storyline. It helps make the learning fun, especially for beginners.

It also doesn't just focus on the basics, it also focuses on more advanced topics like developing the backend with Node.js, deploying it with Docker, and more.

JavaScript 30

\"\"

JavaScript 30 helps you learn Vanilla JavaScript by building components and projects without any libraries, frameworks, or any tool that might help you build it. Basically, you have to build everything from scratch. If you're looking to practice JavaScript and become advanced in it, this is a great way to start.

Favorite JavaScript Utilities in Single Line of Code - 1LOC

\"\"

This resource gives you utility functions in both JavaScript and TypeScript in one line. It includes utilities for Arrays, Date Time, DOM, and more. You are very likely to use these utilities in your project, so it's a nice resource to have bookmarked for when you need them.

JS.ORG

\"\"

JS.ORG provides repositories that are clearly related to JavaScript with a js.org subdomain. For example, foo.js.org. As there has been a lot of demand for subdomains, now JS.ORG is making sure to limit the subdomains they provide to those of clear relation to JavaScript.

So, if your repository is related to JavaScript, you can follow the steps on their website to get a free subdomain for your project.

React.js Cheat Sheet by devhints.io

\"\"

This cheat sheet is specifically for React created by devhints.io. It's a simple and to-the-point cheat sheet that is easily readable. It has information on components, lifecycle, hooks, and more.

Other

Web Accessibility Evaluation Tools List

\"\"

This resource by W3C gives you tools that allow you to check your pages and make sure they properly provide accessibility for all people regardless of their disabilities. You can find tools like WebAccessibility.com and Color Contrast Accessibility Validator.

404 Illustrations

\"\"

This project provides you with free 404 illustrations you can use on your websites to make the 404 page more creative. The illustrations are available in PNG and SVG. You can also see an example of how to use these illustrations for inspiration.

Bonus

This section includes resources that I found helpful but are not necessarily related to Web Development in particular.

List of Badges, in Markdown

\"\"

This website and GitHub repository give you badges you can use in Markdown files. This is especially helpful for repository maintainers. You can find badges related to the status of the project, the version it supports, data related to the maintainer or contributors, and more.

GIT PURR! Git Commands Explained with Cats!

\"\"

I might be biased since I'm a cat lover, but when I saw this one I loved it. Not only is it an easy way for beginners to grasp Git commands with these drawings and doodles, but they're also super cute.

Machine Learning Roadmap 2020

\"\"

The reason I like this roadmap is that it's interactive with notes on how to get started with each roadmap item. I think we're always used to roadmaps related to how to start learning something with images. I personally find interactive resources are a better way to understand and learn something.

Conclusion

Through creating the awsome-resources repository, I was able to learn about many resources that I personally didn't know existed. I think this is also one of the benefits of giving back to the community and contributing to open source projects.

This list is just a small list of the resources found in the repository. I encourage you to check it out and see other resources added by contributors that might be useful to you or others you might know.

","htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Last year, I created the repository "},{"type":"element","tagName":"a","properties":{"href":"https://github.com/shahednasser/awesome-resources"},"children":[{"type":"text","value":"awesome-resources"}]},{"type":"text","value":" which aimed to combine helpful resources about many topics in one place. All these resources are added by fellow contributors who have personally found these resources helpful for them."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Some of these resources can be necessary basic knowledge including the documentation of a framework or courses for a programming language."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"On the other hand, some resources are not ones that everyone is familiar with. I personally didn't know about a lot of them and found them cool when reviewing pull requests."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Although this repository has resources related to almost every topic related to technology in particular, in this article I'll focus on resources related to web development that I personally found to be helpful, cool, or unique."}]},{"type":"element","tagName":"h2","properties":{"id":"css"},"children":[{"type":"text","value":"CSS"}]},{"type":"element","tagName":"h3","properties":{"id":"style-stage-from-modern-css-solutions"},"children":[{"type":"element","tagName":"a","properties":{"href":"https://stylestage.dev"},"children":[{"type":"text","value":"Style Stage from Modern CSS Solutions"}]}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://backend.shahednasser.com/content/images/2021/10/Screen-Shot-2021-10-16-at-7.11.49-PM.png","className":["kg-image"],"alt":"","loading":"lazy","width":2000,"height":1126,"srcSet":["https://backend.shahednasser.com/content/images/size/w600/2021/10/Screen-Shot-2021-10-16-at-7.11.49-PM.png 600w","https://backend.shahednasser.com/content/images/size/w1000/2021/10/Screen-Shot-2021-10-16-at-7.11.49-PM.png 1000w","https://backend.shahednasser.com/content/images/size/w1600/2021/10/Screen-Shot-2021-10-16-at-7.11.49-PM.png 1600w","https://backend.shahednasser.com/content/images/size/w2400/2021/10/Screen-Shot-2021-10-16-at-7.11.49-PM.png 2400w"],"sizes":"(min-width: 720px) 720px"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"At first, I was confused about what this website was for, but when I went through it I loved the idea. Basically, this website shows you the exact same page in different stylesheets created by contributors. You can go view the "},{"type":"element","tagName":"a","properties":{"href":"https://stylestage.dev/styles/"},"children":[{"type":"text","value":"list of styles"}]},{"type":"text","value":" and pick one of them. You'll see unique different ways of designing the same page, and you can view the stylesheet to learn how it was done."}]},{"type":"element","tagName":"h3","properties":{"id":"grid-and-flex-cheat-sheets-by-chris-malven"},"children":[{"type":"element","tagName":"a","properties":{"href":"https://grid.malven.co"},"children":[{"type":"text","value":"Grid"}]},{"type":"text","value":" and "},{"type":"element","tagName":"a","properties":{"href":"https://flexbox.malven.co"},"children":[{"type":"text","value":"Flex"}]},{"type":"text","value":" Cheat Sheets by Chris Malven"}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://backend.shahednasser.com/content/images/2021/10/Screen-Shot-2021-10-16-at-7.17.17-PM.png","className":["kg-image"],"alt":"","loading":"lazy","width":2000,"height":911,"srcSet":["https://backend.shahednasser.com/content/images/size/w600/2021/10/Screen-Shot-2021-10-16-at-7.17.17-PM.png 600w","https://backend.shahednasser.com/content/images/size/w1000/2021/10/Screen-Shot-2021-10-16-at-7.17.17-PM.png 1000w","https://backend.shahednasser.com/content/images/size/w1600/2021/10/Screen-Shot-2021-10-16-at-7.17.17-PM.png 1600w","https://backend.shahednasser.com/content/images/size/w2400/2021/10/Screen-Shot-2021-10-16-at-7.17.17-PM.png 2400w"],"sizes":"(min-width: 720px) 720px"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"We've seen many cheat sheets before, so there's nothing unique about a cheat sheet. However, this one I really liked because it had a simple visual explanation, and it's simple and to the point. I think most cheat sheets end up being too condensed as they try to put too much information in one place. This one is very easy to read and find what you need."}]},{"type":"element","tagName":"h3","properties":{"id":"glassmorphism-css-generator"},"children":[{"type":"element","tagName":"a","properties":{"href":"https://ui.glass/generator/"},"children":[{"type":"text","value":"Glassmorphism CSS Generator"}]}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://backend.shahednasser.com/content/images/2021/10/Screen-Shot-2021-10-17-at-5.10.44-PM-1.png","className":["kg-image"],"alt":"","loading":"lazy","width":2000,"height":1211,"srcSet":["https://backend.shahednasser.com/content/images/size/w600/2021/10/Screen-Shot-2021-10-17-at-5.10.44-PM-1.png 600w","https://backend.shahednasser.com/content/images/size/w1000/2021/10/Screen-Shot-2021-10-17-at-5.10.44-PM-1.png 1000w","https://backend.shahednasser.com/content/images/size/w1600/2021/10/Screen-Shot-2021-10-17-at-5.10.44-PM-1.png 1600w","https://backend.shahednasser.com/content/images/size/w2400/2021/10/Screen-Shot-2021-10-17-at-5.10.44-PM-1.png 2400w"],"sizes":"(min-width: 720px) 720px"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This CSS Generator helps you create elements with a glass effect. You can select the type of background you want to use for the element, for example, an image. Then, you can specify details related to the color, opacity, and more."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Once you like the design, you can copy the CSS and HTML and use them on your website."}]},{"type":"element","tagName":"h2","properties":{"id":"javascript"},"children":[{"type":"text","value":"JavaScript"}]},{"type":"element","tagName":"h3","properties":{"id":"coderslangjs"},"children":[{"type":"element","tagName":"a","properties":{"href":"https://js.coderslang.com/"},"children":[{"type":"text","value":"CoderslangJS"}]}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://backend.shahednasser.com/content/images/2021/10/Screen-Shot-2021-10-17-at-4.35.03-PM.png","className":["kg-image"],"alt":"","loading":"lazy","width":1614,"height":1640,"srcSet":["https://backend.shahednasser.com/content/images/size/w600/2021/10/Screen-Shot-2021-10-17-at-4.35.03-PM.png 600w","https://backend.shahednasser.com/content/images/size/w1000/2021/10/Screen-Shot-2021-10-17-at-4.35.03-PM.png 1000w","https://backend.shahednasser.com/content/images/size/w1600/2021/10/Screen-Shot-2021-10-17-at-4.35.03-PM.png 1600w","https://backend.shahednasser.com/content/images/2021/10/Screen-Shot-2021-10-17-at-4.35.03-PM.png 1614w"],"sizes":"(min-width: 720px) 720px"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://js.coderslang.com/"},"children":[{"type":"text","value":"CoderlangJS"}]},{"type":"text","value":" is another JavaScript course to learn JavaScript as a beginner. However, it does so in the form of a game with a storyline. It helps make the learning fun, especially for beginners."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It also doesn't just focus on the basics, it also focuses on more advanced topics like developing the backend with Node.js, deploying it with Docker, and more."}]},{"type":"element","tagName":"h3","properties":{"id":"javascript-30"},"children":[{"type":"element","tagName":"a","properties":{"href":"https://javascript30.com"},"children":[{"type":"text","value":"JavaScript 30"}]}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://backend.shahednasser.com/content/images/2021/10/Screen-Shot-2021-10-17-at-4.38.04-PM.png","className":["kg-image"],"alt":"","loading":"lazy","width":2000,"height":990,"srcSet":["https://backend.shahednasser.com/content/images/size/w600/2021/10/Screen-Shot-2021-10-17-at-4.38.04-PM.png 600w","https://backend.shahednasser.com/content/images/size/w1000/2021/10/Screen-Shot-2021-10-17-at-4.38.04-PM.png 1000w","https://backend.shahednasser.com/content/images/size/w1600/2021/10/Screen-Shot-2021-10-17-at-4.38.04-PM.png 1600w","https://backend.shahednasser.com/content/images/2021/10/Screen-Shot-2021-10-17-at-4.38.04-PM.png 2166w"],"sizes":"(min-width: 720px) 720px"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://javascript30.com"},"children":[{"type":"text","value":"JavaScript 30"}]},{"type":"text","value":" helps you learn Vanilla JavaScript by building components and projects without any libraries, frameworks, or any tool that might help you build it. Basically, you have to build everything from scratch. If you're looking to practice JavaScript and become advanced in it, this is a great way to start."}]},{"type":"element","tagName":"h3","properties":{"id":"favorite-javascript-utilities-in-single-line-of-code1loc"},"children":[{"type":"element","tagName":"a","properties":{"href":"https://1loc.dev"},"children":[{"type":"text","value":"Favorite JavaScript Utilities in Single Line of Code - 1LOC"}]}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://backend.shahednasser.com/content/images/2021/10/Screen-Shot-2021-10-17-at-4.40.57-PM.png","className":["kg-image"],"alt":"","loading":"lazy","width":2000,"height":954,"srcSet":["https://backend.shahednasser.com/content/images/size/w600/2021/10/Screen-Shot-2021-10-17-at-4.40.57-PM.png 600w","https://backend.shahednasser.com/content/images/size/w1000/2021/10/Screen-Shot-2021-10-17-at-4.40.57-PM.png 1000w","https://backend.shahednasser.com/content/images/size/w1600/2021/10/Screen-Shot-2021-10-17-at-4.40.57-PM.png 1600w","https://backend.shahednasser.com/content/images/2021/10/Screen-Shot-2021-10-17-at-4.40.57-PM.png 2180w"],"sizes":"(min-width: 720px) 720px"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This resource gives you utility functions in both JavaScript and TypeScript in one line. It includes utilities for Arrays, Date Time, DOM, and more. You are very likely to use these utilities in your project, so it's a nice resource to have bookmarked for when you need them."}]},{"type":"element","tagName":"h3","properties":{"id":"jsorg"},"children":[{"type":"element","tagName":"a","properties":{"href":"https://js.org"},"children":[{"type":"text","value":"JS.ORG"}]}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://backend.shahednasser.com/content/images/2021/10/Screen-Shot-2021-10-17-at-4.43.54-PM.png","className":["kg-image"],"alt":"","loading":"lazy","width":1810,"height":1028,"srcSet":["https://backend.shahednasser.com/content/images/size/w600/2021/10/Screen-Shot-2021-10-17-at-4.43.54-PM.png 600w","https://backend.shahednasser.com/content/images/size/w1000/2021/10/Screen-Shot-2021-10-17-at-4.43.54-PM.png 1000w","https://backend.shahednasser.com/content/images/size/w1600/2021/10/Screen-Shot-2021-10-17-at-4.43.54-PM.png 1600w","https://backend.shahednasser.com/content/images/2021/10/Screen-Shot-2021-10-17-at-4.43.54-PM.png 1810w"],"sizes":"(min-width: 720px) 720px"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://js.org"},"children":[{"type":"text","value":"JS.ORG"}]},{"type":"text","value":" provides repositories that are clearly related to JavaScript with a js.org subdomain. For example, foo.js.org. As there has been a lot of demand for subdomains, now JS.ORG is making sure to limit the subdomains they provide to those of clear relation to JavaScript."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"So, if your repository is related to JavaScript, you can follow the steps on their website to get a free subdomain for your project."}]},{"type":"element","tagName":"h3","properties":{"id":"reactjs-cheat-sheet-by-devhintsio"},"children":[{"type":"element","tagName":"a","properties":{"href":"https://devhints.io/react"},"children":[{"type":"text","value":"React.js Cheat Sheet by devhints.io"}]}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://backend.shahednasser.com/content/images/2021/10/Screen-Shot-2021-10-17-at-4.55.07-PM.png","className":["kg-image"],"alt":"","loading":"lazy","width":2000,"height":1299,"srcSet":["https://backend.shahednasser.com/content/images/size/w600/2021/10/Screen-Shot-2021-10-17-at-4.55.07-PM.png 600w","https://backend.shahednasser.com/content/images/size/w1000/2021/10/Screen-Shot-2021-10-17-at-4.55.07-PM.png 1000w","https://backend.shahednasser.com/content/images/size/w1600/2021/10/Screen-Shot-2021-10-17-at-4.55.07-PM.png 1600w","https://backend.shahednasser.com/content/images/size/w2400/2021/10/Screen-Shot-2021-10-17-at-4.55.07-PM.png 2400w"],"sizes":"(min-width: 720px) 720px"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This cheat sheet is specifically for "},{"type":"element","tagName":"a","properties":{"href":"https://reactjs.org"},"children":[{"type":"text","value":"React"}]},{"type":"text","value":" created by "},{"type":"element","tagName":"a","properties":{"href":"https://devhints.io"},"children":[{"type":"text","value":"devhints.io"}]},{"type":"text","value":". It's a simple and to-the-point cheat sheet that is easily readable. It has information on components, lifecycle, hooks, and more."}]},{"type":"element","tagName":"h2","properties":{"id":"other"},"children":[{"type":"text","value":"Other"}]},{"type":"element","tagName":"h3","properties":{"id":"web-accessibility-evaluation-tools-list"},"children":[{"type":"element","tagName":"a","properties":{"href":"https://www.w3.org/WAI/ER/tools/"},"children":[{"type":"text","value":"Web Accessibility Evaluation Tools List"}]}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://backend.shahednasser.com/content/images/2021/10/Screen-Shot-2021-10-17-at-5.00.50-PM.png","className":["kg-image"],"alt":"","loading":"lazy","width":2000,"height":1125,"srcSet":["https://backend.shahednasser.com/content/images/size/w600/2021/10/Screen-Shot-2021-10-17-at-5.00.50-PM.png 600w","https://backend.shahednasser.com/content/images/size/w1000/2021/10/Screen-Shot-2021-10-17-at-5.00.50-PM.png 1000w","https://backend.shahednasser.com/content/images/size/w1600/2021/10/Screen-Shot-2021-10-17-at-5.00.50-PM.png 1600w","https://backend.shahednasser.com/content/images/size/w2400/2021/10/Screen-Shot-2021-10-17-at-5.00.50-PM.png 2400w"],"sizes":"(min-width: 720px) 720px"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This resource by W3C gives you tools that allow you to check your pages and make sure they properly provide accessibility for all people regardless of their disabilities. You can find tools like "},{"type":"element","tagName":"a","properties":{"href":"https://www.webaccessibility.com"},"children":[{"type":"text","value":"WebAccessibility.com"}]},{"type":"text","value":" and "},{"type":"element","tagName":"a","properties":{"href":"https://color.a11y.com/?wc3"},"children":[{"type":"text","value":"Color Contrast Accessibility Validator"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"h3","properties":{"id":"404-illustrations"},"children":[{"type":"element","tagName":"a","properties":{"href":"https://error404.fun"},"children":[{"type":"text","value":"404 Illustrations"}]}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://backend.shahednasser.com/content/images/2021/10/Screen-Shot-2021-10-17-at-5.08.00-PM.png","className":["kg-image"],"alt":"","loading":"lazy","width":2000,"height":1288,"srcSet":["https://backend.shahednasser.com/content/images/size/w600/2021/10/Screen-Shot-2021-10-17-at-5.08.00-PM.png 600w","https://backend.shahednasser.com/content/images/size/w1000/2021/10/Screen-Shot-2021-10-17-at-5.08.00-PM.png 1000w","https://backend.shahednasser.com/content/images/size/w1600/2021/10/Screen-Shot-2021-10-17-at-5.08.00-PM.png 1600w","https://backend.shahednasser.com/content/images/2021/10/Screen-Shot-2021-10-17-at-5.08.00-PM.png 2370w"],"sizes":"(min-width: 720px) 720px"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This project provides you with free 404 illustrations you can use on your websites to make the 404 page more creative. The illustrations are available in PNG and SVG. You can also see an example of how to use these illustrations for inspiration."}]},{"type":"element","tagName":"h2","properties":{"id":"bonus"},"children":[{"type":"text","value":"Bonus"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This section includes resources that I found helpful but are not necessarily related to Web Development in particular."}]},{"type":"element","tagName":"h3","properties":{"id":"list-of-badges-in-markdown"},"children":[{"type":"element","tagName":"a","properties":{"href":"https://naereen.github.io/badges/"},"children":[{"type":"text","value":"List of Badges, in Markdown "}]}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://backend.shahednasser.com/content/images/2021/10/Screen-Shot-2021-10-17-at-5.04.12-PM.png","className":["kg-image"],"alt":"","loading":"lazy","width":1502,"height":1570,"srcSet":["https://backend.shahednasser.com/content/images/size/w600/2021/10/Screen-Shot-2021-10-17-at-5.04.12-PM.png 600w","https://backend.shahednasser.com/content/images/size/w1000/2021/10/Screen-Shot-2021-10-17-at-5.04.12-PM.png 1000w","https://backend.shahednasser.com/content/images/2021/10/Screen-Shot-2021-10-17-at-5.04.12-PM.png 1502w"],"sizes":"(min-width: 720px) 720px"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This website and GitHub repository give you badges you can use in Markdown files. This is especially helpful for repository maintainers. You can find badges related to the status of the project, the version it supports, data related to the maintainer or contributors, and more."}]},{"type":"element","tagName":"h3","properties":{"id":"git-purr-git-commands-explained-with-cats"},"children":[{"type":"element","tagName":"a","properties":{"href":"https://girliemac.com/blog/2017/12/26/git-purr/"},"children":[{"type":"text","value":"GIT PURR! Git Commands Explained with Cats!"}]}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://backend.shahednasser.com/content/images/2021/10/Screen-Shot-2021-10-17-at-5.18.29-PM.png","className":["kg-image"],"alt":"","loading":"lazy","width":1500,"height":1252,"srcSet":["https://backend.shahednasser.com/content/images/size/w600/2021/10/Screen-Shot-2021-10-17-at-5.18.29-PM.png 600w","https://backend.shahednasser.com/content/images/size/w1000/2021/10/Screen-Shot-2021-10-17-at-5.18.29-PM.png 1000w","https://backend.shahednasser.com/content/images/2021/10/Screen-Shot-2021-10-17-at-5.18.29-PM.png 1500w"],"sizes":"(min-width: 720px) 720px"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"I might be biased since I'm a cat lover, but when I saw this one I loved it. Not only is it an easy way for beginners to grasp Git commands with these drawings and doodles, but they're also super cute."}]},{"type":"element","tagName":"h3","properties":{"id":"machine-learning-roadmap-2020"},"children":[{"type":"element","tagName":"a","properties":{"href":"https://whimsical.com/machine-learning-roadmap-2020-CA7f3ykvXpnJ9Az32vYXva"},"children":[{"type":"text","value":"Machine Learning Roadmap 2020"}]}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://backend.shahednasser.com/content/images/2021/10/Screen-Shot-2021-10-17-at-5.20.32-PM.png","className":["kg-image"],"alt":"","loading":"lazy","width":2000,"height":611,"srcSet":["https://backend.shahednasser.com/content/images/size/w600/2021/10/Screen-Shot-2021-10-17-at-5.20.32-PM.png 600w","https://backend.shahednasser.com/content/images/size/w1000/2021/10/Screen-Shot-2021-10-17-at-5.20.32-PM.png 1000w","https://backend.shahednasser.com/content/images/size/w1600/2021/10/Screen-Shot-2021-10-17-at-5.20.32-PM.png 1600w","https://backend.shahednasser.com/content/images/size/w2400/2021/10/Screen-Shot-2021-10-17-at-5.20.32-PM.png 2400w"],"sizes":"(min-width: 720px) 720px"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The reason I like this roadmap is that it's interactive with notes on how to get started with each roadmap item. I think we're always used to roadmaps related to how to start learning something with images. I personally find interactive resources are a better way to understand and learn something."}]},{"type":"element","tagName":"h2","properties":{"id":"conclusion"},"children":[{"type":"text","value":"Conclusion"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Through creating the "},{"type":"element","tagName":"a","properties":{"href":"https://github.com/shahednasser/awesome-resources"},"children":[{"type":"text","value":"awsome-resources"}]},{"type":"text","value":" repository, I was able to learn about many resources that I personally didn't know existed. I think this is also one of the benefits of giving back to the community and contributing to open source projects."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This list is just a small list of the resources found in "},{"type":"element","tagName":"a","properties":{"href":"https://github.com/shahednasser/awesome-resources"},"children":[{"type":"text","value":"the repository"}]},{"type":"text","value":". I encourage you to check it out and see other resources added by contributors that might be useful to you or others you might know. "}]}],"data":{"quirksMode":false}},"tableOfContents":[{"id":"css","heading":"CSS","items":[{"id":"style-stage-from-modern-css-solutions","heading":"Style Stage from Modern CSS Solutions"},{"id":"grid-and-flex-cheat-sheets-by-chris-malven","heading":"Grid and Flex Cheat Sheets by Chris Malven"},{"id":"glassmorphism-css-generator","heading":"Glassmorphism CSS Generator"}]},{"id":"javascript","heading":"JavaScript","items":[{"id":"coderslangjs","heading":"CoderslangJS"},{"id":"javascript-30","heading":"JavaScript 30"},{"id":"favorite-javascript-utilities-in-single-line-of-code1loc","heading":"Favorite JavaScript Utilities in Single Line of Code - 1LOC"},{"id":"jsorg","heading":"JS.ORG"},{"id":"reactjs-cheat-sheet-by-devhintsio","heading":"React.js Cheat Sheet by devhints.io"}]},{"id":"other","heading":"Other","items":[{"id":"web-accessibility-evaluation-tools-list","heading":"Web Accessibility Evaluation Tools List"},{"id":"404-illustrations","heading":"404 Illustrations"}]},{"id":"bonus","heading":"Bonus","items":[{"id":"list-of-badges-in-markdown","heading":"List of Badges, in Markdown "},{"id":"git-purr-git-commands-explained-with-cats","heading":"GIT PURR! Git Commands Explained with Cats!"},{"id":"machine-learning-roadmap-2020","heading":"Machine Learning Roadmap 2020"}]},{"id":"conclusion","heading":"Conclusion"}]},"featureImageSharp":{"base":"arnel-hasanovic-MNd-Rka1o0Q-unsplash-2.jpg","publicURL":"/static/26c92c0c80eb0123ddf6a7bd8b60e70c/arnel-hasanovic-MNd-Rka1o0Q-unsplash-2.jpg","imageMeta":{"width":1920,"height":1281},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAIBBf/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAHpVWwSP//EABkQAAMBAQEAAAAAAAAAAAAAAAABAhIQEf/aAAgBAQABBQKPRWq5hMyZZ//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABkQAQACAwAAAAAAAAAAAAAAAAEAECExQf/aAAgBAQAGPwIiartYZ//EABkQAAMBAQEAAAAAAAAAAAAAAAABEUFRof/aAAgBAQABPyGiZvdIJY0nRzX0R1j0Uj//2gAMAwEAAgADAAAAEMzv/8QAFREBAQAAAAAAAAAAAAAAAAAAARD/2gAIAQMBAT8QJ//EABYRAQEBAAAAAAAAAAAAAAAAAAABEf/aAAgBAgEBPxCxj//EABsQAQEAAgMBAAAAAAAAAAAAAAERADEhUbFh/9oACAEBAAE/EBLU1qpEfTHaZIRudZzDhfmMLkNRnmSEBFu8Azp0HP/Z","aspectRatio":1.4957264957264957,"src":"/static/26c92c0c80eb0123ddf6a7bd8b60e70c/ea4ab/arnel-hasanovic-MNd-Rka1o0Q-unsplash-2.jpg","srcSet":"/static/26c92c0c80eb0123ddf6a7bd8b60e70c/477ba/arnel-hasanovic-MNd-Rka1o0Q-unsplash-2.jpg 175w,\n/static/26c92c0c80eb0123ddf6a7bd8b60e70c/06776/arnel-hasanovic-MNd-Rka1o0Q-unsplash-2.jpg 350w,\n/static/26c92c0c80eb0123ddf6a7bd8b60e70c/ea4ab/arnel-hasanovic-MNd-Rka1o0Q-unsplash-2.jpg 700w,\n/static/26c92c0c80eb0123ddf6a7bd8b60e70c/3055e/arnel-hasanovic-MNd-Rka1o0Q-unsplash-2.jpg 1050w,\n/static/26c92c0c80eb0123ddf6a7bd8b60e70c/eff08/arnel-hasanovic-MNd-Rka1o0Q-unsplash-2.jpg 1400w,\n/static/26c92c0c80eb0123ddf6a7bd8b60e70c/74fd5/arnel-hasanovic-MNd-Rka1o0Q-unsplash-2.jpg 1920w","srcWebp":"/static/26c92c0c80eb0123ddf6a7bd8b60e70c/89afa/arnel-hasanovic-MNd-Rka1o0Q-unsplash-2.webp","srcSetWebp":"/static/26c92c0c80eb0123ddf6a7bd8b60e70c/9fca7/arnel-hasanovic-MNd-Rka1o0Q-unsplash-2.webp 175w,\n/static/26c92c0c80eb0123ddf6a7bd8b60e70c/37a4e/arnel-hasanovic-MNd-Rka1o0Q-unsplash-2.webp 350w,\n/static/26c92c0c80eb0123ddf6a7bd8b60e70c/89afa/arnel-hasanovic-MNd-Rka1o0Q-unsplash-2.webp 700w,\n/static/26c92c0c80eb0123ddf6a7bd8b60e70c/78e7a/arnel-hasanovic-MNd-Rka1o0Q-unsplash-2.webp 1050w,\n/static/26c92c0c80eb0123ddf6a7bd8b60e70c/03d34/arnel-hasanovic-MNd-Rka1o0Q-unsplash-2.webp 1400w,\n/static/26c92c0c80eb0123ddf6a7bd8b60e70c/6833b/arnel-hasanovic-MNd-Rka1o0Q-unsplash-2.webp 1920w","sizes":"(max-width: 700px) 100vw, 700px"}}}}}]}},"pageContext":{"slug":"css-variables-and-how-to-use-them","prev":"best-websites-to-find-free-resources-for-frontend-web-developers-and-designers","next":"react-hooks-tutorial-create-a-number-trivia-generator-website","tag":"css","limit":3,"skip":0,"primaryTagCount":18,"collectionPaths":{}}},"staticQueryHashes":["1272700106","1676991999","2138873178","2546165603","2681841279","2938721187","293880488","3052966952","4156497161"]}