ris58h / WebCalm

Free JavaScript and CSS support in IntelliJ-based IDEs
https://plugins.jetbrains.com/plugin/21826-webcalm
30 stars 4 forks source link

[javascript] Selecting word at given offset... #10

Open PassingByThs opened 1 year ago

PassingByThs commented 1 year ago

When double click or press CTRL + W on java script method name in HTML file, IDEA pop up a progress window which display "Selecting word at given offset..."

IntelliJ IDEA 2023.1.2 (Community Edition) Build #IC-231.9161,38, built on June 20, 2023

WebCalm Vesion: 0.9

ris58h commented 1 year ago

Sorry, I couldn't reproduce the issue on 2023.1.3. Could you provide more details? What is the code to reproduce it? What exactly should I click to reproduce it? A video or screenshot would be useful.

PassingByThs commented 1 year ago

Here is an example. I save a website as html, and opend in IDEA. When double click or press CTRL + W on java script method name in HTML file, IDEA pop up a progress window which display "Selecting word at given offset..."

html content:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Online Courses and eBooks Library</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="Description" content="Online Courses and eBooks Library  - The Best Tutorials on latest technologies including ImageMagick, HTML Canvas, FastAPI, Snowflake, Pyramid, Falcon, XlsxWriter, WebDriverIO, Pygame,C, C++, Java, Python, PHP, Machine Learning, Data Science, AppML, AI with Python, Behave, Java16, Spacy."/>
<meta name="Keywords" content="HTML Canvas, FastAPI, Snowflake, Pyramid, Falcon, XlsxWriter, WebDriverIO, Pygame, HTML, Python, CSS, SQL, JavaScript, How to, PHP, Java, C++, jQuery, Bootstrap, C#, XML, MySQL, NodeJS, React, Angular, R, AI, Git, Data Science, Code Game, Tutorials, Programming, Web Development, Training, Learning, Quiz, Courses, Lessons, References, Examples, Source code, Demos, Tips"/>
<link rel="canonical" href="https://www.tutorialspoint.com" />
<link rel="shortcut icon" href="favicon.ico">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
<link id="style-switch" rel="stylesheet" href="/static/css/purge/style-min.css?v=3.2">
<link rel="stylesheet" type="text/css" href="/static/css/custom.css?v=8.9.5">
<!-- Meta Pixel Code -->
<script>
   !function(f,b,e,v,n,t,s)
   {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
   n.callMethod.apply(n,arguments):n.queue.push(arguments)};
   if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
   n.queue=[];t=b.createElement(e);t.async=!0;
   t.src=v;s=b.getElementsByTagName(e)[0];
   s.parentNode.insertBefore(t,s)}(window, document,'script',
   'https://connect.facebook.net/en_US/fbevents.js');
   fbq('init', '755332482277618');
   fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=755332482277618&ev=PageView&noscript=1"/></noscript>
<!-- End Meta Pixel Code -->
<!-- START Rakuten Advertising Tracking -->
<script type="text/javascript">
    (function (url) {
      /*Tracking Bootstrap Set Up DataLayer objects/properties here*/
      window.rakutenDataLayer = false; // Set custom DataLayer name if 'DataLayer' conflicts
      var dln = window.rakutenDataLayer || 'DataLayer';
    if(!window[dln]){
        window[dln] = {};
      }
      if(!window[dln].events){
        window[dln].events = {};
      }
      window[dln].events.SPIVersion = window[dln].events.SPIVersion || "3.4.1";
      var loc, ct = document.createElement("script");
      ct.type = "text/javascript";
      ct.async = true; ct.src = url; loc = document.getElementsByTagName('script')[0];
      loc.parentNode.insertBefore(ct, loc);
      }(document.location.protocol + "//tag.rmp.rakuten.com/124854.ct.js"));
</script>
<!-- END Rakuten Advertising Tracking -->
</head>
<body>

<!-- Top header START -->
<div class="navbar-top navbar-dark bg-light d-xl-block py-2 mx-2 mx-md-4 rounded-bottom-4">
    <div class="container-fluid px-3 px-xl-3">
        <div class="d-lg-flex justify-content-lg-between align-items-center top-nav-links">
            <!-- Top info -->
            <ul class="nav align-items-center justify-content-center">
                <li class="nav-item" data-bs-toggle="tooltip" data-bs-animation="false" data-bs-placement="bottom" data-bs-original-title="Home Page">
                    <a class="nav-link" href="https://www.tutorialspoint.com/index.htm"><i class="fal fa-home-alt me-1"></i> Home</a>
                </li>
                <li class="nav-item" data-bs-toggle="tooltip" data-bs-animation="false" data-bs-placement="bottom" data-bs-original-title="Online Coding System">
                    <a class="nav-link" href="https://www.tutorialspoint.com/codingground.htm"><i class="fal fa-code me-1"></i> Coding Ground</a>
                </li>
                <li class="nav-item" data-bs-toggle="tooltip" data-bs-animation="false" data-bs-placement="bottom" data-bs-original-title="Job Openings">
                    <span><a class="nav-link" href="https://www.tutorialspoint.com/about/about_careers.htm"><i class="fal fa-suitcase me-1"></i> Jobs</a></span>
                </li>
                <li class="nav-item" data-bs-toggle="tooltip" data-bs-animation="false" data-bs-placement="bottom" data-bs-original-title="Digital Whiteboard">
                    <span><a class="nav-link" href="https://www.tutorialspoint.com/whiteboard.htm"><i class="fal fa-chalkboard me-1"></i> Whiteboard</a></span>
                </li>
                <li class="nav-item" data-bs-toggle="tooltip" data-bs-animation="false" data-bs-placement="bottom" data-bs-original-title="Developer's Tools">
                    <span><a class="nav-link" href="https://www.tutorialspoint.com/online_dev_tools.htm"><i class="fal fa-tools me-1"></i> Tools</a></span>
                </li>
                <li class="nav-item" data-bs-toggle="tooltip" data-bs-animation="false" data-bs-placement="bottom" data-bs-original-title="Corporate Trainings">
                    <span><a class="nav-link" href="https://www.tutorialspoint.com/business/index.asp"><i class="fal fa-analytics me-1"></i> Corporate Training</a></span>
                </li>
            </ul>
            <div class="d-flex align-items-center justify-content-center">
                <div class="navbar-nav ms-2">
                    <div class="modeswitch-wrap" id="darkModeSwitch">
                        <div class="modeswitch-item">
                            <div class="modeswitch-icon">
                                <i class="fal fa-sun toggle-sun"></i>
                                <i class="fal fa-moon toggle-moon"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- teach with us -->
                <div class="me-3c top-nav-social">
                    <a class="nav-link" href="https://www.tutorialspoint.com/market/teach_with_us.jsp" aria-haspopup="true" aria-expanded="false" target="_blank"><i class="fal fa-users-class me-2"></i> Teach with us </a>
                </div>
                <!-- Top social -->
                <ul class="list-unstyled d-flex mb-0 top-nav-social">
                    <li><a class="px-2 nav-link" rel="nofollow" href="https://www.facebook.com/tutorialspointindia" target="_blank"><i class="fab fa-facebook"></i></a> </li>
                    <li><a class="px-2 nav-link" rel="nofollow" href="https://www.instagram.com/tutorialspoint_/" target="_blank"><i class="fab fa-instagram"></i></a> </li>
                    <li><a class="px-2 nav-link" rel="nofollow" href="https://twitter.com/tutorialspoint" target="_blank"><i class="fab fa-twitter"></i></a> </li>
                    <li><a class="px-2 nav-link" rel="nofollow" href="https://www.youtube.com/channel/UCVLbzhxVTiTLiVKeGV7WEBg" target="_blank"><i class="fab fa-youtube"></i></a> </li>
                    <li> <a class="px-2 nav-link" rel="nofollow" href="https://www.linkedin.com/authwall?trk=bf&trkInfo=AQEkqX2eckF__gAAAX-wMwEYvrsjBVbEtWQd4pgEdVSzkL22Nik1KEpY_ECWLKDGc41z8IOZWr2Bb0fvJplT60NPBtSw87J6QCpc7wD4qQ3iU13n6xJtBxME5o05Wmpg5JPm5YY=&originalReferer=&sessionRedirect=https%3A%2F%2Fwww.linkedin.com%2Fcompany%2Ftutorialspoint" target="_blank"><i class="fab fa-linkedin-in"></i></a> </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!-- Top header END -->

<!-- Header START -->
<header class="navbar-light navbar-sticky header-static">
    <!-- Logo Nav START -->
    <nav class="navbar navbar-expand-xl">
        <div class="container-fluid px-3 px-xl-5">
            <a class="navbar-brand" href="index.htm">
                <img class="light-mode-item navbar-brand-item" src="/images/logo.png?v2" alt="logo" />
                <img class="dark-mode-item navbar-brand-item" src="/images/logo-w.png?v2" alt="logo" />
            </a>
            <button class="navbar-toggler ms-auto" type="button" id="btn-menu-collapse">
                <span class="navbar-toggler-animation">
                    <span></span>
                    <span></span>
                    <span></span>
                </span>
            </button>
            <div class="navbar-collapse w-100 collapse" id="navbarCollapse">
                <ul class="navbar-nav navbar-nav-scroll me-auto">
                    <li class="nav-item dropdown">
                        <a class="nav-link" id="categoryMenu"><i class="fal fa-th me-3 fs-5 me-xl-1 d-xl-none"></i> <i class="fal fa-th me-1 d-none d-xl-inline-block"></i><span class="d-xl-inline-block ">Category <i class="fal fa-angle-down"></i></span></a>
                        <ul class="dropdown-menu shadow" aria-labelledby="categoryMenu" id="categories-menu">
                            <li> <a class="dropdown-item" href="https://www.tutorialspoint.com/categories/development"><i class="fa fa-cogs cat-icons"></i> Development</a></li>
                            <li> <a class="dropdown-item" href="https://www.tutorialspoint.com/categories/it_and_software"><i class="fa fa-tv cat-icons"></i>  IT and Networking</a></li>
                            <li> <a class="dropdown-item" href="https://www.tutorialspoint.com/categories/data_science_and_ai_ml"><i class="fa fa-head-side-brain cat-icons"></i> Data Science and AI ML</a></li>
                            <li> <a class="dropdown-item" href="https://www.tutorialspoint.com/categories/cyber_security"><i class="fa fa-camera-home cat-icons"></i> Cyber Security</a></li>
                            <li> <a class="dropdown-item" href="https://www.tutorialspoint.com/categories/marketing"><i class="fa fa-bullseye-arrow cat-icons"></i> Marketing</a></li>
                            <li> <a class="dropdown-item" href="https://www.tutorialspoint.com/categories/office_productivity"><i class="fa fa-camera-home cat-icons"></i> Office Productivity</a></li>
                            <li> <a class="dropdown-item" href="https://www.tutorialspoint.com/categories/business"><i class="fa fa-chart-bar cat-icons"></i> Business</a></li>
                            <li> <a class="dropdown-item" href="https://www.tutorialspoint.com/categories/lifestyle"><i class="fa fa-person-dolly-empty cat-icons"></i> Lifestyle</a></li>
                        </ul>
                    </li>
                </ul>
                <!-- Nav category menu END -->

                <!-- Main navbar START -->
                <div class="navbar-collapse collapse">
                    <!-- Nav Search START -->
                    <div class="col-xl-4"></div>
                    <!-- Nav Search END -->
                </div>
                <!-- Main navbar END -->

                <!-- Nav Main menu START -->
                <ul class="navbar-nav navbar-nav-scroll me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="https://www.tutorialspoint.com/latest/prime-packs" aria-haspopup="true" aria-expanded="false" target="_self"><i class="fal fa-cubes me-1"></i> Prime Packs</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="https://www.tutorialspoint.com/market/index.asp" aria-haspopup="true" aria-expanded="false" target="_self"><i class="fal fa-play-circle me-1"></i> Courses</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="https://www.tutorialspoint.com/latest/ebooks" aria-haspopup="true" aria-expanded="false" target="_self"><i class="fal fa-book-reader me-1"></i> eBooks</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="https://www.tutorialspoint.com/tutorialslibrary.htm" target="_self"><i class="fal fa-books me-1"></i> Library</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="https://www.tutorialspoint.com/articles/index.php" target="_self"><i class="fal fa-money-check-edit me-1"></i> Articles</a>
                    </li>
                </ul>
                <!-- Nav Main menu END -->
            </div>
            <!-- Main navbar END -->
            <!-- Signin START -->
            <div class="navbar-nav d-lg-inline-block">
                <a href="https://www.tutorialspoint.com/market/login.asp" target="_self"  class="btn btn-grey-border mb-0"><i class="fal fa-sign-in me-2"></i> Login </a>
            </div>
         <!-- Signin END -->
        </div>
    </nav>
    <!-- Logo Nav END -->
</header>
<!-- Header END -->

<!-- **************** MAIN CONTENT START **************** -->
<main>

