![](\"https://res-4.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/google-before.png\")
If you're anything like me, then you must love Dark Mode on anything. It is cooler and classier, but also easier for the eyes. It is now getting adapted more in most sites and apps, however, not all of them are going with the trend yet.
The website that we all use the most almost every day is one of them. Google, everyone's favorite search engine, does not support dark mode. So, for the fun of it I thought I'd try and imagine how Google's Dark Mode would look like.
I will be using Material's Dark theme for the color palette for the dark mode.
You already know this but just for the sake of comparison, this is how Google looks like by default:
The first obvious step is to change the background color of the body to a dark color, and change the color of the text in the body to a light color. Based on Material's Dark Theme, the dark color that we will be using for the body is #121212 and the light color for the text is #fff.
So, this is the CSS I'll be adding:
body {\n background-color: #121212;\n color: #fff;\n}And this is the result:
![](\"https://res-1.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/google-first-step.png\")
More work needs to be done. We have sections in the body that explicitly have their background color set to white.
After inspecting the elements in Chrome's Devtools, I found that the elements that have white background color are: #hdtb and .yg51vc for the navigation bar, #appbar for the results bar (the one that shows the number of results found), .sfbg for the background of the header, and .RNNXgb for the background color of the input. I also noticed that #hdtb has a border bottom and the color of it is set to #ebebeb which is a light color, so it needs to be changed as well.
I know what you are thinking, these classes and IDs must be randomly generated. That's what I thought too, however, after testing it on a few tries I found that they are not random. They're always the same.
So the next rules I added were as follows:
#hdtb, .yg51vc, #appbar, .sfbg, .RNNXgb {\n background: #121212;\n}\n\n.RNNXgb {\n background: #2b2b2b !important; /** Give it a different color than the background to stand out **/\n}\n\n.gLFyf {\n color: #fff; /** The input for the search field **/\n}\n\n#hdtb {\n border-bottom-color: #1F1B24;\n}And this was the result:
![](\"https://res-2.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/google-second-step.png\")
So, now the background is dark, but there's a lot more work to do.
Almost all of the text in the page was not affected by changing the color for the body element. So, we need to inspect the elements and see how to change it.
I started with the navigation bar. After inspecting it, the elements .hdtb-mitem a, .hdtb-mitem .GOE98c and .GshZze have the color set to #5f6368. So, I added the following rules:
.hdtb-mitem .GOE98c, .hdtb-mitem a, .GshZze {\n color: #FFFFFF !important;\n}And this was the result:
![](\"https://res-4.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/google-third-step.png\")
Next, the results bar. The class that had the color set to it was .LHJvCe. So I added the following rules:
.LHJvCe {\n color: #FFFFFF;\n}And this was the result:
![](\"https://res-2.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/google-fourth-step.png\")
Next, I moved on to the text and links in the results. Starting with the text and after inspecting the elements, the elements .IsZvec and .aCOpRe em need to be changed. I noticed that .aCOpRe em is used to point out the text that's included in the search query, so I decided to give it a different color.
I added the following rules:
.IsZvec {\n color: #adadad;\n}\n\n.aCOpRe em {\n color: #e4e4e4;\n}As for the citation, or the links breadcrumb above the result, the element that needed to change was cite. I added the following rules:
cite, cite a:link, cite a:visited {\n color: #9c9c9c;\n}And this was the result:
![](\"https://res-1.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/google-fifth-step.png\")
Now for the links of the results, Google just sets the color rule on all a elements. For the \"Translate this page\" link it sets the rule on a.fl:link. Pretty simple. So I added the following rule to change the color:
a, a.fl:link {\n\tcolor: #BB86FC;\n}\n\na:visited {\n\tcolor: #9326ca; /** color for the visited links **/\n}And finally the result was:
![](\"https://res-2.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/google-last-step.png\")
And we're done! Obviously, this is just for the main results page of the website, but it looks nice.
For comparison, here's the difference between the light and dark modes:
Which version did you like of Google more? And which websites or apps do you wish they had dark mode? Let me know!
","url":"https://backend.shahednasser.com/google-in-dark-mode/","canonical_url":null,"uuid":"70e91e99-1748-422c-9d1a-9528e0e0f0c9","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"601aae5672ad5e001ed32c8f","reading_time":4,"send_email_when_published":null,"email_subject":null,"childHtmlRehype":{"html":"If you're anything like me, then you must love Dark Mode on anything. It is cooler and classier, but also easier for the eyes. It is now getting adapted more in most sites and apps, however, not all of them are going with the trend yet.
The website that we all use the most almost every day is one of them. Google, everyone's favorite search engine, does not support dark mode. So, for the fun of it I thought I'd try and imagine how Google's Dark Mode would look like.
I will be using Material's Dark theme for the color palette for the dark mode.
You already know this but just for the sake of comparison, this is how Google looks like by default:
The first obvious step is to change the background color of the body to a dark color, and change the color of the text in the body to a light color. Based on Material's Dark Theme, the dark color that we will be using for the body is #121212 and the light color for the text is #fff.
So, this is the CSS I'll be adding:
body {\n background-color: #121212;\n color: #fff;\n}And this is the result:
More work needs to be done. We have sections in the body that explicitly have their background color set to white.
After inspecting the elements in Chrome's Devtools, I found that the elements that have white background color are: #hdtb and .yg51vc for the navigation bar, #appbar for the results bar (the one that shows the number of results found), .sfbg for the background of the header, and .RNNXgb for the background color of the input. I also noticed that #hdtb has a border bottom and the color of it is set to #ebebeb which is a light color, so it needs to be changed as well.
I know what you are thinking, these classes and IDs must be randomly generated. That's what I thought too, however, after testing it on a few tries I found that they are not random. They're always the same.
So the next rules I added were as follows:
#hdtb, .yg51vc, #appbar, .sfbg, .RNNXgb {\n background: #121212;\n}\n\n.RNNXgb {\n background: #2b2b2b !important; /** Give it a different color than the background to stand out **/\n}\n\n.gLFyf {\n color: #fff; /** The input for the search field **/\n}\n\n#hdtb {\n border-bottom-color: #1F1B24;\n}And this was the result:
So, now the background is dark, but there's a lot more work to do.
Almost all of the text in the page was not affected by changing the color for the body element. So, we need to inspect the elements and see how to change it.
I started with the navigation bar. After inspecting it, the elements .hdtb-mitem a, .hdtb-mitem .GOE98c and .GshZze have the color set to #5f6368. So, I added the following rules:
.hdtb-mitem .GOE98c, .hdtb-mitem a, .GshZze {\n color: #FFFFFF !important;\n}And this was the result:
Next, the results bar. The class that had the color set to it was .LHJvCe. So I added the following rules:
.LHJvCe {\n color: #FFFFFF;\n}And this was the result:
Next, I moved on to the text and links in the results. Starting with the text and after inspecting the elements, the elements .IsZvec and .aCOpRe em need to be changed. I noticed that .aCOpRe em is used to point out the text that's included in the search query, so I decided to give it a different color.
I added the following rules:
.IsZvec {\n color: #adadad;\n}\n\n.aCOpRe em {\n color: #e4e4e4;\n}As for the citation, or the links breadcrumb above the result, the element that needed to change was cite. I added the following rules:
cite, cite a:link, cite a:visited {\n color: #9c9c9c;\n}And this was the result:
Now for the links of the results, Google just sets the color rule on all a elements. For the \"Translate this page\" link it sets the rule on a.fl:link. Pretty simple. So I added the following rule to change the color:
a, a.fl:link {\n\tcolor: #BB86FC;\n}\n\na:visited {\n\tcolor: #9326ca; /** color for the visited links **/\n}And finally the result was:
And we're done! Obviously, this is just for the main results page of the website, but it looks nice.
For comparison, here's the difference between the light and dark modes:
Which version did you like of Google more? And which websites or apps do you wish they had dark mode? Let me know!
","htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you're anything like me, then you must love Dark Mode on anything. It is cooler and classier, but also easier for the eyes. It is now getting adapted more in most sites and apps, however, not all of them are going with the trend yet."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The website that we all use the most almost every day is one of them. Google, everyone's favorite search engine, does not support dark mode. So, for the fun of it I thought I'd try and imagine how Google's Dark Mode would look like."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"I will be using Material's "},{"type":"element","tagName":"a","properties":{"href":"https://material.io/design/color/dark-theme.html#properties"},"children":[{"type":"text","value":"Dark theme"}]},{"type":"text","value":" for the color palette for the dark mode."}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You already know this but just for the sake of comparison, this is how Google looks like by default:"}]},{"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/google-before.png","className":["kg-image"],"alt":"","loading":"lazy"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The first obvious step is to change the background color of the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"body"}]},{"type":"text","value":" to a dark color, and change the color of the text in the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"body"}]},{"type":"text","value":" to a light color. Based on Material's Dark Theme, the dark color that we will be using for the body is "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"#121212"}]},{"type":"text","value":" and the light color for the text is "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"#fff"}]},{"type":"text","value":". "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"So, this is the CSS I'll be adding:"}]},{"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":"body"}]},{"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":" #121212"},{"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":"color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" #fff"},{"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":"And this is the result:"}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://res-1.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/google-first-step.png","className":["kg-image"],"alt":"","loading":"lazy"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"More work needs to be done. We have sections in the body that explicitly have their background color set to white. "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"After inspecting the elements in Chrome's Devtools, I found that the elements that have white background color are: "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"#hdtb"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":".yg51vc"}]},{"type":"text","value":" for the navigation bar, "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"#appbar"}]},{"type":"text","value":" for the results bar (the one that shows the number of results found), "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":".sfbg"}]},{"type":"text","value":" for the background of the header, and "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":".RNNXgb"}]},{"type":"text","value":" for the background color of the input. I also noticed that "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"#hdtb"}]},{"type":"text","value":" has a border bottom and the color of it is set to "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"#ebebeb"}]},{"type":"text","value":" which is a light color, so it needs to be changed as well."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"I know what you are thinking, these classes and IDs must be randomly generated. That's what I thought too, however, after testing it on a few tries I found that they are not random. They're always the same."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"So the next rules I added were as follows:"}]},{"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":"#hdtb, .yg51vc, #appbar, .sfbg, .RNNXgb"}]},{"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":" #121212"},{"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":".RNNXgb"}]},{"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":" #2b2b2b "},{"type":"element","tagName":"span","properties":{"className":["token","important"]},"children":[{"type":"text","value":"!important"}]},{"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":"/** Give it a different color than the background to stand out **/"}]},{"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":".gLFyf"}]},{"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":"color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" #fff"},{"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":"/** The input for the search field **/"}]},{"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":"#hdtb"}]},{"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":"border-bottom-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" #1F1B24"},{"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":"And this was the result:"}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://res-2.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/google-second-step.png","className":["kg-image"],"alt":"","loading":"lazy"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"So, now the background is dark, but there's a lot more work to do. "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Almost all of the text in the page was not affected by changing the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"color"}]},{"type":"text","value":" for the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"body"}]},{"type":"text","value":" element. So, we need to inspect the elements and see how to change it."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"I started with the navigation bar. After inspecting it, the elements "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":".hdtb-mitem a"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":".hdtb-mitem .GOE98c"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":".GshZze"}]},{"type":"text","value":" have the color set to "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"#5f6368"}]},{"type":"text","value":". So, I added the following rules:"}]},{"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":".hdtb-mitem .GOE98c, .hdtb-mitem a, .GshZze"}]},{"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":"color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" #FFFFFF "},{"type":"element","tagName":"span","properties":{"className":["token","important"]},"children":[{"type":"text","value":"!important"}]},{"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":"And this was the result:"}]},{"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/google-third-step.png","className":["kg-image"],"alt":"","loading":"lazy"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Next, the results bar. The class that had the color set to it was "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":".LHJvCe"}]},{"type":"text","value":". So I added the following rules:"}]},{"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":".LHJvCe"}]},{"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":"color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" #FFFFFF"},{"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":"And this was the result:"}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://res-2.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/google-fourth-step.png","className":["kg-image"],"alt":"","loading":"lazy"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Next, I moved on to the text and links in the results. Starting with the text and after inspecting the elements, the elements "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":".IsZvec"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":".aCOpRe em"}]},{"type":"text","value":" need to be changed. I noticed that "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":".aCOpRe em"}]},{"type":"text","value":" is used to point out the text that's included in the search query, so I decided to give it a different color."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"I added the following rules:"}]},{"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":".IsZvec"}]},{"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":"color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" #adadad"},{"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":".aCOpRe em"}]},{"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":"color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" #e4e4e4"},{"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":"As for the citation, or the links breadcrumb above the result, the element that needed to change was "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"cite"}]},{"type":"text","value":". I added the following rules:"}]},{"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":"cite, cite a:link, cite a:visited"}]},{"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":"color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" #9c9c9c"},{"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":"And this was the result:"}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://res-1.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/google-fifth-step.png","className":["kg-image"],"alt":"","loading":"lazy"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Now for the links of the results, Google just sets the color rule on all "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"a"}]},{"type":"text","value":" elements. For the \"Translate this page\" link it sets the rule on "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"a.fl:link"}]},{"type":"text","value":". Pretty simple. So I added the following rule to change the 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":"a, a.fl:link"}]},{"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":" #BB86FC"},{"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":"a:visited"}]},{"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":" #9326ca"},{"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":"/** color for the visited links **/"}]},{"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":"And finally the result was:"}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://res-2.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/google-last-step.png","className":["kg-image"],"alt":"","loading":"lazy"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"And we're done! Obviously, this is just for the main results page of the website, but it looks nice."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For comparison, here's the difference between the light and dark modes:"}]},{"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://res-4.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/google-before.png","width":1844,"height":820,"loading":"lazy","alt":""},"children":[]}]},{"type":"element","tagName":"div","properties":{"className":["kg-gallery-image"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://res-2.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/google-last-step.png","width":1838,"height":823,"loading":"lazy","alt":""},"children":[]}]}]}]}]},{"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":"Which version did you like of Google more? And which websites or apps do you wish they had dark mode? Let me know!"}]}],"data":{"quirksMode":false}},"tableOfContents":[{"id":"conclusion","heading":"Conclusion"}]},"featureImageSharp":{"base":"photo-1573804633927-bfcbcd909acd.jpg","publicURL":"/static/ac4d8a92057297fd689566be0039ed6a/photo-1573804633927-bfcbcd909acd.jpg","imageMeta":{"width":2000,"height":1252},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAIDBf/EABYBAQEBAAAAAAAAAAAAAAAAAAABAv/aAAwDAQACEAMQAAAB4dZ0Epr/xAAZEAEBAAMBAAAAAAAAAAAAAAABAAIREgP/2gAIAQEAAQUCxx3Pmlwwpdttv//EABURAQEAAAAAAAAAAAAAAAAAAAAh/9oACAEDAQE/AUf/xAAVEQEBAAAAAAAAAAAAAAAAAAAQQf/aAAgBAgEBPwGn/8QAFhABAQEAAAAAAAAAAAAAAAAAEDEA/9oACAEBAAY/Aml3/8QAGxABAQACAwEAAAAAAAAAAAAAAQBBYREhMZH/2gAIAQEAAT8h+D2YxIOJTkRbXq3L/9oADAMBAAIAAwAAABDPL//EABgRAAMBAQAAAAAAAAAAAAAAAAARIQFh/9oACAEDAQE/EIumTWf/xAAXEQADAQAAAAAAAAAAAAAAAAAAASFR/9oACAECAQE/EI0wp//EABsQAQEBAQEAAwAAAAAAAAAAAAERADEhUaHR/9oACAEBAAE/EFSknR4ZsMTvvPjQH2Zjyo4jJvQbRAVQ0/03/9k=","aspectRatio":1.5950920245398772,"src":"/static/ac4d8a92057297fd689566be0039ed6a/d5c54/photo-1573804633927-bfcbcd909acd.jpg","srcSet":"/static/ac4d8a92057297fd689566be0039ed6a/65d8c/photo-1573804633927-bfcbcd909acd.jpg 260w,\n/static/ac4d8a92057297fd689566be0039ed6a/c5f21/photo-1573804633927-bfcbcd909acd.jpg 520w,\n/static/ac4d8a92057297fd689566be0039ed6a/d5c54/photo-1573804633927-bfcbcd909acd.jpg 1040w,\n/static/ac4d8a92057297fd689566be0039ed6a/81a53/photo-1573804633927-bfcbcd909acd.jpg 1560w,\n/static/ac4d8a92057297fd689566be0039ed6a/4e5f3/photo-1573804633927-bfcbcd909acd.jpg 2000w","srcWebp":"/static/ac4d8a92057297fd689566be0039ed6a/e4875/photo-1573804633927-bfcbcd909acd.webp","srcSetWebp":"/static/ac4d8a92057297fd689566be0039ed6a/dc8f3/photo-1573804633927-bfcbcd909acd.webp 260w,\n/static/ac4d8a92057297fd689566be0039ed6a/2db4b/photo-1573804633927-bfcbcd909acd.webp 520w,\n/static/ac4d8a92057297fd689566be0039ed6a/e4875/photo-1573804633927-bfcbcd909acd.webp 1040w,\n/static/ac4d8a92057297fd689566be0039ed6a/f5845/photo-1573804633927-bfcbcd909acd.webp 1560w,\n/static/ac4d8a92057297fd689566be0039ed6a/49d6b/photo-1573804633927-bfcbcd909acd.webp 2000w","sizes":"(max-width: 1040px) 100vw, 1040px"}}}},"ghostPost":{"id":"Ghost__Post__6127ba1b3ed159214d382e81","title":"Google In Dark Mode","slug":"google-in-dark-mode","featured":false,"feature_image":"https://res-5.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/photo-1573804633927-bfcbcd909acd.jpg","excerpt":"If you're anything like me, then you must love Dark Mode on anything. It is cooler and classier, but also easier for the eyes. So, what if Google was in Dark Mode?","custom_excerpt":"If you're anything like me, then you must love Dark Mode on anything. It is cooler and classier, but also easier for the eyes. So, what if Google was in Dark Mode?","visibility":"public","created_at_pretty":"3 Feb 2021","published_at_pretty":"4 Feb 2021","updated_at_pretty":"26 Aug 2021","created_at":"2021-02-03T14:08:22.000+00:00","published_at":"2021-02-04T07:44:01.000+00:00","updated_at":"2021-08-26T17:49:55.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":"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":"If you're anything like me, then you must love Dark Mode on anything. It is\ncooler and classier, but also easier for the eyes. It is now getting adapted\nmore in most sites and apps, however, not all of them are going with the trend\nyet.\n\nThe website that we all use the most almost every day is one of them. Google,\neveryone's favorite search engine, does not support dark mode. So, for the fun\nof it I thought I'd try and imagine how Google's Dark Mode would look like.\n\nI will be using Material's Dark theme\n[https://material.io/design/color/dark-theme.html#properties] for the color\npalette for the dark mode.\n\n\n--------------------------------------------------------------------------------\n\nYou already know this but just for the sake of comparison, this is how Google\nlooks like by default:\n\nThe first obvious step is to change the background color of the body to a dark\ncolor, and change the color of the text in the body to a light color. Based on\nMaterial's Dark Theme, the dark color that we will be using for the body is \n#121212 and the light color for the text is #fff. \n\nSo, this is the CSS I'll be adding:\n\nbody {\n background-color: #121212;\n color: #fff;\n}\n\nAnd this is the result:\n\nMore work needs to be done. We have sections in the body that explicitly have\ntheir background color set to white. \n\nAfter inspecting the elements in Chrome's Devtools, I found that the elements\nthat have white background color are: #hdtb and .yg51vc for the navigation bar, \n#appbar for the results bar (the one that shows the number of results found), \n.sfbg for the background of the header, and .RNNXgb for the background color of\nthe input. I also noticed that #hdtb has a border bottom and the color of it is\nset to #ebebeb which is a light color, so it needs to be changed as well.\n\nI know what you are thinking, these classes and IDs must be randomly generated.\nThat's what I thought too, however, after testing it on a few tries I found that\nthey are not random. They're always the same.\n\nSo the next rules I added were as follows:\n\n#hdtb, .yg51vc, #appbar, .sfbg, .RNNXgb {\n background: #121212;\n}\n\n.RNNXgb {\n background: #2b2b2b !important; /** Give it a different color than the background to stand out **/\n}\n\n.gLFyf {\n color: #fff; /** The input for the search field **/\n}\n\n#hdtb {\n border-bottom-color: #1F1B24;\n}\n\nAnd this was the result:\n\nSo, now the background is dark, but there's a lot more work to do. \n\nAlmost all of the text in the page was not affected by changing the color for\nthe body element. So, we need to inspect the elements and see how to change it.\n\nI started with the navigation bar. After inspecting it, the elements .hdtb-mitem\na, .hdtb-mitem .GOE98c and .GshZze have the color set to #5f6368. So, I added\nthe following rules:\n\n.hdtb-mitem .GOE98c, .hdtb-mitem a, .GshZze {\n color: #FFFFFF !important;\n}\n\nAnd this was the result:\n\nNext, the results bar. The class that had the color set to it was .LHJvCe. So I\nadded the following rules:\n\n.LHJvCe {\n color: #FFFFFF;\n}\n\nAnd this was the result:\n\nNext, I moved on to the text and links in the results. Starting with the text\nand after inspecting the elements, the elements .IsZvec and .aCOpRe em need to\nbe changed. I noticed that .aCOpRe em is used to point out the text that's\nincluded in the search query, so I decided to give it a different color.\n\nI added the following rules:\n\n.IsZvec {\n color: #adadad;\n}\n\n.aCOpRe em {\n color: #e4e4e4;\n}\n\nAs for the citation, or the links breadcrumb above the result, the element that\nneeded to change was cite. I added the following rules:\n\ncite, cite a:link, cite a:visited {\n color: #9c9c9c;\n}\n\nAnd this was the result:\n\nNow for the links of the results, Google just sets the color rule on all a \nelements. For the \"Translate this page\" link it sets the rule on a.fl:link.\nPretty simple. So I added the following rule to change the color: \n\na, a.fl:link {\n\tcolor: #BB86FC;\n}\n\na:visited {\n\tcolor: #9326ca; /** color for the visited links **/\n}\n\nAnd finally the result was:\n\nAnd we're done! Obviously, this is just for the main results page of the\nwebsite, but it looks nice.\n\nFor comparison, here's the difference between the light and dark modes:\n\n\n--------------------------------------------------------------------------------\n\nConclusion\nWhich version did you like of Google more? And which websites or apps do you\nwish they had dark mode? Let me know!","html":"If you're anything like me, then you must love Dark Mode on anything. It is cooler and classier, but also easier for the eyes. It is now getting adapted more in most sites and apps, however, not all of them are going with the trend yet.
The website that we all use the most almost every day is one of them. Google, everyone's favorite search engine, does not support dark mode. So, for the fun of it I thought I'd try and imagine how Google's Dark Mode would look like.
I will be using Material's Dark theme for the color palette for the dark mode.
You already know this but just for the sake of comparison, this is how Google looks like by default:
The first obvious step is to change the background color of the body to a dark color, and change the color of the text in the body to a light color. Based on Material's Dark Theme, the dark color that we will be using for the body is #121212 and the light color for the text is #fff.
So, this is the CSS I'll be adding:
body {\n background-color: #121212;\n color: #fff;\n}And this is the result:
More work needs to be done. We have sections in the body that explicitly have their background color set to white.
After inspecting the elements in Chrome's Devtools, I found that the elements that have white background color are: #hdtb and .yg51vc for the navigation bar, #appbar for the results bar (the one that shows the number of results found), .sfbg for the background of the header, and .RNNXgb for the background color of the input. I also noticed that #hdtb has a border bottom and the color of it is set to #ebebeb which is a light color, so it needs to be changed as well.
I know what you are thinking, these classes and IDs must be randomly generated. That's what I thought too, however, after testing it on a few tries I found that they are not random. They're always the same.
So the next rules I added were as follows:
#hdtb, .yg51vc, #appbar, .sfbg, .RNNXgb {\n background: #121212;\n}\n\n.RNNXgb {\n background: #2b2b2b !important; /** Give it a different color than the background to stand out **/\n}\n\n.gLFyf {\n color: #fff; /** The input for the search field **/\n}\n\n#hdtb {\n border-bottom-color: #1F1B24;\n}And this was the result:
So, now the background is dark, but there's a lot more work to do.
Almost all of the text in the page was not affected by changing the color for the body element. So, we need to inspect the elements and see how to change it.
I started with the navigation bar. After inspecting it, the elements .hdtb-mitem a, .hdtb-mitem .GOE98c and .GshZze have the color set to #5f6368. So, I added the following rules:
.hdtb-mitem .GOE98c, .hdtb-mitem a, .GshZze {\n color: #FFFFFF !important;\n}And this was the result:
Next, the results bar. The class that had the color set to it was .LHJvCe. So I added the following rules:
.LHJvCe {\n color: #FFFFFF;\n}And this was the result:
Next, I moved on to the text and links in the results. Starting with the text and after inspecting the elements, the elements .IsZvec and .aCOpRe em need to be changed. I noticed that .aCOpRe em is used to point out the text that's included in the search query, so I decided to give it a different color.
I added the following rules:
.IsZvec {\n color: #adadad;\n}\n\n.aCOpRe em {\n color: #e4e4e4;\n}As for the citation, or the links breadcrumb above the result, the element that needed to change was cite. I added the following rules:
cite, cite a:link, cite a:visited {\n color: #9c9c9c;\n}And this was the result:
Now for the links of the results, Google just sets the color rule on all a elements. For the \"Translate this page\" link it sets the rule on a.fl:link. Pretty simple. So I added the following rule to change the color:
a, a.fl:link {\n\tcolor: #BB86FC;\n}\n\na:visited {\n\tcolor: #9326ca; /** color for the visited links **/\n}And finally the result was:
And we're done! Obviously, this is just for the main results page of the website, but it looks nice.
For comparison, here's the difference between the light and dark modes:
Which version did you like of Google more? And which websites or apps do you wish they had dark mode? Let me know!
","url":"https://backend.shahednasser.com/google-in-dark-mode/","canonical_url":null,"uuid":"70e91e99-1748-422c-9d1a-9528e0e0f0c9","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"601aae5672ad5e001ed32c8f","reading_time":4,"send_email_when_published":null,"email_subject":null,"childHtmlRehype":{"html":"If you're anything like me, then you must love Dark Mode on anything. It is cooler and classier, but also easier for the eyes. It is now getting adapted more in most sites and apps, however, not all of them are going with the trend yet.
The website that we all use the most almost every day is one of them. Google, everyone's favorite search engine, does not support dark mode. So, for the fun of it I thought I'd try and imagine how Google's Dark Mode would look like.
I will be using Material's Dark theme for the color palette for the dark mode.
You already know this but just for the sake of comparison, this is how Google looks like by default:
The first obvious step is to change the background color of the body to a dark color, and change the color of the text in the body to a light color. Based on Material's Dark Theme, the dark color that we will be using for the body is #121212 and the light color for the text is #fff.
So, this is the CSS I'll be adding:
body {\n background-color: #121212;\n color: #fff;\n}And this is the result:
More work needs to be done. We have sections in the body that explicitly have their background color set to white.
After inspecting the elements in Chrome's Devtools, I found that the elements that have white background color are: #hdtb and .yg51vc for the navigation bar, #appbar for the results bar (the one that shows the number of results found), .sfbg for the background of the header, and .RNNXgb for the background color of the input. I also noticed that #hdtb has a border bottom and the color of it is set to #ebebeb which is a light color, so it needs to be changed as well.
I know what you are thinking, these classes and IDs must be randomly generated. That's what I thought too, however, after testing it on a few tries I found that they are not random. They're always the same.
So the next rules I added were as follows:
#hdtb, .yg51vc, #appbar, .sfbg, .RNNXgb {\n background: #121212;\n}\n\n.RNNXgb {\n background: #2b2b2b !important; /** Give it a different color than the background to stand out **/\n}\n\n.gLFyf {\n color: #fff; /** The input for the search field **/\n}\n\n#hdtb {\n border-bottom-color: #1F1B24;\n}And this was the result:
So, now the background is dark, but there's a lot more work to do.
Almost all of the text in the page was not affected by changing the color for the body element. So, we need to inspect the elements and see how to change it.
I started with the navigation bar. After inspecting it, the elements .hdtb-mitem a, .hdtb-mitem .GOE98c and .GshZze have the color set to #5f6368. So, I added the following rules:
.hdtb-mitem .GOE98c, .hdtb-mitem a, .GshZze {\n color: #FFFFFF !important;\n}And this was the result:
Next, the results bar. The class that had the color set to it was .LHJvCe. So I added the following rules:
.LHJvCe {\n color: #FFFFFF;\n}And this was the result:
Next, I moved on to the text and links in the results. Starting with the text and after inspecting the elements, the elements .IsZvec and .aCOpRe em need to be changed. I noticed that .aCOpRe em is used to point out the text that's included in the search query, so I decided to give it a different color.
I added the following rules:
.IsZvec {\n color: #adadad;\n}\n\n.aCOpRe em {\n color: #e4e4e4;\n}As for the citation, or the links breadcrumb above the result, the element that needed to change was cite. I added the following rules:
cite, cite a:link, cite a:visited {\n color: #9c9c9c;\n}And this was the result:
Now for the links of the results, Google just sets the color rule on all a elements. For the \"Translate this page\" link it sets the rule on a.fl:link. Pretty simple. So I added the following rule to change the color:
a, a.fl:link {\n\tcolor: #BB86FC;\n}\n\na:visited {\n\tcolor: #9326ca; /** color for the visited links **/\n}And finally the result was:
And we're done! Obviously, this is just for the main results page of the website, but it looks nice.
For comparison, here's the difference between the light and dark modes:
Which version did you like of Google more? And which websites or apps do you wish they had dark mode? Let me know!
","htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you're anything like me, then you must love Dark Mode on anything. It is cooler and classier, but also easier for the eyes. It is now getting adapted more in most sites and apps, however, not all of them are going with the trend yet."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The website that we all use the most almost every day is one of them. Google, everyone's favorite search engine, does not support dark mode. So, for the fun of it I thought I'd try and imagine how Google's Dark Mode would look like."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"I will be using Material's "},{"type":"element","tagName":"a","properties":{"href":"https://material.io/design/color/dark-theme.html#properties"},"children":[{"type":"text","value":"Dark theme"}]},{"type":"text","value":" for the color palette for the dark mode."}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You already know this but just for the sake of comparison, this is how Google looks like by default:"}]},{"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/google-before.png","className":["kg-image"],"alt":"","loading":"lazy"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The first obvious step is to change the background color of the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"body"}]},{"type":"text","value":" to a dark color, and change the color of the text in the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"body"}]},{"type":"text","value":" to a light color. Based on Material's Dark Theme, the dark color that we will be using for the body is "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"#121212"}]},{"type":"text","value":" and the light color for the text is "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"#fff"}]},{"type":"text","value":". "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"So, this is the CSS I'll be adding:"}]},{"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":"body"}]},{"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":" #121212"},{"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":"color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" #fff"},{"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":"And this is the result:"}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://res-1.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/google-first-step.png","className":["kg-image"],"alt":"","loading":"lazy"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"More work needs to be done. We have sections in the body that explicitly have their background color set to white. "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"After inspecting the elements in Chrome's Devtools, I found that the elements that have white background color are: "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"#hdtb"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":".yg51vc"}]},{"type":"text","value":" for the navigation bar, "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"#appbar"}]},{"type":"text","value":" for the results bar (the one that shows the number of results found), "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":".sfbg"}]},{"type":"text","value":" for the background of the header, and "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":".RNNXgb"}]},{"type":"text","value":" for the background color of the input. I also noticed that "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"#hdtb"}]},{"type":"text","value":" has a border bottom and the color of it is set to "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"#ebebeb"}]},{"type":"text","value":" which is a light color, so it needs to be changed as well."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"I know what you are thinking, these classes and IDs must be randomly generated. That's what I thought too, however, after testing it on a few tries I found that they are not random. They're always the same."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"So the next rules I added were as follows:"}]},{"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":"#hdtb, .yg51vc, #appbar, .sfbg, .RNNXgb"}]},{"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":" #121212"},{"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":".RNNXgb"}]},{"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":" #2b2b2b "},{"type":"element","tagName":"span","properties":{"className":["token","important"]},"children":[{"type":"text","value":"!important"}]},{"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":"/** Give it a different color than the background to stand out **/"}]},{"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":".gLFyf"}]},{"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":"color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" #fff"},{"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":"/** The input for the search field **/"}]},{"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":"#hdtb"}]},{"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":"border-bottom-color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" #1F1B24"},{"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":"And this was the result:"}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://res-2.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/google-second-step.png","className":["kg-image"],"alt":"","loading":"lazy"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"So, now the background is dark, but there's a lot more work to do. "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Almost all of the text in the page was not affected by changing the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"color"}]},{"type":"text","value":" for the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"body"}]},{"type":"text","value":" element. So, we need to inspect the elements and see how to change it."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"I started with the navigation bar. After inspecting it, the elements "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":".hdtb-mitem a"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":".hdtb-mitem .GOE98c"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":".GshZze"}]},{"type":"text","value":" have the color set to "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"#5f6368"}]},{"type":"text","value":". So, I added the following rules:"}]},{"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":".hdtb-mitem .GOE98c, .hdtb-mitem a, .GshZze"}]},{"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":"color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" #FFFFFF "},{"type":"element","tagName":"span","properties":{"className":["token","important"]},"children":[{"type":"text","value":"!important"}]},{"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":"And this was the result:"}]},{"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/google-third-step.png","className":["kg-image"],"alt":"","loading":"lazy"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Next, the results bar. The class that had the color set to it was "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":".LHJvCe"}]},{"type":"text","value":". So I added the following rules:"}]},{"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":".LHJvCe"}]},{"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":"color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" #FFFFFF"},{"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":"And this was the result:"}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://res-2.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/google-fourth-step.png","className":["kg-image"],"alt":"","loading":"lazy"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Next, I moved on to the text and links in the results. Starting with the text and after inspecting the elements, the elements "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":".IsZvec"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":".aCOpRe em"}]},{"type":"text","value":" need to be changed. I noticed that "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":".aCOpRe em"}]},{"type":"text","value":" is used to point out the text that's included in the search query, so I decided to give it a different color."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"I added the following rules:"}]},{"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":".IsZvec"}]},{"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":"color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" #adadad"},{"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":".aCOpRe em"}]},{"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":"color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" #e4e4e4"},{"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":"As for the citation, or the links breadcrumb above the result, the element that needed to change was "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"cite"}]},{"type":"text","value":". I added the following rules:"}]},{"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":"cite, cite a:link, cite a:visited"}]},{"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":"color"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" #9c9c9c"},{"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":"And this was the result:"}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://res-1.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/google-fifth-step.png","className":["kg-image"],"alt":"","loading":"lazy"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Now for the links of the results, Google just sets the color rule on all "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"a"}]},{"type":"text","value":" elements. For the \"Translate this page\" link it sets the rule on "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"a.fl:link"}]},{"type":"text","value":". Pretty simple. So I added the following rule to change the 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":"a, a.fl:link"}]},{"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":" #BB86FC"},{"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":"a:visited"}]},{"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":" #9326ca"},{"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":"/** color for the visited links **/"}]},{"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":"And finally the result was:"}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://res-2.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/google-last-step.png","className":["kg-image"],"alt":"","loading":"lazy"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"And we're done! Obviously, this is just for the main results page of the website, but it looks nice."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For comparison, here's the difference between the light and dark modes:"}]},{"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://res-4.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/google-before.png","width":1844,"height":820,"loading":"lazy","alt":""},"children":[]}]},{"type":"element","tagName":"div","properties":{"className":["kg-gallery-image"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://res-2.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/google-last-step.png","width":1838,"height":823,"loading":"lazy","alt":""},"children":[]}]}]}]}]},{"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":"Which version did you like of Google more? And which websites or apps do you wish they had dark mode? Let me know!"}]}],"data":{"quirksMode":false}},"tableOfContents":[{"id":"conclusion","heading":"Conclusion"}]},"featureImageSharp":{"base":"photo-1573804633927-bfcbcd909acd.jpg","publicURL":"/static/ac4d8a92057297fd689566be0039ed6a/photo-1573804633927-bfcbcd909acd.jpg","imageMeta":{"width":2000,"height":1252},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAIDBf/EABYBAQEBAAAAAAAAAAAAAAAAAAABAv/aAAwDAQACEAMQAAAB4dZ0Epr/xAAZEAEBAAMBAAAAAAAAAAAAAAABAAIREgP/2gAIAQEAAQUCxx3Pmlwwpdttv//EABURAQEAAAAAAAAAAAAAAAAAAAAh/9oACAEDAQE/AUf/xAAVEQEBAAAAAAAAAAAAAAAAAAAQQf/aAAgBAgEBPwGn/8QAFhABAQEAAAAAAAAAAAAAAAAAEDEA/9oACAEBAAY/Aml3/8QAGxABAQACAwEAAAAAAAAAAAAAAQBBYREhMZH/2gAIAQEAAT8h+D2YxIOJTkRbXq3L/9oADAMBAAIAAwAAABDPL//EABgRAAMBAQAAAAAAAAAAAAAAAAARIQFh/9oACAEDAQE/EIumTWf/xAAXEQADAQAAAAAAAAAAAAAAAAAAASFR/9oACAECAQE/EI0wp//EABsQAQEBAQEAAwAAAAAAAAAAAAERADEhUaHR/9oACAEBAAE/EFSknR4ZsMTvvPjQH2Zjyo4jJvQbRAVQ0/03/9k=","aspectRatio":1.5950920245398772,"src":"/static/ac4d8a92057297fd689566be0039ed6a/d5c54/photo-1573804633927-bfcbcd909acd.jpg","srcSet":"/static/ac4d8a92057297fd689566be0039ed6a/65d8c/photo-1573804633927-bfcbcd909acd.jpg 260w,\n/static/ac4d8a92057297fd689566be0039ed6a/c5f21/photo-1573804633927-bfcbcd909acd.jpg 520w,\n/static/ac4d8a92057297fd689566be0039ed6a/d5c54/photo-1573804633927-bfcbcd909acd.jpg 1040w,\n/static/ac4d8a92057297fd689566be0039ed6a/81a53/photo-1573804633927-bfcbcd909acd.jpg 1560w,\n/static/ac4d8a92057297fd689566be0039ed6a/4e5f3/photo-1573804633927-bfcbcd909acd.jpg 2000w","srcWebp":"/static/ac4d8a92057297fd689566be0039ed6a/e4875/photo-1573804633927-bfcbcd909acd.webp","srcSetWebp":"/static/ac4d8a92057297fd689566be0039ed6a/dc8f3/photo-1573804633927-bfcbcd909acd.webp 260w,\n/static/ac4d8a92057297fd689566be0039ed6a/2db4b/photo-1573804633927-bfcbcd909acd.webp 520w,\n/static/ac4d8a92057297fd689566be0039ed6a/e4875/photo-1573804633927-bfcbcd909acd.webp 1040w,\n/static/ac4d8a92057297fd689566be0039ed6a/f5845/photo-1573804633927-bfcbcd909acd.webp 1560w,\n/static/ac4d8a92057297fd689566be0039ed6a/49d6b/photo-1573804633927-bfcbcd909acd.webp 2000w","sizes":"(max-width: 1040px) 100vw, 1040px"}}}},"prev":{"id":"Ghost__Post__6127ba1b3ed159214d382e82","title":"5 UX Issues Apple Needs To Fix In The Messages App","slug":"5-ux-issues-apple-needs-to-fix-in-the-messages","featured":false,"feature_image":"https://res-4.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/photo-1552947602-4640901e9c67.jpg","excerpt":"The user experience in the Messages App needs more attention and improvement, especially when certain features are available in easier ways in other apps. ","custom_excerpt":"The user experience in the Messages App needs more attention and improvement, especially when certain features are available in easier ways in other apps. ","visibility":"public","created_at_pretty":"4 Feb 2021","published_at_pretty":"5 Feb 2021","updated_at_pretty":"26 Aug 2021","created_at":"2021-02-04T14:04:51.000+00:00","published_at":"2021-02-05T07:37:02.000+00:00","updated_at":"2021-08-26T17:49:47.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":"my-experience","url":"https://backend.shahednasser.com/tag/my-experience/","name":"My Experience","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/photo-1493612276216-ee3925520721-2-1.jpeg","description":"Sharing my experience in or opinions regarding programming, work, or other concepts.","meta_title":null,"meta_description":null,"featureImageSharp":{"base":"photo-1493612276216-ee3925520721-2-1.jpeg","publicURL":"/static/55d051b88133a375df71095790dfd724/photo-1493612276216-ee3925520721-2-1.jpeg","imageMeta":{"width":2000,"height":2500},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAZABQDASIAAhEBAxEB/8QAGQAAAwEBAQAAAAAAAAAAAAAAAAEEAwIF/8QAGAEAAgMAAAAAAAAAAAAAAAAAAAMBBAX/2gAMAwEAAhADEAAAAfTTmIpADGTfld2IQ7O//8QAHBAAAQUAAwAAAAAAAAAAAAAAAgABAxAREyEy/9oACAEBAAEFAr1DKznq1EHfITXL7//EABkRAAIDAQAAAAAAAAAAAAAAAAABAhESE//aAAgBAwEBPwHBzZlNEk4urP/EABgRAAIDAAAAAAAAAAAAAAAAAAABEBES/9oACAECAQE/AbNQj//EABoQAAEFAQAAAAAAAAAAAAAAAAEAAhAgMRH/2gAIAQEABj8CoWz0atNP/8QAGhABAAIDAQAAAAAAAAAAAAAAAQAQETGRIf/aAAgBAQABPyHFs6LI9owavPeKsdKaP//aAAwDAQACAAMAAAAQdBNO/8QAGBEBAAMBAAAAAAAAAAAAAAAAAQAQIWH/2gAIAQMBAT8QXVhJGJWdn//EABYRAQEBAAAAAAAAAAAAAAAAAAEAEf/aAAgBAgEBPxC4tR0kIOX/xAAdEAACAgIDAQAAAAAAAAAAAAAAARExECFBUWFx/9oACAEBAAE/EHHojwjwQ+B45hVISYd1xThsbt5XLc4sWfEf/9k=","aspectRatio":0.8,"src":"/static/55d051b88133a375df71095790dfd724/d5c54/photo-1493612276216-ee3925520721-2-1.jpg","srcSet":"/static/55d051b88133a375df71095790dfd724/65d8c/photo-1493612276216-ee3925520721-2-1.jpg 260w,\n/static/55d051b88133a375df71095790dfd724/c5f21/photo-1493612276216-ee3925520721-2-1.jpg 520w,\n/static/55d051b88133a375df71095790dfd724/d5c54/photo-1493612276216-ee3925520721-2-1.jpg 1040w,\n/static/55d051b88133a375df71095790dfd724/81a53/photo-1493612276216-ee3925520721-2-1.jpg 1560w,\n/static/55d051b88133a375df71095790dfd724/4e5f3/photo-1493612276216-ee3925520721-2-1.jpg 2000w","srcWebp":"/static/55d051b88133a375df71095790dfd724/e4875/photo-1493612276216-ee3925520721-2-1.webp","srcSetWebp":"/static/55d051b88133a375df71095790dfd724/dc8f3/photo-1493612276216-ee3925520721-2-1.webp 260w,\n/static/55d051b88133a375df71095790dfd724/2db4b/photo-1493612276216-ee3925520721-2-1.webp 520w,\n/static/55d051b88133a375df71095790dfd724/e4875/photo-1493612276216-ee3925520721-2-1.webp 1040w,\n/static/55d051b88133a375df71095790dfd724/f5845/photo-1493612276216-ee3925520721-2-1.webp 1560w,\n/static/55d051b88133a375df71095790dfd724/49d6b/photo-1493612276216-ee3925520721-2-1.webp 2000w","sizes":"(max-width: 1040px) 100vw, 1040px"}}}},"tags":[{"slug":"my-experience","url":"https://backend.shahednasser.com/tag/my-experience/","name":"My Experience","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/photo-1493612276216-ee3925520721-2-1.jpeg","description":"Sharing my experience in or opinions regarding programming, work, or other concepts.","meta_title":null,"meta_description":null,"featureImageSharp":null}],"plaintext":"I use iMessage every day, and there are functionalities I always use that end up\nannoying me. The user experience in the Messages App needs more attention and\nimprovement, especially when certain features are available in easier ways in\nother apps. \n\nI will point out 5 UX issues I have faced in the Messages App and their impact\nor how they can be fixed.\n\n\n--------------------------------------------------------------------------------\n\nBetter Way to Reply to Specific Message\nEvery app that has messaging in them (except Twitter for some reason) have the\nreply feature. If you've used Instagram or Whatsapp, you'll know that you can\neasily reply to a message just by swiping it.\n\nIn Messages, you have to either double tap or long press on the message you want\nto reply to, then choose \"Reply\" and then you can reply to the message. But why?\nIt's so annoying when you use this a lot as it takes a lot of presses here and\nthere to do what can be done in a very simple manner.\n\nThe UX Issue\nUsers need 2 or 3 clicks to be able to use the feature. When you can save the\nuser even one click, then you shouldn't overlook it.\n\n\n--------------------------------------------------------------------------------\n\nVoice Messages Without The Hassle\nVoice messages in Messages (that sounds weird) is plain annoying to be\ncompletely honest. If you had to leave the app for some reason or wanted to\nlisten again to just one small part a few seconds earlier in the message, you\nhave to re-listen to the entire thing all over again to get to where you were.\nAnd if you are inside the app, you need to leave it and then open it again to be\nable to replay from the beginning. \n\nThis problem, as far as I am aware, is not found in any other messaging app. I'm\nnot sure what's next on their list for this app but I hope fixing this is one of\ntheir priorities.\n\nThe UX issue(s)\nThe users have to figure out on their own how to get something done. It should\nbe easy and accessible for the user to do something so trivial. The more you can\nmake things easier for the user, the better.\n\n\n--------------------------------------------------------------------------------\n\nSending A Photo After Typing\nThis is probably a bug rather than a UX issue, but I'm placing it here anyway.\nWhen you want to send a photo, you just click on the Photos App then choose the\nphoto you want to send. \n\nHowever, if you type out the message then you want to pick the photo you want to\nsend, it's not possible to get to the Photos app again. The arrow button next to\nthe text box does not work, so you have to remove your message to be able to add\nthe Photo, then paste or type out your message again.\n\nThe UX Issue\nAs I stated, this is probably a bug. However, for the sake of this post, the\nissue here is that we're providing hassles for the user to get to what they need\nto do. Users can be forgetful and they need a way to go back when they mess up\nor forget.\n\n\n--------------------------------------------------------------------------------\n\nForce Scrolling When A Message Is Received\nIf you are scrolling back in a chat to go back to a certain previous message,\nand the person in the chat sends a new message, the app scrolls back to the new\nmessage. This is so simple yet annoying as I have had to clearly tell the other\nperson \"STOP SENDING MESSAGES\" to be able to go back to a previous message.\n\nI'm not sure why scrolling to the new message is necessary. A better UX would be\nshowing you an arrow that when you press it takes you to the new message, like\nWhatsapp and Instagram.\n\nThe UX Issue\nThis issue implies that the team working on the Messages app probably doesn't\nunderstand users well, to be honest. Forcing users to go from one place to\nanother is just plain annoying.\n\n\n--------------------------------------------------------------------------------\n\nUndo Message\nThis one is not actually available in the app, which is the problem itself. We\nall tend to make mistakes, like sending a message to the wrong person (be\ncareful with those screenshots) or sending the wrong photo. An undo or delete\nfrom end to end is very needed to make the app better. \n\nThe UX Issue\nAgain, it's very important as part of your UX to actually understand users.\nUsers make tons of mistakes on the go, and we should make it easier for them to\ncorrect or revert their mistakes. \n\n\n--------------------------------------------------------------------------------\n\nConclusion\nTo realize the importance of fixing UX issues and improving the UX in your\napps/websites, just look back at how I kept comparing Messages to other apps\nlike Whatsapp or Instagram. When users find a better alternative for them that\nunderstands them and their patterns, they will just ditch your app for the\nalternative. That is why we need to make sure to understand our users and\nprovide the best solutions for them.\n\nAre there other issues you found as well that are not mentioned here? Let me\nknow!","html":"I use iMessage every day, and there are functionalities I always use that end up annoying me. The user experience in the Messages App needs more attention and improvement, especially when certain features are available in easier ways in other apps.
I will point out 5 UX issues I have faced in the Messages App and their impact or how they can be fixed.
Every app that has messaging in them (except Twitter for some reason) have the reply feature. If you've used Instagram or Whatsapp, you'll know that you can easily reply to a message just by swiping it.
In Messages, you have to either double tap or long press on the message you want to reply to, then choose \"Reply\" and then you can reply to the message. But why? It's so annoying when you use this a lot as it takes a lot of presses here and there to do what can be done in a very simple manner.
Users need 2 or 3 clicks to be able to use the feature. When you can save the user even one click, then you shouldn't overlook it.
Voice messages in Messages (that sounds weird) is plain annoying to be completely honest. If you had to leave the app for some reason or wanted to listen again to just one small part a few seconds earlier in the message, you have to re-listen to the entire thing all over again to get to where you were. And if you are inside the app, you need to leave it and then open it again to be able to replay from the beginning.
This problem, as far as I am aware, is not found in any other messaging app. I'm not sure what's next on their list for this app but I hope fixing this is one of their priorities.
The users have to figure out on their own how to get something done. It should be easy and accessible for the user to do something so trivial. The more you can make things easier for the user, the better.
This is probably a bug rather than a UX issue, but I'm placing it here anyway. When you want to send a photo, you just click on the Photos App then choose the photo you want to send.
However, if you type out the message then you want to pick the photo you want to send, it's not possible to get to the Photos app again. The arrow button next to the text box does not work, so you have to remove your message to be able to add the Photo, then paste or type out your message again.
As I stated, this is probably a bug. However, for the sake of this post, the issue here is that we're providing hassles for the user to get to what they need to do. Users can be forgetful and they need a way to go back when they mess up or forget.
If you are scrolling back in a chat to go back to a certain previous message, and the person in the chat sends a new message, the app scrolls back to the new message. This is so simple yet annoying as I have had to clearly tell the other person \"STOP SENDING MESSAGES\" to be able to go back to a previous message.
I'm not sure why scrolling to the new message is necessary. A better UX would be showing you an arrow that when you press it takes you to the new message, like Whatsapp and Instagram.
This issue implies that the team working on the Messages app probably doesn't understand users well, to be honest. Forcing users to go from one place to another is just plain annoying.
This one is not actually available in the app, which is the problem itself. We all tend to make mistakes, like sending a message to the wrong person (be careful with those screenshots) or sending the wrong photo. An undo or delete from end to end is very needed to make the app better.
Again, it's very important as part of your UX to actually understand users. Users make tons of mistakes on the go, and we should make it easier for them to correct or revert their mistakes.
To realize the importance of fixing UX issues and improving the UX in your apps/websites, just look back at how I kept comparing Messages to other apps like Whatsapp or Instagram. When users find a better alternative for them that understands them and their patterns, they will just ditch your app for the alternative. That is why we need to make sure to understand our users and provide the best solutions for them.
Are there other issues you found as well that are not mentioned here? Let me know!
","url":"https://backend.shahednasser.com/5-ux-issues-apple-needs-to-fix-in-the-messages/","canonical_url":null,"uuid":"df0db852-ea65-4a6f-87f6-ff376a89f5f0","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"601bff03d30862001e88d57b","reading_time":3,"send_email_when_published":null,"email_subject":null,"childHtmlRehype":{"html":"I use iMessage every day, and there are functionalities I always use that end up annoying me. The user experience in the Messages App needs more attention and improvement, especially when certain features are available in easier ways in other apps.
I will point out 5 UX issues I have faced in the Messages App and their impact or how they can be fixed.
Every app that has messaging in them (except Twitter for some reason) have the reply feature. If you've used Instagram or Whatsapp, you'll know that you can easily reply to a message just by swiping it.
In Messages, you have to either double tap or long press on the message you want to reply to, then choose \"Reply\" and then you can reply to the message. But why? It's so annoying when you use this a lot as it takes a lot of presses here and there to do what can be done in a very simple manner.
Users need 2 or 3 clicks to be able to use the feature. When you can save the user even one click, then you shouldn't overlook it.
Voice messages in Messages (that sounds weird) is plain annoying to be completely honest. If you had to leave the app for some reason or wanted to listen again to just one small part a few seconds earlier in the message, you have to re-listen to the entire thing all over again to get to where you were. And if you are inside the app, you need to leave it and then open it again to be able to replay from the beginning.
This problem, as far as I am aware, is not found in any other messaging app. I'm not sure what's next on their list for this app but I hope fixing this is one of their priorities.
The users have to figure out on their own how to get something done. It should be easy and accessible for the user to do something so trivial. The more you can make things easier for the user, the better.
This is probably a bug rather than a UX issue, but I'm placing it here anyway. When you want to send a photo, you just click on the Photos App then choose the photo you want to send.
However, if you type out the message then you want to pick the photo you want to send, it's not possible to get to the Photos app again. The arrow button next to the text box does not work, so you have to remove your message to be able to add the Photo, then paste or type out your message again.
As I stated, this is probably a bug. However, for the sake of this post, the issue here is that we're providing hassles for the user to get to what they need to do. Users can be forgetful and they need a way to go back when they mess up or forget.
If you are scrolling back in a chat to go back to a certain previous message, and the person in the chat sends a new message, the app scrolls back to the new message. This is so simple yet annoying as I have had to clearly tell the other person \"STOP SENDING MESSAGES\" to be able to go back to a previous message.
I'm not sure why scrolling to the new message is necessary. A better UX would be showing you an arrow that when you press it takes you to the new message, like Whatsapp and Instagram.
This issue implies that the team working on the Messages app probably doesn't understand users well, to be honest. Forcing users to go from one place to another is just plain annoying.
This one is not actually available in the app, which is the problem itself. We all tend to make mistakes, like sending a message to the wrong person (be careful with those screenshots) or sending the wrong photo. An undo or delete from end to end is very needed to make the app better.
Again, it's very important as part of your UX to actually understand users. Users make tons of mistakes on the go, and we should make it easier for them to correct or revert their mistakes.
To realize the importance of fixing UX issues and improving the UX in your apps/websites, just look back at how I kept comparing Messages to other apps like Whatsapp or Instagram. When users find a better alternative for them that understands them and their patterns, they will just ditch your app for the alternative. That is why we need to make sure to understand our users and provide the best solutions for them.
Are there other issues you found as well that are not mentioned here? Let me know!
","htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"I use iMessage every day, and there are functionalities I always use that end up annoying me. The user experience in the Messages App needs more attention and improvement, especially when certain features are available in easier ways in other apps. "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"I will point out 5 UX issues I have faced in the Messages App and their impact or how they can be fixed."}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h2","properties":{"id":"better-way-to-reply-to-specific-message"},"children":[{"type":"text","value":"Better Way to Reply to Specific Message"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Every app that has messaging in them (except Twitter for some reason) have the reply feature. If you've used Instagram or Whatsapp, you'll know that you can easily reply to a message just by swiping it."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In Messages, you have to either double tap or long press on the message you want to reply to, then choose \"Reply\" and then you can reply to the message. But why? It's so annoying when you use this a lot as it takes a lot of presses here and there to do what can be done in a very simple manner."}]},{"type":"element","tagName":"h3","properties":{"id":"the-ux-issue"},"children":[{"type":"text","value":"The UX Issue"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Users need 2 or 3 clicks to be able to use the feature. When you can save the user even one click, then you shouldn't overlook it."}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h2","properties":{"id":"voice-messages-without-the-hassle"},"children":[{"type":"text","value":"Voice Messages Without The Hassle"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Voice messages in Messages (that sounds weird) is plain annoying to be completely honest. If you had to leave the app for some reason or wanted to listen again to just one small part a few seconds earlier in the message, you have to re-listen to the entire thing all over again to get to where you were. And if you are inside the app, you need to leave it and then open it again to be able to replay from the beginning. "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This problem, as far as I am aware, is not found in any other messaging app. I'm not sure what's next on their list for this app but I hope fixing this is one of their priorities."}]},{"type":"element","tagName":"h3","properties":{"id":"the-ux-issue-s-"},"children":[{"type":"text","value":"The UX issue(s)"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The users have to figure out on their own how to get something done. It should be easy and accessible for the user to do something so trivial. The more you can make things easier for the user, the better."}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h2","properties":{"id":"sending-a-photo-after-typing"},"children":[{"type":"text","value":"Sending A Photo After Typing"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This is probably a bug rather than a UX issue, but I'm placing it here anyway. When you want to send a photo, you just click on the Photos App then choose the photo you want to send. "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"However, if you type out the message then you want to pick the photo you want to send, it's not possible to get to the Photos app again. The arrow button next to the text box does not work, so you have to remove your message to be able to add the Photo, then paste or type out your message again."}]},{"type":"element","tagName":"h3","properties":{"id":"the-ux-issue-1"},"children":[{"type":"text","value":"The UX Issue"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"As I stated, this is probably a bug. However, for the sake of this post, the issue here is that we're providing hassles for the user to get to what they need to do. Users can be forgetful and they need a way to go back when they mess up or forget."}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h2","properties":{"id":"force-scrolling-when-a-message-is-received"},"children":[{"type":"text","value":"Force Scrolling When A Message Is Received"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you are scrolling back in a chat to go back to a certain previous message, and the person in the chat sends a new message, the app scrolls back to the new message. This is so simple yet annoying as I have had to clearly tell the other person \"STOP SENDING MESSAGES\" to be able to go back to a previous message."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"I'm not sure why scrolling to the new message is necessary. A better UX would be showing you an arrow that when you press it takes you to the new message, like Whatsapp and Instagram."}]},{"type":"element","tagName":"h3","properties":{"id":"the-ux-issue-2"},"children":[{"type":"text","value":"The UX Issue"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This issue implies that the team working on the Messages app probably doesn't understand users well, to be honest. Forcing users to go from one place to another is just plain annoying."}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h2","properties":{"id":"undo-message"},"children":[{"type":"text","value":"Undo Message"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This one is not actually available in the app, which is the problem itself. We all tend to make mistakes, like sending a message to the wrong person (be careful with those screenshots) or sending the wrong photo. An undo or delete from end to end is very needed to make the app better. "}]},{"type":"element","tagName":"h3","properties":{"id":"the-ux-issue-3"},"children":[{"type":"text","value":"The UX Issue"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Again, it's very important as part of your UX to actually understand users. Users make tons of mistakes on the go, and we should make it easier for them to correct or revert their mistakes. "}]},{"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":"To realize the importance of fixing UX issues and improving the UX in your apps/websites, just look back at how I kept comparing Messages to other apps like Whatsapp or Instagram. When users find a better alternative for them that understands them and their patterns, they will just ditch your app for the alternative. That is why we need to make sure to understand our users and provide the best solutions for them."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Are there other issues you found as well that are not mentioned here? Let me know!"}]}],"data":{"quirksMode":false}},"tableOfContents":[{"id":"better-way-to-reply-to-specific-message","heading":"Better Way to Reply to Specific Message","items":[{"id":"the-ux-issue","heading":"The UX Issue"}]},{"id":"voice-messages-without-the-hassle","heading":"Voice Messages Without The Hassle","items":[{"id":"the-ux-issue-s-","heading":"The UX issue(s)"}]},{"id":"sending-a-photo-after-typing","heading":"Sending A Photo After Typing","items":[{"id":"the-ux-issue-1","heading":"The UX Issue"}]},{"id":"force-scrolling-when-a-message-is-received","heading":"Force Scrolling When A Message Is Received","items":[{"id":"the-ux-issue-2","heading":"The UX Issue"}]},{"id":"undo-message","heading":"Undo Message","items":[{"id":"the-ux-issue-3","heading":"The UX Issue"}]},{"id":"conclusion","heading":"Conclusion"}]},"featureImageSharp":{"base":"photo-1552947602-4640901e9c67.jpg","publicURL":"/static/0edac04210c458a826788d8dd167e804/photo-1552947602-4640901e9c67.jpg","imageMeta":{"width":2000,"height":1123},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAMEBf/EABUBAQEAAAAAAAAAAAAAAAAAAAEC/9oADAMBAAIQAxAAAAFUN8sVnjRP/8QAGxAAAQQDAAAAAAAAAAAAAAAAAQACAxEQEiH/2gAIAQEAAQUC0aIn9xVBwBkshf/EABURAQEAAAAAAAAAAAAAAAAAAAAR/9oACAEDAQE/AUf/xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAcEAABAwUAAAAAAAAAAAAAAAAAARAhAhESMUH/2gAIAQEABj8C3lURFuMgrf/EABoQAQEBAAMBAAAAAAAAAAAAAAERACExQVH/2gAIAQEAAT8hDI+SSTT2K+HWRGTJGU5Pc5J3iwH3f//aAAwDAQACAAMAAAAQNz//xAAXEQEAAwAAAAAAAAAAAAAAAAAAARFR/9oACAEDAQE/EIxR/8QAFxEAAwEAAAAAAAAAAAAAAAAAAAERIf/aAAgBAgEBPxC6Vn//xAAcEAEBAAICAwAAAAAAAAAAAAABEQAhMVFBYYH/2gAIAQEAAT8QGSwCuTgScQN3TgMhSV2SXr3iBITxMjbEAep9xRFCqKXEkwrP/9k=","aspectRatio":1.7857142857142858,"src":"/static/0edac04210c458a826788d8dd167e804/ea4ab/photo-1552947602-4640901e9c67.jpg","srcSet":"/static/0edac04210c458a826788d8dd167e804/477ba/photo-1552947602-4640901e9c67.jpg 175w,\n/static/0edac04210c458a826788d8dd167e804/06776/photo-1552947602-4640901e9c67.jpg 350w,\n/static/0edac04210c458a826788d8dd167e804/ea4ab/photo-1552947602-4640901e9c67.jpg 700w,\n/static/0edac04210c458a826788d8dd167e804/3055e/photo-1552947602-4640901e9c67.jpg 1050w,\n/static/0edac04210c458a826788d8dd167e804/eff08/photo-1552947602-4640901e9c67.jpg 1400w,\n/static/0edac04210c458a826788d8dd167e804/4e5f3/photo-1552947602-4640901e9c67.jpg 2000w","srcWebp":"/static/0edac04210c458a826788d8dd167e804/89afa/photo-1552947602-4640901e9c67.webp","srcSetWebp":"/static/0edac04210c458a826788d8dd167e804/9fca7/photo-1552947602-4640901e9c67.webp 175w,\n/static/0edac04210c458a826788d8dd167e804/37a4e/photo-1552947602-4640901e9c67.webp 350w,\n/static/0edac04210c458a826788d8dd167e804/89afa/photo-1552947602-4640901e9c67.webp 700w,\n/static/0edac04210c458a826788d8dd167e804/78e7a/photo-1552947602-4640901e9c67.webp 1050w,\n/static/0edac04210c458a826788d8dd167e804/03d34/photo-1552947602-4640901e9c67.webp 1400w,\n/static/0edac04210c458a826788d8dd167e804/49d6b/photo-1552947602-4640901e9c67.webp 2000w","sizes":"(max-width: 700px) 100vw, 700px"}}}},"next":{"id":"Ghost__Post__6127ba1b3ed159214d382e80","title":"My Horrible Experience With Freelancer.com","slug":"my-horrible-experience-with-freelancer-com","featured":false,"feature_image":"https://res-1.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/photo-1487073240288-854ac7f1bb3c.jpg","excerpt":"I had such high expectations going into Freelancers.com but was faced with problems that made me realize how it doesn't prioritize freelancers.","custom_excerpt":"I had such high expectations going into Freelancers.com but was faced with problems that made me realize how it doesn't prioritize freelancers.","visibility":"public","created_at_pretty":"2 Feb 2021","published_at_pretty":"2 Feb 2021","updated_at_pretty":"26 Aug 2021","created_at":"2021-02-02T10:28:13.000+00:00","published_at":"2021-02-02T11:37:03.000+00:00","updated_at":"2021-08-26T17:50:06.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":"my-experience","url":"https://backend.shahednasser.com/tag/my-experience/","name":"My Experience","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/photo-1493612276216-ee3925520721-2-1.jpeg","description":"Sharing my experience in or opinions regarding programming, work, or other concepts.","meta_title":null,"meta_description":null,"featureImageSharp":{"base":"photo-1493612276216-ee3925520721-2-1.jpeg","publicURL":"/static/55d051b88133a375df71095790dfd724/photo-1493612276216-ee3925520721-2-1.jpeg","imageMeta":{"width":2000,"height":2500},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAZABQDASIAAhEBAxEB/8QAGQAAAwEBAQAAAAAAAAAAAAAAAAEEAwIF/8QAGAEAAgMAAAAAAAAAAAAAAAAAAAMBBAX/2gAMAwEAAhADEAAAAfTTmIpADGTfld2IQ7O//8QAHBAAAQUAAwAAAAAAAAAAAAAAAgABAxAREyEy/9oACAEBAAEFAr1DKznq1EHfITXL7//EABkRAAIDAQAAAAAAAAAAAAAAAAABAhESE//aAAgBAwEBPwHBzZlNEk4urP/EABgRAAIDAAAAAAAAAAAAAAAAAAABEBES/9oACAECAQE/AbNQj//EABoQAAEFAQAAAAAAAAAAAAAAAAEAAhAgMRH/2gAIAQEABj8CoWz0atNP/8QAGhABAAIDAQAAAAAAAAAAAAAAAQAQETGRIf/aAAgBAQABPyHFs6LI9owavPeKsdKaP//aAAwDAQACAAMAAAAQdBNO/8QAGBEBAAMBAAAAAAAAAAAAAAAAAQAQIWH/2gAIAQMBAT8QXVhJGJWdn//EABYRAQEBAAAAAAAAAAAAAAAAAAEAEf/aAAgBAgEBPxC4tR0kIOX/xAAdEAACAgIDAQAAAAAAAAAAAAAAARExECFBUWFx/9oACAEBAAE/EHHojwjwQ+B45hVISYd1xThsbt5XLc4sWfEf/9k=","aspectRatio":0.8,"src":"/static/55d051b88133a375df71095790dfd724/d5c54/photo-1493612276216-ee3925520721-2-1.jpg","srcSet":"/static/55d051b88133a375df71095790dfd724/65d8c/photo-1493612276216-ee3925520721-2-1.jpg 260w,\n/static/55d051b88133a375df71095790dfd724/c5f21/photo-1493612276216-ee3925520721-2-1.jpg 520w,\n/static/55d051b88133a375df71095790dfd724/d5c54/photo-1493612276216-ee3925520721-2-1.jpg 1040w,\n/static/55d051b88133a375df71095790dfd724/81a53/photo-1493612276216-ee3925520721-2-1.jpg 1560w,\n/static/55d051b88133a375df71095790dfd724/4e5f3/photo-1493612276216-ee3925520721-2-1.jpg 2000w","srcWebp":"/static/55d051b88133a375df71095790dfd724/e4875/photo-1493612276216-ee3925520721-2-1.webp","srcSetWebp":"/static/55d051b88133a375df71095790dfd724/dc8f3/photo-1493612276216-ee3925520721-2-1.webp 260w,\n/static/55d051b88133a375df71095790dfd724/2db4b/photo-1493612276216-ee3925520721-2-1.webp 520w,\n/static/55d051b88133a375df71095790dfd724/e4875/photo-1493612276216-ee3925520721-2-1.webp 1040w,\n/static/55d051b88133a375df71095790dfd724/f5845/photo-1493612276216-ee3925520721-2-1.webp 1560w,\n/static/55d051b88133a375df71095790dfd724/49d6b/photo-1493612276216-ee3925520721-2-1.webp 2000w","sizes":"(max-width: 1040px) 100vw, 1040px"}}}},"tags":[{"slug":"my-experience","url":"https://backend.shahednasser.com/tag/my-experience/","name":"My Experience","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/photo-1493612276216-ee3925520721-2-1.jpeg","description":"Sharing my experience in or opinions regarding programming, work, or other concepts.","meta_title":null,"meta_description":null,"featureImageSharp":null}],"plaintext":"UPDATE\n2 days after posting this, Freelancer's support team has reached out and worked\nout the balance issue. Hopefully, in the future situations similar to mine will\nbe handled better and Freelancer becomes about freelancers again.\n\n\n--------------------------------------------------------------------------------\n\nI have been working as a freelance web developer since 2017. I have worked on\nmany projects including financial auditing management, reservation and booking\nsystems, e-commerce projects, and many more. All of these projects I have worked\non locally with people from the same country.\n\nHowever, I've always wanted to try Freelancer.com. It seemed like it would\nprovide good opportunities, and frankly easier ways to make money as a\nfreelancer. So, in December, I decided to expand my freelancing journey there. \n\n\n--------------------------------------------------------------------------------\n\nIf you don't know what Freelancer is, it's a platform that provides a connection\nbetween freelancers and job posters from all over the world. It's mostly used by\ndevelopers or designers, but it can be used for any sector and industry. If you\nhave a job that you want done, you just post a project with the descriptions and\nbudget. If you're a freelancer, you can search through projects and bid on the\nones you like, explaining why you'd be perfect for the job and what your fees\nare.\n\nI had such high expectations going in. Not only does Freelancer have so many\nusers, but if you check their profile summaries you'll see that these users\nmight have done over hundreds of projects and made good amount of money through\nFreelancer. If it happened to others, why can't it happen to me?\n\n\n--------------------------------------------------------------------------------\n\nAfter creating my account, Freelancer encouraged me to verify my identity. They\nfirst ask you for a pic of your ID or Passport or any identification you have.\nNext, you will be asked to write a code provided by Freelancer on a paper and\ntake a picture with it. I did both of those things and passed their verification\nprocess. \n\nHowever, I was then met by my first problem on Freelancer. The last step you\nhave to do to verify your identity is to provide a proof of address. If you have\ndone this on any website before, you are usually asked to provide any bill that\nproves your address. For Freelancer, it's more strict than this. You are asked\nto provide a utility bill, a contract or something official that not only has\nyour full name, address, and phone number on, but also the company or other\nparty's details as well.\n\nFor some people this is easy to do, however, if you're like me, a person that\ncomes from a culture where living with your family is normal and having the\nbills in someone else's name, even governmental forms, it's not possible.\n\nSo, since Freelancer made it seem like identifying your identity is just an\noptional process that just gives you a boost, I decided to not finish the\nprocess. I can still bid and be assigned to projects, so it's not going to stop\nme.\n\n\n--------------------------------------------------------------------------------\n\nI started then applying for projects, and that's when I faced more problems. \n\nIf you're not a Freelancer Plus member, you only get 6 bids when you create your\naccount. After that, you get new bids only after 5 days. You get at most 6 bids,\nwhich means even if you leave your account for a while, it will not cross the 6\nbids limit. \n\nAs a beginner, getting a project is not easy at all. Job posters will mostly\nlook at the reviews you have or number of projects you worked. And it doesn't\nhelp that those with higher reviews or higher plans on Freelancer show up higher\nin the bids of a project than beginners who don't have any reviews. So, 6 bids a\nmonth will not be of any help to get your reviews higher and getting more jobs.\n\nThis is another issue that Freelancer has. It does not give a chance to new\ncomers. Its system ensures that only those with high reviews or paid plans get a\nbetter chance at getting hired. Even if you do have a paid plan you still will\nnot get as much of a chance as anyone with a 5 stars review.\n\nSo, I decided to start a free trial on the plus membership. You get a 100 bid a\nmonth, approximately 3 bids a day. This was helpful as I could bid on more\nprojects and increase my chance of getting my first project on Freelancer.\n\nEven when you bid on many projects, it's still not easy to get a project on\nFreelancer. Again, no review, no one will see you. \n\nAnother problem you'll notice when using Freelancer is that there are certain\ntags for projects that will get over 50 bids in a minute. For example, check any\nWordpress job. You'll find that after 2 minutes or even less of it getting\nposted, it already has so many bids, and most of these bids are by companies and\nnot individuals. You'll realize soon that companies who can take on different\nprojects, and not individual freelancers, are the ones who can actually make\nmoney and get projects on Freelancer.\n\n\n--------------------------------------------------------------------------------\n\nAfter bidding for a few days on so many projects, I finally got a project to\ndevelop a portfolio website for a company. Then, I got another small project\njust to add a google analytics link to a website and fix some email issues the\nposter had.\n\nWhen taking jobs on Freelancer, your balance will immediately drop even before\nyou start working on the project or getting paid. That is because Freelancer\ntakes their share the minute you are assigned the project, regardless of how the\nproject actually goes.\n\nI finished the small project and started working on the portfolio website. Then,\nI found out something that was the main problem of working on Freelancer.\n\n\n--------------------------------------------------------------------------------\n\nFreelancer has a few ways you can withdraw your money: Wire Transfer, Express\nWithdrawal, Paypal, and Skrill. Most of these methods are not available in all\ncountries, which means Wire Transfer is the only method that's available for\nyour country regardless of where you are.\n\nHowever, Wire Transfer (and all payment methods) requires that you verify your\nidentity. Then shouldn't this make verifying your identity mandatory, and not\noptional? Freelancer could point that out when it asks you to verify your\nidentity, that you will need this to verify your identity. Instead, Freelancer\njust points out that it's good for the job poster and your profile to verify\nyour identity.\n\nI contacted their support, and when explaining my inability to provide a proof\nof address since it's asking for something that is not available for me, I was\ntold it was because of Freelancer's strict policy and because they want to\nmaintain \"the security of the website.\"\n\nOk, so that's understandable in a sense. However, I did a project with a job\nposter, I finished the project, I received a 5-star review, and the job poster\npaid for the job. Shouldn't this provide as a source of guarantee that I'm doing\nmy job properly and that I'm not misusing Freelancer or breaking its security?\nIf not, then shouldn't I at least get paid for the work I've done?\n\nI followed up with an email asking how can I withdraw my money, and I was simply\ntold that it's not possible for me to withdraw my money in my location.\nWas this information not available for Freelancer on my registration? If you do\nnot provide a withdrawal method to my country, then shouldn't you remove my\ncountry from the list of countries on registration, or at least in your FAQs and\nhelp sections?\n\nSo, I decided to end my journey on Freelancer, but it wasn't that simple. After\nmessaging the person from the first job posting that I'm unable to finish the\nproject due to the inability of withdrawing the money, they labeled the project\nas incomplete. However, my balance on Freelancer remained in the negative value.\nThey still want me to deposit their fee for the project that was not completed,\neven though I didn't technically get paid for the project that I did complete.\n\n\n--------------------------------------------------------------------------------\n\nConclusion\nYou may think this story does not apply to you because you wouldn't face similar\nproblems regarding identity verification or money withdrawal, however, one thing\nis evident: Freelancer does not prioritize freelancers. You should know this\nwhen before you even get paid, they take their share of their money. They make\nsure that those who use their plans get their jobs. They gloss over some details\nand their customer support was not helpful in fixing the issues I was having. If\nyou are not a Freelancer user, then honestly don't bother being a part of it.","html":"2 days after posting this, Freelancer's support team has reached out and worked out the balance issue. Hopefully, in the future situations similar to mine will be handled better and Freelancer becomes about freelancers again.
![](\"https://res-3.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/asset.png\")
I have been working as a freelance web developer since 2017. I have worked on many projects including financial auditing management, reservation and booking systems, e-commerce projects, and many more. All of these projects I have worked on locally with people from the same country.
However, I've always wanted to try Freelancer.com. It seemed like it would provide good opportunities, and frankly easier ways to make money as a freelancer. So, in December, I decided to expand my freelancing journey there.
If you don't know what Freelancer is, it's a platform that provides a connection between freelancers and job posters from all over the world. It's mostly used by developers or designers, but it can be used for any sector and industry. If you have a job that you want done, you just post a project with the descriptions and budget. If you're a freelancer, you can search through projects and bid on the ones you like, explaining why you'd be perfect for the job and what your fees are.
I had such high expectations going in. Not only does Freelancer have so many users, but if you check their profile summaries you'll see that these users might have done over hundreds of projects and made good amount of money through Freelancer. If it happened to others, why can't it happen to me?
After creating my account, Freelancer encouraged me to verify my identity. They first ask you for a pic of your ID or Passport or any identification you have. Next, you will be asked to write a code provided by Freelancer on a paper and take a picture with it. I did both of those things and passed their verification process.
However, I was then met by my first problem on Freelancer. The last step you have to do to verify your identity is to provide a proof of address. If you have done this on any website before, you are usually asked to provide any bill that proves your address. For Freelancer, it's more strict than this. You are asked to provide a utility bill, a contract or something official that not only has your full name, address, and phone number on, but also the company or other party's details as well.
For some people this is easy to do, however, if you're like me, a person that comes from a culture where living with your family is normal and having the bills in someone else's name, even governmental forms, it's not possible.
So, since Freelancer made it seem like identifying your identity is just an optional process that just gives you a boost, I decided to not finish the process. I can still bid and be assigned to projects, so it's not going to stop me.
I started then applying for projects, and that's when I faced more problems.
If you're not a Freelancer Plus member, you only get 6 bids when you create your account. After that, you get new bids only after 5 days. You get at most 6 bids, which means even if you leave your account for a while, it will not cross the 6 bids limit.
As a beginner, getting a project is not easy at all. Job posters will mostly look at the reviews you have or number of projects you worked. And it doesn't help that those with higher reviews or higher plans on Freelancer show up higher in the bids of a project than beginners who don't have any reviews. So, 6 bids a month will not be of any help to get your reviews higher and getting more jobs.
This is another issue that Freelancer has. It does not give a chance to new comers. Its system ensures that only those with high reviews or paid plans get a better chance at getting hired. Even if you do have a paid plan you still will not get as much of a chance as anyone with a 5 stars review.
So, I decided to start a free trial on the plus membership. You get a 100 bid a month, approximately 3 bids a day. This was helpful as I could bid on more projects and increase my chance of getting my first project on Freelancer.
Even when you bid on many projects, it's still not easy to get a project on Freelancer. Again, no review, no one will see you.
Another problem you'll notice when using Freelancer is that there are certain tags for projects that will get over 50 bids in a minute. For example, check any Wordpress job. You'll find that after 2 minutes or even less of it getting posted, it already has so many bids, and most of these bids are by companies and not individuals. You'll realize soon that companies who can take on different projects, and not individual freelancers, are the ones who can actually make money and get projects on Freelancer.
After bidding for a few days on so many projects, I finally got a project to develop a portfolio website for a company. Then, I got another small project just to add a google analytics link to a website and fix some email issues the poster had.
When taking jobs on Freelancer, your balance will immediately drop even before you start working on the project or getting paid. That is because Freelancer takes their share the minute you are assigned the project, regardless of how the project actually goes.
I finished the small project and started working on the portfolio website. Then, I found out something that was the main problem of working on Freelancer.
Freelancer has a few ways you can withdraw your money: Wire Transfer, Express Withdrawal, Paypal, and Skrill. Most of these methods are not available in all countries, which means Wire Transfer is the only method that's available for your country regardless of where you are.
However, Wire Transfer (and all payment methods) requires that you verify your identity. Then shouldn't this make verifying your identity mandatory, and not optional? Freelancer could point that out when it asks you to verify your identity, that you will need this to verify your identity. Instead, Freelancer just points out that it's good for the job poster and your profile to verify your identity.
I contacted their support, and when explaining my inability to provide a proof of address since it's asking for something that is not available for me, I was told it was because of Freelancer's strict policy and because they want to maintain \"the security of the website.\"
Ok, so that's understandable in a sense. However, I did a project with a job poster, I finished the project, I received a 5-star review, and the job poster paid for the job. Shouldn't this provide as a source of guarantee that I'm doing my job properly and that I'm not misusing Freelancer or breaking its security? If not, then shouldn't I at least get paid for the work I've done?
I followed up with an email asking how can I withdraw my money, and I was simply told that it's not possible for me to withdraw my money in my location.
Was this information not available for Freelancer on my registration? If you do not provide a withdrawal method to my country, then shouldn't you remove my country from the list of countries on registration, or at least in your FAQs and help sections?
So, I decided to end my journey on Freelancer, but it wasn't that simple. After messaging the person from the first job posting that I'm unable to finish the project due to the inability of withdrawing the money, they labeled the project as incomplete. However, my balance on Freelancer remained in the negative value. They still want me to deposit their fee for the project that was not completed, even though I didn't technically get paid for the project that I did complete.
You may think this story does not apply to you because you wouldn't face similar problems regarding identity verification or money withdrawal, however, one thing is evident: Freelancer does not prioritize freelancers. You should know this when before you even get paid, they take their share of their money. They make sure that those who use their plans get their jobs. They gloss over some details and their customer support was not helpful in fixing the issues I was having. If you are not a Freelancer user, then honestly don't bother being a part of it.
","url":"https://backend.shahednasser.com/my-horrible-experience-with-freelancer-com/","canonical_url":null,"uuid":"2b575ee6-5bda-4991-8b24-939ac651e477","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"6019293de3d803001eaf0162","reading_time":6,"send_email_when_published":null,"email_subject":null,"childHtmlRehype":{"html":"2 days after posting this, Freelancer's support team has reached out and worked out the balance issue. Hopefully, in the future situations similar to mine will be handled better and Freelancer becomes about freelancers again.
I have been working as a freelance web developer since 2017. I have worked on many projects including financial auditing management, reservation and booking systems, e-commerce projects, and many more. All of these projects I have worked on locally with people from the same country.
However, I've always wanted to try Freelancer.com. It seemed like it would provide good opportunities, and frankly easier ways to make money as a freelancer. So, in December, I decided to expand my freelancing journey there.
If you don't know what Freelancer is, it's a platform that provides a connection between freelancers and job posters from all over the world. It's mostly used by developers or designers, but it can be used for any sector and industry. If you have a job that you want done, you just post a project with the descriptions and budget. If you're a freelancer, you can search through projects and bid on the ones you like, explaining why you'd be perfect for the job and what your fees are.
I had such high expectations going in. Not only does Freelancer have so many users, but if you check their profile summaries you'll see that these users might have done over hundreds of projects and made good amount of money through Freelancer. If it happened to others, why can't it happen to me?
After creating my account, Freelancer encouraged me to verify my identity. They first ask you for a pic of your ID or Passport or any identification you have. Next, you will be asked to write a code provided by Freelancer on a paper and take a picture with it. I did both of those things and passed their verification process.
However, I was then met by my first problem on Freelancer. The last step you have to do to verify your identity is to provide a proof of address. If you have done this on any website before, you are usually asked to provide any bill that proves your address. For Freelancer, it's more strict than this. You are asked to provide a utility bill, a contract or something official that not only has your full name, address, and phone number on, but also the company or other party's details as well.
For some people this is easy to do, however, if you're like me, a person that comes from a culture where living with your family is normal and having the bills in someone else's name, even governmental forms, it's not possible.
So, since Freelancer made it seem like identifying your identity is just an optional process that just gives you a boost, I decided to not finish the process. I can still bid and be assigned to projects, so it's not going to stop me.
I started then applying for projects, and that's when I faced more problems.
If you're not a Freelancer Plus member, you only get 6 bids when you create your account. After that, you get new bids only after 5 days. You get at most 6 bids, which means even if you leave your account for a while, it will not cross the 6 bids limit.
As a beginner, getting a project is not easy at all. Job posters will mostly look at the reviews you have or number of projects you worked. And it doesn't help that those with higher reviews or higher plans on Freelancer show up higher in the bids of a project than beginners who don't have any reviews. So, 6 bids a month will not be of any help to get your reviews higher and getting more jobs.
This is another issue that Freelancer has. It does not give a chance to new comers. Its system ensures that only those with high reviews or paid plans get a better chance at getting hired. Even if you do have a paid plan you still will not get as much of a chance as anyone with a 5 stars review.
So, I decided to start a free trial on the plus membership. You get a 100 bid a month, approximately 3 bids a day. This was helpful as I could bid on more projects and increase my chance of getting my first project on Freelancer.
Even when you bid on many projects, it's still not easy to get a project on Freelancer. Again, no review, no one will see you.
Another problem you'll notice when using Freelancer is that there are certain tags for projects that will get over 50 bids in a minute. For example, check any Wordpress job. You'll find that after 2 minutes or even less of it getting posted, it already has so many bids, and most of these bids are by companies and not individuals. You'll realize soon that companies who can take on different projects, and not individual freelancers, are the ones who can actually make money and get projects on Freelancer.
After bidding for a few days on so many projects, I finally got a project to develop a portfolio website for a company. Then, I got another small project just to add a google analytics link to a website and fix some email issues the poster had.
When taking jobs on Freelancer, your balance will immediately drop even before you start working on the project or getting paid. That is because Freelancer takes their share the minute you are assigned the project, regardless of how the project actually goes.
I finished the small project and started working on the portfolio website. Then, I found out something that was the main problem of working on Freelancer.
Freelancer has a few ways you can withdraw your money: Wire Transfer, Express Withdrawal, Paypal, and Skrill. Most of these methods are not available in all countries, which means Wire Transfer is the only method that's available for your country regardless of where you are.
However, Wire Transfer (and all payment methods) requires that you verify your identity. Then shouldn't this make verifying your identity mandatory, and not optional? Freelancer could point that out when it asks you to verify your identity, that you will need this to verify your identity. Instead, Freelancer just points out that it's good for the job poster and your profile to verify your identity.
I contacted their support, and when explaining my inability to provide a proof of address since it's asking for something that is not available for me, I was told it was because of Freelancer's strict policy and because they want to maintain \"the security of the website.\"
Ok, so that's understandable in a sense. However, I did a project with a job poster, I finished the project, I received a 5-star review, and the job poster paid for the job. Shouldn't this provide as a source of guarantee that I'm doing my job properly and that I'm not misusing Freelancer or breaking its security? If not, then shouldn't I at least get paid for the work I've done?
I followed up with an email asking how can I withdraw my money, and I was simply told that it's not possible for me to withdraw my money in my location.
Was this information not available for Freelancer on my registration? If you do not provide a withdrawal method to my country, then shouldn't you remove my country from the list of countries on registration, or at least in your FAQs and help sections?
So, I decided to end my journey on Freelancer, but it wasn't that simple. After messaging the person from the first job posting that I'm unable to finish the project due to the inability of withdrawing the money, they labeled the project as incomplete. However, my balance on Freelancer remained in the negative value. They still want me to deposit their fee for the project that was not completed, even though I didn't technically get paid for the project that I did complete.
You may think this story does not apply to you because you wouldn't face similar problems regarding identity verification or money withdrawal, however, one thing is evident: Freelancer does not prioritize freelancers. You should know this when before you even get paid, they take their share of their money. They make sure that those who use their plans get their jobs. They gloss over some details and their customer support was not helpful in fixing the issues I was having. If you are not a Freelancer user, then honestly don't bother being a part of it.
","htmlAst":{"type":"root","children":[{"type":"element","tagName":"h3","properties":{"id":"update"},"children":[{"type":"text","value":"UPDATE"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"2 days after posting this, Freelancer's support team has reached out and worked out the balance issue. Hopefully, in the future situations similar to mine will be handled better and Freelancer becomes about freelancers again."}]},{"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/asset.png","className":["kg-image"],"alt":"","loading":"lazy"},"children":[]}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"I have been working as a freelance web developer since 2017. I have worked on many projects including financial auditing management, reservation and booking systems, e-commerce projects, and many more. All of these projects I have worked on locally with people from the same country."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"However, I've always wanted to try Freelancer.com. It seemed like it would provide good opportunities, and frankly easier ways to make money as a freelancer. So, in December, I decided to expand my freelancing journey there. "}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you don't know what Freelancer is, it's a platform that provides a connection between freelancers and job posters from all over the world. It's mostly used by developers or designers, but it can be used for any sector and industry. If you have a job that you want done, you just post a project with the descriptions and budget. If you're a freelancer, you can search through projects and bid on the ones you like, explaining why you'd be perfect for the job and what your fees are."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"I had such high expectations going in. Not only does Freelancer have so many users, but if you check their profile summaries you'll see that these users might have done over hundreds of projects and made good amount of money through Freelancer. If it happened to others, why can't it happen to me?"}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"After creating my account, Freelancer encouraged me to verify my identity. They first ask you for a pic of your ID or Passport or any identification you have. Next, you will be asked to write a code provided by Freelancer on a paper and take a picture with it. I did both of those things and passed their verification process. "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"However, I was then met by my first problem on Freelancer. The last step you have to do to verify your identity is to provide a proof of address. If you have done this on any website before, you are usually asked to provide any bill that proves your address. For Freelancer, it's more strict than this. You are asked to provide a utility bill, a contract or something official that not only has your full name, address, and phone number on, but also the company or other party's details as well."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For some people this is easy to do, however, if you're like me, a person that comes from a culture where living with your family is normal and having the bills in someone else's name, even governmental forms, it's not possible."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"So, since Freelancer made it seem like identifying your identity is just an optional process that just gives you a boost, I decided to not finish the process. I can still bid and be assigned to projects, so it's not going to stop me."}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"I started then applying for projects, and that's when I faced more problems. "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you're not a Freelancer Plus member, you only get 6 bids when you create your account. After that, you get new bids only after 5 days. You get at most 6 bids, which means even if you leave your account for a while, it will not cross the 6 bids limit. "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"As a beginner, getting a project is not easy at all. Job posters will mostly look at the reviews you have or number of projects you worked. And it doesn't help that those with higher reviews or higher plans on Freelancer show up higher in the bids of a project than beginners who don't have any reviews. So, 6 bids a month will not be of any help to get your reviews higher and getting more jobs."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This is another issue that Freelancer has. It does not give a chance to new comers. Its system ensures that only those with high reviews or paid plans get a better chance at getting hired. Even if you do have a paid plan you still will not get as much of a chance as anyone with a 5 stars review."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"So, I decided to start a free trial on the plus membership. You get a 100 bid a month, approximately 3 bids a day. This was helpful as I could bid on more projects and increase my chance of getting my first project on Freelancer."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Even when you bid on many projects, it's still not easy to get a project on Freelancer. Again, no review, no one will see you. "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Another problem you'll notice when using Freelancer is that there are certain tags for projects that will get over 50 bids in a minute. For example, check any Wordpress job. You'll find that after 2 minutes or even less of it getting posted, it already has so many bids, and most of these bids are by companies and not individuals. You'll realize soon that companies who can take on different projects, and not individual freelancers, are the ones who can actually make money and get projects on Freelancer."}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"After bidding for a few days on so many projects, I finally got a project to develop a portfolio website for a company. Then, I got another small project just to add a google analytics link to a website and fix some email issues the poster had."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When taking jobs on Freelancer, your balance will immediately drop even before you start working on the project or getting paid. That is because Freelancer takes their share the minute you are assigned the project, regardless of how the project actually goes."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"I finished the small project and started working on the portfolio website. Then, I found out something that was the main problem of working on Freelancer."}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Freelancer has a few ways you can withdraw your money: Wire Transfer, Express Withdrawal, Paypal, and Skrill. Most of these methods are not available in all countries, which means Wire Transfer is the only method that's available for your country regardless of where you are."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"However, Wire Transfer (and all payment methods) requires that you verify your identity. Then shouldn't this make verifying your identity mandatory, and not optional? Freelancer could point that out when it asks you to verify your identity, that you will need this to verify your identity. Instead, Freelancer just points out that it's good for the job poster and your profile to verify your identity."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"I contacted their support, and when explaining my inability to provide a proof of address since it's asking for something that is not available for me, I was told it was because of Freelancer's strict policy and because they want to maintain \"the security of the website.\""}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Ok, so that's understandable in a sense. However, I did a project with a job poster, I finished the project, I received a 5-star review, and the job poster paid for the job. Shouldn't this provide as a source of guarantee that I'm doing my job properly and that I'm not misusing Freelancer or breaking its security? If not, then shouldn't I at least get paid for the work I've done?"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"I followed up with an email asking how can I withdraw my money, and I was simply told that it's not possible for me to withdraw my money in my location."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"Was this information not available for Freelancer on my registration? If you do not provide a withdrawal method to my country, then shouldn't you remove my country from the list of countries on registration, or at least in your FAQs and help sections?"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"So, I decided to end my journey on Freelancer, but it wasn't that simple. After messaging the person from the first job posting that I'm unable to finish the project due to the inability of withdrawing the money, they labeled the project as incomplete. However, my balance on Freelancer remained in the negative value. They still want me to deposit their fee for the project that was not completed, even though I didn't technically get paid for the project that I did complete."}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h3","properties":{"id":"conclusion"},"children":[{"type":"text","value":"Conclusion"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You may think this story does not apply to you because you wouldn't face similar problems regarding identity verification or money withdrawal, however, one thing is evident: Freelancer does not prioritize freelancers. You should know this when before you even get paid, they take their share of their money. They make sure that those who use their plans get their jobs. They gloss over some details and their customer support was not helpful in fixing the issues I was having. If you are not a Freelancer user, then honestly don't bother being a part of it."}]}],"data":{"quirksMode":false}},"tableOfContents":[{"id":"update","heading":"UPDATE"},{"id":"conclusion","heading":"Conclusion"}]},"featureImageSharp":{"base":"photo-1487073240288-854ac7f1bb3c.jpg","publicURL":"/static/d60b37d2cae8e4fab7b6a3cf20535bef/photo-1487073240288-854ac7f1bb3c.jpg","imageMeta":{"width":2000,"height":1333},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAMCBAX/xAAVAQEBAAAAAAAAAAAAAAAAAAABAv/aAAwDAQACEAMQAAABfTeuXLJlH//EABoQAAMBAAMAAAAAAAAAAAAAAAECAxEAEjH/2gAIAQEAAQUCLvw98PsW2dDj0GP/AP/EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABwQAAIBBQEAAAAAAAAAAAAAAAABIRASEyJBQv/aAAgBAQAGPwLbqgeSklnkaR//xAAaEAEAAwEBAQAAAAAAAAAAAAABABEhMVFx/9oACAEBAAE/IStIDRV78gtaOYE6R2dNxK1YVPYXMT//2gAMAwEAAgADAAAAELzP/8QAFhEAAwAAAAAAAAAAAAAAAAAAEBFB/9oACAEDAQE/EHR//8QAFhEBAQEAAAAAAAAAAAAAAAAAARBB/9oACAECAQE/EAyf/8QAGhABAQADAQEAAAAAAAAAAAAAAREAIVExQf/aAAgBAQABPxB3BBKPXGKoNAaT1nhgABpc3eyFfu8VgAFIyeLg+oXQtmf/2Q==","aspectRatio":1.4957264957264957,"src":"/static/d60b37d2cae8e4fab7b6a3cf20535bef/ea4ab/photo-1487073240288-854ac7f1bb3c.jpg","srcSet":"/static/d60b37d2cae8e4fab7b6a3cf20535bef/477ba/photo-1487073240288-854ac7f1bb3c.jpg 175w,\n/static/d60b37d2cae8e4fab7b6a3cf20535bef/06776/photo-1487073240288-854ac7f1bb3c.jpg 350w,\n/static/d60b37d2cae8e4fab7b6a3cf20535bef/ea4ab/photo-1487073240288-854ac7f1bb3c.jpg 700w,\n/static/d60b37d2cae8e4fab7b6a3cf20535bef/3055e/photo-1487073240288-854ac7f1bb3c.jpg 1050w,\n/static/d60b37d2cae8e4fab7b6a3cf20535bef/eff08/photo-1487073240288-854ac7f1bb3c.jpg 1400w,\n/static/d60b37d2cae8e4fab7b6a3cf20535bef/4e5f3/photo-1487073240288-854ac7f1bb3c.jpg 2000w","srcWebp":"/static/d60b37d2cae8e4fab7b6a3cf20535bef/89afa/photo-1487073240288-854ac7f1bb3c.webp","srcSetWebp":"/static/d60b37d2cae8e4fab7b6a3cf20535bef/9fca7/photo-1487073240288-854ac7f1bb3c.webp 175w,\n/static/d60b37d2cae8e4fab7b6a3cf20535bef/37a4e/photo-1487073240288-854ac7f1bb3c.webp 350w,\n/static/d60b37d2cae8e4fab7b6a3cf20535bef/89afa/photo-1487073240288-854ac7f1bb3c.webp 700w,\n/static/d60b37d2cae8e4fab7b6a3cf20535bef/78e7a/photo-1487073240288-854ac7f1bb3c.webp 1050w,\n/static/d60b37d2cae8e4fab7b6a3cf20535bef/03d34/photo-1487073240288-854ac7f1bb3c.webp 1400w,\n/static/d60b37d2cae8e4fab7b6a3cf20535bef/49d6b/photo-1487073240288-854ac7f1bb3c.webp 2000w","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.
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.
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.
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}![](\"https://backend.shahednasser.com/content/images/2022/03/Screen-Shot-2022-02-02-at-2.43.24-PM-1.png.jpeg\")
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}![](\"https://backend.shahednasser.com/content/images/2022/03/Screen-Shot-2022-02-02-at-3.19.51-PM.png.jpeg\")
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:
::-webkit-scrollbar-button:vertical:start: This is for the up button in the vertical scrollbar.::-webkit-scrollbar-button:vertical:end: This is for the down button in the vertical scrollbar.::-webkit-scrollbar-button:horizontal:start: This is for the left button in the horizontal scrollbar.::-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.
![](\"https://backend.shahednasser.com/content/images/2022/03/Screen-Shot-2022-02-02-at-3.41.17-PM.png.jpeg\")
![](\"https://backend.shahednasser.com/content/images/2022/03/Screen-Shot-2022-02-02-at-3.41.25-PM.png.jpeg\")
This pseudo-element selector is used to style the space between the vertical and horizontal scrollbars.
![](\"https://backend.shahednasser.com/content/images/2022/03/Screen-Shot-2022-02-02-at-3.54.09-PM.png.jpeg\")
For example, you can use it to set different background color:
::-webkit-scrollbar-corner {\n background-color: #7f1d1d;\n}![](\"https://backend.shahednasser.com/content/images/2022/03/Screen-Shot-2022-02-02-at-3.56.09-PM.png.jpeg\")
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.
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.
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.
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}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}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:
::-webkit-scrollbar-button:vertical:start: This is for the up button in the vertical scrollbar.::-webkit-scrollbar-button:vertical:end: This is for the down button in the vertical scrollbar.::-webkit-scrollbar-button:horizontal:start: This is for the left button in the horizontal scrollbar.::-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.
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}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\nCSS 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.
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.
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:
![](\"https://backend.shahednasser.com/content/images/2022/01/Screen-Shot-2022-01-03-at-10.40.24-AM.png\")
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}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.
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.
![](\"https://backend.shahednasser.com/content/images/2022/01/Screen-Shot-2022-01-03-at-10.56.04-AM.png\")
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.
![](\"https://backend.shahednasser.com/content/images/2022/01/Screen-Shot-2022-01-03-at-10.59.03-AM.png\")
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.
![](\"https://backend.shahednasser.com/content/images/2022/01/Screen-Shot-2022-01-03-at-11.04.33-AM.png\")
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:
![](\"https://backend.shahednasser.com/content/images/2022/01/Screen-Shot-2022-01-03-at-11.09.59-AM.png\")
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.
![](\"https://backend.shahednasser.com/content/images/2022/01/Screen-Shot-2022-01-03-at-11.19.42-AM.png\")
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.
![](\"https://backend.shahednasser.com/content/images/2022/01/Screen-Shot-2022-01-03-at-11.21.35-AM.png\")
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}![](\"https://backend.shahednasser.com/content/images/2022/01/Screen-Shot-2022-01-03-at-11.25.12-AM.png\")
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.
![](\"https://backend.shahednasser.com/content/images/2022/01/Screen-Shot-2022-01-03-at-11.28.48-AM.png\")
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.
![](\"https://backend.shahednasser.com/content/images/2022/01/Screen-Shot-2022-01-03-at-11.30.38-AM.png\")
As you can see, you can use both properties for rows and columns to control many aspects of positioning and sizing of a grid.
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:
![](\"https://backend.shahednasser.com/content/images/2022/01/Screen-Shot-2022-01-03-at-11.50.08-AM.png\")
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}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.
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.
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}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.
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.
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.
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:
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.
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.
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.
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:
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}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.
![](\"https://backend.shahednasser.com/content/images/2021/10/Screen-Shot-2021-10-16-at-7.11.49-PM.png\")
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.
![](\"https://backend.shahednasser.com/content/images/2021/10/Screen-Shot-2021-10-16-at-7.17.17-PM.png\")
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.
![](\"https://backend.shahednasser.com/content/images/2021/10/Screen-Shot-2021-10-17-at-5.10.44-PM-1.png\")
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.
![](\"https://backend.shahednasser.com/content/images/2021/10/Screen-Shot-2021-10-17-at-4.35.03-PM.png\")
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.
![](\"https://backend.shahednasser.com/content/images/2021/10/Screen-Shot-2021-10-17-at-4.38.04-PM.png\")
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.
![](\"https://backend.shahednasser.com/content/images/2021/10/Screen-Shot-2021-10-17-at-4.40.57-PM.png\")
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.
![](\"https://backend.shahednasser.com/content/images/2021/10/Screen-Shot-2021-10-17-at-4.43.54-PM.png\")
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.
![](\"https://backend.shahednasser.com/content/images/2021/10/Screen-Shot-2021-10-17-at-4.55.07-PM.png\")
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.
![](\"https://backend.shahednasser.com/content/images/2021/10/Screen-Shot-2021-10-17-at-5.00.50-PM.png\")
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.
![](\"https://backend.shahednasser.com/content/images/2021/10/Screen-Shot-2021-10-17-at-5.08.00-PM.png\")
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.
This section includes resources that I found helpful but are not necessarily related to Web Development in particular.
![](\"https://backend.shahednasser.com/content/images/2021/10/Screen-Shot-2021-10-17-at-5.04.12-PM.png\")
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.
![](\"https://backend.shahednasser.com/content/images/2021/10/Screen-Shot-2021-10-17-at-5.18.29-PM.png\")
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.
![](\"https://backend.shahednasser.com/content/images/2021/10/Screen-Shot-2021-10-17-at-5.20.32-PM.png\")
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.
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.
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.
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.
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.
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 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.
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 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.
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.
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.
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.
This section includes resources that I found helpful but are not necessarily related to Web Development in particular.
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.
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.
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.
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":"google-in-dark-mode","prev":"5-ux-issues-apple-needs-to-fix-in-the-messages","next":"my-horrible-experience-with-freelancer-com","tag":"css","limit":3,"skip":0,"primaryTagCount":18,"collectionPaths":{}}},"staticQueryHashes":["1272700106","1676991999","2138873178","2546165603","2681841279","2938721187","293880488","3052966952","4156497161"]}