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">188 Mind Maps</p> </a> </div> </div> </div> </section>  </main> <div class="bg-gray-900 text-white w-full pt-12 pb-6 "> <div class="container mx-auto px-4 max-w-7xl">  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-0 md:gap-8">  <div class="mb-2 md:mb-8"> <h3 class="text-lg font-bold mb-3 md:mb-6 text-white flex justify-between items-center"> Product <span class="mm-footer-toggle md:hidden cursor-pointer" data-target="product-menu"> <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 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="product-menu" class="space-y-2 md:space-y-4 text-gray-300 hidden md:block"> <li><a href="/canvas" class="hover:text-white transition duration-300">Create Mind Map</a></li> <li><a href="/features" class="hover:text-white transition duration-300">Product Features</a></li> <li><a href="/pricing" class="hover:text-white transition duration-300">Plans & Pricing</a></li> <li><a href="/compare" class="hover:text-white transition duration-300">Comparisons</a></li> <li><a href="/referral" class="hover:text-white transition duration-300">Get Free Credits</a></li> <li><a href="/student-discount" class="hover:text-white transition duration-300">Student Discount</a></li> </ul> </div>  <hr class="border-gray-700 opacity-50 md:hidden w-full my-1">  <div class="mb-2 md:mb-8"> <h3 class="text-lg font-bold mb-3 md:mb-6 text-white flex justify-between items-center"> Free Tools <span class="mm-footer-toggle md:hidden cursor-pointer" data-target="free-tools-menu"> <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 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="free-tools-menu" class="space-y-2 md:space-y-4 text-gray-300 hidden md:block"> <li><a href="/tools" class="hover:text-white transition duration-300">AI Tools</a></li> <li><a href="/ai-mindmap-generator" class="hover:text-white transition duration-300">AI Mind Map Generator</a></li> <li><a href="/ai-mindmap-maker" class="hover:text-white transition duration-300">AI Mind Map Maker</a></li> <li><a href="/pdf-to-mindmap" class="hover:text-white transition duration-300">PDF to Mind Map</a></li> <li><a href="/text-to-mindmap" class="hover:text-white transition duration-300">Text to Mind Map</a></li> <li><a href="/video-to-mindmap" class="hover:text-white transition duration-300">Video to Mind Map</a></li> </ul> </div>  <hr class="border-gray-700 opacity-50 md:hidden w-full my-1">  <div class="mb-2 md:mb-8"> <h3 class="text-lg font-bold mb-3 md:mb-6 text-white flex justify-between items-center"> Resources <span class="mm-footer-toggle md:hidden cursor-pointer" data-target="resources-menu"> <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 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="resources-menu" class="space-y-2 md:space-y-4 text-gray-300 hidden md:block"> <li><a href="/blog" class="hover:text-white transition duration-300">Blog</a></li> <li><a href="/mind-mapping" class="hover:text-white transition duration-300">Mind Map Gallery</a></li> <li><a href="/faq" class="hover:text-white transition duration-300">FAQs</a></li> <li><a href="/help" class="hover:text-white transition duration-300">Help & Support</a></li> <li><a href="/student-mind-map" class="hover:text-white transition duration-300">Mind Map for Students</a></li> <li><a href="/business-mind-map" class="hover:text-white transition duration-300">Mind Map for Business</a></li> </ul> </div>  <hr class="border-gray-700 opacity-50 md:hidden w-full my-1">  <div class="mb-2 md:mb-8"> <h3 class="text-lg font-bold mb-3 md:mb-6 text-white flex justify-between items-center"> Community & Support <span class="mm-footer-toggle md:hidden cursor-pointer" data-target="community-menu"> <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 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="community-menu" class="space-y-2 md:space-y-4 text-gray-300 hidden md:block"> <li><a href="https://mindmapai.zulipchat.com/join/mmwtuntitk47g66joigz2hnn/" target="_blank" class="hover:text-white transition duration-300">Zulip Chat</a></li> <li><a href="/contact" class="hover:text-white transition duration-300">Contact Us</a></li> <li><a href="/webinars" class="hover:text-white transition duration-300">Webinars</a></li> <li><a href="/affiliates" class="hover:text-white transition duration-300">Affiliate Program</a></li> <li><a href="/version-history" class="hover:text-white transition duration-300">What's New</a></li> </ul> </div>  <hr class="border-gray-700 opacity-50 md:hidden w-full my-1">  <div class="mb-2 md:mb-8"> <h3 class="text-lg font-bold mb-3 md:mb-6 text-white flex justify-between items-center"> Company <span class="mm-footer-toggle md:hidden cursor-pointer" data-target="company-menu"> <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 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="company-menu" class="space-y-2 md:space-y-4 text-gray-300 hidden md:block"> <li><a href="/about" class="hover:text-white transition duration-300">About Us</a></li> <li><a href="/privacy" class="hover:text-white transition duration-300">Privacy Policy</a></li> <li><a href="/terms" class="hover:text-white transition duration-300">Terms & Conditions</a></li> </ul> </div>  <hr class="border-gray-700 opacity-50 md:hidden w-full my-1"> </div> <div class="py-6"> <div class="flex flex-col md:flex-row justify-between items-center">  <div class="my-3 text-center md:text-left"> <div class="flex items-center justify-center md:justify-start flex-wrap"> <a href="https://apps.apple.com/app/6742736112" class="md:mr-4 mb-2 mr-2" target="_blank" rel="noopener"> <img src="/static/img/resource/app-store.png" width="166" height="48" alt="Download on the App Store" loading="lazy" class="h-12"> </a> <a href="https://play.google.com/store/apps/details?id=app.mindmapai" target="_blank" rel="noopener" class="mb-2"> <img src="/static/img/resource/google-play.png" width="166" height="48" alt="Get it on Google Play" loading="lazy" class="h-12"> </a> </div> </div>  <div class="flex items-center justify-center md:justify-end flex-wrap">  <div class="mx-4 my-2"> <a href="https://www.producthunt.com/posts/mindmap-ai-2?embed=true&utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mindmap-ai-2" target="_blank"> <img src="/static/img/resource/producthunt-footer.svg" width="207" height="44" alt="Product Hunt" loading="lazy" class="h-12 rounded-lg"> </a> </div>  <div class="mx-4 my-2"> <a href="https://www.trustpilot.com/review/mindmapai.app" target="_blank" rel="noopener"> <img src="/static/img/resource/trust-pilot.png" width="88" height="44" alt="Trustpilot" loading="lazy" class="h-12 rounded-lg border-2 border-green-800"> </a> </div>  <div class="mx-4 my-2"> <a href="https://www.g2.com/products/mindmap-ai/reviews" target="_blank"> <img src="/static/img/resource/g2-footer.png" width="88" height="44" alt="G2" loading="lazy" class="h-12 rounded-lg border-2 border-red-500"> </a> </div> </div> </div> </div>  <hr class="my-2 border-gray-700 opacity-50">  <div class="grid grid-cols-1 md:grid-cols-3 gap-4">  <div class="flex justify-center md:justify-start mb-2 md:mb-4"> <div> <a href="/"> <picture> <source type="image/webp" srcset="/static/img/logo/white-logo-b16f3e8926787a9d6ac49a8ca667889c.webp"> <img src="/static/img/logo/white-logo-a86d239eb7c22a72e8cfa68c6b8dde6f.png" alt="MindMap AI Logo" loading="lazy" width="185" height="56" class="h-14"> </picture> </a> </div> </div>  <div class="flex justify-center items-center mb-2 md:mb-4"> <span class="text-center text-gray-400">© 3axislabs, Inc 2025. All rights reserved.</span> </div>  <div class="flex justify-center md:justify-end"> <div class="flex flex-wrap justify-center gap-4 md:mt-2"> <a href="https://www.facebook.com/people/mindmap-ai/61557956681862/" target="_blank" class="text-white hover:text-blue-400 transition duration-300"> <img src="/static/img/resource/facebook.svg" width="32" height="32" loading="lazy" alt="facebook image"> </a> <a href="https://twitter.com/mindmapai_app" target="_blank" class="text-white hover:text-blue-400 transition duration-300"> <img src="/static/img/resource/twitter.svg" width="32" height="32" loading="lazy" alt="twitter image"> </a> <a href="https://www.linkedin.com/company/mindmapai-app" target="_blank" class="text-white hover:text-blue-500 transition duration-300"> <img src="/static/img/resource/linkedin.svg" width="32" height="32" loading="lazy" alt="linkedin image"> </a> <a href="https://www.youtube.com/@mindmapai" target="_blank" class="text-white hover:text-red-500 transition duration-300"> <img src="/static/img/resource/youtube.svg" width="32" height="32" loading="lazy" alt="youtube image"> </a> <a href="https://www.pinterest.com/mindmapaiapp/" target="_blank" class="text-white hover:text-red-500 transition duration-300"> <img src="/static/img/resource/pinterest.svg" width="32" height="32" loading="lazy" alt="pinterest image"> </a> <a href="https://www.instagram.com/mindmapai_app/" target="_blank" class="text-white hover:text-pink-400 transition duration-300"> <img src="/static/img/resource/instagram.svg" width="32" height="32" loading="lazy" alt="instagrame image"> </a> <a href="https://www.tiktok.com/@mindmapai.app" target="_blank" class="text-white hover:text-gray-300 transition duration-300"> <img src="/static/img/resource/tiktok.svg" width="32" height="32" loading="lazy" alt="tiktok image"> </a> </div> </div> </div> </div> </div> <script nonce="8QSirhpJpHG2r4vEbTYMxw=="> document.addEventListener('DOMContentLoaded', function () { const downloadBtn = document.getElementById('downloadBtn'); if (downloadBtn) { downloadBtn.addEventListener('click', downloadImage); } }); function downloadImage() { const downloadBtn = document.getElementById('downloadBtn'); const imageId = downloadBtn.dataset.imageId; if (!imageId) { console.log("could not find imageId"); return; } const title = downloadBtn.dataset.title; const fileName = title.toLowerCase().replace(/\s+/g, '-') + '-mind-map.png'; const downloadUrl = `${imageId}?download=true`; fetch(downloadUrl) .then(response => response.blob()) .then(blob => { const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = fileName; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); }) .catch(error => { console.error('Download failed:', error); }); } </script> <script type="module" src="/static/js/utils/navbar-c7e0e5e42496f6eaef75f9d71a656d80.js" nonce="8QSirhpJpHG2r4vEbTYMxw=="></script> </body> </html>

HTML & CSS: Building and Styling Webpages

Key Takeaways

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