<!-- ======================= Main Banner START -->
<section class="position-relative overflow-hidden pt-5 pt-lg-3 bg-white-banner">
    <!-- SVG START -->
    <!-- SVG END -->

    <!-- SVG START -->
    <!-- SVG END -->

    <!-- SVG START -->
    <!-- SVG END -->

    <!-- Content START -->
    <div class="container">
        <div class="row align-items-center g-5">
            <div class="col-lg-5 col-xl-6 position-relative z-index-1 text-center text-lg-start mt-n7">
                <h1 class="mb-0 display-6 mb-4 mt-8 fb">Simply Easy Learning at your
                    <span class="position-relative fb">fingertips
                        <span class="position-absolute top-50 start-50 translate-middle ms-3 z-index-n1">
                          <svg width="300px" height="62.1px" enable-background="new 0 0 366 62.1" viewBox="0 0 366 62.1" xmlns="http://www.w3.org/2000/svg">
                            <path class="fill-green" d="m322.5 25.3c0 1.4 2.9 0.8 3.1 1.6 0.8 1.1-1.1 1.3-0.6 2.4 13.3 0.9 26.9 1.7 40.2 4-2.5 0.7-4.9 1.6-7.3 1.1-4-0.9-8.2-1-12.2-1.2-8.5-0.5-16.9-1.9-25.5-1.7h-3.1c2.6 0.6 4.8 0.4 5.7 2.2-7.3 0.4-14.1-0.8-21.2-1.1-0.2 0.6-0.5 1.2-0.8 1.8 21.3 0.7 42.5 1.6 64.3 4.6-4.2 1.6-7.7 1-10.8 0.8-6.8-0.5-13.5-1.3-20.3-1.9-0.9-0.1-2.3-0.1-2.9 0.2-2.2 1.6-4.3 0.6-7 0.4 1.4-1 2.5 0.5 3.9-0.8-5.6-1-10.7 0.6-15.9 0s-10.5-0.6-16.6-0.8c2 1.6 4.6 1.3 6.2 1.4 4.9 0 9.9 0.8 14.8 0.7 5.3-0.1 10.4 0.5 15.5 0.9 3.2 0.3 6.7-0.1 9.9-0.4 1.1-0.1 0.5 0.3 0.6 0.6 0.5 0.9 2.2 0.8 3.6 0.8 5.1-0.1 10.1 0.6 14.8 1.5 0.8 0.1 1.5 0 1.7 0.7 0 0.7-0.8 0.6-1.5 0.8-3.9 1.2-7.4-0.2-11.1-0.2-2 0-4.3-1.5-6 0.5-0.3 0.4-1.4 0.1-2.2-0.1-4.5-0.8-9.1-0.5-13.8-1.5-2.3-0.5-5.6 0.1-8.4 0.5-4 0.5-8-0.7-12.1-0.9-3.4-0.2-7.1-0.5-10.5-0.7-7.1-0.3-14.2-1.2-22.3-0.4 4.9 1.1 9.4 1.2 13.8 1.2 9.7 0 19.2 2.3 28.9 1.6 7.3 3.2 15.9 1.5 23.8 2.9 4.9 0.8 10.1 0.8 15.2 1.2 0.5 0 0.8 0.3 1.1 0.9-20-2.1-40.2-1.4-60.8-3 4.9 2.1 10.8-0.3 15.3 2.7-8 1.9-15.8-0.9-23.5-0.1 2.8 1.4 7.1 1.1 9.3 3.3 0.5 0.5 0.2 1.1-1.2 1.3 2.3 1 3.4-2.1 5.7-0.4 0.2-0.6 0.2-1 0.3-1.5 0.8-0.3 2 0.8 1.5 1.5-0.2 0.1 0 0.3 0 0.5 18.7 0.4 37.3 1.7 56.2 3.6-1.7 1.1-2.8 1.2-4.2 1.1-7.1-0.5-14.1-0.9-21.2-1.4-3.1-0.2-6.3-0.4-9.4-0.4-7.6-0.2-15-0.7-22.4-1-9-0.4-17.9-0.1-26.9-0.1-1.2 0-2.9-0.4-3.9 1 14.8 0.3 29.7 0.6 44.4 1.1 14.8 0.6 29.9 1.3 44.2 4.2-4.3 1-8.8 0.9-13 0.5-5.3-0.5-10.5-1.1-15.8-1.2-11.4-0.3-22.9-0.9-34.3-1.2-17.6-0.4-35.4-0.3-53.1-0.4-10.8-0.1-21.7-0.2-32.5 0-17.8 0.4-35.7 0.2-53.5 0.5-13.1 0.3-26.3 0.1-39.4 0.5-11.1 0.3-22.4 0.6-33.6 1-13.1 0.6-26.1 0.2-39.3 0.4-3.9 0.1-7.6 0.2-11.8-0.2 0.9-1.2 2.3-1.3 3.9-1.3 8.4 0.2 16.6-0.4 24.9-0.9 3.9-0.2 7.9-0.4 11.9 0.2 2.5 0.4 5.3-0.3 8-0.4 7.3-0.4 14.7-0.7 22-0.9 11.9-0.5 23.7-1.2 35.6-0.8 7.7 0.2 15.3-0.6 22.9-0.1 2.3 0.2 4.3-0.5 6.5-1h-17.6c-9.6 0-19-0.1-28.6 0-8 0.1-16.1 0.3-24 0.8-2.6 0.2-5.4 0.1-8.2 0.1-10.1 0.3-20.1 0.6-30.2 0.5-5.4 0-10.7-0.1-15.9 0.6-2.3 0.3-4-1.3-6.5-0.6 0.2 0.4 0.5 0.9 0.6 1.5-1.9 0-4 0.4-4.9-0.1-4.2-2.2-9.4-1.5-14.1-2.3-1.7-0.3-3.7-0.1-4.3-1.5-0.5-1.3 1.9-1.5 2.6-2.6-4.2-1.4-4.6-5-8.5-7.2-1.5 0.2-0.9 2.8-4.2 1.3 0.3 2.4 4.5 3.9 2.8 6.4-2.3 0.3-3.2-0.8-4.2-1.7-2.5-4-5.1-8.4-5.1-12.7 0.2-6.8 0.2-13.8 3.6-20.4 0.3-0.5 0.3-1 0.8-1.4 0.9-0.9 1.2-2.4 3.6-2.1 2.2 0.2 2.5 1.5 2.6 2.6 0.2 1.4 1.5 1.8 3.2 2.5 0.9-1.4 0.5-2.9 2.6-3.7 0.2-0.1 0.3-0.4 0.3-0.4-3.1-2.2 1.2-2.2 2.3-3.3-3.1-1.8-4-4.3-3.7-7-1.5-0.3-3.1-0.4-4.5 0-1.7 0.6-2.2-0.5-2.9-1 0.6-0.5 0.8-1.1 2.2-1.3 7.6-0.9 15.2-1.7 22.9-2 20-0.7 39.9-0.9 59.9-1 11.9-0.1 23.8 0.4 35.6 1.1 3.6 0.2 7.1-0.9 10.7-0.5 7.9 0.9 15.8 0.3 23.8 0.5 7.3 0.1 14.4-0.6 21.7-0.1 12.2 0.9 24.4 0.3 36.7 0.6 9.4 0.3 18.9 0.4 28.2 1 11.9 0.7 23.8 1.3 35.6 2 11.1 0.6 22.4 0.5 33.3 2 7.1 1 14.4 1.1 21.3 2.4 4 0.7 8.2 1.6 12.4 1.9 2.2 0.2 0.9 1 1.5 1.5-4-0.8-8-0.8-12.1-1.4-4.3-0.7-8.5-1-12.8 0.4-2.9 1-6.3 0.2-9.3-0.1-10.2-1.1-20.6-1.6-30.8-2.4-12.1-0.9-24.3-1.4-36.4-2.1-9.9-0.6-20-0.5-29.9-1-11.4-0.6-22.7 0-34.2-0.5-6.3-0.3-12.3-0.3-18.5-0.4-4.2-0.1-8.4 1.3-12.8 0.3 0.6 0.2 1.2 0.7 1.9 0.7 10.5 0 20.9 1.9 31.6 1.7 6.5-0.1 13.1 0.2 19.8 0.8 3.2 0.3 6.3-0.4 9.7-0.1 7.6 0.7 15.5 0.5 23 0.8 12.4 0.5 24.7 0.4 37.1 1.1 13.3 0.7 26.8 2.1 39.9 4.1 6.2 0.9 12.7 1.5 19.2 1.7 0.6 0 1.1 0.1 1.5 0.5-4.6 0.1-9.3 0-13.9-0.5-0.6 1.1 1.4 0.9 1.5 1.9-9.7 1.6-19.6-1.4-29.4-0.1 2.2 1.4 5.1 1 7.4 1 7.3 0.1 14.1 1.3 21.2 1.9 2.8 0.3 5.9 0 8.5 0.8 1.5 0.5 4.6-1.1 4.9 1.3 4-0.7 7.3 1.5 11.1 1.2 4-0.3 7.7 0.6 11.6 1.1 0.8 0.1 2.2 0.3 2.3 1.1 0.2 1-1.1 1.2-2 1.5-3.4 1-6.7-0.4-10.1-0.4-0.9 0-2-0.2-2.9-0.2-9.4 0.1-18.8-1.3-28.3-1.8-6-0.4-12.1-0.9-18.1-1.3 0 0.2 0 0.4-0.2 0.6 6.1 0.5 12.1 1.4 18.3 0.7z"/>
                          </svg>
                        </span>
                        <!-- SVG END -->
                    </span>
                </h1>
                <div class="nav-item w-100 mb-4">
                    <form class="rounded position-relative">
                        <input class="form-control pe-7 bg-secondary bg-opacity-10 border-0 search-strings lh-7" type="search" placeholder="Search your favourite tutorials ..." id="search-strings" name="key" data-result="search-results" aria-label="Search">
                        <button type="button" class="btn bg-transparent px-2 py-0 position-absolute top-50 end-0 translate-middle-y" id="btnSearch"><i class="fal fa-search fs-5 me-3"></i></button>
                        <div class="search-box" id="search-results"></div>
                        <div class="clear"></div>
                    </form>
                </div>
                <ul class="list-inline position-relative justify-content-center justify-content-lg-start mb-5 mt-2 text-center">
                    <li class="list-inline-item me-1 fs-9"><a class="nav-link" href="https://www.tutorialspoint.com/latest/prime-packs" aria-haspopup="true" aria-expanded="false" target="_self"><i class="fal fa-cubes me-1"></i> Prime Packs</a></li>
                    <li class="list-inline-item me-1 fs-9"><a class="nav-link" href="https://www.tutorialspoint.com/market/index.asp" aria-haspopup="true" aria-expanded="false" target="_self"><i class="fal fa-play-circle me-1"></i> Courses</a></li>
                    <li class="list-inline-item me-1 fs-9"><a class="nav-link" href="https://www.tutorialspoint.com/latest/ebooks" aria-haspopup="true" aria-expanded="false" target="_self"><i class="fal fa-book-reader me-1"></i> eBooks</a></li>
                    <li class="list-inline-item me-1 fs-9"><a class="nav-link" href="https://www.tutorialspoint.com/tutorialslibrary.htm" aria-haspopup="true" aria-expanded="false" target="_self"><i class="fal fa-books me-1"></i> Library</a></li>
                    <li class="list-inline-item me-1 fs-9"><a class="nav-link" href="https://www.tutorialspoint.com/articles/index.php" target="_self"><i class="fal fa-money-check-edit me-1"></i> Articles</a>
                </ul>
                <div class="col-md-12 col-sm-12">
                    <div class="row">
                        <div class="col-md-6 col-sm-6 text-R">
                            <a href="https://www.tutorialspoint.com/codingground.htm" class="btn btn-lg btn-green-hard me-2 mb-4 mb-sm-0"><i class="fal fa-code me-1"></i> Coding Ground</a>
                        </div>
                        <div class="col-md-6 col-sm-6 text-L">
                            <a data-glightbox data-gallery="office-tour" href="https://www.tutorialspoint.com/engineering_tutorials.htm" class="" title="Engineering Tutorials">
                                <div class="">
                                    <h6 class="mb-0 fw-normal engineering-title fb"><i class="fal fa-cogs engine-tutor-icon me-2"></i> Engineering Tutorials</h6>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-7 col-xl-6 text-center position-relative">
                <div class="position-relative">
                    <img src="static/images/simply-easy-learning.png" style="width:80%;margin:auto;" alt="Simple and Easy Learning" class="mobile-learning-img light-mode-item">
                    <img src="static/images/simply-easy-learning.png" style="width:80%;margin:auto;" alt="Simple and Easy Learning" class="mobile-learning-img dark-mode-item">
                </div>
            </div>
            <!-- Right content END -->
        </div>
    </div>
    <!-- Content END -->
</section>
<!-- ======================= Main Banner END -->

<!-- ======================= Counter START -->
<section class="py-0 pb-5 pt-0 pt-lg-3">
    <div class="container">
        <div class="tiny-slider arrow-round arrow-blur arrow-hover">
            <div class="tiny-slider-inner row g-4" data-autoplay="false" data-gutter="20" data-arrow="true" data-dots="false" data-items="4" data-items-lg="3" data-items-md="2" data-items-xs="1">
            <!-- Counter item -->
            <div class="col-sm-6 col-xl-3">
                <div class="d-flex justify-content-center align-items-center p-4 bg-warning bg-opacity-15 rounded-3">
                    <span class="display-6 lh-1 text-warning mb-0"><i class="fal fa-laptop-code"></i></span>
                    <div class="ms-4 h6 fw-normal">
                        <div class="d-flex">
                            <h5 class="mb-0 fw-bold">5000+</h5>
                        </div>
                        <p class="mb-0">Premium Courses</p>
                    </div>
                </div>
            </div>
            <!-- Counter item -->
            <div class="col-sm-6 col-xl-3">
                <div class="d-flex justify-content-center align-items-center p-4 bg-blue bg-opacity-10 rounded-3">
                    <span class="display-6 lh-1 text-blue mb-0"><i class="fal fa-user-tie"></i></span>
                    <div class="ms-4 h6 fw-normal">
                        <div class="d-flex">
                            <h5 class="mb-0 fw-bold">1200+</h5>
                        </div>
                        <p class="mb-0">Expert Tutors</p>
                    </div>
                </div>
            </div>
            <!-- Counter item -->
            <div class="col-sm-6 col-xl-3">
                <div class="d-flex justify-content-center align-items-center p-4 bg-purple bg-opacity-10 rounded-3">
                    <span class="display-6 lh-1 text-purple mb-0"><i class="fal fa-user-graduate"></i></span>
                    <div class="ms-4 h6 fw-normal">
                        <div class="d-flex">
                            <h5 class="mb-0 fw-bold">30M+</h5>
                        </div>
                        <p class="mb-0">Online Students</p>
                    </div>
                </div>
            </div>
            <!-- Counter item -->
            <div class="col-sm-6 col-xl-3">
                <div class="d-flex justify-content-center align-items-center p-4 bg-info bg-opacity-10 rounded-3">
                    <span class="display-6 lh-1 text-info mb-0"><i class="fal fa-certificate"></i></span>
                    <div class="ms-4 h6 fw-normal">
                        <div class="d-flex">
                            <h5 class="mb-0 fw-bold">1.2M+</h5> 
                        </div>
                        <p class="mb-0">Certificates Delivered</p>
                    </div>
                </div>
            </div>
            </div>
        </div>
    </div>
</section>
<!-- ======================= Counter END -->

