CSS

Center Images using CSS

In this OpenGenus article, I will go over the various ways to center images on a webpage using CSS, which can be one of the more tricky tasks when building a webpage.

Web Development

Creating a simple website with HTML, CSS, and JavaScript for complete beginners

Starting your first application may feel overwhelming if you are new to web development, but by beginning with basic web pages using HTML, CSS, and some JavaScript.

CSS

Aligning Flexbox

In Flexbox, the aligning part is done in parent element also called as flex-container. The child elements are present inside the flex-container.

Web Development

Responsive Image Grid

In this OpenGenus article, we will create a responsive image grid using HTML and CSS.

CSS

Quick Styling - Inline CSS

Inline CSS involves applying styling directly within HTML elements directly using the style attribute.

CSS

Specificity in CSS [3 types]

This OpenGenus article will explore how CSS specificity works and you will have an idea of how you can take control over your CSS styles.

CSS

Responsive Navigation Bar [without Bootstrap or external library]

A responsive nav-bar is a UI/UX based element, which is essential to improve the appearance and ease of navigation in websites. It consists of a 1D bar (usually) with icons and hyperlinks to take you to different parts of the same website.

Web Development

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.