Overview The progress bar is the main component for any web application. The progress tells the completion of a certain project or task. In this module we will build the progress bar using the HTML and will style it through the CSS. We will also provide the progress animation to our progress bar. In this task we will use the @keyframes to make the progress bar animated. Using the animation styling property such as animation duration, name, timing, etc. Algorithm Step 1 − Create a HTML boilerplate in your text editor. Step 2 − Create the parent div container ... Read More

Overview A portfolio gallery can be a collection of any types of photos and videos that represent the past work of the organization. To build a portfolio gallery we will use HTML and CSS. The HTML will help us in building the skeleton of the portfolio gallery and CSS is used to make the styling of the portfolio. As the portfolio will also be the main component of our website so we will make this page responsive using some CSS properties. Algorithm Step 1 − Create a HTML boilerplate on your text editor. Step 2 − Create a container ... Read More

Tables are a fundamental and critical aspect of web development and are used to present information in an ordered and legible format. However, some situations may necessitate presenting more intricate data that necessitates the use of nested tables. Nested tables are tables that are located within other table cells. In this article, we will direct you through the process of building nested tables in HTML, with a meticulous and detailed explanation accompanied by illustrations to help you comprehend the concept more effectively. Whether you're a neophyte or an experienced web designer, this article will furnish you with the knowledge and ... Read More

Overview A placeholder is an attribute of a HTML input tag, which tells the user about the input tag what information is to be filled in it. To style the placeholder of an input tag we will use the Syntactically Awesome Style Sheets (SASS) preprocessor scripting language in which it provides us with a feature of mixin. A mixin is like a simple function which we create in other programming languages. It helps us to not repeat the styling in the style sheet. To use the SASS mixin with our program firstly we should have to install the SASS to ... Read More

Overview Loops make our code clean and help to run the same lines of code multiple times. This makes a code to not to write the same lines of code multiple times. So to style the multiple containers and objects the same can be done by writing a line of code and repeating the same styling property several times. So to come up from this problem, Leaner Style Sheets (LESS) provides a looping facility by using which we can make our code readability easy and can save the developer time of developers in writing numbers of lines of styling property ... Read More

Overview Indexing are the numbers which indicate the points or a position of a sentence. In HTML, we can do indexing in two ways: Unordered List (ul) and Ordered List (li). To make a list with a roman number in HTML we use the tag, the roman number is the number which is written in sequence so we use ordered list instead of unordered list. To make the ordered list with a roman number we should define the type of ordered list, that is the indexing in the list should be ‘a’, ’A’, ’I’ or ‘i’. So to make ... Read More

Overview  A Leaner Style Sheets (LESS) is a dynamic preprocessor language the base language of it is Cascading Style Sheet (CSS). All the preprocessor languages are the upgraded version of the base language, so the LESS also has many more additional features. The LESS has a feature of variable, parent selector, mixins, nested selector, etc. In java on compiling the source code of “.java” file it produces the output as the “.class” file, same as java the LESS file on compiling the “.less” file produces a new file “.css” as output Approach To create and compile a LESS file we ... Read More

Overview A group of related options is a group in which all the items lie under the same category. For example apple, banana, kiwi all lie under the same group called fruits and BMW, Audi, G-Wagon these all lie under a category of cars. So sometimes to give a good user experience we need to define a category under which the other options lie. For this there is a tag in HTML to provide a feature, to group the same options under a category known as “” tag. Syntax The syntax to define the group of related options is ... Read More

Overview Buttons are the components in HTML which perform a certain action when clicked. Various buttons perform various actions. The HTML has some predefined buttons with a certain type of action. In a HTML form when the tag is used by default, the simple button inside the form tag is of type submit. So when you click on a button inside the form tag it will submit the form on your desired path and depends on the GET and POST request. The submit location is defined in the action attribute of the form. The HTML form by default is ... Read More

Overview To make the images of the fixed size can be done by styling the tag. We can style each tag and set its width and height by its tag name, class name or id name. The only thing is that while styling we have to carefully use the “.”, “#”, “tag”. As because tag name can be directly used styled but class name and id name cannot be directly used they are written followed by “.className”, “#idName” respectively. Approach The main approach to attain this task is to style the tag only once in the ... Read More