HTML/CSS Tutorial

Creating a Layered Image Effect using HTML and CSS Tutorial

Submitted by oretnom23 on

This tutorial will help you to learn how to Create a Layered Image Effect using HTML and CSS. The purpose of this tutorial is to provide the students and beginners with a reference to enhance their knowledge and skills in terms of developing a website with a creative user interface. Here, snippets and scripts of a sample web page that demonstrate the said 3D effect of an image are provided. I have also provided the complete source code files that I created for this tutorial.

Create Switch using HTML, CSS, and JavaScript Tutorial

Submitted by oretnom23 on

In this tutorial, you will learn to create a Toggle Switch using HTML, CSS, and JavaScript. The tutorial aims to provide the students and new programmers with a reference for building a usable component for web applications using HTML, CSS, and JS from scratch. Here, a sample source code that demonstrates a simple toggle switch with functionality is provided. The complete source code zip file is also provided and is free to download.

Creating a Responsive Custom Admin Template using HTML, CSS, JS, and Bootstrap 5.3

Submitted by oretnom23 on

In this tutorial, I will show you how to create a Simple and Responsive Admin Template using HTML, CSS, JavaScript, and Bootstrap 5.3 Framework. The purpose of this tutorial is to provide the students, self-learners, and beginners with a reference to learn how to build a simple and responsive template using the said languages and CSS Framework. Here, snippets and source codes of a sample web application page that demonstrates a Responsive Admin Template are provided. The source code is also provided on this site and it is free to download.

Creating a Simple Vertical Infographic Timeline using HTML and CSS Tutorial

Submitted by oretnom23 on

In this tutorial, you will learn to create a Simple Vertical Infographic Timeline for your site using HTML and Pure CSS. The tutorial aims to provide the students, self-learners, and new programmers with a reference to guide them in creating their own timeline design using only CSS. Here, snippets and source code scripts for creating a vertical timeline are provided. The complete source code zip file is also provided and is free to download.

Creating a Parallax Website Design using Pure CSS Tutorial

Submitted by oretnom23 on

In this tutorial, you will learn to Create a Parallax Website Design using Pure CSS. The tutorial aims to provide students, self-learners, and new programmers with a reference for learning some new things that can be used to build a creative and interactive website design using Cascading Stylesheets Scripts. Here, I will be providing a simple web page source code or script that demonstrates the creation of a simple Parallax Effect/Design.

Creating a Responsive Nav Menu using CSS, Bootstrap, and JS Tutorial

Submitted by oretnom23 on

In this tutorial, you will learn how to Create a Responsive Navigation Menu using CSS, Bootstrap, and JavaScript. This tutorial aims to provide students, self-learners, or new programmers with a reference for creating a responsive interface for a website or web application. Here, I will be providing a simple source code that demonstrates the main objective of this tutorial. The sample source code zip file is also provided and is free to download.

Creating HTML List Pagination, Display Length, and Search in PHP Tutorial

Submitted by oretnom23 on

In this tutorial, we will be creating a simple HTML List Pagination with Display Entries Length and Search. This tutorial is really useful for optiomizing your website for display bulk data. With the said Web App Feature, this will help to limit the data to display from database, prevent long page scroll, and fast loading. Mainly, the idea of this tutorial focuses to the HTML

How to Create a Navigation Bar in HTML/CSS

Submitted by rinvizle on

This simple tutorial will teach you how to make a Navigation Bar through CSS script in horizontal and vertical postion. A navigation bar is a user interface element within a webpage that contains links to other sections of the website. In most cases, the navigation bar is part of the main website template, which means it is displayed on most, if not all, pages within the website. This means that no matter what page you are viewing, you can use the navigation bar to visit other sections of the website.

How to Embed Google Maps to your Website

Submitted by janobe on
Embedding a Google Maps onto a website may look difficult to achieve well, I’m going to teach you the simplest way on how to do it and even a beginner can easily do it. In this tutorial you will learn how to embed Google maps onto your website. This is ideal if you have an online business with a website, in this way it will be easier for your customers to locate you.