`, and `<body>` tags. Learn how to use these tags to create a well-structured HTML document.","icon":"$undefined","url":"/tutorials/html/basic-tags/skeletal","$ref":"html/basic-tags/skeletal.mdx"},{"$id":"html/basic-tags/heading.mdx","type":"page","name":"Heading Tags","description":"HTML heading tags are used to define headings and subheadings on a web page. They range from `<h1>` to `<h6>`, with `<h1>` being the most important and `<h6>` being the least important.","icon":"$undefined","url":"/tutorials/html/basic-tags/heading","$ref":"html/basic-tags/heading.mdx"},{"$id":"html/basic-tags/paragraph.mdx","type":"page","name":"Paragraph Tag","description":"HTML paragraph tag are used to define paragraphs of text on a web page. Learn how to use the `<p>` tag to create paragraphs in HTML.","icon":"$undefined","url":"/tutorials/html/basic-tags/paragraph","$ref":"html/basic-tags/paragraph.mdx"},{"$id":"html/basic-tags/line-break.mdx","type":"page","name":"Line Break Tag","description":"The `<br>` tag in HTML is used to create a line break or new line within a block of text. Learn how to use the `<br>` tag to add line breaks in HTML.","icon":"$undefined","url":"/tutorials/html/basic-tags/line-break","$ref":"html/basic-tags/line-break.mdx"},{"$id":"html/basic-tags/horizontal-line.mdx","type":"page","name":"Horizontal Line Tag","description":"The `<hr>` tag in HTML is used to create a horizontal line or rule on a web page. Learn how to use the `<hr>` tag to separate content and create visual divisions in HTML.","icon":"$undefined","url":"/tutorials/html/basic-tags/horizontal-line","$ref":"html/basic-tags/horizontal-line.mdx"},{"$id":"html/basic-tags/anchor.mdx","type":"page","name":"Anchor Tag","description":"The `<a>` tag in HTML is used to create hyperlinks or anchor links to other web pages or resources. Learn how to use the `<a>` tag to create links in HTML.","icon":"$undefined","url":"/tutorials/html/basic-tags/anchor","$ref":"html/basic-tags/anchor.mdx"},{"$id":"html/basic-tags/image.mdx","type":"page","name":"Image Tag","description":"The `<img>` tag in HTML is used to insert images on a web page. Learn how to use the `<img>` tag to display images in HTML.","icon":"$undefined","url":"/tutorials/html/basic-tags/image","$ref":"html/basic-tags/image.mdx"},{"$id":"html/basic-tags/pre.mdx","type":"page","name":"Pre Tag","description":"The `<pre>` tag in HTML is used to define preformatted text, which preserves the original formatting of the text. Learn how to use the `<pre>` tag to display code snippets and other preformatted text in HTML.","icon":"$undefined","url":"/tutorials/html/basic-tags/pre","$ref":"html/basic-tags/pre.mdx"}],"$id":"html/basic-tags","$ref":"html/basic-tags/meta.json","icon":"$undefined"},{"type":"folder","name":"Elements","root":"$undefined","defaultOpen":"$undefined","description":"$undefined","collapsible":"$undefined","children":[{"$id":"html/elements/block.mdx","type":"page","name":"HTML Block Elements","description":"Block elements in HTML are used to create content that appears on a new line or in a separate block. Learn how to use block elements to structure your HTML pages and create visually appealing layouts.","icon":"$undefined","url":"/tutorials/html/elements/block","$ref":"html/elements/block.mdx"},{"$id":"html/elements/inline.mdx","type":"page","name":"HTML Inline Elements","description":"Inline elements in HTML are used to create content that flows within the text. Learn how to use inline elements to add links, images, and other content to your HTML pages.","icon":"$undefined","url":"/tutorials/html/elements/inline","$ref":"html/elements/inline.mdx"}],"$id":"html/elements","$ref":"html/elements/meta.json","icon":"$undefined"},{"type":"folder","name":"Lists","root":"$undefined","defaultOpen":"$undefined","description":"$undefined","collapsible":"$undefined","children":[{"$id":"html/lists/overview.mdx","type":"page","name":"HTML Lists","description":"HTML lists are used to organize and display content in a structured manner. Learn how to create ordered, unordered, and description lists in HTML.","icon":"$undefined","url":"/tutorials/html/lists/overview","$ref":"html/lists/overview.mdx"},{"$id":"html/lists/ordered.mdx","type":"page","name":"HTML Ordered List","description":"An ordered list in HTML is used to display items in a numerical sequence. Learn how to create an ordered list in HTML.","icon":"$undefined","url":"/tutorials/html/lists/ordered","$ref":"html/lists/ordered.mdx"},{"$id":"html/lists/unordered.mdx","type":"page","name":"HTML Unordered List","description":"An unordered list in HTML is used to display items using bullets. Learn how to create an unordered list in HTML.","icon":"$undefined","url":"/tutorials/html/lists/unordered","$ref":"html/lists/unordered.mdx"},{"$id":"html/lists/definition.mdx","type":"page","name":"HTML Definition List","description":"An HTML definition list is used to display items in a dictionary-like format. Learn how to create a definition list in HTML.","icon":"$undefined","url":"/tutorials/html/lists/definition","$ref":"html/lists/definition.mdx"}],"$id":"html/lists","$ref":"html/lists/meta.json","icon":"$undefined"},{"type":"folder","name":"Tables","root":"$undefined","defaultOpen":"$undefined","description":"$undefined","collapsible":"$undefined","children":[{"$id":"html/tables/overview.mdx","type":"page","name":"HTML Tables","description":"Tables are used to display data in a tabular format. Learn how to create tables in HTML and style them using CSS.","icon":"$undefined","url":"/tutorials/html/tables/overview","$ref":"html/tables/overview.mdx"},{"$id":"html/tables/more-on-tables.mdx","type":"page","name":"More on Tables","description":"Learn how to create more complex tables using HTML.","icon":"$undefined","url":"/tutorials/html/tables/more-on-tables","$ref":"html/tables/more-on-tables.mdx"}],"$id":"html/tables","$ref":"html/tables/meta.json","icon":"$undefined"},{"type":"folder","name":"Forms","root":"$undefined","defaultOpen":"$undefined","description":"$undefined","collapsible":"$undefined","children":[{"$id":"html/forms/overview.mdx","type":"page","name":"Introduction to HTML Forms","description":"Forms serve as the gateway between the user and the server, allowing for dynamic, interactive web experiences. They are crucial for tasks such as user authentication, data submission, feedback collection, and more. Simply put, forms make websites more engaging and functional.","icon":"$undefined","url":"/tutorials/html/forms/overview","$ref":"html/forms/overview.mdx"},{"$id":"html/forms/input-types.mdx","type":"page","name":"HTML Input Types","description":"Input types in HTML forms are the backbone of interactive web applications. They allow users to send information to web servers for various purposes like searching, logging in, or providing feedback. In this blog, we'll explore common HTML input types:- text, password, radio, and checkbox.","icon":"$undefined","url":"/tutorials/html/forms/input-types","$ref":"html/forms/input-types.mdx"},{"$id":"html/forms/textarea-and-select.mdx","type":"page","name":"Textarea & Select","description":"Textarea and select are two essential form elements in HTML that allow users to input text and select options from a list. In this tutorial, we'll explore how to create textarea and select elements in HTML forms.","icon":"$undefined","url":"/tutorials/html/forms/textarea-and-select","$ref":"html/forms/textarea-and-select.mdx"},{"$id":"html/forms/more-on-forms.mdx","type":"page","name":"More on forms","description":"HTML forms are the backbone of interactive websites. They allow users to submit data, which can be processed on the server. While we have covered basic input types in previous tutorials, this tutorial aims to delve deeper into form attributes, both common and new HTML5 additions. We'll also look at HTML5 validation attributes to ensure data integrity.","icon":"$undefined","url":"/tutorials/html/forms/more-on-forms","$ref":"html/forms/more-on-forms.mdx"}],"$id":"html/forms","$ref":"html/forms/meta.json","icon":"$undefined"},{"$id":"_2","type":"separator","icon":"$undefined","name":"Head Elements and Media"},{"type":"folder","name":"Head elements","root":"$undefined","defaultOpen":"$undefined","description":"$undefined","collapsible":"$undefined","children":[{"$id":"html/head-elements/meta-tags.mdx","type":"page","name":"HTML Meta Tags","description":"Meta tags are essential for search engine optimization (SEO) and social media sharing. They provide information about the webpage, such as the title, description, and author. This tutorial covers the most common meta tags and their attributes.","icon":"$undefined","url":"/tutorials/html/head-elements/meta-tags","$ref":"html/head-elements/meta-tags.mdx"},{"$id":"html/head-elements/link-script-tags.mdx","type":"page","name":"Link & Script Tags","description":"Learn how to include external resources like CSS and JavaScript files in your HTML document using link and script tags.","icon":"$undefined","url":"/tutorials/html/head-elements/link-script-tags","$ref":"html/head-elements/link-script-tags.mdx"}],"$id":"html/head-elements","$ref":"html/head-elements/meta.json","icon":"$undefined"},{"type":"folder","name":"Media","root":"$undefined","defaultOpen":"$undefined","description":"$undefined","collapsible":"$undefined","children":[{"$id":"html/media/video-and-audio.mdx","type":"page","name":"Video & Audio Tags","description":"Learn how to embed video and audio content in your web pages.","icon":"$undefined","url":"/tutorials/html/media/video-and-audio","$ref":"html/media/video-and-audio.mdx"},{"$id":"html/media/svg-in-html.mdx","type":"page","name":"SVG in HTML","description":"Scalable Vector Graphics (SVG) has become an indispensable part of modern web development. SVG enables developers to create high-quality, scalable graphics that look crisp at any size or resolution. In this blog post, we'll explore the basics of using SVG in HTML, its benefits, and some practical examples.","icon":"$undefined","url":"/tutorials/html/media/svg-in-html","$ref":"html/media/svg-in-html.mdx"},{"$id":"html/media/iframes-in-html.mdx","type":"page","name":"iFrames in HTML","description":"iFrames, or Inline Frames, are an integral part of modern web development. They allow you to embed another HTML page within your current page.","icon":"$undefined","url":"/tutorials/html/media/iframes-in-html","$ref":"html/media/iframes-in-html.mdx"}],"$id":"html/media","$ref":"html/media/meta.json","icon":"$undefined"},{"$id":"_3","type":"separator","icon":"$undefined","name":"Advanced Concepts"},{"type":"folder","name":"Miscellaneous","root":"$undefined","defaultOpen":"$undefined","description":"$undefined","collapsible":"$undefined","children":[{"$id":"html/miscellaneous/semantic-tags.mdx","type":"page","name":"HTML Semantic Tag","description":"HTML5 introduced a range of semantic tags that provide meaning to the structure of web content. This blog will guide you through the importance and usage of these tags.","icon":"$undefined","url":"/tutorials/html/miscellaneous/semantic-tags","$ref":"html/miscellaneous/semantic-tags.mdx"},{"$id":"html/miscellaneous/entities.mdx","type":"page","name":"HTML Entities","description":"HTML entities are a crucial part of HTML markup language. They enable you to display characters that are reserved in HTML or that aren't readily available on the keyboard. In this blog, we'll explore what HTML entities are, their types, and how to use them.","icon":"$undefined","url":"/tutorials/html/miscellaneous/entities","$ref":"html/miscellaneous/entities.mdx"},{"$id":"html/miscellaneous/character-sets.mdx","type":"page","name":"Character Sets","description":"Character sets are an essential concept in HTML, influencing how textual content is displayed and interpreted by the browser. This blog aims to elucidate what character sets are, why they matter, and how to specify them in HTML.","icon":"$undefined","url":"/tutorials/html/miscellaneous/character-sets","$ref":"html/miscellaneous/character-sets.mdx"},{"$id":"html/miscellaneous/global-attributes.mdx","type":"page","name":"HTML Global Attributes","description":"HTML Global Attributes play a crucial role in HTML development, providing a consistent set of attributes that can be applied to any HTML element. In this blog, we'll explore what these attributes are, their descriptions, and how to use them effectively.","icon":"$undefined","url":"/tutorials/html/miscellaneous/global-attributes","$ref":"html/miscellaneous/global-attributes.mdx"},{"$id":"html/miscellaneous/canvas.mdx","type":"page","name":"HTML Canvas","description":"The `<canvas>` element in HTML is a powerful feature for rendering graphics and shapes directly within web pages. Though it's often paired with JavaScript for dynamic rendering, the canvas itself is an HTML element. In this blog, we'll explore what you can do with the `<canvas>` element alone.","icon":"$undefined","url":"/tutorials/html/miscellaneous/canvas","$ref":"html/miscellaneous/canvas.mdx"},{"$id":"html/miscellaneous/code-tag.mdx","type":"page","name":"HTML Code Tag","description":"The HTML `<code>` tag is a powerful element for displaying code snippets within a webpage. It preserves both spaces and line breaks, making it ideal for showcasing code. In this blog post, we'll explore how to use the `<code>` tag effectively, especially in conjunction with Prism for code highlighting.","icon":"$undefined","url":"/tutorials/html/miscellaneous/code-tag","$ref":"html/miscellaneous/code-tag.mdx"},{"$id":"html/miscellaneous/quotation-tag.mdx","type":"page","name":"HTML Quotation Tag","description":"The use of quotations is common in textual content. HTML provides specific tags to handle this:- `<blockquote>` for block quotations and `<q>` for inline quotations. In this blog, we'll explore these tags, their attributes, and how to style them.","icon":"$undefined","url":"/tutorials/html/miscellaneous/quotation-tag","$ref":"html/miscellaneous/quotation-tag.mdx"},{"$id":"html/miscellaneous/obsolete-tags.mdx","type":"page","name":"Obsolete HTML Tags","description":"As HTML has evolved, some tags have been deprecated or become obsolete. While modern browsers might still support them, their use is discouraged in favor of CSS or more semantic HTML5 elements. In this blog, we'll explore some of these obsolete tags and their modern alternatives.","icon":"$undefined","url":"/tutorials/html/miscellaneous/obsolete-tags","$ref":"html/miscellaneous/obsolete-tags.mdx"}],"$id":"html/miscellaneous","$ref":"html/miscellaneous/meta.json","icon":"$undefined"}],"$id":"html","$ref":"html/meta.json","icon":"$L15"},{"type":"folder","name":"CSS Tutorial","root":true,"defaultOpen":"$undefined","description":"Web page styling","collapsible":"$undefined","children":[{"$id":"_4","type":"separator","icon":"$undefined","name":"Getting Started with CSS"},{"$id":"css/index.mdx","type":"page","name":"Quick Start","description":"Learn CSS from basics to advanced with our step-by-step guide.","icon":"$L16","url":"/tutorials/css","$ref":"css/index.mdx"},{"$id":"css/faqs.mdx","type":"page","name":"CSS FAQs","description":"Frequently asked questions about CSS - common problems, solutions, and best practices for web styling.","icon":"$L17","url":"/tutorials/css/faqs","$ref":"css/faqs.mdx"},{"type":"folder","name":"Getting started","root":"$undefined","defaultOpen":"$undefined","description":"$undefined","collapsible":"$undefined","children":[{"$id":"css/getting-started/introduction.mdx","type":"page","name":"CSS Introduction","description":"CSS stands for Cascading Style Sheets. It is a stylesheet language that is used to describe the visual presentation of a web page written in HTML (Hypertext Markup Language).","icon":"$undefined","url":"/tutorials/css/getting-started/introduction","$ref":"css/getting-started/introduction.mdx"},{"$id":"css/getting-started/syntax.mdx","type":"page","name":"CSS Syntax","description":"CSS follows a rule-based structure. Each rule consists of a selector and a declaration block. Selectors pick the HTML elements, while declaration blocks contain pairs of properties and values.","icon":"$undefined","url":"/tutorials/css/getting-started/syntax","$ref":"css/getting-started/syntax.mdx"},{"$id":"css/getting-started/ways-to-add-css.mdx","type":"page","name":"Ways to add CSS","description":"There are three ways to add CSS in HTML.","icon":"$undefined","url":"/tutorials/css/getting-started/ways-to-add-css","$ref":"css/getting-started/ways-to-add-css.mdx"},{"$id":"css/getting-started/selectors.mdx","type":"page","name":"CSS Selectors","description":"CSS selectors allow us to choose specific elements and apply styles to them. They help in targeting particular HTML elements for custom styling.","icon":"$undefined","url":"/tutorials/css/getting-started/selectors","$ref":"css/getting-started/selectors.mdx"},{"$id":"css/getting-started/specificity.mdx","type":"page","name":"CSS Specificity","description":"CSS Specificity helps determine what style will be applied to the HTML element(s) when there are overlapping or multiple CSS rules.","icon":"$undefined","url":"/tutorials/css/getting-started/specificity","$ref":"css/getting-started/specificity.mdx"},{"$id":"css/getting-started/comments.mdx","type":"page","name":"CSS Comments","description":"Comments help with documentation and are helpful for the future users who read that code, so that they can understand it easily.","icon":"$undefined","url":"/tutorials/css/getting-started/comments","$ref":"css/getting-started/comments.mdx"}],"$id":"css/getting-started","$ref":"css/getting-started/meta.json","icon":"$undefined"},{"$id":"_5","type":"separator","icon":"$undefined","name":"Styling Properties"},{"type":"folder","name":"Properties","root":"$undefined","defaultOpen":"$undefined","description":"$undefined","collapsible":"$undefined","children":[{"$id":"css/properties/colors.mdx","type":"page","name":"CSS Colors","description":"The color property of CSS helps to set the color of the HTML element(s). This helps to set the foreground color of text, text decorations, and borders.","icon":"$undefined","url":"/tutorials/css/properties/colors","$ref":"css/properties/colors.mdx"},{"$id":"css/properties/backgrounds.mdx","type":"page","name":"CSS Backgrounds","description":"Learn how to style element backgrounds with colors, images, gradients, and advanced background properties in CSS.","icon":"$undefined","url":"/tutorials/css/properties/backgrounds","$ref":"css/properties/backgrounds.mdx"},{"$id":"css/properties/borders.mdx","type":"page","name":"CSS Borders","description":"Master CSS border properties to add, style, and customize borders around elements with colors, styles, widths, and rounded corners.","icon":"$undefined","url":"/tutorials/css/properties/borders","$ref":"css/properties/borders.mdx"},{"$id":"css/properties/box-model.mdx","type":"page","name":"CSS Box Model","description":"Understand the CSS box model, including content, padding, border, and margin, and how they affect element sizing and spacing.","icon":"$undefined","url":"/tutorials/css/properties/box-model","$ref":"css/properties/box-model.mdx"},{"$id":"css/properties/margin.mdx","type":"page","name":"CSS Margin","description":"Master CSS margins to create space around elements, control layout, center elements, and manage spacing between components.","icon":"$undefined","url":"/tutorials/css/properties/margin","$ref":"css/properties/margin.mdx"},{"$id":"css/properties/padding.mdx","type":"page","name":"CSS Padding","description":"Learn how to use CSS padding to create space inside elements between content and borders for better layout control.","icon":"$undefined","url":"/tutorials/css/properties/padding","$ref":"css/properties/padding.mdx"},{"$id":"css/properties/size.mdx","type":"page","name":"CSS Size Properties","description":"Master CSS width and height properties, min/max constraints, and sizing techniques for responsive, flexible layouts.","icon":"$undefined","url":"/tutorials/css/properties/size","$ref":"css/properties/size.mdx"},{"$id":"css/properties/text-styling.mdx","type":"page","name":"CSS Text Styling","description":"Master CSS text properties including alignment, decoration, transformation, spacing, and shadows for beautiful typography.","icon":"$undefined","url":"/tutorials/css/properties/text-styling","$ref":"css/properties/text-styling.mdx"},{"$id":"css/properties/fonts.mdx","type":"page","name":"CSS Fonts","description":"Learn how to style text with CSS font properties including font-family, font-size, font-weight, and modern web fonts.","icon":"$undefined","url":"/tutorials/css/properties/fonts","$ref":"css/properties/fonts.mdx"},{"$id":"css/properties/links.mdx","type":"page","name":"CSS Links","description":"Learn how to style links with CSS including link states, hover effects, and creating attractive, accessible navigation.","icon":"$undefined","url":"/tutorials/css/properties/links","$ref":"css/properties/links.mdx"},{"$id":"css/properties/hover.mdx","type":"page","name":"CSS Hover Effects","description":"Master CSS hover effects to create interactive, engaging user experiences with transitions, transforms, and creative animations.","icon":"$undefined","url":"/tutorials/css/properties/hover","$ref":"css/properties/hover.mdx"},{"$id":"css/properties/list-styles.mdx","type":"page","name":"CSS List Styles","description":"Master CSS list styling to customize bullets, numbers, markers, and create beautiful ordered and unordered lists.","icon":"$undefined","url":"/tutorials/css/properties/list-styles","$ref":"css/properties/list-styles.mdx"},{"$id":"css/properties/images.mdx","type":"page","name":"CSS Images","description":"Learn CSS image styling techniques including sizing, positioning, filters, effects, and responsive images for modern web design.","icon":"$undefined","url":"/tutorials/css/properties/images","$ref":"css/properties/images.mdx"},{"$id":"css/properties/buttons.mdx","type":"page","name":"CSS Buttons","description":"Master CSS button styling to create beautiful, interactive buttons with hover effects, animations, and modern designs.","icon":"$undefined","url":"/tutorials/css/properties/buttons","$ref":"css/properties/buttons.mdx"},{"$id":"css/properties/forms.mdx","type":"page","name":"CSS Forms","description":"Master CSS form styling to create beautiful, user-friendly forms with proper validation states and accessibility.","icon":"$undefined","url":"/tutorials/css/properties/forms","$ref":"css/properties/forms.mdx"},{"$id":"css/properties/cursors.mdx","type":"page","name":"CSS Cursors","description":"Master CSS cursor property to provide visual feedback and improve user experience with custom mouse cursors.","icon":"$undefined","url":"/tutorials/css/properties/cursors","$ref":"css/properties/cursors.mdx"},{"$id":"css/properties/positioning.mdx","type":"page","name":"CSS Positioning","description":"Master CSS positioning to precisely control element placement using static, relative, absolute, fixed, and sticky positioning.","icon":"$undefined","url":"/tutorials/css/properties/positioning","$ref":"css/properties/positioning.mdx"},{"$id":"css/properties/float.mdx","type":"page","name":"CSS Float","description":"Learn CSS float property for wrapping text around images and creating multi-column layouts (legacy technique).","icon":"$undefined","url":"/tutorials/css/properties/float","$ref":"css/properties/float.mdx"},{"$id":"css/properties/overflow.mdx","type":"page","name":"CSS Overflow","description":"Control how content behaves when it's too large for its container using CSS overflow properties for better content management.","icon":"$undefined","url":"/tutorials/css/properties/overflow","$ref":"css/properties/overflow.mdx"},{"$id":"css/properties/z-index.mdx","type":"page","name":"CSS Z-Index","description":"Master CSS z-index to control the stacking order of positioned elements and create layered interfaces.","icon":"$undefined","url":"/tutorials/css/properties/z-index","$ref":"css/properties/z-index.mdx"},{"$id":"css/properties/combinators.mdx","type":"page","name":"CSS Combinators","description":"Master CSS combinators to create powerful, specific selectors for targeting elements based on their relationships.","icon":"$undefined","url":"/tutorials/css/properties/combinators","$ref":"css/properties/combinators.mdx"},{"$id":"css/properties/pseudo-classes.mdx","type":"page","name":"CSS Pseudo-Classes","description":"Master CSS pseudo-classes to style elements based on their state, position, and user interaction for dynamic styling.","icon":"$undefined","url":"/tutorials/css/properties/pseudo-classes","$ref":"css/properties/pseudo-classes.mdx"},{"$id":"css/properties/important.mdx","type":"page","name":"CSS !important","description":"Learn when and how to use the !important rule in CSS, its implications, and best practices for maintaining clean code.","icon":"$undefined","url":"/tutorials/css/properties/important","$ref":"css/properties/important.mdx"},{"$id":"css/properties/maths-functions.mdx","type":"page","name":"CSS Math Functions","description":"Master CSS mathematical functions like calc(), min(), max(), and clamp() for dynamic, responsive layouts.","icon":"$undefined","url":"/tutorials/css/properties/maths-functions","$ref":"css/properties/maths-functions.mdx"},{"$id":"css/properties/navigation-bar.mdx","type":"page","name":"CSS Navigation Bar","description":"Learn to create beautiful, responsive navigation bars with CSS including dropdowns, mobile menus, and modern patterns.","icon":"$undefined","url":"/tutorials/css/properties/navigation-bar","$ref":"css/properties/navigation-bar.mdx"},{"$id":"css/properties/video-embedding.mdx","type":"page","name":"CSS Video Embedding","description":"Learn CSS techniques for embedding and styling videos with responsive sizing, custom controls, and overlays.","icon":"$undefined","url":"/tutorials/css/properties/video-embedding","$ref":"css/properties/video-embedding.mdx"}],"$id":"css/properties","$ref":"css/properties/meta.json","icon":"$undefined"},{"type":"folder","name":"Designing","root":"$undefined","defaultOpen":"$undefined","description":"$undefined","collapsible":"$undefined","children":[{"$id":"css/designing/display.mdx","type":"page","name":"CSS Display Property","description":"Master the CSS display property to control how elements are rendered, including block, inline, inline-block, flex, grid, and none.","icon":"$undefined","url":"/tutorials/css/designing/display","$ref":"css/designing/display.mdx"},{"$id":"css/designing/flexbox.mdx","type":"page","name":"CSS Flexbox","description":"Master CSS Flexbox layout for creating flexible, responsive layouts with easy alignment and distribution of elements.","icon":"$undefined","url":"/tutorials/css/designing/flexbox","$ref":"css/designing/flexbox.mdx"},{"$id":"css/designing/grid.mdx","type":"page","name":"CSS Grid","description":"Learn CSS Grid Layout for creating powerful two-dimensional layouts with rows and columns for complex web designs.","icon":"$undefined","url":"/tutorials/css/designing/grid","$ref":"css/designing/grid.mdx"},{"$id":"css/designing/media-queries.mdx","type":"page","name":"CSS Media Queries","description":"Master CSS media queries to create responsive designs that adapt to different screen sizes, devices, and user preferences.","icon":"$undefined","url":"/tutorials/css/designing/media-queries","$ref":"css/designing/media-queries.mdx"}],"$id":"css/designing","$ref":"css/designing/meta.json","icon":"$undefined"},{"$id":"_6","type":"separator","icon":"$undefined","name":"Advanced Techniques"},{"type":"folder","name":"Advance topics","root":"$undefined","defaultOpen":"$undefined","description":"$undefined","collapsible":"$undefined","children":[{"$id":"css/advance-topics/inherit.mdx","type":"page","name":"CSS Inherit Keyword","description":"Learn to use the CSS inherit keyword to force inheritance of parent styles for powerful cascading control.","icon":"$undefined","url":"/tutorials/css/advance-topics/inherit","$ref":"css/advance-topics/inherit.mdx"},{"$id":"css/advance-topics/gradients.mdx","type":"page","name":"CSS Gradients","description":"Master CSS gradients to create beautiful color transitions with linear, radial, and conic gradients for modern web designs.","icon":"$undefined","url":"/tutorials/css/advance-topics/gradients","$ref":"css/advance-topics/gradients.mdx"},{"$id":"css/advance-topics/shadows.mdx","type":"page","name":"CSS Shadows","description":"Master CSS shadows to add depth and dimension with box-shadow and text-shadow for modern, visually appealing designs.","icon":"$undefined","url":"/tutorials/css/advance-topics/shadows","$ref":"css/advance-topics/shadows.mdx"},{"$id":"css/advance-topics/border-images.mdx","type":"page","name":"CSS Border Images","description":"Learn to use CSS border-image property to create decorative borders with images and gradients.","icon":"$undefined","url":"/tutorials/css/advance-topics/border-images","$ref":"css/advance-topics/border-images.mdx"},{"$id":"css/advance-topics/transitions.mdx","type":"page","name":"CSS Transitions","description":"Learn how to create smooth animations between CSS property changes using transitions for enhanced user experience.","icon":"$undefined","url":"/tutorials/css/advance-topics/transitions","$ref":"css/advance-topics/transitions.mdx"},{"$id":"css/advance-topics/2d-transform.mdx","type":"page","name":"CSS 2D Transforms","description":"Master CSS 2D transforms to rotate, scale, skew, and translate elements for dynamic, interactive designs.","icon":"$undefined","url":"/tutorials/css/advance-topics/2d-transform","$ref":"css/advance-topics/2d-transform.mdx"},{"$id":"css/advance-topics/animations.mdx","type":"page","name":"CSS Animations","description":"Create complex, keyframe-based animations with CSS to bring your web pages to life with smooth, engaging motion effects.","icon":"$undefined","url":"/tutorials/css/advance-topics/animations","$ref":"css/advance-topics/animations.mdx"},{"$id":"css/advance-topics/masking.mdx","type":"page","name":"CSS Masking","description":"Learn CSS masking techniques to clip and shape elements with images and gradients for creative effects.","icon":"$undefined","url":"/tutorials/css/advance-topics/masking","$ref":"css/advance-topics/masking.mdx"},{"$id":"css/advance-topics/media-queries-advanced.mdx","type":"page","name":"Advanced Media Queries","description":"Master advanced CSS media query techniques including container queries, preference queries, and complex conditions.","icon":"$undefined","url":"/tutorials/css/advance-topics/media-queries-advanced","$ref":"css/advance-topics/media-queries-advanced.mdx"},{"$id":"css/advance-topics/tooltip-text.mdx","type":"page","name":"CSS Tooltips","description":"Learn to create beautiful, accessible tooltips with CSS for providing contextual help and information.","icon":"$undefined","url":"/tutorials/css/advance-topics/tooltip-text","$ref":"css/advance-topics/tooltip-text.mdx"},{"$id":"css/advance-topics/pagination.mdx","type":"page","name":"CSS Pagination","description":"Learn to create beautiful, accessible pagination controls with CSS for navigating through content pages.","icon":"$undefined","url":"/tutorials/css/advance-topics/pagination","$ref":"css/advance-topics/pagination.mdx"}],"$id":"css/advance-topics","$ref":"css/advance-topics/meta.json","icon":"$undefined"}],"$id":"css","$ref":"css/meta.json","icon":"$L18"},{"type":"folder","name":"JavaScript Tutorial","root":true,"defaultOpen":"$undefined","description":"Interactive web programming language","collapsible":"$undefined","children":[{"$id":"_7","type":"separator","icon":"$undefined","name":"Introduction"},{"$id":"javascript/index.mdx","type":"page","name":"Quick Start","description":"Getting Started with JavaScript","icon":"$L19","url":"/tutorials/javascript","$ref":"javascript/index.mdx"},{"$id":"javascript/what-is-javascript.mdx","type":"page","name":"What is JavaScript","description":"Introduction to JavaScript, a versatile programming language for the web.","icon":"$L1a","url":"/tutorials/javascript/what-is-javascript","$ref":"javascript/what-is-javascript.mdx"},{"$id":"javascript/history-of-javascript.mdx","type":"page","name":"History of JavaScript","description":"Discover how JavaScript evolved from its early days to becoming one of the most popular languages in the world.","icon":"$L1b","url":"/tutorials/javascript/history-of-javascript","$ref":"javascript/history-of-javascript.mdx"},{"$id":"_8","type":"separator","icon":"$undefined","name":"Setup"},{"$id":"javascript/nodejs-installation.mdx","type":"page","name":"Node.js Installation","description":"Install Node.js to run JavaScript on your computer.","icon":"$undefined","url":"/tutorials/javascript/nodejs-installation","$ref":"javascript/nodejs-installation.mdx"},{"$id":"javascript/code-editor.mdx","type":"page","name":"Visual Studio Code","description":"Set up Visual Studio Code to write and run your JavaScript code.","icon":"$undefined","url":"/tutorials/javascript/code-editor","$ref":"javascript/code-editor.mdx"},{"$id":"_9","type":"separator","icon":"$undefined","name":"Basics"},{"type":"folder","name":"Syntax & Comments","root":"$undefined","defaultOpen":"$undefined","description":"$undefined","collapsible":"$undefined","children":[{"$id":"javascript/syntax/statements-and-semicolons.mdx","type":"page","name":"Statements, Semicolons, and Whitespace","description":"Understand how JavaScript statements, semicolons, and whitespace work together.","icon":"$undefined","url":"/tutorials/javascript/syntax/statements-and-semicolons","$ref":"javascript/syntax/statements-and-semicolons.mdx"},{"$id":"javascript/syntax/comments.mdx","type":"page","name":"Comments","description":"Learn how to use comments to explain and document your JavaScript code.","icon":"$undefined","url":"/tutorials/javascript/syntax/comments","$ref":"javascript/syntax/comments.mdx"}],"$id":"javascript/syntax","$ref":"javascript/syntax/meta.json","index":{"$id":"javascript/syntax/index.mdx","type":"page","name":"Syntax & Comments","description":"Learn how JavaScript statements and comments work to structure your code.","icon":"$undefined","url":"/tutorials/javascript/syntax","$ref":"javascript/syntax/index.mdx"},"icon":"$undefined"},{"type":"folder","name":"Variables","root":"$undefined","defaultOpen":"$undefined","description":"$undefined","collapsible":"$undefined","children":[{"$id":"javascript/variables/naming-rules.mdx","type":"page","name":"Variable Naming Rules","description":"In JavaScript, There are a few rules that you need to follow when naming variables. These rules are important to ensure that your code is readable and maintainable.","icon":"$undefined","url":"/tutorials/javascript/variables/naming-rules","$ref":"javascript/variables/naming-rules.mdx"},{"$id":"javascript/variables/primitives-and-objects.mdx","type":"page","name":"Primitives and Objects","description":"In JavaScript, variables can store two types of values:- primitives and objects. Understanding the difference between these two types is important for writing effective and efficient code.","icon":"$undefined","url":"/tutorials/javascript/variables/primitives-and-objects","$ref":"javascript/variables/primitives-and-objects.mdx"},{"$id":"javascript/variables/operators-and-expressions.mdx","type":"page","name":"Operators and Expressions","description":"In JavaScript, operators are used to perform operations on variables and values. Expressions are combinations of variables, values, and operators that are evaluated to produce a result.","icon":"$undefined","url":"/tutorials/javascript/variables/operators-and-expressions","$ref":"javascript/variables/operators-and-expressions.mdx"},{"$id":"javascript/variables/var-let-const.mdx","type":"page","name":"var vs let vs const","description":"In JavaScript, there are three ways to declare variables:- var, let, and const. Understanding the differences between these three methods is important for writing clean and maintainable code.","icon":"$undefined","url":"/tutorials/javascript/variables/var-let-const","$ref":"javascript/variables/var-let-const.mdx"}],"$id":"javascript/variables","$ref":"javascript/variables/meta.json","index":{"$id":"javascript/variables/index.mdx","type":"page","name":"Variables","description":"In JavaScript, variables are used to store data. They are an essential part of any programming language, as they allow you to store, retrieve, and manipulate data in your programs.","icon":"$undefined","url":"/tutorials/javascript/variables","$ref":"javascript/variables/index.mdx"},"icon":"$undefined"},{"type":"folder","name":"Conditionals","root":"$undefined","defaultOpen":"$undefined","description":"$undefined","collapsible":"$undefined","children":[{"$id":"javascript/conditionals/if-else-conditionals.mdx","type":"page","name":"If-Else Conditionals","description":"The \"if\" statement in JavaScript is used to execute a block of code if a certain condition is met. The \"else\" clause is used to execute a block of code if the condition is not met.","icon":"$undefined","url":"/tutorials/javascript/conditionals/if-else-conditionals","$ref":"javascript/conditionals/if-else-conditionals.mdx"},{"$id":"javascript/conditionals/if-else-ladder.mdx","type":"page","name":"If-Else Ladder","description":"The \"if-else\" ladder is a series of \"if\" and \"else\" statements that are used to test multiple conditions in sequence.","icon":"$undefined","url":"/tutorials/javascript/conditionals/if-else-ladder","$ref":"javascript/conditionals/if-else-ladder.mdx"},{"$id":"javascript/conditionals/switch-case.mdx","type":"page","name":"Switch Case","description":"The \"switch\" statement in JavaScript is used to execute a block of code based on the value of a variable or expression.","icon":"$undefined","url":"/tutorials/javascript/conditionals/switch-case","$ref":"javascript/conditionals/switch-case.mdx"},{"$id":"javascript/conditionals/ternary-operator.mdx","type":"page","name":"Ternary Operator","description":"The \"ternary operator\" is a shorthand way of writing an \"if-else\" statement in JavaScript.","icon":"$undefined","url":"/tutorials/javascript/conditionals/ternary-operator","$ref":"javascript/conditionals/ternary-operator.mdx"}],"$id":"javascript/conditionals","$ref":"javascript/conditionals/meta.json","icon":"$undefined"},{"type":"folder","name":"Loops","root":"$undefined","defaultOpen":"$undefined","description":"$undefined","collapsible":"$undefined","children":[{"$id":"javascript/loops/for-loops.mdx","type":"page","name":"For Loops","description":"For loops are a common control flow structure in programming that allows you to repeat a block of code a specific number of times.","icon":"$undefined","url":"/tutorials/javascript/loops/for-loops","$ref":"javascript/loops/for-loops.mdx"},{"$id":"javascript/loops/while-loop.mdx","type":"page","name":"While Loop","description":"The \"while\" loop in JavaScript is used to execute a block of code as long as a condition is true.","icon":"$undefined","url":"/tutorials/javascript/loops/while-loop","$ref":"javascript/loops/while-loop.mdx"}],"$id":"javascript/loops","$ref":"javascript/loops/meta.json","icon":"$undefined"},{"$id":"javascript/functions.mdx","type":"page","name":"Functions","description":"Functions are reusable blocks of code that perform a specific task. They allow you to break down your code into smaller, more manageable pieces.","icon":"$undefined","url":"/tutorials/javascript/functions","$ref":"javascript/functions.mdx"},{"type":"folder","name":"Objects","root":"$undefined","defaultOpen":"$undefined","description":"$undefined","collapsible":"$undefined","children":[{"$id":"javascript/objects/strings.mdx","type":"page","name":"JavaScript Strings","description":"Strings are sequences of characters enclosed in single or double quotes. They are used to represent text in JavaScript.","icon":"$undefined","url":"/tutorials/javascript/objects/strings","$ref":"javascript/objects/strings.mdx"},{"$id":"javascript/objects/arrays.mdx","type":"page","name":"JavaScripit Arrays","description":"Arrays are used to store multiple values in a single variable. They are a special type of object that can hold multiple values at once.","icon":"$undefined","url":"/tutorials/javascript/objects/arrays","$ref":"javascript/objects/arrays.mdx"},{"$id":"javascript/objects/loops-with-arrays.mdx","type":"page","name":"Loops with Arrays","description":"In this tutorial, we will learn how to use loops to iterate over arrays in JavaScript.","icon":"$undefined","url":"/tutorials/javascript/objects/loops-with-arrays","$ref":"javascript/objects/loops-with-arrays.mdx"},{"$id":"javascript/objects/map-filter-reduce.mdx","type":"page","name":"Map, Filter, and Reduce","description":"In this tutorial, we will learn how to use the map, filter, and reduce methods in JavaScript to manipulate arrays.","icon":"$undefined","url":"/tutorials/javascript/objects/map-filter-reduce","$ref":"javascript/objects/map-filter-reduce.mdx"},{"$id":"javascript/objects/date.mdx","type":"page","name":"Date in JavaScript","description":"In this tutorial, we will learn how to work with dates in JavaScript using the Date object.","icon":"$undefined","url":"/tutorials/javascript/objects/date","$ref":"javascript/objects/date.mdx"},{"$id":"javascript/objects/math.mdx","type":"page","name":"Math in JavaScript","description":"In this tutorial, we will learn how to perform mathematical operations in JavaScript using the Math object.","icon":"$undefined","url":"/tutorials/javascript/objects/math","$ref":"javascript/objects/math.mdx"},{"$id":"javascript/objects/number.mdx","type":"page","name":"Number in JavaScript","description":"In this tutorial, we will learn how to work with numbers in JavaScript using the Number object.","icon":"$undefined","url":"/tutorials/javascript/objects/number","$ref":"javascript/objects/number.mdx"},{"$id":"javascript/objects/boolean.mdx","type":"page","name":"Boolean in JavaScript","description":"In this tutorial, we will learn how to work with booleans in JavaScript using the Boolean object.","icon":"$undefined","url":"/tutorials/javascript/objects/boolean","$ref":"javascript/objects/boolean.mdx"}],"$id":"javascript/objects","$ref":"javascript/objects/meta.json","icon":"$undefined"},{"$id":"_10","type":"separator","icon":"$undefined","name":"Advanced"},{"type":"folder","name":"Dom bom","root":"$undefined","defaultOpen":"$undefined","description":"$undefined","collapsible":"$undefined","children":[{"$id":"javascript/dom-bom/window-object.mdx","type":"page","name":"Window Object","description":"In this tutorial, we will learn about the Window object in JavaScript.","icon":"$undefined","url":"/tutorials/javascript/dom-bom/window-object","$ref":"javascript/dom-bom/window-object.mdx"},{"$id":"javascript/dom-bom/history-object.mdx","type":"page","name":"History Object","description":"In this tutorial, we will learn about the History object in JavaScript.","icon":"$undefined","url":"/tutorials/javascript/dom-bom/history-object","$ref":"javascript/dom-bom/history-object.mdx"},{"$id":"javascript/dom-bom/navigator-object.mdx","type":"page","name":"Navigator Object","description":"In this tutorial, we will learn about the Navigator object in JavaScript.","icon":"$undefined","url":"/tutorials/javascript/dom-bom/navigator-object","$ref":"javascript/dom-bom/navigator-object.mdx"},{"$id":"javascript/dom-bom/screen-object.mdx","type":"page","name":"Screen Object","description":"In this tutorial, we will learn about the Screen object in JavaScript.","icon":"$undefined","url":"/tutorials/javascript/dom-bom/screen-object","$ref":"javascript/dom-bom/screen-object.mdx"},{"$id":"javascript/dom-bom/document-object.mdx","type":"page","name":"Document Objects","description":"In this tutorial, we will learn about the Document object in JavaScript.","icon":"$undefined","url":"/tutorials/javascript/dom-bom/document-object","$ref":"javascript/dom-bom/document-object.mdx"},{"$id":"javascript/dom-bom/get-element-by-id.mdx","type":"page","name":"getElementById Method","description":"In this tutorial, we will learn about the getElementById method in JavaScript.","icon":"$undefined","url":"/tutorials/javascript/dom-bom/get-element-by-id","$ref":"javascript/dom-bom/get-element-by-id.mdx"},{"$id":"javascript/dom-bom/get-elements-by-class-name.mdx","type":"page","name":"getElementsByClassName Method","description":"In this tutorial, we will learn about the getElementsByClassName method in JavaScript.","icon":"$undefined","url":"/tutorials/javascript/dom-bom/get-elements-by-class-name","$ref":"javascript/dom-bom/get-elements-by-class-name.mdx"},{"$id":"javascript/dom-bom/get-elements-by-name.mdx","type":"page","name":"getElementsByName Method","description":"In this tutorial, we will learn about the getElementsByName method in JavaScript.","icon":"$undefined","url":"/tutorials/javascript/dom-bom/get-elements-by-name","$ref":"javascript/dom-bom/get-elements-by-name.mdx"},{"$id":"javascript/dom-bom/get-elements-by-tag-name.mdx","type":"page","name":"getElementsByTagName Method","description":"In this tutorial, we will learn about the getElementsByTagName method in JavaScript.","icon":"$undefined","url":"/tutorials/javascript/dom-bom/get-elements-by-tag-name","$ref":"javascript/dom-bom/get-elements-by-tag-name.mdx"},{"$id":"javascript/dom-bom/inner-html.mdx","type":"page","name":"innerHTML","description":"In this tutorial, you will learn about the innerHTML property in JavaScript.","icon":"$undefined","url":"/tutorials/javascript/dom-bom/inner-html","$ref":"javascript/dom-bom/inner-html.mdx"},{"$id":"javascript/dom-bom/outer-html.mdx","type":"page","name":"outerHTML","description":"In this tutorial, you will learn about the outerHTML property in JavaScript.","icon":"$undefined","url":"/tutorials/javascript/dom-bom/outer-html","$ref":"javascript/dom-bom/outer-html.mdx"}],"$id":"javascript/dom-bom","$ref":"javascript/dom-bom/meta.json","icon":"$undefined"},{"type":"folder","name":"Oops","root":"$undefined","defaultOpen":"$undefined","description":"$undefined","collapsible":"$undefined","children":[{"$id":"javascript/oops/objects.mdx","type":"page","name":"Objects in JavaScript","description":"In this tutorial, we will learn about objects in JavaScript.","icon":"$undefined","url":"/tutorials/javascript/oops/objects","$ref":"javascript/oops/objects.mdx"},{"$id":"javascript/oops/class.mdx","type":"page","name":"Class in JavaScript","description":"In this tutorial, we will learn about classes in JavaScript.","icon":"$undefined","url":"/tutorials/javascript/oops/class","$ref":"javascript/oops/class.mdx"},{"$id":"javascript/oops/constructor.mdx","type":"page","name":"Constructor in JavaScript","description":"In this tutorial, we will learn about constructors in JavaScript.","icon":"$undefined","url":"/tutorials/javascript/oops/constructor","$ref":"javascript/oops/constructor.mdx"},{"$id":"javascript/oops/static-method.mdx","type":"page","name":"Static Method in JavaScript","description":"In this tutorial, we will learn about static methods in JavaScript classes.","icon":"$undefined","url":"/tutorials/javascript/oops/static-method","$ref":"javascript/oops/static-method.mdx"},{"$id":"javascript/oops/encapsulation.mdx","type":"page","name":"Encapsulation in JavaScript","description":"In this tutorial, we will learn about encapsulation in JavaScript.","icon":"$undefined","url":"/tutorials/javascript/oops/encapsulation","$ref":"javascript/oops/encapsulation.mdx"},{"$id":"javascript/oops/inheritance.mdx","type":"page","name":"Inheritance in JavaScript","description":"In this tutorial, we will learn about inheritance in JavaScript.","icon":"$undefined","url":"/tutorials/javascript/oops/inheritance","$ref":"javascript/oops/inheritance.mdx"},{"$id":"javascript/oops/polymorphism.mdx","type":"page","name":"Polymorphism in JavaScript","description":"In this tutorial, we will learn about polymorphism in JavaScript.","icon":"$undefined","url":"/tutorials/javascript/oops/polymorphism","$ref":"javascript/oops/polymorphism.mdx"},{"$id":"javascript/oops/abstraction.mdx","type":"page","name":"Abstraction in JavaScript","description":"In this tutorial, we will learn about abstraction in JavaScript.","icon":"$undefined","url":"/tutorials/javascript/oops/abstraction","$ref":"javascript/oops/abstraction.mdx"}],"$id":"javascript/oops","$ref":"javascript/oops/meta.json","icon":"$undefined"}],"$id":"javascript","$ref":"javascript/meta.json","icon":"$L1c"}]},"children":"$L1d"}]}],"$L1e","$L1f"]}]]}]]}] </article></body></html>

3:["$","$11","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/chunks/0tb6qwds2p597.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/_next/static/chunks/08bvhd8j7q3j6.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","script","script-0",{"src":"/_next/static/chunks/099bu-hxwv6uz.js","async":true,"nonce":"$undefined"}],["$","script","script-1",{"src":"/_next/static/chunks/168u5vjp8nhp4.js","async":true,"nonce":"$undefined"}],["$","script","script-2",{"src":"/_next/static/chunks/0xug9xy5at3a9.js","async":true,"nonce":"$undefined"}],["$","script","script-3",{"src":"/_next/static/chunks/09hsxxefz4u8h.js","async":true,"nonce":"$undefined"}],["$","script","script-4",{"src":"/_next/static/chunks/1368a31qr_oyv.js","async":true,"nonce":"$undefined"}],["$","script","script-5",{"src":"/_next/static/chunks/04h1ix2vzqful.js","async":true,"nonce":"$undefined"}],["$","script","script-6",{"src":"/_next/static/chunks/0uj18jab2d70c.js","async":true,"nonce":"$undefined"}],["$","script","script-7",{"src":"/_next/static/chunks/116p9awy-wh5n.js","async":true,"nonce":"$undefined"}],["$","script","script-8",{"src":"/_next/static/chunks/0~vfldc5.c_s2.js","async":true,"nonce":"$undefined"}],["$","script","script-9",{"src":"/_next/static/chunks/0jygb8sf9vr7x.js","async":true,"nonce":"$undefined"}],["$","script","script-10",{"src":"/_next/static/chunks/0apkj31u9k01o.js","async":true,"nonce":"$undefined"}]],["$","html",null,{"lang":"en","data-scroll-behavior":"smooth","suppressHydrationWarning":true,"className":"scroll-smooth geistsans_d5a4f12f-module__rNOmBa__variable geistmono_157ca88a-module__A5kHdW__variable geistpixelsquare_cf225766-module__1yF86G__variable","children":[["$","head",null,{"children":["$","script",null,{"dangerouslySetInnerHTML":{"__html":"\n try {\n if (localStorage.theme === 'dark' || ((!('theme' in localStorage) || localStorage.theme === 'system') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {\n document.querySelector('meta[name=\"theme-color\"]').setAttribute('content', '#0d0d0d')\n }\n } catch (_) {}\n "}}]}],["$","body",null,{"className":"relative mx-auto max-w-(--breakpoint-2xl) bg-background font-sans text-foreground antialiased selection:bg-foreground selection:text-background","children":[["$","$L12",null,{"children":["$","$L13",null,{"tree":{"type":"root","$ref":"meta.json","$id":"root","name":"Docs","description":"$undefined","children":[{"type":"folder","name":"HTML Tutorial","root":true,"defaultOpen":"$undefined","description":"Web page structure","collapsible":"$undefined","children":[{"$id":"_0","type":"separator","icon":"$undefined","name":"Getting Started"},{"$id":"html/index.mdx","type":"page","name":"Quick Start","description":"Learn HTML from basics to advanced with our step-by-step guide.","icon":["$","$L14",null,{"ref":"$undefined","iconNode":[["path",{"d":"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z","key":"1oefj6"}],["path",{"d":"M14 2v5a1 1 0 0 0 1 1h5","key":"wfsgrz"}],["path",{"d":"M10 12.5 8 15l2 2.5","key":"1tg20x"}],["path",{"d":"m14 12.5 2 2.5-2 2.5","key":"yinavb"}]],"className":"lucide-file-code"}],"url":"/tutorials/html","$ref":"html/index.mdx"},{"type":"folder","name":"Getting started","root":"$undefined","defaultOpen":"$undefined","description":"$undefined","collapsible":"$undefined","children":[{"$id":"html/getting-started/introduction.mdx","type":"page","name":"HTML Introduction","description":"A resource that will help you learn HTML in less than 30 days.","icon":"$undefined","url":"/tutorials/html/getting-started/introduction","$ref":"html/getting-started/introduction.mdx"},{"$id":"html/getting-started/page-structure.mdx","type":"page","name":"HTML Page Structure","description":"An HTML document is structured using a set of nested tags. Each tag is enclosed within `<...>` angle brackets and acts as a container for content or other HTML tags. Let's take a look at a basic HTML document structure","icon":"$undefined","url":"/tutorials/html/getting-started/page-structure","$ref":"html/getting-started/page-structure.mdx"},{"$id":"html/getting-started/tags.mdx","type":"page","name":"HTML Tags","description":"HTML tags are used to define the structure of an HTML document. Each tag has a specific purpose and can be nested within other tags. Let's take a look at some common HTML tags.","icon":"$undefined","url":"/tutorials/html/getting-started/tags","$ref":"html/getting-started/tags.mdx"},{"$id":"html/getting-started/elements.mdx","type":"page","name":"HTML Elements","description":"HTML elements are the building blocks of an HTML document. Each element has a specific purpose and can be nested within other elements. Let's take a look at some common HTML elements.","icon":"$undefined","url":"/tutorials/html/getting-started/elements","$ref":"html/getting-started/elements.mdx"},{"$id":"html/getting-started/attributes.mdx","type":"page","name":"HTML Attributes","description":"HTML attributes provide additional information about an element. They are used to modify the behavior or appearance of an element. Let's take a look at some common HTML attributes.","icon":"$undefined","url":"/tutorials/html/getting-started/attributes","$ref":"html/getting-started/attributes.mdx"},{"$id":"html/getting-started/id-and-classes.mdx","type":"page","name":"HTML ID and Classes","description":"HTML offers multiple ways to select and style elements. Two of the most commonly used selectors are IDs and Classes. This blog explores what they are, how to use them, and their differences.","icon":"$undefined","url":"/tutorials/html/getting-started/id-and-classes","$ref":"html/getting-started/id-and-classes.mdx"},{"$id":"html/getting-started/comments.mdx","type":"page","name":"HTML Comments","description":"HTML comments are used to add notes or annotations to an HTML document. They are not displayed on the web page but can be viewed in the source code. Let's take a look at how to add comments in HTML.","icon":"$undefined","url":"/tutorials/html/getting-started/comments","$ref":"html/getting-started/comments.mdx"}],"$id":"html/getting-started","$ref":"html/getting-started/meta.json","icon":"$undefined"},{"$id":"_1","type":"separator","icon":"$undefined","name":"HTML Basic"},{"type":"folder","name":"Basic tags","root":"$undefined","defaultOpen":"$undefined","description":"$undefined","collapsible":"$undefined","children":[{"$id":"html/basic-tags/skeletal.mdx","type":"page","name":"Skeletal Tags","description":"HTML skeletal tags are used to structure the content of a web page. They include the ``, ``, ``, and `<body>` tags. Learn how to use these tags to create a well-structured HTML document.","icon":"$undefined","url":"/tutorials/html/basic-tags/skeletal","$ref":"html/basic-tags/skeletal.mdx"},{"$id":"html/basic-tags/heading.mdx","type":"page","name":"Heading Tags","description":"HTML heading tags are used to define headings and subheadings on a web page. They range from `<h1>` to `<h6>`, with `<h1>` being the most important and `<h6>` being the least important.","icon":"$undefined","url":"/tutorials/html/basic-tags/heading","$ref":"html/basic-tags/heading.mdx"},{"$id":"html/basic-tags/paragraph.mdx","type":"page","name":"Paragraph Tag","description":"HTML paragraph tag are used to define paragraphs of text on a web page. Learn how to use the `<p>` tag to create paragraphs in HTML.","icon":"$undefined","url":"/tutorials/html/basic-tags/paragraph","$ref":"html/basic-tags/paragraph.mdx"},{"$id":"html/basic-tags/line-break.mdx","type":"page","name":"Line Break Tag","description":"The `<br>` tag in HTML is used to create a line break or new line within a block of text. Learn how to use the `<br>` tag to add line breaks in HTML.","icon":"$undefined","url":"/tutorials/html/basic-tags/line-break","$ref":"html/basic-tags/line-break.mdx"},{"$id":"html/basic-tags/horizontal-line.mdx","type":"page","name":"Horizontal Line Tag","description":"The `<hr>` tag in HTML is used to create a horizontal line or rule on a web page. Learn how to use the `<hr>` tag to separate content and create visual divisions in HTML.","icon":"$undefined","url":"/tutorials/html/basic-tags/horizontal-line","$ref":"html/basic-tags/horizontal-line.mdx"},{"$id":"html/basic-tags/anchor.mdx","type":"page","name":"Anchor Tag","description":"The `<a>` tag in HTML is used to create hyperlinks or anchor links to other web pages or resources. Learn how to use the `<a>` tag to create links in HTML.","icon":"$undefined","url":"/tutorials/html/basic-tags/anchor","$ref":"html/basic-tags/anchor.mdx"},{"$id":"html/basic-tags/image.mdx","type":"page","name":"Image Tag","description":"The `<img>` tag in HTML is used to insert images on a web page. Learn how to use the `<img>` tag to display images in HTML.","icon":"$undefined","url":"/tutorials/html/basic-tags/image","$ref":"html/basic-tags/image.mdx"},{"$id":"html/basic-tags/pre.mdx","type":"page","name":"Pre Tag","description":"The `<pre>` tag in HTML is used to define preformatted text, which preserves the original formatting of the text. Learn how to use the `<pre>` tag to display code snippets and other preformatted text in HTML.","icon":"$undefined","url":"/tutorials/html/basic-tags/pre","$ref":"html/basic-tags/pre.mdx"}],"$id":"html/basic-tags","$ref":"html/basic-tags/meta.json","icon":"$undefined"},{"type":"folder","name":"Elements","root":"$undefined","defaultOpen":"$undefined","description":"$undefined","collapsible":"$undefined","children":[{"$id":"html/elements/block.mdx","type":"page","name":"HTML Block Elements","description":"Block elements in HTML are used to create content that appears on a new line or in a separate block. Learn how to use block elements to structure your HTML pages and create visually appealing layouts.","icon":"$undefined","url":"/tutorials/html/elements/block","$ref":"html/elements/block.mdx"},{"$id":"html/elements/inline.mdx","type":"page","name":"HTML Inline Elements","description":"Inline elements in HTML are used to create content that flows within the text. Learn how to use inline elements to add links, images, and other content to your HTML pages.","icon":"$undefined","url":"/tutorials/html/elements/inline","$ref":"html/elements/inline.mdx"}],"$id":"html/elements","$ref":"html/elements/meta.json","icon":"$undefined"},{"type":"folder","name":"Lists","root":"$undefined","defaultOpen":"$undefined","description":"$undefined","collapsible":"$undefined","children":[{"$id":"html/lists/overview.mdx","type":"page","name":"HTML Lists","description":"HTML lists are used to organize and display content in a structured manner. Learn how to create ordered, unordered, and description lists in HTML.","icon":"$undefined","url":"/tutorials/html/lists/overview","$ref":"html/lists/overview.mdx"},{"$id":"html/lists/ordered.mdx","type":"page","name":"HTML Ordered List","description":"An ordered list in HTML is used to display items in a numerical sequence. Learn how to create an ordered list in HTML.","icon":"$undefined","url":"/tutorials/html/lists/ordered","$ref":"html/lists/ordered.mdx"},{"$id":"html/lists/unordered.mdx","type":"page","name":"HTML Unordered List","description":"An unordered list in HTML is used to display items using bullets. Learn how to create an unordered list in HTML.","icon":"$undefined","url":"/tutorials/html/lists/unordered","$ref":"html/lists/unordered.mdx"},{"$id":"html/lists/definition.mdx","type":"page","name":"HTML Definition List","description":"An HTML definition list is used to display items in a dictionary-like format. Learn how to create a definition list in HTML.","icon":"$undefined","url":"/tutorials/html/lists/definition","$ref":"html/lists/definition.mdx"}],"$id":"html/lists","$ref":"html/lists/meta.json","icon":"$undefined"},{"type":"folder","name":"Tables","root":"$undefined","defaultOpen":"$undefined","description":"$undefined","collapsible":"$undefined","children":[{"$id":"html/tables/overview.mdx","type":"page","name":"HTML Tables","description":"Tables are used to display data in a tabular format. Learn how to create tables in HTML and style them using CSS.","icon":"$undefined","url":"/tutorials/html/tables/overview","$ref":"html/tables/overview.mdx"},{"$id":"html/tables/more-on-tables.mdx","type":"page","name":"More on Tables","description":"Learn how to create more complex tables using HTML.","icon":"$undefined","url":"/tutorials/html/tables/more-on-tables","$ref":"html/tables/more-on-tables.mdx"}],"$id":"html/tables","$ref":"html/tables/meta.json","icon":"$undefined"},{"type":"folder","name":"Forms","root":"$undefined","defaultOpen":"$undefined","description":"$undefined","collapsible":"$undefined","children":[{"$id":"html/forms/overview.mdx","type":"page","name":"Introduction to HTML Forms","description":"Forms serve as the gateway between the user and the server, allowing for dynamic, interactive web experiences. They are crucial for tasks such as user authentication, data submission, feedback collection, and more. Simply put, forms make websites more engaging and functional.","icon":"$undefined","url":"/tutorials/html/forms/overview","$ref":"html/forms/overview.mdx"},{"$id":"html/forms/input-types.mdx","type":"page","name":"HTML Input Types","description":"Input types in HTML forms are the backbone of interactive web applications. They allow users to send information to web servers for various purposes like searching, logging in, or providing feedback. In this blog, we'll explore common HTML input types:- text, password, radio, and checkbox.","icon":"$undefined","url":"/tutorials/html/forms/input-types","$ref":"html/forms/input-types.mdx"},{"$id":"html/forms/textarea-and-select.mdx","type":"page","name":"Textarea & Select","description":"Textarea and select are two essential form elements in HTML that allow users to input text and select options from a list. In this tutorial, we'll explore how to create textarea and select elements in HTML forms.","icon":"$undefined","url":"/tutorials/html/forms/textarea-and-select","$ref":"html/forms/textarea-and-select.mdx"},{"$id":"html/forms/more-on-forms.mdx","type":"page","name":"More on forms","description":"HTML forms are the backbone of interactive websites. They allow users to submit data, which can be processed on the server. While we have covered basic input types in previous tutorials, this tutorial aims to delve deeper into form attributes, both common and new HTML5 additions. We'll also look at HTML5 validation attributes to ensure data integrity.","icon":"$undefined","url":"/tutorials/html/forms/more-on-forms","$ref":"html/forms/more-on-forms.mdx"}],"$id":"html/forms","$ref":"html/forms/meta.json","icon":"$undefined"},{"$id":"_2","type":"separator","icon":"$undefined","name":"Head Elements and Media"},{"type":"folder","name":"Head elements","root":"$undefined","defaultOpen":"$undefined","description":"$undefined","collapsible":"$undefined","children":[{"$id":"html/head-elements/meta-tags.mdx","type":"page","name":"HTML Meta Tags","description":"Meta tags are essential for search engine optimization (SEO) and social media sharing. They provide information about the webpage, such as the title, description, and author. This tutorial covers the most common meta tags and their attributes.","icon":"$undefined","url":"/tutorials/html/head-elements/meta-tags","$ref":"html/head-elements/meta-tags.mdx"},{"$id":"html/head-elements/link-script-tags.mdx","type":"page","name":"Link & Script Tags","description":"Learn how to include external resources like CSS and JavaScript files in your HTML document using link and script tags.","icon":"$undefined","url":"/tutorials/html/head-elements/link-script-tags","$ref":"html/head-elements/link-script-tags.mdx"}],"$id":"html/head-elements","$ref":"html/head-elements/meta.json","icon":"$undefined"},{"type":"folder","name":"Media","root":"$undefined","defaultOpen":"$undefined","description":"$undefined","collapsible":"$undefined","children":[{"$id":"html/media/video-and-audio.mdx","type":"page","name":"Video & Audio Tags","description":"Learn how to embed video and audio content in your web pages.","icon":"$undefined","url":"/tutorials/html/media/video-and-audio","$ref":"html/media/video-and-audio.mdx"},{"$id":"html/media/svg-in-html.mdx","type":"page","name":"SVG in HTML","description":"Scalable Vector Graphics (SVG) has become an indispensable part of modern web development. SVG enables developers to create high-quality, scalable graphics that look crisp at any size or resolution. In this blog post, we'll explore the basics of using SVG in HTML, its benefits, and some practical examples.","icon":"$undefined","url":"/tutorials/html/media/svg-in-html","$ref":"html/media/svg-in-html.mdx"},{"$id":"html/media/iframes-in-html.mdx","type":"page","name":"iFrames in HTML","description":"iFrames, or Inline Frames, are an integral part of modern web development. They allow you to embed another HTML page within your current page.","icon":"$undefined","url":"/tutorials/html/media/iframes-in-html","$ref":"html/media/iframes-in-html.mdx"}],"$id":"html/media","$ref":"html/media/meta.json","icon":"$undefined"},{"$id":"_3","type":"separator","icon":"$undefined","name":"Advanced Concepts"},{"type":"folder","name":"Miscellaneous","root":"$undefined","defaultOpen":"$undefined","description":"$undefined","collapsible":"$undefined","children":[{"$id":"html/miscellaneous/semantic-tags.mdx","type":"page","name":"HTML Semantic Tag","description":"HTML5 introduced a range of semantic tags that provide meaning to the structure of web content. This blog will guide you through the importance and usage of these tags.","icon":"$undefined","url":"/tutorials/html/miscellaneous/semantic-tags","$ref":"html/miscellaneous/semantic-tags.mdx"},{"$id":"html/miscellaneous/entities.mdx","type":"page","name":"HTML Entities","description":"HTML entities are a crucial part of HTML markup language. They enable you to display characters that are reserved in HTML or that aren't readily available on the keyboard. In this blog, we'll explore what HTML entities are, their types, and how to use them.","icon":"$undefined","url":"/tutorials/html/miscellaneous/entities","$ref":"html/miscellaneous/entities.mdx"},{"$id":"html/miscellaneous/character-sets.mdx","type":"page","name":"Character Sets","description":"Character sets are an essential concept in HTML, influencing how textual content is displayed and interpreted by the browser. This blog aims to elucidate what character sets are, why they matter, and how to specify them in HTML.","icon":"$undefined","url":"/tutorials/html/miscellaneous/character-sets","$ref":"html/miscellaneous/character-sets.mdx"},{"$id":"html/miscellaneous/global-attributes.mdx","type":"page","name":"HTML Global Attributes","description":"HTML Global Attributes play a crucial role in HTML development, providing a consistent set of attributes that can be applied to any HTML element. In this blog, we'll explore what these attributes are, their descriptions, and how to use them effectively.","icon":"$undefined","url":"/tutorials/html/miscellaneous/global-attributes","$ref":"html/miscellaneous/global-attributes.mdx"},{"$id":"html/miscellaneous/canvas.mdx","type":"page","name":"HTML Canvas","description":"The `<canvas>` element in HTML is a powerful feature for rendering graphics and shapes directly within web pages. Though it's often paired with JavaScript for dynamic rendering, the canvas itself is an HTML element. In this blog, we'll explore what you can do with the `<canvas>` element alone.","icon":"$undefined","url":"/tutorials/html/miscellaneous/canvas","$ref":"html/miscellaneous/canvas.mdx"},{"$id":"html/miscellaneous/code-tag.mdx","type":"page","name":"HTML Code Tag","description":"The HTML `<code>` tag is a powerful element for displaying code snippets within a webpage. It preserves both spaces and line breaks, making it ideal for showcasing code. In this blog post, we'll explore how to use the `<code>` tag effectively, especially in conjunction with Prism for code highlighting.","icon":"$undefined","url":"/tutorials/html/miscellaneous/code-tag","$ref":"html/miscellaneous/code-tag.mdx"},{"$id":"html/miscellaneous/quotation-tag.mdx","type":"page","name":"HTML Quotation Tag","description":"The use of quotations is common in textual content. HTML provides specific tags to handle this:- `<blockquote>` for block quotations and `<q>` for inline quotations. In this blog, we'll explore these tags, their attributes, and how to style them.","icon":"$undefined","url":"/tutorials/html/miscellaneous/quotation-tag","$ref":"html/miscellaneous/quotation-tag.mdx"},{"$id":"html/miscellaneous/obsolete-tags.mdx","type":"page","name":"Obsolete HTML Tags","description":"As HTML has evolved, some tags have been deprecated or become obsolete. While modern browsers might still support them, their use is discouraged in favor of CSS or more semantic HTML5 elements. In this blog, we'll explore some of these obsolete tags and their modern alternatives.","icon":"$undefined","url":"/tutorials/html/miscellaneous/obsolete-tags","$ref":"html/miscellaneous/obsolete-tags.mdx"}],"$id":"html/miscellaneous","$ref":"html/miscellaneous/meta.json","icon":"$undefined"}],"$id":"html","$ref":"html/meta.json","icon":"$L15"},{"type":"folder","name":"CSS Tutorial","root":true,"defaultOpen":"$undefined","description":"Web page styling","collapsible":"$undefined","children":[{"$id":"_4","type":"separator","icon":"$undefined","name":"Getting Started with CSS"},{"$id":"css/index.mdx","type":"page","name":"Quick Start","description":"Learn CSS from basics to advanced with our step-by-step guide.","icon":"$L16","url":"/tutorials/css","$ref":"css/index.mdx"},{"$id":"css/faqs.mdx","type":"page","name":"CSS FAQs","description":"Frequently asked questions about CSS - common problems, solutions, and best practices for web styling.","icon":"$L17","url":"/tutorials/css/faqs","$ref":"css/faqs.mdx"},{"type":"folder","name":"Getting started","root":"$undefined","defaultOpen":"$undefined","description":"$undefined","collapsible":"$undefined","children":[{"$id":"css/getting-started/introduction.mdx","type":"page","name":"CSS Introduction","description":"CSS stands for Cascading Style Sheets. It is a stylesheet language that is used to describe the visual presentation of a web page written in HTML (Hypertext Markup Language).","icon":"$undefined","url":"/tutorials/css/getting-started/introduction","$ref":"css/getting-started/introduction.mdx"},{"$id":"css/getting-started/syntax.mdx","type":"page","name":"CSS Syntax","description":"CSS follows a rule-based structure. Each rule consists of a selector and a declaration block. Selectors pick the HTML elements, while declaration blocks contain pairs of properties and values.","icon":"$undefined","url":"/tutorials/css/getting-started/syntax","$ref":"css/getting-started/syntax.mdx"},{"$id":"css/getting-started/ways-to-add-css.mdx","type":"page","name":"Ways to add CSS","description":"There are three ways to add CSS in HTML.","icon":"$undefined","url":"/tutorials/css/getting-started/ways-to-add-css","$ref":"css/getting-started/ways-to-add-css.mdx"},{"$id":"css/getting-started/selectors.mdx","type":"page","name":"CSS Selectors","description":"CSS selectors allow us to choose specific elements and apply styles to them. They help in targeting particular HTML elements for custom styling.","icon":"$undefined","url":"/tutorials/css/getting-started/selectors","$ref":"css/getting-started/selectors.mdx"},{"$id":"css/getting-started/specificity.mdx","type":"page","name":"CSS Specificity","description":"CSS Specificity helps determine what style will be applied to the HTML element(s) when there are overlapping or multiple CSS rules.","icon":"$undefined","url":"/tutorials/css/getting-started/specificity","$ref":"css/getting-started/specificity.mdx"},{"$id":"css/getting-started/comments.mdx","type":"page","name":"CSS Comments","description":"Comments help with documentation and are helpful for the future users who read that code, so that they can understand it easily.","icon":"$undefined","url":"/tutorials/css/getting-started/comments","$ref":"css/getting-started/comments.mdx"}],"$id":"css/getting-started","$ref":"css/getting-started/meta.json","icon":"$undefined"},{"$id":"_5","type":"separator","icon":"$undefined","name":"Styling Properties"},{"type":"folder","name":"Properties","root":"$undefined","defaultOpen":"$undefined","description":"$undefined","collapsible":"$undefined","children":[{"$id":"css/properties/colors.mdx","type":"page","name":"CSS Colors","description":"The color property of CSS helps to set the color of the HTML element(s). This helps to set the foreground color of text, text decorations, and borders.","icon":"$undefined","url":"/tutorials/css/properties/colors","$ref":"css/properties/colors.mdx"},{"$id":"css/properties/backgrounds.mdx","type":"page","name":"CSS Backgrounds","description":"Learn how to style element backgrounds with colors, images, gradients, and advanced background properties in CSS.","icon":"$undefined","url":"/tutorials/css/properties/backgrounds","$ref":"css/properties/backgrounds.mdx"},{"$id":"css/properties/borders.mdx","type":"page","name":"CSS Borders","description":"Master CSS border properties to add, style, and customize borders around elements with colors, styles, widths, and rounded corners.","icon":"$undefined","url":"/tutorials/css/properties/borders","$ref":"css/properties/borders.mdx"},{"$id":"css/properties/box-model.mdx","type":"page","name":"CSS Box Model","description":"Understand the CSS box model, including content, padding, border, and margin, and how they affect element sizing and spacing.","icon":"$undefined","url":"/tutorials/css/properties/box-model","$ref":"css/properties/box-model.mdx"},{"$id":"css/properties/margin.mdx","type":"page","name":"CSS Margin","description":"Master CSS margins to create space around elements, control layout, center elements, and manage spacing between components.","icon":"$undefined","url":"/tutorials/css/properties/margin","$ref":"css/properties/margin.mdx"},{"$id":"css/properties/padding.mdx","type":"page","name":"CSS Padding","description":"Learn how to use CSS padding to create space inside elements between content and borders for better layout control.","icon":"$undefined","url":"/tutorials/css/properties/padding","$ref":"css/properties/padding.mdx"},{"$id":"css/properties/size.mdx","type":"page","name":"CSS Size Properties","description":"Master CSS width and height properties, min/max constraints, and sizing techniques for responsive, flexible layouts.","icon":"$undefined","url":"/tutorials/css/properties/size","$ref":"css/properties/size.mdx"},{"$id":"css/properties/text-styling.mdx","type":"page","name":"CSS Text Styling","description":"Master CSS text properties including alignment, decoration, transformation, spacing, and shadows for beautiful typography.","icon":"$undefined","url":"/tutorials/css/properties/text-styling","$ref":"css/properties/text-styling.mdx"},{"$id":"css/properties/fonts.mdx","type":"page","name":"CSS Fonts","description":"Learn how to style text with CSS font properties including font-family, font-size, font-weight, and modern web fonts.","icon":"$undefined","url":"/tutorials/css/properties/fonts","$ref":"css/properties/fonts.mdx"},{"$id":"css/properties/links.mdx","type":"page","name":"CSS Links","description":"Learn how to style links with CSS including link states, hover effects, and creating attractive, accessible navigation.","icon":"$undefined","url":"/tutorials/css/properties/links","$ref":"css/properties/links.mdx"},{"$id":"css/properties/hover.mdx","type":"page","name":"CSS Hover Effects","description":"Master CSS hover effects to create interactive, engaging user experiences with transitions, transforms, and creative animations.","icon":"$undefined","url":"/tutorials/css/properties/hover","$ref":"css/properties/hover.mdx"},{"$id":"css/properties/list-styles.mdx","type":"page","name":"CSS List Styles","description":"Master CSS list styling to customize bullets, numbers, markers, and create beautiful ordered and unordered lists.","icon":"$undefined","url":"/tutorials/css/properties/list-styles","$ref":"css/properties/list-styles.mdx"},{"$id":"css/properties/images.mdx","type":"page","name":"CSS Images","description":"Learn CSS image styling techniques including sizing, positioning, filters, effects, and responsive images for modern web design.","icon":"$undefined","url":"/tutorials/css/properties/images","$ref":"css/properties/images.mdx"},{"$id":"css/properties/buttons.mdx","type":"page","name":"CSS Buttons","description":"Master CSS button styling to create beautiful, interactive buttons with hover effects, animations, and modern designs.","icon":"$undefined","url":"/tutorials/css/properties/buttons","$ref":"css/properties/buttons.mdx"},{"$id":"css/properties/forms.mdx","type":"page","name":"CSS Forms","description":"Master CSS form styling to create beautiful, user-friendly forms with proper validation states and accessibility.","icon":"$undefined","url":"/tutorials/css/properties/forms","$ref":"css/properties/forms.mdx"},{"$id":"css/properties/cursors.mdx","type":"page","name":"CSS Cursors","description":"Master CSS cursor property to provide visual feedback and improve user experience with custom mouse cursors.","icon":"$undefined","url":"/tutorials/css/properties/cursors","$ref":"css/properties/cursors.mdx"},{"$id":"css/properties/positioning.mdx","type":"page","name":"CSS Positioning","description":"Master CSS positioning to precisely control element placement using static, relative, absolute, fixed, and sticky positioning.","icon":"$undefined","url":"/tutorials/css/properties/positioning","$ref":"css/properties/positioning.mdx"},{"$id":"css/properties/float.mdx","type":"page","name":"CSS Float","description":"Learn CSS float property for wrapping text around images and creating multi-column layouts (legacy technique).","icon":"$undefined","url":"/tutorials/css/properties/float","$ref":"css/properties/float.mdx"},{"$id":"css/properties/overflow.mdx","type":"page","name":"CSS Overflow","description":"Control how content behaves when it's too large for its container using CSS overflow properties for better content management.","icon":"$undefined","url":"/tutorials/css/properties/overflow","$ref":"css/properties/overflow.mdx"},{"$id":"css/properties/z-index.mdx","type":"page","name":"CSS Z-Index","description":"Master CSS z-index to control the stacking order of positioned elements and create layered interfaces.","icon":"$undefined","url":"/tutorials/css/properties/z-index","$ref":"css/properties/z-index.mdx"},{"$id":"css/properties/combinators.mdx","type":"page","name":"CSS Combinators","description":"Master CSS combinators to create powerful, specific selectors for targeting elements based on their relationships.","icon":"$undefined","url":"/tutorials/css/properties/combinators","$ref":"css/properties/combinators.mdx"},{"$id":"css/properties/pseudo-classes.mdx","type":"page","name":"CSS Pseudo-Classes","description":"Master CSS pseudo-classes to style elements based on their state, position, and user interaction for dynamic styling.","icon":"$undefined","url":"/tutorials/css/properties/pseudo-classes","$ref":"css/properties/pseudo-classes.mdx"},{"$id":"css/properties/important.mdx","type":"page","name":"CSS !important","description":"Learn when and how to use the !important rule in CSS, its implications, and best practices for maintaining clean code.","icon":"$undefined","url":"/tutorials/css/properties/important","$ref":"css/properties/important.mdx"},{"$id":"css/properties/maths-functions.mdx","type":"page","name":"CSS Math Functions","description":"Master CSS mathematical functions like calc(), min(), max(), and clamp() for dynamic, responsive layouts.","icon":"$undefined","url":"/tutorials/css/properties/maths-functions","$ref":"css/properties/maths-functions.mdx"},{"$id":"css/properties/navigation-bar.mdx","type":"page","name":"CSS Navigation Bar","description":"Learn to create beautiful, responsive navigation bars with CSS including dropdowns, mobile menus, and modern patterns.","icon":"$undefined","url":"/tutorials/css/properties/navigation-bar","$ref":"css/properties/navigation-bar.mdx"},{"$id":"css/properties/video-embedding.mdx","type":"page","name":"CSS Video Embedding","description":"Learn CSS techniques for embedding and styling videos with responsive sizing, custom controls, and overlays.","icon":"$undefined","url":"/tutorials/css/properties/video-embedding","$ref":"css/properties/video-embedding.mdx"}],"$id":"css/properties","$ref":"css/properties/meta.json","icon":"$undefined"},{"type":"folder","name":"Designing","root":"$undefined","defaultOpen":"$undefined","description":"$undefined","collapsible":"$undefined","children":[{"$id":"css/designing/display.mdx","type":"page","name":"CSS Display Property","description":"Master the CSS display property to control how elements are rendered, including block, inline, inline-block, flex, grid, and none.","icon":"$undefined","url":"/tutorials/css/designing/display","$ref":"css/designing/display.mdx"},{"$id":"css/designing/flexbox.mdx","type":"page","name":"CSS Flexbox","description":"Master CSS Flexbox layout for creating flexible, responsive layouts with easy alignment and distribution of elements.","icon":"$undefined","url":"/tutorials/css/designing/flexbox","$ref":"css/designing/flexbox.mdx"},{"$id":"css/designing/grid.mdx","type":"page","name":"CSS Grid","description":"Learn CSS Grid Layout for creating powerful two-dimensional layouts with rows and columns for complex web designs.","icon":"$undefined","url":"/tutorials/css/designing/grid","$ref":"css/designing/grid.mdx"},{"$id":"css/designing/media-queries.mdx","type":"page","name":"CSS Media Queries","description":"Master CSS media queries to create responsive designs that adapt to different screen sizes, devices, and user preferences.","icon":"$undefined","url":"/tutorials/css/designing/media-queries","$ref":"css/designing/media-queries.mdx"}],"$id":"css/designing","$ref":"css/designing/meta.json","icon":"$undefined"},{"$id":"_6","type":"separator","icon":"$undefined","name":"Advanced Techniques"},{"type":"folder","name":"Advance topics","root":"$undefined","defaultOpen":"$undefined","description":"$undefined","collapsible":"$undefined","children":[{"$id":"css/advance-topics/inherit.mdx","type":"page","name":"CSS Inherit Keyword","description":"Learn to use the CSS inherit keyword to force inheritance of parent styles for powerful cascading control.","icon":"$undefined","url":"/tutorials/css/advance-topics/inherit","$ref":"css/advance-topics/inherit.mdx"},{"$id":"css/advance-topics/gradients.mdx","type":"page","name":"CSS Gradients","description":"Master CSS gradients to create beautiful color transitions with linear, radial, and conic gradients for modern web designs.","icon":"$undefined","url":"/tutorials/css/advance-topics/gradients","$ref":"css/advance-topics/gradients.mdx"},{"$id":"css/advance-topics/shadows.mdx","type":"page","name":"CSS Shadows","description":"Master CSS shadows to add depth and dimension with box-shadow and text-shadow for modern, visually appealing designs.","icon":"$undefined","url":"/tutorials/css/advance-topics/shadows","$ref":"css/advance-topics/shadows.mdx"},{"$id":"css/advance-topics/border-images.mdx","type":"page","name":"CSS Border Images","description":"Learn to use CSS border-image property to create decorative borders with images and gradients.","icon":"$undefined","url":"/tutorials/css/advance-topics/border-images","$ref":"css/advance-topics/border-images.mdx"},{"$id":"css/advance-topics/transitions.mdx","type":"page","name":"CSS Transitions","description":"Learn how to create smooth animations between CSS property changes using transitions for enhanced user experience.","icon":"$undefined","url":"/tutorials/css/advance-topics/transitions","$ref":"css/advance-topics/transitions.mdx"},{"$id":"css/advance-topics/2d-transform.mdx","type":"page","name":"CSS 2D Transforms","description":"Master CSS 2D transforms to rotate, scale, skew, and translate elements for dynamic, interactive designs.","icon":"$undefined","url":"/tutorials/css/advance-topics/2d-transform","$ref":"css/advance-topics/2d-transform.mdx"},{"$id":"css/advance-topics/animations.mdx","type":"page","name":"CSS Animations","description":"Create complex, keyframe-based animations with CSS to bring your web pages to life with smooth, engaging motion effects.","icon":"$undefined","url":"/tutorials/css/advance-topics/animations","$ref":"css/advance-topics/animations.mdx"},{"$id":"css/advance-topics/masking.mdx","type":"page","name":"CSS Masking","description":"Learn CSS masking techniques to clip and shape elements with images and gradients for creative effects.","icon":"$undefined","url":"/tutorials/css/advance-topics/masking","$ref":"css/advance-topics/masking.mdx"},{"$id":"css/advance-topics/media-queries-advanced.mdx","type":"page","name":"Advanced Media Queries","description":"Master advanced CSS media query techniques including container queries, preference queries, and complex conditions.","icon":"$undefined","url":"/tutorials/css/advance-topics/media-queries-advanced","$ref":"css/advance-topics/media-queries-advanced.mdx"},{"$id":"css/advance-topics/tooltip-text.mdx","type":"page","name":"CSS Tooltips","description":"Learn to create beautiful, accessible tooltips with CSS for providing contextual help and information.","icon":"$undefined","url":"/tutorials/css/advance-topics/tooltip-text","$ref":"css/advance-topics/tooltip-text.mdx"},{"$id":"css/advance-topics/pagination.mdx","type":"page","name":"CSS Pagination","description":"Learn to create beautiful, accessible pagination controls with CSS for navigating through content pages.","icon":"$undefined","url":"/tutorials/css/advance-topics/pagination","$ref":"css/advance-topics/pagination.mdx"}],"$id":"css/advance-topics","$ref":"css/advance-topics/meta.json","icon":"$undefined"}],"$id":"css","$ref":"css/meta.json","icon":"$L18"},{"type":"folder","name":"JavaScript Tutorial","root":true,"defaultOpen":"$undefined","description":"Interactive web programming language","collapsible":"$undefined","children":[{"$id":"_7","type":"separator","icon":"$undefined","name":"Introduction"},{"$id":"javascript/index.mdx","type":"page","name":"Quick Start","description":"Getting Started with JavaScript","icon":"$L19","url":"/tutorials/javascript","$ref":"javascript/index.mdx"},{"$id":"javascript/what-is-javascript.mdx","type":"page","name":"What is JavaScript","description":"Introduction to JavaScript, a versatile programming language for the web.","icon":"$L1a","url":"/tutorials/javascript/what-is-javascript","$ref":"javascript/what-is-javascript.mdx"},{"$id":"javascript/history-of-javascript.mdx","type":"page","name":"History of JavaScript","description":"Discover how JavaScript evolved from its early days to becoming one of the most popular languages in the world.","icon":"$L1b","url":"/tutorials/javascript/history-of-javascript","$ref":"javascript/history-of-javascript.mdx"},{"$id":"_8","type":"separator","icon":"$undefined","name":"Setup"},{"$id":"javascript/nodejs-installation.mdx","type":"page","name":"Node.js Installation","description":"Install Node.js to run JavaScript on your computer.","icon":"$undefined","url":"/tutorials/javascript/nodejs-installation","$ref":"javascript/nodejs-installation.mdx"},{"$id":"javascript/code-editor.mdx","type":"page","name":"Visual Studio Code","description":"Set up Visual Studio Code to write and run your JavaScript code.","icon":"$undefined","url":"/tutorials/javascript/code-editor","$ref":"javascript/code-editor.mdx"},{"$id":"_9","type":"separator","icon":"$undefined","name":"Basics"},{"type":"folder","name":"Syntax & Comments","root":"$undefined","defaultOpen":"$undefined","description":"$undefined","collapsible":"$undefined","children":[{"$id":"javascript/syntax/statements-and-semicolons.mdx","type":"page","name":"Statements, Semicolons, and Whitespace","description":"Understand how JavaScript statements, semicolons, and whitespace work together.","icon":"$undefined","url":"/tutorials/javascript/syntax/statements-and-semicolons","$ref":"javascript/syntax/statements-and-semicolons.mdx"},{"$id":"javascript/syntax/comments.mdx","type":"page","name":"Comments","description":"Learn how to use comments to explain and document your JavaScript code.","icon":"$undefined","url":"/tutorials/javascript/syntax/comments","$ref":"javascript/syntax/comments.mdx"}],"$id":"javascript/syntax","$ref":"javascript/syntax/meta.json","index":{"$id":"javascript/syntax/index.mdx","type":"page","name":"Syntax & Comments","description":"Learn how JavaScript statements and comments work to structure your code.","icon":"$undefined","url":"/tutorials/javascript/syntax","$ref":"javascript/syntax/index.mdx"},"icon":"$undefined"},{"type":"folder","name":"Variables","root":"$undefined","defaultOpen":"$undefined","description":"$undefined","collapsible":"$undefined","children":[{"$id":"javascript/variables/naming-rules.mdx","type":"page","name":"Variable Naming Rules","description":"In JavaScript, There are a few rules that you need to follow when naming variables. These rules are important to ensure that your code is readable and maintainable.","icon":"$undefined","url":"/tutorials/javascript/variables/naming-rules","$ref":"javascript/variables/naming-rules.mdx"},{"$id":"javascript/variables/primitives-and-objects.mdx","type":"page","name":"Primitives and Objects","description":"In JavaScript, variables can store two types of values:- primitives and objects. Understanding the difference between these two types is important for writing effective and efficient code.","icon":"$undefined","url":"/tutorials/javascript/variables/primitives-and-objects","$ref":"javascript/variables/primitives-and-objects.mdx"},{"$id":"javascript/variables/operators-and-expressions.mdx","type":"page","name":"Operators and Expressions","description":"In JavaScript, operators are used to perform operations on variables and values. Expressions are combinations of variables, values, and operators that are evaluated to produce a result.","icon":"$undefined","url":"/tutorials/javascript/variables/operators-and-expressions","$ref":"javascript/variables/operators-and-expressions.mdx"},{"$id":"javascript/variables/var-let-const.mdx","type":"page","name":"var vs let vs const","description":"In JavaScript, there are three ways to declare variables:- var, let, and const. Understanding the differences between these three methods is important for writing clean and maintainable code.","icon":"$undefined","url":"/tutorials/javascript/variables/var-let-const","$ref":"javascript/variables/var-let-const.mdx"}],"$id":"javascript/variables","$ref":"javascript/variables/meta.json","index":{"$id":"javascript/variables/index.mdx","type":"page","name":"Variables","description":"In JavaScript, variables are used to store data. They are an essential part of any programming language, as they allow you to store, retrieve, and manipulate data in your programs.","icon":"$undefined","url":"/tutorials/javascript/variables","$ref":"javascript/variables/index.mdx"},"icon":"$undefined"},{"type":"folder","name":"Conditionals","root":"$undefined","defaultOpen":"$undefined","description":"$undefined","collapsible":"$undefined","children":[{"$id":"javascript/conditionals/if-else-conditionals.mdx","type":"page","name":"If-Else Conditionals","description":"The \"if\" statement in JavaScript is used to execute a block of code if a certain condition is met. The \"else\" clause is used to execute a block of code if the condition is not met.","icon":"$undefined","url":"/tutorials/javascript/conditionals/if-else-conditionals","$ref":"javascript/conditionals/if-else-conditionals.mdx"},{"$id":"javascript/conditionals/if-else-ladder.mdx","type":"page","name":"If-Else Ladder","description":"The \"if-else\" ladder is a series of \"if\" and \"else\" statements that are used to test multiple conditions in sequence.","icon":"$undefined","url":"/tutorials/javascript/conditionals/if-else-ladder","$ref":"javascript/conditionals/if-else-ladder.mdx"},{"$id":"javascript/conditionals/switch-case.mdx","type":"page","name":"Switch Case","description":"The \"switch\" statement in JavaScript is used to execute a block of code based on the value of a variable or expression.","icon":"$undefined","url":"/tutorials/javascript/conditionals/switch-case","$ref":"javascript/conditionals/switch-case.mdx"},{"$id":"javascript/conditionals/ternary-operator.mdx","type":"page","name":"Ternary Operator","description":"The \"ternary operator\" is a shorthand way of writing an \"if-else\" statement in JavaScript.","icon":"$undefined","url":"/tutorials/javascript/conditionals/ternary-operator","$ref":"javascript/conditionals/ternary-operator.mdx"}],"$id":"javascript/conditionals","$ref":"javascript/conditionals/meta.json","icon":"$undefined"},{"type":"folder","name":"Loops","root":"$undefined","defaultOpen":"$undefined","description":"$undefined","collapsible":"$undefined","children":[{"$id":"javascript/loops/for-loops.mdx","type":"page","name":"For Loops","description":"For loops are a common control flow structure in programming that allows you to repeat a block of code a specific number of times.","icon":"$undefined","url":"/tutorials/javascript/loops/for-loops","$ref":"javascript/loops/for-loops.mdx"},{"$id":"javascript/loops/while-loop.mdx","type":"page","name":"While Loop","description":"The \"while\" loop in JavaScript is used to execute a block of code as long as a condition is true.","icon":"$undefined","url":"/tutorials/javascript/loops/while-loop","$ref":"javascript/loops/while-loop.mdx"}],"$id":"javascript/loops","$ref":"javascript/loops/meta.json","icon":"$undefined"},{"$id":"javascript/functions.mdx","type":"page","name":"Functions","description":"Functions are reusable blocks of code that perform a specific task. They allow you to break down your code into smaller, more manageable pieces.","icon":"$undefined","url":"/tutorials/javascript/functions","$ref":"javascript/functions.mdx"},{"type":"folder","name":"Objects","root":"$undefined","defaultOpen":"$undefined","description":"$undefined","collapsible":"$undefined","children":[{"$id":"javascript/objects/strings.mdx","type":"page","name":"JavaScript Strings","description":"Strings are sequences of characters enclosed in single or double quotes. They are used to represent text in JavaScript.","icon":"$undefined","url":"/tutorials/javascript/objects/strings","$ref":"javascript/objects/strings.mdx"},{"$id":"javascript/objects/arrays.mdx","type":"page","name":"JavaScripit Arrays","description":"Arrays are used to store multiple values in a single variable. They are a special type of object that can hold multiple values at once.","icon":"$undefined","url":"/tutorials/javascript/objects/arrays","$ref":"javascript/objects/arrays.mdx"},{"$id":"javascript/objects/loops-with-arrays.mdx","type":"page","name":"Loops with Arrays","description":"In this tutorial, we will learn how to use loops to iterate over arrays in JavaScript.","icon":"$undefined","url":"/tutorials/javascript/objects/loops-with-arrays","$ref":"javascript/objects/loops-with-arrays.mdx"},{"$id":"javascript/objects/map-filter-reduce.mdx","type":"page","name":"Map, Filter, and Reduce","description":"In this tutorial, we will learn how to use the map, filter, and reduce methods in JavaScript to manipulate arrays.","icon":"$undefined","url":"/tutorials/javascript/objects/map-filter-reduce","$ref":"javascript/objects/map-filter-reduce.mdx"},{"$id":"javascript/objects/date.mdx","type":"page","name":"Date in JavaScript","description":"In this tutorial, we will learn how to work with dates in JavaScript using the Date object.","icon":"$undefined","url":"/tutorials/javascript/objects/date","$ref":"javascript/objects/date.mdx"},{"$id":"javascript/objects/math.mdx","type":"page","name":"Math in JavaScript","description":"In this tutorial, we will learn how to perform mathematical operations in JavaScript using the Math object.","icon":"$undefined","url":"/tutorials/javascript/objects/math","$ref":"javascript/objects/math.mdx"},{"$id":"javascript/objects/number.mdx","type":"page","name":"Number in JavaScript","description":"In this tutorial, we will learn how to work with numbers in JavaScript using the Number object.","icon":"$undefined","url":"/tutorials/javascript/objects/number","$ref":"javascript/objects/number.mdx"},{"$id":"javascript/objects/boolean.mdx","type":"page","name":"Boolean in JavaScript","description":"In this tutorial, we will learn how to work with booleans in JavaScript using the Boolean object.","icon":"$undefined","url":"/tutorials/javascript/objects/boolean","$ref":"javascript/objects/boolean.mdx"}],"$id":"javascript/objects","$ref":"javascript/objects/meta.json","icon":"$undefined"},{"$id":"_10","type":"separator","icon":"$undefined","name":"Advanced"},{"type":"folder","name":"Dom bom","root":"$undefined","defaultOpen":"$undefined","description":"$undefined","collapsible":"$undefined","children":[{"$id":"javascript/dom-bom/window-object.mdx","type":"page","name":"Window Object","description":"In this tutorial, we will learn about the Window object in JavaScript.","icon":"$undefined","url":"/tutorials/javascript/dom-bom/window-object","$ref":"javascript/dom-bom/window-object.mdx"},{"$id":"javascript/dom-bom/history-object.mdx","type":"page","name":"History Object","description":"In this tutorial, we will learn about the History object in JavaScript.","icon":"$undefined","url":"/tutorials/javascript/dom-bom/history-object","$ref":"javascript/dom-bom/history-object.mdx"},{"$id":"javascript/dom-bom/navigator-object.mdx","type":"page","name":"Navigator Object","description":"In this tutorial, we will learn about the Navigator object in JavaScript.","icon":"$undefined","url":"/tutorials/javascript/dom-bom/navigator-object","$ref":"javascript/dom-bom/navigator-object.mdx"},{"$id":"javascript/dom-bom/screen-object.mdx","type":"page","name":"Screen Object","description":"In this tutorial, we will learn about the Screen object in JavaScript.","icon":"$undefined","url":"/tutorials/javascript/dom-bom/screen-object","$ref":"javascript/dom-bom/screen-object.mdx"},{"$id":"javascript/dom-bom/document-object.mdx","type":"page","name":"Document Objects","description":"In this tutorial, we will learn about the Document object in JavaScript.","icon":"$undefined","url":"/tutorials/javascript/dom-bom/document-object","$ref":"javascript/dom-bom/document-object.mdx"},{"$id":"javascript/dom-bom/get-element-by-id.mdx","type":"page","name":"getElementById Method","description":"In this tutorial, we will learn about the getElementById method in JavaScript.","icon":"$undefined","url":"/tutorials/javascript/dom-bom/get-element-by-id","$ref":"javascript/dom-bom/get-element-by-id.mdx"},{"$id":"javascript/dom-bom/get-elements-by-class-name.mdx","type":"page","name":"getElementsByClassName Method","description":"In this tutorial, we will learn about the getElementsByClassName method in JavaScript.","icon":"$undefined","url":"/tutorials/javascript/dom-bom/get-elements-by-class-name","$ref":"javascript/dom-bom/get-elements-by-class-name.mdx"},{"$id":"javascript/dom-bom/get-elements-by-name.mdx","type":"page","name":"getElementsByName Method","description":"In this tutorial, we will learn about the getElementsByName method in JavaScript.","icon":"$undefined","url":"/tutorials/javascript/dom-bom/get-elements-by-name","$ref":"javascript/dom-bom/get-elements-by-name.mdx"},{"$id":"javascript/dom-bom/get-elements-by-tag-name.mdx","type":"page","name":"getElementsByTagName Method","description":"In this tutorial, we will learn about the getElementsByTagName method in JavaScript.","icon":"$undefined","url":"/tutorials/javascript/dom-bom/get-elements-by-tag-name","$ref":"javascript/dom-bom/get-elements-by-tag-name.mdx"},{"$id":"javascript/dom-bom/inner-html.mdx","type":"page","name":"innerHTML","description":"In this tutorial, you will learn about the innerHTML property in JavaScript.","icon":"$undefined","url":"/tutorials/javascript/dom-bom/inner-html","$ref":"javascript/dom-bom/inner-html.mdx"},{"$id":"javascript/dom-bom/outer-html.mdx","type":"page","name":"outerHTML","description":"In this tutorial, you will learn about the outerHTML property in JavaScript.","icon":"$undefined","url":"/tutorials/javascript/dom-bom/outer-html","$ref":"javascript/dom-bom/outer-html.mdx"}],"$id":"javascript/dom-bom","$ref":"javascript/dom-bom/meta.json","icon":"$undefined"},{"type":"folder","name":"Oops","root":"$undefined","defaultOpen":"$undefined","description":"$undefined","collapsible":"$undefined","children":[{"$id":"javascript/oops/objects.mdx","type":"page","name":"Objects in JavaScript","description":"In this tutorial, we will learn about objects in JavaScript.","icon":"$undefined","url":"/tutorials/javascript/oops/objects","$ref":"javascript/oops/objects.mdx"},{"$id":"javascript/oops/class.mdx","type":"page","name":"Class in JavaScript","description":"In this tutorial, we will learn about classes in JavaScript.","icon":"$undefined","url":"/tutorials/javascript/oops/class","$ref":"javascript/oops/class.mdx"},{"$id":"javascript/oops/constructor.mdx","type":"page","name":"Constructor in JavaScript","description":"In this tutorial, we will learn about constructors in JavaScript.","icon":"$undefined","url":"/tutorials/javascript/oops/constructor","$ref":"javascript/oops/constructor.mdx"},{"$id":"javascript/oops/static-method.mdx","type":"page","name":"Static Method in JavaScript","description":"In this tutorial, we will learn about static methods in JavaScript classes.","icon":"$undefined","url":"/tutorials/javascript/oops/static-method","$ref":"javascript/oops/static-method.mdx"},{"$id":"javascript/oops/encapsulation.mdx","type":"page","name":"Encapsulation in JavaScript","description":"In this tutorial, we will learn about encapsulation in JavaScript.","icon":"$undefined","url":"/tutorials/javascript/oops/encapsulation","$ref":"javascript/oops/encapsulation.mdx"},{"$id":"javascript/oops/inheritance.mdx","type":"page","name":"Inheritance in JavaScript","description":"In this tutorial, we will learn about inheritance in JavaScript.","icon":"$undefined","url":"/tutorials/javascript/oops/inheritance","$ref":"javascript/oops/inheritance.mdx"},{"$id":"javascript/oops/polymorphism.mdx","type":"page","name":"Polymorphism in JavaScript","description":"In this tutorial, we will learn about polymorphism in JavaScript.","icon":"$undefined","url":"/tutorials/javascript/oops/polymorphism","$ref":"javascript/oops/polymorphism.mdx"},{"$id":"javascript/oops/abstraction.mdx","type":"page","name":"Abstraction in JavaScript","description":"In this tutorial, we will learn about abstraction in JavaScript.","icon":"$undefined","url":"/tutorials/javascript/oops/abstraction","$ref":"javascript/oops/abstraction.mdx"}],"$id":"javascript/oops","$ref":"javascript/oops/meta.json","icon":"$undefined"}],"$id":"javascript","$ref":"javascript/meta.json","icon":"$L1c"}]},"children":"$L1d"}]}],"$L1e","$L1f"]}]]}]]}] </article></body></html>