<!-- ======================= Listed course START -->
<section class="position-relative pb-5 pt-0 pt-lg-3">
    <div class="container">

        <div class="mb-4">
            <div class="row text-left align-items-center">
                <div class="col-sm-12 col-md-10 col-lg-10">
                    <h2 class="fs-1"><i class="fal fa-th me-3"></i>Top <span class="text-green">Categories</span></h2>
                </div>
            </div>
        </div>
        <div class="tiny-slider arrow-round arrow-blur arrow-hover">
             <div class="tiny-slider-inner row g-4" data-autoplay="false" data-mobile="true" data-gutter="20" data-arrow="true" data-dots="true" data-items="4" data-items-lg="3" data-items-md="2" data-items-xs="1">
                <div class="col-sm-6 col-md-4 col-xl-3">
                    <a href="https://www.tutorialspoint.com/categories/development" target="_blank">
                        <div class="bg-primary bg-opacity-10 rounded-3 text-center p-3 position-relative stretched-link">
                            <div class="icon-xl bg-body mx-auto rounded-circle mb-3">
                                <img src="static/images/development.svg" alt="Development" />
                            </div>
                            <h5 class="mb-1 fb"> Development</h5>
                            <span class="mb-0 fb">2,800+ Courses</span>
                            <div class="clear"></div>
                        </div>
                        <div class="clear"></div>
                    </a>
                </div>
                <div class="col-sm-6 col-md-4 col-xl-3">
                    <a href="https://www.tutorialspoint.com/categories/it_and_software" target="_blank">
                        <div class="bg-primary bg-opacity-10 rounded-3 text-center p-3 position-relative stretched-link">
                            <div class="icon-xl bg-body mx-auto rounded-circle mb-3">
                                <img src="static/images/it-and-networking.svg" alt="Information Technology and Networking" />
                            </div>
                            <h5 class="mb-1 fb">IT and Networking</h5>
                            <span class="mb-0 fb">800+ Courses</span>
                        </div>
                        <div class="clear"></div>
                    </a>
                    <div class="clear"></div>
                </div>
                <div class="col-sm-6 col-md-4 col-xl-3">
                    <a href="https://www.tutorialspoint.com/categories/data_science_and_ai_ml" target="_blank">
                        <div class="bg-primary bg-opacity-10 rounded-3 text-center p-3 position-relative stretched-link">
                            <div class="icon-xl bg-body mx-auto rounded-circle mb-3">
                                <img src="static/images/data-science-and-ai-ml.svg" alt="Data Science and Artificial Intelligence" />
                            </div>
                            <h5 class="mb-1 fb">Data Science and AI ML</h5>
                            <span class="mb-0 fb">650+ Courses</span>
                        </div>
                        <div class="clear"></div>
                    </a>
                    <div class="clear"></div>
                </div>
                <div class="col-sm-6 col-md-4 col-xl-3">
                    <a href="https://www.tutorialspoint.com/categories/cyber_security" target="_blank">
                        <div class="bg-primary bg-opacity-10 rounded-3 text-center p-3 position-relative stretched-link">                       
                            <div class="icon-xl bg-body mx-auto rounded-circle mb-3">
                                <img src="static/images/cyber-security.svg" alt="Cyber Security" />
                            </div>
                            <h5 class="mb-1 fb">Cyber Security</h5>
                            <span class="mb-0 fb">500+ Courses</span>
                        </div>
                        <div class="clear"></div>
                    </a>
                    <div class="clear"></div>
                </div>
                <div class="col-sm-6 col-md-4 col-xl-3">
                    <a href="https://www.tutorialspoint.com/categories/marketing" target="_blank">
                        <div class="bg-primary bg-opacity-10 rounded-3 text-center p-3 position-relative stretched-link">
                            <div class="icon-xl bg-body mx-auto rounded-circle mb-3">
                                <img src="static/images/marketing.svg" alt="Marketing" />
                            </div>
                            <h5 class="mb-1 fb">Marketing</h5>
                            <span class="mb-0 fb">400+ Courses</span>
                        </div>
                        <div class="clear"></div>
                    </a>
                    <div class="clear"></div>
                </div>
                <div class="col-sm-6 col-md-4 col-xl-3">
                    <a href="https://www.tutorialspoint.com/categories/office_productivity" target="_blank">
                        <div class="bg-primary bg-opacity-10 rounded-3 text-center p-3 position-relative stretched-link">
                            <div class="icon-xl bg-body mx-auto rounded-circle mb-3">
                                <img src="static/images/office-productivity.svg" alt="Office Productivity" />
                            </div>
                            <h5 class="mb-1 fb">Office Productivity</h5>
                            <span class="mb-0 fb">800+ Courses</span>
                        </div>
                        <div class="clear"></div>
                    </a>
                    <div class="clear"></div>
                </div>
                <div class="col-sm-6 col-md-4 col-xl-3">
                    <a href="https://www.tutorialspoint.com/categories/business" target="_blank">
                        <div class="bg-primary bg-opacity-10 rounded-3 text-center p-3 position-relative stretched-link">
                            <div class="icon-xl bg-body mx-auto rounded-circle mb-3">
                                <img src="static/images/business.svg" alt="Business" />
                            </div>
                            <h5 class="mb-1 fb">Business</h5>
                            <span class="mb-0 fb">200+ Courses</span>   
                        </div>
                        <div class="clear"></div>                       
                    </a>
                    <div class="clear"></div>   
                </div>
                <div class="col-sm-6 col-md-4 col-xl-3">
                    <a href="https://www.tutorialspoint.com/categories/lifestyle" target="_blank">
                        <div class="bg-primary bg-opacity-10 rounded-3 text-center p-3 position-relative stretched-link">
                            <div class="icon-xl bg-body mx-auto rounded-circle mb-3">
                                <img src="static/images/lifestyle.svg" alt="Lifestyle"/>
                            </div>
                            <h5 class="mb-1 fb">Lifestyle</h5>
                            <span class="mb-0 fb">500+ Courses</span>
                        </div>
                        <div class="clear"></div>
                    </a>
                    <div class="clear"></div>
                </div>
            </div>
        </div> 

    </div>
</section>
<!-- ======================= Listed course END -->

<!-- ======================= Prime Packs START -->
<section class="pb-5 pt-0 pt-lg-3">
    <div class="container">
        <!-- Title -->
        <div class="mb-4">
            <div class="row">
                <div class="d-flex justify-content-between">
                    <h2 class="fs-1 fb"><i class="fal fa-cubes me-3"></i>Premium <span class="text-green">Packs</span></h2>
                    <div class="pull-right align-items-center">
                        <a href="https://www.tutorialspoint.com/latest/prime-packs" class="btn btn-green-shadow mb-0" target="_blank">View more<i class="fal fa-long-arrow-right ms-2"></i></a>
                    </div>
                </div>
                <p class="mb-0 fs-11-60 fb">Curated courses packed together from expert tutors</p>
            </div>
        </div>
        <div class="row">
            <!-- Slider START -->
            <div class="tiny-slider arrow-round arrow-blur arrow-hover">
                <div class="tiny-slider-inner pb-1" data-autoplay="false" data-arrow="true" data-edge="2" data-dots="false" data-items="4" data-items-lg="2" data-items-sm="1">
                    <div class="col-sm-6 col-lg-4 col-xl-3">
                        <a href="https://www.tutorialspoint.com/prime-pack/complete-python-prime-pack/index.asp" target="_blank" title="Complete Python Prime Pack">
                        <div class="card shadow-hover h-100 border">
                            <img src="https://d3mxt5v3yxgcsr.cloudfront.net/courses/4870/course_4870_image.png" class="card-img-top" alt="course image" />
                            <div class="card-body pb-0">
                                <h5 class="card-title fw-bold pb-0">
                                    Complete Python Prime Pack For 2023
                                </h5>
                                <p class="mb-2 text-truncate-2"><i class="fal fa-user"></i> Tutorialspoint</p>
                            </div>
                            <div class="card-footer pt-0">
                                <hr>
                                <div class="d-flex justify-content-between">
                                    <span class="h6 fw-light mb-0 fb"><i class="fal fa-play-circle me-2"></i>9 Courses</span>
                                    <span class="h6 fw-light mb-0 fb"><i class="fal fa-book-reader me-2"></i>2 eBooks</span>
                                </div>
                            </div>
                            <div class="hstack gap-1 card-body pt-0">
                                <h4 class="fb">
                                    <span id="p_4870" class="price" data-usd="49.99" data-inr="2699.99" data-cad="59.99" data-aud="69.99" data-gbp="44.99" data-eur="49.99" data-jpy="6832.63" data-php="2858.43" data-brl="266.45" data-zar="866.83" data-aed="183.46">₹2,699.99</span>
                                    <span class="actual-price" data-usd="399.99" data-inr="31927.2" data-cad="519.99" data-aud="579.99" data-gbp="339.99" data-eur="403.99" data-jpy="54670.63" data-php="22871.43" data-brl="2131.95" data-zar="6935.83" data-aed="1467.96">₹31,927.20</span>
                                </h4>
                            </div>
                            <div class="card-footer pt-0 pb-3">
                                <div class="m-auto text-center mb-2">
                                   <button class="btn-sm btn-grey-border item-show-hover" ><i class="fal fa-external-link me-2"></i>More Details</button>
                                </div>
                            </div>
                        </div>
                        </a>
                    </div>
                    <div class="col-sm-6 col-lg-4 col-xl-3">
                        <a href="https://www.tutorialspoint.com/prime-pack/cyber-security-prime-pack/index.asp" title="Cyber Security Prime Pack 2023" target="_blank">
                        <div class="card shadow-hover h-100 border">
                            <img src="https://d3mxt5v3yxgcsr.cloudfront.net/courses/4876/course_4876_image.png" class="card-img-top" alt="course image" target="_blank">
                            <div class="card-body pb-0">
                                <h5 class="card-title fw-bold pb-0">Cyber Security Prime Pack 2023</h5>
                                <p class="mb-2 text-truncate-2"><i class="fal fa-user"></i> Tutorialspoint </p>
                            </div>
                            <div class="card-footer pt-0">
                                <hr>
                                <div class="d-flex justify-content-between">
                                    <span class="h6 fw-light mb-0"><i class="fal fa-play-circle me-2 fb"></i>9 Courses</span>
                                    <span class="h6 fw-light mb-0 fb"><i class="fal fa-book-reader me-2"></i>2 eBooks</span>
                                </div>
                            </div>
                            <div class="hstack gap-1 card-body pt-0">
                                <h4 class="fb">
                                    <span id="p_4876" class="price" data-cad="59.99" data-gbp="44.99" data-jpy="5978.51" data-usd="49.99" data-inr="2699.99" data-aud="69.99" data-eur="49.99" data-php="2858.43" data-brl="266.45" data-zar="866.83" data-aed="183.46">₹2,699.99</span>
                                    <span class="actual-price" data-cad="487.99" data-gbp="287.99" data-jpy="43486.91" data-usd="399.99" data-inr="29347.27" data-aud="511.99" data-eur="331.99" data-php="22871.43" data-brl="2131.95" data-zar="6935.83" data-aed="1467.96">₹29,347.27</span>
                                </h4>
                            </div>
                            <div class="card-footer pt-0 pb-3">
                                <div class="m-auto text-center mb-2">
                                    <button class="btn-sm btn-grey-border item-show-hover" target="_blank"><i class="fal fa-external-link me-2"></i>More Details</button>
                                </div>
                            </div>
                        </div>
                        </a>
                    </div>
                    <div class="col-sm-6 col-lg-4 col-xl-3">
                        <a href="https://www.tutorialspoint.com/prime-pack/fullstack-web-development-prime-pack/index.asp" title="FullStack Web Development Prime Pack" target="_blank">
                        <div class="card shadow-hover h-100 border">
                            <img src="https://d3mxt5v3yxgcsr.cloudfront.net/courses/4982/course_4982_image.png" class="card-img-top" alt="course image">
                            <div class="card-body pb-0">
                                <!-- Title -->
                                <h5 class="card-title fw-bold pb-0">FullStack Web Development Prime Pack</h5>
                                <p class="mb-2 text-truncate-2"><i class="fal fa-user"></i> Tutorialspoint </p>
                            </div>
                            <div class="card-footer pt-0">
                                <hr>
                                <div class="d-flex justify-content-between">
                                    <span class="h6 fw-light mb-0"><i class="fal fa-play-circle me-2 fb"></i>9 Courses</span>
                                    <span class="h6 fw-light mb-0"><i class="fal fa-book-reader me-2 fb"></i>2 eBooks</span>
                                </div>
                            </div>
                            <div class="hstack gap-1 card-body pt-0">
                                <h4 class="fb">
                                    <span id="p_4982" class="price" data-cad="59.99" data-gbp="44.99" data-eur="49.99" data-jpy="5967.64" data-usd="49.99" data-inr="2699" data-aud="69.99" data-php="2999.99" data-brl="269.99" data-zar="699.99" data-aed="229.99">₹2,699.00</span>
                                    <span class="actual-price" data-cad="399.99" data-gbp="349.99" data-eur="399.99" data-jpy="43486.91" data-usd="399.99" data-inr="19999.99" data-aud="399.99" data-php="22871.43" data-brl="2131.95" data-zar="6935.83" data-aed="1467.96">₹19,999.99</span>
                                </h4>
                            </div>
                            <div class="card-footer pt-0 pb-3">
                                <div class="m-auto text-center mb-2">
                                   <button class="btn-sm btn-grey-border item-show-hover"><i class="fal fa-external-link me-2"></i>More Details</button>
                                </div>
                            </div>
                       </div>
                       </a>
                    </div>
                    <div class="col-sm-6 col-lg-4 col-xl-3">
                        <a href="https://www.tutorialspoint.com/prime-pack/artificial-intelligence-and-machine-learning-prime-pack/index.asp" title="Artificial Intelligence & Machine Learning Prime Pack" target="_blank">
                        <div class="card shadow-hover h-100 border">
                            <img src="https://d3mxt5v3yxgcsr.cloudfront.net/courses/4874/course_4874_image.png" class="card-img-top" alt="course image">
                            <div class="card-body pb-0">
                                <!-- Title -->
                                <h5 class="card-title fw-bold pb-0">Artificial Intelligence & Machine Learning Prime Pack </h5>
                                <p class="mb-2 text-truncate-2"><i class="fal fa-user"></i> Tutorialspoint </p>
                            </div>
                            <div class="card-footer pt-0">
                                <hr>
                                <div class="d-flex justify-content-between">
                                    <span class="h6 fw-light mb-0"><i class="fal fa-play-circle me-2 fb"></i>6 Courses</span>
                                    <span class="h6 fw-light mb-0"><i class="fal fa-book-reader me-2 fb"></i>1 eBooks</span>
                                </div>
                            </div>
                            <div class="hstack gap-1 card-body pt-0">
                                <h4 class="fb">
                                    <span id="p_4874" class="price" data-jpy="4891.75" data-inr="1799.99" data-cad="44.99" data-eur="34.99" data-usd="34.99" data-aud="49.99" data-gbp="29.99" data-php="2000.73" data-brl="186.5" data-zar="606.73" data-aed="128.41">₹1,799.99</span>
                                    <span class="actual-price" data-jpy="43486.75" data-inr="14999.99" data-cad="399.99" data-eur="299.99" data-usd="299.99" data-aud="399.99" data-gbp="299.99" data-php="17153.43" data-brl="1598.95" data-zar="5201.83" data-aed="1100.96">₹14,999.99</span>
                                </h4>
                            </div>
                            <div class="card-footer pt-0 pb-3">
                                <div class="m-auto text-center mb-2">
                                   <button class="btn-sm btn-grey-border item-show-hover" target="_blank"><i class="fal fa-external-link me-2"></i>More Details</button>
                                </div>
                            </div>
                       </div>
                       </a>
                    </div>
                    <div class="col-sm-6 col-lg-4 col-xl-3">
                        <a href="https://www.tutorialspoint.com/prime-pack/javascript-prime-pack/index.asp" title="JavaScript Prime Pack 2023" target="_blank">
                        <div class="card shadow-hover h-100 border">
                            <img src="https://d3mxt5v3yxgcsr.cloudfront.net/courses/4986/course_4986_image.png" class="card-img-top" alt="course image">
                            <div class="card-body pb-0">
                                <!-- Title -->
                                <h5 class="card-title fw-bold pb-0">JavaScript Prime Pack 2023</h5>
                                <p class="mb-2 text-truncate-2"><i class="fal fa-user"></i> Tutorialspoint </p>
                            </div>
                            <div class="card-footer pt-0">
                                <hr>
                                <div class="d-flex justify-content-between">
                                    <span class="h6 fw-light mb-0"><i class="fal fa-play-circle me-2 fb"></i>8 Courses</span>
                                    <span class="h6 fw-light mb-0"><i class="fal fa-book-reader me-2 fb"></i>2 eBooks</span>
                                </div>
                            </div>
                            <div class="hstack gap-1 card-body pt-0">
                                <h4 class="fb">
                                    <span id="p_4986" class="price" data-usd="47.75" data-cad="57.75" data-aud="57.75" data-gbp="37.75" data-eur="37.75" data-jpy="4897.75" data-inr="1875.75" data-php="2730.35" data-brl="254.51" data-zar="827.99" data-aed="175.24">₹1,875.75</span>
                                    <span class="actual-price" data-usd="397.75" data-cad="487.75" data-aud="517.75" data-gbp="287.75" data-eur="337.75" data-jpy="43487.75" data-inr="29347.75" data-php="22743.35" data-brl="2120.01" data-zar="6896.99" data-aed="1459.74">₹29,347.75</span>
                                </h4>
                            </div>
                            <div class="card-footer pt-0 pb-3">
                                <div class="m-auto text-center mb-2">
                                   <button class="btn-sm btn-grey-border item-show-hover"><i class="fal fa-shopping-cart me-2"></i>More Details</button>
                                </div>
                            </div>
                       </div>
                       </a>
                    </div>
                    <div class="col-sm-6 col-lg-4 col-xl-3">
                        <a href="https://www.tutorialspoint.com/prime-pack/data-science-prime-pack/index.asp" title="Data Science Prime Pack" target="_blank">
                        <div class="card shadow-hover h-100 border">
                            <img src="https://d3mxt5v3yxgcsr.cloudfront.net/courses/4873/course_4873_image.png" class="card-img-top" alt="course image">
                            <div class="card-body pb-0">
                                <h5 class="card-title fw-bold pb-0">Data Science Prime Pack</h5>
                                <p class="mb-2 text-truncate-2"><i class="fal fa-user"></i> Tutorialspoint </p>
                            </div>
                            <div class="card-footer pt-0">
                                <hr>
                                <div class="d-flex justify-content-between">
                                    <span class="h6 fw-light mb-0"><i class="fal fa-play-circle me-2 fb"></i>9 Courses</span>
                                    <span class="h6 fw-light mb-0"><i class="fal fa-book-reader me-2 fb"></i>2 eBooks</span>
                                </div>
                            </div>
                            <div class="hstack gap-1 card-body pt-0">
                                <h4 class="fb">
                                    <span id="p_4873" class="price" data-cad="59.99" data-gbp="44.99" data-eur="49.99" data-jpy="5967.64" data-usd="49.99" data-inr="2699.99" data-aud="69.99" data-brl="266.45" data-php="2699.99" data-zar="899.99" data-aed="199.99">₹2,699.99</span>
                                    <span class="actual-price" data-cad="399.99" data-gbp="349.99" data-eur="399.99" data-jpy="43486.91" data-usd="399.99" data-inr="19999.99" data-aud="399.99" data-brl="2131.95" data-php="19999.99" data-zar="6999.99" data-aed="1499.96">₹19,999.99</span>
                                </h4>
                            </div>
                            <div class="card-footer pt-0 pb-3">
                                <div class="m-auto text-center mb-2">
                                   <button class="btn-sm btn-grey-border item-show-hover" target="_blank"><i class="fal fa-shopping-cart me-2"></i>More Details</button>
                                </div>
                            </div>
                       </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- ======================= Prime Packs END -->

