My Coding Tutorial > Blog
30
Aug

Keep Them Watching: 5 Filling CSS Loaders They’ll Love

  • Mycodingtutorial / 1 week
  • 0
  • 4 min read

Here’s a collection of responsive “Filling CSS Loaders” you can use with just HTML + CSS. Each example automatically scales with the viewport. Gradient Filling Loader 1. Gradient Fill (gradient-fill.html) Stroke Filling Loader 2. Stroke to Fill (stroke-fill.html) Vertical Fill Loader 3. Vertical Fill (vertical-fill.html) Wave Fill Loader 4. Wave Fill (wave-fill.html) Sea Wave Fill […]

Product Card Design
16
Aug

Product Card Design with Hover, Quick View & Wishlist

  • Mycodingtutorial / 3 weeks
  • 0
  • 6 min read

Today I created a modern Product Card Design with responsive layout, hover effects, quick view, and wishlist features. Got it — you want a 4-column responsive product card design with: Create index.html file and copy code and paste code our layout. You will also like this post Create style.css file and copy code and paste […]

Banner Slider
18
Jul

Transform Your Website with a Beautiful Banner Slider Today!

  • Mycodingtutorial / 2 months
  • 0
  • 4 min read

Here’s a simple and elegant Beauty Banner Slider using only HTML/CSS and JavaScript, with: You can expand it further with JavaScript for full carousel control, but here’s a pure HTML+CSS+Js version to get started: Create index.html file and copy code and paste code our layout. You will also like this post Create style.css file and […]

30
Jun

Quick Ways to Make Your Service Cards Look More Professional

  • Mycodingtutorial / 2 months
  • 0
  • 5 min read

Here’s how to recreate the Service Cards layout you showed in the image using HTML and CSS, with responsive design and hover effects similar to your reference: Key Features: Clean responsive card layout Top image Centered circular icon over image Title, description, “Read More” button Bottom-right number with opacity Create index.html file and copy code […]

16
Jun

How to Create a Responsive Header that Adjusts to Screen Size

  • Mycodingtutorial / 3 months
  • 0
  • 4 min read

Today create Responsive Header that adjusts to all screen sizes (desktop, tablet, mobile), follow this simple structure using HTML and CSS. Create index.html file and copy code and paste code our layout. You will also like this post Create style.css file and copy code and paste code our layout.

05
Jun

Quick Guide to Writing Your First Custom WordPress Plugin

  • Mycodingtutorial / 3 months
  • 0
  • 2 min read

Here’s how to create a Custom WordPress Plugin that adds an Event custom post type with options to manage events (All Events, Add New Event, Event Categories) in the admin panel. Step-by-Step Guide to Create “Events” Plugin 1.Plugin File Structure Create a folder in wp-content/plugins/ named: Inside that folder, create a file: 2. Plugin Code […]

04
Jun

How to Set Up a Child Theme in Hello Elementor in 2025

  • Mycodingtutorial / 3 months
  • 0
  • 2 min read

Here’s how to create a Hello Elementor Child Theme for WordPress: Folder Structure Create a new folder in: With the following files inside: style.css Important: Template: hello-elementor must match the parent folder name exactly (hello-elementor). functions.php screenshot.png (Optional) Create a screenshot for the WP dashboard: Installation Steps Done! You can now:

Postcard Slider
21
May

Simple Code Tricks to Make Your Postcard Slider Look Better

  • Mycodingtutorial / 4 months
  • 0
  • 7 min read

Here’s a responsive 3-column Postcard Slider with image, title, meta, category, date, text, and button, in blue theme, that autoplays and loops using HTML, CSS, and JavaScript with Swiper.js (a modern Postcard Slider library): Features: Supports multimedia content in your Postcard Slider Create index.html file and copy code and paste code our layout. Dynamic storytelling […]

Tic-Tac-Toe
06
Apr

Make Your Tic-Tac-Toe Game Better: User Names and JavaScript

  • Mycodingtutorial / 5 months
  • 0
  • 8 min read

Tic-Tac-Toe is a classic two-player strategy game played on a 3×3 grid. Players take turns marking empty cells with their symbol — either X or O. The first player to align three of their marks in a horizontal, vertical, or diagonal line wins the round. If all cells are filled and no player has won, […]

team member Card Design
23
Mar

Simple HTML for a Great Card Design

  • Mycodingtutorial / 6 months
  • 0
  • 4 min read

A team member Card Design typically displays key details about an individual in a visually appealing and structured way. Below is a breakdown of how the content is designed and why each section is important 🚀 Create index.html file and copy code and paste code our layout. You will also like this post Create style.css […]