Learn the basics of CSS Pseudo Classes Pseudo classes are predefined keywords that are used to select an element based on its state or to target a specific child. They start with a single colon :. They can be used as part of a selector and are very useful for styling active or visited links, changing the style on hover, focus, or targeting the first child or odd rows. They are handy in many cases....
CSS selectors are an essential part of styling web pages. They allow us to associate declarations with specific HTML elements. In this blog, we will discuss the basics of selectors, how to combine and group them, and explore some advanced selectors as well. Basic Selectors A selector, such as p, targets all elements with the corresponding HTML tag. For example, to display words in a p element using the yellow color, we can write the CSS rule:...
A Brief History In the early days of web development, websites were limited to using only the fonts that were available on all computers, such as Georgia, Verdana, Arial, Helvetica, and Times New Roman. If a designer wanted to use a fancy font, they had to resort to using images. Then, in 2008, Safari and Firefox introduced the @font-face CSS property, which allowed online services to provide licenses for web fonts....
Discover the power of CSS Custom Properties, also known as CSS Variables, in modern browsers. These variables allow you to write better CSS by centralizing the values and reducing repetition and inconsistencies. One unique feature of CSS Variables is the ability to access and change their values programmatically using JavaScript. Introduction In recent years, CSS preprocessors like Less and SASS have gained popularity for their ability to nest selectors, provide easy imports, and introduce variables....
In the realm of CSS development, vendor prefixes have long been employed by browsers as a means of granting access to newer, yet-unstable features. However, their popularity is waning, with the use of experimental flags gaining traction instead. These flags require deliberate enabling in the user’s browser, serving as a more controlled and cautious approach. The shift away from vendor prefixes stems from the misuse and premature implementation of these prefixes in production code....
Node.js and the browser both utilize JavaScript as their programming language. However, there are several key differences that set them apart. This article will explore these differences and highlight how writing JavaScript applications in Node.js differs from programming for the web inside the browser. As a frontend developer who extensively uses JavaScript, one of the significant advantages of Node.js is the ability to program everything, both the frontend and the backend, in a single language....
IndexedDB is a powerful storage capability that has been introduced into browsers in recent years. It serves as a key/value store and is considered the definitive solution for storing data in browsers. In this article, we will provide an in-depth introduction to IndexedDB and cover various topics related to its usage. Introduction to IndexedDB IndexedDB is a noSQL database that allows you to store an indefinite amount of data in browsers....
Learn the essentials of using the HTML iframe tag The HTML iframe tag enables us to embed content from other sites into our web pages. This tag creates a separate browsing context, ensuring that the content within the iframe does not interfere with the parent page. JavaScript and CSS elements are contained within the iframe and do not spill over to the parent page. Many websites utilize iframes for various purposes....
Introduction to JSX JSX is a technology introduced by React that allows developers to write declarative syntax for defining a component’s UI using JavaScript. It is not a mix of HTML and JavaScript, but rather a way to describe the UI elements using JavaScript. JSX offers many advantages when working with components in React. A JSX primer To define a JSX element, you simply write JavaScript code that resembles HTML syntax....
In this tutorial, we will explore how to get started with Svelte, a JavaScript framework that offers a unique approach to building web applications. Unlike other frameworks like React, Vue, and Angular, Svelte compiles your app beforehand. This means that your site visitors don’t need to download the framework and library code, resulting in a smoother user experience with lower bandwidth usage. Just like using Hugo as a static site generator, where the generated pages are plain HTML, Svelte also disappears at deployment, leaving you with plain JavaScript....