<!-- ======================= Trending courses START -->
<section class="pb-5 pt-0 pt-lg-3">
    <div class="container">
        <!-- Title -->
        <div class="mb-4">
            <div class="row">
                <div class="d-flex justify-content-between">
                    <h2 class="fs-1 fb"><i class="fal fa-chart-mixed me-3"></i>Trending <span class="text-green">Courses</span> </h2>
                    <div class="pull-right align-items-center">
                        <a href="https://www.tutorialspoint.com/market/index.asp" class="btn btn-green-shadow mb-0" target="_blank">View More<i class="fal fa-long-arrow-right ms-2"></i></a>
                    </div>
                </div>
                <p class="mb-0 fs-11-60">Check out the most 🔥 courses in the market</p>
            </div>
        </div>
        <div class="row">
            <!-- Slider START -->
            <div class="tiny-slider arrow-round arrow-blur arrow-hover">
                <div class="tiny-slider-inner pb-1" data-autoplay="false" data-arrow="true" data-edge="2" data-dots="false" data-items="4" data-items-lg="2" data-items-sm="1">
                    <div class="col-sm-6 col-lg-4 col-xl-3">
                        <a href="https://www.tutorialspoint.com/html5-and-css3-fundamentals/index.asp" title="HTML5 And CSS3 Fundamentals" target="_blank">
                        <div class="card shadow-hover h-100 border">
                            <img src="https://d3mxt5v3yxgcsr.cloudfront.net/courses/6584/course_6584_image.jpg" class="card-img-top" alt="course image">
                            <div class="card-body pb-0">
                                <h5 class="card-title fw-bold pb-0">HTML5 And CSS3 Fundamentals</h5>
                                <p class="mb-2 text-truncate-2"><i class="fal fa-user"></i> Stone River ELearning </p>
                            </div>
                            <div class="card-footer pt-0">
                                <hr>
                                <div class="d-flex justify-content-between">
                                    <span class="h6 fw-light mb-0"><i class="fal fa-user-clock me-2 fb"></i>4.5 Hours</span>
                                    <span class="h6 fw-light mb-0 fb"><i class="fal fa-list me-2"></i>35 Lectures 11</span>
                                </div>
                            </div>
                            <div class="hstack gap-1 card-body pt-0">
                                <h4 class="fb">
                                    <span id="p_6584" class="price" data-usd="8.99" data-inr="379.99" data-cad="10.99" data-aud="10.99" data-gbp="8.49" data-eur="8.99" data-brl="39.99" data-php="399.99" data-zar="129.99" data-aed="29.99">₹379.99</span>
                                    <span class="actual-price" data-usd="100" data-inr="7337" data-cad="122" data-aud="128" data-gbp="72" data-eur="83" data-brl="533" data-php="5718" data-zar="1734" data-aed="367">₹7,337.00</span>
                                </h4>
                            </div>
                            <div class="card-footer pt-0 pb-3">
                                <div class="m-auto text-center mb-2">
                                   <button class="btn-sm btn-grey-border item-show-hover" target="_blank"><i class="fal fa-external-link me-2"></i>More Details</button>
                                </div>
                            </div>
                        </div>
                        </a>
                    </div>
                    <div class="col-sm-6 col-lg-4 col-xl-3">
                        <a href="https://www.tutorialspoint.com/tableau_online_training/index.asp" title="Tableau Online Training V2" target="_blank">
                        <div class="card shadow-hover h-100 border">
                            <img src="https://d3mxt5v3yxgcsr.cloudfront.net/courses/1895/course_1895_image.png" class="card-img-top" alt="course image">
                            <div class="card-body pb-0">
                                <h5 class="card-title fw-bold pb-0">Tableau Online Training V2 </h5>
                                <p class="mb-2 text-truncate-2"><i class="fal fa-user"></i> Pavan Lalwani </p>
                            </div>
                            <div class="card-footer pt-0">
                                <hr>
                                <div class="d-flex justify-content-between">
                                    <span class="h6 fw-light mb-0"><i class="fal fa-user-clock me-2 fb"></i>10 Hours</span>
                                    <span class="h6 fw-light mb-0 fb"><i class="fal fa-list me-2"></i>88 Lectures</span>
                                </div>
                            </div>
                            <div class="hstack gap-1 card-body pt-0">
                                <h4 class="fb">
                                    <span class="price" data-usd="9.99" data-inr="693" data-jpy="1086.11" data-gbp="9.9" data-eur="9.9" data-cad="12.99" data-aud="12.99">₹693.00</span>
                                    <span class="actual-price" data-usd="190" data-inr="13300" data-jpy="20656.8" data-gbp="136.8" data-eur="157.7" data-cad="231.8" data-aud="243.2">₹13,300</span>
                                </h4>
                            </div>
                            <div class="card-footer pt-0 pb-3">
                                <div class="m-auto text-center mb-2">
                                   <button class="btn-sm btn-grey-border item-show-hover"><i class="fal fa-external-link me-2"></i>More Details</button>
                                </div>
                            </div>
                        </div>
                        </a>
                    </div>
                    <div class="col-sm-6 col-lg-4 col-xl-3">
                        <a href="https://www.tutorialspoint.com/learn_python_programming_from_a_z_beginner_to_expert_course/index.asp" title="Learn Python Programming From A-Z: Beginner To Expert Course" target="_blank">
                        <div class="card shadow-hover h-100 border">
                            <img src="https://d3mxt5v3yxgcsr.cloudfront.net/courses/3903/course_3903_image.png" class="card-img-top" alt="course image">
                            <div class="card-body pb-0">
                                <h5 class="card-title fw-bold pb-0">Learn Python Programming From A-Z: Beginner To Expert Course</h5>
                                <p class="mb-2 text-truncate-2"><i class="fal fa-user"></i> Juan Galvan </p>
                            </div>
                            <div class="card-footer pt-0">
                                <hr>
                                <div class="d-flex justify-content-between">
                                    <span class="h6 fw-light mb-0"><i class="fal fa-user-clock me-2 fb"></i>11 Courses</span>
                                    <span class="h6 fw-light mb-0 fb"><i class="fal fa-list me-2"></i>99 Lectures</span>
                                </div>
                            </div>
                            <div class="hstack gap-1 card-body pt-0">
                                <h4 class="fb">
                                    <span id="p_3903" class="price" data-usd="8.99" data-inr="379.99" data-cad="10.99" data-aud="10.99" data-gbp="8.49" data-eur="8.99" data-jpy="1092.07" data-brl="39.99" data-php="399.99" data-zar="129.99" data-aed="29.99">₹379.99</span>
                                    <span class="actual-price" data-usd="130" data-inr="9100" data-cad="158.6" data-aud="166.4" data-gbp="93.6" data-eur="107.9" data-jpy="14133.6" data-brl="692.9" data-php="7433.4" data-zar="2254.2" data-aed="477.1">₹9,100.00</span>
                                </h4>
                            </div>
                            <div class="card-footer pt-0 pb-3">
                                <div class="m-auto text-center mb-2">
                                   <button class="btn-sm btn-grey-border item-show-hover"><i class="fal fa-external-link me-2"></i>More Details</button>
                                </div>
                            </div>
                        </div>
                        </a>
                    </div>
                    <div class="col-sm-6 col-lg-4 col-xl-3">
                        <a href="https://www.tutorialspoint.com/cyber_security_go_from_zero_to_hero/index.asp" title="Cyber Security : Go From Zero To Hero" target="_blank">
                        <div class="card shadow-hover h-100 border">
                            <img src="https://d3mxt5v3yxgcsr.cloudfront.net/courses/3187/course_3187_image.jpg" class="card-img-top" alt="course image">
                            <div class="card-body pb-0">
                                <h5 class="card-title fw-bold pb-0">Cyber Security : Go From Zero To Hero</h5>
                                <p class="mb-2 text-truncate-2"><i class="fal fa-user"></i> SecuritasX IT Trainings</p>
                            </div>
                            <div class="card-footer pt-0">
                                <hr>
                                <div class="d-flex justify-content-between">
                                    <span class="h6 fw-light mb-0"><i class="fal fa-user-clock me-2 fb"></i>5.5 Hours</span>
                                    <span class="h6 fw-light mb-0 fb"><i class="fal fa-list me-2"></i>60 Lectures</span>
                                </div>
                            </div>
                            <div class="hstack gap-1 card-body pt-0">
                                <h4 class="fb">
                                    <span id="p_3187" class="price" data-usd="8.99" data-inr="379.99" data-cad="10.99" data-aud="10.99" data-gbp="8.49" data-eur="8.99" data-jpy="1092.07" data-brl="39.99" data-php="399.99" data-zar="129.99" data-aed="29.99">₹379.99</span>
                                    <span class="actual-price" data-usd="25" data-inr="2800" data-cad="30.5" data-aud="32" data-gbp="18" data-eur="20.75" data-jpy="2718" data-brl="133.25" data-php="1429.5" data-zar="433.5" data-aed="91.75">₹2,800.00</span>
                                </h4>
                            </div>
                            <div class="card-footer pt-0 pb-3">
                                <div class="m-auto text-center mb-2">
                                   <button class="btn-sm btn-grey-border item-show-hover" target="_blank"><i class="fal fa-external-link me-2"></i>More Details</button>
                                </div>
                            </div>
                       </div>
                       </a>
                    </div>
                    <div class="col-sm-6 col-lg-4 col-xl-3">
                        <a href="https://www.tutorialspoint.com/sql-programming/index.asp" title="SQL Programming" target="_blank">
                        <div class="card shadow-hover h-100 border">
                            <img src="https://d3mxt5v3yxgcsr.cloudfront.net/courses/5181/course_5181_image.jpg" class="card-img-top" alt="course image">
                            <div class="card-body pb-0">
                                <h5 class="card-title fw-bold pb-0">SQL Programming </h5>
                                <p class="mb-2 text-truncate-2"><i class="fal fa-user"></i> Suprio Dutta </p>
                            </div>
                            <div class="card-footer pt-0">
                                <hr>
                                <div class="d-flex justify-content-between">
                                    <span class="h6 fw-light mb-0"><i class="fal fa-user-clock me-2 fb"></i>1.5 Hours</span>
                                    <span class="h6 fw-light mb-0 fb"><i class="fal fa-list me-2"></i>15 Lectures</span>
                                </div>
                            </div>
                            <div class="hstack gap-1 card-body pt-0">
                                <h4 class="fb">
                                    <span id="p_5181" class="price" data-usd="8.99" data-inr="379.99" data-cad="10.99" data-aud="10.99" data-gbp="8.49" data-eur="8.99" data-brl="39.99" data-php="399.99" data-zar="129.99" data-aed="29.99">₹379.99</span>
                                    <span class="actual-price" data-usd="100" data-inr="7337" data-cad="122" data-aud="128" data-gbp="72" data-eur="83" data-brl="533" data-php="5718" data-zar="1734" data-aed="367">₹7,337.00</span>
                                </h4>
                            </div>
                            <div class="card-footer pt-0 pb-3">
                                <div class="m-auto text-center mb-2">
                                   <button class="btn-sm btn-grey-border item-show-hover"><i class="fal fa-external-link me-2"></i>More Details</button>
                                </div>
                            </div>
                       </div>
                       </a>
                    </div>
                    <div class="col-sm-6 col-lg-4 col-xl-3">
                        <a href="https://www.tutorialspoint.com/full-stack-java-developer-java-jsp-restful-ws-spring/index.asp" title="Full Stack Java Developer - Java + JSP + Restful WS + Spring" target="_blank">
                        <div class="card shadow-hover h-100 border">
                            <img src="https://d3mxt5v3yxgcsr.cloudfront.net/courses/2705/course_2705_image.jpg" class="card-img-top" alt="course image">
                            <div class="card-body pb-0">
                                <h5 class="card-title fw-bold pb-0">Full Stack Java Developer - Java + JSP + Restful WS + Spring</h5>
                                <p class="mb-2 text-truncate-2"><i class="fal fa-user" target="_blank"></i> Chaand Sheikh </p>
                            </div>
                            <div class="card-footer pt-0">
                                <hr>
                                <div class="d-flex justify-content-between">
                                    <span class="h6 fw-light mb-0"><i class="fal fa-user-clock me-2 fb"></i>57 Hours</span>
                                    <span class="h6 fw-light mb-0 fb"><i class="fal fa-list me-2"></i>517 Lectures</span>
                                </div>
                            </div>
                            <div class="hstack gap-1 card-body pt-0">
                                <h4 class="fb">
                                    <span id="p_2705" class="price" data-usd="8.99" data-inr="379.99" data-cad="10.99" data-aud="10.99" data-gbp="8.49" data-eur="8.99" data-jpy="1092.07" data-brl="39.99" data-php="399.99" data-zar="129.99" data-aed="29.99">₹379.99</span>
                                    <span class="actual-price" data-usd="130" data-inr="9100" data-cad="158.6" data-aud="166.4" data-gbp="93.6" data-eur="107.9" data-jpy="14133.6" data-brl="692.9" data-php="7433.4" data-zar="2254.2" data-aed="477.1">₹9,100.00</span>
                                </h4>
                            </div>
                            <div class="card-footer pt-0 pb-3">
                                <div class="m-auto text-center mb-2">
                                   <button class="btn-sm btn-grey-border item-show-hover"><i class="fal fa-external-link me-2"></i>More Details</button>
                                </div>
                            </div>
                       </div>
                       </a>
                    </div>
                </div>
            </div>
            <!-- Slider END -->
        </div>
    </div>
