HTML & CSS: Building and Styling Webpages

Basic Structure: Defines the essential boilerplate for any HTML document, including the document type declaration, root element, metadata section, and visible page content.

: Declares the document type and version.

: The root element for the entire HTML page.

: Contains meta-information about the document, like character set and title.

: Encloses all the visible content of the webpage.

: Sets the title that appears in the browser tab or window.</span> </li> <li class="flex items-start"> <div class="flex-shrink-0 w-1.5 h-1.5 sm:w-2 sm:h-2 bg-primary-500 rounded-full mt-2 sm:mt-2.5 mr-2 sm:mr-3"></div> <span class="text-base sm:text-lg"></html>: The closing tag for the root HTML element.</span> </li> <li class="flex items-start"> <div class="flex-shrink-0 w-1.5 h-1.5 sm:w-2 sm:h-2 bg-primary-500 rounded-full mt-2 sm:mt-2.5 mr-2 sm:mr-3"></div> <span class="text-base sm:text-lg">Elements & Tags: Fundamental building blocks for structuring content.</span> </li> <li class="flex items-start"> <div class="flex-shrink-0 w-1.5 h-1.5 sm:w-2 sm:h-2 bg-primary-500 rounded-full mt-2 sm:mt-2.5 mr-2 sm:mr-3"></div> <span class="text-base sm:text-lg">Headings (h1-h6): Define hierarchical section titles, from most important (h1) to least (h6).</span> </li> <li class="flex items-start"> <div class="flex-shrink-0 w-1.5 h-1.5 sm:w-2 sm:h-2 bg-primary-500 rounded-full mt-2 sm:mt-2.5 mr-2 sm:mr-3"></div> <span class="text-base sm:text-lg">Paragraphs (<p>): Standard tags for blocks of text content.</span> </li> <li class="flex items-start"> <div class="flex-shrink-0 w-1.5 h-1.5 sm:w-2 sm:h-2 bg-primary-500 rounded-full mt-2 sm:mt-2.5 mr-2 sm:mr-3"></div> <span class="text-base sm:text-lg">Images (<img>): Embeds visual content into the webpage.</span> </li> <li class="flex items-start"> <div class="flex-shrink-0 w-1.5 h-1.5 sm:w-2 sm:h-2 bg-primary-500 rounded-full mt-2 sm:mt-2.5 mr-2 sm:mr-3"></div> <span class="text-base sm:text-lg">Links (<a>): Creates hyperlinks to other web pages or resources.</span> </li> <li class="flex items-start"> <div class="flex-shrink-0 w-1.5 h-1.5 sm:w-2 sm:h-2 bg-primary-500 rounded-full mt-2 sm:mt-2.5 mr-2 sm:mr-3"></div> <span class="text-base sm:text-lg">Lists (<ul>, <ol>, <li>): Organizes content into unordered (bulleted) or ordered (numbered) lists.</span> </li> <li class="flex items-start"> <div class="flex-shrink-0 w-1.5 h-1.5 sm:w-2 sm:h-2 bg-primary-500 rounded-full mt-2 sm:mt-2.5 mr-2 sm:mr-3"></div> <span class="text-base sm:text-lg">Divs (<div>) & Spans (<span>): Generic container elements for grouping content, with div for block-level and span for inline.</span> </li> <li class="flex items-start"> <div class="flex-shrink-0 w-1.5 h-1.5 sm:w-2 sm:h-2 bg-primary-500 rounded-full mt-2 sm:mt-2.5 mr-2 sm:mr-3"></div> <span class="text-base sm:text-lg">Tables (<table>): Structures data in rows and columns.</span> </li> <li class="flex items-start"> <div class="flex-shrink-0 w-1.5 h-1.5 sm:w-2 sm:h-2 bg-primary-500 rounded-full mt-2 sm:mt-2.5 mr-2 sm:mr-3"></div> <span class="text-base sm:text-lg">Semantics: Provides meaning to content, improving accessibility and SEO.</span> </li> <li class="flex items-start"> <div class="flex-shrink-0 w-1.5 h-1.5 sm:w-2 sm:h-2 bg-primary-500 rounded-full mt-2 sm:mt-2.5 mr-2 sm:mr-3"></div> <span class="text-base sm:text-lg"><article>: Represents self-contained, independent content, like a blog post or news article.</span> </li> <li class="flex items-start"> <div class="flex-shrink-0 w-1.5 h-1.5 sm:w-2 sm:h-2 bg-primary-500 rounded-full mt-2 sm:mt-2.5 mr-2 sm:mr-3"></div> <span class="text-base sm:text-lg"><aside>: Defines content tangentially related to the content around it, often used for sidebars.</span> </li> <li class="flex items-start"> <div class="flex-shrink-0 w-1.5 h-1.5 sm:w-2 sm:h-2 bg-primary-500 rounded-full mt-2 sm:mt-2.5 mr-2 sm:mr-3"></div> <span class="text-base sm:text-lg"><nav>: Contains navigation links, typically for major sections of the site.</span> </li> <li class="flex items-start"> <div class="flex-shrink-0 w-1.5 h-1.5 sm:w-2 sm:h-2 bg-primary-500 rounded-full mt-2 sm:mt-2.5 mr-2 sm:mr-3"></div> <span class="text-base sm:text-lg"><header>: Represents introductory content or a set of navigational links for a section.</span> </li> <li class="flex items-start"> <div class="flex-shrink-0 w-1.5 h-1.5 sm:w-2 sm:h-2 bg-primary-500 rounded-full mt-2 sm:mt-2.5 mr-2 sm:mr-3"></div> <span class="text-base sm:text-lg"><footer>: Contains authorship information, copyright data, or related links for its nearest sectioning content.</span> </li> <li class="flex items-start"> <div class="flex-shrink-0 w-1.5 h-1.5 sm:w-2 sm:h-2 bg-primary-500 rounded-full mt-2 sm:mt-2.5 mr-2 sm:mr-3"></div> <span class="text-base sm:text-lg"><main>: Represents the dominant content of the <body>, unique to the document.</span> </li> <li class="flex items-start"> <div class="flex-shrink-0 w-1.5 h-1.5 sm:w-2 sm:h-2 bg-primary-500 rounded-full mt-2 sm:mt-2.5 mr-2 sm:mr-3"></div> <span class="text-base sm:text-lg"><section>: Groups related content, typically with a heading.</span> </li> <li class="flex items-start"> <div class="flex-shrink-0 w-1.5 h-1.5 sm:w-2 sm:h-2 bg-primary-500 rounded-full mt-2 sm:mt-2.5 mr-2 sm:mr-3"></div> <span class="text-base sm:text-lg">Forms: Enables user interaction and data submission.</span> </li> <li class="flex items-start"> <div class="flex-shrink-0 w-1.5 h-1.5 sm:w-2 sm:h-2 bg-primary-500 rounded-full mt-2 sm:mt-2.5 mr-2 sm:mr-3"></div> <span class="text-base sm:text-lg"><form>: Creates an interactive area for user input and submission.</span> </li> <li class="flex items-start"> <div class="flex-shrink-0 w-1.5 h-1.5 sm:w-2 sm:h-2 bg-primary-500 rounded-full mt-2 sm:mt-2.5 mr-2 sm:mr-3"></div> <span class="text-base sm:text-lg"><input>: Defines various input fields, such as text boxes, checkboxes, and radio buttons.</span> </li> <li class="flex items-start"> <div class="flex-shrink-0 w-1.5 h-1.5 sm:w-2 sm:h-2 bg-primary-500 rounded-full mt-2 sm:mt-2.5 mr-2 sm:mr-3"></div> <span class="text-base sm:text-lg"><textarea>: Provides a multi-line text input control.</span> </li> <li class="flex items-start"> <div class="flex-shrink-0 w-1.5 h-1.5 sm:w-2 sm:h-2 bg-primary-500 rounded-full mt-2 sm:mt-2.5 mr-2 sm:mr-3"></div> <span class="text-base sm:text-lg"><select>: Creates a dropdown list for selecting options.</span> </li> <li class="flex items-start"> <div class="flex-shrink-0 w-1.5 h-1.5 sm:w-2 sm:h-2 bg-primary-500 rounded-full mt-2 sm:mt-2.5 mr-2 sm:mr-3"></div> <span class="text-base sm:text-lg"><button>: Defines a clickable button, often used for form submission.</span> </li> </ul> </div> <div>  <h2 class="text-xl sm:text-2xl lg:text-3xl font-bold text-gray-900 mb-4 sm:mb-5 lg:mb-6">How does CSS style web pages and what are its key features?</h2>  <p class="text-base sm:text-lg mb-4 sm:mb-5 lg:mb-6">CSS, or Cascading Style Sheets, is the language used to describe the presentation of a document written in HTML. It dictates how HTML elements are displayed on screen, paper, or in other media, covering aspects like colors, fonts, layout, and responsiveness. By separating the document's content from its visual presentation, CSS allows for greater control over design, making websites visually appealing and consistent across different devices and browsers. This separation also streamlines development, enabling designers to update the look of an entire website from a single stylesheet without altering the underlying HTML structure.</p>  <ul class="space-y-2 sm:space-y-3 mb-4 sm:mb-5 lg:mb-6"> <li class="flex items-start"> <div class="flex-shrink-0 w-1.5 h-1.5 sm:w-2 sm:h-2 bg-primary-500 rounded-full mt-2 sm:mt-2.5 mr-2 sm:mr-3"></div> <span class="text-base sm:text-lg">Selectors: Patterns used to select the HTML elements you want to style.</span> </li> <li class="flex items-start"> <div class="flex-shrink-0 w-1.5 h-1.5 sm:w-2 sm:h-2 bg-primary-500 rounded-full mt-2 sm:mt-2.5 mr-2 sm:mr-3"></div> <span class="text-base sm:text-lg">Element selectors: Target all instances of a specific HTML tag, like 'p' for paragraphs.</span> </li> <li class="flex items-start"> <div class="flex-shrink-0 w-1.5 h-1.5 sm:w-2 sm:h-2 bg-primary-500 rounded-full mt-2 sm:mt-2.5 mr-2 sm:mr-3"></div> <span class="text-base sm:text-lg">Class selectors: Target elements by their class attribute, allowing multiple elements to share styles.</span> </li> <li class="flex items-start"> <div class="flex-shrink-0 w-1.5 h-1.5 sm:w-2 sm:h-2 bg-primary-500 rounded-full mt-2 sm:mt-2.5 mr-2 sm:mr-3"></div> <span class="text-base sm:text-lg">ID selectors: Target a unique element by its ID attribute, used for single, specific elements.</span> </li> <li class="flex items-start"> <div class="flex-shrink-0 w-1.5 h-1.5 sm:w-2 sm:h-2 bg-primary-500 rounded-full mt-2 sm:mt-2.5 mr-2 sm:mr-3"></div> <span class="text-base sm:text-lg">Attribute selectors: Target elements with specific attributes or attribute values.</span> </li> <li class="flex items-start"> <div class="flex-shrink-0 w-1.5 h-1.5 sm:w-2 sm:h-2 bg-primary-500 rounded-full mt-2 sm:mt-2.5 mr-2 sm:mr-3"></div> <span class="text-base sm:text-lg">Pseudo-classes & Pseudo-elements: Target elements based on their state (e.g., :hover) or specific parts of an element (e.g., ::before).</span> </li> <li class="flex items-start"> <div class="flex-shrink-0 w-1.5 h-1.5 sm:w-2 sm:h-2 bg-primary-500 rounded-full mt-2 sm:mt-2.5 mr-2 sm:mr-3"></div> <span class="text-base sm:text-lg">Properties: Define the visual characteristics to be applied to selected elements.</span> </li> <li class="flex items-start"> <div class="flex-shrink-0 w-1.5 h-1.5 sm:w-2 sm:h-2 bg-primary-500 rounded-full mt-2 sm:mt-2.5 mr-2 sm:mr-3"></div> <span class="text-base sm:text-lg">Color: Sets the foreground color of text.</span> </li> <li class="flex items-start"> <div class="flex-shrink-0 w-1.5 h-1.5 sm:w-2 sm:h-2 bg-primary-500 rounded-full mt-2 sm:mt-2.5 mr-2 sm:mr-3"></div> <span class="text-base sm:text-lg">Font: Controls typeface, size, weight, and style of text.</span> </li> <li class="flex items-start"> <div class="flex-shrink-0 w-1.5 h-1.5 sm:w-2 sm:h-2 bg-primary-500 rounded-full mt-2 sm:mt-2.5 mr-2 sm:mr-3"></div> <span class="text-base sm:text-lg">Background: Manages background images, colors, and other background properties.</span> </li> <li class="flex items-start"> <div class="flex-shrink-0 w-1.5 h-1.5 sm:w-2 sm:h-2 bg-primary-500 rounded-full mt-2 sm:mt-2.5 mr-2 sm:mr-3"></div> <span class="text-base sm:text-lg">Box Model: Defines the space an element takes up, including content, padding, border, and margin.</span> </li> <li class="flex items-start"> <div class="flex-shrink-0 w-1.5 h-1.5 sm:w-2 sm:h-2 bg-primary-500 rounded-full mt-2 sm:mt-2.5 mr-2 sm:mr-3"></div> <span class="text-base sm:text-lg">Positioning: Controls the placement of elements on the page (e.g., static, relative, absolute, fixed).</span> </li> <li class="flex items-start"> <div class="flex-shrink-0 w-1.5 h-1.5 sm:w-2 sm:h-2 bg-primary-500 rounded-full mt-2 sm:mt-2.5 mr-2 sm:mr-3"></div> <span class="text-base sm:text-lg">Display: Manages how an element is rendered (e.g., block, inline, flex, grid).</span> </li> <li class="flex items-start"> <div class="flex-shrink-0 w-1.5 h-1.5 sm:w-2 sm:h-2 bg-primary-500 rounded-full mt-2 sm:mt-2.5 mr-2 sm:mr-3"></div> <span class="text-base sm:text-lg">Flexbox: A one-dimensional layout system for arranging items in rows or columns.</span> </li> <li class="flex items-start"> <div class="flex-shrink-0 w-1.5 h-1.5 sm:w-2 sm:h-2 bg-primary-500 rounded-full mt-2 sm:mt-2.5 mr-2 sm:mr-3"></div> <span class="text-base sm:text-lg">Grid: A two-dimensional layout system for arranging items in rows and columns.</span> </li> <li class="flex items-start"> <div class="flex-shrink-0 w-1.5 h-1.5 sm:w-2 sm:h-2 bg-primary-500 rounded-full mt-2 sm:mt-2.5 mr-2 sm:mr-3"></div> <span class="text-base sm:text-lg">Specificity: Determines which CSS rule applies when multiple rules target the same element.</span> </li> <li class="flex items-start"> <div class="flex-shrink-0 w-1.5 h-1.5 sm:w-2 sm:h-2 bg-primary-500 rounded-full mt-2 sm:mt-2.5 mr-2 sm:mr-3"></div> <span class="text-base sm:text-lg">Inline styles: Applied directly to an element's HTML tag, possessing the highest specificity.</span> </li> <li class="flex items-start"> <div class="flex-shrink-0 w-1.5 h-1.5 sm:w-2 sm:h-2 bg-primary-500 rounded-full mt-2 sm:mt-2.5 mr-2 sm:mr-3"></div> <span class="text-base sm:text-lg">ID selectors: High specificity, used for unique element targeting.</span> </li> <li class="flex items-start"> <div class="flex-shrink-0 w-1.5 h-1.5 sm:w-2 sm:h-2 bg-primary-500 rounded-full mt-2 sm:mt-2.5 mr-2 sm:mr-3"></div> <span class="text-base sm:text-lg">Class selectors: Medium specificity, used for styling groups of elements.</span> </li> <li class="flex items-start"> <div class="flex-shrink-0 w-1.5 h-1.5 sm:w-2 sm:h-2 bg-primary-500 rounded-full mt-2 sm:mt-2.5 mr-2 sm:mr-3"></div> <span class="text-base sm:text-lg">Element selectors: Lowest specificity, used for general element styling.</span> </li> <li class="flex items-start"> <div class="flex-shrink-0 w-1.5 h-1.5 sm:w-2 sm:h-2 bg-primary-500 rounded-full mt-2 sm:mt-2.5 mr-2 sm:mr-3"></div> <span class="text-base sm:text-lg">Methods of including CSS: Different ways to link CSS to an HTML document.</span> </li> <li class="flex items-start"> <div class="flex-shrink-0 w-1.5 h-1.5 sm:w-2 sm:h-2 bg-primary-500 rounded-full mt-2 sm:mt-2.5 mr-2 sm:mr-3"></div> <span class="text-base sm:text-lg">Internal Styles (<style>): Embedded within the <style> tags in the HTML document's <head> section.</span> </li> <li class="flex items-start"> <div class="flex-shrink-0 w-1.5 h-1.5 sm:w-2 sm:h-2 bg-primary-500 rounded-full mt-2 sm:mt-2.5 mr-2 sm:mr-3"></div> <span class="text-base sm:text-lg">External Stylesheets (<link>): Linked from external .css files, promoting reusability and maintainability across multiple pages.</span> </li> <li class="flex items-start"> <div class="flex-shrink-0 w-1.5 h-1.5 sm:w-2 sm:h-2 bg-primary-500 rounded-full mt-2 sm:mt-2.5 mr-2 sm:mr-3"></div> <span class="text-base sm:text-lg">Inline styles: Directly applied to individual HTML elements using the 'style' attribute.</span> </li> </ul> </div> <div>  <h2 class="text-xl sm:text-2xl lg:text-3xl font-bold text-gray-900 mb-4 sm:mb-5 lg:mb-6">What is the essential relationship between HTML and CSS in web development?</h2>  <p class="text-base sm:text-lg mb-4 sm:mb-5 lg:mb-6">The relationship between HTML and CSS is fundamental and symbiotic in web development, akin to a building's structure and its interior design. HTML provides the essential framework and content, defining the logical organization of a webpage with elements like headings, paragraphs, and images. CSS then takes this raw structure and applies all the visual styling, including colors, fonts, spacing, and layout. This clear separation of concerns allows developers to manage content and presentation independently, leading to more maintainable, flexible, and accessible websites. Without HTML, there's no content to style; without CSS, HTML appears as plain, unformatted text.</p>  <ul class="space-y-2 sm:space-y-3 mb-4 sm:mb-5 lg:mb-6"> <li class="flex items-start"> <div class="flex-shrink-0 w-1.5 h-1.5 sm:w-2 sm:h-2 bg-primary-500 rounded-full mt-2 sm:mt-2.5 mr-2 sm:mr-3"></div> <span class="text-base sm:text-lg">HTML provides the structure: Defines the fundamental content and logical organization of a webpage, acting as the skeleton.</span> </li> <li class="flex items-start"> <div class="flex-shrink-0 w-1.5 h-1.5 sm:w-2 sm:h-2 bg-primary-500 rounded-full mt-2 sm:mt-2.5 mr-2 sm:mr-3"></div> <span class="text-base sm:text-lg">CSS provides the styling: Applies all visual presentation, including layout, colors, and typography, to that structured HTML content, acting as the skin and aesthetics.</span> </li> </ul> </div> </div> </div> </div> </section>  <section class="mb-8 sm:mb-12 lg:mb-16 max-w-5xl mx-auto px-4 sm:px-6 lg:px-0"> <div class="bg-white rounded-xl sm:rounded-2xl overflow-hidden"> <div class="mx-auto">  <h2 class="text-xl sm:text-2xl lg:text-3xl font-bold text-gray-900 mb-6 sm:mb-7 lg:mb-8"> Frequently Asked Questions </h2>  <div class="space-y-4 sm:space-y-5 lg:space-y-6"> <div class="bg-white rounded-lg sm:rounded-xl p-4 sm:p-5 lg:p-6 shadow-sm border border-gray-100"> <div class="space-y-3 sm:space-y-4">  <div class="flex items-start sm:items-center space-x-2 sm:space-x-3"> <div class="flex-shrink-0 w-5 h-5 sm:w-6 sm:h-6 bg-blue-600 text-white rounded-md sm:rounded-lg flex items-center justify-center mt-0.5 sm:mt-0"> <span class="text-xs sm:text-sm font-bold">Q</span> </div> <h3 class="text-base sm:text-lg font-semibold text-gray-900 flex-1 leading-tight sm:leading-normal">What is the primary function of HTML in web development?</h3> </div>  <div class="ml-7 sm:ml-9 pl-2 sm:pl-3 border-l-2 sm:border-l-3 border-green-200"> <div class="flex items-start space-x-1.5 sm:space-x-2"> <div class="flex-shrink-0 w-4 h-4 sm:w-5 sm:h-5 bg-green-500 text-white rounded sm:rounded-md flex items-center justify-center mt-0.5"> <span class="text-xs font-bold">A</span> </div> <p class="text-sm sm:text-base lg:text-lg text-gray-700 leading-relaxed">HTML defines the structure and content of a webpage using elements and tags. It organizes text, images, links, and other media, providing the foundational framework that web browsers interpret to display information. Without HTML, there would be no content to render on the internet.</p> </div> </div> </div> </div> <div class="bg-white rounded-lg sm:rounded-xl p-4 sm:p-5 lg:p-6 shadow-sm border border-gray-100"> <div class="space-y-3 sm:space-y-4">  <div class="flex items-start sm:items-center space-x-2 sm:space-x-3"> <div class="flex-shrink-0 w-5 h-5 sm:w-6 sm:h-6 bg-blue-600 text-white rounded-md sm:rounded-lg flex items-center justify-center mt-0.5 sm:mt-0"> <span class="text-xs sm:text-sm font-bold">Q</span> </div> <h3 class="text-base sm:text-lg font-semibold text-gray-900 flex-1 leading-tight sm:leading-normal">How does CSS enhance the appearance of an HTML document?</h3> </div>  <div class="ml-7 sm:ml-9 pl-2 sm:pl-3 border-l-2 sm:border-l-3 border-green-200"> <div class="flex items-start space-x-1.5 sm:space-x-2"> <div class="flex-shrink-0 w-4 h-4 sm:w-5 sm:h-5 bg-green-500 text-white rounded sm:rounded-md flex items-center justify-center mt-0.5"> <span class="text-xs font-bold">A</span> </div> <p class="text-sm sm:text-base lg:text-lg text-gray-700 leading-relaxed">CSS applies visual styling to HTML elements, controlling aspects like colors, fonts, spacing, and layout. It separates presentation from content, allowing designers to create aesthetically pleasing and responsive web designs, ensuring consistency across different devices and improving user experience.</p> </div> </div> </div> </div> <div class="bg-white rounded-lg sm:rounded-xl p-4 sm:p-5 lg:p-6 shadow-sm border border-gray-100"> <div class="space-y-3 sm:space-y-4">  <div class="flex items-start sm:items-center space-x-2 sm:space-x-3"> <div class="flex-shrink-0 w-5 h-5 sm:w-6 sm:h-6 bg-blue-600 text-white rounded-md sm:rounded-lg flex items-center justify-center mt-0.5 sm:mt-0"> <span class="text-xs sm:text-sm font-bold">Q</span> </div> <h3 class="text-base sm:text-lg font-semibold text-gray-900 flex-1 leading-tight sm:leading-normal">Can a webpage function without CSS, and why is CSS still considered essential?</h3> </div>  <div class="ml-7 sm:ml-9 pl-2 sm:pl-3 border-l-2 sm:border-l-3 border-green-200"> <div class="flex items-start space-x-1.5 sm:space-x-2"> <div class="flex-shrink-0 w-4 h-4 sm:w-5 sm:h-5 bg-green-500 text-white rounded sm:rounded-md flex items-center justify-center mt-0.5"> <span class="text-xs font-bold">A</span> </div> <p class="text-sm sm:text-base lg:text-lg text-gray-700 leading-relaxed">A webpage can function without CSS, displaying content as plain, unformatted HTML. However, CSS is essential because it transforms basic structure into visually engaging and user-friendly designs. It enables responsive layouts, consistent branding, and improved accessibility, making websites modern and appealing.</p> </div> </div> </div> </div> </div> </div> </div> </section> <section class="mb-8 sm:mb-12 lg:mb-16">  <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-0"> <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-6 sm:mb-7 lg:mb-8 space-y-3 sm:space-y-0"> <h2 class="text-xl sm:text-2xl lg:text-3xl font-bold text-gray-900">Related Mind Maps</h2> <a href="/mind-mapping/" class="text-primary-600 hover:text-primary-700 font-medium flex items-center space-x-1 transition-colors self-start sm:self-auto" aria-label="View all mind maps"> <span class="text-sm sm:text-base">View All</span> <svg class="w-3 h-3 sm:w-4 sm:h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true" focusable="false"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path> </svg> </a> </div> </div>  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-0"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">  <div class="bg-white rounded-lg sm:rounded-xl hover:shadow-xl transition-all duration-300 cursor-pointer border border-gray-100 group transform hover:-translate-y-1"> <a href="/mind-map/html-css-e400dc8c" class="block">  <div class="aspect-video bg-gradient-to-br from-primary-100 to-primary-200 rounded-t-lg sm:rounded-t-xl flex items-center justify-center group-hover:from-primary-200 group-hover:to-primary-300 transition-all duration-300">  <div> <img src="/preview/0c07cb0d52c197234a0131ca2228c0d7063725be1ae375de76b8ad785aadbf1b" alt="HTML & CSS" class="w-full h-full object-cover rounded-t-lg sm:rounded-t-xl"> </div> </div>  <div class="p-4 sm:p-6 lg:p-8">  <h3 class="font-bold text-gray-900 text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 line-clamp-2">HTML & CSS</h3>  <div class="flex items-center justify-between">  <span class="text-primary-600 hover:text-primary-700 text-xs sm:text-sm font-medium group-hover:translate-x-1 transform transition-transform duration-300"> View → </span> </div> </div> </a> </div> <div class="bg-white rounded-lg sm:rounded-xl hover:shadow-xl transition-all duration-300 cursor-pointer border border-gray-100 group transform hover:-translate-y-1"> <a href="/mind-mapping/html-css-1" class="block">  <div class="aspect-video bg-gradient-to-br from-primary-100 to-primary-200 rounded-t-lg sm:rounded-t-xl flex items-center justify-center group-hover:from-primary-200 group-hover:to-primary-300 transition-all duration-300">  <div> <img src="/preview/bc2f1dcbbc1c1423e4abfbbd93aa8593fe68b928cbb427b274c7d2f182f59147" alt="HTML & CSS" class="w-full h-full object-cover rounded-t-lg sm:rounded-t-xl"> </div> </div>  <div class="p-4 sm:p-6 lg:p-8">  <h3 class="font-bold text-gray-900 text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 line-clamp-2">HTML & CSS</h3>  <div class="flex items-center justify-between">  <span class="text-primary-600 hover:text-primary-700 text-xs sm:text-sm font-medium group-hover:translate-x-1 transform transition-transform duration-300"> View → </span> </div> </div> </a> </div> <div class="bg-white rounded-lg sm:rounded-xl hover:shadow-xl transition-all duration-300 cursor-pointer border border-gray-100 group transform hover:-translate-y-1"> <a href="/mind-mapping/full-stack-web-developer-web-development" class="block">  <div class="aspect-video bg-gradient-to-br from-primary-100 to-primary-200 rounded-t-lg sm:rounded-t-xl flex items-center justify-center group-hover:from-primary-200 group-hover:to-primary-300 transition-all duration-300">  <div> <img src="/preview/913336c5af573b7b00d067cae996eebef4fb9b5eab84482acca481497a68a121" alt="Full Stack Web Developer (Web Development)" class="w-full h-full object-cover rounded-t-lg sm:rounded-t-xl"> </div> </div>  <div class="p-4 sm:p-6 lg:p-8">  <h3 class="font-bold text-gray-900 text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 line-clamp-2">Full Stack Web Developer (Web Development)</h3>  <div class="flex items-center justify-between">  <span class="text-primary-600 hover:text-primary-700 text-xs sm:text-sm font-medium group-hover:translate-x-1 transform transition-transform duration-300"> View → </span> </div> </div> </a> </div> <div class="bg-white rounded-lg sm:rounded-xl hover:shadow-xl transition-all duration-300 cursor-pointer border border-gray-100 group transform hover:-translate-y-1"> <a href="/mind-mapping/web-developer" class="block">  <div class="aspect-video bg-gradient-to-br from-primary-100 to-primary-200 rounded-t-lg sm:rounded-t-xl flex items-center justify-center group-hover:from-primary-200 group-hover:to-primary-300 transition-all duration-300">  <div> <img src="/preview/b1175cfe9b9a2033f8f2dba25a7d7a097a4cbf1ea74d1c4c3b8cd33dce2cb89b" alt="Web Developer" class="w-full h-full object-cover rounded-t-lg sm:rounded-t-xl"> </div> </div>  <div class="p-4 sm:p-6 lg:p-8">  <h3 class="font-bold text-gray-900 text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 line-clamp-2">Web Developer</h3>  <div class="flex items-center justify-between">  <span class="text-primary-600 hover:text-primary-700 text-xs sm:text-sm font-medium group-hover:translate-x-1 transform transition-transform duration-300"> View → </span> </div> </div> </a> </div> </div> </div> </section> <section class="mb-8 sm:mb-12 lg:mb-16 max-w-5xl mx-auto px-4 sm:px-6 lg:px-0">  <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-6 sm:mb-7 lg:mb-8 space-y-3 sm:space-y-0"> <h2 class="text-xl sm:text-2xl lg:text-3xl font-bold text-gray-900">Browse Categories</h2> <a href="/mind-mapping/" class="text-primary-600 hover:text-primary-700 font-medium flex items-center space-x-1 transition-colors self-start sm:self-auto" aria-label="View all categories"> <span class="text-sm sm:text-base">All Categories</span> <svg class="w-3 h-3 sm:w-4 sm:h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true" focusable="false"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path> </svg> </a> </div>  <div class="flex justify-start"> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 gap-4 sm:gap-6 lg:gap-8 max-w-2xl w-full"> <div class="bg-white rounded-lg sm:rounded-xl p-4 sm:p-6 lg:p-8 text-center hover:shadow-xl transition-all duration-300 cursor-pointer border border-gray-100 group transform hover:-translate-y-1"> <a href="/mind-mapping/software-development/category" class="block">  <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 bg-primary-100 rounded-lg sm:rounded-xl flex items-center justify-center mx-auto mb-3 sm:mb-4 group-hover:bg-primary-200 transition-colors group-hover:scale-110 transform duration-300"> <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 text-primary-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/> </svg> </div>  <h3 class="font-bold text-gray-900 text-base sm:text-lg mb-2">Software Development</h3>  <p class="text-xs sm:text-sm text-gray-600 mb-2 sm:mb-3 line-clamp-2 leading-relaxed">Dive into a collection of mind maps designed for software development. From Agile workflows and DevOps practices to SDLC stages and code architecture, each map simplifies complex topics into visual formats. Ideal for developers, engineers, and project leads who want to plan, review, or present technical concepts clearly and effectively.</p>  <p class="text-xs text-gray-500 bg-gray-50 px-2 sm:px-3 py-1 rounded-full inline-block">428 Mind Maps</p> </a> </div> </div> </div> </section>  </main> <div class="bg-white text-black w-full pt-12 pb-6"> <div class="container max-w-6xl mx-auto px-4">  <div class="grid grid-cols-1 md:grid-cols-6 gap-0 md:gap-6 md:items-start">  <div class="mb-2 md:mb-8">  <div class="flex items-center mb-4 lg:mb-0 lg:h-[43px] lg:border-b-0"> <a href="/"> <picture> <source type="image/webp" srcset="https://cdn.mindmapai.app/static/img/logo/black-logo-2cda58074dccbdf633649ba6b86d8d0d.webp"> <img src="https://cdn.mindmapai.app/static/img/logo/black-logo-c458a6797c1a13266db422b65529a2f0.png" alt="MindMap AI Logo" loading="lazy" width="150" height="45" class="h-10 lg:h-11"> </picture> </a> </div>  <h3 class="md:hidden text-[18px] font-bold text-black flex justify-between items-center py-2"> Features <span class="mm-footer-toggle cursor-pointer" data-target="lp-features-menu"> <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 transition-transform duration-300" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> </svg> </span> </h3> <ul id="lp-features-menu" class="space-y-3 text-black hidden lg:block lg:pt-[18px]"> <li><a href="/features" class="text-black">Features</a></li> <li><a href="/pricing" class="text-black">Plans & Pricing</a></li> <li><a href="/student-discount" class="text-black">Student Discount</a></li> <li><a href="/referral" class="text-black">Referral Credits</a></li> <li><a href="/version-history" class="text-black">What's New</a></li> </ul> </div>  <div class="mb-2 md:mb-8"> <h3 class="text-[18px] font-bold text-black flex justify-between items-center py-2 md:py-0 md:h-10 md:mb-4"> Free Tools <span class="mm-footer-toggle md:hidden cursor-pointer" data-target="lp-free-tools-menu"> <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 transition-transform duration-300" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> </svg> </span> </h3> <ul id="lp-free-tools-menu" class="space-y-3 text-[15px] hidden md:block"> <li><a href="/ai-summarizer" class="text-black">AI Summarizer</a></li> <li><a href="/article-summarizer" class="text-black">Article Summarizer</a></li> <li><a href="/text-summarizer" class="text-black">Text Summarizer</a></li> <li><a href="/pdf-summarizer" class="text-black">PDF Summarizer</a></li> <li><a href="/video-summarizer" class="text-black">Video Summarizer</a></li> <li><a href="/note-summarizer" class="text-black">Note Summarizer</a></li> <li><a href="/tools" class="text-black">Other AI Tools</a></li> </ul> </div>  <div class="mb-2 md:mb-8"> <h3 class="text-[18px] font-bold text-black flex justify-between items-center py-2 md:py-0 md:h-10 md:mb-4"> Compare <span class="mm-footer-toggle md:hidden cursor-pointer" data-target="lp-compare-menu"> <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 transition-transform duration-300" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> </svg> </span> </h3> <ul id="lp-compare-menu" class="space-y-3 text-[15px] hidden md:block"> <li><a href="/compare/xmind-vs-mindmap-ai" class="text-black">vs Xmind</a></li> <li><a href="/compare/mapify-vs-mindmap-ai" class="text-black">vs Mapify</a></li> <li><a href="/compare/mindmeister-vs-mindmap-ai" class="text-black">vs MindMeister</a></li> <li><a href="/compare/gitmind-vs-mindmap-ai" class="text-black">vs GitMind</a></li> <li><a href="/compare/ayoa-vs-mindmap-ai" class="text-black">vs Ayoa</a></li> <li><a href="/compare/mindmanager-vs-mindmap-ai" class="text-black">vs MindManager</a></li> <li><a href="/compare/mymap-ai-vs-mindmap-ai" class="text-black">vs MyMap AI</a></li> </ul> </div>  <div class="mb-2 md:mb-8"> <h3 class="text-[18px] font-bold text-black flex justify-between items-center py-2 md:py-0 md:h-10 md:mb-4"> Use Cases <span class="mm-footer-toggle md:hidden cursor-pointer" data-target="lp-usecases-menu"> <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 transition-transform duration-300" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> </svg> </span> </h3> <ul id="lp-usecases-menu" class="space-y-3 text-[15px] hidden md:block"> <li><a href="/mind-map-software" class="text-black">Mindmapping</a></li> <li><a href="/brainstorming-mind-map" class="text-black">Brainstorming</a></li> <li><a href="/note-taking-mind-map" class="text-black">Note Taking</a></li> <li><a href="/concept-map" class="text-black">Concept Map</a></li> <li><a href="/brain-map" class="text-black">Brain Map</a></li> <li><a href="/education-mind-map" class="text-black">Education</a></li> </ul> </div>  <div class="mb-2 md:mb-8"> <h3 class="text-[18px] font-bold text-black flex justify-between items-center py-2 md:py-0 md:h-10 md:mb-4"> Resources <span class="mm-footer-toggle md:hidden cursor-pointer" data-target="lp-resources-menu"> <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 transition-transform duration-300" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> </svg> </span> </h3> <ul id="lp-resources-menu" class="space-y-3 text-[15px] hidden md:block"> <li><a href="/blog" class="text-black">Blog</a></li> <li><a href="/webinars" class="text-black">Webinars</a></li> <li><a href="/mind-mapping" class="text-black">Mindmaps</a></li> <li><a href="/faq" class="text-black">FAQ</a></li> <li><a href="/help" class="text-black">Help & Support</a></li> </ul> </div>  <div class="mb-2 md:mb-8"> <h3 class="text-[18px] font-bold text-black flex justify-between items-center py-2 md:py-0 md:h-10 md:mb-4"> Company <span class="mm-footer-toggle md:hidden cursor-pointer" data-target="lp-company-menu"> <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 transition-transform duration-300" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> </svg> </span> </h3> <ul id="lp-company-menu" class="space-y-3 text-[15px] hidden md:block"> <li><a href="/about" class="text-black">About Us</a></li> <li><a href="/contact" class="text-black">Contact Us</a></li> <li><a href="https://mindmapai.zulipchat.com/join/mmwtuntitk47g66joigz2hnn" target="_blank" class="text-black">Community</a></li> <li><a href="/channel-partner" class="text-black">Partners</a></li> <li><a href="/affiliates" class="text-black">Affiliates</a></li> </ul> </div> </div>  <div class="flex flex-col md:flex-row md:justify-between md:items-start pt-6 gap-4">  <div class="flex flex-col items-center md:items-start gap-3">  <div class="flex flex-wrap gap-3 justify-center md:justify-start"> <a href="https://www.facebook.com/people/mindmap-ai/61557956681862/" target="_blank" aria-label="Facebook" class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-gray-100 text-gray-800 shadow-sm hover:bg-black hover:text-white hover:-translate-y-1 transition-all duration-300"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" fill="currentColor" width="16" height="16" aria-hidden="true"><path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"/></svg> </a> <a href="https://twitter.com/mindmapai_app" target="_blank" aria-label="Twitter" class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-gray-100 text-gray-800 shadow-sm hover:bg-black hover:text-white hover:-translate-y-1 transition-all duration-300"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor" width="16" height="16" aria-hidden="true"><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg> </a> <a href="https://www.linkedin.com/company/mindmapai-app" target="_blank" aria-label="LinkedIn" class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-gray-100 text-gray-800 shadow-sm hover:bg-black hover:text-white hover:-translate-y-1 transition-all duration-300"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="currentColor" width="16" height="16" aria-hidden="true"><path d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"/></svg> </a> <a href="https://www.youtube.com/@mindmapai" target="_blank" aria-label="YouTube" class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-gray-100 text-gray-800 shadow-sm hover:bg-black hover:text-white hover:-translate-y-1 transition-all duration-300"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="currentColor" width="18" height="16" aria-hidden="true"><path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"/></svg> </a> <a href="https://www.pinterest.com/mindmapaiapp/" target="_blank" aria-label="Pinterest" class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-gray-100 text-gray-800 shadow-sm hover:bg-black hover:text-white hover:-translate-y-1 transition-all duration-300"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" fill="currentColor" width="16" height="16" aria-hidden="true"><path d="M204 6.5C101.4 6.5 0 74.9 0 185.6 0 256 39.6 296 63.6 296c9.9 0 15.6-27.6 15.6-35.4 0-9.3-23.7-29.1-23.7-67.8 0-80.4 61.2-137.4 140.4-137.4 68.1 0 118.5 38.7 118.5 109.8 0 53.1-21.3 152.7-90.3 152.7-24.9 0-46.2-18-46.2-43.8 0-37.8 26.4-74.4 26.4-113.4 0-66.2-93.9-54.2-93.9 25.8 0 16.8 2.1 35.4 9.6 50.7-13.8 59.4-42 147.9-42 209.1 0 18.9 2.7 37.5 4.5 56.4 3.4 3.8 1.7 3.4 6.9 1.5 50.4-69 48.6-82.5 71.4-172.8 12.3 23.4 44.1 36 69.3 36 106.2 0 153.9-103.5 153.9-196.8C384 71.3 298.2 6.5 204 6.5z"/></svg> </a> <a href="https://www.instagram.com/mindmapai_app/" target="_blank" aria-label="Instagram" class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-gray-100 text-gray-800 shadow-sm hover:bg-black hover:text-white hover:-translate-y-1 transition-all duration-300"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="currentColor" width="16" height="16" aria-hidden="true"><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"/></svg> </a> <div class="md:hidden w-full"></div> <a href="https://www.tiktok.com/@mindmapai.app" target="_blank" aria-label="TikTok" class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-gray-100 text-gray-800 shadow-sm hover:bg-black hover:text-white hover:-translate-y-1 transition-all duration-300"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="currentColor" width="16" height="16" aria-hidden="true"><path d="M448 209.91a210.06 210.06 0 0 1-122.77-39.25v178.72A162.55 162.55 0 1 1 185 188.31v89.89a74.62 74.62 0 1 0 52.23 71.18V0h88a121.18 121.18 0 0 0 1.86 22.17A122.18 122.18 0 0 0 381 102.39a121.43 121.43 0 0 0 67 20.14z"/></svg> </a> </div>  <div class="flex md:hidden flex-wrap items-center gap-2 justify-center mb-1"> <span class="text-[15px] font-medium text-black">Get an AI summary of MindMap AI</span> <div class="flex items-center gap-1"> <a href="https://chat.openai.com/?q=As%20I%20explore%20MindMap%20AI%20for%20the%20first%20time%2C%20I%20want%20to%20clearly%20understand%20how%20it%20helps%20me%20think%2C%20plan%2C%20and%20decide%E2%80%94%20and%20how%20it%20fits%20into%20my%20real%2C%20day-to-day%20work." target="_blank" rel="noopener" aria-label="Ask ChatGPT about MindMap AI" class="inline-flex items-center justify-center w-9 h-9 p-2 rounded-lg hover:bg-gray-100"> <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M22.28 9.82a5.98 5.98 0 0 0-.51-4.91 6.04 6.04 0 0 0-6.51-2.9 6.06 6.06 0 0 0-10.28 2.17 5.98 5.98 0 0 0-4 2.9 6.05 6.05 0 0 0 .74 7.1 5.98 5.98 0 0 0 .51 4.91 6.05 6.05 0 0 0 6.51 2.9 5.98 5.98 0 0 0 4.01 2.1 6.05 6.05 0 0 0 5.77-4.21 5.99 5.99 0 0 0 4-2.9 6.05 6.05 0 0 0-.74-7.07zm-9.02 12.6a4.47 4.47 0 0 1-2.88-1.04l.14-.08 4.78-2.76c.25-.14.39-.41.39-.68v-6.74l2.02 1.17c.02.01.04.03.04.05v5.58a4.5 4.5 0 0 1-4.49 4.5zM4.34 18.3a4.47 4.47 0 0 1-.53-3.01l.14.08 4.78 2.76c.24.14.54.14.78 0l5.84-3.37v2.33c0 .02-.01.05-.03.06l-4.83 2.79a4.5 4.5 0 0 1-6.15-1.64zM2.34 7.9a4.48 4.48 0 0 1 2.37-1.97V11.6c0 .27.14.53.39.68l5.81 3.35-2.02 1.17c-.02.01-.05.01-.07 0L4 12.02a4.5 4.5 0 0 1-1.66-4.12zm16.6 3.86l-5.84-3.37 2.02-1.16c.02-.01.05-.01.07 0l4.83 2.79a4.49 4.49 0 0 1-.68 8.1v-5.68c0-.27-.14-.53-.41-.68zm2.01-3.03l-.14-.08-4.77-2.78a.77.77 0 0 0-.79 0L9.41 9.23V6.9c0-.02.01-.05.03-.06l4.83-2.79a4.5 4.5 0 0 1 6.68 4.66zM8.31 12.86l-2.02-1.16c-.02-.02-.04-.04-.04-.06V6.07a4.5 4.5 0 0 1 7.38-3.45l-.14.08-4.78 2.76c-.25.14-.39.41-.39.68zm1.1-2.36l2.6-1.5 2.61 1.5v3l-2.6 1.5-2.61-1.5z"/></svg> </a> <a href="https://www.google.com/search?q=MindMap+AI&udm=50" target="_blank" rel="noopener" aria-label="Ask Google AI about MindMap AI" class="inline-flex items-center justify-center w-9 h-9 p-2 rounded-lg hover:bg-gray-100"> <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09zM12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23zM5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62zM12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/></svg> </a> <a href="https://www.perplexity.ai/search?q=MindMap+AI" target="_blank" rel="noopener" aria-label="Ask Perplexity about MindMap AI" class="inline-flex items-center justify-center w-9 h-9 p-2 rounded-lg hover:bg-gray-100"> <svg width="20" height="20" viewBox="0 0 24 24" fill="#000000"><path d="M22.3977 7.0896h-2.3106V.0676l-7.5094 6.3542V.1577h-1.1554v6.1966L4.4904 0v7.0896H1.6023v10.3976h2.8882V24l6.932-6.3591v6.2005h1.1554v-6.0469l6.9318 6.1807v-6.4879h2.8882V7.0896zm-3.4657-4.531v4.531h-5.355l5.355-4.531zm-13.2862.0676 4.8691 4.4634H5.6458V2.6262zM2.7576 16.332V8.245h7.8476l-6.1149 6.1147v1.9723H2.7576zm2.8882 5.0404v-3.8852h.0001v-2.6488l5.7763-5.7764v7.0111l-5.7764 5.2993zm12.7086.0248-5.7766-5.1509V9.0618l5.7766 5.7766v6.5588zm2.8882-5.0652h-1.733v-1.9723L13.3948 8.245h7.8478v8.087z"/></svg> </a> <a href="https://claude.ai/new?q=MindMap+AI" target="_blank" rel="noopener" aria-label="Ask Claude about MindMap AI" class="inline-flex items-center justify-center w-9 h-9 p-2 rounded-lg hover:bg-gray-100"> <svg width="20" height="20" viewBox="0 0 16 16" fill="#000000"><path d="m3.127 10.604 3.135-1.76.053-.153-.053-.085H6.11l-.525-.032-1.791-.048-1.554-.065-1.505-.08-.38-.081L0 7.832l.036-.234.32-.214.455.04 1.009.069 1.513.105 1.097.064 1.626.17h.259l.036-.105-.089-.065-.068-.064-1.566-1.062-1.695-1.121-.887-.646-.48-.327-.243-.306-.104-.67.435-.48.585.04.15.04.593.456 1.267.981 1.654 1.218.242.202.097-.068.012-.049-.109-.181-.9-1.626-.96-1.655-.428-.686-.113-.411a2 2 0 0 1-.068-.484l.496-.674L4.446 0l.662.089.279.242.411.94.666 1.48 1.033 2.014.302.597.162.553.06.17h.105v-.097l.085-1.134.157-1.392.154-1.792.052-.504.25-.605.497-.327.387.186.319.456-.045.294-.19 1.23-.37 1.93-.243 1.29h.142l.161-.16.654-.868 1.097-1.372.484-.545.565-.601.363-.287h.686l.505.751-.226.775-.707.895-.585.759-.839 1.13-.524.904.048.072.125-.012 1.897-.403 1.024-.186 1.223-.21.553.258.06.263-.218.536-1.307.323-1.533.307-2.284.54-.028.02.032.04 1.029.098.44.024h1.077l2.005.15.525.346.315.424-.053.323-.807.411-3.631-.863-.872-.218h-.12v.073l.726.71 1.331 1.202 1.667 1.55.084.383-.214.302-.226-.032-1.464-1.101-.565-.497-1.28-1.077h-.084v.113l.295.432 1.557 2.34.08.718-.112.234-.404.141-.444-.08-.911-1.28-.94-1.44-.759-1.291-.093.053-.448 4.821-.21.246-.484.186-.403-.307-.214-.496.214-.98.258-1.28.21-1.016.19-1.263.112-.42-.008-.028-.092.012-.953 1.307-1.448 1.957-1.146 1.227-.274.109-.477-.247.045-.44.266-.39 1.586-2.018.956-1.25.617-.723-.004-.105h-.036l-4.212 2.736-.75.096-.324-.302.04-.496.154-.162 1.267-.871z"/></svg> </a> </div> </div>  <div class="flex md:hidden flex-row justify-center gap-3 py-6"> <a href="https://apps.apple.com/app/6742736112" target="_blank" rel="noopener"> <img src="https://cdn.mindmapai.app/static/img/resource/app-store-a0563d28650a860ba34ff2ace6d910a0.png" alt="Download on the App Store" width="138" height="40" loading="lazy" class="h-10"> </a> <a href="https://play.google.com/store/apps/details?id=app.mindmapai" target="_blank" rel="noopener"> <img src="https://cdn.mindmapai.app/static/img/resource/google-play-e0dd0e59ed06f932479d1dd0e4605ef5.png" alt="Get it on Google Play" width="138" height="40" loading="lazy" class="h-10"> </a> </div>  <div class="flex flex-wrap items-center justify-center md:justify-start gap-1 text-[15px] text-black"> <a href="/privacy" class="hover:text-gray-500 transition duration-200 whitespace-nowrap">Privacy Policy</a> <span class="mx-1">|</span> <a href="/terms" class="hover:text-gray-500 transition duration-200 whitespace-nowrap">Terms & Conditions</a> </div>  <div class="flex flex-col md:flex-row items-center md:items-center gap-3 justify-center md:justify-start"> <span class="text-[15px] text-black">© 3axislabs, Inc 2026. All rights reserved.</span>  <div class="hidden md:flex items-center gap-2" style="margin-left: 150px;"> <span class="text-[15px] font-medium text-black">Get an AI summary of MindMap AI</span> <div class="flex items-center gap-1"> <a href="https://chat.openai.com/?q=As%20I%20explore%20MindMap%20AI%20for%20the%20first%20time%2C%20I%20want%20to%20clearly%20understand%20how%20it%20helps%20me%20think%2C%20plan%2C%20and%20decide%E2%80%94%20and%20how%20it%20fits%20into%20my%20real%2C%20day-to-day%20work." target="_blank" rel="noopener" aria-label="Ask ChatGPT about MindMap AI" class="inline-flex items-center justify-center w-9 h-9 p-2 rounded-lg hover:bg-gray-100"> <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M22.28 9.82a5.98 5.98 0 0 0-.51-4.91 6.04 6.04 0 0 0-6.51-2.9 6.06 6.06 0 0 0-10.28 2.17 5.98 5.98 0 0 0-4 2.9 6.05 6.05 0 0 0 .74 7.1 5.98 5.98 0 0 0 .51 4.91 6.05 6.05 0 0 0 6.51 2.9 5.98 5.98 0 0 0 4.01 2.1 6.05 6.05 0 0 0 5.77-4.21 5.99 5.99 0 0 0 4-2.9 6.05 6.05 0 0 0-.74-7.07zm-9.02 12.6a4.47 4.47 0 0 1-2.88-1.04l.14-.08 4.78-2.76c.25-.14.39-.41.39-.68v-6.74l2.02 1.17c.02.01.04.03.04.05v5.58a4.5 4.5 0 0 1-4.49 4.5zM4.34 18.3a4.47 4.47 0 0 1-.53-3.01l.14.08 4.78 2.76c.24.14.54.14.78 0l5.84-3.37v2.33c0 .02-.01.05-.03.06l-4.83 2.79a4.5 4.5 0 0 1-6.15-1.64zM2.34 7.9a4.48 4.48 0 0 1 2.37-1.97V11.6c0 .27.14.53.39.68l5.81 3.35-2.02 1.17c-.02.01-.05.01-.07 0L4 12.02a4.5 4.5 0 0 1-1.66-4.12zm16.6 3.86l-5.84-3.37 2.02-1.16c.02-.01.05-.01.07 0l4.83 2.79a4.49 4.49 0 0 1-.68 8.1v-5.68c0-.27-.14-.53-.41-.68zm2.01-3.03l-.14-.08-4.77-2.78a.77.77 0 0 0-.79 0L9.41 9.23V6.9c0-.02.01-.05.03-.06l4.83-2.79a4.5 4.5 0 0 1 6.68 4.66zM8.31 12.86l-2.02-1.16c-.02-.02-.04-.04-.04-.06V6.07a4.5 4.5 0 0 1 7.38-3.45l-.14.08-4.78 2.76c-.25.14-.39.41-.39.68zm1.1-2.36l2.6-1.5 2.61 1.5v3l-2.6 1.5-2.61-1.5z"/></svg> </a> <a href="https://www.google.com/search?q=MindMap+AI&udm=50" target="_blank" rel="noopener" aria-label="Ask Google AI about MindMap AI" class="inline-flex items-center justify-center w-9 h-9 p-2 rounded-lg hover:bg-gray-100"> <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09zM12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23zM5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62zM12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/></svg> </a> <a href="https://www.perplexity.ai/search?q=MindMap+AI" target="_blank" rel="noopener" aria-label="Ask Perplexity about MindMap AI" class="inline-flex items-center justify-center w-9 h-9 p-2 rounded-lg hover:bg-gray-100"> <svg width="20" height="20" viewBox="0 0 24 24" fill="#000000"><path d="M22.3977 7.0896h-2.3106V.0676l-7.5094 6.3542V.1577h-1.1554v6.1966L4.4904 0v7.0896H1.6023v10.3976h2.8882V24l6.932-6.3591v6.2005h1.1554v-6.0469l6.9318 6.1807v-6.4879h2.8882V7.0896zm-3.4657-4.531v4.531h-5.355l5.355-4.531zm-13.2862.0676 4.8691 4.4634H5.6458V2.6262zM2.7576 16.332V8.245h7.8476l-6.1149 6.1147v1.9723H2.7576zm2.8882 5.0404v-3.8852h.0001v-2.6488l5.7763-5.7764v7.0111l-5.7764 5.2993zm12.7086.0248-5.7766-5.1509V9.0618l5.7766 5.7766v6.5588zm2.8882-5.0652h-1.733v-1.9723L13.3948 8.245h7.8478v8.087z"/></svg> </a> <a href="https://claude.ai/new?q=MindMap+AI" target="_blank" rel="noopener" aria-label="Ask Claude about MindMap AI" class="inline-flex items-center justify-center w-9 h-9 p-2 rounded-lg hover:bg-gray-100"> <svg width="20" height="20" viewBox="0 0 16 16" fill="#000000"><path d="m3.127 10.604 3.135-1.76.053-.153-.053-.085H6.11l-.525-.032-1.791-.048-1.554-.065-1.505-.08-.38-.081L0 7.832l.036-.234.32-.214.455.04 1.009.069 1.513.105 1.097.064 1.626.17h.259l.036-.105-.089-.065-.068-.064-1.566-1.062-1.695-1.121-.887-.646-.48-.327-.243-.306-.104-.67.435-.48.585.04.15.04.593.456 1.267.981 1.654 1.218.242.202.097-.068.012-.049-.109-.181-.9-1.626-.96-1.655-.428-.686-.113-.411a2 2 0 0 1-.068-.484l.496-.674L4.446 0l.662.089.279.242.411.94.666 1.48 1.033 2.014.302.597.162.553.06.17h.105v-.097l.085-1.134.157-1.392.154-1.792.052-.504.25-.605.497-.327.387.186.319.456-.045.294-.19 1.23-.37 1.93-.243 1.29h.142l.161-.16.654-.868 1.097-1.372.484-.545.565-.601.363-.287h.686l.505.751-.226.775-.707.895-.585.759-.839 1.13-.524.904.048.072.125-.012 1.897-.403 1.024-.186 1.223-.21.553.258.06.263-.218.536-1.307.323-1.533.307-2.284.54-.028.02.032.04 1.029.098.44.024h1.077l2.005.15.525.346.315.424-.053.323-.807.411-3.631-.863-.872-.218h-.12v.073l.726.71 1.331 1.202 1.667 1.55.084.383-.214.302-.226-.032-1.464-1.101-.565-.497-1.28-1.077h-.084v.113l.295.432 1.557 2.34.08.718-.112.234-.404.141-.444-.08-.911-1.28-.94-1.44-.759-1.291-.093.053-.448 4.821-.21.246-.484.186-.403-.307-.214-.496.214-.98.258-1.28.21-1.016.19-1.263.112-.42-.008-.028-.092.012-.953 1.307-1.448 1.957-1.146 1.227-.274.109-.477-.247.045-.44.266-.39 1.586-2.018.956-1.25.617-.723-.004-.105h-.036l-4.212 2.736-.75.096-.324-.302.04-.496.154-.162 1.267-.871z"/></svg> </a> </div> </div> </div> </div>  <div class="hidden md:flex flex-col items-end gap-4 flex-shrink-0 mt-3"> <a href="https://apps.apple.com/app/6742736112" target="_blank" rel="noopener"> <img src="https://cdn.mindmapai.app/static/img/resource/app-store-a0563d28650a860ba34ff2ace6d910a0.png" alt="Download on the App Store" width="138" height="40" loading="lazy" class="h-10"> </a> <a href="https://play.google.com/store/apps/details?id=app.mindmapai" target="_blank" rel="noopener"> <img src="https://cdn.mindmapai.app/static/img/resource/google-play-e0dd0e59ed06f932479d1dd0e4605ef5.png" alt="Get it on Google Play" width="138" height="40" loading="lazy" class="h-10"> </a> </div> </div> </div>  <div style="display:none;" aria-hidden="true"> <a href="https://chat.openai.com/?q=As%20I%20explore%20MindMap%20AI%20for%20the%20first%20time%2C%20I%20want%20to%20clearly%20understand%20how%20it%20helps%20me%20think%2C%20plan%2C%20and%20decide%E2%80%94%20and%20how%20it%20fits%20into%20my%20real%2C%20day-to-day%20work." target="_blank" rel="noopener" aria-label="Ask ChatGPT about MindMap AI" class="inline-flex items-center justify-center w-9 h-9 p-2 rounded-lg hover:bg-gray-100"> <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M22.28 9.82a5.98 5.98 0 0 0-.51-4.91 6.04 6.04 0 0 0-6.51-2.9 6.06 6.06 0 0 0-10.28 2.17 5.98 5.98 0 0 0-4 2.9 6.05 6.05 0 0 0 .74 7.1 5.98 5.98 0 0 0 .51 4.91 6.05 6.05 0 0 0 6.51 2.9 5.98 5.98 0 0 0 4.01 2.1 6.05 6.05 0 0 0 5.77-4.21 5.99 5.99 0 0 0 4-2.9 6.05 6.05 0 0 0-.74-7.07zm-9.02 12.6a4.47 4.47 0 0 1-2.88-1.04l.14-.08 4.78-2.76c.25-.14.39-.41.39-.68v-6.74l2.02 1.17c.02.01.04.03.04.05v5.58a4.5 4.5 0 0 1-4.49 4.5zM4.34 18.3a4.47 4.47 0 0 1-.53-3.01l.14.08 4.78 2.76c.24.14.54.14.78 0l5.84-3.37v2.33c0 .02-.01.05-.03.06l-4.83 2.79a4.5 4.5 0 0 1-6.15-1.64zM2.34 7.9a4.48 4.48 0 0 1 2.37-1.97V11.6c0 .27.14.53.39.68l5.81 3.35-2.02 1.17c-.02.01-.05.01-.07 0L4 12.02a4.5 4.5 0 0 1-1.66-4.12zm16.6 3.86l-5.84-3.37 2.02-1.16c.02-.01.05-.01.07 0l4.83 2.79a4.49 4.49 0 0 1-.68 8.1v-5.68c0-.27-.14-.53-.41-.68zm2.01-3.03l-.14-.08-4.77-2.78a.77.77 0 0 0-.79 0L9.41 9.23V6.9c0-.02.01-.05.03-.06l4.83-2.79a4.5 4.5 0 0 1 6.68 4.66zM8.31 12.86l-2.02-1.16c-.02-.02-.04-.04-.04-.06V6.07a4.5 4.5 0 0 1 7.38-3.45l-.14.08-4.78 2.76c-.25.14-.39.41-.39.68zm1.1-2.36l2.6-1.5 2.61 1.5v3l-2.6 1.5-2.61-1.5z"/></svg> </a> <a href="https://www.google.com/search?q=MindMap+AI&udm=50" target="_blank" rel="noopener" aria-label="Ask Google AI about MindMap AI" class="inline-flex items-center justify-center w-9 h-9 p-2 rounded-lg hover:bg-gray-100"> <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09zM12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23zM5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62zM12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/></svg> </a> <a href="https://www.perplexity.ai/search?q=MindMap+AI" target="_blank" rel="noopener" aria-label="Ask Perplexity about MindMap AI" class="inline-flex items-center justify-center w-9 h-9 p-2 rounded-lg hover:bg-gray-100"> <svg width="20" height="20" viewBox="0 0 24 24" fill="#000000"><path d="M22.3977 7.0896h-2.3106V.0676l-7.5094 6.3542V.1577h-1.1554v6.1966L4.4904 0v7.0896H1.6023v10.3976h2.8882V24l6.932-6.3591v6.2005h1.1554v-6.0469l6.9318 6.1807v-6.4879h2.8882V7.0896zm-3.4657-4.531v4.531h-5.355l5.355-4.531zm-13.2862.0676 4.8691 4.4634H5.6458V2.6262zM2.7576 16.332V8.245h7.8476l-6.1149 6.1147v1.9723H2.7576zm2.8882 5.0404v-3.8852h.0001v-2.6488l5.7763-5.7764v7.0111l-5.7764 5.2993zm12.7086.0248-5.7766-5.1509V9.0618l5.7766 5.7766v6.5588zm2.8882-5.0652h-1.733v-1.9723L13.3948 8.245h7.8478v8.087z"/></svg> </a> <a href="https://claude.ai/new?q=MindMap+AI" target="_blank" rel="noopener" aria-label="Ask Claude about MindMap AI" class="inline-flex items-center justify-center w-9 h-9 p-2 rounded-lg hover:bg-gray-100"> <svg width="20" height="20" viewBox="0 0 16 16" fill="#000000"><path d="m3.127 10.604 3.135-1.76.053-.153-.053-.085H6.11l-.525-.032-1.791-.048-1.554-.065-1.505-.08-.38-.081L0 7.832l.036-.234.32-.214.455.04 1.009.069 1.513.105 1.097.064 1.626.17h.259l.036-.105-.089-.065-.068-.064-1.566-1.062-1.695-1.121-.887-.646-.48-.327-.243-.306-.104-.67.435-.48.585.04.15.04.593.456 1.267.981 1.654 1.218.242.202.097-.068.012-.049-.109-.181-.9-1.626-.96-1.655-.428-.686-.113-.411a2 2 0 0 1-.068-.484l.496-.674L4.446 0l.662.089.279.242.411.94.666 1.48 1.033 2.014.302.597.162.553.06.17h.105v-.097l.085-1.134.157-1.392.154-1.792.052-.504.25-.605.497-.327.387.186.319.456-.045.294-.19 1.23-.37 1.93-.243 1.29h.142l.161-.16.654-.868 1.097-1.372.484-.545.565-.601.363-.287h.686l.505.751-.226.775-.707.895-.585.759-.839 1.13-.524.904.048.072.125-.012 1.897-.403 1.024-.186 1.223-.21.553.258.06.263-.218.536-1.307.323-1.533.307-2.284.54-.028.02.032.04 1.029.098.44.024h1.077l2.005.15.525.346.315.424-.053.323-.807.411-3.631-.863-.872-.218h-.12v.073l.726.71 1.331 1.202 1.667 1.55.084.383-.214.302-.226-.032-1.464-1.101-.565-.497-1.28-1.077h-.084v.113l.295.432 1.557 2.34.08.718-.112.234-.404.141-.444-.08-.911-1.28-.94-1.44-.759-1.291-.093.053-.448 4.821-.21.246-.484.186-.403-.307-.214-.496.214-.98.258-1.28.21-1.016.19-1.263.112-.42-.008-.028-.092.012-.953 1.307-1.448 1.957-1.146 1.227-.274.109-.477-.247.045-.44.266-.39 1.586-2.018.956-1.25.617-.723-.004-.105h-.036l-4.212 2.736-.75.096-.324-.302.04-.496.154-.162 1.267-.871z"/></svg> </a> <a href="https://apps.apple.com/app/6742736112" target="_blank" rel="noopener"> <img src="https://cdn.mindmapai.app/static/img/resource/app-store-a0563d28650a860ba34ff2ace6d910a0.png" alt="Download on the App Store" width="138" height="40" loading="lazy" class="h-10"> </a> <a href="https://play.google.com/store/apps/details?id=app.mindmapai" target="_blank" rel="noopener"> <img src="https://cdn.mindmapai.app/static/img/resource/google-play-e0dd0e59ed06f932479d1dd0e4605ef5.png" alt="Get it on Google Play" width="138" height="40" loading="lazy" class="h-10"> </a> </div> </div> <script src="https://cdn.mindmapai.app/static/js/article-28bfc6ac56f48e793ff7a60b6b37a60b.js" nonce="098vqlGqNy+36GozWPCgeQ=="></script> <script type="module" src="https://cdn.mindmapai.app/static/js/utils/navbar-dd8a28c199578b4ee464e584bfbbba3e.js" nonce="098vqlGqNy+36GozWPCgeQ=="></script> </body> </html>

AI Content Summarizer

AI Study Tools

AI Mapping Tools

Featured Mind map

HTML & CSS: Building and Styling Webpages

Key Takeaways

What is HTML and what are its core components for web structure?