I don't know about you but I often hear that styling a webpage is tedious and frustrating. I can appreciate that. But, it doesn't have to be. Did you know that you can style a webpage with the developer tools. Maybe you do and that is great! But if you don't then let me enlighten you to a couple of tips and tricks that I enjoy using.
So one of the first challenges I find when working with a webpage is centering or positioning anything. It's a pain in the butt! But it can be made simpler and one of the ways to make things easier for you is to use display grid or flex. Now I will link CSS Tricks Grid here and flex here. I have linked basic pictures of the helpful images you can find on CSS tricks.
So let's talk how to help with the dev tools. If you inspect the page and you have display grid or display grid on any of your containers/divs you can actually see a button on the elements tab in the dev tools that says either grid or flex depending on your choice.
After clicking this button you will be able to manipulate the styles window to the right which has another small button. 
If you click this you will then have access to all of the manipulation for grid and flex. This is powerful and I urge you to play around with this. You can move components on your browser window and find that position and layout that works for you. Want to bring these positions in your code? Copy and paste the CSS and bring it into yours. This might require some finesse if you are using Sass, Styled Components, Material Ui, etc...
I want to make a small series about styling especially with the dev tools so I will end this article here. If you need any help please reach out! I hope that you enjoy styling a little bit more and good luck with your coding!
Top comments (0)