</section>
<!-- ======================= Trending courses END -->

<!--  ====================== Tutorials  START -->
<section>
    <div class="container">
        <!-- Title -->
        <div class="mb-4">
            <div class="row">
                <div class="d-flex justify-content-between">
                    <h2 class="fs-1 fb"><i class="fal fa-books me-3"></i>Tutorials <span class="text-green">Library</span></h2>
                    <div class="pull-right align-items-center">
                        <a href="https://www.tutorialspoint.com/tutorialslibrary.htm" class="btn btn-green-shadow mb-0" target="_blank">View More<i class="fal fa-long-arrow-right ms-2"></i></a>
                    </div>
                </div>
                <p class="mb-0 fs-11-60 fb">The Largest Free Online Library</p>
            </div>
        </div>
        <div class="row g-4 library-sprite">
            <div class="col-sm-12 col-lg-6 col-xl-6">
                <div class="card card-body shadow rounded-3 grey-box">
                    <div class="row">
                        <h5 class="card-title pb-2 mb-4 ps-1"><i class="fal fa-cogs icon-md text-dark mb-0 rounded-3 me-2"></i> Latest Technologies</h5>
                        <div class="col-6 col-sm-2 col-md-2 col-lg-2 col-xxl-2 col-xl-2 px-1 text-center">
                            <div class="bitcoin">
                                <a href="https://www.tutorialspoint.com/bitcoin/index.htm" target="_blank" title="Bitcoin Tutorial">
                                    <div class="image-title white-title">Bitcoin Tutorial</div>
                                </a>
                            </div>
                        </div>
                        <div class="col-6 col-sm-2 col-md-2 col-lg-2 col-xxl-2 col-xl-2 px-1 text-center">
                            <div class="blockchain">
                                <a href="https://www.tutorialspoint.com/blockchain/index.htm" target="_blank" title="Blockchain Tutorial">
                                    <div class="image-title white-title">Blockchain Tutorial</div>
                                </a>
                            </div>
                        </div>
                        <div class="col-6 col-sm-2 col-md-2 col-lg-2 col-xxl-2 col-xl-2 px-1 text-center">
                            <div class="blueprism">
                                <a href="https://www.tutorialspoint.com/blue_prism/index.htm" target="_blank" title="Blue Prism Tutorial">
                                    <div class="image-title white-title">Blue Prism Tutorial</div>
                                </a>
                            </div>
                        </div>
                        <div class="col-6 col-sm-2 col-md-2 col-lg-2 col-xxl-2 col-xl-2 px-1 text-center">
                            <div class="ethereum">
                                <a href="https://www.tutorialspoint.com/ethereum/index.htm" target="_blank" title="Ethereum Tutorial">
                                    <div class="image-title white-title">Ethereum Tutorial</div>
                                </a>
                            </div>
                        </div>
                        <div class="col-6 col-sm-2 col-md-2 col-lg-2 col-xxl-2 col-xl-2 px-1 text-center">
                            <div class="python">
                                <a href="https://www.tutorialspoint.com/python_blockchain/index.htm" target="_blank" title="Python Blockchain Tutorial">
                                    <div class="image-title white-title">Python Blockchain</div>
                                </a>
                            </div>
                        </div>
                        <div class="col-6 col-sm-2 col-md-2 col-lg-2 col-xxl-2 col-xl-2 px-1 text-center">
                            <div class="openshift">
                                <a href="https://www.tutorialspoint.com/openshift/index.htm" target="_blank" title="OpenShift Tutorial">
                                    <div class="image-title white-title">OpenShift Tutorial</div>
                                </a>
                            </div>
                        </div>                      
                    </div>
                    <div class="clear"></div>
                    <div class="text-end mt-2 pt-2">
                        <a href="https://www.tutorialspoint.com/latest_technologies.htm" class="btn btn-white-soft">View More <i class="fal fa-long-arrow-right ms-2"></i></a>
                    </div>
                </div>              
            </div>
            <div class="col-sm-12 col-lg-6 col-xl-6">
                <div class="card card-body shadow rounded-3 grey-box">
                    <div class="row">
                        <h5 class="card-title pb-2 mb-4 ps-1"><i class="fal fa-head-side-brain icon-md text-dark mb-0 rounded-3 me-2"></i> Machine Learning</h5>
                        <div class="col-6 col-sm-2 col-md-2 col-lg-2 col-xxl-2 col-xl-2 px-1 text-center">
                            <div class="machine-learn">
                                <a href="https://www.tutorialspoint.com/machine_learning/index.htm" target="_blank" title="Machine Learning Tutorial">
                                    <div class="image-title white-title">Machine Learning</div>
                                </a>
                            </div>
                        </div>
                        <div class="col-6 col-sm-2 col-md-2 col-lg-2 col-xxl-2 col-xl-2 px-1 text-center">
                            <div class="tensorflow">
                                <a href="https://www.tutorialspoint.com/tensorflow/index.htm" target="_blank" title="TensorFlow Tutorial">
                                    <div class="image-title white-title">TensorFlow Tutorial</div>
                                </a>
                            </div>
                        </div>
                        <div class="col-6 col-sm-2 col-md-2 col-lg-2 col-xxl-2 col-xl-2 px-1 text-center">
                            <div class="machine-learn-python">
                                <a href="https://www.tutorialspoint.com/machine_learning_with_python/index.htm" target="_blank" title="Machine Learning with Python Tutorial">
                                    <div class="image-title white-title">ML with Python</div>
                                </a>
                            </div>
                        </div>
                        <div class="col-6 col-sm-2 col-md-2 col-lg-2 col-xxl-2 col-xl-2 px-1 text-center">
                            <div class="ai-python">
                                <a href="https://www.tutorialspoint.com/artificial_intelligence_with_python/index.htm" target="_blank" title="AI with Python Tutorial">
                                    <div class="image-title white-title">AI with Python</div>
                                </a>
                            </div>
                        </div>
                        <div class="col-6 col-sm-2 col-md-2 col-lg-2 col-xxl-2 col-xl-2 px-1 text-center">
                            <div class="timeseries">
                                <a href="https://www.tutorialspoint.com/time_series/index.htm" target="_blank" title="Python Blockchain Tutorial">
                                    <div class="image-title white-title">Time Series Tutorial</div>
                                </a>
                            </div>
                        </div>
                        <div class="col-6 col-sm-2 col-md-2 col-lg-2 col-xxl-2 col-xl-2 px-1 text-center">
                            <div class="pytorch">
                                <a href="https://www.tutorialspoint.com/pytorch/index.htm" target="_blank" title="PyTorch Tutorial">
                                    <div class="image-title white-title">PyTorch Tutorial</div>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="clear"></div>
                    <div class="text-end mt-2 pt-2">
                        <a href="https://www.tutorialspoint.com/machine_learning_tutorials.htm" class="btn btn-white-soft">View More <i class="fal fa-long-arrow-right ms-2"></i></a>
                    </div>
                </div>
            </div>

            <div class="col-sm-12 col-lg-6 col-xl-6">
                <div class="card card-body shadow rounded-3 grey-box">
                    <div class="row">
                        <h5 class="card-title pb-2 mb-4 ps-1"><i class="fal fa-microchip icon-md text-dark mb-0 rounded-3 me-2"></i> Computer Science</h5>
                        <div class="col-6 col-sm-2 col-md-2 col-lg-2 col-xxl-2 col-xl-2 px-1 text-center">
                            <div class="computer-fundamentals">
                                <a href="https://www.tutorialspoint.com/computer_fundamentals/index.htm" target="_blank" title="Computer-Fundamentals Tutorial">
                                    <div class="image-title white-title">Computer <span>Fundamentals</span></div>
                                </a>
                            </div>
                        </div>
                        <div class="col-6 col-sm-2 col-md-2 col-lg-2 col-xxl-2 col-xl-2 px-1 text-center">
                            <div class="complier-design">
                                <a href="https://www.tutorialspoint.com/compiler_design/index.htm" target="_blank" title="Compiler-Design Tutorial">
                                    <div class="image-title white-title">Compiler Design</div>
                                </a>
                            </div>
                        </div>
                        <div class="col-6 col-sm-2 col-md-2 col-lg-2 col-xxl-2 col-xl-2 px-1 text-center">
                            <div class="operating-system">
                                <a href="https://www.tutorialspoint.com/operating_system/index.htm" target="_blank" title="Operating-System Tutorial">
                                    <div class="image-title white-title">Operating System</div>
                                </a>
                            </div>
                        </div>
                        <div class="col-6 col-sm-2 col-md-2 col-lg-2 col-xxl-2 col-xl-2 px-1 text-center">
                            <div class="data-structures">
                                <a href="https://www.tutorialspoint.com/data_structures_algorithms/index.htm" target="_blank" title="Data Structure Tutorial">
                                    <div class="image-title white-title">Data Structure</div>
                                </a>
                            </div>
                        </div>
                        <div class="col-6 col-sm-2 col-md-2 col-lg-2 col-xxl-2 col-xl-2 px-1 text-center">
                            <div class="dbms">
                                <a href="https://www.tutorialspoint.com/dbms/index.htm" target="_blank" title="DBMS Tutorial">
                                    <div class="image-title white-title">DBMS Tutorial</div> 
                                </a>
                            </div>
                        </div>
                        <div class="col-6 col-sm-2 col-md-2 col-lg-2 col-xxl-2 col-xl-2 px-1 text-center">
                            <div class="networking">
                                <a href="https://www.tutorialspoint.com/data_communication_computer_network/index.htm" target="_blank" title="Networking Tutorial">
                                    <div class="image-title white-title">Networking Tutorial</div>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="clear"></div>
                    <div class="text-end mt-2 pt-2">
                        <a href="https://www.tutorialspoint.com/computer_science_tutorials.htm" class="btn btn-white-soft"> View More <i class="fal fa-long-arrow-right ms-2"></i></a>
                    </div>
                </div>
            </div>
            <div class="col-sm-12 col-lg-6 col-xl-6">
                <div class="card card-body shadow rounded-3 grey-box">
                    <div class="row">
                        <h5 class="card-title pb-2 mb-4 ps-1"><i class="fal fa-globe icon-md text-dark mb-0 rounded-3 me-2"></i> Web Development</h5>
                        <div class="col-6 col-sm-2 col-md-2 col-lg-2 col-xxl-2 col-xl-2 px-1 text-center">
                            <div class="html">
                                <a href="https://www.tutorialspoint.com/html/index.htm" target="_blank" title="html Tutorial">
                                    <div class="image-title white-title">HTML Tutorial</div>
                                </a>
                            </div>
                        </div>
                        <div class="col-6 col-sm-2 col-md-2 col-lg-2 col-xxl-2 col-xl-2 px-1 text-center">
                            <div class="css">
                                <a href="https://www.tutorialspoint.com/css/index.htm" target="_blank" title="css Tutorial">
                                    <div class="image-title white-title">css Tutorial</div>
                                </a>
                            </div>
                        </div>
                        <div class="col-6 col-sm-2 col-md-2 col-lg-2 col-xxl-2 col-xl-2 px-1 text-center">
                            <div class="javascript">
                                <a href="https://www.tutorialspoint.com/javascript/index.htm" target="_blank" title="Javascript Tutorial">
                                    <div class="image-title white-title">Javascript Tutorial</div>
                                </a>
                            </div>
                        </div>
                        <div class="col-6 col-sm-2 col-md-2 col-lg-2 col-xxl-2 col-xl-2 px-1 text-center">
                            <div class="php">
                                <a href="https://www.tutorialspoint.com/php/index.htm" target="_blank" title="PHP Tutorial">
                                    <div class="image-title white-title">PHP Tutorial</div>
                                </a>
                            </div>
                        </div>
                        <div class="col-6 col-sm-2 col-md-2 col-lg-2 col-xxl-2 col-xl-2 px-1 text-center">
                            <div class="angularjs4">
                                <a href="https://www.tutorialspoint.com/angular4/index.htm" target="_blank" title="Angular JS 4 Tutorial">
                                    <div class="image-title white-title">Angular JS 4 Tutorial</div> 
                                </a>
                            </div>
                        </div>
                        <div class="col-6 col-sm-2 col-md-2 col-lg-2 col-xxl-2 col-xl-2 px-1 text-center">
                            <div class="mysql">
                                <a href="https://www.tutorialspoint.com/mysql/index.htm" target="_blank" title="MySQL Tutorial">
                                    <div class="image-title white-title">MySQL Tutorial</div>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="clear"></div>
                    <div class="text-end mt-2 pt-2">
                        <a href="https://www.tutorialspoint.com/web_development_tutorials.htm" class="btn btn-white-soft">View More <i class="fal fa-long-arrow-right ms-2"></i></a>
                    </div>
                </div>
            </div>

            <div class="col-sm-12 col-lg-6 col-xl-6">
                <div class="card card-body shadow rounded-3 grey-box">
                    <div class="row">
                        <h5 class="card-title pb-2 mb-4 ps-1"><i class="fal fa-code icon-md text-dark mb-0 rounded-3 me-2"></i> Programming Tutorials</h5>
                        <div class="col-6 col-sm-2 col-md-2 col-lg-2 col-xxl-2 col-xl-2 px-1 text-center">
                            <div class="html">
                                <a href="https://www.tutorialspoint.com/html/index.htm" target="_blank" title="html Tutorial">
                                    <div class="image-title white-title">HTML Tutorial</div>
                                </a>
                            </div>
                        </div>
                        <div class="col-6 col-sm-2 col-md-2 col-lg-2 col-xxl-2 col-xl-2 px-1 text-center">
                            <div class="cplus">
                                <a href="https://www.tutorialspoint.com/cplusplus/index.htm" target="_blank" title="C++  Tutorial">
                                    <div class="image-title white-title">C++ Tutorial</div>
                                </a>
                            </div>
                        </div>
                        <div class="col-6 col-sm-2 col-md-2 col-lg-2 col-xxl-2 col-xl-2 px-1 text-center">
                            <div class="java-8">
                                <a href="https://www.tutorialspoint.com/java8/index.htm" target="_blank" title="Java 8 Tutorial">
                                    <div class="image-title white-title">Java 8 Tutorial</div>
                                </a>
                            </div>
                        </div>
                        <div class="col-6 col-sm-2 col-md-2 col-lg-2 col-xxl-2 col-xl-2 px-1 text-center">
                            <div class="python-n">
                                <a href="https://www.tutorialspoint.com/python/index.htm" target="_blank" title="Python Tutorial">
                                    <div class="image-title white-title">Python Tutorial</div>
                                </a>
                            </div>
                        </div>
                        <div class="col-6 col-sm-2 col-md-2 col-lg-2 col-xxl-2 col-xl-2 px-1 text-center">
                            <div class="scala">
                                <a href="https://www.tutorialspoint.com/scala/index.htm" target="_blank" title="Scala Tutorial">
                                    <div class="image-title white-title">Scala Tutorial</div>
                                </a>
                            </div>
                        </div>
                        <div class="col-6 col-sm-2 col-md-2 col-lg-2 col-xxl-2 col-xl-2 px-1 text-center">
                            <div class="chash">
                                <a href="https://www.tutorialspoint.com/csharp/index.htm" target="_blank" title="C# Tutorial">
                                    <div class="image-title white-title">C# Tutorial</div> 
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="clear"></div>
                    <div class="text-end mt-2 pt-2">
                        <a href="https://www.tutorialspoint.com/computer_programming_tutorials.htm" class="btn btn-white-soft">View More <i class="fal fa-long-arrow-right ms-2"></i></a>
                    </div>
                </div>
            </div>

            <div class="col-sm-12 col-lg-6 col-xl-6">
                <div class="card card-body shadow rounded-3 grey-box">
                    <div class="row">
                        <h5 class="card-title pb-2 mb-4 ps-1"><i class="fab fa-java icon-md text-dark mb-0 rounded-3 me-2"></i> Java Technologies</h5>
                        <div class="col-6 col-sm-2 col-md-2 col-lg-2 col-xxl-2 col-xl-2 px-1 text-center">
                            <div class="java-8">
                                <a href="https://www.tutorialspoint.com/java8/index.htm" target="_blank" title="Java 8 Tutorial">
                                    <div class="image-title white-title">Java 8 Tutorial</div>
                                </a>
                            </div>
                        </div>
                        <div class="col-6 col-sm-2 col-md-2 col-lg-2 col-xxl-2 col-xl-2 px-1 text-center">
                            <div class="jdbc">
                                <a href="https://www.tutorialspoint.com/jdbc/index.htm" target="_blank" title="JDBC  Tutorial">
                                    <div class="image-title white-title">JDBC Tutorial</div>
                                </a>
                            </div>
                        </div>
                        <div class="col-6 col-sm-2 col-md-2 col-lg-2 col-xxl-2 col-xl-2 px-1 text-center">
                            <div class="swing">
                                <a href="https://www.tutorialspoint.com/swing/index.htm" target="_blank" title="Swing Tutorial">
                                    <div class="image-title white-title">Swing Tutorial</div>
                                </a>
                            </div>
                        </div>
                        <div class="col-6 col-sm-2 col-md-2 col-lg-2 col-xxl-2 col-xl-2 px-1 text-center">
                            <div class="servlets">
                                <a href="https://www.tutorialspoint.com/servlets/index.htm" target="_blank" title="Servlets Tutorial">
                                    <div class="image-title white-title">Servlets Tutorial</div>
                                </a>
                            </div>
                        </div>
                        <div class="col-6 col-sm-2 col-md-2 col-lg-2 col-xxl-2 col-xl-2 px-1 text-center">
                            <div class="spring">
                                <a href="https://www.tutorialspoint.com/spring/index.htm" target="_blank" title="Spring Tutorial">
                                    <div class="image-title white-title">Spring Tutorial</div>
                                </a>
                            </div>
                        </div>
                        <div class="col-6 col-sm-2 col-md-2 col-lg-2 col-xxl-2 col-xl-2 px-1 text-center">
                            <div class="hibernate">
                                <a href="https://www.tutorialspoint.com/hibernate/index.htm" target="_blank" title="Hibernate Tutorial">
                                    <div class="image-title white-title">Hibernate Tutorial</div> 
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="clear"></div>
                    <div class="text-end mt-2 pt-2">
                        <a href="https://www.tutorialspoint.com/java_technology_tutorials.htm" class="btn btn-white-soft">View More <i class="fal fa-long-arrow-right ms-2"></i></a>
                    </div>
                </div>
            </div>

            <div class="col-sm-12 col-lg-6 col-xl-6">
                <div class="card card-body shadow rounded-3 grey-box">
                    <div class="row">
                        <h5 class="card-title pb-2 mb-4 ps-1"><i class="fal fa-mobile-android icon-md text-dark mb-0 rounded-3 me-2"></i> Mobile App Development</h5>
                        <div class="col-6 col-sm-2 col-md-2 col-lg-2 col-xxl-2 col-xl-2 px-1 text-center">
                            <div class="android">
                                <a href="https://www.tutorialspoint.com/android/index.htm" target="_blank" title="Android Tutorial">
                                    <div class="image-title white-title">Android Tutorial</div>
                                </a>
                            </div>
                        </div>
                        <div class="col-6 col-sm-2 col-md-2 col-lg-2 col-xxl-2 col-xl-2 px-1 text-center">
                            <div class="swift">
                                <a href="https://www.tutorialspoint.com/swift/index.htm" target="_blank" title="Swift Tutorial">
                                    <div class="image-title white-title">Swift Tutorial</div>
                                </a>
                            </div>
                        </div>
                        <div class="col-6 col-sm-2 col-md-2 col-lg-2 col-xxl-2 col-xl-2 px-1 text-center">
                            <div class="ios">
                                <a href="https://www.tutorialspoint.com/ios/index.htm" target="_blank" title="IOS Tutorial">
                                    <div class="image-title white-title">IOS Tutorial</div>
                                </a>
                            </div>
                        </div>
                        <div class="col-6 col-sm-2 col-md-2 col-lg-2 col-xxl-2 col-xl-2 px-1 text-center">
                            <div class="kotlin">
                                <a href="https://www.tutorialspoint.com/kotlin/index.htm" target="_blank" title="Kotlin Tutorial">
                                    <div class="image-title white-title">Kotlin Tutorial</div>
                                </a>
                            </div>
                        </div>
                        <div class="col-6 col-sm-2 col-md-2 col-lg-2 col-xxl-2 col-xl-2 px-1 text-center">
                            <div class="xamarian">
                                <a href="https://www.tutorialspoint.com/xamarin/index.htm" target="_blank" title="Xamarian Tutorial">
                                    <div class="image-title white-title">Xamarian Tutorial</div> 
                                </a>
                            </div>
                        </div>
                        <div class="col-6 col-sm-2 col-md-2 col-lg-2 col-xxl-2 col-xl-2 px-1 text-center">
                            <div class="react">
                                <a href="https://www.tutorialspoint.com/react_native/index.htm" target="_blank" title="React Native Tutorial">
                                    <div class="image-title white-title">React Native Tutorial</div>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="clear"></div>
                    <div class="text-end mt-2 pt-2">
                        <a href="https://www.tutorialspoint.com/mobile_development_tutorials.htm" class="btn btn-white-soft">View More <i class="fal fa-long-arrow-right ms-2"></i></a>
                    </div>
                </div>
            </div>

            <div class="col-sm-12 col-lg-6 col-xl-6">
                <div class="card card-body shadow rounded-3 grey-box">
                    <div class="row">
                        <h5 class="card-title pb-2 mb-4 ps-1"><i class="fal fa-database icon-md text-dark mb-0 rounded-3 me-2"></i> Database Tutorials</h5>
                        <div class="col-6 col-sm-2 col-md-2 col-lg-2 col-xxl-2 col-xl-2 px-1 text-center">
                            <div class="mongo-db">
                                <a href="https://www.tutorialspoint.com/mongodb/index.htm" target="_blank" title="Mongo DB Tutorial">
                                    <div class="image-title white-title">Mongo DB Tutorial</div>
                                </a>
                            </div>
                        </div>
                        <div class="col-6 col-sm-2 col-md-2 col-lg-2 col-xxl-2 col-xl-2 px-1 text-center">
                            <div class="pl-sql">
                                <a href="https://www.tutorialspoint.com/plsql/index.htm" target="_blank" title="PL / SQL Tutorial">
                                    <div class="image-title white-title">PL / SQL Tutorial</div>
                                </a>
                            </div>
                        </div>
                        <div class="col-6 col-sm-2 col-md-2 col-lg-2 col-xxl-2 col-xl-2 px-1 text-center">
                            <div class="sql">
                                <a href="https://www.tutorialspoint.com/sql/index.htm" target="_blank" title="SQL Tutorial">
                                    <div class="image-title white-title">SQL Tutorial</div>
                                </a>
                            </div>
                        </div>
                        <div class="col-6 col-sm-2 col-md-2 col-lg-2 col-xxl-2 col-xl-2 px-1 text-center">
                            <div class="db2">
                                <a href="https://www.tutorialspoint.com/db2/index.htm" target="_blank" title="DB2 Tutorial">
                                    <div class="image-title white-title">DB2 Tutorial</div>
                                </a>
                            </div>
                        </div>
                        <div class="col-6 col-sm-2 col-md-2 col-lg-2 col-xxl-2 col-xl-2 px-1 text-center">
                            <div class="mysql">
                                <a href="https://www.tutorialspoint.com/mysql/index.htm" target="_blank" title="MySQL Tutorial">
                                    <div class="image-title white-title">MySQL Tutorial</div>
                                </a>
                            </div>
                        </div>
                        <div class="col-6 col-sm-2 col-md-2 col-lg-2 col-xxl-2 col-xl-2 px-1 text-center">
                            <div class="memcached">
                                <a href="https://www.tutorialspoint.com/memcached/index.htm" target="_blank" title="Memcached Tutorial">
                                    <div class="image-title white-title">Memcached Tutorial</div> 
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="clear"></div>
                    <div class="text-end mt-2 pt-2">
                        <a href="https://www.tutorialspoint.com/database_tutorials.htm" class="btn btn-white-soft">View More <i class="fal fa-long-arrow-right ms-2"></i></a>
                    </div>
                </div>
            </div>

            <div class="col-sm-12 col-lg-6 col-xl-6">
                <div class="card card-body shadow rounded-3 grey-box">
                    <div class="row">
                        <h5 class="card-title pb-2 mb-4 ps-1"><i class="fab fa-microsoft icon-md text-dark mb-0 rounded-3 me-2"></i> Microsoft Technologies</h5>
                        <div class="col-6 col-sm-2 col-md-2 col-lg-2 col-xxl-2 col-xl-2 px-1 text-center">
                            <div class="asp-net">
                                <a href="https://www.tutorialspoint.com/asp.net/index.htm" target="_blank" title="ASP.NET Tutorial">
                                    <div class="image-title white-title">ASP.NET</div>
                                </a>
                            </div>
                        </div>
                        <div class="col-6 col-sm-2 col-md-2 col-lg-2 col-xxl-2 col-xl-2 px-1 text-center">
                            <div class="entity-framework">
                                <a href="https://www.tutorialspoint.com/entity_framework/index.htm" target="_blank" title="Entity Framework Tutorial">
                                    <div class="image-title white-title">Entity Framework</div>
                                </a>
                            </div>
                        </div>
                        <div class="col-6 col-sm-2 col-md-2 col-lg-2 col-xxl-2 col-xl-2 px-1 text-center">
                            <div class="vb-net">
                                <a href="https://www.tutorialspoint.com/vb.net/index.htm" target="_blank" title="VB.NET Tutorial">
                                    <div class="image-title white-title">VB.NET Tutorial</div>
                                </a>
                            </div>
                        </div>
                        <div class="col-6 col-sm-2 col-md-2 col-lg-2 col-xxl-2 col-xl-2 px-1 text-center">
                            <div class="microsoft-project">
                                <a href="https://www.tutorialspoint.com/ms_project/index.htm" target="_blank" title="Microsoft Project Tutorial">
                                    <div class="image-title white-title">Microsoft Project</div>
                                </a>
                            </div>
                        </div>
                        <div class="col-6 col-sm-2 col-md-2 col-lg-2 col-xxl-2 col-xl-2 px-1 text-center">
                            <div class="microsoft-excel">
                                <a href="https://www.tutorialspoint.com/excel/index.htm" target="_blank" title="Microsoft Excel Tutorial">
                                    <div class="image-title white-title">Microsoft Excel</div>
                                </a>
                            </div>
                        </div>
                        <div class="col-6 col-sm-2 col-md-2 col-lg-2 col-xxl-2 col-xl-2 px-1 text-center">
                            <div class="microsoft-word">
                                <a href="https://www.tutorialspoint.com/word/index.htm" target="_blank" title="Microsoft Word Tutorial">
                                    <div class="image-title white-title">Microsoft Word</div> 
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="clear"></div>
                    <div class="text-end mt-2 pt-2">
                        <a href="https://www.tutorialspoint.com/microsoft_technologies_tutorials.htm" class="btn btn-white-soft">View More <i class="fal fa-long-arrow-right ms-2"></i></a>
                    </div>
                </div>
            </div>

            <div class="col-sm-12 col-lg-6 col-xl-6">
                <div class="card card-body shadow rounded-3 grey-box">
                    <div class="row">
                        <h5 class="card-title pb-2 mb-4 ps-1"><i class="fal fa-chart-pie icon-md text-dark mb-0 rounded-3 me-2"></i> Big Data and Analytics</h5>
                        <div class="col-6 col-sm-2 col-md-2 col-lg-2 col-xxl-2 col-xl-2 px-1 text-center">
                            <div class="big-data-analytics">
                                <a href="https://www.tutorialspoint.com/big_data_analytics/index.htm" target="_blank" title="Big Data Analytics Tutorial">
                                    <div class="image-title white-title">Big Data Analytics</div>
                                </a>
                            </div>
                        </div>
                        <div class="col-6 col-sm-2 col-md-2 col-lg-2 col-xxl-2 col-xl-2 px-1 text-center">
                            <div class="hadoop">
                                <a href="https://www.tutorialspoint.com/hadoop/index.htm" target="_blank" title="Hadoop Tutorial">
                                    <div class="image-title white-title">Hadoop Tutorial</div>
                                </a>
                            </div>
                        </div>
                        <div class="col-6 col-sm-2 col-md-2 col-lg-2 col-xxl-2 col-xl-2 px-1 text-center">
                            <div class="sas">
                                <a href="https://www.tutorialspoint.com/sas/index.htm" target="_blank" title="SAS Tutorial">
                                    <div class="image-title white-title">SAS Tutorial</div>
                                </a>
                            </div>
                        </div>
                        <div class="col-6 col-sm-2 col-md-2 col-lg-2 col-xxl-2 col-xl-2 px-1 text-center">
                            <div class="qlikview">
                                <a href="https://www.tutorialspoint.com/qlikview/index.htm" target="_blank" title="QlikView Tutorial">
                                    <div class="image-title white-title">QlikView Tutorial</div>
                                </a>
                            </div>
                        </div>
                        <div class="col-6 col-sm-2 col-md-2 col-lg-2 col-xxl-2 col-xl-2 px-1 text-center">
                            <div class="powerbi">
                                <a href="https://www.tutorialspoint.com/power_bi/index.htm" target="_blank" title="Power BI Tutorial">
                                    <div class="image-title white-title">Power BI Tutorial</div>
                                </a>
                            </div>
                        </div>
                        <div class="col-6 col-sm-2 col-md-2 col-lg-2 col-xxl-2 col-xl-2 px-1 text-center">
                            <div class="tableau">
                                <a href="https://www.tutorialspoint.com/tableau/index.htm" target="_blank" title="Tableau Tutorial">
                                    <div class="image-title white-title">Tableau Tutorial</div> 
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="clear"></div>
                    <div class="text-end mt-2 pt-2">
                        <a href="https://www.tutorialspoint.com/big_data_tutorials.htm" class="btn btn-white-soft">View More <i class="fal fa-long-arrow-right ms-2"></i></a>
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>
<!-- =======================
Tutorials END -->

