--- title: "Devrath Rana (@devrath) | Hashnode" description: "Software Developer. Read the latest articles by Devrath Rana on Hashnode." url: "https://hashnode.com/@devrath" --- @devrath # Devrath Rana @devrath · Delhi, India · Joined August 2022 Software Developer ### [Chrome Dev Tools 101](https://thewheelofcoder.hashnode.dev/chrome-dev-tools-101?utm_source=hashnode&utm_medium=feed) Open Chrome right-click on the screen to target inspect and click to open dev tools. Click on the three dots and select dockside to set the dev tools orientation. Console Now let’s discuss more about console tabs The console is a place to log messa... 16 min read · [thewheelofcoder.hashnode.dev](https://thewheelofcoder.hashnode.dev/chrome-dev-tools-101?utm_source=hashnode&utm_medium=feed) [Dec 25, 2024](https://hashnode.com/posts/chrome-dev-tools-101/676c354dfc3a3db946c78905) ### [Creating Animated Buttons and Complex Hero Section Background design with HTML and CSS](https://thewheelofcoder.hashnode.dev/creating-animated-buttons-and-complex-hero-section-background-design-with-html-and-css?utm_source=hashnode&utm_medium=feed) In this blog, we'll explore how to create visually appealing animated buttons using HTML and CSS and make complex background designs with overflowing list items. This tutorial is beginner-friendly and will guide you step-by-step through the process. ... 31 min read · [thewheelofcoder.hashnode.dev](https://thewheelofcoder.hashnode.dev/creating-animated-buttons-and-complex-hero-section-background-design-with-html-and-css?utm_source=hashnode&utm_medium=feed) [Jun 8, 2024](https://hashnode.com/posts/creating-animated-buttons-and-complex-hero-section-background-design-with-html-and-css/6664b500dc46c84cfff70c64) ### [Make slide and shine animation with button hover transition in css](https://thewheelofcoder.hashnode.dev/make-slide-and-shine-animation-with-button-hover-transition-in-css?utm_source=hashnode&utm_medium=feed) To create buttons with labels and icons that have a shine animation effect, we will use a combination of HTML and CSS. The following tutorial provides the necessary HTML and CSS code to achieve this effect. HTML and CSS Code for Animated Buttons with... 5 min read · [thewheelofcoder.hashnode.dev](https://thewheelofcoder.hashnode.dev/make-slide-and-shine-animation-with-button-hover-transition-in-css?utm_source=hashnode&utm_medium=feed) [May 23, 2024](https://hashnode.com/posts/make-slide-and-shine-animation-with-button-hover-transition-in-css/664f9af03b92528758f59b17) ### [Progressive Enhancement: Building Robust and User-Friendly Web Applications](https://thewheelofcoder.hashnode.dev/progressive-enhancement-building-robust-and-user-friendly-web-applications?utm_source=hashnode&utm_medium=feed) Progressive enhancement (PE) is a web design strategy that prioritizes core content and functionality for all users, ensuring a stable and accessible experience. As users' browsers and Internet connections allow, more advanced features and presentati... 3 min read · [thewheelofcoder.hashnode.dev](https://thewheelofcoder.hashnode.dev/progressive-enhancement-building-robust-and-user-friendly-web-applications?utm_source=hashnode&utm_medium=feed) [May 22, 2024](https://hashnode.com/posts/progressive-enhancement-building-robust-and-user-friendly-web-applications/664ddb97b464743c13c09079) ### [Web Development Essentials: Modularity, Client-Side Browsers, and Atomic Design Patterns](https://thewheelofcoder.hashnode.dev/web-development-essentials-modularity-client-side-browsers-and-atomic-design-patterns?utm_source=hashnode&utm_medium=feed) How Browsers Work What Does a Browser Do? A browser’s primary responsibilities include: DNS Resolution: Translating human-readable domain names into IP addresses. HTTP Exchange: Communicating with web servers using the HTTP protocol to request and ... 5 min read · [thewheelofcoder.hashnode.dev](https://thewheelofcoder.hashnode.dev/web-development-essentials-modularity-client-side-browsers-and-atomic-design-patterns?utm_source=hashnode&utm_medium=feed) [May 22, 2024](https://hashnode.com/posts/web-development-essentials-modularity-client-side-browsers-and-atomic-design-patterns/664dd0530c976ab84e657789)