Font scaling based on width of container using CSS
In this article, we are going to discuss how can we scale the font based on the width of the container. The font size can be set with the “vw” (viewport) unit, which means the viewport width. The viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm. That way the font size will follow the size of the browser window....
read more
How to use SVG with :before or :after pseudo element ?
Using SVG with :before or :after pseudo-elements in CSS allows for the dynamic insertion of vector graphics into HTML elements. This technique enhances design flexibility by leveraging SVG’s scalability and interactivity while maintaining a clean HTML structure and reducing HTTP requests for image assets.:...
read more
How to use simple API using AJAX ?
AJAX (Asynchronous JavaScript and XML) is a set of tools used to make calls to the server to fetch some data. In this article, we will see how to implement a simple API call using AJAX. Prerequisites: Basic knowledge of AJAX and its function. You can learn all the basics from here. What are basic building? We will be fetching employee’s names from an employee object from a free API and displaying them inside a list. There are many API available for free on the internet. You can use any one of them. HTML Code: We have a button and to fetch data and an empty unordered list inside which we will be adding our list-items dynamically using JavaScript....
read more
How to change an input button image using CSS?
The default button in HTML can be changed to an image using CSS. The required button is selected using the respective CSS selector. The background property can then be set to include a background image and change the image type as required. The border of the button can also be removed to show only the image itself....
read more
CSS Padding vs Margin
In this article, we will explain the difference between CSS padding and margin....
read more
How to use a not:first-child selector in CSS?
This selector is used to select every element which is not the first-child of its parent element. It is represented as an argument in the form of :not(first-child) element....
read more
How to specify a fixed background-image in CSS ?
In this article, we are going to see how to specify a fixed background image in CSS. To keep your background fixed, scroll, or local in CSS, we have to use the background-attachment property....
read more
Design an About us Page using HTML and CSS
An “About” page is a section on a website that gives you information about the people or company behind the site. It’s a great way to get to know the people you’re interacting with online and to learn more about their stories and what they stand for. In this article, we are going to make an About page by using HTML and CSS....
read more
How to add whatsapp share button on a website ?
WhatsApp is the most popular messaging app. This article describes how you can add WhatsApp share button in your website....
read more
Create an Analog Clock using HTML, CSS and JavaScript
Analog clock is a clock that shows the time by using a circular disc and three traditional hour, minute, and second hands. We are going to build this by using HTML, CSS, and JavaScript....
read more
How to break line without using <br> tag in HTML / CSS ?
Use block-level elements to break the line without using <br> tag. There are many ways to break the line without using <br> tag. In this article we will see how to break the line without using a br tag and some of the methods to do so are as:...
read more
Tailwind CSS Container
Tailwind CSS provides a container class to constrain the width of content. It centers the content horizontally and sets maximum widths at different breakpoints, ensuring responsive design. By default, it limits content width to prevent it from stretching too wide on larger screens....
read more