<!-- =======================
Become an Instructor START -->
<div class="py-4">
    <div class="container">
        <div class="row g-4">
            <!-- Action box item -->
            <div class="col-lg-6 position-relative overflow-hidden">
                <a href="https://www.tutorialspoint.com/market/business/subscription.jsp" target="_blank" title="Annual Membership">
                    <div class="bg-primary bg-opacity-10 rounded-3 p-5 h-100">
                        <div class="position-absolute bottom-0 end-0 me-3">
                            <img src="images/annual-membership-wraps.svg" class="h-100px h-sm-200px" alt="">
                        </div>  
                        <div class="row">
                            <div class="col-sm-8 position-relative">
                                <h3 class="mb-1 fb">Annual Membership</h3>
                                <p class="mb-3 h5 fw-light lead fb">Enjoy unlimited access on 5500+ Hand Picked Quality Video Courses.</p>
                                <button class="btn btn-business mb-0" target="_blank"><i class="fal fa-check"></i> Subscribe Now</button>
                            </div>
                        </div>
                    </div>
                </a>
            </div>

            <!-- Action box item -->
            <div class="col-lg-6 position-relative overflow-hidden">
                <a href="https://www.tutorialspoint.com/business/index.asp" target="_blank" title="Business Pack">
                    <div class="bg-secondary rounded-3 bg-opacity-10 p-5 h-100">
                        <div class="position-absolute bottom-0 end-0 me-3">
                            <img src="images/business-banner-wraps.svg" class="h-100px h-sm-200px" alt="">
                        </div>  
                        <div class="row">
                            <div class="col-sm-8 position-relative">
                                <h3 class="mb-1 fb">Training for a Team</h3>
                                <p class="mb-3 h5 fw-light lead fb">Affordable solution to train a team and make them project ready.</p>
                                <a href="https://www.tutorialspoint.com/business/index.asp#demoRequest" class="btn btn-warning mb-0" target="_blank"><i class="fal fa-check me-1"></i>Request a Demo</a>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>
