Declares the document type — HTML5
DOCTYPE
Root element
My Page
Metadata block
Hello World
This is a paragraph.
Click here
Visible content
Every HTML page must have: DOCTYPE → html → head → body
: Must be the very first line. Tells the browser this is an HTML5 document. Not an HTML tag — it is a declaration.
: The root element — wraps all page content. lang="en" attribute helps search engines and screen readers know the page language.
: Contains metadata — information about the page not shown directly. Includes: , <meta>, <link>, <style>, .</span></p>
<p style="text-align: justify;"><span style="font-weight:500"><strong><body>:</strong> Contains all visible page content — headings, paragraphs, images, links, tables, forms, etc. Everything users see and interact with.</span></p>
</div>
</div>
<div class="blogRedesign_titlesInfo___vhVU">
<h2 class="blogRedesign_headingTwo__LbiQr"><span style="font-family: Arial; color: #123897; font-size: 20px;">HTML Tags, Elements and Attributes</span></h2>
</div>
<div class="blogRedesign_blogBody__gglj9">
<div class="blogRedesign_contentBlock__seRyD" style="word-wrap:break-word">
<!-- SVG: Tag anatomy -->
<div style="margin: 20px 0;">
<svg width="100%" viewBox="0 0 680 210" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="arrtag" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
<path d="M2 1L8 5L2 9" fill="none" stroke="#E44D26" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</marker>
</defs>
<!-- Full element display -->
<rect x="30" y="20" width="620" height="60" rx="8" fill="#1E3A5F"></rect>
<text x="340" y="56" text-anchor="middle" font-family="monospace" font-size="20" font-weight="700" fill="#ffffff"><a href="https://example.com"> Click Here </a></text>
<!-- Labels with arrows -->
<!-- Opening tag -->
<line x1="75" y1="80" x2="75" y2="108" stroke="#4F46E5" stroke-width="1.5" marker-end="url(#arrtag)"></line>
<rect x="20" y="110" width="110" height="38" rx="6" fill="#EEF2FF" stroke="#4F46E5" stroke-width="1.5"></rect>
<text x="75" y="126" text-anchor="middle" font-family="Arial" font-size="11" font-weight="700" fill="#3730A3">Opening Tag</text>
<text x="75" y="141" text-anchor="middle" font-family="monospace" font-size="10" fill="#374151"><a></text>
<!-- Attribute name -->
<line x1="178" y1="80" x2="178" y2="108" stroke="#16A34A" stroke-width="1.5" marker-end="url(#arrtag)"></line>
<rect x="135" y="110" width="90" height="38" rx="6" fill="#DCFCE7" stroke="#16A34A" stroke-width="1.5"></rect>
<text x="180" y="126" text-anchor="middle" font-family="Arial" font-size="11" font-weight="700" fill="#166534">Attribute</text>
<text x="180" y="141" text-anchor="middle" font-family="monospace" font-size="10" fill="#374151">href</text>
<!-- Attribute value -->
<line x1="290" y1="80" x2="290" y2="108" stroke="#CA8A04" stroke-width="1.5" marker-end="url(#arrtag)"></line>
<rect x="240" y="110" width="100" height="38" rx="6" fill="#FEF9C3" stroke="#CA8A04" stroke-width="1.5"></rect>
<text x="290" y="126" text-anchor="middle" font-family="Arial" font-size="11" font-weight="700" fill="#92400E">Attr Value</text>
<text x="290" y="141" text-anchor="middle" font-family="monospace" font-size="9" fill="#374151">"https://..."</text>
<!-- Content -->
<line x1="430" y1="80" x2="430" y2="108" stroke="#DC2626" stroke-width="1.5" marker-end="url(#arrtag)"></line>
<rect x="370" y="110" width="120" height="38" rx="6" fill="#FEE2E2" stroke="#DC2626" stroke-width="1.5"></rect>
<text x="430" y="126" text-anchor="middle" font-family="Arial" font-size="11" font-weight="700" fill="#991B1B">Content</text>
<text x="430" y="141" text-anchor="middle" font-family="monospace" font-size="10" fill="#374151">Click Here</text>
<!-- Closing tag -->
<line x1="590" y1="80" x2="590" y2="108" stroke="#7C3AED" stroke-width="1.5" marker-end="url(#arrtag)"></line>
<rect x="520" y="110" width="130" height="38" rx="6" fill="#F3E8FF" stroke="#7C3AED" stroke-width="1.5"></rect>
<text x="585" y="126" text-anchor="middle" font-family="Arial" font-size="11" font-weight="700" fill="#5B21B6">Closing Tag</text>
<text x="585" y="141" text-anchor="middle" font-family="monospace" font-size="10" fill="#374151"></a></text>
<!-- Bottom labels -->
<rect x="30" y="163" width="620" height="38" rx="6" fill="#F8FAFC" stroke="#CBD5E1" stroke-width="1"></rect>
<text x="50" y="179" font-family="Arial" font-size="11" fill="#374151"><tspan font-weight="700">Element</tspan> = Opening tag + Content + Closing tag</text>
<text x="50" y="195" font-family="Arial" font-size="11" fill="#374151"><tspan font-weight="700">Self-closing tags</tspan> (void elements): <br> <hr> <img> <input> <meta> <link> — no closing tag needed</text>
</svg>
</div>
<p style="text-align: justify;"><span style="font-weight:500"><strong>Tag:</strong> Keywords surrounded by angle brackets < >. Tags usually come in pairs — opening <p> and closing </p>. The closing tag has a forward slash before the tag name.</span></p>
<p style="text-align: justify;"><span style="font-weight:500"><strong>Element:</strong> Everything from the opening tag to the closing tag, including the content in between. <p>Hello</p> is a paragraph element.</span></p>
<p style="text-align: justify;"><span style="font-weight:500"><strong>Attribute:</strong> Extra information added to tags. Always in the opening tag. Written as name="value". Common attributes: id, class, href, src, alt, style, type, name, placeholder, required, disabled.</span></p>
<p style="text-align: justify;"><span style="font-weight:500"><strong>Global Attributes (work on any element):</strong> id (unique identifier), class (CSS class), style (inline CSS), title (tooltip text), lang (language), hidden, tabindex, contenteditable, data-* (custom data attributes).</span></p>
</div>
</div>
<!-- HTML Headings and Paragraphs -->
<div class="blogRedesign_titlesInfo___vhVU">
<h2 class="blogRedesign_headingTwo__LbiQr"><span style="font-family: Arial; color: #123897; font-size: 22px;">HTML Headings, Paragraphs and Text</span></h2>
<h3 style="color: rgb(30, 41, 59); font-family: Inter, sans-serif; font-size: 18px;">Headings, Paragraphs, Formatting Tags</h3>
</div>
<div class="blogRedesign_blogBody__gglj9">
<div class="blogRedesign_contentBlock__seRyD" style="word-wrap:break-word">
<!-- SVG: Headings visual -->
<div style="margin: 20px 0;">
<svg width="100%" viewBox="0 0 680 290" xmlns="http://www.w3.org/2000/svg">
<!-- Headings column -->
<rect x="20" y="15" width="300" height="260" rx="10" fill="#F8FAFC" stroke="#E44D26" stroke-width="1.5"></rect>
<rect x="20" y="15" width="300" height="34" rx="10" fill="#E44D26"></rect>
<rect x="20" y="36" width="300" height="13" fill="#E44D26"></rect>
<text x="170" y="37" text-anchor="middle" font-family="Arial" font-size="13" font-weight="700" fill="#fff">HTML Headings (h1–h6)</text>
<text x="40" y="72" font-family="Arial" font-size="22" font-weight="700" fill="#1E3A5F"><h1> Heading 1</text>
<text x="40" y="100" font-family="Arial" font-size="18" font-weight="700" fill="#123897"><h2> Heading 2</text>
<text x="40" y="124" font-family="Arial" font-size="15" font-weight="700" fill="#1D4ED8"><h3> Heading 3</text>
<text x="40" y="146" font-family="Arial" font-size="13" font-weight="700" fill="#374151"><h4> Heading 4</text>
<text x="40" y="165" font-family="Arial" font-size="12" font-weight="700" fill="#6B7280"><h5> Heading 5</text>
<text x="40" y="182" font-family="Arial" font-size="11" font-weight="700" fill="#9CA3AF"><h6> Heading 6</text>
<line x1="30" y1="192" x2="310" y2="192" stroke="#CBD5E1" stroke-width="1"></line>
<text x="40" y="210" font-family="Arial" font-size="11" fill="#374151">h1 = largest, most important</text>
<text x="40" y="226" font-family="Arial" font-size="11" fill="#374151">h6 = smallest, least important</text>
<text x="40" y="242" font-family="Arial" font-size="11" fill="#374151">Only one <h1> per page (SEO)</text>
<text x="40" y="258" font-family="Arial" font-size="11" fill="#374151">Use headings in order (h1→h2→h3)</text>
<!-- Text formatting column -->
<rect x="350" y="15" width="310" height="260" rx="10" fill="#F8FAFC" stroke="#4F46E5" stroke-width="1.5"></rect>
<rect x="350" y="15" width="310" height="34" rx="10" fill="#4F46E5"></rect>
<rect x="350" y="36" width="310" height="13" fill="#4F46E5"></rect>
<text x="505" y="37" text-anchor="middle" font-family="Arial" font-size="13" font-weight="700" fill="#fff">Text Formatting Tags</text>
<text x="370" y="68" font-family="Arial" font-size="12" fill="#374151"><b> <tspan font-weight="700">Bold text</tspan> </b></text>
<text x="370" y="88" font-family="Arial" font-size="12" fill="#374151"><strong> <tspan font-weight="700">Important bold</tspan> </strong></text>
<text x="370" y="108" font-family="Arial" font-size="12" fill="#374151"><i> <tspan font-style="italic">Italic text</tspan> </i></text>
<text x="370" y="128" font-family="Arial" font-size="12" fill="#374151"><em> <tspan font-style="italic">Emphasized</tspan> </em></text>
<text x="370" y="148" font-family="Arial" font-size="12" fill="#374151"><u> <tspan text-decoration="underline">Underlined</tspan> </u></text>
<text x="370" y="168" font-family="Arial" font-size="12" fill="#374151"><mark> <tspan fill="#92400E" style="background:#FEF9C3">Highlighted</tspan> </mark></text>
<text x="370" y="188" font-family="Arial" font-size="12" fill="#374151"><small> <tspan font-size="10">Small text</tspan> </small></text>
<text x="370" y="208" font-family="Arial" font-size="12" fill="#374151"><del> Deleted text </del></text>
<text x="370" y="228" font-family="monospace" font-size="11" fill="#374151"><code> inline code </code></text>
<text x="370" y="248" font-family="Arial" font-size="12" fill="#374151"><br> — Line break (self-closing)</text>
<text x="370" y="268" font-family="Arial" font-size="12" fill="#374151"><hr> — Horizontal rule line</text>
</svg>
</div>
<p style="text-align: justify;"><span style="font-weight:500"><strong><p>:</strong> Defines a paragraph. Browsers automatically add space before and after paragraphs. <p>This is a paragraph.</p></span></p>
<p style="text-align: justify;"><span style="font-weight:500"><strong><pre>:</strong> Preformatted text — preserves spaces and line breaks exactly as written. Used for code blocks and ASCII art.</span></p>
<p style="text-align: justify;"><span style="font-weight:500"><strong><blockquote>:</strong> Indented block quotation. cite attribute points to source URL. <q> is for inline short quotations.</span></p>
<p style="text-align: justify;"><span style="font-weight:500"><strong><abbr>:</strong> Abbreviation with tooltip. <abbr title="HyperText Markup Language">HTML</abbr> — hovering shows the full form.</span></p>
<p style="text-align: justify;"><span style="font-weight:500"><strong><sup> and <sub>:</strong> Superscript (x<sup>2</sup> → x²) and Subscript (H<sub>2</sub>O → H₂O).</span></p>
</div>
</div>
<!-- HTML Links -->
<div class="blogRedesign_titlesInfo___vhVU">
<h2 class="blogRedesign_headingTwo__LbiQr"><span style="font-family: Arial; color: #123897; font-size: 22px;">HTML Links</span></h2>
<h3 style="color: rgb(30, 41, 59); font-family: Inter, sans-serif; font-size: 18px;">What are Hyperlinks in HTML?</h3>
</div>
<div class="blogRedesign_blogBody__gglj9">
<div class="blogRedesign_contentBlock__seRyD" style="word-wrap:break-word">
<p style="text-align: justify;"><span style="font-weight:500">Links (hyperlinks) are created using the <a> (anchor) tag. They connect web pages and resources together — they are the fundamental navigation mechanism of the web. The href attribute specifies the destination URL.</span></p>
<!-- SVG: Link types -->
<div style="margin: 20px 0;">
<svg width="100%" viewBox="0 0 680 260" xmlns="http://www.w3.org/2000/svg">
<!-- Absolute URL -->
<rect x="20" y="15" width="300" height="110" rx="8" fill="#EEF2FF" stroke="#4F46E5" stroke-width="1.5"></rect>
<rect x="20" y="15" width="300" height="32" rx="8" fill="#4F46E5"></rect>
<rect x="20" y="34" width="300" height="13" fill="#4F46E5"></rect>
<text x="170" y="35" text-anchor="middle" font-family="Arial" font-size="12" font-weight="700" fill="#fff">Absolute URL</text>
<text x="40" y="66" font-family="monospace" font-size="10" fill="#3730A3"><a href="https://google.com"></text>
<text x="40" y="81" font-family="monospace" font-size="10" fill="#374151"> Google</a></text>
<text x="40" y="98" font-family="Arial" font-size="11" fill="#374151">Full URL — links to external site</text>
<text x="40" y="114" font-family="Arial" font-size="11" fill="#374151">Must include https:// or http://</text>
<!-- Relative URL -->
<rect x="360" y="15" width="300" height="110" rx="8" fill="#DCFCE7" stroke="#16A34A" stroke-width="1.5"></rect>
<rect x="360" y="15" width="300" height="32" rx="8" fill="#16A34A"></rect>
<rect x="360" y="34" width="300" height="13" fill="#16A34A"></rect>
<text x="510" y="35" text-anchor="middle" font-family="Arial" font-size="12" font-weight="700" fill="#fff">Relative URL</text>
<text x="380" y="66" font-family="monospace" font-size="10" fill="#166534"><a href="about.html">About</a></text>
<text x="380" y="81" font-family="monospace" font-size="10" fill="#374151"><a href="../index.html">Home</a></text>
<text x="380" y="98" font-family="Arial" font-size="11" fill="#374151">Links within same website</text>
<text x="380" y="114" font-family="Arial" font-size="11" fill="#374151">Relative to current file location</text>
<!-- Target attribute -->
<rect x="20" y="140" width="300" height="110" rx="8" fill="#FEF9C3" stroke="#CA8A04" stroke-width="1.5"></rect>
<rect x="20" y="140" width="300" height="32" rx="8" fill="#CA8A04"></rect>
<rect x="20" y="159" width="300" height="13" fill="#CA8A04"></rect>
<text x="170" y="160" text-anchor="middle" font-family="Arial" font-size="12" font-weight="700" fill="#fff">target Attribute</text>
<text x="40" y="188" font-family="monospace" font-size="10" fill="#92400E">target="_blank" — new tab</text>
<text x="40" y="203" font-family="monospace" font-size="10" fill="#374151">target="_self" — same tab (default)</text>
<text x="40" y="218" font-family="monospace" font-size="10" fill="#374151">target="_parent" — parent frame</text>
<text x="40" y="233" font-family="monospace" font-size="10" fill="#374151">target="_top" — full browser</text>
<!-- Special links -->
<rect x="360" y="140" width="300" height="110" rx="8" fill="#FEE2E2" stroke="#DC2626" stroke-width="1.5"></rect>
<rect x="360" y="140" width="300" height="32" rx="8" fill="#DC2626"></rect>
<rect x="360" y="159" width="300" height="13" fill="#DC2626"></rect>
<text x="510" y="160" text-anchor="middle" font-family="Arial" font-size="12" font-weight="700" fill="#fff">Special Links</text>
<text x="380" y="188" font-family="monospace" font-size="10" fill="#991B1B">href="mailto:you@email.com"</text>
<text x="380" y="203" font-family="monospace" font-size="10" fill="#374151">href="tel:+919876543210"</text>
<text x="380" y="218" font-family="monospace" font-size="10" fill="#374151">href="#section1" ← anchor/jump</text>
<text x="380" y="233" font-family="monospace" font-size="10" fill="#374151">href="file.pdf" ← download link</text>
</svg>
</div>
<p style="text-align: justify;"><span style="font-weight:500"><strong>download attribute:</strong> <a href="report.pdf" download>Download PDF</a> — forces file download instead of opening in browser. Can specify filename: download="my-report.pdf".</span></p>
<p style="text-align: justify;"><span style="font-weight:500"><strong>Anchor links (jump links):</strong> Link to a section on the same page using id. <a href="#contact">Go to Contact</a> jumps to <section id="contact">. href="#" scrolls to top of page.</span></p>
<p style="text-align: justify;"><span style="font-weight:500"><strong>rel attribute:</strong> rel="noopener noreferrer" — security best practice for target="_blank" links. rel="nofollow" tells search engines not to follow the link. rel="canonical" prevents duplicate content issues.</span></p>
</div>
</div>
<!-- HTML Images -->
<div class="blogRedesign_titlesInfo___vhVU">
<h2 class="blogRedesign_headingTwo__LbiQr"><span style="font-family: Arial; color: #123897; font-size: 22px;">HTML Images</span></h2>
<h3 style="color: rgb(30, 41, 59); font-family: Inter, sans-serif; font-size: 18px;">Embedding Images in HTML</h3>
</div>
<div class="blogRedesign_blogBody__gglj9">
<div class="blogRedesign_contentBlock__seRyD" style="word-wrap:break-word">
<p style="text-align: justify;"><span style="font-weight:500">Images are embedded using the self-closing <img> tag. It has no closing tag. The src attribute is required (image path) and alt is required for accessibility (describes image to screen readers and shows when image fails to load).</span></p>
<p style="text-align: justify;"><span style="font-weight:500"><strong>Basic syntax:</strong> <img src="photo.jpg" alt="A beautiful sunset" width="400" height="300"></span></p>
<p style="text-align: justify;"><span style="font-weight:500"><strong>Image attributes:</strong> src (path/URL), alt (alternate text — required!), width and height (in pixels or %), loading="lazy" (defers loading until near viewport — improves performance), title (tooltip on hover), srcset (responsive images for different screen sizes).</span></p>
<p style="text-align: justify;"><span style="font-weight:500"><strong>Image formats:</strong> JPEG/JPG — photographs, complex images. PNG — transparency support, logos, icons. GIF — simple animations. SVG — scalable vector graphics, logos. WebP — modern format, smaller file size with better quality than JPEG/PNG. AVIF — newest, best compression.</span></p>
<p style="text-align: justify;"><span style="font-weight:500"><strong><figure> and <figcaption>:</strong> Semantic way to add a caption to an image. <figure><img src="chart.png" alt="Sales Chart"><figcaption>Q3 Sales Data</figcaption></figure></span></p>
<p style="text-align: justify;"><span style="font-weight:500"><strong>Responsive images with <picture>:</strong> <picture><source media="(max-width:600px)" srcset="small.jpg"><img src="large.jpg" alt="..."></picture> — serves different images based on screen size.</span></p>
<p style="text-align: justify;"><span style="font-weight:500"><strong>Image as a link:</strong> Wrap <img> inside <a> tag: <a href="page.html"><img src="banner.jpg" alt="Click me"></a></span></p>
</div>
</div>
<!-- HTML Lists -->
<div class="blogRedesign_titlesInfo___vhVU">
<h2 class="blogRedesign_headingTwo__LbiQr"><span style="font-family: Arial; color: #123897; font-size: 22px;">HTML Lists</span></h2>
<h3 style="color: rgb(30, 41, 59); font-family: Inter, sans-serif; font-size: 18px;">Ordered, Unordered and Description Lists</h3>
</div>
<div class="blogRedesign_blogBody__gglj9">
<div class="blogRedesign_contentBlock__seRyD" style="word-wrap:break-word">
<!-- SVG: List types -->
<div style="margin: 20px 0;">
<svg width="100%" viewBox="0 0 680 250" xmlns="http://www.w3.org/2000/svg">
<!-- Unordered List -->
<rect x="20" y="15" width="190" height="220" rx="8" fill="#EEF2FF" stroke="#4F46E5" stroke-width="1.5"></rect>
<rect x="20" y="15" width="190" height="32" rx="8" fill="#4F46E5"></rect>
<rect x="20" y="34" width="190" height="13" fill="#4F46E5"></rect>
<text x="115" y="35" text-anchor="middle" font-family="Arial" font-size="12" font-weight="700" fill="#fff">Unordered List <ul></text>
<text x="40" y="64" font-family="monospace" font-size="10" fill="#3730A3"><ul></text>
<text x="50" y="80" font-family="monospace" font-size="10" fill="#374151"> <li>Apple</li></text>
<text x="50" y="96" font-family="monospace" font-size="10" fill="#374151"> <li>Banana</li></text>
<text x="50" y="112" font-family="monospace" font-size="10" fill="#374151"> <li>Cherry</li></text>
<text x="40" y="128" font-family="monospace" font-size="10" fill="#3730A3"></ul></text>
<line x1="30" y1="138" x2="200" y2="138" stroke="#CBD5E1" stroke-width="1"></line>
<text x="40" y="156" font-family="Arial" font-size="11" fill="#374151">● Apple</text>
<text x="40" y="172" font-family="Arial" font-size="11" fill="#374151">● Banana</text>
<text x="40" y="188" font-family="Arial" font-size="11" fill="#374151">● Cherry</text>
<text x="40" y="210" font-family="Arial" font-size="10" fill="#6B7280">type: disc, circle, square</text>
<text x="40" y="226" font-family="Arial" font-size="10" fill="#6B7280">(via CSS list-style-type)</text>
<!-- Ordered List -->
<rect x="245" y="15" width="190" height="220" rx="8" fill="#DCFCE7" stroke="#16A34A" stroke-width="1.5"></rect>
<rect x="245" y="15" width="190" height="32" rx="8" fill="#16A34A"></rect>
<rect x="245" y="34" width="190" height="13" fill="#16A34A"></rect>
<text x="340" y="35" text-anchor="middle" font-family="Arial" font-size="12" font-weight="700" fill="#fff">Ordered List <ol></text>
<text x="265" y="64" font-family="monospace" font-size="10" fill="#166534"><ol type="1" start="1"></text>
<text x="275" y="80" font-family="monospace" font-size="10" fill="#374151"> <li>First step</li></text>
<text x="275" y="96" font-family="monospace" font-size="10" fill="#374151"> <li>Second step</li></text>
<text x="275" y="112" font-family="monospace" font-size="10" fill="#374151"> <li>Third step</li></text>
<text x="265" y="128" font-family="monospace" font-size="10" fill="#166534"></ol></text>
<line x1="255" y1="138" x2="425" y2="138" stroke="#CBD5E1" stroke-width="1"></line>
<text x="265" y="156" font-family="Arial" font-size="11" fill="#374151">1. First step</text>
<text x="265" y="172" font-family="Arial" font-size="11" fill="#374151">2. Second step</text>
<text x="265" y="188" font-family="Arial" font-size="11" fill="#374151">3. Third step</text>
<text x="265" y="210" font-family="Arial" font-size="10" fill="#6B7280">type: 1, A, a, I, i</text>
<text x="265" y="226" font-family="Arial" font-size="10" fill="#6B7280">start="5" begins at 5</text>
<!-- Description List -->
<rect x="470" y="15" width="190" height="220" rx="8" fill="#FEF9C3" stroke="#CA8A04" stroke-width="1.5"></rect>
<rect x="470" y="15" width="190" height="32" rx="8" fill="#CA8A04"></rect>
<rect x="470" y="34" width="190" height="13" fill="#CA8A04"></rect>
<text x="565" y="35" text-anchor="middle" font-family="Arial" font-size="12" font-weight="700" fill="#fff">Description List <dl></text>
<text x="490" y="64" font-family="monospace" font-size="10" fill="#92400E"><dl></text>
<text x="500" y="80" font-family="monospace" font-size="10" fill="#374151"> <dt>HTML</dt></text>
<text x="500" y="96" font-family="monospace" font-size="10" fill="#374151"> <dd>Markup lang</dd></text>
<text x="500" y="112" font-family="monospace" font-size="10" fill="#374151"> <dt>CSS</dt></text>
<text x="500" y="128" font-family="monospace" font-size="10" fill="#374151"> <dd>Styling lang</dd></text>
<text x="490" y="144" font-family="monospace" font-size="10" fill="#92400E"></dl></text>
<line x1="480" y1="152" x2="650" y2="152" stroke="#CBD5E1" stroke-width="1"></line>
<text x="490" y="168" font-family="Arial" font-size="11" font-weight="700" fill="#374151">HTML</text>
<text x="510" y="183" font-family="Arial" font-size="11" fill="#6B7280">Markup language</text>
<text x="490" y="198" font-family="Arial" font-size="11" font-weight="700" fill="#374151">CSS</text>
<text x="510" y="213" font-family="Arial" font-size="11" fill="#6B7280">Styling language</text>
<text x="490" y="232" font-family="Arial" font-size="10" fill="#6B7280">dt=term, dd=definition</text>
</svg>
</div>
<p style="text-align: justify;"><span style="font-weight:500"><strong>Nested lists:</strong> Lists can be nested inside each other. Place a <ul> or <ol> inside an <li> to create a sub-list. Nested lists are indented further automatically by browsers.</span></p>
<p style="text-align: justify;"><span style="font-weight:500"><strong>Navigation menus:</strong> <ul> and <li> are the standard HTML structure for navigation menus. Styled with CSS to appear horizontal or as dropdowns. Always wrap nav links in <nav><ul>...</ul></nav> for semantic HTML.</span></p>
</div>
</div>
<!-- HTML Tables -->
<div class="blogRedesign_titlesInfo___vhVU">
<h2 class="blogRedesign_headingTwo__LbiQr"><span style="font-family: Arial; color: #123897; font-size: 22px;">HTML Tables</span></h2>
<h3 style="color: rgb(30, 41, 59); font-family: Inter, sans-serif; font-size: 18px;">Creating Tables in HTML</h3>
</div>
<div class="blogRedesign_blogBody__gglj9">
<div class="blogRedesign_contentBlock__seRyD" style="word-wrap:break-word">
<p style="text-align: justify;"><span style="font-weight:500">HTML tables display tabular data in rows and columns. Tables are built using <table>, <tr> (table row), <th> (table header cell), and <td> (table data cell). Tables should only be used for tabular data — not for page layout (use CSS Grid/Flexbox for layout).</span></p>
<!-- SVG: Table structure diagram -->
<div style="margin: 20px 0;">
<svg width="100%" viewBox="0 0 680 280" xmlns="http://www.w3.org/2000/svg">
<!-- Table code side -->
<rect x="20" y="15" width="290" height="255" rx="8" fill="#F8FAFC" stroke="#E44D26" stroke-width="1.5"></rect>
<rect x="20" y="15" width="290" height="32" rx="8" fill="#E44D26"></rect>
<rect x="20" y="34" width="290" height="13" fill="#E44D26"></rect>
<text x="165" y="35" text-anchor="middle" font-family="Arial" font-size="12" font-weight="700" fill="#fff">HTML Table Code</text>
<text x="35" y="62" font-family="monospace" font-size="10" fill="#374151"><table border="1"></text>
<text x="35" y="78" font-family="monospace" font-size="10" fill="#0369A1"> <thead></text>
<text x="35" y="93" font-family="monospace" font-size="10" fill="#374151"> <tr></text>
<text x="35" y="108" font-family="monospace" font-size="10" fill="#991B1B"> <th>Name</th></text>
<text x="35" y="123" font-family="monospace" font-size="10" fill="#991B1B"> <th>Age</th></text>
<text x="35" y="138" font-family="monospace" font-size="10" fill="#374151"> </tr></text>
<text x="35" y="153" font-family="monospace" font-size="10" fill="#0369A1"> </thead></text>
<text x="35" y="168" font-family="monospace" font-size="10" fill="#166534"> <tbody></text>
<text x="35" y="183" font-family="monospace" font-size="10" fill="#374151"> <tr></text>
<text x="35" y="198" font-family="monospace" font-size="10" fill="#374151"> <td>Alice</td></text>
<text x="35" y="213" font-family="monospace" font-size="10" fill="#374151"> <td>25</td></text>
<text x="35" y="228" font-family="monospace" font-size="10" fill="#374151"> </tr></text>
<text x="35" y="243" font-family="monospace" font-size="10" fill="#166534"> </tbody></text>
<text x="35" y="258" font-family="monospace" font-size="10" fill="#374151"></table></text>
<!-- Rendered table side -->
<rect x="340" y="15" width="320" height="255" rx="8" fill="#F0F9FF" stroke="#0369A1" stroke-width="1.5"></rect>
<rect x="340" y="15" width="320" height="32" rx="8" fill="#0369A1"></rect>
<rect x="340" y="34" width="320" height="13" fill="#0369A1"></rect>
<text x="500" y="35" text-anchor="middle" font-family="Arial" font-size="12" font-weight="700" fill="#fff">Rendered Table</text>
<!-- Table header row -->
<rect x="360" y="58" width="140" height="36" rx="0" fill="#1E3A5F"></rect>
<rect x="500" y="58" width="140" height="36" rx="0" fill="#1E3A5F"></rect>
<text x="430" y="81" text-anchor="middle" font-family="Arial" font-size="13" font-weight="700" fill="#FFD43B">Name</text>
<text x="570" y="81" text-anchor="middle" font-family="Arial" font-size="13" font-weight="700" fill="#FFD43B">Age</text>
<!-- Row 1 -->
<rect x="360" y="94" width="140" height="34" rx="0" fill="#EEF2FF"></rect>
<rect x="500" y="94" width="140" height="34" rx="0" fill="#EEF2FF"></rect>
<rect x="360" y="93" width="280" height="1" fill="#CBD5E1"></rect>
<text x="430" y="116" text-anchor="middle" font-family="Arial" font-size="13" fill="#374151">Alice</text>
<text x="570" y="116" text-anchor="middle" font-family="Arial" font-size="13" fill="#374151">25</text>
<!-- Row 2 -->
<rect x="360" y="128" width="140" height="34" rx="0" fill="#F8FAFC"></rect>
<rect x="500" y="128" width="140" height="34" rx="0" fill="#F8FAFC"></rect>
<rect x="360" y="127" width="280" height="1" fill="#CBD5E1"></rect>
<text x="430" y="150" text-anchor="middle" font-family="Arial" font-size="13" fill="#374151">Bob</text>
<text x="570" y="150" text-anchor="middle" font-family="Arial" font-size="13" fill="#374151">30</text>
<!-- Row 3 -->
<rect x="360" y="162" width="140" height="34" rx="0" fill="#EEF2FF"></rect>
<rect x="500" y="162" width="140" height="34" rx="0" fill="#EEF2FF"></rect>
<rect x="360" y="161" width="280" height="1" fill="#CBD5E1"></rect>
<text x="430" y="184" text-anchor="middle" font-family="Arial" font-size="13" fill="#374151">Charlie</text>
<text x="570" y="184" text-anchor="middle" font-family="Arial" font-size="13" fill="#374151">28</text>
<!-- Border -->
<rect x="360" y="58" width="280" height="138" rx="0" fill="none" stroke="#CBD5E1" stroke-width="1.5"></rect>
<line x1="500" y1="58" x2="500" y2="196" stroke="#CBD5E1" stroke-width="1"></line>
<!-- colspan/rowspan labels -->
<rect x="360" y="212" width="280" height="48" rx="6" fill="#FEF9C3" stroke="#CA8A04" stroke-width="1"></rect>
<text x="500" y="228" text-anchor="middle" font-family="Arial" font-size="11" font-weight="700" fill="#92400E">Merging cells:</text>
<text x="500" y="244" text-anchor="middle" font-family="monospace" font-size="10" fill="#374151">colspan="2" — span 2 columns</text>
<text x="500" y="258" text-anchor="middle" font-family="monospace" font-size="10" fill="#374151">rowspan="2" — span 2 rows</text>
</svg>
</div>
<p style="text-align: justify;"><span style="font-weight:500"><strong>Table structure tags:</strong> <thead> (header group), <tbody> (body group), <tfoot> (footer group). These semantic tags improve accessibility and allow independent scrolling of table sections. <caption> adds a title to the table.</span></p>
<p style="text-align: justify;"><span style="font-weight:500"><strong>colspan and rowspan:</strong> <td colspan="2"> — cell spans 2 columns. <td rowspan="3"> — cell spans 3 rows. Used to merge cells for complex table layouts.</span></p>
<p style="text-align: justify;"><span style="font-weight:500"><strong><colgroup> and <col>:</strong> Apply styles to entire columns. <colgroup><col style="background:yellow"><col></colgroup> — styles the first column yellow. More efficient than styling each cell individually.</span></p>
</div>
</div>
<!-- HTML Forms -->
<div class="blogRedesign_titlesInfo___vhVU">
<h2 class="blogRedesign_headingTwo__LbiQr"><span style="font-family: Arial; color: #123897; font-size: 22px;">HTML Forms</span></h2>
<h3 style="color: rgb(30, 41, 59); font-family: Inter, sans-serif; font-size: 18px;">Creating Forms in HTML</h3>
</div>
<div class="blogRedesign_blogBody__gglj9">
<div class="blogRedesign_contentBlock__seRyD" style="word-wrap:break-word">
<p style="text-align: justify;"><span style="font-weight:500">HTML forms collect user input and send it to a server for processing. Forms are created with the <form> element and contain input elements like text fields, checkboxes, radio buttons, dropdowns, and submit buttons. Forms are essential for login pages, registration, search boxes, contact forms, and any user interaction.</span></p>
<!-- SVG: Form elements overview -->
<div style="margin: 20px 0;">
<svg width="100%" viewBox="0 0 680 310" xmlns="http://www.w3.org/2000/svg">
<!-- Form shell -->
<rect x="20" y="15" width="310" height="285" rx="10" fill="#F0F9FF" stroke="#0369A1" stroke-width="2"></rect>
<rect x="20" y="15" width="310" height="36" rx="10" fill="#0369A1"></rect>
<rect x="20" y="38" width="310" height="13" fill="#0369A1"></rect>
<text x="175" y="39" text-anchor="middle" font-family="Arial" font-size="13" font-weight="700" fill="#fff"><form action="/submit" method="post"></text>
<!-- Text input -->
<text x="40" y="72" font-family="monospace" font-size="10" fill="#374151"><label for="name">Name:</label></text>
<text x="40" y="87" font-family="monospace" font-size="10" fill="#374151"><input type="text" id="name"</text>
<text x="40" y="102" font-family="monospace" font-size="10" fill="#374151"> name="name" placeholder="Enter name"></text>
<!-- Password -->
<text x="40" y="122" font-family="monospace" font-size="10" fill="#374151"><input type="password" name="pwd"></text>
<!-- Email -->
<text x="40" y="140" font-family="monospace" font-size="10" fill="#374151"><input type="email" required></text>
<!-- Checkbox -->
<text x="40" y="158" font-family="monospace" font-size="10" fill="#374151"><input type="checkbox" id="agree"></text>
<!-- Radio -->
<text x="40" y="176" font-family="monospace" font-size="10" fill="#374151"><input type="radio" name="gender"></text>
<!-- Select -->
<text x="40" y="194" font-family="monospace" font-size="10" fill="#374151"><select name="city"></text>
<text x="40" y="209" font-family="monospace" font-size="10" fill="#374151"> <option>Delhi</option></text>
<text x="40" y="224" font-family="monospace" font-size="10" fill="#374151"></select></text>
<!-- Textarea -->
<text x="40" y="242" font-family="monospace" font-size="10" fill="#374151"><textarea rows="4" cols="30"></textarea></text>
<!-- Submit -->
<text x="40" y="260" font-family="monospace" font-size="10" fill="#374151"><input type="submit" value="Send"></text>
<text x="305" y="294" font-family="monospace" font-size="10" fill="#0369A1"></form></text>
<!-- Input types column -->
<rect x="355" y="15" width="305" height="285" rx="10" fill="#F8FAFC" stroke="#4F46E5" stroke-width="1.5"></rect>
<rect x="355" y="15" width="305" height="36" rx="10" fill="#4F46E5"></rect>
<rect x="355" y="38" width="305" height="13" fill="#4F46E5"></rect>
<text x="507" y="39" text-anchor="middle" font-family="Arial" font-size="13" font-weight="700" fill="#fff">Input Types — type=""</text>
<text x="375" y="68" font-family="monospace" font-size="10" fill="#3730A3">text</text>
<text x="455" y="68" font-family="Arial" font-size="10" fill="#374151">Single line text field</text>
<text x="375" y="84" font-family="monospace" font-size="10" fill="#3730A3">password</text>
<text x="455" y="84" font-family="Arial" font-size="10" fill="#374151">Masked password input</text>
<text x="375" y="100" font-family="monospace" font-size="10" fill="#3730A3">email</text>
<text x="455" y="100" font-family="Arial" font-size="10" fill="#374151">Email with validation</text>
<text x="375" y="116" font-family="monospace" font-size="10" fill="#3730A3">number</text>
<text x="455" y="116" font-family="Arial" font-size="10" fill="#374151">Numeric input with arrows</text>
<text x="375" y="132" font-family="monospace" font-size="10" fill="#3730A3">tel</text>
<text x="455" y="132" font-family="Arial" font-size="10" fill="#374151">Phone number</text>
<text x="375" y="148" font-family="monospace" font-size="10" fill="#3730A3">url</text>
<text x="455" y="148" font-family="Arial" font-size="10" fill="#374151">URL with validation</text>
<text x="375" y="164" font-family="monospace" font-size="10" fill="#3730A3">checkbox</text>
<text x="455" y="164" font-family="Arial" font-size="10" fill="#374151">Tick box (multi-select)</text>
<text x="375" y="180" font-family="monospace" font-size="10" fill="#3730A3">radio</text>
<text x="455" y="180" font-family="Arial" font-size="10" fill="#374151">Radio button (single select)</text>
<text x="375" y="196" font-family="monospace" font-size="10" fill="#3730A3">file</text>
<text x="455" y="196" font-family="Arial" font-size="10" fill="#374151">File upload button</text>
<text x="375" y="212" font-family="monospace" font-size="10" fill="#3730A3">date</text>
<text x="455" y="212" font-family="Arial" font-size="10" fill="#374151">Date picker</text>
<text x="375" y="228" font-family="monospace" font-size="10" fill="#3730A3">range</text>
<text x="455" y="228" font-family="Arial" font-size="10" fill="#374151">Slider control</text>
<text x="375" y="244" font-family="monospace" font-size="10" fill="#3730A3">color</text>
<text x="455" y="244" font-family="Arial" font-size="10" fill="#374151">Color picker</text>
<text x="375" y="260" font-family="monospace" font-size="10" fill="#3730A3">hidden</text>
<text x="455" y="260" font-family="Arial" font-size="10" fill="#374151">Hidden data field</text>
<text x="375" y="276" font-family="monospace" font-size="10" fill="#3730A3">submit / reset / button</text>
</svg>
</div>
<p style="text-align: justify;"><span style="font-weight:500"><strong>form attributes:</strong> action="/url" (where to send data), method="get" (data in URL, bookmark-able) or method="post" (data in body, secure for passwords), enctype="multipart/form-data" (required for file uploads), novalidate (disable HTML5 validation), autocomplete="on/off".</span></p>
<p style="text-align: justify;"><span style="font-weight:500"><strong>Input validation attributes:</strong> required (field must be filled), minlength / maxlength (character limits), min / max (for number/date), pattern="[A-Za-z]{3}" (regex pattern), disabled (field disabled), readonly (cannot edit), checked (pre-checked checkbox/radio).</span></p>
<p style="text-align: justify;"><span style="font-weight:500"><strong><label>:</strong> Associates text with an input for accessibility. Always link label to input using for="input-id" and id="input-id". Clicking the label focuses the input. Screen readers announce the label when input is focused.</span></p>
<p style="text-align: justify;"><span style="font-weight:500"><strong><fieldset> and <legend>:</strong> Group related form fields with a visible border. <fieldset><legend>Personal Info</legend>...</fieldset>. Improves form organization and accessibility.</span></p>
<p style="text-align: justify;"><span style="font-weight:500"><strong><datalist>:</strong> Provides auto-complete suggestions for text input. <input list="browsers"><datalist id="browsers"><option value="Chrome"><option value="Firefox"></datalist></span></p>
</div>
</div>
<!-- HTML Semantic Elements -->
<div class="blogRedesign_titlesInfo___vhVU">
<h2 class="blogRedesign_headingTwo__LbiQr"><span style="font-family: Arial; color: #123897; font-size: 22px;">HTML Semantic Elements</span></h2>
<h3 style="color: rgb(30, 41, 59); font-family: Inter, sans-serif; font-size: 18px;">What are Semantic HTML Tags?</h3>
</div>
<div class="blogRedesign_blogBody__gglj9">
<div class="blogRedesign_contentBlock__seRyD" style="word-wrap:break-word">
<p style="text-align: justify;"><span style="font-weight:500">Semantic HTML elements clearly describe their meaning to both the browser and the developer. They were introduced in HTML5 to replace meaningless <div> soup. Semantic elements improve SEO (search engines understand page structure better), accessibility (screen readers navigate by landmarks), and code readability.</span></p>
<!-- SVG: Semantic page layout -->
<div style="margin: 20px 0;">
<svg width="100%" viewBox="0 0 680 390" xmlns="http://www.w3.org/2000/svg">
<!-- Page frame -->
<rect x="30" y="10" width="620" height="370" rx="10" fill="#F8FAFC" stroke="#CBD5E1" stroke-width="2"></rect>
<!-- header -->
<rect x="50" y="25" width="580" height="55" rx="6" fill="#1E3A5F"></rect>
<text x="340" y="48" text-anchor="middle" font-family="Arial" font-size="13" font-weight="700" fill="#FFD43B"><header></text>
<text x="340" y="65" text-anchor="middle" font-family="Arial" font-size="11" fill="#93C5FD">Site logo, navigation bar, top banner</text>
<!-- nav -->
<rect x="50" y="90" width="580" height="40" rx="6" fill="#0369A1"></rect>
<text x="340" y="115" text-anchor="middle" font-family="Arial" font-size="12" font-weight="700" fill="#ffffff"><nav> — Navigation links: Home | About | Services | Contact</text>
<!-- main + aside -->
<rect x="50" y="142" width="400" height="165" rx="6" fill="#EEF2FF" stroke="#4F46E5" stroke-width="1.5"></rect>
<text x="250" y="162" text-anchor="middle" font-family="Arial" font-size="13" font-weight="700" fill="#3730A3"><main></text>
<!-- article inside main -->
<rect x="65" y="170" width="370" height="60" rx="5" fill="#DCFCE7" stroke="#16A34A" stroke-width="1"></rect>
<text x="250" y="190" text-anchor="middle" font-family="Arial" font-size="12" font-weight="700" fill="#166534"><article></text>
<text x="250" y="207" text-anchor="middle" font-family="Arial" font-size="11" fill="#374151">Self-contained content (blog post, news article)</text>
<!-- section inside main -->
<rect x="65" y="238" width="370" height="58" rx="5" fill="#FEF9C3" stroke="#CA8A04" stroke-width="1"></rect>
<text x="250" y="258" text-anchor="middle" font-family="Arial" font-size="12" font-weight="700" fill="#92400E"><section></text>
<text x="250" y="275" text-anchor="middle" font-family="Arial" font-size="11" fill="#374151">Thematic grouping of content with a heading</text>
<!-- aside -->
<rect x="462" y="142" width="168" height="165" rx="6" fill="#FEE2E2" stroke="#DC2626" stroke-width="1.5"></rect>
<text x="546" y="165" text-anchor="middle" font-family="Arial" font-size="13" font-weight="700" fill="#991B1B"><aside></text>
<text x="546" y="182" text-anchor="middle" font-family="Arial" font-size="10" fill="#374151">Sidebar content</text>
<text x="546" y="196" text-anchor="middle" font-family="Arial" font-size="10" fill="#374151">Related links</text>
<text x="546" y="210" text-anchor="middle" font-family="Arial" font-size="10" fill="#374151">Ads, widgets</text>
<text x="546" y="224" text-anchor="middle" font-family="Arial" font-size="10" fill="#374151">Not essential</text>
<text x="546" y="238" text-anchor="middle" font-family="Arial" font-size="10" fill="#374151">to main content</text>
<!-- footer -->
<rect x="50" y="318" width="580" height="50" rx="6" fill="#374151"></rect>
<text x="340" y="341" text-anchor="middle" font-family="Arial" font-size="13" font-weight="700" fill="#9CA3AF"><footer></text>
<text x="340" y="358" text-anchor="middle" font-family="Arial" font-size="11" fill="#6B7280">Copyright, social links, privacy policy, contact info</text>
</svg>
</div>
<p style="text-align: justify;"><span style="font-weight:500"><strong><header>:</strong> Introductory content — logo, site title, navigation. Can appear inside <article> or <section> too (not just the page header).</span></p>
<p style="text-align: justify;"><span style="font-weight:500"><strong><nav>:</strong> Major navigation links. A page can have multiple <nav> elements (main nav, footer nav, breadcrumbs). Not all links need to be in <nav>.</span></p>
<p style="text-align: justify;"><span style="font-weight:500"><strong><main>:</strong> The dominant content of the page. Only one <main> per page. Should not be inside <header>, <footer>, <nav>, or <aside>.</span></p>
<p style="text-align: justify;"><span style="font-weight:500"><strong><article>:</strong> Self-contained, independently distributable content. Blog posts, news articles, forum posts, product cards. Should make sense on its own outside the page context.</span></p>
<p style="text-align: justify;"><span style="font-weight:500"><strong><section>:</strong> Thematic grouping of content. Each section should have a heading (<h2>–<h6>). Different from <div> — section has semantic meaning, div is purely for styling/scripting.</span></p>
<p style="text-align: justify;"><span style="font-weight:500"><strong><aside>:</strong> Content tangentially related to the surrounding content. Sidebars, pull quotes, related links, advertisements. Visually often styled as a sidebar.</span></p>
<p style="text-align: justify;"><span style="font-weight:500"><strong><footer>:</strong> Footer of section or page. Copyright, contact info, links, social media. Can appear inside <article> or <section> as well.</span></p>
<p style="text-align: justify;"><span style="font-weight:500"><strong>Other semantic elements:</strong> <time datetime="2024-01-15">, <address> (contact info), <details> + <summary> (accordion disclosure), <dialog> (modal dialog), <mark> (highlighted text), <progress> (progress bar), <meter> (gauge/measurement).</span></p>
</div>
</div>
<!-- HTML5 New Features -->
<div class="blogRedesign_titlesInfo___vhVU">
<h2 class="blogRedesign_headingTwo__LbiQr"><span style="font-family: Arial; color: #123897; font-size: 22px;">HTML5 New Features</span></h2>
<h3 style="color: rgb(30, 41, 59); font-family: Inter, sans-serif; font-size: 18px;">What's New in HTML5?</h3>
</div>
<div class="blogRedesign_blogBody__gglj9">
<div class="blogRedesign_contentBlock__seRyD" style="word-wrap:break-word">
<p style="text-align: justify;"><span style="font-weight:500">HTML5 is the fifth and current major version of HTML. Released in 2014 by W3C, HTML5 introduced powerful new features including semantic elements, multimedia support (audio/video without plugins), Canvas for 2D drawing, SVG, Geolocation API, Web Storage, Web Workers, and many new form input types.</span></p>
<p style="text-align: justify;"><span style="font-weight:500"><strong><audio>:</strong> Embed audio without plugins. <audio controls><source src="song.mp3" type="audio/mpeg">Your browser does not support audio.</audio>. Attributes: controls, autoplay, loop, muted, preload. Supports MP3, WAV, OGG formats.</span></p>
<p style="text-align: justify;"><span style="font-weight:500"><strong><video>:</strong> Embed video without Flash. <video width="640" height="360" controls><source src="movie.mp4" type="video/mp4"></video>. Attributes: controls, autoplay, loop, muted, poster (thumbnail image), preload. Supports MP4, WebM, OGG formats.</span></p>
<p style="text-align: justify;"><span style="font-weight:500"><strong><canvas>:</strong> A drawing surface for 2D graphics via JavaScript. <canvas id="myCanvas" width="500" height="300"></canvas>. Used for charts, games, visualizations, image manipulation. The canvas API provides methods for drawing shapes, text, images, and animations.</span></p>
<p style="text-align: justify;"><span style="font-weight:500"><strong><svg>:</strong> Scalable Vector Graphics embedded directly in HTML. Vector images that scale without pixelation. Used for logos, icons, charts, animations. Better for simple graphics; Canvas is better for complex pixel manipulation.</span></p>
<p style="text-align: justify;"><span style="font-weight:500"><strong>Web Storage APIs:</strong> localStorage (persists after browser close — no expiry), sessionStorage (cleared when tab closes). Both store key-value string pairs. localStorage.setItem("key", "value"), localStorage.getItem("key"). Better than cookies — more storage (5MB), no server transfer.</span></p>
<p style="text-align: justify;"><span style="font-weight:500"><strong>Geolocation API:</strong> navigator.geolocation.getCurrentPosition(success, error). Gets user's latitude/longitude with permission. Used in maps, weather apps, location-based services. HTTPS required.</span></p>
<p style="text-align: justify;"><span style="font-weight:500"><strong>Drag and Drop API:</strong> draggable="true" attribute on any element. Events: ondragstart, ondragover, ondrop. Enables native drag-and-drop interfaces without JavaScript libraries.</span></p>
</div>
</div>
<!-- HTML Meta Tags and SEO -->
<div class="blogRedesign_titlesInfo___vhVU">
<h2 class="blogRedesign_headingTwo__LbiQr"><span style="font-family: Arial; color: #123897; font-size: 22px;">HTML Meta Tags and SEO</span></h2>
<h3 style="color: rgb(30, 41, 59); font-family: Inter, sans-serif; font-size: 18px;">What are Meta Tags in HTML?</h3>
</div>
<div class="blogRedesign_blogBody__gglj9">
<div class="blogRedesign_contentBlock__seRyD" style="word-wrap:break-word">
<p style="text-align: justify;"><span style="font-weight:500">Meta tags go inside <head> and provide metadata about the HTML document. They are not displayed on the page but are read by browsers, search engines, and social media platforms. Meta tags are crucial for SEO (Search Engine Optimization), social sharing, and mobile responsiveness.</span></p>
<p style="text-align: justify;"><span style="font-weight:500"><strong>Essential meta tags:</strong><br><meta charset="UTF-8"> — character encoding (always first)<br><meta name="viewport" content="width=device-width, initial-scale=1.0"> — mobile responsive<br><meta name="description" content="Page description (150–160 chars)"> — shown in search results<br><meta name="keywords" content="html, tutorial, web"> — keywords (less important now)<br><meta name="author" content="John Doe"> — page author<br><meta name="robots" content="index, follow"> — search engine instructions</span></p>
<p style="text-align: justify;"><span style="font-weight:500"><strong>Open Graph meta tags (social media sharing):</strong><br><meta property="og:title" content="Page Title"><br><meta property="og:description" content="Description"><br><meta property="og:image" content="https://example.com/image.jpg"><br><meta property="og:url" content="https://example.com/page"><br>These control how your page appears when shared on Facebook, LinkedIn, WhatsApp.</span></p>
<p style="text-align: justify;"><span style="font-weight:500"><strong>Twitter Card tags:</strong><br><meta name="twitter:card" content="summary_large_image"><br><meta name="twitter:title" content="Title"><br><meta name="twitter:image" content="image.jpg"></span></p>
<p style="text-align: justify;"><span style="font-weight:500"><strong>http-equiv meta tags:</strong><br><meta http-equiv="refresh" content="5;url=https://example.com"> — redirect after 5 seconds<br><meta http-equiv="X-UA-Compatible" content="IE=edge"> — IE compatibility<br><meta http-equiv="Content-Security-Policy" content="..."> — security policy</span></p>
<p style="text-align: justify;"><span style="font-weight:500"><strong><link> tag in head:</strong> rel="stylesheet" (CSS file), rel="icon" (favicon), rel="canonical" (preferred URL), rel="preload" (preload critical resources), rel="alternate" (alternate versions like RSS), rel="manifest" (PWA manifest file).</span></p>
</div>
</div>
<!-- HTML Interview Questions -->
<div class="blogRedesign_titlesInfo___vhVU">
<h2 class="blogRedesign_headingTwo__LbiQr"><span style="font-family: Arial; color: #123897; font-size: 22px;">HTML Interview Questions and Answers</span></h2>
<h3 style="color: rgb(30, 41, 59); font-family: Inter, sans-serif; font-size: 18px;">Top HTML Interview Questions</h3>
</div>
<div class="blogRedesign_blogBody__gglj9">
<div class="blogRedesign_contentBlock__seRyD" style="word-wrap:break-word">
<p style="text-align: justify;"><span style="font-weight:500"><strong>Q1. What is the difference between HTML elements and HTML tags?</strong><br>Ans: A tag is the markup like <p> or </p>. An element includes both the opening tag, content, and closing tag: <p>Hello</p> is the complete element. Some elements are void (self-closing) like <br>, <img>, <input> — they have only one tag and no content/closing tag.</span></p>
<p style="text-align: justify;"><span style="font-weight:500"><strong>Q2. What is the difference between <div> and <span>?</strong><br>Ans: <div> is a block-level container — takes full width, starts on a new line. Used for sections, layout blocks. <span> is an inline container — takes only the width of its content, flows with text. Used for styling parts of text. Both have no semantic meaning — they are generic containers for CSS/JS hooks.</span></p>
<p style="text-align: justify;"><span style="font-weight:500"><strong>Q3. What is the difference between id and class attributes?</strong><br>Ans: id must be unique on the page — only one element can have a specific id. Used for unique elements (page sections, JavaScript targets). class can be shared by multiple elements — used for styling groups. An element can have multiple classes: class="btn btn-primary large". In CSS: #id and .class.</span></p>
<p style="text-align: justify;"><span style="font-weight:500"><strong>Q4. What is the difference between <b> and <strong>, and <i> and <em>?</strong><br>Ans: <b> is purely visual bold with no semantic meaning. <strong> indicates important content — semantic, affects screen readers. <i> is purely visual italic. <em> indicates emphasis — semantic, screen readers stress the word differently. Always prefer <strong> and <em> for meaningful content.</span></p>
<p style="text-align: justify;"><span style="font-weight:500"><strong>Q5. What are void elements in HTML?</strong><br>Ans: Void elements are HTML elements that cannot have any child content and do not have a closing tag. Examples: <br>, <hr>, <img>, <input>, <meta>, <link>, <area>, <base>, <col>, <embed>, <source>, <track>, <wbr>. In HTML5 the trailing slash is optional: <br> and <br/> are both valid.</span></p>
<p style="text-align: justify;"><span style="font-weight:500"><strong>Q6. What is the difference between GET and POST methods in forms?</strong><br>Ans: GET — data appended to URL as query string (?name=Alice&age=25). Visible in browser bar, bookmarkable, cached, limited to ~2000 chars. Used for search forms, filters. POST — data sent in request body. Not visible in URL, not cached, no size limit. Used for login, registration, file upload, any sensitive data.</span></p>
<p style="text-align: justify;"><span style="font-weight:500"><strong>Q7. What is the purpose of the alt attribute in images?</strong><br>Ans: alt provides alternative text for images. Shown when image fails to load. Read by screen readers for visually impaired users (accessibility). Indexed by search engines for image SEO. Always set a descriptive alt for content images. Use alt="" (empty) for decorative images that screen readers should skip.</span></p>
<p style="text-align: justify;"><span style="font-weight:500"><strong>Q8. What is the difference between block-level and inline elements?</strong><br>Ans: Block-level elements: always start on a new line, take full available width, can contain other block and inline elements. Examples: <div>, <p>, <h1>-<h6>, <ul>, <li>, <table>, <section>, <article>. Inline elements: flow within text, take only necessary width, can only contain other inline elements. Examples: <span>, <a>, <img>, <strong>, <em>, <input>.</span></p>
<p style="text-align: justify;"><span style="font-weight:500"><strong>Q9. What is the role of the <head> element?</strong><br>Ans: The <head> element contains metadata not displayed on the page: <title> (browser tab title and SEO), <meta> (charset, viewport, description, OG tags), <link> (CSS stylesheets, favicon, canonical), (JavaScript — preferably at end of body), <style> (internal CSS), <base> (base URL for relative links).</span></p>
<p style="text-align: justify;"><span style="font-weight:500"><strong>Q10. What are data-* attributes in HTML5?</strong><br>Ans: Custom data attributes allow storing extra information on HTML elements without using non-standard attributes or JS variables. Syntax: data-[name]="value". Example: <div data-user-id="42" data-role="admin">. Access in JavaScript: element.dataset.userId (camelCase). Access in CSS: [data-role="admin"] { color: red; }. Useful for passing data between HTML and JS without hacking class names.</span></p>
</div>
</div>
<!-- HTML MCQ -->
<div class="blogRedesign_titlesInfo___vhVU">
<h2 class="blogRedesign_headingTwo__LbiQr"><span style="font-family: Arial; color: #123897; font-size: 22px;">HTML MCQ (Multiple Choice Questions)</span></h2>
<h3 style="color: rgb(30, 41, 59); font-family: Inter, sans-serif; font-size: 18px;">HTML MCQs with Answers</h3>
</div>
<div class="blogRedesign_blogBody__gglj9">
<div class="blogRedesign_contentBlock__seRyD" style="word-wrap:break-word">
<p style="text-align: justify;"><span style="font-weight:500"><strong>Q1. What does HTML stand for?</strong><br>a) Hyper Text Markup Language b) High Text Machine Language c) Hyperlink Text Markup Language d) Home Tool Markup Language<br><strong>Answer: a) Hyper Text Markup Language</strong></span></p>
<p style="text-align: justify;"><span style="font-weight:500"><strong>Q2. Which tag is used to create the largest heading in HTML?</strong><br>a) <h6> b) <heading> c) <h1> d) <head><br><strong>Answer: c) <h1></strong></span></p>
<p style="text-align: justify;"><span style="font-weight:500"><strong>Q3. Which HTML attribute is used to define inline styles?</strong><br>a) class b) font c) styles d) style<br><strong>Answer: d) style</strong> — style="color: red;"</span></p>
<p style="text-align: justify;"><span style="font-weight:500"><strong>Q4. Which HTML tag is used to insert a line break?</strong><br>a) <lb> b) <break> c) <br> d) <line><br><strong>Answer: c) <br></strong> — self-closing void element</span></p>
<p style="text-align: justify;"><span style="font-weight:500"><strong>Q5. What is the correct HTML for creating a hyperlink?</strong><br>a) <a url="http://example.com"> b) <a href="http://example.com"> c) <link href="http://example.com"> d) <a name="http://example.com"><br><strong>Answer: b) <a href="http://example.com"></strong></span></p>
<p style="text-align: justify;"><span style="font-weight:500"><strong>Q6. Which HTML element is used to define important text?</strong><br>a) <b> b) <i> c) <important> d) <strong><br><strong>Answer: d) <strong></strong> — semantic importance, not just visual bold</span></p>
<p style="text-align: justify;"><span style="font-weight:500"><strong>Q7. What is the correct HTML for inserting an image?</strong><br>a) <img href="img.jpg" alt=""> b) <image src="img.jpg" alt=""> c) <img src="img.jpg" alt=""> d) <img src="img.jpg"><br><strong>Answer: c) <img src="img.jpg" alt=""></strong> — alt is required for accessibility</span></p>
<p style="text-align: justify;"><span style="font-weight:500"><strong>Q8. Which doctype is correct for HTML5?</strong><br>a) <!DOCTYPE HTML PUBLIC ...> b) <!DOCTYPE html> c) <html DOCTYPE="5"> d) <!html5><br><strong>Answer: b) <!DOCTYPE html></strong></span></p>
<p style="text-align: justify;"><span style="font-weight:500"><strong>Q9. Which input type is used for a calendar date picker?</strong><br>a) type="calendar" b) type="datetime" c) type="date" d) type="picker"<br><strong>Answer: c) type="date"</strong></span></p>
<p style="text-align: justify;"><span style="font-weight:500"><strong>Q10. Which HTML element defines the title of a document (shown in browser tab)?</strong><br>a) <head> b) <meta> c) <heading> d) <title><br><strong>Answer: d) <title></strong> — placed inside <head></span></p>
<p style="text-align: justify;"><span style="font-weight:500"><strong>Q11. Which attribute makes an input field mandatory in HTML5?</strong><br>a) validate b) mandatory c) required d) must<br><strong>Answer: c) required</strong> — <input type="text" required></span></p>
<p style="text-align: justify;"><span style="font-weight:500"><strong>Q12. Which element is used to group table header cells?</strong><br>a) <thead> b) <th> c) <header> d) <tgroup><br><strong>Answer: a) <thead></strong> — groups the header rows, while <th> is an individual header cell</span></p>
</div>
</div>
</div>
</div>
</div>
<p class="mb_20">
</p>
<!-- <div class="social_btns">
<a target="_blank"
href="https://www.facebook.com/sharer/sharer.php?u=https://www.thetutorx.com/courses-details/html-language"
class="social_btn fb_bg"> <i class="fab fa-facebook-f"></i>
Facebook </a>
<a target="_blank"
href="https://twitter.com/intent/tweet?text=HTML Language&url=https://www.thetutorx.com/courses-details/html-language"
class="social_btn Twitter_bg"> <i
class="fab fa-twitter"></i> Twitter</a>
<a target="_blank"
href="https://pinterest.com/pin/create/link/?url=https://www.thetutorx.com/courses-details/html-language&description=HTML Language"
class="social_btn Pinterest_bg"> <i
class="fab fa-pinterest-p"></i> Pinterest
</a>
<a target="_blank"
href="https://www.linkedin.com/shareArticle?mini=true&url=https://www.thetutorx.com/courses-details/html-language&title=HTML Language&summary=HTML Language"
class="social_btn Linkedin_bg"> <i
class="fab fa-linkedin-in"></i> Linkedin
</a>
</div>
-->
</div>
</div>
<!--/ content -->
</div>
<div class="tab-pane fade " id="Curriculum" role="tabpanel" aria-labelledby="Curriculum-tab">
<!-- content -->
<!-- <h4 class="font_22 f_w_700 mb_20">Course Curriculum</h4>-->
<!-- Remove heading text but keep spacing -->
<h4 class="mb_20"></h4>
<div class="theme_according mb_30 mb-3" id="accordion1">
</div>
</div>
<div class="tab-pane fade " id="Instructor" role="tabpanel"
aria-labelledby="Instructor-tab">
<div class="instractor_details_wrapper">
<div class="instractor_title">
<h4 class="font_22 f_w_700">Instructor</h4>
<p class="font_16 f_w_400">Administrator</p>
</div>
<div class="instractor_details_inner">
<div class="thumb">
<img class="w-100"
src="https://www.thetutorx.com/public/uploads/main/files/12-09-2025/tutorxjpg.jpg"
alt="">
</div>
<div class="instractor_details_info">
<a href="https://www.thetutorx.com/instructorDetails/1/TUTORX%20ADMIN">
<h4 class="font_22 f_w_700">TUTORX ADMIN</h4>
</a>
<h5> Administrator</h5>
<div class="ins_details">
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
<div class="intractor_qualification">
<div class="single_qualification">
<i class="ti-star"></i> 0
Rating
</div>
<div class="single_qualification">
<i class="ti-comments"></i> 0
Reviews
</div>
<div class="single_qualification">
<i class="ti-user"></i> 97
Students
</div>
<div class="single_qualification">
<i class="ti-layout-media-center-alt"></i> 67
Courses
</div>
</div>
</div>
</div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<!--<div class="author_courses">
<div class="section__title mb_80">
<h3>More Courses by Author</h3>
</div>
<div class="row">
<div class="col-xl-6">
<div class="couse_wizged mb_30">
<div class="thumb">
<a href="https://www.thetutorx.com/courses-details/academic-syllabus-year-2-for-australia">
<img class="w-100"
src="https://www.thetutorx.com/public/uploads/main/files/04-01-2025/Japanese Elementary Student Girl Doi.jpg"
alt="">
<div>
<span class="prise_tag">
<span>
Free
</span>
</span>
</div>
</a>
</div>
<div class="course_content">
<a href="https://www.thetutorx.com/courses-details/academic-syllabus-year-2-for-australia">
<h4>Academic Syllabus Year 2 for Australia</h4>
</a>
<div class="rating_cart">
<div class="rateing">
<span>0/5</span>
<i class="fas fa-star"></i>
</div>
<a href="#" class="cart_store"
data-id="57">
<i class="fas fa-shopping-cart"></i>
</a>
</div>
<div class="course_less_students">
<a href="#"> <i
class="ti-agenda"></i> 0
Lessons</a>
<a href="#"> <i
class="ti-user"></i> 4
Students </a>
</div>
</div>
</div>
</div>
<div class="col-xl-6">
<div class="couse_wizged mb_30">
<div class="thumb">
<a href="https://www.thetutorx.com/courses-details/oc-test-prep">
<img class="w-100"
src="https://www.thetutorx.com/public/uploads/main/files/24-04-2025/22271.jpg"
alt="">
<div>
<span class="prise_tag">
<span>
Free
</span>
</span>
</div>
</a>
</div>
<div class="course_content">
<a href="https://www.thetutorx.com/courses-details/oc-test-prep">
<h4>OC Test Prep</h4>
</a>
<div class="rating_cart">
<div class="rateing">
<span>0/5</span>
<i class="fas fa-star"></i>
</div>
<a href="#" class="cart_store"
data-id="104">
<i class="fas fa-shopping-cart"></i>
</a>
</div>
<div class="course_less_students">
<a href="#"> <i
class="ti-agenda"></i> 8
Lessons</a>
<a href="#"> <i
class="ti-user"></i> 1
Students </a>
</div>
</div>
</div>
</div>
</div>
</div>-->
</div>
</div>
</div>
<!--<div class="col-xl-4 col-lg-4">
<div class="sidebar__widget mb_30">
<div class="sidebar__title">
<div id="price-container">
<h3 id="price_show_tag">
$
</h3>
<div class="price_loader"></div>
</div>
<p>
</p>
</div>
<h4 class="f_w_700 mb_10">This course includes:</h4>
<ul class="course_includes">
<li><i class="ti-alarm-clock"></i>
<p class="nowrap"> Duration N/A
</p></li>
<li><i class="ti-thumb-up"></i>
<p>Skill Level
Intermediate
</p></li>
<li><i class="ti-agenda"></i>
<p>Lectures 0 lessons</p>
</li>
<li><i class="ti-user"></i>
<p>Enrolled 0 students</p>
</li>
<li><i class="ti-blackboard"></i>
<p>Full lifetime access</p>
</li>
</ul>
</div>
</div>-->
</div>
</div>
</div>
</div>
</div>
<div class="modal cs_modal fade admin-query" id="invoiceModal" role="dialog">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Upload Invoice</h5>
<button type="button" class="close" data-dismiss="modal"><i
class="ti-close "></i></button>
</div>
<form action="https://www.thetutorx.com/upload_invoice" method="post" enctype="multipart/form-data">
<div class="modal-body" style="padding:40px 16px;">
<input type="hidden" name="_token" value="skiXeOkxRiSP7Zq6VjdbWCHbpYU8fMH79e5IFPMH" autocomplete="off"> <input type="hidden" name="upload_price" id="upload_price"
value=>
<input type="hidden" name="upload_course_enrolled_id" id="upload_course_enrolled_id"
value=0>
<div class="text-center">
<input type="file" name="file" class="form-control upload_invoice_input" />
</div>
</div>
<div class="modal-footer">
<div class="mt-40">
<button class="theme_btn "
type="submit">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="modal cs_modal fade admin-query" id="myModal" role="dialog">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Review</h5>
<button type="button" class="close" data-dismiss="modal"><i
class="ti-close "></i></button>
</div>
<form action="https://www.thetutorx.com/submitReview" method="Post">
<div class="modal-body">
<input type="hidden" name="_token" value="skiXeOkxRiSP7Zq6VjdbWCHbpYU8fMH79e5IFPMH" autocomplete="off"> <input type="hidden" name="course_id" id="rating_course_id"
value="">
<input type="hidden" name="rating" id="rating_value" value="">
<div class="text-center">
<textarea class="lms_summernote" name="review" name=""
id=""
placeholder="Write your review"
cols="30"
rows="10"></textarea>
<span class="text-danger" role="alert"></span>
</div>
</div>
<div class="modal-footer justify-content-center">
<div class="mt-40">
<button type="button" class="theme_line_btn mr-2"
data-dismiss="modal">Cancel
</button>
<button class="theme_btn "
type="submit">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="modal cs_modal fade admin-query" id="deleteComment" role="dialog">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Delete Confirmation</h5>
<button type="button" class="close" data-dismiss="modal"><i
class="ti-close "></i></button>
</div>
<form action="" id="deleteCommentForm" method="Post">
<div class="modal-body">
<input type="hidden" name="_token" value="skiXeOkxRiSP7Zq6VjdbWCHbpYU8fMH79e5IFPMH" autocomplete="off"> Are you sure to delete ?
</div>
<div class="modal-footer justify-content-center">
<div class="mt-40">
<button type="button" class="theme_line_btn mr-2 small_btn2"
data-dismiss="modal">Cancel
</button>
<button class="theme_btn small_btn2"
type="submit" id="formSubmitBtn">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!--<section id="plans-section">
<h2>Choose Your Learning Plan</h2>
<div class="plans-container">
<div class="plan-card standard">
<div class="plan-header">Basic Learning Plan</div>
<div class="plan-description">For foundational learners who want core access.</div>
<ul class="features">
<li class="available">Access to content</li>
<li class="available">Access to content</li>
<li class="unavailable">College Readiness</li>
<li><i class="bi bi-check-circle-fill available"></i>Tests</li>
<li><i class="bi bi-check-circle-fill available"></i>Personalised Tests / AI CoPilot</li>
<li><i class="bi bi-x-circle-fill unavailable"></i>Class Recordings</li>
<li><i class="bi bi-x-circle-fill unavailable"></i>AI Integration</li>
<li><i class="bi bi-x-circle-fill unavailable"></i>Homework Help</li>
<li><i class="bi bi-x-circle-fill unavailable"></i>Test Prep Guidance</li>
<li><i class="bi bi-x-circle-fill unavailable"></i>College Readiness</li>
</ul>
<div class="plan-footer">
<button class="book-btn">Book a Free Class</button>
</div>
</div>
<div class="plan-card premium">
<div class="plan-header">Comprehensive Plan</div>
<div class="plan-description">Best for students seeking extra help and tools.</div>
<ul class="features">
<li><i class="bi bi-check-circle-fill available"></i>Access to content</li>
<li><i class="bi bi-check-circle-fill available"></i>Tests</li>
<li><i class="bi bi-check-circle-fill available"></i>Personalised Tests / AI CoPilot</li>
<li><i class="bi bi-check-circle-fill available"></i>Class Recordings</li>
<li><i class="bi bi-check-circle-fill available"></i>AI Integration</li>
<li><i class="bi bi-check-circle-fill available"></i>Homework Help</li>
<li><i class="bi bi-x-circle-fill unavailable"></i>Test Prep Guidance</li>
<li><i class="bi bi-x-circle-fill unavailable"></i>College Readiness</li>
</ul>
<div class="plan-footer">
<button class="book-btn">Book a Free Class</button>
</div>
</div>
<div class="plan-card elite">
<div class="plan-header">Full Support Plan</div>
<div class="plan-description">Full academic support with all premium features.</div>
<ul class="features">
<li><i class="bi bi-check-circle-fill available"></i>Access to content</li>
<li><i class="bi bi-check-circle-fill available"></i>Tests</li>
<li><i class="bi bi-check-circle-fill available"></i>Personalised Tests / AI CoPilot</li>
<li><i class="bi bi-check-circle-fill available"></i>Class Recordings</li>
<li><i class="bi bi-check-circle-fill available"></i>AI Integration</li>
<li><i class="bi bi-check-circle-fill available"></i>Homework Help</li>
<li><i class="bi bi-check-circle-fill available"></i>Test Prep Guidance</li>
<li><i class="bi bi-check-circle-fill available"></i>College Readiness</li>
</ul>
<div class="plan-footer">
<button class="book-btn">Book a Free Class</button>
</div>
</div>
</div>
</section>-->
<div class="row align-items-center">
<!-- col -->
<div class="text-center mb-lg-10 mb-6">
<h2 class="h1 fw-bold">Contact TutorX –<span class="text-primary"> We're Here to Help You Succeed
</span></h2>
<p class="lead mb-0">Reach out to us for inquiries, support, or more information about our personalized tutoring services</p>
</div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.min.css" />
<style>
/* Ensure intl-tel-input integrates nicely with your layout */
.iti { width: 100%; display: block; margin-bottom: 20px; }
/* Fix padding for separate dial code flag+code prefix */
.iti--separate-dial-code .primary_input {
padding-left: 100px !important;
}
/* Card Layout */
.contact-card-wrapper {
position: relative;
z-index: 10;
background: #fff;
border-radius: 15px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
overflow: hidden;
margin-bottom: 80px;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
.contact-info-side {
background: #123897;
padding: 40px 40px;
}
.contact-form-side {
padding: 40px 40px;
background: #fff;
}
/* Info Styling */
.contact-info-item {
display: flex;
align-items: flex-start;
margin-bottom: 25px;
}
.contact-icon-box {
width: 50px;
height: 50px;
background: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #123897;
font-size: 20px;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
margin-right: 20px;
flex-shrink: 0;
}
.contact-info-text h5 {
font-size: 18px;
font-weight: 700;
color: #fff;
margin-bottom: 5px;
}
.contact-info-text p {
color: rgba(255, 255, 255, 0.8);
font-size: 15px;
margin: 0;
line-height: 1.6;
}
/* Form Styling */
.contact-form-side h3 {
color: #1a2c47;
font-weight: 700;
margin-bottom: 20px;
}
.primary_input {
background: #f1f5f9 !important;
border: 1px solid #e2e8f0 !important;
border-radius: 10px !important;
padding: 15px 20px !important;
height: auto !important;
color: #334155 !important;
transition: all 0.3s ease;
}
.primary_input:focus {
background: #fff !important;
border-color: #123897 !important;
box-shadow: 0 0 0 4px rgba(18, 56, 151, 0.1);
}
.primary_textarea {
background: #f1f5f9 !important;
border: 1px solid #e2e8f0 !important;
border-radius: 10px !important;
padding: 15px 20px !important;
min-height: 120px;
}
.submit-btn {
background: #123897 !important;
color: #fff !important;
border-radius: 50px !important;
padding: 14px 40px !important;
font-weight: 600 !important;
border: none !important;
transition: all 0.3s ease;
}
.submit-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(18, 56, 151, 0.2);
}
/* Style the flag dropdown to match the input border-radius */
.iti--separate-dial-code .iti__selected-flag {
border-radius: 10px 0 0 10px;
background-color: #f1f5f9;
border-right: 1px solid #e2e8f0;
}
/* Remove double border on the input when iti wraps it */
.iti--separate-dial-code .iti__selected-flag,
.iti--allow-dropdown .iti__selected-flag {
padding: 0 8px 0 10px;
}
@media (max-width: 991px) {
.contact-info-side, .contact-form-side {
padding: 40px 20px;
}
}
</style>
<div>
<div class="container">
<div class="contact-card-wrapper">
<div class="row g-0">
<!-- Left Column: Contact Info -->
<div class="col-lg-6 contact-info-side">
<h3 class="mb-4" style="color: #fff; font-weight: 700;">Get in touch</h3>
<p class="mb-5" style="color: rgba(255, 255, 255, 0.8);">We are happy to hear from you. You can either fill out the form or send us an email.</p>
<div class="contact-info-item">
<div class="contact-icon-box">
<i class="ti-direction-alt"></i>
</div>
<div class="contact-info-text">
<h5>Address</h5>
<p>A1 220, 4th floor ,shushant lok phase 2 sector 55 gurgaon</p>
</div>
</div>
<div class="contact-info-item">
<div class="contact-icon-box">
<i class="ti-email"></i>
</div>
<div class="contact-info-text">
<h5>Email</h5>
<p>info@thetutorx.com</p>
</div>
</div>
<div class="contact-info-item">
<div class="contact-icon-box">
<i class="ti-headphone-alt"></i>
</div>
<div class="contact-info-text">
<h5>Phone</h5>
<p>(+91)9013504886</p>
</div>
</div>
<div class="mt-5">
<h5 class="mb-3" style="color: #fff; font-weight: 700;">Follow Us</h5>
<div class="d-flex gap-3">
<a href="https://www.facebook.com/thetutorxofficial?mibextid=wwXIfr&rdid=ruwTY2E759w2GvaW&share_url=https%3A%2F%2Fwww.facebook.com%2Fshare%2F1D6aF1TXdm%2F%3Fmibextid%3DwwXIfr#" class="text-decoration-none me-3" style="font-size: 24px; color: #fff;"><i class="ti-facebook"></i></a>
<a href="https://youtube.com/@thetutorxedu?si=ZA2-PdHwBhpi0M0D" class="text-decoration-none me-3" style="font-size: 24px; color: #fff;"><i class="ti-youtube"></i></a>
<a href="https://www.instagram.com/the_tutorx?igsh=MXcyZXRuNjR2Ym1mNA%3D%3D&utm_source=qr" class="text-decoration-none me-3" style="font-size: 24px; color: #fff;"><i class="ti-instagram"></i></a>
<a href="https://www.linkedin.com/company/tutorxindia/" class="text-decoration-none" style="font-size: 24px; color: #fff;"><i class="ti-linkedin"></i></a>
</div>
</div>
</div>
<!-- Right Column: Form -->
<div class="col-lg-6 contact-form-side">
<h3 class="mb-4">Send Us Message</h3>
<form class="form-area contact-form" id="myForm1"
action="https://www.thetutorx.com/contact-submit"
method="post">
<input type="hidden" name="_token" value="skiXeOkxRiSP7Zq6VjdbWCHbpYU8fMH79e5IFPMH" autocomplete="off"> <div class="row">
<div class="col-lg-12">
<label class="primary_label">Name</label>
<input name="name" placeholder="Enter Full Name"
onfocus="this.placeholder = ''"
onblur="this.placeholder = 'Enter Full Name'"
class="primary_input mb_20" type="text" required
value="">
<span class="text-danger" role="alert"></span>
<label class="primary_label">Phone Number</label>
<input type="hidden" id="contact_phone_full" name="phone" value="">
<input id="contact_phone" required
placeholder="Enter phone number"
onfocus="this.placeholder = ''"
onblur="this.placeholder = 'Enter phone number'"
class="primary_input mb_20"
type="tel">
<span class="text-danger" role="alert"></span>
<label class="primary_label">Email Address</label>
<input name="email" required
placeholder="Enter Email Address"
pattern="[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{1,63}$"
onfocus="this.placeholder = ''"
onblur="this.placeholder = 'Enter Email Address'"
class="primary_input mb_20"
type="email" value="">
<span class="text-danger" role="alert"></span>
<label class="primary_label">Subject</label>
<input name="subject" required
placeholder="Enter your subject"
onfocus="this.placeholder = ''"
onblur="this.placeholder = 'Enter your subject'"
class="primary_input mb_20" type="text"
value="">
<span class="text-danger" role="alert"></span>
</div>
<div class="col-lg-12">
<label class="primary_label">Message</label>
<textarea required class="primary_textarea mb-0" name="message"
placeholder="Write your message"
onfocus="this.placeholder = ''"
onblur="this.placeholder = 'Write your message'"
></textarea>
<span class="text-danger" role="alert"></span>
</div>
<div class="col-12 mt_10 mb_20">
</div>
<div class="col-lg-12 text-left">
<div class="alert-msg"></div>
<button type="submit" id="ankitganja"
class="theme_btn small_btn submit-btn w-100 text-center">
Send Message
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
const phoneInputField = document.querySelector("#contact_phone");
if (phoneInputField) {
const phoneInput = window.intlTelInput(phoneInputField, {
initialCountry: "auto",
separateDialCode: true,
dropdownContainer: document.body,
geoIpLookup: function (callback) {
fetch("https://ipapi.co/json")
.then(res => res.json())
.then(data => callback(data.country_code))
.catch(() => callback("in"));
},
utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
});
// Expose globally so the reCAPTCHA onSubmit callback can also access it
window._contactPhoneInput = phoneInput;
const fullField = document.getElementById("contact_phone_full");
const form = document.querySelector("#myForm1");
if (form) {
form.addEventListener("submit", function (e) {
// Validate that a number has been entered
if (phoneInputField.value.trim() === "") {
phoneInputField.focus();
e.preventDefault();
return;
}
// Write the full international number (+91XXXXXXXXXX) into the hidden field
if (fullField) {
fullField.value = phoneInput.getNumber();
}
});
}
}
});
</script>
<script>
$(document).ready(function () {
// append token
let _token = $('input[name=csrf_token]').val();
$('input[name=_token]').val(_token);
});
</script>
<style>
/*footer{
background-color:#ffff;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
footer .footer_top_area .footer__cta .cta_content h3{
color: #123897;
}footer .footer_top_area .footer__cta .cta_content p{
color:#656871;
}footer .copyright_area .footer_widget p{
color:#656871;
}footer .copyright_area .footer_widget .footer_title h3{
color: #123897;
}footer .copyright_area .footer_widget .footer_links li a{
color:rgb(34, 36, 40);
}.theme_mailChimp .form-control, .theme_mailChimp button{
}
footer {
position: relative;
padding-bottom: 60px;
footer {
background-color:#ffff;
padding-top: 20px;
padding-bottom: 0;
position: relative;
font-family: 'Montserrat', sans-serif;
}*/
.footer_widget .footer_logo img {
max-width: 180px;
margin-bottom: 20px;
}
.footer_widget p.footer-about-text {
color: #5a6275;
font-size: 14px;
line-height: 1.7;
margin-bottom: 20px;
}
.footer-contact-list {
list-style: none;
padding-left: 0;
margin: 0;
margin-top: 0;
}
.footer-contact-list li {
color: #333;
font-weight: 500;
margin-bottom: 8px;
font-size: 14px;
}
.footer-contact-list li a{
color: #333;
text-decoration: none;
}
.footer-contact-list li a:hover{
color: #123897;
}
.footer-contact-list li strong {
color: #123897;
min-width: 60px;
display: inline-block;
}
.footer-heading {
display: flex;
align-items: center;
margin-bottom: 25px;
}
.footer-heading-icon {
width: 36px;
height: 36px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
margin-right: 12px;
background: linear-gradient(135deg, #89f7fe, #66a6ff);
color: #fff;
font-size: 16px;
flex-shrink: 0;
}
.footer-heading-text {
font-size: 18px;
font-weight: 600;
color: #123897;
position: relative;
padding-bottom: 5px;
}
.footer-heading-text::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 40px;
height: 3px;
background: linear-gradient(90deg, #0b47f9, #55b2e3 51%, #0b47f9);
}
.footer_widget ul {
list-style: none;
padding-left: 0;
margin: 0;
}
.footer_widget ul li {
margin-bottom: 12px;
}
.footer_widget ul li a {
color: #5a6275;
font-weight: 500;
font-size: 15px;
text-decoration: none;
position: relative;
transition: color 0.3s ease;
}
.footer_widget ul li a:hover {
color: #123897;
}
.footer_widget ul li a::after {
content: '';
position: absolute;
width: 0;
height: 1px;
display: block;
margin-top: 2px;
right: 0;
background: #123897;
transition: width 0.3s ease;
-webkit-transition: width 0.3s ease;
}
.footer_widget ul li a:hover::after {
width: 100%;
left: 0;
background-color: #123897;
}
.footer_widget .footer_title {
display: flex;
align-items: center;
margin-bottom: 25px;
min-height: 36px;
}
.footer_widget .footer_title h3 {
font-size: 18px;
font-weight: 600;
color: #123897;
position: relative;
padding-bottom: 5px;
margin-bottom: 0;
}
.footer_widget .footer_title h3::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 40px;
height: 3px;
background: linear-gradient(90deg, #0b47f9, #55b2e3 51%, #0b47f9);
}
.footer-divider {
height: 3px;
background: linear-gradient(90deg, #0b47f9, #55b2e3 51%, #0b47f9);
border: none;
margin: 30px 0 15px 0;
}
.location-group h5 {
font-weight: 600;
color: #123897;
margin-bottom: 15px;
font-size: 18px;
}
.location-group ul {
list-style: none;
padding-left: 0;
}
.location-group .footer_links li {
margin-bottom: 10px;
}
.location-group .footer_links a {
font-size: 15px;
font-weight: 600;
color: #5a6275;
text-decoration: none;
transition: all 0.3s ease;
}
.location-group .footer_links a:hover {
color: #123897;
padding-left: 5px;
}
.bottom-footer-bar {
background-color: #fff;
padding: 15px 0;
margin-top: 0;
}
.bottom-footer-left .language-text {
font-size: 14px;
color: #5a6275;
margin-bottom: 10px;
font-weight: 500;
}
.country-pill .btn {
display: inline-flex;
align-items: center;
padding: 10px 22px;
font-size: 15px;
border-radius: 50px;
margin-right: 8px;
margin-bottom: 8px;
border: 2px solid #e2e8f0;
background-color: #fff;
color: #5a6275;
font-weight: 600;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.country-pill .btn img {
width: 16px;
margin-right: 5px;
}
.country-pill .btn:nth-child(1) { background-color: #e0f2fe; border-color: #bae6fd; color: #0284c7; }
.country-pill .btn:nth-child(2) { background-color: #fee2e2; border-color: #fecaca; color: #dc2626; }
.country-pill .btn:nth-child(3) { background-color: #dcfce7; border-color: #bbf7d0; color: #16a34a; }
.country-pill .btn:nth-child(4) { background-color: #ffedd5; border-color: #fed7aa; color: #ea580c; }
.country-pill .btn:nth-child(5) { background-color: #f3e8ff; border-color: #e9d5ff; color: #9333ea; }
.country-pill .btn:hover {
transform: scale(1.1);
border-color: #123897;
color: #123897;
box-shadow: 0 8px 15px rgba(18, 56, 151, 0.15);
}
.social-icons-footer a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
font-size: 20px;
border-radius: 50%;
color: #fff;
margin-left: 8px;
text-decoration: none;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.social-icons-footer a:hover {
transform: scale(1.2);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.social-icons-countries a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
font-size: 20px;
border-radius: 50%;
color: #fff;
margin-left: 8px;
text-decoration: none;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.social-icons-countries a:hover {
transform: scale(1.2);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
@media (min-width: 992px) {
.social-icons-countries {
margin-right: 50px;
}
}
.social-fb { background-color: #1877F2; }
.social-ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.social-li { background-color: #0A66C2; }
.social-x { background-color: #000000; }
.social-yt { background-color: #FF0000; }
.social-wa { background-color: #25D366; }
@media (max-width: 991px) {
.footer_widget { margin-bottom: 30px; }
.bottom-footer-bar .row > div {
text-align: center !important;
margin-bottom: 15px;
}
.social-icons-footer { justify-content: center; }
}
#toast-container > div {
opacity: 1 !important;
background-color: rgba(40, 48, 63, 0.95) !important;
color: #fff !important;
border-radius: 6px !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.25) !important;
backdrop-filter: blur(6px);
}
#toast-container > div .toast-message {
color: #fff !important;
font-size: 14px;
font-weight: 500;
}
#toast-container .toast-close-button {
color: #fff !important;
opacity: 1 !important;
}
.toast-success { background-color: #28a745 !important; }
.toast-error { background-color: #dc3545 !important; }
.toast-info { background-color: #17a2b8 !important; }
.toast-warning { background-color: #ffc107 !important; color: #000 !important; }
.footer-right-corner {
position: absolute;
bottom: 60px;
right: 80px;
text-align: right;
}
.footer-right-corner div {
display: flex;
justify-content: flex-end;
gap: 5px;
align-items: center;
margin-bottom: 5px;
}
.footer-right-corner img {
width: 24px;
height: 24px;
transition: transform 0.3s ease;
}
.footer-right-corner img:hover { transform: scale(1.2); }
.fw-semibold { font-weight: bold; margin-right: 5px; }
@media (max-width: 991px) {
.footer-right-corner {
position: static;
text-align: center;
margin-top: 40px;
}
.footer-right-corner div {
justify-content: center;
flex-wrap: wrap;
gap: 8px;
}
}
@media (max-width: 767px) {
.footer_widget { text-align: left !important; }
.footer-right-corner img { width: 20px; height: 20px; }
}
</style>
<script src="https://www.thetutorx.com/public/js/common.js?v=6.5.1
"></script>
<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=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<div class="aoraeditor-skip aoraeditor-footer">
<div>
</div>
<footer class="">
<div class="copyright_area">
<div class="container-fluid px-5">
<div class="row pt-4">
<div class="containers">
<div class="row pt-4 ml-lg-5">
<div class="col-xl-3 col-lg-4 col-md-6 mb-4 mb-xl-0">
<div class="footer_widget">
<div class="footer_logo">
<a href="/"><img src="https://www.thetutorx.com/public/uploads/main/files/10-02-2026/TAGLINE (1).png" alt="" style="width: 180px"></a>
</div>
<p class="footer-about-text">TutorX is a leading education-based company.It offering a wide range of courses aligned with Australia, UK, US, and Canada curricula.</p>
</div>
</div>
<div class="col-xl-6 col-lg-8 col-md-6">
<div class="row">
<div class="col-lg-4 footer-links">
<div class="footer_widget">
<div class="footer_title">
<h3>Company</h3>
</div>
<ul class="footer_links">
<li><a href="https://www.thetutorx.com/privacy-policy-and-cookie-policy">Privacy policy </a></li>
<li><a href="https://www.thetutorx.com/terms">Terms </a></li>
<li><a href="https://www.thetutorx.com/about-us">About Us </a></li>
<li><a href="https://www.thetutorx.com/blog">Blog </a></li>
<li><a href="https://www.thetutorx.com/become-instructor">Become Instructor </a></li>
<li><a href="https://www.thetutorx.com/contact-us">Contact Us </a></li>
<li><a href="https://www.thetutorx.com/help-and-support">Help and Support </a></li>
<li><a href="https://www.thetutorx.com/courses-details/expat-tutoring">Expact Tutoring </a></li>
<li><a href="https://www.thetutorx.com/career">Career </a></li>
</ul>
</div>
</div>
<div class="col-lg-4 footer-links">
<div class="footer_widget">
<div class="footer_title">
<h3>Learn with TutorX</h3>
</div>
<ul class="footer_links">
<li><a href="https://www.thetutorx.com/courses-details/coding-course">Coding Classes </a></li>
<li><a href="https://www.thetutorx.com/courses-details/yoga-course">Yoga Courses </a></li>
<li><a href="https://www.thetutorx.com/courses-details/language-course">Language Learning </a></li>
<li><a href="https://www.thetutorx.com/courses-details/robotic-course">Robotic Courses </a></li>
<li><a href="https://www.thetutorx.com/courses-details/abacus-and-vedic-math-course">Mental Math </a></li>
</ul>
</div>
</div>
<div class="col-lg-4 footer-links">
<div class="footer_widget">
<div class="footer_title">
<h3>Contact Us</h3>
</div>
<ul class="footer_links">
<li><a href="tel:">AUS- (+61) 468093240 </a></li>
<li><a href="tel:">UK- (+44) 7401113826 </a></li>
<li><a href="tel:">USA- (+1) 8047075581 </a></li>
<li><a href="tel:">CA- (+1) 2172172024 </a></li>
<li><a href="#">IN- (+91) 9013504886 </a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-md-6 mb-4 mb-lg-0">
<div class="footer_widget">
<div class="footer-heading">
<span class="footer-heading-icon"><i class="fas fa-book-open"></i></span>
<h3 class="footer-heading-text">Test Preparation</h3>
</div>
<ul class="footer_links">
<li><a href="https://www.thetutorx.com/courses-details/naplan-test-prep">NAPLAN Test</a></li>
<li><a href="https://www.thetutorx.com/courses-details/oc-test-prep">NSW OC Test</a></li>
<li><a href="https://www.thetutorx.com/courses-details/wa-aset-gate-test-prep">WA ASET/GATE Test</a></li>
<li><a href="https://www.thetutorx.com/courses-details/11-plus-test-prep">11+ Test</a></li>
<li><a href="https://www.thetutorx.com/courses-details/13-plus-test-prep">13+ Test</a></li>
<li><a href="https://www.thetutorx.com/courses-details/a-level-test-prep">A-level Prep</a></li>
<li><a href="https://www.thetutorx.com/courses-details/gcse-test-prep">GCSEs Prep</a></li>
</ul>
</div>
</div>
</div>
<hr class="footer-divider">
<div class="row ml-lg-5">
<div class="col-12">
<div class="footer-heading">
<span class="footer-heading-icon"><i class="fas fa-map-marker-alt"></i></span>
<h3 class="footer-heading-text">Top Locations</h3>
</div>
<div class="row">
<div class="col-lg-3 col-md-6">
<div class="location-group">
<h5>Australia</h5>
<ul class="footer_links">
<li><a href="#">Tutoring in Sydney</a></li>
<li><a href="#">Tutoring in Melbourne</a></li>
<li><a href="#">Tutoring in Brisbane</a></li>
</ul>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="location-group">
<h5>UK</h5>
<ul class="footer_links">
<li><a href="#">Tutoring in London</a></li>
<li><a href="#">Tutoring in Manchester</a></li>
<li><a href="#">Tutoring in Birmingham</a></li>
</ul>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="location-group">
<h5>USA</h5>
<ul class="footer_links">
<li><a href="#">Tutoring in Chicago</a></li>
<li><a href="#">Tutoring in New York</a></li>
<li><a href="#">Tutoring in Los Angeles</a></li>
</ul>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="location-group">
<h5>Canada</h5>
<ul class="footer_links">
<li><a href="#">Tutoring in Toronto</a></li>
<li><a href="#">Tutoring in Vancouver</a></li>
<li><a href="#">Tutoring in Montreal</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<hr class="footer-divider">
</div>
</div>
</div>
</div>
<div class="bottom-footer-bar">
<div class="container-countries">
<div class="row align-items-end ml-lg-5">
<div class="col-lg-6 mb-3 mb-lg-0">
<div class="bottom-footer-left">
<div class="footer-heading">
<span class="footer-heading-icon"><i class="fas fa-globe-americas"></i></span>
<h3 class="footer-heading-text">Select Countries</h3>
</div>
<div class="country-pill">
<a href="https://www.thetutorx.com/country-info/au" class="btn"><img src="/public/uploads/main/images/23-04-2025/flag.png" alt="Australia"> Australia</a>
<a href="https://www.thetutorx.com/country-info/uk" class="btn"><img src="/public/uploads/main/images/23-04-2025/united-kingdom.png" alt="UK"> UK</a>
<a href="https://www.thetutorx.com/country-info/us" class="btn"><img src="/public/uploads/main/images/23-04-2025/united-states.png" alt="USA"> USA</a>
<a href="https://www.thetutorx.com/country-info/ca" class="btn"><img src="/public/uploads/main/images/23-04-2025/canada.png" alt="Canada"> Canada</a>
<a href="#" class="btn"><img src="/public/uploads/main/images/23-04-2025/india.png" alt="India"> India</a>
</div>
</div>
</div>
<div class="col-lg-6 text-center text-lg-end">
<div class="social-icons-countries">
<a href="https://www.facebook.com/share/1D6aF1TXdm/?mibextid=wwXIfr" class="social-fb"><i class="fab fa-facebook-f"></i></a>
<a href="https://www.instagram.com/the_tutorx?igsh=MXcyZXRuNjR2Ym1mNA%3D%3D&utm_source=qr" class="social-ig"><i class="fab fa-instagram"></i></a>
<a href="https://www.linkedin.com/company/tutorxindia/posts/?feedView=all" class="social-li"><i class="fab fa-linkedin-in"></i></a>
<a href="https://www.youtube.com/@TheTutorXEdu" class="social-yt"><i class="fab fa-youtube"></i></a>
</div>
</div>
</div>
<div class="row ml-lg-5">
<div class="col-12">
<div class="copyright_text mt-3 text-center text-lg-start">
<p style="font-size: 12px; color: #6c757d;"><p>Copyright © 2026 TutorX. All rights reserved.</p></p>
</div>
</div>
</div>
</div>
</div>
</footer>
<div class="shoping_wrapper">
<div class="dark_overlay"></div>
<div class="shoping_cart">
<div class="shoping_cart_inner">
<div class="cart_header d-flex justify-content-between">
<h4>Shopping Cart</h4>
<div class="chart_close"><i class="ti-close"></i></div>
</div>
<div id="cartView">
<div class="single_cart">Loading...</div>
</div>
</div>
<div class="view_checkout_btn d-flex justify-content-end gap_10 flex-wrap" style="display: none!important;">
<a href="https://www.thetutorx.com/my-cart" class="theme_btn small_btn3 flex-fill text-center">View cart</a>
<a href="https://www.thetutorx.com/my-cart?checkout=1" class="theme_btn small_btn3 flex-fill text-center">Checkout</a>
</div>
</div>
</div>
<div id="back-top" style="display: none;">
<a title="Go to Top" href="#"><i class="fa fa-angle-up"></i></a>
</div>
<input type="hidden" name="item_list" class="item_list" value="https://www.thetutorx.com/getItemList">
<input type="hidden" name="enroll_cart" class="enroll_cart" value="https://www.thetutorx.com/enrollOrCart">
<input type="hidden" name="csrf_token" class="csrf_token" value="skiXeOkxRiSP7Zq6VjdbWCHbpYU8fMH79e5IFPMH">
<input type="hidden" id="baseUrl" value="https://www.thetutorx.com">
<div>
<style>
.remove_cart {
margin-left: -22px;
margin-right: 8px;
cursor: pointer;
}
.theme_cookies {
background: #FFEDE2;
}
.theme_cookies .cookie_btn {
background: #F8D4BE;
}
.cookie-setting-details {
transition: all 0.4s ease-in-out;
max-width: 100% !important;
}
.height-none {
height: 0;
overflow: hidden;
}
.theme_btn_outline {
background: transparent;
border-radius: 5px;
font-family: Source Sans Pro, sans-serif;
font-size: 16px;
color: var(--system_primery_color);
font-weight: 600;
padding: 21px 28px;
text-transform: capitalize;
display: inline-block;
line-height: 1;
border: 1px solid var(--system_primery_color);
}
.theme_btn_outline:hover {
background: var(--system_primery_color);
color: #ffffff
}
@media (min-width: 576px) {
.modal-dialog {
max-width: 500px;
}
}
@media (min-width: 1080px) {
.modal-dialog {
max-width: 800px;
}
}
</style>
<div class="theme_cookies" style="display: none">
<div class="theme_cookies_info flex-fill">
<div class="icon">
<img src="https://www.thetutorx.com/public/frontend/tutorxtheme/img/icon/cookies_icon.svg" alt="">
</div>
<p>We collect and use cookies to give you the best and most relevant website experience. Kindly accept the cookies.
<a href='' >Privacy Policy</a>
</p>
<button type="button" class="cookie_btn" onclick="setCookies(1);">I Accept</button>
<button type="button" class="cookie_btn" data-bs-toggle="modal"
data-bs-target="#cookieSettingsModal">Customize Setting</button>
<!-- Modal -->
<div class="modal fade" id="cookieSettingsModal" tabindex="-1" aria-labelledby="cookieModal"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalToggleLabel">GDPR</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">
When you visit any of our websites, it may store or retrieve information on your browser, mostly in the form of cookies. This information might be about you, your preferences or your device and is mostly used to make the site work as you expect it to. The information does not usually directly identify you, but it can give you a more personalized web experience. Because we respect your right to privacy, you can choose not to allow some types of cookies. Click on the different category headings to find out more and manage your preferences. Please note, that blocking some types of cookies may impact your experience of the site and the services we are able to offer
<ul class="mt-3 cookie-setting-list">
<li>
<div class="d-flex align-items-center mb-2">
<label class="primary_checkbox d-flex mb-0">
<input type="checkbox" class="cookie_type" value="strictly" disabled
checked/>
<span class="checkmark mr_15"></span>
<span class="label_name">Strictly Necessary</span>
</label>
<i class="far fa-question-circle ms-2" style="cursor: pointer"
onclick="displayCookieSettingDetails(this)"></i>
</div>
<p class="height-none cookie-setting-details my-3">
These cookies are necessary for our website to function properly and cannot be switched off in our systems. They are usually only set in response to actions made by you that amount to a request for services, such as setting your privacy preferences, logging in or filling in forms, or where they’re essential to providing you with a service you have requested. You cannot opt out of these cookies. You can set your browser to block or alert you about these cookies, but if you do, some parts of the site will not then work. These cookies do not store any personally identifiable information
</p>
</li>
<li>
<div class="d-flex align-items-center mb-2">
<label class="primary_checkbox d-flex mb-0">
<input type="checkbox" class="cookie_type" value="performance"/>
<span class="checkmark mr_15"></span>
<span class="label_name">Performance Cookies</span>
</label>
<i class="far fa-question-circle ms-2" style="cursor: pointer"
onclick="displayCookieSettingDetails(this)"></i>
</div>
<p class="height-none cookie-setting-details my-3">
These cookies allow us to count visits and traffic sources so we can measure and improve the performance of our site. They help us to know which pages are the most and least popular and see how visitors move around the site, which helps us optimize your experience. All information these cookies collect is aggregated and therefore anonymous. If you do not allow these cookies we will not be able to use your data in this way.
</p>
</li>
<li>
<div class="d-flex align-items-center mb-2">
<label class="primary_checkbox d-flex mb-0">
<input type="checkbox" class="cookie_type" value="functional"/>
<span class="checkmark mr_15"></span>
<span class="label_name">Functional Cookies</span>
</label>
<i class="far fa-question-circle ms-2" style="cursor: pointer"
onclick="displayCookieSettingDetails(this)"></i>
</div>
<p class="height-none cookie-setting-details my-3">
These cookies enable the website to provide enhanced functionality and personalization. They may be set by us or by third-party providers whose services we have added to our pages. If you do not allow these cookies then some or all of these services may not function properly.
</p>
</li>
<li>
<div class="d-flex align-items-center mb-2">
<label class="primary_checkbox d-flex mb-0">
<input type="checkbox" class="cookie_type" value="targeting"/>
<span class="checkmark mr_15"></span>
<span class="label_name">Targeting Cookies</span>
</label>
<i class="far fa-question-circle ms-2" style="cursor: pointer"
onclick="displayCookieSettingDetails(this)"></i>
</div>
<p class="height-none cookie-setting-details my-3">
These cookies may be set through our site by our advertising partners. They may be used by those companies to build a profile of your interests and show you relevant adverts on other sites. They do not store directly personal information but are based on uniquely identifying your browser and internet device. If you do not allow these cookies, you will experience less targeted advertising.
</p>
</li>
</ul>
</div>
<div class="modal-footer">
<button type="button" onclick="setCookies();"
class="theme_btn">Confirm My Choices
</button>
<button type="button"
class="theme_btn_outline"
onclick="setCookies(1);">Accept All
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!--<script src="https://cdn.jsdelivr.net/jquery-validation/1.19.5/jquery.validate.min.js"></script>-->
<script>
$(document).ready(function () {
checkCookie();
});
function setCookies(type = 0) {
$('.theme_cookies').hide(500);
let d = new Date();
let items;
if (type === 1) {
items = $('.cookie_type');
} else {
items = $(".cookie_type:checked");
}
// set type of cookie allow
items.each(function () {
document.cookie = $(this).val() + "_allow=1; expires=Thu, 21 Dec " + (d.getFullYear() + 1) + " 12:00:00 UTC";
});
//set allow cookie
document.cookie = "allow=1; expires=Thu, 21 Dec " + (d.getFullYear() + 1) + " 12:00:00 UTC";
//hide modal if open modal
$('#cookieSettingsModal').modal('hide');
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function checkCookie() {
var check = getCookie("allow");
if (check != "") {
$('.theme_cookies').hide();
} else {
$('.theme_cookies').show();
}
}
// function to show hide cookie setting details
function displayCookieSettingDetails(element) {
let cookieSettingElement = element.parentElement;
let detailsElement = cookieSettingElement.parentElement.querySelector(".cookie-setting-details");
detailsElement.classList.toggle("height-none")
}
</script>
</div>
<div class="modal fade leaderboard-boarder" id="myLeaderBoard" tabindex="-1" role="dialog" aria-labelledby="myLeaderBoard" aria-hidden="true">
<div class="modal-dialog modal-xl modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title fs-5">Leaderboard</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<div class="reward-leader">
<ul class="nav nav-tabs border-bottom-0 m-0" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link nav-point type-point" id="point-tab" data-toggle="tab" data-target="#point" data-type="point" type="button" role="tab">Points</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link nav-point type-level" id="level-tab" data-toggle="tab" data-target="#level" data-type="level" type="button" role="tab">Levels</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link nav-point type-badge" id="badge-tab" data-toggle="tab" data-target="#badge" data-type="badge" type="button" role="tab">Badges</button>
</li>
</ul>
<div id="leaderboardBody" class="leaderboardBody"></div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade noticeboard-modal" id="myNoticeboard" tabindex="-1" role="dialog" aria-labelledby="myNoticeboard" aria-hidden="true">
<div class="modal-dialog modal-xl modal-dialog-centered" id="myNoticeboardBody"></div>
</div>
<div class="modal fade admin-query" id="bookdemo">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<form action="https://www.thetutorx.com/book-demo-old" method="post">
<input type="hidden" name="_token" value="skiXeOkxRiSP7Zq6VjdbWCHbpYU8fMH79e5IFPMH" autocomplete="off"> <input type="hidden" name="recaptcha_token" id="recaptcha_token">
<input type="hidden" name="type" value="Demo"/>
<div class="modal-header">
<h4 class="modal-title">Book a Free Demo Class</h4>
<button type="button" class="close" data-dismiss="modal"><i class="ti-close"></i></button>
</div>
<div class="modal-body">
<div class="text-center">
<div class="row demo-modal">
<div class="col-lg-6">
<label>Name</label>
<input type="text" class="form-control" name="booking_name" id="booking_name"/>
</div>
<div class="col-lg-6">
<label>Email-id</label>
<input type="email" class="form-control" name="booking_email" id="booking_email"/>
</div>
<div class="col-lg-4">
<label>Country</label>
<select class="primary_select form-control" name="booking_campaign" id="booking_campaign_id">
<option value="">Country</option>
<option code="AU" value="231">Australia</option>
<option code="XK" value="229">Kosovo</option>
<option code="GL" value="228">Greenland</option>
<option code="PR" value="227">Puerto Rico</option>
<option code="MO" value="226">Macau</option>
<option code="HK" value="225">Hong Kong</option>
<option code="PS" value="224">Palestine</option>
<option code="ZW" value="223">Zimbabwe</option>
<option code="ZM" value="222">Zambia</option>
<option code="YE" value="221">Yemen</option>
<option code="VN" value="220">Vietnam</option>
<option code="VE" value="219">Venezuela</option>
<option code="VA" value="218">Vatican City</option>
<option code="VU" value="217">Vanuatu</option>
<option code="UZ" value="216">Uzbekistan</option>
<option code="UY" value="215">Uruguay</option>
<option code="GB" value="213">United Kingdom</option>
<option code="AE" value="212">United Arab Emirates</option>
<option code="UA" value="211">Ukraine</option>
<option code="UG" value="210">Uganda</option>
<option code="TV" value="209">Tuvalu</option>
<option code="TM" value="208">Turkmenistan</option>
<option code="TR" value="207">Turkey</option>
<option code="TN" value="206">Tunisia</option>
<option code="TT" value="205">Trinidad and Tobago</option>
<option code="TO" value="204">Tonga</option>
<option code="TG" value="203">Togo</option>
<option code="TL" value="202">Timor Leste</option>
<option code="TH" value="201">Thailand</option>
<option code="TZ" value="200">Tanzania</option>
<option code="TJ" value="199">Tajikistan</option>
<option code="TW" value="198">Taiwan</option>
<option code="SY" value="197">Syria</option>
<option code="CH" value="196">Switzerland</option>
<option code="SE" value="195">Sweden</option>
<option code="SR" value="194">Suriname</option>
<option code="SS" value="193">South Sudan</option>
<option code="SD" value="192">Sudan</option>
<option code="LK" value="191">Sri Lanka</option>
<option code="ES" value="190">Spain</option>
<option code="ZA" value="189">South Africa</option>
<option code="SO" value="188">Somalia</option>
<option code="SB" value="187">Solomon Islands</option>
<option code="SI" value="186">Slovenia</option>
<option code="SK" value="185">Slovakia</option>
<option code="SG" value="184">Singapore</option>
<option code="SL" value="183">Sierra Leone</option>
<option code="SC" value="182">Seychelles</option>
<option code="RS" value="181">Serbia</option>
<option code="SN" value="180">Senegal</option>
<option code="SA" value="179">Saudi Arabia</option>
<option code="ST" value="178">Sao Tome and Principe</option>
<option code="SM" value="177">San Marino</option>
<option code="WS" value="176">Samoa</option>
<option code="VC" value="175">Saint Vincent and the Grenadines</option>
<option code="LC" value="174">Saint Lucia</option>
<option code="KN" value="173">Saint Kitts and Nevis</option>
<option code="RW" value="172">Rwanda</option>
<option code="RU" value="171">Russia</option>
<option code="RO" value="170">Romania</option>
<option code="QA" value="169">Qatar</option>
<option code="PT" value="168">Portugal</option>
<option code="PL" value="167">Poland</option>
<option code="PH" value="166">Philippines</option>
<option code="PE" value="165">Peru</option>
<option code="PY" value="164">Paraguay</option>
<option code="PG" value="163">Papua New Guinea</option>
<option code="PA" value="162">Panama</option>
<option code="PW" value="161">Palau</option>
<option code="PK" value="160">Pakistan</option>
<option code="OM" value="159">Oman</option>
<option code="NO" value="158">Norway</option>
<option code="MK" value="157">North Macedonia</option>
<option code="NG" value="156">Nigeria</option>
<option code="NE" value="155">Niger</option>
<option code="NI" value="154">Nicaragua</option>
<option code="NZ" value="153">New Zealand</option>
<option code="NL" value="152">Netherlands</option>
<option code="NP" value="151">Nepal</option>
<option code="NR" value="150">Nauru</option>
<option code="NA" value="149">Namibia</option>
<option code="MM" value="148">Myanmar</option>
<option code="MZ" value="147">Mozambique</option>
<option code="MA" value="146">Morocco</option>
<option code="ME" value="145">Montenegro</option>
<option code="MN" value="144">Mongolia</option>
<option code="MC" value="143">Monaco</option>
<option code="MD" value="142">Moldova</option>
<option code="FM" value="141">Micronesia</option>
<option code="MX" value="140">Mexico</option>
<option code="MU" value="139">Mauritius</option>
<option code="ME" value="138">Montenegro</option>
<option code="MN" value="137">Mongolia</option>
<option code="MC" value="136">Monaco</option>
<option code="MD" value="135">Moldova</option>
<option code="FM" value="134">Micronesia</option>
<option code="MX" value="133">Mexico</option>
<option code="MU" value="132">Mauritius</option>
<option code="MR" value="131">Mauritania</option>
<option code="MH" value="130">Marshall Islands</option>
<option code="MT" value="129">Malta</option>
<option code="ML" value="128">Mali</option>
<option code="MV" value="127">Maldives</option>
<option code="MY" value="126">Malaysia</option>
<option code="MW" value="125">Malawi</option>
<option code="MG" value="124">Madagascar</option>
<option code="LU" value="123">Luxembourg</option>
<option code="LT" value="122">Lithuania</option>
<option code="LI" value="121">Liechtenstein</option>
<option code="LY" value="120">Libya</option>
<option code="LR" value="119">Liberia</option>
<option code="LS" value="118">Lesotho</option>
<option code="LB" value="117">Lebanon</option>
<option code="LV" value="116">Latvia</option>
<option code="LA" value="115">Laos</option>
<option code="KG" value="114">Kyrgyzstan</option>
<option code="KW" value="113">Kuwait</option>
<option code="KR" value="112">Korea (South)</option>
<option code="KP" value="111">Korea (North)</option>
<option code="KI" value="110">Kiribati</option>
<option code="KE" value="109">Kenya</option>
<option code="KZ" value="108">Kazakhstan</option>
<option code="JO" value="107">Jordan</option>
<option code="JP" value="106">Japan</option>
<option code="JM" value="105">Jamaica</option>
<option code="IT" value="104">Italy</option>
<option code="IL" value="103">Israel</option>
<option code="IE" value="102">Ireland</option>
<option code="IQ" value="101">Iraq</option>
<option code="IR" value="100">Iran</option>
<option code="ID" value="99">Indonesia</option>
<option code="IN" value="98">India</option>
<option code="IS" value="97">Iceland</option>
<option code="HU" value="96">Hungary</option>
<option code="HN" value="95">Honduras</option>
<option code="HT" value="94">Haiti</option>
<option code="GY" value="93">Guyana</option>
<option code="GW" value="92">Guinea-Bissau</option>
<option code="GN" value="91">Guinea</option>
<option code="GT" value="90">Guatemala</option>
<option code="GD" value="89">Grenada</option>
<option code="GR" value="88">Greece</option>
<option code="GH" value="87">Ghana</option>
<option code="DE" value="86">Germany</option>
<option code="GE" value="85">Georgia</option>
<option code="GM" value="84">Gambia</option>
<option code="GA" value="83">Gabon</option>
<option code="FR" value="82">France</option>
<option code="FI" value="81">Finland</option>
<option code="FJ" value="80">Fiji</option>
<option code="ET" value="79">Ethiopia</option>
<option code="SZ" value="78">Eswatini</option>
<option code="EE" value="77">Estonia</option>
<option code="ER" value="76">Eritrea</option>
<option code="GQ" value="75">Equatorial Guinea</option>
<option code="SV" value="74">El Salvador</option>
<option code="EG" value="73">Egypt</option>
<option code="EC" value="72">Ecuador</option>
<option code="DO" value="71">Dominican Republic</option>
<option code="DM" value="70">Dominica</option>
<option code="DJ" value="69">Djibouti</option>
<option code="DK" value="68">Denmark</option>
<option code="CZ" value="67">Czech Republic</option>
<option code="CY" value="66">Cyprus</option>
<option code="CU" value="65">Cuba</option>
<option code="HR" value="64">Croatia</option>
<option code="CR" value="63">Costa Rica</option>
<option code="CD" value="62">Congo (Kinshasa)</option>
<option code="CG" value="61">Congo (Brazzaville)</option>
<option code="KM" value="60">Comoros</option>
<option code="CO" value="59">Colombia</option>
<option code="CL" value="57">Chile</option>
<option code="TD" value="56">Chad</option>
<option code="CF" value="55">Central African Republic</option>
<option code="CV" value="54">Cape Verde</option>
<option code="CM" value="52">Cameroon</option>
<option code="KH" value="51">Cambodia</option>
<option code="BI" value="50">Burundi</option>
<option code="BF" value="49">Burkina Faso</option>
<option code="BG" value="48">Bulgaria</option>
<option code="BN" value="47">Brunei</option>
<option code="BR" value="46">Brazil</option>
<option code="BW" value="45">Botswana</option>
<option code="BA" value="44">Bosnia and Herzegovina</option>
<option code="BO" value="43">Bolivia</option>
<option code="BT" value="42">Bhutan</option>
<option code="BJ" value="41">Benin</option>
<option code="BZ" value="39">Belize</option>
<option code="BE" value="38">Belgium</option>
<option code="BY" value="37">Belarus</option>
<option code="BB" value="36">Barbados</option>
<option code="BD" value="35">Bangladesh</option>
<option code="BH" value="34">Bahrain</option>
<option code="BS" value="33">Bahamas</option>
<option code="AZ" value="32">Azerbaijan</option>
<option code="AT" value="31">Austria</option>
<option code="AM" value="29">Armenia</option>
<option code="AR" value="28">Argentina</option>
<option code="AG" value="27">Antigua and Barbuda</option>
<option code="AO" value="26">Angola</option>
<option code="AD" value="25">Andorra</option>
<option code="DZ" value="24">Algeria</option>
<option code="AL" value="23">Albania</option>
<option code="AF" value="22">Afghanistan</option>
<option code="CN" value="21">China</option>
<option code="SG" value="20">Singapore</option>
<option code="CA" value="12">Canada</option>
<option code="UK" value="10">U.K.</option>
<option code="US" value="9">U.S.A</option>
</select>
</div>
<div class="col-lg-4">
<label>Country Code</label>
<input type="text" class="form-control" name="country_code" id="country_code" readonly/>
</div>
<div class="col-lg-4">
<label>Phone Number</label>
<input type="number" class="form-control" name="booking_phone" id="booking_phone"/>
</div>
<div class="col-lg-6">
<label>Demo Date</label>
<input type="date" class="form-control" name="booking_date" id="booking_date"/>
</div>
<div class="col-lg-6">
<label>Demo Time</label>
<input type="time" class="form-control" name="booking_time" id="booking_time"/>
</div>
<div class="col-lg-12">
<label>Timezone</label>
<input type="text" class="form-control" name="timezone" id="timezone"/>
</div>
<div class="col-lg-6 bookingGradeDiv">
<label>Grade</label>
<select class="primary_select form-control" name="booking_grade" id="booking_grade_id">
<option value="">Grade</option>
<option value="58">Professional Courses</option>
<option value="57">Test Preparation</option>
<option value="56">Kindergarten</option>
<option value="53">Grade 12</option>
<option value="52">Grade 11</option>
<option value="51">Grade 10</option>
<option value="50">Grade 9</option>
<option value="49">Grade 8</option>
<option value="48">Grade 7</option>
<option value="47">Grade 6</option>
<option value="46">Grade 5</option>
<option value="45">Grade 6</option>
<option value="44">Grade 4</option>
<option value="43">Grade 3</option>
<option value="42">Grade 2</option>
<option value="41">Grade 12</option>
<option value="40">Grade 11</option>
<option value="39">Grade 10</option>
<option value="38">Grade 9</option>
<option value="37">Grade 8</option>
<option value="36">Grade 7</option>
<option value="35">Grade 6</option>
<option value="34">Grade 5</option>
<option value="33">Grade 4</option>
<option value="32">Grade 3</option>
<option value="31">Grade 2</option>
<option value="30">Grade 12</option>
<option value="29">Grade 11</option>
<option value="28">Grade 10</option>
<option value="27">Grade 9</option>
<option value="26">Grade 8</option>
<option value="25">Grade 7</option>
<option value="24">Grade 6</option>
<option value="23">Grade 5</option>
<option value="22">Grade 4</option>
<option value="21">Grade 3</option>
<option value="20">Grade 2</option>
<option value="19">Grade 12</option>
<option value="18">Grade 11</option>
<option value="17">Grade 10</option>
<option value="16">Grade 9</option>
<option value="15">Grade 8</option>
<option value="14">Grade 7</option>
<option value="13">Grade 6</option>
<option value="12">Grade 5</option>
<option value="11">Grade 4</option>
<option value="10">Grade 3</option>
<option value="9">Grade 2</option>
<option value="7">Grade 1</option>
<option value="6">Grade 1</option>
<option value="5">Grade 1</option>
<option value="3">Grade 1</option>
</select>
</div>
<div class="col-lg-6">
<label>Subject</label>
<select class="primary_select form-control" name="booking_category" id="booking_category">
<option value="">Subject</option>
<option
value="59" >
ACET
</option>
<option
value="84" >
Naplan
</option>
<option
value="85" >
OC Test
</option>
<option
value="92" >
Selective Test
</option>
<option
value="93" >
TOFEL-AU
</option>
<option
value="94" >
ACER Test
</option>
<option
value="95" >
AST
</option>
<option
value="96" >
WA GATE/ASET
</option>
<option
value="97" >
11+ Test
</option>
<option
value="98" >
13+ Test
</option>
<option
value="99" >
GCSE
</option>
<option
value="100" >
A-Level
</option>
<option
value="101" >
CAT Test
</option>
<option
value="102" >
CEM Test
</option>
<option
value="103" >
ISEB Test
</option>
<option
value="104" >
SAT-AU
</option>
<option
value="105" >
IELTS -AU
</option>
<option
value="106" >
GRE
</option>
<option
value="107" >
GMAT
</option>
<option
value="108" >
PSAT
</option>
<option
value="109" >
AP Test
</option>
<option
value="156" >
TOEFL-UK
</option>
<option
value="157" >
SAT-UK
</option>
<option
value="158" >
IELTS-UK
</option>
<option
value="159" >
PSAT-UK
</option>
<option
value="160" >
ACET
</option>
<option
value="161" >
ACT-USA
</option>
<option
value="162" >
AP-USA
</option>
<option
value="163" >
STAAR-USA
</option>
<option
value="164" >
GRE-USA
</option>
<option
value="165" >
MCAT-USA
</option>
<option
value="166" >
PSAT-USA
</option>
<option
value="167" >
SAT-USA
</option>
<option
value="168" >
SSAT-USA
</option>
<option
value="169" >
IELTS-USA
</option>
<option
value="170" >
TOEFL-USA
</option>
<option
value="171" >
ACT-CA
</option>
<option
value="172" >
AP-CA
</option>
<option
value="173" >
GRE-CA
</option>
<option
value="174" >
LSAT-CA
</option>
<option
value="175" >
MCAT-CA
</option>
<option
value="176" >
NCLEX-CA
</option>
<option
value="177" >
PSAT-CA
</option>
<option
value="178" >
IELTS-CA
</option>
<option
value="179" >
SAT-CA
</option>
<option
value="180" >
SSAT-CA
</option>
<option
value="181" >
TOEFL-CA
</option>
<option
value="182" >
Primary School
</option>
<option
value="183" >
Secondary School(7-10)
</option>
<option
value="184" >
Senior Secondary(11-12)
</option>
<option
value="185" >
University
</option>
<option
value="186" >
Key Stage 1
</option>
<option
value="187" >
Key Stage 2
</option>
<option
value="188" >
Key Stage 3
</option>
<option
value="189" >
Key Stage 4
</option>
<option
value="190" >
Elementary School
</option>
<option
value="191" >
Middle School
</option>
<option
value="192" >
High School
</option>
<option
value="193" >
Kindergarten
</option>
<option
value="194" >
Primary Education
</option>
<option
value="195" >
Secondary Education
</option>
<option
value="196" >
Coding
</option>
<option
value="197" >
Yoga
</option>
<option
value="198" >
Abacus Course
</option>
<option
value="199" >
Vedic Math Course
</option>
<option
value="200" >
Music Course
</option>
<option
value="201" >
Language Course
</option>
<option
value="202" >
Robotic Course
</option>
<option
value="203" >
Computing Course
</option>
<option
value="205" >
University-AU
</option>
<option
value="206" >
University-UK
</option>
<option
value="207" >
University-USA
</option>
<option
value="208" >
University-Canada
</option>
<option
value="259" >
Accounting
</option>
<option
value="209" >
Key Stage 5
</option>
<option
value="256" >
Programming Languages
</option>
<option
value="257" >
Tutoring
</option>
<option
value="258" >
Math
</option>
<option
value="260" >
Mont subject
</option>
<option
value="261" >
Mont-sub subject 1
</option>
<option
value="262" >
Chess
</option>
</select>
</div>
<div class="col-lg-12">
<label>Message</label>
<textarea class="form-control" name="booking_desc" id="booking_desc"></textarea>
</div>
</div>
</div>
<div class="mt-40 d-flex justify-content-between demo-modal-btns">
<button type="button" class="primary-btn tr-bg" data-dismiss="modal">Cancel</button>
<button class="primary-btn fix-gr-bg" type="submit">Book</button>
</div>
</div>
</form>
</div>
</div>
</div>
<script src="https://www.thetutorx.com/public/frontend/tutorxtheme/js/app.js?v=6.5.1
"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"></script>
<script src="https://www.thetutorx.com/public/backend/js/summernote-bs4.min.js?v=6.5.1
"></script>
<script async src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA7nx22ZmINYk9TGiXDEXGVxghC43Ox6qA&loading=async"></script>
<script src="https://www.thetutorx.com/public/frontend/tutorxtheme/js/map.js"></script>
<script src="https://www.thetutorx.com/public/frontend/tutorxtheme/js/contact.js?v=6.5.1
"></script>
<script type="text/javascript"></script>
<script src="https://www.thetutorx.com/public/frontend/tutorxtheme/js/class_details.js"></script>
<script src="https://www.thetutorx.com/public/frontend/tutorxtheme/js/videopopup.js"></script>
<script src="https://www.thetutorx.com/public/frontend/tutorxtheme/js/video.popup.js"></script>
<script>
(function ($) {
"use strict";
$(document).ready(function () {
//active tab state
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
localStorage.setItem('activeCourseTab', $(e.target).attr('href'));
});
let activeCourseTab = localStorage.getItem('activeCourseTab');
if (activeCourseTab) {
$('a[href="' + activeCourseTab + '"]').tab('show');
}
});
})(jQuery);
$("#formSubmitBtn").on("click", function (e) {
e.preventDefault();
var form = $('#deleteCommentForm');
var url = form.attr('action');
var element = form.data('element');
$.ajax({
type: "POST",
url: url,
data: form.serialize(),
success: function (data) {
location.reload();
}
});
var el = '#' + element;
$(el).hide('slow');
$('#deleteComment').modal('hide');
});
</script>
<script>
function deleteCommnet(item, element) {
let form = $('#deleteCommentForm')
form.attr('action', item);
form.attr('data-element', element);
}
</script>
<script>
var SITEURL = "https://www.thetutorx.com/courses-details/html-language";
var page = 1;
load_more(page);
$(window).scroll(function () { //detect page scroll
if ($(window).scrollTop() + $(window).height() >= $(document).height() - 400) {
page++;
load_more(page);
}
});
function load_more(page) {
$.ajax({
url: SITEURL + "?page=" + page,
type: "get",
datatype: "html",
data: {'type': 'comment'},
beforeSend: function () {
$('.ajax-loading').show();
}
})
.done(function (data) {
if (data.length == 0) {
//notify user if nothing to load
$('.ajax-loading').html("");
return;
}
$('.ajax-loading').hide(); //hide loading animation once data is received
$("#conversition_box").append(data); //append data into #results element
})
.fail(function (jqXHR, ajaxOptions, thrownError) {
console.log('No response from server');
});
}
load_more_review(page);
$(window).scroll(function () { //detect page scroll
if ($(window).scrollTop() + $(window).height() >= $(document).height() - 400) {
page++;
load_more_review(page);
}
});
function load_more_review(page) {
$.ajax({
url: SITEURL + "?page=" + page,
type: "get",
datatype: "html",
data: {'type': 'review'},
beforeSend: function () {
$('.ajax-loading').show();
}
})
.done(function (data) {
if (data.length == 0) {
//notify user if nothing to load
$('.ajax-loading').html("");
return;
}
$('.ajax-loading').hide(); //hide loading animation once data is received
$("#customers_reviews").append(data); //append data into #results element
})
.fail(function (jqXHR, ajaxOptions, thrownError) {
console.log('No response from server');
});
}
</script>
<script>
$(document).ready(function () {
var baseurl = $('#baseUrl').val();
$('.footer_widget .footer_title').each(function() {
var $h3 = $(this).find('h3');
if ($h3.length > 0) {
var text = $h3.text().trim().toLowerCase();
var iconClass = '';
if (text.includes('company')) { iconClass = 'fa-building'; }
else if (text.includes('learn')) { iconClass = 'fa-graduation-cap'; }
else if (text.includes('contact')) { iconClass = 'fa-headset'; }
if (iconClass) {
$(this).prepend('<span class="footer-heading-icon"><i class="fas ' + iconClass + '"></i></span>');
}
}
});
$(".bookdemoOld").on("click", function (e) {
e.preventDefault();
$('#bookdemo').modal('show');
$('#booking_campaign_id').val($('#campaign_id').val());
$('#booking_category').val($('#category').val());
var formData = { id: $('#campaign_id').val() };
$.ajax({
type: "GET", data: formData, dataType: "json",
url: baseurl+"/ajaxGetCampaignGrade",
success: function (data) {
$.each(data, function (i, item) {
if(item.length) {
$("#booking_grade_id").find("option").not(":first").remove();
$.each(item, function (i, section) {
$("#booking_grade_id").append($("<option>", { value: section.id, text: section.grade }));
});
} else {
$("#booking_grade_id").find("option").not(":first").remove();
}
});
$('#booking_grade_id').val($('#grade_id').val());
}
});
getCode();
});
const demoRoute = "https://www.thetutorx.com/demo";
$(".bookdemo").on("click", function (e) {
e.preventDefault();
window.location.href = demoRoute;
});
$(document).on('change','#booking_campaign_id', function(){ getCode(); });
function getCode(){
var code_select = document.querySelector("#booking_campaign_id");
var code = code_select.options[code_select.selectedIndex].getAttribute('code');
$.ajax({
type: "GET", data: { code: code }, dataType: "json",
url: baseurl+"/ajaxGetPhoneCode",
success: function (data) { $('#country_code').val(data[0].phonecode); }
});
}
$("#campaign_id").on("change", function () {
$.ajax({
type: "GET", data: { id: $(this).val() }, dataType: "json",
url: baseurl+"/ajaxGetCampaignGrade",
success: function (data) {
$.each(data, function (i, item) {
if (item.length) {
$("#grade_id").find("option").not(":first").remove();
$("#gradeDiv ul").find("li").not(":first").remove();
$.each(item, function (i, section) {
$("#grade_id").append($("<option>", { value: section.id, text: section.grade }));
$("#gradeDiv ul").append("<li data-value='" + section.id + "' class='option'>" + section.grade + "</li>");
});
$("#gradeDiv .current").html("Select Grade");
} else {
$("#gradeDiv .current").html("Select Grade");
$("#grade_id").find("option").not(":first").remove();
$("#gradeDiv ul").find("li").not(":first").remove();
}
});
}
});
});
$("#booking_campaign_id").on("change", function () {
$.ajax({
type: "GET", data: { id: $(this).val() }, dataType: "json",
url: baseurl+"/ajaxGetCampaignGrade",
success: function (data) {
$.each(data, function (i, item) {
if(item.length) {
$("#booking_grade_id").find("option").remove();
$("#booking_grade_id").append('<option value="">Select Grade</option>');
$.each(item, function (i, section) {
$("#booking_grade_id").append('<option value="' + section.id + '">' + section.grade + '</option>');
});
} else {
$(".bookingGradeDiv .current").html("Select Grade");
$("#booking_grade_id").find("option").not(":first").remove();
}
});
$('#booking_grade_id').val($('#grade_id').val());
$('#booking_grade_id option[value=""]').attr("selected", true);
}
});
getCode();
});
});
setTimeout(function () {
$('.preloader').fadeOut('hide', function () {});
}, 0);
$('#cartView').on('click', '.remove_cart', function () {
let id = $(this).data('id');
let total = $('.notify_count').html();
$(this).closest(".single_cart").hide();
$.ajax({
type: 'GET',
url: "https://www.thetutorx.com/home/removeItemAjax" + '/' + id,
success: function (data) {
let finalTotal = total - 1;
if (finalTotal < 0) finalTotal = 0;
$('.notify_count').html(finalTotal);
}
});
});
$(function () { $('.lazy').Lazy(); });
</script>
<script>
$(document).on('click', '.show_notify', function (e) { e.preventDefault(); });
if (!$('#main-nav-for-chat').length) {
$('#main-content').append('<div id="main-nav-for-chat" style="visibility: hidden;"></div>');
}
if (!$('#admin-visitor-area').length) {
$('#main-content').append('<div id="admin-visitor-area" style="visibility: hidden;"></div>');
}
</script>
</div>
.png)
AUS (+61) 468093240
UK (+44) 7401113826
USA (+1) 8047075581
CA (+1) 2172172024
IN (+91) 9013504886
