Understanding the HTML hierarchy
When you are new to web development and have just started dirtying your hands with HTML code it is very important to understand the html hierarchy to proceed further.
Posts
Using Text-overflow property in CSS
This article deals with text overflow property of CSS and more emphasis is on ellipsis values over the other values. When the content overflows the container box, it has to be either accommodated in any way or clipped out of container box and should be represented to the user that overflowed content is clipped. It can be shown like visible overflow, clipped, ellipsis or custom string. Text overflow can be applied only for block level container elements as it makes sense only when the word/s being long to fit into the container. To apply text overflow we need to apply overflow : hidden or scroll or auto property. Overflow: clip is the default value. text-overflow: clip; This specification clips the content at the limit of the container area. So the truncation may happen at the middle of the character. Inorder to avoid that we need to add an empty string value (‘’). Text-overflow : ellipsis; It is the property wherein three consecutive dots are used to repres...
Using Image Sprites in CSS for Faster Web Pages
Using Image Sprites in CSS for Faster Web Pages Websites that rely heavily on visuals often struggle with slow loading times and excessive HTTP requests. One of the simplest performance techniques developers use to solve this problem is CSS image sprites. In this article, we’ll explore what image sprites are, why they improve performance, and how to implement them effectively. In many cases, we may have to create websites with larger images. This could be a photography website or a tourism website. Images might also be used for hover effects or when a page is visited. Eventually, using multiple images can generate more HTTP requests, which can increase the page load time. In such scenarios, we can use image sprites to improve performance. An image sprite is a collection of images put into a single image file. This reduces the number of HTTP requests and decreases the memory and bandwidth usage of a webpage. ...
Understanding CSS Class and ID Selectors: A Complete Guide
Class and id selectors are commonly used in CSS selectors. This article shows the usage of both the selectors and their significance. When building a website, managing styles for various elements is essential. CSS selectors—especially class and id selectors—play a major role in this process. Understanding how to use them effectively can make your stylesheets more organized and help improve performance. In this article, we'll dive into the differences between class and id selectors, when to use them, and best practices for naming and performance optimization. Id selectors are defined as unique identifiers for elements and can be used only once per page. Class selectors are used when you consistently style multiple elements of a page. Classes are used when multiple elements share the same style, while id selectors are used for unique purposes like the main header or footer of the page. Example: <p class="class_one">This is a paragraph</p> ...
Javascript window events
onbeforeunload function in JavaScript | Creative Technocrayts onbeforeunload function in JavaScript When you have filled up a form in a web page and if you close the page before submitting it, you may get a message "Are you sure to leave this page?" Such customized messages are examples of window events onbeforeunload . The onbeforeunload event is fired when the document unloads its resources. You may notice the document is still visible and the event can be cancelled. onbeforeunload event is assigned to the <body> element. Various mobile user agents ignore the event. HTML Code Example You can implement the onbeforeunload event like this: <body onbeforeunload="return myFunction()"> Other tags </body> JavaScript Code Example Here’s an example of the JavaScript function to show the prompt: function myFunction(){ return "Your mes...
HTTP -HYPER TEXT TRANSFER PROTOCOL
HTTP stands for Hyper Text Transfer Protocol. HTTP is an application protocol for distributed and collaborative information systems. HTTP is the foundation of data communication for the World Wide Web.
Website Favicon Guide: Recommended Sizes, Formats & iOS Requirements
Adding Favicons to the Website Favicons are one of the most common web page elements used in web development. Implementing them is easy and essential for websites. This article provides insights into adding favicons, helping beginners in web design. A favicon is a graphic image that acts as an identity for a website. It can appear in various places such as the website's title bar, address bar, desktop shortcuts, history, and bookmarks. Once your site is added to favorites or the home screen, favicons are displayed as representations of your site. The image used for favicons can typically be a square, with common sizes being 16x16 pixels . Other sizes, such as 32x32, 48x48, or 64x64 pixels , are also supported. The file format for favicons can be .png, .gif...