</div>
<!-- ======================= Become an Instructor END -->

<!-- ======================= Selected reading START -->
<div class="py-4">
    <div class="container">
      <div class="col-sm-12 col-lg-12 col-xl-12">
           <div class="card card-body special-reading-box">
              <div class="row">
                 <div class="col-6 col-sm-2 col-md-2 col-lg-2 col-xxl-2 col-xl-2 px-1 text-center">
                    <a href="https://www.tutorialspoint.com/developers_best_practices/index.htm" title="Developer's Best Practices" class="nav-link">
                        <i class="fal fa-laptop-code fa-3x w-lg-80px w-sm-50px mb-3"></i>
                        <p class="text-secondary">Developers <br/><b>Best Practices</b></p>
                    </a>
                 </div>
                 <div class="col-6 col-sm-2 col-md-2 col-lg-2 col-xxl-2 col-xl-2 px-1 text-center">
                    <a href="https://www.tutorialspoint.com/effective_resume_writing.htm" title="Effective Resume Writing" class="nav-link">
                        <i class="fal fa-file-signature fa-3x w-lg-80px w-sm-50px mb-3"></i>
                        <p class="text-secondary">Effective <br/><b>Resume Writing</b></p>
                    </a>
                 </div>
                 <div class="col-6 col-sm-2 col-md-2 col-lg-2 col-xxl-2 col-xl-2 px-1 text-center">
                    <a href="https://www.tutorialspoint.com/computer_glossary.htm" title="Computer Glossary"  class="nav-link">
                        <i class="fal fa-address-book fa-3x w-lg-80px w-sm-50px mb-3"></i>
                        <p class="text-secondary">Computer <br/><b>Glossary</b></p>
                    </a>
                 </div>
                 <div class="col-6 col-sm-2 col-md-2 col-lg-2 col-xxl-2 col-xl-2 px-1 text-center">
                    <a href="https://www.tutorialspoint.com/computer_whoiswho.htm" title="Who is Who in Computer Science" class="nav-link">
                        <i class="fal fa-users fa-3x w-lg-80px w-sm-50px mb-3"></i>
                        <p class="text-secondary">Who is Who <br/><b>in Computer</b></p>
                    </a>
                 </div>
                 <div class="col-6 col-sm-2 col-md-2 col-lg-2 col-xxl-2 col-xl-2 px-1 text-center">
                    <a href="https://www.tutorialspoint.com/questions_and_answers.htm" title="Technical Questions and Answers"  class="nav-link">
                        <i class="fal fa-comments-alt fa-3x w-lg-80px w-sm-50px mb-3"></i>
                        <p class="text-secondary">Technical <br/><b>Q &amp; A</b></p>
                    </a>
                 </div>
                 <div class="col-6 col-sm-2 col-md-2 col-lg-2 col-xxl-2 col-xl-2 px-1 text-center">
                    <a href="https://www.tutorialspoint.com/multi_language_tutorials.htm" title="Multi-Lingual Tutorials" class="nav-link">
                    <i class="fal fa-globe fa-3x w-lg-80px w-sm-50px mb-3"></i>
                        <p class="text-secondary">Multi-Lingual <br/><b>Tutorials</b></p>
                    </a>
                 </div>
              </div>
           </div>
        </div>
    </div>
</div>
<!-- ======================= Selected Reading END -->
</main>
<!-- **************** MAIN CONTENT END **************** -->

