[Tutorial] Customizing your profile with Inspect Element

NOTICE: This tutorial will not go in-depth on how to code, rather it will talk about the Inspect Element method I use when making layouts

Now, to the main explanation, I usually have two pages open: one opened up to my profile, whether that be on my account or an alternative account, and another opened up to the Edit My Profile page. In the page I have my profile, I also have Inspect Element opened up as well. Be sure to have not only the Styles tab (CSS) open, but also the Elements tab (HTML), too. It personally helps me navigate through the site's elements and classes.

Also, two tools that I always use is the Element Selector tool and the Device Emulator tool. The Element Selector tool does just what it sounds like; all you do is click on an element in the page you wish to inspect, and it will take you there instantly. The Device Emulator also does what it sounds like it does, with multiple options of devices, such as tablet and mobile devices. You might have to refresh your page in order to get the full effect of being in emulator mode and back in desktop mode.

Like the notice said in the beginning of this blog post, I will not go in detail of how one would change the values of the style on the page, but there are many sites, even blog posts on SpaceHey, which teaches HTML and CSS.

Once you're done customizing what's on your page with Inspect Element, you should paste what you have done with Inspect Element into a section of your Edit My Profile page. Be sure to surround what you have done with the style elements, and save your profile very often, in case of unstable internet occurrences.

I believe that wraps up this tutorial. If you have anything to correct me on, I'll look into it, and update this blog post when I can. If you have any queries, then I'll try my best to help you with them. Thanks for reading!