CSS

Building Playable Piano using HTML, CSS and JavaScript

In this hands-on tutorial at OpenGenus, we will embark on a musical journey by building a fully playable piano using the dynamic trio of web development: HTML, CSS, and JavaScript.

CSS

CSS writing-mode explained

In this article at OpenGenus, we will discuss the CSS property 'writing-mode' and where we can use it.

Web Development

Building Virtual Keyboard: A Step-by-Step Development Process

In this article at OpenGenus, we will be discussing about the process of developing a virtual keyboard using HTML, CSS, and JavaScript. The virtual keyboard allows users to input text through a graphical interface, and it includes features like caps lock, enter key, and space key.

Web Development

Building Dynamic Sound Board using HTML, CSS, and JavaScript [WebDev Project]

In this article at OpenGenus, we will guide you through the process of creating a dynamic sound board using HTML and JavaScript.

CSS

Animation in CSS [Complete Guide with code examples]

In this article at OpenGenus, we will be discussing one such property that will serve as a stepping stone in making websites seem more lively and intuitive: animations.

Web Development

Bubble Shooter game in HTML/CSS and JS

In this article at OpenGenus, we will explore the popular game called "Bubble Shooter" and take a closer look at its underlying code.

Web Development

Car racing game in HTML, CSS, JS

In this article at OpenGenus, we will discuss and demonstrate the creating of a car racing game using HTML, CSS and JavaScript.

CSS

3 CSS levels

CSS, short for Cascading Style Sheets, is utilized to apply styles to web pages that include HTML components. It manages various attributes of web page elements, such as the background color, font size, font family, and color.

Web Development

Whiteboard in HTML [WebDev Project]

In this article at OpenGenus, we will explore how to develop a whiteboard using HTML, CSS, and JavaScript in the HTML file. We will focus on the implementation of the whiteboard with a functional drawing feature, color selection, a clear button, and a rubber (eraser) function.

Web Development

Wordle using HTML, CSS and JavaScript

In this article at OpenGenus, we will be building a wordle game using HTML, CSS and JS. Stay for the exciting implementation details.

CSS

Masking in CSS (mask-image)

Masking in CSS is a versatile technique that allows developers to manipulate the visibility and shape of elements on a webpage. With the mask-image property, CSS provides a powerful toolset to create visually stunning effects by controlling the transparency of specific areas within an element.

Web Development

Whack a mole game using HTML, CSS, and JS

Let's make some cool and amazing whack a mole game in this article at OpenGenus.

Web Development

Bomberman Game in HTML, CSS and JavaScript

Throughout this article at OpenGenus, we will explain the game mechanics, discuss the implementation of key features, and briefly discuss how we can build our own Bomberman Game.

Web Development

Creating a page with video background using HTML/CSS

In this tutorial at OpenGenus, we will go over how to create a video background in your web application by using simple HTML and CSS.

CSS

Overflow Property In CSS

Most of the Frontend Developer struggle to get hold of websites layout. In this article at OpenGenus, we will discuss about the Overflow Property in CSS. An element will expand to fit it's content by default. When the elements width and height are fixed using pixel.

CSS

Clip Property in CSS

In this article at OpenGenus, we'll explore the clip property and its various use cases, along with code examples, to help you leverage its capabilities and create visually stunning web designs.

CSS

Inline Styling in CSS

Inline CSS is one of the styling ways in which we can target a particular tag for styling which is present anywhere in the HTML document or in the JavaScript file.

CSS

CSS Preprocessors

CSS Preprocessors are tools that add more functionality to normal CSS by using its own unique syntax. The browser can't read preprocessors so the code has to be compiled into vanila CSS which the browser can read.

UX Design

Peak-End Rule In UX Design

In this article at OpenGenus, We will look at how a psychological heuristic can affect the way we do things that is Peak End Rule and also aid in UX Designing.

UX Design

Parkinson's Law in UX Design

Parkinson's Law suggests that the amount of work required to complete a task is inversely proportional to the time available to complete it.

UX Design

Jakob's Law in UX design

Jakob's Law is named after Jakob Nielsen, a Danish human-computer interaction researcher, web usability consultant and the co-founder of the Nielsen Norman Group.

UX Design

Goal Gradient Effect in UX Design

In this article at OpenGenus, we will learn about Goal Gradient Effect in UX Design. Goal Gradient Effect gives us relation between one's approach to meet the goal and amount of work left to meet the goal.

CSS

Miller’s Law in UX design

Miller's Law is a UX design principle that describes the boundaries of human working memory. In 1956, a psychologist named George A. Miller published a paper titled “The Magical Number Seven, Plus or Minus Two: Some Limits on Our Capacity for Processing Information."

HTML

100+ Key terms in HTML and CSS

HTML and CSS are the backbone of web development, and it is essential for any web developer to have a good understanding of the key terms used in these languages. In this article, we will discuss the most important key terms in HTML and CSS with a brief description for each.

CSS

Hick’s Law and Fitt’s Law in UX/CSS

Hick's Law and Fitt's Law are two fundamental principles in UX and UI design that impact how users interact with digital interfaces. These ideas are essential in creating interfaces that are intuitive, easy to use, and aesthetically appealing.