<!-- ======================= Footer START -->
<footer class="pt-5 bg-light">
    <div class="container">
        <!-- Row START -->
        <div class="row g-4">
            <!-- Widget 1 START -->
            <div class="col-lg-3">
                <!-- logo -->
                <a class="me-0" href="index.htm">
                    <img class="light-mode-item h-60px" src="/images/logo.png?v2" alt="Tutorials Point">
                    <img class="dark-mode-item h-60px" src="/images/logo-w.png?v2" alt="Tutorials Point">
                </a>
                <p class="my-3 fb">Tutorials Point is a leading Ed Tech company striving to provide the best learning material on technical and non-technical subjects.</p>

                <div class="row g-2 mt-2">
                    <!-- Google play store button -->
                    <div class="col-6 col-sm-4 col-md-3 col-lg-6">
                        <a href="https://play.google.com/store/apps/details?id=com.tutorialspoint.onlineviewer" target="_blank"><img src="static/images/client/google-play.svg" alt=""> </a>
                    </div>
                    <!-- App store button -->
                    <div class="col-6 col-sm-4 col-md-3 col-lg-6">
                        <a href="https://itunes.apple.com/us/app/tutorials-point/id914891263?ls=1&mt=8" target="_blank"> <img src="static/images/client/app-store.svg" alt="app-store"></a>
                    </div>
                </div> <!-- Row END -->
            </div>
            <!-- Widget 1 END -->

            <!-- Widget 2 START -->
            <div class="col-lg-6">
                <div class="row g-4">
                    <!-- Link block -->
                    <div class="col-6 col-md-4">
                        <h5 class="mb-1 mb-md-3 fb">ABOUT US</h5>
                        <ul class="nav flex-column">
                           <li class="nav-item"><a class="nav-link" href="/about/index.htm"><i class="fal fa-check"></i>  Company</a></li>
                     <li class="nav-item"><a class="nav-link" href="/about/about_team.htm"><i class="fal fa-check"></i> Our Team</a></li>
                     <li class="nav-item"><a class="nav-link" href="/about/about_careers.htm"><i class="fal fa-check"></i> Careers</a></li>
                     <li class="nav-item"><a class="nav-link" href="https://www.tutorialspoint.com/about/about_helping.htm"><i class="fal fa-check"></i> Helping</a></li>
                     <li class="nav-item"><a class="nav-link" href="#"><i class="fal fa-check"></i> Become a teacher</a></li>
                        </ul>
                    </div>

                    <!-- Link block -->
                    <div class="col-6 col-md-4">
                        <h5  class="mb-1 mb-md-3 fb">TERMS</h5>
                        <ul class="nav flex-column">
                           <li class="nav-item"><a class="nav-link" href="/about/about_terms_of_use.htm"><i class="fal fa-check"></i> Terms of use</a></li>
                        <li class="nav-item"><a class="nav-link" href="/about/about_privacy.htm"><i class="fal fa-check"></i> Privacy Policy</a></li>
                        <li class="nav-item"><a class="nav-link" href="/about/about_cookies.htm"><i class="fal fa-check"></i> Cookies Policy</a></li>
                        <li class="nav-item"><a class="nav-link" href="/about/return_refund_policy.htm"><i class="fal fa-check"></i> Refund Policy</a></li>
                        <li class="nav-item"><a class="nav-link" href="/about/faq.htm"><i class="fal fa-check"></i> FAQ</a></li>
                        </ul>
                    </div>

                    <!-- Link block -->
                    <div class="col-6 col-md-4">
                        <h5  class="mb-1 mb-md-3 fb">EXTRA LINKS</h5>
                        <ul class="nav flex-column">
                     <li class="nav-item"><a class="nav-link"  href="https://www.tutorialspoint.com/online_dev_tools.htm"><i class="fal fa-check"></i> Dev Tools</a></li>
                     <li class="nav-item"><a class="nav-link"  href="https://www.tutorialspoint.com/free_web_graphics.htm"><i class="fal fa-check"></i> Free Graphics</a></li>
                     <li class="nav-item"><a class="nav-link"  href="https://www.tutorialspoint.com/online_file_conversion.htm"><i class="fal fa-check"></i> File Conversion</a></li>
                     <li class="nav-item"><a class="nav-link"  href="https://www.tutorialspoint.com/netmeeting.php"><i class="fal fa-check"></i> NetMeeting</a></li>
                     <li class="nav-item"><a class="nav-link"  href="https://www.tutorialspoint.com/free_online_whiteboard.htm"><i class="fal fa-check"></i> Whiteboard</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- Widget 2 END -->

            <!-- Widget 3 START -->
            <div class="col-lg-3">
                <h5  class="mb-1 mb-md-3 fb">CONTACT</h5>
                <!-- Time -->
                <p class="mb-2">
                <i class="fal fa-map-marker-alt"></i> Tutorials Point India Private Limited, 4th Floor Incor9 Building, Kavuri Hills, Madhapur,  Hyderabad, Telangana - 500081, <b>INDIA</b>
                </p>
                <p class="mb-0"><span class="h6 fw-light"><a href="about/contact_us.htm" title="Contact Us" style="background-image:none !important;"><i class="fal fa-envelope"></i> Contact Us</a></span></p>
                <ul class="list-inline mb-0 mt-3">
                    <li class="list-inline-item"> <a class="btn btn-white btn-sm shadow px-2 text-facebook" rel="nofollow" href="https://www.facebook.com/tutorialspointindia" target="_blank"><i class="fab fa-fw fa-facebook fa-xl"></i></a> </li>
                    <li class="list-inline-item"> <a class="btn btn-white btn-sm shadow px-2 text-instagram" rel="nofollow" href="https://www.instagram.com/tutorialspoint_/" target="_blank"><i class="fab fa-fw fa-instagram fa-xl"></i></a> </li>
                    <li class="list-inline-item"> <a class="btn btn-white btn-sm shadow px-2 text-youtube" rel="nofollow" href="https://www.youtube.com/channel/UCVLbzhxVTiTLiVKeGV7WEBg" target="_blank"><i class="fab fa-fw fa-youtube fa-xl"></i></a> </li>
                    <li class="list-inline-item"> <a class="btn btn-white btn-sm shadow px-2 text-twitter" rel="nofollow" href="https://twitter.com/tutorialspoint" target="_blank"><i class="fab fa-fw fa-twitter fa-xl"></i></a> </li>
                    <li class="list-inline-item"><a class="btn btn-white btn-sm shadow px-2 text-linkedin" rel="nofollow" href="https://www.linkedin.com/authwall?trk=bf&trkInfo=AQEkqX2eckF__gAAAX-wMwEYvrsjBVbEtWQd4pgEdVSzkL22Nik1KEpY_ECWLKDGc41z8IOZWr2Bb0fvJplT60NPBtSw87J6QCpc7wD4qQ3iU13n6xJtBxME5o05Wmpg5JPm5YY=&originalReferer=&sessionRedirect=https%3A%2F%2Fwww.linkedin.com%2Fcompany%2Ftutorialspoint" target="_blank"><i class="fab fa-fw fa-linkedin-in fa-xl"></i></a> </li>
                </ul>
            </div>
            <!-- Widget 3 END -->
        </div><!-- Row END -->

        <!-- Divider -->
        <hr class="mt-4 mb-0">

        <!-- Bottom footer -->
        <div class="py-3">
            <div class="container px-0">
                <div class="d-md-flex justify-content-between align-items-center py-3 text-center text-md-center">
                    <!-- copyright text -->
                    <div class="text-primary-hover"> Copyrights &copy; TUTORIALS POINT (INDIA) PRIVATE LIMITED. All rights reserved. </div>
                    <!-- copyright links-->
                    <div class="mt-3 mt-md-0">
                        <ul class="list-inline mb-0">
                            <li class="list-inline-item"><a class="nav-link" href="/about/return_refund_policy.htm" ><i class="fal fa-map-marker-alt me-1"></i>Refund Policy</a></li>
                            <li class="list-inline-item"><a class="nav-link" href="/about/about_terms_of_use.htm"><i class="fal fa-file-signature me-1"></i> Terms of use</a></li>
                            <li class="list-inline-item"><a class="nav-link pe-0" href="/about/about_privacy.htm"><i class="fal fa-shield-check me-1"></i> Privacy policy</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

    </div>
</footer>
<!-- ======================= Footer END -->
<!-- Back to top -->
<div class="back-top"><i class="fa fa-angle-up position-absolute top-50 start-50 translate-middle"></i></div>
<script src="https://www.tutorialspoint.com/static/js/localization.js?v=3.2"></script>
<script src="static/vendor/tiny-slider/tiny-slider.js"></script>
<script src="static/js/functions-min.js"></script>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-EX9ZP4VY84"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-EX9ZP4VY84');
</script>
<script>
   document.getElementById('search-strings').addEventListener('keyup', function () {
      var keyword = document.getElementById('search-strings').value;
      if (keyword != "" && keyword.length > 2) {
         var formData = new FormData();
         formData.append('keyword', keyword);
         fetch("https://search.tutorialspoint.com/market_urls_suggestion.php", {
            method: "POST",
            body: formData
          })
         .then(response => {
         formData = null;
             return response.json();
          })
          .then(data => {
             if (data.length > 0) {
               var str = '<div class="search-overlay"><ul>';
               data.forEach((item) => {
                  var iconStr = '<i class="fal fa-file-pdf search-icons"></i>';
                  if( item.type === "V" ){
                      iconStr = '<i class="fal fa-play-circle search-icons"></i>';
                  }
                  str = str + '<a href="'+item.url+'" target="_blank"><li class="clsHeadQuestion">'+iconStr+' '+item.name+'</li></a>';
               });
               str = str + '</ul><br/></div><div class="clear"></div>';
               document.getElementById('search-results').style.display = 'block';
               document.getElementById('search-results').innerHTML = str;
            } else {
               document.getElementById('search-results').style.display = 'none';
               document.getElementById('search-results').innerHTML = "";
            }
          })
          .catch((error) => {
             console.log( error );
             alert(error);
             return false;
          });
      }else{
         document.getElementById('search-results').style.display = 'none';
         document.getElementById('search-results').innerHTML = "";
      }
   });
   document.getElementById('btnSearch').addEventListener('click', function () {
      var keyword = document.getElementById('search-strings').value;
      window.location.href = "https://www.tutorialspoint.com/search/"+keyword;
   });
   document.getElementById('search-strings').addEventListener("keypress", function(event) {
     if (event.key === "Enter") {
       event.preventDefault();
       var keyword = document.getElementById('search-strings').value;
       window.location.href = "https://www.tutorialspoint.com/search/"+keyword;
     }
   });
   document.addEventListener('mouseup', function (e) {
      var container = document.getElementById('search-strings');
      /*
      if (!container.is(e.target) && container.has(e.target).length === 0){
         container.style.display = 'none';
      }
      */
   });
   document.getElementById("categoryMenu").addEventListener('click', function(){
         if( document.getElementById("categories-menu").style.display === "block" ){
            document.getElementById("categories-menu").style.display = "none";
          }else{
            document.getElementById("categories-menu").style.display = "block";
          }
   });
   document.getElementById("btn-menu-collapse").addEventListener('click', function(){
          document.getElementById("categories-menu").style.display = "none";
         if( document.getElementById("navbarCollapse").style.display === "block" ){
            document.getElementById("navbarCollapse").style.display = "none";
          }else{
            document.getElementById("navbarCollapse").style.display = "block";
          }
   });
   window.addEventListener("click", function(e){
         if(!e.target.closest("#categoryMenu")){
             document.getElementById("categories-menu").style.display = "none";
         }
   });
</script>
</body>
</html>

Double Click: 双击

CTRL + W: CTRL+W

In complex scenarios, it will take more time.

Thank you for your efforts.

IntelliJ IDEA 2023.1.3 (Community Edition) Build #IC-231.9161.38, built on June 20, 2023

WebCalm Version: 0.9

ris58h commented 1 year ago

Thank you for the details. I'll investigate it.

ris58h commented 1 year ago

There is a performance issue with default word selection. I didn't measured it but it seems like it's SelectWordUtil.getWordOrLexemeSelectionRange: it calls EditorActionUtil.isLexemeBoundary in a cycle. Every EditorActionUtil.isLexemeBoundary does lexing from scratch: creates lexer, iterates over it and so on:

doSetText:429, LexerEditorHighlighter (com.intellij.openapi.editor.ex.util)
setText:418, LexerEditorHighlighter (com.intellij.openapi.editor.ex.util)
getHighlighter:344, EditorWindowTrackerImpl$EditorWindowImpl (com.intellij.psi.impl.source.tree.injected)
isLexemeBoundary:372, EditorActionUtil (com.intellij.openapi.editor.actions)
getWordOrLexemeSelectionRange:130, SelectWordUtil (com.intellij.codeInsight.editorActions)
getWordOrLexemeSelectionRange:105, SelectWordUtil (com.intellij.codeInsight.editorActions)
addWordOrLexemeSelection:65, SelectWordUtil (com.intellij.codeInsight.editorActions)
addWordOrLexemeSelection:35, SelectWordUtil (com.intellij.codeInsight.editorActions)
select:33, AbstractWordSelectioner (com.intellij.codeInsight.editorActions.wordSelection)
askSelectioner:235, SelectWordUtil (com.intellij.codeInsight.editorActions)
processElement:214, SelectWordUtil (com.intellij.codeInsight.editorActions)
lambda$processInFile$1:189, SelectWordUtil (com.intellij.codeInsight.editorActions)
run:-1, 1406734228 (com.intellij.codeInsight.editorActions.SelectWordUtil$$Lambda$3373)
withAlternativeResolveEnabled:337, DumbService (com.intellij.openapi.project)
processInFile:186, SelectWordUtil (com.intellij.codeInsight.editorActions)
processRanges:156, SelectWordUtil (com.intellij.codeInsight.editorActions)
doSelectWord:176, SelectWordHandler (com.intellij.codeInsight.editorActions)
lambda$selectWord$0:94, SelectWordHandler (com.intellij.codeInsight.editorActions)
compute:-1, 1292838883 (com.intellij.codeInsight.editorActions.SelectWordHandler$$Lambda$3370)
runReadAction:889, ApplicationImpl (com.intellij.openapi.application.impl)
compute:61, ReadAction (com.intellij.openapi.application)
lambda$selectWord$1:93, SelectWordHandler (com.intellij.codeInsight.editorActions)
compute:-1, 2046357531 (com.intellij.codeInsight.editorActions.SelectWordHandler$$Lambda$3365)
run:275, CoreProgressManager$1 (com.intellij.openapi.progress.impl)
run:962, CoreProgressManager$TaskRunnable (com.intellij.openapi.progress.impl)
run:520, CoreProgressManager$4 (com.intellij.openapi.progress.impl)
lambda$new$0:79, ProgressRunner (com.intellij.openapi.progress.impl)
apply:-1, 1855941363 (com.intellij.openapi.progress.impl.ProgressRunner$$Lambda$633)
lambda$submit$3:235, ProgressRunner (com.intellij.openapi.progress.impl)
run:-1, 2031947007 (com.intellij.openapi.progress.impl.ProgressRunner$$Lambda$667)
lambda$runProcess$2:178, CoreProgressManager (com.intellij.openapi.progress.impl)
run:-1, 1068863476 (com.intellij.openapi.progress.impl.CoreProgressManager$$Lambda$363)
registerIndicatorAndRun:658, CoreProgressManager (com.intellij.openapi.progress.impl)
executeProcessUnderProgress:610, CoreProgressManager (com.intellij.openapi.progress.impl)
executeProcessUnderProgress:65, ProgressManagerImpl (com.intellij.openapi.progress.impl)
runProcess:165, CoreProgressManager (com.intellij.openapi.progress.impl)
lambda$submit$4:235, ProgressRunner (com.intellij.openapi.progress.impl)
get:-1, 1555174106 (com.intellij.openapi.progress.impl.ProgressRunner$$Lambda$635)
run:1700, CompletableFuture$AsyncSupply (java.util.concurrent)
runWorker:1128, ThreadPoolExecutor (java.util.concurrent)
run:628, ThreadPoolExecutor$Worker (java.util.concurrent)
run:668, Executors$PrivilegedThreadFactory$1$1 (java.util.concurrent)
run:665, Executors$PrivilegedThreadFactory$1$1 (java.util.concurrent)
doPrivileged:-1, AccessController (java.security)
run:665, Executors$PrivilegedThreadFactory$1 (java.util.concurrent)
run:834, Thread (java.lang)

I'm not sure what we can do with it to reduce the selection time. Default word selection behavior is OK but performance is not.

UPDATE: If we put injected JS code in a separate .js file the performance is OK so it's an issue with an injected code.

ris58h commented 1 year ago

@PassingByThs could you confirm that it's an issue with injected (JS in HTML) code? Does the same JS code but in separate .js file work fine for you?

PassingByThs commented 1 year ago

In the scenario I encountered, it seems like that this issue only occurs in injected (JS in HTML) code. It works fine in separate .js file.

ris58h commented 1 year ago

EditorActionUtil.isLexemeBoundary calls EditorEx.getHighlighter which implementation is different for regular (EditorImpl) and injected (EditorWindowTrackerImpl.EditorWindowImpl) code. First one reuses the the highlighter, second one creates new highlighter on every call.

But word selection for an injected Java code works fine even with the same behavior. Further investigation is required.

ris58h commented 1 year ago

I've reported it to JetBrains https://youtrack.jetbrains.com/issue/IDEA-324821

PassingByThs commented 11 months ago

Is there another way to avoid this prompt? Or is it possible to provide some configuration switches to avoid this prompt by disabling certain features?

ris58h commented 11 months ago

@PassingByThs I don't think so. The prompt is just a progress-bar for Word Selection action. The action takes too much time so the prompt is visible. All we can do is just to wait until it will be fixed from JetBrains side.