diff --git a/docs/css/_category_.json b/docs/css/_category_.json deleted file mode 100644 index 6da1ba5..0000000 --- a/docs/css/_category_.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "label": "CSS", - "position": 3, - "link": { - "type": "generated-index", - "description": "In this section, you will learn about the CSS." - } -} diff --git a/docs/css/backgrounds/_category_.json b/docs/css/backgrounds/_category_.json deleted file mode 100644 index cbc33a5..0000000 --- a/docs/css/backgrounds/_category_.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "label": "Backgrounds", - "position": 4, - "link": { - "type": "generated-index", - "description": "In this section, you will learn about the CSS Backgrounds. CSS backgrounds are used to specify the background of an element. You can specify backgrounds using different methods such as background-color, background-image, background-repeat, background-attachment, background-position, and more." - } - } \ No newline at end of file diff --git a/docs/css/backgrounds/background-image/_category_.json b/docs/css/backgrounds/background-image/_category_.json deleted file mode 100644 index 02a8df9..0000000 --- a/docs/css/backgrounds/background-image/_category_.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "label": "Background Image", - "position": 2, - "link": { - "type": "generated-index", - "description": "In this section, you will learn about the CSS Background Image. The background-image property sets one or more background images for an element. By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally." - } - } \ No newline at end of file diff --git a/docs/css/box-model/_category_.json b/docs/css/box-model/_category_.json deleted file mode 100644 index 9ce7359..0000000 --- a/docs/css/box-model/_category_.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "label": "Box Model", - "position": 5, - "link": { - "type": "generated-index", - "description": "In this section, you will learn about the CSS Box Model. The CSS Box Model is a box that wraps around every HTML element. It consists of margins, borders, padding, and the actual content. The box model allows us to add a border around elements, and to define space between elements. The box model is used to create the layout design of a webpage." - } - } \ No newline at end of file diff --git a/docs/css/box-model/intro.mdx b/docs/css/box-model/intro.mdx index 8fdba74..f5f397a 100644 --- a/docs/css/box-model/intro.mdx +++ b/docs/css/box-model/intro.mdx @@ -1,12 +1,9 @@ --- -id: introdution title: Introduction to the CSS Box Model sidebar_label: Introduction -sidebar_position: 1 keywords: [css box model, box model, css layout, css box model introduction] description: "Learn about the CSS box model and how it is used to layout elements on a web page." tags: [css, box model, css layout, css box model introduction] -hide_table_of_contents: true --- import BoxModelDiagram from './script/BoxModelDiagram'; diff --git a/docs/css/colors/_category_.json b/docs/css/colors/_category_.json deleted file mode 100644 index cc37574..0000000 --- a/docs/css/colors/_category_.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "label": "Colors", - "position": 3, - "link": { - "type": "generated-index", - "description": "In this section, you will learn about the CSS Colors. CSS colors are used to specify the color of the text, backgrounds, borders, and other elements on a web page. You can specify colors using different methods such as color names, HEX values, RGB values, HSL values, and more." - } - } \ No newline at end of file diff --git a/docs/css/colors/hsla.mdx b/docs/css/colors/hsla.mdx index c52dcc4..fd69ea9 100644 --- a/docs/css/colors/hsla.mdx +++ b/docs/css/colors/hsla.mdx @@ -138,7 +138,7 @@ In the example above, HSLA color values are used to specify the colors of the `< By using HSLA color values, you can enhance the visual appearance of your web designs and create engaging color schemes with varying levels of transparency. HSLA color values provide a flexible way to specify colors based on hue, saturation, lightness, and alpha values, allowing you to create unique color effects and visually appealing designs in your web projects. -If you want to learn more about CSS colors, you can check out our [CSS Colors](/tutorial/category/colors) guide for additional information on color models, color functions, and color formats in CSS. +If you want to learn more about CSS colors, you can check out our [CSS Colors](/tutorial/css/colors/color-names) guide for additional information on color models, color functions, and color formats in CSS. ## Conclusion diff --git a/docs/css/fonts-and-text-properties/_category_.json b/docs/css/fonts-and-text-properties/_category_.json deleted file mode 100644 index f95fc45..0000000 --- a/docs/css/fonts-and-text-properties/_category_.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "label": "Fonts and Text Properties", - "position": 9, - "link": { - "type": "generated-index", - "description": "In this section, you will learn about the CSS Fonts and Text Properties. CSS Fonts and Text Properties are used to style the text content of an element. You can specify the font size, font family, font style, font weight, text color, text alignment, text decoration, text transformation, and more." - } - } \ No newline at end of file diff --git a/docs/css/fonts-and-text-properties/font-align.mdx b/docs/css/fonts-and-text-properties/font-align.mdx index 9a50992..04183f3 100644 --- a/docs/css/fonts-and-text-properties/font-align.mdx +++ b/docs/css/fonts-and-text-properties/font-align.mdx @@ -1,8 +1,6 @@ --- -id: font-align title: "CSS Font Alignment" sidebar_label: "Font Alignment" -sidebar_position: 8 tags: ["css", "font alignment", "css font alignment", "css text alignment", "css text properties"] description: "Learn how to use the CSS `text-align` property to align text within a container on your web page." keywords: @@ -11,7 +9,6 @@ keywords: - css text alignment property - css text alignment values - css text alignment examples -hide_table_of_contents: true --- In CSS, the `text-align` property is used to specify the horizontal alignment of text within a container. It allows you to control the positioning of text elements on your web page, aligning them to the left, right, center, or justified within their containing block. diff --git a/docs/css/fonts-and-text-properties/font-size.mdx b/docs/css/fonts-and-text-properties/font-size.mdx index ca74116..a08ddac 100644 --- a/docs/css/fonts-and-text-properties/font-size.mdx +++ b/docs/css/fonts-and-text-properties/font-size.mdx @@ -1,8 +1,6 @@ --- -id: font-size title: "CSS Font Size" sidebar_label: "Font Size" -sidebar_position: 2 keywords: - css font size - font size css @@ -17,7 +15,6 @@ tags: - css text size - css font size property - css font size example -hide_table_of_contents: true --- In CSS, the `font-size` property is used to set the size of text content. You can specify the font size in various units such as pixels, ems, rems, percentages, and more. By adjusting the font size, you can control the visual appearance of text on your web page, making it larger or smaller as needed. diff --git a/docs/css/fonts-and-text-properties/font-style.mdx b/docs/css/fonts-and-text-properties/font-style.mdx index c5f1879..15b8aee 100644 --- a/docs/css/fonts-and-text-properties/font-style.mdx +++ b/docs/css/fonts-and-text-properties/font-style.mdx @@ -1,8 +1,6 @@ --- -id: font-style title: "CSS Font Style" sidebar_label: "Font Style" -sidebar_position: 7 keywords: - css font style - css font style property @@ -17,7 +15,6 @@ tags: - css font style property - css font style values - css text properties -hide_table_of_contents: true --- In CSS, the `font-style` property is used to specify the style of a font, such as italic or oblique. It allows you to apply different text styles to your web page, making text elements appear italicized or slanted as needed. The `font-style` property accepts several values that control the appearance of text, providing you with flexibility in styling your content. diff --git a/docs/css/fonts-and-text-properties/font-weight.mdx b/docs/css/fonts-and-text-properties/font-weight.mdx index 47481f3..63a21fe 100644 --- a/docs/css/fonts-and-text-properties/font-weight.mdx +++ b/docs/css/fonts-and-text-properties/font-weight.mdx @@ -1,8 +1,6 @@ --- -id: font-weight title: "CSS Font Weight" sidebar_label: "Font Weight" -sidebar_position: 3 keywords: - css font weight - font weight css @@ -17,7 +15,6 @@ tags: - css bold text - css font weight property - css font weight values -hide_table_of_contents: true --- In CSS, the `font-weight` property is used to specify the thickness or boldness of a font. It allows you to control the visual weight of text elements on your web page, making them appear lighter or bolder as needed. The `font-weight` property accepts a variety of values that range from `100` (thin) to `900` (bold), providing you with fine-grained control over the appearance of text. diff --git a/docs/css/fonts-and-text-properties/generic-vs-specific-font-families.mdx b/docs/css/fonts-and-text-properties/generic-vs-specific-font-families.mdx index a264a31..5880ff2 100644 --- a/docs/css/fonts-and-text-properties/generic-vs-specific-font-families.mdx +++ b/docs/css/fonts-and-text-properties/generic-vs-specific-font-families.mdx @@ -1,8 +1,6 @@ --- -id: generic-vs-specific-font-families title: "CSS Generic vs. Specific Font Families" sidebar_label: "Generic vs. Specific Font Families" -sidebar_position: 1 keywords: - css font families - css generic font families @@ -18,7 +16,6 @@ tags: - css specific font families - css font-family property - css font-family values -hide_table_of_contents: true --- In CSS, font families are used to define the typeface or font style that should be applied to text elements on a web page. There are two types of font families you can use in CSS: generic font families and specific font families. Understanding the difference between these two types of font families is essential for styling text effectively and ensuring consistent typography across your website. diff --git a/docs/css/introduction/_category_.json b/docs/css/introduction/_category_.json deleted file mode 100644 index b490ad0..0000000 --- a/docs/css/introduction/_category_.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "label": "Introduction", - "position": 1, - "link": { - "type": "generated-index", - "description": "In this section, you will learn about the CSS. CSS stands for Cascading Style Sheets. It is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript." - } - } \ No newline at end of file diff --git a/docs/css/introduction/comments-in-css.mdx b/docs/css/introduction/comments-in-css.mdx index cdd0b69..1ec487a 100644 --- a/docs/css/introduction/comments-in-css.mdx +++ b/docs/css/introduction/comments-in-css.mdx @@ -1,8 +1,6 @@ --- -id: comments-in-css -title: Comments in CSS +title: "Comments in CSS" sidebar_label: Comments in CSS -sidebar_position: 3 tags: [ comments-in-css, @@ -32,7 +30,6 @@ keywords: css tutorial for beginners 2025, css tutorial for learning, ] -hide_table_of_contents: true --- In this tutorial, you will learn how to add comments to your CSS code to make it more readable and maintainable. Comments are used to explain the purpose of the code, provide context, and make it easier for other developers (or your future self) to understand and modify the code. diff --git a/docs/css/introduction/how-to-add-css-to-html.mdx b/docs/css/introduction/how-to-add-css-to-html.mdx index f532817..34a1897 100644 --- a/docs/css/introduction/how-to-add-css-to-html.mdx +++ b/docs/css/introduction/how-to-add-css-to-html.mdx @@ -1,8 +1,5 @@ --- -id: how-to-add-css-to-html -title: How to Add CSS to HTML -sidebar_label: How to Add CSS to HTML -sidebar_position: 2 +title: "How to Add CSS to HTML" tags: [ how-to-add-css-to-html, @@ -32,7 +29,6 @@ keywords: css tutorial for beginners 2025, css tutorial for learning, ] -hide_table_of_contents: true --- In this tutorial, you will learn how to add CSS to an HTML document using internal, external, and inline styles. CSS (Cascading Style Sheets) is a style sheet language that is used to describe the look and formatting of a document written in HTML or XML. It allows you to style web pages and user interfaces, making it easier to create visually appealing and responsive websites. diff --git a/docs/css/introduction/what-is-css.mdx b/docs/css/introduction/what-is-css.mdx index b4e587e..b02a423 100644 --- a/docs/css/introduction/what-is-css.mdx +++ b/docs/css/introduction/what-is-css.mdx @@ -1,8 +1,6 @@ --- -id: what-is-css title: What is CSS sidebar_label: What is CSS -sidebar_position: 1 tags: [ what-is-css, @@ -33,7 +31,6 @@ keywords: css tutorial for beginners 2025, css tutorial for learning, ] -hide_table_of_contents: true --- In this tutorial, you will learn what is CSS, why it is used, and how it works. CSS is a style sheet language that is used to describe the look and formatting of a document written in HTML or XML. It allows you to style web pages and user interfaces, making it easier to create visually appealing and responsive websites. CSS is an essential tool for web developers and designers, and it is used by millions of websites around the world. diff --git a/docs/css/opacity.mdx b/docs/css/opacity.mdx index 751db6c..8dde04a 100644 --- a/docs/css/opacity.mdx +++ b/docs/css/opacity.mdx @@ -1,8 +1,6 @@ --- -id: opacity title: "CSS Opacity" sidebar_label: "Opacity" -sidebar_position: 8 keywords: - css opacity - opacity css @@ -17,7 +15,6 @@ tags: - css transparency - css alpha - css rgba -hide_table_of_contents: true --- In CSS, the `opacity` property is used to set the transparency of an element. It can take a value from `0.0` (fully transparent) to `1.0` (fully opaque). The `opacity` property affects the entire element, including its text and any child elements. By adjusting the opacity of an element, you can create visually appealing effects such as transparent overlays, faded images, and subtle text highlights. @@ -192,7 +189,7 @@ By using the `opacity` property in CSS, you can create various visual effects on :::note Try it yourself -Compare this snippet from [CSS Box Model](/tutorial/category/box-model) to learn how to use the CSS box model to control the layout and spacing of elements on your web page. +Compare this snippet from [CSS Box Model](/tutorial/css/box-model/intro) to learn how to use the CSS box model to control the layout and spacing of elements on your web page. ::: diff --git a/docs/css/selectors/_category_.json b/docs/css/selectors/_category_.json deleted file mode 100644 index 8376623..0000000 --- a/docs/css/selectors/_category_.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "label": "Selectors", - "position": 2, - "link": { - "type": "generated-index", - "description": "In this section, you will learn about the CSS Selectors. CSS selectors are used to select the content you want to style. There are many types of selectors available in CSS. You can select elements based on their id, class, type, attribute, and more. You can also combine multiple selectors to create complex rules." - } - } \ No newline at end of file diff --git a/docs/css/selectors/attribute-selectors.mdx b/docs/css/selectors/attribute-selectors.mdx index fc72dd3..6128e72 100644 --- a/docs/css/selectors/attribute-selectors.mdx +++ b/docs/css/selectors/attribute-selectors.mdx @@ -1,8 +1,6 @@ --- -id: attribute-selectors title: Attribute Selectors sidebar_label: Attribute Selectors -sidebar_position: 2 tags: ['css-selectors', 'attribute-selectors', 'css', 'selectors'] description: "Grouping selectors with attribute selectors in CSS allows you to apply the same styles to multiple selectors based on their attributes." keywords: @@ -17,7 +15,6 @@ keywords: - 'css' - 'selectors' - 'simple selectors' -hide_table_of_contents: true --- In CSS, you can group multiple selectors together to apply the same styles to all of them. This is called grouping selectors. Grouping selectors can help you write more concise and maintainable CSS code. diff --git a/docs/css/selectors/combinator-selectors/_category_.json b/docs/css/selectors/combinator-selectors/_category_.json deleted file mode 100644 index 8a5a6f5..0000000 --- a/docs/css/selectors/combinator-selectors/_category_.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "label": "Combinator Selectors", - "position": 3, - "link": { - "type": "generated-index", - "description": "In this section, you will learn about the combinator selectors in CSS. Combinator selectors are used to combine multiple selectors to create complex rules. There are four types of combinator selectors in CSS: descendant, child, adjacent sibling, and general sibling." - } - } \ No newline at end of file diff --git a/docs/css/selectors/combinator-selectors/adjacent-sibling-selector.mdx b/docs/css/selectors/combinator-selectors/adjacent-sibling-selector.mdx index 357a9e8..216a9ac 100644 --- a/docs/css/selectors/combinator-selectors/adjacent-sibling-selector.mdx +++ b/docs/css/selectors/combinator-selectors/adjacent-sibling-selector.mdx @@ -1,8 +1,6 @@ --- -id: adjacent-sibling-selector title: Adjacent Sibling Selector sidebar_label: Adjacent Sibling Selector -position: 3 tags: [selector, combinator, adjacent-sibling] description: "Adjacent sibling selector is used to select an element that is immediately preceded by another element." keywords: @@ -13,7 +11,6 @@ keywords: css combinator, css adjacent sibling combinator, ] -hide_table_of_contents: true --- In CSS, the adjacent sibling selector is used to select an element that is immediately preceded by another element. The adjacent sibling selector is represented by the `+` character between two selectors. diff --git a/docs/css/selectors/combinator-selectors/child-selector.mdx b/docs/css/selectors/combinator-selectors/child-selector.mdx index c24bf3a..8b349f5 100644 --- a/docs/css/selectors/combinator-selectors/child-selector.mdx +++ b/docs/css/selectors/combinator-selectors/child-selector.mdx @@ -1,12 +1,9 @@ --- -id: child-selector title: Child Selector sidebar_label: Child Selector -sidebar_position: 2 tags: [selector, combinator, child] description: "Child selector is used to select an element that is a direct child of another element." keywords: [child selector, css child selector, css selector, css combinator, css child combinator] -hide_table_of_contents: true --- In CSS, the child selector is used to select an element that is a direct child of another element. The child selector is represented by the `>` character between two selectors. diff --git a/docs/css/selectors/combinator-selectors/descendant-selector.mdx b/docs/css/selectors/combinator-selectors/descendant-selector.mdx index 4716aa3..59aba85 100644 --- a/docs/css/selectors/combinator-selectors/descendant-selector.mdx +++ b/docs/css/selectors/combinator-selectors/descendant-selector.mdx @@ -1,12 +1,9 @@ --- -id: descendant-selector title: Descendant Selector sidebar_label: Descendant Selector -sidebar_position: 1 tags: [selector, combinator, descendant] description: "Descendant selector is used to select an element that is a descendant of another element." keywords: [descendant selector, css descendant selector, css selector, css combinator, css descendant combinator] -hide_table_of_contents: true --- In CSS, the descendant selector is used to select an element that is a descendant of another element. The descendant selector is represented by a whitespace character (` `) between two selectors. diff --git a/docs/css/selectors/combinator-selectors/general-sibling-selector.mdx b/docs/css/selectors/combinator-selectors/general-sibling-selector.mdx index f89ce23..25d3c8f 100644 --- a/docs/css/selectors/combinator-selectors/general-sibling-selector.mdx +++ b/docs/css/selectors/combinator-selectors/general-sibling-selector.mdx @@ -1,8 +1,6 @@ --- -id: general-sibling-selector title: General Sibling Selector sidebar_label: General Sibling Selector -position: 4 tags: [selector, combinator, general-sibling] description: "General sibling selector is used to select an element that is preceded by another element." keywords: @@ -13,7 +11,6 @@ keywords: css combinator, css general sibling combinator, ] -hide_table_of_contents: true --- In CSS, the general sibling selector is used to select an element that is preceded by another element. The general sibling selector is represented by the `~` character between two selectors. diff --git a/docs/css/selectors/compound-selectors.mdx b/docs/css/selectors/compound-selectors.mdx index d0968e7..e388233 100644 --- a/docs/css/selectors/compound-selectors.mdx +++ b/docs/css/selectors/compound-selectors.mdx @@ -1,8 +1,5 @@ --- -id: compound-selectors -title: Compound Selectors -sidebar_label: Compound Selectors -sidebar_position: 4 +title: "Compound Selectors" tags: [selector, compound] description: "Compound selectors are used to select elements based on multiple conditions." keywords: @@ -12,7 +9,6 @@ keywords: css selectors, css compound, ] -hide_table_of_contents: true --- In CSS, compound selectors are used to select elements based on multiple conditions. Compound selectors are created by combining two or more simple selectors. Compound selectors allow you to target elements based on multiple conditions, such as the presence of a class and an attribute, or the type of an element and its state. diff --git a/docs/css/selectors/pseudo-class-selectors.mdx b/docs/css/selectors/pseudo-class-selectors.mdx index 89b904c..be4e78e 100644 --- a/docs/css/selectors/pseudo-class-selectors.mdx +++ b/docs/css/selectors/pseudo-class-selectors.mdx @@ -1,5 +1,4 @@ --- -id: pseudo-class-selectors title: "Pseudo-Class Selectors" sidebar_label: "Pseudo-Class Selectors" tags: ["selector", "pseudo-class"] @@ -11,8 +10,6 @@ keywords: "css selectors", "css pseudo-class", ] -sidebar_position: 6 -hide_table_of_contents: true --- In CSS, pseudo-class selectors are used to style elements based on their state or position in the document. Pseudo-class selectors are represented by a colon `:` followed by the name of the pseudo-class. Pseudo-class selectors allow you to style elements based on user interaction, such as hovering over an element, or based on the position of an element in the document tree, such as the first child of a parent element. diff --git a/docs/css/selectors/pseudo-elements-selectors.mdx b/docs/css/selectors/pseudo-elements-selectors.mdx index fb9e99e..0b42790 100644 --- a/docs/css/selectors/pseudo-elements-selectors.mdx +++ b/docs/css/selectors/pseudo-elements-selectors.mdx @@ -1,8 +1,6 @@ --- -id: pseudo-elements-selectors title: "Pseudo-Elements Selectors" sidebar_label: "Pseudo-Elements Selectors" -sidebar_position: 5 tags: [ "pseudo-elements selectors", @@ -18,7 +16,6 @@ keywords: css selectors, css pseudo-elements, ] -hide_table_of_contents: true --- In CSS, pseudo-elements selectors are used to style parts of an element that are not part of the document tree. Pseudo-elements selectors are represented by double colons `::` followed by the name of the pseudo-element. Pseudo-elements selectors allow you to style specific parts of an element, such as the first letter or line of a block of text, without adding extra markup to the HTML document. diff --git a/docs/css/selectors/simple-selectors/_category_.json b/docs/css/selectors/simple-selectors/_category_.json deleted file mode 100644 index ecebf79..0000000 --- a/docs/css/selectors/simple-selectors/_category_.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "label": "Simple Selectors", - "position": 1, - "link": { - "type": "generated-index", - "description": "In this section, you will learn about the simple selectors in CSS. Simple selectors are the most basic type of selectors. They are used to select elements based on their type, class, id, or attribute. Simple selectors are the building blocks of more complex selectors." - } - } \ No newline at end of file diff --git a/docs/css/selectors/simple-selectors/class-selector.mdx b/docs/css/selectors/simple-selectors/class-selector.mdx index 61b8945..52baf38 100644 --- a/docs/css/selectors/simple-selectors/class-selector.mdx +++ b/docs/css/selectors/simple-selectors/class-selector.mdx @@ -1,8 +1,6 @@ --- -id: class-selector title: Class Selector sidebar_label: Class Selector -sidebar_position: 2 description: "The class selector is used to select elements on a web page based on their class attribute." keywords: [ @@ -17,7 +15,6 @@ keywords: css tutorial for beginners 2025, css tutorial for learning, ] -hide_table_of_contents: true tags: - 'css-selectors' - 'class-selector' diff --git a/docs/css/selectors/simple-selectors/element-selector.mdx b/docs/css/selectors/simple-selectors/element-selector.mdx index 927cbc3..ad6d94c 100644 --- a/docs/css/selectors/simple-selectors/element-selector.mdx +++ b/docs/css/selectors/simple-selectors/element-selector.mdx @@ -1,8 +1,6 @@ --- -id: element-selector title: Element Selector sidebar_label: Element Selector -sidebar_position: 1 tags: [ css, @@ -22,7 +20,6 @@ keywords: css tutorial for beginners 2025, css tutorial for learning, ] -hide_table_of_contents: true --- In CSS, the element selector is used to select elements on a web page based on their element type. It is one of the simplest and most commonly used selectors in CSS. diff --git a/docs/css/selectors/simple-selectors/grouping-selectors.mdx b/docs/css/selectors/simple-selectors/grouping-selectors.mdx index d8920c7..f320d76 100644 --- a/docs/css/selectors/simple-selectors/grouping-selectors.mdx +++ b/docs/css/selectors/simple-selectors/grouping-selectors.mdx @@ -1,8 +1,6 @@ --- -id: grouping-selectors title: Grouping Selectors sidebar_label: Grouping Selectors -sidebar_position: 5 tags: - 'css-selectors' - 'grouping-selectors' @@ -17,7 +15,6 @@ keywords: - 'css' - 'selectors' - 'simple selectors' -hide_table_of_contents: true --- In CSS, you can group multiple selectors together to apply the same styles to all of them. This is called grouping selectors. Grouping selectors can help you write more concise and maintainable CSS code. diff --git a/docs/css/selectors/simple-selectors/id-selector.mdx b/docs/css/selectors/simple-selectors/id-selector.mdx index f4d36be..9aac4ad 100644 --- a/docs/css/selectors/simple-selectors/id-selector.mdx +++ b/docs/css/selectors/simple-selectors/id-selector.mdx @@ -1,8 +1,6 @@ --- -id: id-selector title: ID Selector sidebar_label: ID Selector -sidebar_position: 3 description: "The ID selector is used to select a single element on a web page based on its ID attribute." keywords: [ @@ -17,7 +15,6 @@ keywords: css tutorial for beginners 2025, css tutorial for learning, ] -hide_table_of_contents: true --- In CSS, the ID selector is used to select a single element on a web page based on its ID attribute. It is denoted by a hash (`#`) followed by the ID name. diff --git a/docs/css/selectors/simple-selectors/universal-selector.mdx b/docs/css/selectors/simple-selectors/universal-selector.mdx index 3515528..4f25510 100644 --- a/docs/css/selectors/simple-selectors/universal-selector.mdx +++ b/docs/css/selectors/simple-selectors/universal-selector.mdx @@ -1,8 +1,6 @@ --- -id: universal-selector title: Universal Selector sidebar_label: Universal Selector -sidebar_position: 4 tags: [ 'universal-selector', @@ -32,7 +30,6 @@ keywords: css tutorial for beginners 2025, css tutorial for learning, ] -hide_table_of_contents: true --- In CSS, the universal selector is used to select all elements on a web page. It is denoted by an asterisk (`*`) and can be used to apply styles to all elements in a document. diff --git a/docs/cybersecurity/index.mdx b/docs/cybersecurity/index.mdx index 33bd472..8c19d3f 100644 --- a/docs/cybersecurity/index.mdx +++ b/docs/cybersecurity/index.mdx @@ -102,4 +102,4 @@ Cyber security is not a one-time skill, it’s a **constant learning process**. As you progress through these tutorials, remember: > “Security isn’t just a skill, it’s a mindset.” -So, gear up, and let’s make the web a safer place, one byte at a time.\ \ No newline at end of file +So, gear up, and let’s make the web a safer place, one byte at a time. \ No newline at end of file diff --git a/docs/git/_category_.json b/docs/git/_category_.json deleted file mode 100644 index 0f39725..0000000 --- a/docs/git/_category_.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "label": "Git", - "position": 4, - "link": { - "type": "generated-index", - "description": "Learn React.js for building user interfaces, and learn how to use React.js with other technologies like Redux, Webpack, and ES6." - } - } \ No newline at end of file diff --git a/docs/github/_category_.json b/docs/github/_category_.json deleted file mode 100644 index 9ad9e71..0000000 --- a/docs/github/_category_.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "label": "GitHub", - "position": 5, - "link": { - "type": "generated-index", - "description": "Learn React.js for building user interfaces, and learn how to use React.js with other technologies like Redux, Webpack, and ES6." - } - } \ No newline at end of file diff --git a/docs/github/clone-a-repository.md b/docs/github/clone-a-repository.mdx similarity index 100% rename from docs/github/clone-a-repository.md rename to docs/github/clone-a-repository.mdx diff --git a/docs/github/commit-changes.md b/docs/github/commit-changes.mdx similarity index 100% rename from docs/github/commit-changes.md rename to docs/github/commit-changes.mdx diff --git a/docs/github/create-a-branch.md b/docs/github/create-a-branch.mdx similarity index 100% rename from docs/github/create-a-branch.md rename to docs/github/create-a-branch.mdx diff --git a/docs/github/create-a-github-account.md b/docs/github/create-a-github-account.mdx similarity index 100% rename from docs/github/create-a-github-account.md rename to docs/github/create-a-github-account.mdx diff --git a/docs/github/create-a-new-repository.md b/docs/github/create-a-new-repository.mdx similarity index 100% rename from docs/github/create-a-new-repository.md rename to docs/github/create-a-new-repository.mdx diff --git a/docs/github/create-a-pull-request.md b/docs/github/create-a-pull-request.mdx similarity index 100% rename from docs/github/create-a-pull-request.md rename to docs/github/create-a-pull-request.mdx diff --git a/docs/github/introduction-to-github.md b/docs/github/introduction-to-github.mdx similarity index 100% rename from docs/github/introduction-to-github.md rename to docs/github/introduction-to-github.mdx diff --git a/docs/github/make-changes-to-a-file.md b/docs/github/make-changes-to-a-file.mdx similarity index 100% rename from docs/github/make-changes-to-a-file.md rename to docs/github/make-changes-to-a-file.mdx diff --git a/docs/github/merge-a-pull-request.md b/docs/github/merge-a-pull-request.mdx similarity index 100% rename from docs/github/merge-a-pull-request.md rename to docs/github/merge-a-pull-request.mdx diff --git a/docs/github/push-changes-to-github.md b/docs/github/push-changes-to-github.mdx similarity index 100% rename from docs/github/push-changes-to-github.md rename to docs/github/push-changes-to-github.mdx diff --git a/docs/html/_category_.json b/docs/html/_category_.json deleted file mode 100644 index 3354615..0000000 --- a/docs/html/_category_.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "label": "HTML", - "position": 2, - "link": { - "type": "generated-index", - "description": "HTML stands for Hyper Text Markup Language. It is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript." - } -} diff --git a/docs/html/best-practices-and-optimization/_category_.json b/docs/html/best-practices-and-optimization/_category_.json deleted file mode 100644 index e440918..0000000 --- a/docs/html/best-practices-and-optimization/_category_.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "label": "Best Practices and Optimization", - "position": 16, - "link": { - "type": "generated-index", - "description": "In this section, you will learn best practices for writing clean, efficient HTML code and optimizing your web pages for performance." - } -} diff --git a/docs/html/best-practices-and-optimization/index.mdx b/docs/html/best-practices-and-optimization/index.mdx new file mode 100644 index 0000000..e69de29 diff --git a/docs/html/forms/_category_.json b/docs/html/forms/_category_.json deleted file mode 100644 index cb26af0..0000000 --- a/docs/html/forms/_category_.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "label": "Forms", - "position": 10, - "link": { - "type": "generated-index", - "description": "In this section, you will learn how to create forms in HTML. You will learn how to create text fields, radio buttons, checkboxes, and more." - } - } \ No newline at end of file diff --git a/docs/html/forms/building-form.mdx b/docs/html/forms/building-form.mdx index e3123ab..f3d0f1e 100644 --- a/docs/html/forms/building-form.mdx +++ b/docs/html/forms/building-form.mdx @@ -1,8 +1,6 @@ --- -id: building-forms title: Building Forms in HTML sidebar_label: Building Forms -sidebar_position: 1 tags: [html, web-development, forms, user-input, front-end-development, web-design] description: "Learn how to create forms in HTML to collect user input effectively, with detailed examples and best practices." --- diff --git a/docs/html/how-html-works.mdx b/docs/html/how-html-works.mdx index 243a948..a198bb4 100644 --- a/docs/html/how-html-works.mdx +++ b/docs/html/how-html-works.mdx @@ -1,8 +1,6 @@ --- -id: how-html-works title: How HTML works with web browsers sidebar_label: How HTML works -sidebar_position: 2 tags: [html, web-development, front-end-development, web-design, web-browsers, web-technology, web-pages] description: "In this tutorial, you will learn about How HTML works with web browsers and how web browsers render HTML content." --- diff --git a/docs/html/html-basics/_category_.json b/docs/html/html-basics/_category_.json deleted file mode 100644 index 407201e..0000000 --- a/docs/html/html-basics/_category_.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "label": "HTML Basics", - "position": 4, - "link": { - "type": "generated-index", - "description": "In this section, you will learn the basics of HTML, including how to create a simple webpage and how to use HTML tags to structure your content." - } - } \ No newline at end of file diff --git a/docs/html/html-validation-and-debugging/_category_.json b/docs/html/html-validation-and-debugging/_category_.json deleted file mode 100644 index 1103bbf..0000000 --- a/docs/html/html-validation-and-debugging/_category_.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "label": "HTML Validation and Debugging", - "position": 15, - "link": { - "type": "generated-index", - "description": "In this section, you will learn how to validate your HTML code and debug common HTML errors." - } - } \ No newline at end of file diff --git a/docs/html/html-validation-and-debugging/common-html-errors-and-fixes.mdx b/docs/html/html-validation-and-debugging/common-html-errors-and-fixes.mdx index 55b94ee..6564969 100644 --- a/docs/html/html-validation-and-debugging/common-html-errors-and-fixes.mdx +++ b/docs/html/html-validation-and-debugging/common-html-errors-and-fixes.mdx @@ -1,8 +1,6 @@ --- -id: common-html-errors-and-fixes title: Common HTML Errors and Fixes sidebar_label: Common HTML Errors and Fixes -sidebar_position: 3 tags: [html, web-development, html-validation, debugging] description: "In this tutorial, you will learn about common HTML errors and how to fix them to create valid and well-structured HTML documents." keywords: diff --git a/docs/html/html-validation-and-debugging/importance-of-validating-html-code.mdx b/docs/html/html-validation-and-debugging/importance-of-validating-html-code.mdx index f42c6d7..f10b325 100644 --- a/docs/html/html-validation-and-debugging/importance-of-validating-html-code.mdx +++ b/docs/html/html-validation-and-debugging/importance-of-validating-html-code.mdx @@ -1,8 +1,6 @@ --- -id: importance-of-validating-html-code title: Importance of Validating HTML Code sidebar_label: Importance of Validating HTML Code -sidebar_position: 1 tags: [html, web-development, validation, debugging] description: "In this tutorial, you will learn about the importance of validating HTML code and how to use HTML validators to check for errors and ensure your code is well-formed and standards-compliant." keywords: [html validation, html validation importance, html validation benefits, html validation tools, html validation online, html validation w3c, html validation checker, html validation error, html validation code, html validation best practices, html validation and debugging] diff --git a/docs/html/html-validation-and-debugging/using-w3c-validator.mdx b/docs/html/html-validation-and-debugging/using-w3c-validator.mdx index 10d8dd3..33221c3 100644 --- a/docs/html/html-validation-and-debugging/using-w3c-validator.mdx +++ b/docs/html/html-validation-and-debugging/using-w3c-validator.mdx @@ -1,8 +1,6 @@ --- -id: using-w3c-validator title: Using the W3C HTML Validator sidebar_label: Using the W3C Validator -sidebar_position: 2 tags: [html, web-development, validation, debugging] description: "In this tutorial, you will learn how to use the W3C HTML Validator to check your HTML code for errors and ensure it is well-formed and standards-compliant." keywords: [w3c html validator, html validation, html debugging, html errors, html standards, html compliance] diff --git a/docs/html/intro-html.mdx b/docs/html/intro-html.mdx index ffa3942..1712bb6 100644 --- a/docs/html/intro-html.mdx +++ b/docs/html/intro-html.mdx @@ -1,8 +1,6 @@ --- -id: intro-html title: Introduction of HTML sidebar_label: Introduction of HTML -sidebar_position: 1 tags: [ html, diff --git a/docs/html/lists/_category_.json b/docs/html/lists/_category_.json deleted file mode 100644 index 9c35467..0000000 --- a/docs/html/lists/_category_.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "label": "Lists", - "position": 6, - "link": { - "type": "generated-index", - "description": "In this section, you learn how to create and manage lists in your app. for example, you can create an ordered list, unordered list, or definition list. You can also create a list with a custom icon or a list with a custom bullet." - } - } \ No newline at end of file diff --git a/docs/html/multimedia/_category_.json b/docs/html/multimedia/_category_.json deleted file mode 100644 index 7fafa8e..0000000 --- a/docs/html/multimedia/_category_.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "label": "Multimedia", - "position": 12, - "link": { - "type": "generated-index", - "description": "In this section, you will learn how to use the multimedia in html. You will learn how to add images, videos, and audio to your web pages." - } - } \ No newline at end of file diff --git a/docs/html/next-steps-and-resources/_category_.json b/docs/html/next-steps-and-resources/_category_.json deleted file mode 100644 index eb13e50..0000000 --- a/docs/html/next-steps-and-resources/_category_.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "label": "Next Steps and Resources", - "position": 17, - "link": { - "type": "generated-index", - "description": "In this section, you will find resources to help you continue your learning journey." - } -} diff --git a/docs/html/responsive-web-design/_category_.json b/docs/html/responsive-web-design/_category_.json deleted file mode 100644 index bf2e833..0000000 --- a/docs/html/responsive-web-design/_category_.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "label": "Responsive Web Design", - "position": 14, - "link": { - "type": "generated-index", - "description": "In this section, you will learn how to create responsive web designs that look good on any device." - } - } \ No newline at end of file diff --git a/docs/html/semantic-html/_category_.json b/docs/html/semantic-html/_category_.json deleted file mode 100644 index bd45334..0000000 --- a/docs/html/semantic-html/_category_.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "label": "Semantic HTML", - "position": 11, - "link": { - "type": "generated-index", - "description": "In this section, you will learn about the importance of semantic HTML and how to use it to improve the accessibility and SEO of your web pages." - } - } \ No newline at end of file diff --git a/docs/html/setup-environment.mdx b/docs/html/setup-environment.mdx index 16ac3dd..32cce84 100644 --- a/docs/html/setup-environment.mdx +++ b/docs/html/setup-environment.mdx @@ -1,8 +1,6 @@ --- -id: setup-environment title: Setting up your development environment sidebar_label: Setting up environment -sidebar_position: 3 tags: [ html, diff --git a/docs/html/tables/_category_.json b/docs/html/tables/_category_.json deleted file mode 100644 index 84f1f09..0000000 --- a/docs/html/tables/_category_.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "label": "Tables", - "position": 9, - "link": { - "type": "generated-index", - "description": "In this section, you will learn how to work with tables in html. You will learn how to create tables, add rows, add columns, merge cells, and more." - } - } \ No newline at end of file diff --git a/docs/html/tables/creating-tables.mdx b/docs/html/tables/creating-tables.mdx index c4065ff..448f8f0 100644 --- a/docs/html/tables/creating-tables.mdx +++ b/docs/html/tables/creating-tables.mdx @@ -1,8 +1,6 @@ --- -id: creating-tables title: Creating Tables in HTML sidebar_label: Creating Tables -sidebar_position: 2 tags: [html, web-development, tables] description: "In this tutorial, you will learn how to create tables in HTML. Tables are used to display data in rows and columns, making it easier to organize and present information on web pages." keywords: [html tables, creating tables in html, html table tags, html table structure, html table example] diff --git a/docs/html/tables/html-tables.mdx b/docs/html/tables/html-tables.mdx index 8c923e2..a8af98e 100644 --- a/docs/html/tables/html-tables.mdx +++ b/docs/html/tables/html-tables.mdx @@ -1,8 +1,6 @@ --- -id: html-tables title: HTML Tables sidebar_label: HTML Tables -sidebar_position: 1 tags: [html, tables, web development, markup language, structure, data presentation, web design, web pages, websites, table attributes, table structure] description: "This guide will introduce you to HTML tables, their importance, and how to use them to organize data on web pages. You'll learn about creating tables, structuring rows and columns, and customizing tables with HTML attributes." keywords: [html tables, html table structure, html table tags, html table attributes, web development, web design, html tutorial] diff --git a/docs/html/tables/table-attributes.mdx b/docs/html/tables/table-attributes.mdx index aa55018..e9e0023 100644 --- a/docs/html/tables/table-attributes.mdx +++ b/docs/html/tables/table-attributes.mdx @@ -1,8 +1,6 @@ --- -id: table-attributes title: Table Attributes in HTML sidebar_label: Table Attributes -sidebar_position: 4 tags: [html, web-development, table-attributes, tables] description: "In this tutorial, you will learn about table attributes in HTML. Table attributes define the appearance, behavior, and structure of tables on web pages." keywords: diff --git a/docs/html/tables/table-structure.mdx b/docs/html/tables/table-structure.mdx index 9adf958..b62cd9b 100644 --- a/docs/html/tables/table-structure.mdx +++ b/docs/html/tables/table-structure.mdx @@ -1,8 +1,6 @@ --- -id: table-structure title: Table Structure in HTML sidebar_label: Table Structure -sidebar_position: 3 tags: [html, web-development, tables, table-structure] description: "In this tutorial, you will learn about the structure of tables in HTML. Tables are used to display data in rows and columns, making it easier to organize and present information on web pages." keywords: [html tables, html table structure, html table elements, web development, html tutorial] diff --git a/docs/html/text-formatting/_category_.json b/docs/html/text-formatting/_category_.json deleted file mode 100644 index 44dceeb..0000000 --- a/docs/html/text-formatting/_category_.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "label": "Text Formatting", - "position": 5, - "link": { - "type": "generated-index", - "description": "In this section, you will learn how to format text in a variety of ways, including bold, italics, and underlining. You will also learn how to create lists and tables." - } - } \ No newline at end of file diff --git a/docs/html/text-formatting/headings.mdx b/docs/html/text-formatting/headings.mdx index 151ba36..a837d15 100644 --- a/docs/html/text-formatting/headings.mdx +++ b/docs/html/text-formatting/headings.mdx @@ -1,8 +1,6 @@ --- -id: headings title: Headings in HTML sidebar_label: Headings -sidebar_position: 1 tags: [html, web-development, headings] description: "In this tutorial, you will learn about headings in HTML. Headings are used to define the structure of a web page and are used to provide a hierarchy of information." keywords: [html headings, h1 to h6, heading tags, semantic headings, html structure] diff --git a/docs/html/text-formatting/paragraphs.mdx b/docs/html/text-formatting/paragraphs.mdx index db47a2f..3c64e2c 100644 --- a/docs/html/text-formatting/paragraphs.mdx +++ b/docs/html/text-formatting/paragraphs.mdx @@ -1,8 +1,6 @@ --- -id: paragraphs -title: The Paragraph in HTML +title: Paragraph in HTML sidebar_label: Paragraphs -sidebar_position: 2 tags: [html, paragraphs, html paragraphs, html tutorial, paragraph tag] description: Learn how to use the HTML paragraph tag to structure and format text content on a web page with proper syntax and examples. keywords: [html paragraph, p tag, html text formatting, web development, html content structure] diff --git a/docs/html/text-formatting/text-formatting.mdx b/docs/html/text-formatting/text-formatting.mdx index f975ad9..f330a01 100644 --- a/docs/html/text-formatting/text-formatting.mdx +++ b/docs/html/text-formatting/text-formatting.mdx @@ -1,8 +1,6 @@ --- -id: text-formatting title: Text Formatting in HTML sidebar_label: Text Formatting -sidebar_position: 3 tags: [html, text formatting, html formatting, html tutorial] description: Learn how to use HTML tags to format text for emphasis, styling, and semantic structure, with examples and best practices. keywords: [html text formatting, html formatting tags, html text styles, web development, html tutorial] diff --git a/docs/index.mdx b/docs/index.mdx index 38f2c0e..e8750b7 100644 --- a/docs/index.mdx +++ b/docs/index.mdx @@ -58,19 +58,19 @@ We cover topics including **Frontend**, **Backend**, **AI**, **Data Science**, a - +

Learn the building blocks of the web — HTML. Understand tags, attributes, forms, and layout fundamentals to create structured webpages.

 - +

Master styling with CSS. Learn Flexbox, Grid, animations, and responsive design techniques for beautiful interfaces.

 - +

From basics to advanced — learn JavaScript programming, DOM manipulation, and ES6+ features to bring interactivity to your projects.

 - +

Dive into React and learn how to build modern single-page applications with reusable components and hooks.

 @@ -82,7 +82,7 @@ We cover topics including **Frontend**, **Backend**, **AI**, **Data Science**, a

Get started with Python programming. Learn syntax, data structures, and how to build automation scripts or web apps.

 - +

Understand version control, branching, and collaboration with Git and GitHub for open-source development.

 diff --git a/docs/javascript/_category_.json b/docs/javascript/_category_.json deleted file mode 100644 index ccfdd2f..0000000 --- a/docs/javascript/_category_.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "label": "JavaScript", - "position": 4, - "link": { - "type": "generated-index", - "description": "JavaScript is a programming language that enables you to create dynamically updating content, control multimedia, animate images, and much more. In this tutorial, you'll learn the basics of JavaScript and how to use it to create interactive web experiences." - } -} diff --git a/docs/javascript/all-about-variables/_category_.json b/docs/javascript/all-about-variables/_category_.json deleted file mode 100644 index 2167a5a..0000000 --- a/docs/javascript/all-about-variables/_category_.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "label": "All About Variables", - "position": 2, - "link": { - "type": "generated-index", - "description": "In this tutorial, you'll learn what is a variable, how to declare a variable, how to assign a value to a variable, and how to use variables in JavaScript." - } -} diff --git a/docs/javascript/all-about-variables/hoisting.mdx b/docs/javascript/all-about-variables/hoisting.mdx index b62af59..7b7e65e 100644 --- a/docs/javascript/all-about-variables/hoisting.mdx +++ b/docs/javascript/all-about-variables/hoisting.mdx @@ -1,11 +1,8 @@ --- -id: hoisting-in-javascript title: Hoisting in JavaScript sidebar_label: Hoisting -sidebar_position: 2 tags: [javascript, hoisting, variable hoisting] description: "Learn about hoisting in JavaScript and how it affects variable declarations and function definitions." -hide_table_of_contents: true --- Hoisting is a unique feature of JavaScript that allows you to access variables and functions before they are declared in your code. This behavior can be surprising if you're not familiar with it, so understanding how hoisting works is essential for writing reliable JavaScript code. diff --git a/docs/javascript/all-about-variables/variable-declarations.mdx b/docs/javascript/all-about-variables/variable-declarations.mdx index 83105a6..c300c2a 100644 --- a/docs/javascript/all-about-variables/variable-declarations.mdx +++ b/docs/javascript/all-about-variables/variable-declarations.mdx @@ -1,11 +1,8 @@ --- -id: variable-declarations title: Variable Declarations sidebar_label: Variable Declarations -sidebar_position: 1 tags: [javascript, variables, variable declarations, var, let, const] description: "Learn how to declare variables in JavaScript using the var, let, and const keywords." -hide_table_of_contents: true --- Variables are an essential part of any programming language, allowing you to store and manipulate data in your code. In JavaScript, variables are declared using the `var`, `let`, or `const` keywords. Each of these keywords has its own characteristics and best practices for usage. In this tutorial, we'll explore how to declare variables in JavaScript and discuss the differences between `var`, `let`, and `const`. diff --git a/docs/javascript/all-about-variables/variable-naming-rules.mdx b/docs/javascript/all-about-variables/variable-naming-rules.mdx index ebd2ba6..e2f1d8f 100644 --- a/docs/javascript/all-about-variables/variable-naming-rules.mdx +++ b/docs/javascript/all-about-variables/variable-naming-rules.mdx @@ -1,11 +1,8 @@ --- -id: variable-naming-rules title: Variable Naming Rules sidebar_label: Variable Naming Rules -sidebar_position: 3 tags: [javascript, variables, variable naming, naming conventions] description: "Learn about the rules and best practices for naming variables in JavaScript, including naming conventions, reserved words, and case sensitivity." -hide_table_of_contents: true --- When writing JavaScript code, it's essential to follow consistent naming conventions for variables to improve code readability and maintainability. Variable names should be descriptive, meaningful, and follow certain rules to ensure clarity and avoid conflicts. diff --git a/docs/javascript/all-about-variables/variable-scopes.mdx b/docs/javascript/all-about-variables/variable-scopes.mdx index 974e872..09f5f2c 100644 --- a/docs/javascript/all-about-variables/variable-scopes.mdx +++ b/docs/javascript/all-about-variables/variable-scopes.mdx @@ -1,11 +1,8 @@ --- -id: variable-scopes title: Variable Scopes in JavaScript sidebar_label: Variable Scopes -sidebar_position: 4 tags: [javascript, variable, scope, global, local, block, function] description: "Learn about variable scopes in JavaScript, including global, local, and block scopes, and how they affect variable accessibility." -hide_table_of_contents: true --- Understanding variable scope in JavaScript is essential for writing effective and bug-free code. The scope of a variable determines where in your code a particular variable can be accessed or modified. Knowing how scopes work will help you prevent errors and make your code more predictable and maintainable. diff --git a/docs/javascript/data-types/_category_.json b/docs/javascript/data-types/_category_.json deleted file mode 100644 index d99a54e..0000000 --- a/docs/javascript/data-types/_category_.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "label": "Data Types", - "position": 3, - "link": { - "type": "generated-index", - "description": "In this tutorial, you'll learn about the different data types in JavaScript, such as string, number, boolean, null, undefined, object, and symbol." - } -} diff --git a/docs/javascript/data-types/intro.mdx b/docs/javascript/data-types/intro.mdx new file mode 100644 index 0000000..5b48125 --- /dev/null +++ b/docs/javascript/data-types/intro.mdx @@ -0,0 +1,110 @@ +--- +title: "Introduction to Data Types in JavaScript" +description: "Learn what data types are in JavaScript, why they are important, and how JavaScript handles different kinds of values." +--- + +In JavaScript, **data types** define the kind of values you can store and manipulate in your programs. Understanding data types is one of the most important foundations in mastering JavaScript, as it affects how variables behave, how operations work, and how memory is managed. + +--- + +## What Are Data Types? + +A **data type** represents the kind of value a variable can hold. For example, the number `42`, the text `"Hello"`, or a collection like `[1, 2, 3]` all belong to different data types. + +JavaScript is a **dynamically typed language**, meaning you don’t need to declare the type of a variable. The type is automatically assigned based on the value. + +```js +let name = "Ajay"; // String +let age = 24; // Number +let isDev = true; // Boolean +``` + +--- + +## Categories of Data Types + +JavaScript data types are divided into two main categories: + +### 1. **Primitive Data Types** + +Primitive types are immutable (cannot be changed) and are stored directly in memory. + +They include: + +* **String** +* **Number** +* **Boolean** +* **Undefined** +* **Null** +* **BigInt** +* **Symbol** + +Example: + +```js +let message = "Hello, World!"; // String +let score = 100; // Number +let isOnline = false; // Boolean +``` + +--- + +### 2. **Non-Primitive (Reference) Data Types** + +These are objects that can store multiple values and are stored by reference. + +They include: + +* **Object** +* **Array** +* **Function** +* **Date**, **Set**, **Map**, etc. + +Example: + +```js +let user = { name: "Ajay", role: "Developer" }; // Object +let languages = ["HTML", "CSS", "JavaScript"]; // Array +``` + +--- + +## Why Data Types Matter + +Data types help JavaScript determine: + +* How much memory to allocate. +* What operations can be performed. +* How to compare and convert values. + +For example: + +```js +console.log("10" + 5); // "105" (string concatenation) +console.log("10" - 5); // 5 (numeric subtraction) +``` + +Here, JavaScript performs **type coercion**, converting types automatically when needed. + +--- + +## Type Checking + +To check the data type of a value, you can use the `typeof` operator: + +```js +console.log(typeof "Hello"); // "string" +console.log(typeof 123); // "number" +console.log(typeof true); // "boolean" +console.log(typeof null); // "object" (a known quirk in JS) +console.log(typeof []); // "object" +``` + +--- + +## Summary + +| Category | Type Examples | Stored As | +| ----------------- | ----------------------------------- | --------- | +| **Primitive** | String, Number, Boolean, Null, etc. | Value | +| **Non-Primitive** | Object, Array, Function, etc. | Reference | diff --git a/docs/javascript/data-types/non-primitive-types/_category_.json b/docs/javascript/data-types/non-primitive-types/_category_.json deleted file mode 100644 index 76d53af..0000000 --- a/docs/javascript/data-types/non-primitive-types/_category_.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "label": "Non Primitive Types", - "position": 2, - "link": { - "type": "generated-index", - "description": "Non-primitive types are more complex data types in JavaScript. In this tutorial, you'll learn about non-primitive types in JavaScript, such as object, array, function, and more." - } -} diff --git a/docs/javascript/data-types/non-primitive-types/object/_category_.json b/docs/javascript/data-types/non-primitive-types/object/_category_.json deleted file mode 100644 index 943c0da..0000000 --- a/docs/javascript/data-types/non-primitive-types/object/_category_.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "label": "Object", - "position": 1, - "link": { - "type": "generated-index", - "description": "Objects are complex data types in JavaScript. In this tutorial, you'll learn about objects in JavaScript, how to create objects, and how to access object properties." - } -} diff --git a/docs/javascript/data-types/non-primitive-types/object/creating-objects.mdx b/docs/javascript/data-types/non-primitive-types/object/creating-objects.mdx index 47dc23f..3b78b11 100644 --- a/docs/javascript/data-types/non-primitive-types/object/creating-objects.mdx +++ b/docs/javascript/data-types/non-primitive-types/object/creating-objects.mdx @@ -1,11 +1,8 @@ --- -id: creating-objects title: "Creating Objects in JavaScript" sidebar_label: "Creating Objects" -sidebar_position: 2 tags: [javascript, data type, non-primitive type, object] description: "Learn how to create objects in JavaScript using object literals, constructors, and classes." -hide_table_of_contents: true --- In JavaScript, objects are a fundamental part of the language and are used to represent complex data structures. There are multiple ways to create objects in JavaScript, including using object literals, constructors, and classes. In this tutorial, you will learn how to create objects using these different methods. diff --git a/docs/javascript/data-types/non-primitive-types/object/intro.mdx b/docs/javascript/data-types/non-primitive-types/object/intro.mdx index 498b626..c44e35b 100644 --- a/docs/javascript/data-types/non-primitive-types/object/intro.mdx +++ b/docs/javascript/data-types/non-primitive-types/object/intro.mdx @@ -1,11 +1,8 @@ --- -id: introduction-to-objects title: "Introduction to Objects in JavaScript" sidebar_label: "Introduction to Objects" -sidebar_position: 1 tags: [javascript, data type, non-primitive type, object] description: "Learn about objects in JavaScript, how to create objects, and common operations with objects." -hide_table_of_contents: true --- In this tutorial, you will learn about objects in JavaScript, how to create objects, and common operations with objects. diff --git a/docs/javascript/data-types/primitive-types/_category_.json b/docs/javascript/data-types/primitive-types/_category_.json deleted file mode 100644 index 25c38b8..0000000 --- a/docs/javascript/data-types/primitive-types/_category_.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "label": "Primitive Types", - "position": 1, - "link": { - "type": "generated-index", - "description": "Primitive types are the most basic data types in JavaScript. In this tutorial, you'll learn about the primitive types in JavaScript, such as string, number, boolean, null, undefined, and symbol." - } -} diff --git a/docs/javascript/data-types/primitive-types/bigint.mdx b/docs/javascript/data-types/primitive-types/bigint.mdx index 0435040..6c40477 100644 --- a/docs/javascript/data-types/primitive-types/bigint.mdx +++ b/docs/javascript/data-types/primitive-types/bigint.mdx @@ -1,11 +1,8 @@ --- -id: bigint title: BigInt Data Type in JavaScript sidebar_label: BigInt -sidebar_position: 4 tags: [javascript, data type, primitive type, bigint] description: "Learn about the BigInt data type in JavaScript, how to create BigInt values, and common operations with BigInt values." -hide_table_of_contents: true --- In JavaScript, `BigInt` is a built-in object that provides a way to represent whole numbers larger than `Number.MAX_SAFE_INTEGER`. It allows you to work with integers of arbitrary length, overcoming the limitations of the `Number` data type. diff --git a/docs/javascript/data-types/primitive-types/boolean.mdx b/docs/javascript/data-types/primitive-types/boolean.mdx index 8d25aa0..e3ba13c 100644 --- a/docs/javascript/data-types/primitive-types/boolean.mdx +++ b/docs/javascript/data-types/primitive-types/boolean.mdx @@ -1,11 +1,8 @@ --- -id: boolean title: Boolean Data Type in JavaScript sidebar_label: Boolean -sidebar_position: 5 tags: [javascript, data type, primitive type, boolean] description: "Learn about the Boolean data type in JavaScript, how to create Boolean values, and common operations with Boolean values." -hide_table_of_contents: true --- In JavaScript, `Boolean` is a built-in data type that represents a logical value. It can have one of two values: `true` or `false`. The `Boolean` data type is used to store the result of logical operations and comparisons. diff --git a/docs/javascript/data-types/primitive-types/intro.mdx b/docs/javascript/data-types/primitive-types/intro.mdx new file mode 100644 index 0000000..752a395 --- /dev/null +++ b/docs/javascript/data-types/primitive-types/intro.mdx @@ -0,0 +1,141 @@ +--- +title: "Primitive Data Types in JavaScript" +description: "Understand primitive data types in JavaScript, their types, behavior, and how they differ from reference types." +--- + +Primitive data types are the **basic building blocks** of JavaScript. They represent single, immutable values (not objects) and are stored **directly in memory**. + +When you assign a primitive value to a variable, that variable holds the actual data — not a reference. + +## What Are Primitive Data Types? + +JavaScript has **7 primitive data types**: + +| Type | Description | Example | +|------|--------------|----------| +| **String** | Textual data enclosed in quotes | `"Ajay"` | +| **Number** | Numeric values (integer or float) | `42`, `3.14` | +| **Boolean** | Logical values | `true`, `false` | +| **Undefined** | Declared but not assigned any value | `let x;` | +| **Null** | Intentional absence of any value | `let y = null;` | +| **BigInt** | Large integers beyond Number’s limit | `12345678901234567890n` | +| **Symbol** | Unique and immutable identifiers | `Symbol("id")` | + + +## Key Characteristics + +1. **Immutable:** + Once created, their value cannot be changed. + ```js + let name = "Ajay"; + name[0] = "a"; // ❌ Doesn't change the original string + console.log(name); // "Ajay" + ``` + +2. **Stored by Value:** + When assigned or passed, a copy of the value is made. + + ```js + let a = 10; + let b = a; + b = 20; + console.log(a); // 10 (not affected) + ``` + +3. **Fixed Memory Size:** + Each primitive type has a known, fixed amount of memory. + +--- + +## Primitive Data Types in Action + +### 1. **String** + +Used for representing text. + +```js +let message = "Hello, World!"; +let greeting = 'Hi!'; +let template = `Welcome, ${message}`; +``` + +### 2. **Number** + +Represents both integer and floating-point numbers. + +```js +let count = 42; +let price = 9.99; +let infinity = Infinity; +let notANumber = NaN; +``` + +### 3. **Boolean** + +Represents logical truth values. + +```js +let isOnline = true; +let hasAccess = false; +``` + +### 4. **Undefined** + +A variable declared but not initialized. + +```js +let x; +console.log(x); // undefined +``` + +### 5. **Null** + +Represents the intentional absence of any object value. + +```js +let user = null; +console.log(user); // null +``` + +### 6. **BigInt** + +Used for numbers larger than the safe integer limit (`2^53 - 1`). + +```js +let bigNumber = 123456789012345678901234567890n; +``` + +### 7. **Symbol** + +Used for creating unique, immutable identifiers (often used in objects). + +```js +let id = Symbol("id"); +let anotherId = Symbol("id"); +console.log(id === anotherId); // false +``` + +--- + +## Type Checking with `typeof` + +You can check a variable’s type using the `typeof` operator: + +```js +console.log(typeof "Hello"); // string +console.log(typeof 42); // number +console.log(typeof true); // boolean +console.log(typeof undefined); // undefined +console.log(typeof null); // object (a historical JS bug) +console.log(typeof 123n); // bigint +console.log(typeof Symbol()); // symbol +``` + +## 🧠 Summary + +| Feature | Primitive Types | +| ------------- | -------------------------------------------------------- | +| **Stored As** | Value | +| **Mutable** | ❌ No | +| **Copied By** | Value | +| **Examples** | String, Number, Boolean, Undefined, Null, BigInt, Symbol | \ No newline at end of file diff --git a/docs/javascript/data-types/primitive-types/null.mdx b/docs/javascript/data-types/primitive-types/null.mdx index 10d0641..dbb98af 100644 --- a/docs/javascript/data-types/primitive-types/null.mdx +++ b/docs/javascript/data-types/primitive-types/null.mdx @@ -1,11 +1,8 @@ --- -id: null-data-type title: "Null Data Type in JavaScript" sidebar_label: "Null" -sidebar_position: 6 tags: [javascript, data type, primitive type, "null"] description: "Learn about the null data type in JavaScript, how to create null values, and common operations with null values." -hide_table_of_contents: true --- In JavaScript, `null` is a primitive data type that represents the intentional absence of any object value. It is used to indicate that a variable does not have a value or points to no object. The `null` value is a special keyword that is case-sensitive (`null` is not the same as `Null` or `NULL`). diff --git a/docs/javascript/data-types/primitive-types/number.mdx b/docs/javascript/data-types/primitive-types/number.mdx index 88ff5a1..189f7d3 100644 --- a/docs/javascript/data-types/primitive-types/number.mdx +++ b/docs/javascript/data-types/primitive-types/number.mdx @@ -1,11 +1,8 @@ --- -id: number title: Numbers in JavaScript sidebar_label: Number -sidebar_position: 3 tags: [javascript, data type, primitive type, number] description: "Learn about the number data type in JavaScript, how to create number values, and common operations with number values." -hide_table_of_contents: true --- Numbers are a crucial part of any programming language, and JavaScript is no exception. In JavaScript, numbers are used to perform calculations, manipulate data, and handle various operations. This tutorial will walk you through everything you need to know about numbers in JavaScript, from basic concepts to advanced usage. diff --git a/docs/javascript/data-types/primitive-types/string.mdx b/docs/javascript/data-types/primitive-types/string.mdx index 88b7e68..f47074c 100644 --- a/docs/javascript/data-types/primitive-types/string.mdx +++ b/docs/javascript/data-types/primitive-types/string.mdx @@ -1,11 +1,8 @@ --- -id: string title: String Data Type in JavaScript sidebar_label: String -sidebar_position: 1 tags: [javascript, data type, primitive type, string] description: "Learn about the string data type in JavaScript, how to create strings, and common string operations." -hide_table_of_contents: true --- In JavaScript, a string is a sequence of characters enclosed within single or double quotes. Strings are used to represent text data and are one of the primitive data types in JavaScript. @@ -154,7 +151,7 @@ Strings are a fundamental part of JavaScript and are widely used to represent te In this tutorial, you learned about the string data type in JavaScript, how to create strings using single quotes, double quotes, and backticks, and common string operations such as concatenation, interpolation, and string methods. You also explored examples of using string methods to manipulate and work with string data. -Strings are versatile and powerful data types in JavaScript, and mastering string operations will help you build dynamic and interactive web applications. If you want to learn more about JavaScript data types, check out our [JavaScript Data Types](/tutorial/category/data-types) tutorial. +Strings are versatile and powerful data types in JavaScript, and mastering string operations will help you build dynamic and interactive web applications. If you want to learn more about JavaScript data types, check out our [JavaScript Data Types](/tutorial/javascript/data-types/intro) tutorial. ## Conclusion diff --git a/docs/javascript/data-types/primitive-types/symbol.mdx b/docs/javascript/data-types/primitive-types/symbol.mdx index 41f6c75..939100c 100644 --- a/docs/javascript/data-types/primitive-types/symbol.mdx +++ b/docs/javascript/data-types/primitive-types/symbol.mdx @@ -1,11 +1,8 @@ --- -id: symbol title: "Symbol Data Type in JavaScript" sidebar_label: "Symbol" -sidebar_position: 7 tags: [javascript, data type, primitive type, symbol] description: Learn about the symbol data type in JavaScript, how to create symbols, and common operations with symbols. -hide_table_of_contents: true --- In JavaScript, `Symbol` is a primitive data type introduced in ECMAScript 6 (ES6) that represents a unique and immutable value. Symbols are used to create unique identifiers for object properties and are often used as property keys in objects. The `Symbol` type is a special data type that is used to create unique values that are guaranteed to be different from other values. diff --git a/docs/javascript/data-types/primitive-types/undefined.mdx b/docs/javascript/data-types/primitive-types/undefined.mdx index 02dee65..6a7ab50 100644 --- a/docs/javascript/data-types/primitive-types/undefined.mdx +++ b/docs/javascript/data-types/primitive-types/undefined.mdx @@ -1,11 +1,8 @@ --- -id: undefined -title: Undefined Data Type in JavaScript -sidebar_label: Undefined -sidebar_position: 2 +title: "Undefined Data Type in JavaScript" +sidebar_label: "Undefined" tags: [javascript, data type, primitive type, undefined] description: "Learn about the undefined data type in JavaScript, how to create undefined values, and common operations with undefined values." -hide_table_of_contents: true --- In JavaScript, `undefined` is a primitive data type that represents an undefined value. When a variable is declared but not assigned a value, it is automatically assigned the value `undefined`. diff --git a/docs/javascript/introduction-to-javascript/_category_.json b/docs/javascript/introduction-to-javascript/_category_.json deleted file mode 100644 index 6275281..0000000 --- a/docs/javascript/introduction-to-javascript/_category_.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "label": "Introduction to JavaScript", - "position": 1, - "link": { - "type": "generated-index", - "description": "In this tutorial, you'll learn what is JavaScript, history of JavaScript, JavaScript versions, and how to use it to create interactive web experiences." - } -} diff --git a/docs/javascript/introduction-to-javascript/history-of-javascript.mdx b/docs/javascript/introduction-to-javascript/history-of-javascript.mdx index 10d2469..3f1b8e3 100644 --- a/docs/javascript/introduction-to-javascript/history-of-javascript.mdx +++ b/docs/javascript/introduction-to-javascript/history-of-javascript.mdx @@ -1,11 +1,8 @@ --- -id: history-of-javascript title: History of JavaScript sidebar_label: History of JavaScript -sidebar_position: 2 tags: [javascript, introduction to javascript, history of javascript] description: "JavaScript has a rich history that dates back to the early days of the web. Learn about the origins of JavaScript, its evolution, and how it has become one of the most popular programming languages in the world." -hide_table_of_contents: true --- JavaScript, the language that powers the dynamic behavior of websites today, has an interesting history that dates back to the early days of the internet. It was created in just **10 days**, but its impact on the web has been profound and long-lasting. JavaScript has evolved significantly over the years, growing from a simple scripting language to a versatile and powerful programming language that is used by millions of developers worldwide. JavaScript was initially developed by **Brendan Eich** in 1995 while he was working at Netscape Communications Corporation. diff --git a/docs/javascript/introduction-to-javascript/how-to-run-javascript.mdx b/docs/javascript/introduction-to-javascript/how-to-run-javascript.mdx index e4f4545..8a394d3 100644 --- a/docs/javascript/introduction-to-javascript/how-to-run-javascript.mdx +++ b/docs/javascript/introduction-to-javascript/how-to-run-javascript.mdx @@ -1,11 +1,8 @@ --- -id: how-to-run-javascript title: How to Run JavaScript sidebar_label: How to Run JavaScript -sidebar_position: 4 tags: [javascript, introduction to javascript, running javascript] description: "Learn the various ways to run JavaScript, from using the browser console to server-side execution with Node.js. This guide covers different environments and tools for executing JavaScript code effectively." -hide_table_of_contents: true --- JavaScript is a versatile language that can be run in various environments. Whether you're creating interactive web pages, building server-side applications, or scripting automation tasks, JavaScript has you covered. In this chapter, we'll explore different ways to run JavaScript, from your browser to the server and beyond. diff --git a/docs/javascript/introduction-to-javascript/javascript-versions.mdx b/docs/javascript/introduction-to-javascript/javascript-versions.mdx index 788890f..8650539 100644 --- a/docs/javascript/introduction-to-javascript/javascript-versions.mdx +++ b/docs/javascript/introduction-to-javascript/javascript-versions.mdx @@ -1,8 +1,6 @@ --- -id: javascript-versions title: JavaScript Versions sidebar_label: JavaScript Versions -sidebar_position: 3 tags: [ javascript, @@ -19,7 +17,6 @@ tags: es14, ] description: "JavaScript has gone through numerous updates and improvements since its inception in 1995. These updates are officially known as ECMAScript (ES) versions, named after the standard maintained by ECMA International. Understanding these versions and their features is crucial for anyone looking to master JavaScript. Let's explore each significant version of JavaScript, what they introduced, and how they transformed the language." -hide_table_of_contents: true --- JavaScript has gone through numerous updates and improvements since its inception in 1995. These updates are officially known as ECMAScript (ES) versions, named after the standard maintained by ECMA International. Understanding these versions and their features is crucial for anyone looking to master JavaScript. Let's explore each significant version of JavaScript, what they introduced, and how they transformed the language. diff --git a/docs/javascript/introduction-to-javascript/what-is-js.mdx b/docs/javascript/introduction-to-javascript/what-is-js.mdx index 4455322..83ad662 100644 --- a/docs/javascript/introduction-to-javascript/what-is-js.mdx +++ b/docs/javascript/introduction-to-javascript/what-is-js.mdx @@ -1,11 +1,8 @@ --- -id: what-is-javascript -title: What is JavaScript? -sidebar_label: What is JavaScript? -sidebar_position: 1 +title: "What is JavaScript?" +sidebar_label: "What is JavaScript?" tags: [javascript, introduction to javascript, what is javascript] description: "JavaScript is a high-level, interpreted programming language that is widely used for front-end web development. It is a versatile language that can be used for a variety of purposes, including building interactive websites, web applications, and server-side applications." -hide_table_of_contents: true --- JavaScript is a powerful and versatile programming language that is widely used for front-end web development. It is a high-level, interpreted language that can be used to create interactive websites, web applications, and server-side applications. If you've ever interacted with a website—whether it's clicking a button, filling out a form, or watching content update dynamically—JavaScript was likely at work behind the scenes, making it all happen. JavaScript is the "magic" that brings web pages to life, allowing them to respond to user actions and create engaging experiences. diff --git a/docs/react/_category_.json b/docs/react/_category_.json deleted file mode 100644 index 0bb10f5..0000000 --- a/docs/react/_category_.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "label": "React", - "position": 7, - "link": { - "type": "generated-index", - "description": "React is a JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies." - } - } \ No newline at end of file diff --git a/docs/react/advanced-usage/_category_.json b/docs/react/advanced-usage/_category_.json deleted file mode 100644 index 3628975..0000000 --- a/docs/react/advanced-usage/_category_.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "label": "Advanced Usage", - "position": 10, - "link": { - "type": "generated-index", - "description": "5 minutes to learn the most important RoadMap for React Mastery." - } - } \ No newline at end of file diff --git a/docs/react/advanced-usage/advanced-configuration.md b/docs/react/advanced-usage/advanced-configuration.md index 1fb1280..7524b28 100644 --- a/docs/react/advanced-usage/advanced-configuration.md +++ b/docs/react/advanced-usage/advanced-configuration.md @@ -1,12 +1,9 @@ --- -id: advanced-configuration title: Advanced Configuration sidebar_label: Advanced Configuration -sidebar_position: 4 tags: [Create React App, Advanced Configuration, Environment Variables, Webpack, Babel, CRACO, react-scripts, Custom Scripts, Ejectify, Custom Templates] keywords: [create react app, advanced configuration, environment variables, webpack, babel, craco, react-scripts, custom scripts, ejectify, custom templates] description: "Learn how to customize and fine-tune your React projects with advanced configuration options in Create React App. Discover powerful features and alternatives to ejecting that will help you take control of your development environment." -hide_table_of_contents: true --- In Create React App, you have the power to customize various development and production settings using environment variables. These options allow you to control the behavior of your React application without diving into complex configurations. Let's take a closer look at each setting in a handy table format: diff --git a/docs/react/advanced-usage/alternatives-to-ejecting.md b/docs/react/advanced-usage/alternatives-to-ejecting.md index 5f1102e..1d51263 100644 --- a/docs/react/advanced-usage/alternatives-to-ejecting.md +++ b/docs/react/advanced-usage/alternatives-to-ejecting.md @@ -1,11 +1,8 @@ --- -id: alternatives-to-ejecting title: Alternatives to Ejecting sidebar_label: Alternatives to Ejecting -sidebar_position: 5 keywords: [alternatives to ejecting, create react app, react-scripts, craco, custom scripts, package.json, ejectify, custom templates, boilerplates] description: "Learn about alternatives to ejecting from Create React App and how to customize your project without ejecting." -hide_table_of_contents: true --- Create React App (CRA) is an awesome tool that provides a quick and easy way to set up a React project with no build configuration. However, sometimes you might find yourself needing more control over the build process or wanting to add custom configurations. The traditional way to achieve this is by ejecting from Create React App, but it can be a bit intimidating for beginners and can lead to maintenance headaches. Fear not, for there are some fantastic alternatives that will let you customize your project without the need to eject! diff --git a/docs/react/advanced-usage/can-i-use-decorators.md b/docs/react/advanced-usage/can-i-use-decorators.md index bcd4f1b..a314cdc 100644 --- a/docs/react/advanced-usage/can-i-use-decorators.md +++ b/docs/react/advanced-usage/can-i-use-decorators.md @@ -1,11 +1,8 @@ --- -id: can-i-use-decorators title: The Power of Decorators in CRA sidebar_label: Use Decorators -sidebar_position: 2 keywords: [decorators, create react app, decorators in create react app, decorators in react, decorators in javascript, decorators in typescript] description: "Learn how to use decorators in Create React App to enhance and extend the functionality of your components." -hide_table_of_contents: true --- diff --git a/docs/react/advanced-usage/custom-templates.md b/docs/react/advanced-usage/custom-templates.md index e5b0d54..4fa5598 100644 --- a/docs/react/advanced-usage/custom-templates.md +++ b/docs/react/advanced-usage/custom-templates.md @@ -1,11 +1,8 @@ --- -id: custom-templates title: Custom Templates -sidebar_label: Importing a Component -sidebar_position: 1 +sidebar_label: Custom Templates keywords: [create react app, custom templates, custom template, react project, project setup, project configuration, boilerplate, reusable template, npm, npx, cra-template, cra-template-typescript, degit] description: "Learn how to create and use custom templates in Create React App to quickly start new projects with specific configurations, dependencies, and folder structures." -hide_table_of_contents: true --- Custom templates in Create React App (CRA) are pre-configured project setups that allow developers to scaffold new projects with specific configurations, dependencies, and folder structures. They enable you to avoid repetitive manual setup and quickly start your projects with your preferred settings. In this guide, we'll create a custom template that includes a popular UI library, sets up a state management system, and adds some custom scripts for building an engaging React app. diff --git a/docs/react/advanced-usage/pre-rendering-into-static-html-files.md b/docs/react/advanced-usage/pre-rendering-into-static-html-files.md index c01afa6..bfa2e82 100644 --- a/docs/react/advanced-usage/pre-rendering-into-static-html-files.md +++ b/docs/react/advanced-usage/pre-rendering-into-static-html-files.md @@ -1,11 +1,8 @@ --- -id: pre-rendering-into-static-html-files title: Pre-Rendering into Static HTML Files sidebar_label: Pre-Rendering Static HTML -sidebar_position: 3 keywords: [pre-rendering, static html, react pre-rendering, react static html, pre-rendering in react, static html in react, react performance, react seo] description: "Learn how to pre-render your React application into static HTML files to improve performance and SEO." -hide_table_of_contents: true --- If you're hosting your React application using a static hosting provider, you have a fantastic opportunity to enhance its performance and SEO by pre-rendering it into static HTML files. Pre-rendering involves generating HTML pages for each route or link in your application, making them readily available to users even before the JavaScript bundle loads. This seamless process not only improves loading times but also boosts your website's visibility on search engines. diff --git a/docs/react/back-end-integration/_category_.json b/docs/react/back-end-integration/_category_.json deleted file mode 100644 index 4a7b672..0000000 --- a/docs/react/back-end-integration/_category_.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "label": "Back End Integration", - "position": 8, - "link": { - "type": "generated-index", - "description": "5 minutes to learn the most important RoadMap for React Mastery." - } - } \ No newline at end of file diff --git a/docs/react/back-end-integration/fetching-data-with-ajax-requests.md b/docs/react/back-end-integration/fetching-data-with-ajax-requests.md index d94b4c9..93b1048 100644 --- a/docs/react/back-end-integration/fetching-data-with-ajax-requests.md +++ b/docs/react/back-end-integration/fetching-data-with-ajax-requests.md @@ -1,12 +1,9 @@ --- -id: fetching-data-with-ajax-requests title: Fetching Data with AJAX Requests in React sidebar_label: Fetching Data -sidebar_position: 2 tags: [React, AJAX, Data Fetching, API, Asynchronous] keywords: [fetching data in react, ajax requests in react, data fetching in react, react ajax, react fetch, react data fetching, react api] description: "Learn how to fetch data with AJAX requests in a React application using the `fetch()` API and the `axios` library." -hide_table_of_contents: true --- import '../css/style.css'; diff --git a/docs/react/back-end-integration/integrating-with-an-api-backend.md b/docs/react/back-end-integration/integrating-with-an-api-backend.md index 9170365..07ee54c 100644 --- a/docs/react/back-end-integration/integrating-with-an-api-backend.md +++ b/docs/react/back-end-integration/integrating-with-an-api-backend.md @@ -6,7 +6,6 @@ sidebar_position: 3 tags: [React, API, Backend, Integration] keywords: [react, api, backend, integration, axios, fetch, http, request, post, get, put, delete, data fetching, data posting, rest api, restful api, graphql, authentication, authorization, cors, json, xml] description: "Learn how to integrate a React app with an API backend, enabling it to fetch and send data seamlessly." -hide_table_of_contents: true --- diff --git a/docs/react/back-end-integration/proxying-api-requests-in-development.md b/docs/react/back-end-integration/proxying-api-requests-in-development.md index 61fabf7..de5a638 100644 --- a/docs/react/back-end-integration/proxying-api-requests-in-development.md +++ b/docs/react/back-end-integration/proxying-api-requests-in-development.md @@ -1,11 +1,8 @@ --- -id: proxying-api-requests-in-development title: Proxying API Requests in Development sidebar_label: Proxying API Requests -sidebar_position: 1 tags: [React, API, Backend, Integration, Proxy] description: "Learn how to proxy API requests during development in a React app using Create React App, avoiding CORS issues and enabling seamless interaction with your backend server." -hide_table_of_contents: true --- import '../css/style.css' diff --git a/docs/react/back-end-integration/title-and-meta-tags.md b/docs/react/back-end-integration/title-and-meta-tags.md index 261fae7..335a852 100644 --- a/docs/react/back-end-integration/title-and-meta-tags.md +++ b/docs/react/back-end-integration/title-and-meta-tags.md @@ -1,12 +1,9 @@ --- -id: title-and-meta-tags title: "Title and Meta Tags" sidebar_label: "Title & Meta Tags" -sidebar_position: 4 tags: [title, meta, tags, react, create react app, seo, search engine optimization, server, server-side, back-end, integration] keywords: [title, meta, tags, react, create react app, seo, search engine optimization, server, server-side, back-end, integration] description: "Learn how to handle title and meta tags in your Create React App for back-end integration, making your website more appealing and discoverable." -hide_table_of_contents: true --- import '../css/style.css' diff --git a/docs/react/building-your-app/_category_.json b/docs/react/building-your-app/_category_.json deleted file mode 100644 index 898c0f5..0000000 --- a/docs/react/building-your-app/_category_.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "label": "Building Your App", - "position": 6, - "link": { - "type": "generated-index", - "description": "5 minutes to learn the most important RoadMap for React Mastery." - } - } \ No newline at end of file diff --git a/docs/react/building-your-app/adding-a-router.md b/docs/react/building-your-app/adding-a-router.md index 304e9ce..0d80e6a 100644 --- a/docs/react/building-your-app/adding-a-router.md +++ b/docs/react/building-your-app/adding-a-router.md @@ -1,11 +1,8 @@ --- -id: adding-a-router title: Adding a Router -sidebar_position: 8 tags: [react, react router, routing, react app, single-page application, spa, create react app, navigation, links, components] keywords: [react, react router, routing, react app, single-page application, spa, create react app, navigation, links, components] description: "Learn how to add routing capabilities to your React app using React Router, enabling dynamic, multi-page applications without full-page refreshes." -hide_table_of_contents: true --- In the world of web development, creating dynamic and interactive applications is a common requirement. React, being a popular JavaScript library for building user interfaces, provides a powerful way to create single-page applications (SPAs). However, to enhance the user experience and enable navigation between different views or pages within your React app, you need to implement routing. diff --git a/docs/react/building-your-app/adding-bootstrap.md b/docs/react/building-your-app/adding-bootstrap.md index 308387d..42491b1 100644 --- a/docs/react/building-your-app/adding-bootstrap.md +++ b/docs/react/building-your-app/adding-bootstrap.md @@ -1,11 +1,8 @@ --- -id: adding-bootstrap title: Adding Bootstrap -sidebar_position: 4 tags: [react, create react app, bootstrap, css, styling, components, responsive, layout, design, ui, user interface, integration] keywords: [react, create react app, bootstrap, css, styling, components, responsive, layout, design, ui, user interface, integration] description: "Learn how to integrate Bootstrap into your Create React App, unlocking the power of pre-designed components, responsive layouts, and enchanting styles." -hide_table_of_contents: true --- import './style.css' diff --git a/docs/react/building-your-app/adding-custom-environment-variables.md b/docs/react/building-your-app/adding-custom-environment-variables.md index d8d2c16..eeccae3 100644 --- a/docs/react/building-your-app/adding-custom-environment-variables.md +++ b/docs/react/building-your-app/adding-custom-environment-variables.md @@ -1,12 +1,9 @@ --- -id: adding-custom-environment-variables title: Adding Custom Environment Variables sidebar_label: Environment Variables -sidebar_position: 9 tags: [environment, variables, env, custom, create react app, react, react-scripts, node, node.js, npm, start, build, test, production, development, local, dotenv, expand, server, client, runtime, embed, build-time, process, api, key, secret, sensitive, information, security, configuration, settings, dynamic, value, html, css, js, bundle] keywords: [environment, variables, env, custom, create react app, react, react-scripts, node, node.js, npm, start, build, test, production, development, local, dotenv, expand, server, client, runtime, embed, build-time, process, api, key, secret, sensitive, information, security, configuration, settings, dynamic, value, html, css, js, bundle] description: "Learn how to add custom environment variables to your Create React App, empowering your app to configure differently based on the environment in which it runs." -hide_table_of_contents: true --- Welcome, aspiring Coders, to the enchanting world of React development! In this guide, we will explore the magical realm of custom environment variables and how they empower your React applications. diff --git a/docs/react/building-your-app/adding-flow.md b/docs/react/building-your-app/adding-flow.md index 858bde3..3597f92 100644 --- a/docs/react/building-your-app/adding-flow.md +++ b/docs/react/building-your-app/adding-flow.md @@ -1,11 +1,8 @@ --- -id: adding-flow title: Adding Flow -sidebar_position: 5 tags: [flow, create react app, react, static type checker, type safety, bug prevention, typescript alternative, javascript types, type annotations, type inference, type checking, facebook flow, flow integration, flow setup, flow configuration, flow usage] keywords: [flow, create react app, react, static type checker, type safety, bug prevention, typescript alternative, javascript types, type annotations, type inference, type checking, facebook flow, flow integration, flow setup, flow configuration, flow usage] description: "Learn how to add Flow, a static type checker, to your Create React App, empowering your code with type safety and bug prevention." -hide_table_of_contents: true --- Flow, a formidable static type checker, stands ready to protect your code from lurking bugs. Fear not, for we shall guide you on this thrilling journey into the realm of static types in JavaScript. If you are new to this concept, fear not! Delve into this [enchanting introduction](https://medium.com/@preethikasireddy/why-use-static-types-in-javascript-part-1-8382da1e0adb) to discover the power of static types. diff --git a/docs/react/building-your-app/adding-relay.md b/docs/react/building-your-app/adding-relay.md index 5e82339..ac9ffda 100644 --- a/docs/react/building-your-app/adding-relay.md +++ b/docs/react/building-your-app/adding-relay.md @@ -1,10 +1,7 @@ --- -id: adding-relay title: Adding Relay -sidebar_position: 7 tags: [ react, create react app, relay, graphql, data fetching, react-relay, relay environment, relay query, github api, react router, routing ] description: "Learn how to integrate Relay into your Create React App, enabling efficient data fetching and management from a GraphQL server in your React applications." -hide_table_of_contents: true --- Relay is a powerful GraphQL client framework developed by Facebook. It allows you to efficiently fetch and manage data from a GraphQL server in your React applications. Relay optimizes data fetching by batching and coalescing requests, reducing over-fetching and making your app more performant. diff --git a/docs/react/building-your-app/adding-typescript.md b/docs/react/building-your-app/adding-typescript.md index 45ebb56..f962815 100644 --- a/docs/react/building-your-app/adding-typescript.md +++ b/docs/react/building-your-app/adding-typescript.md @@ -1,10 +1,7 @@ --- -id: adding-typescript title: Adding TypeScript -sidebar_position: 6 tags: [react, adding-typescript, typescript] description: "Learn how to add TypeScript to your Create React App project. Enhance your code with type safety and unleash the power of TypeScript in your React applications." -hide_table_of_contents: true --- :::note diff --git a/docs/react/building-your-app/importing-a-component.md b/docs/react/building-your-app/importing-a-component.md index fe2d4e0..43fbe76 100644 --- a/docs/react/building-your-app/importing-a-component.md +++ b/docs/react/building-your-app/importing-a-component.md @@ -1,11 +1,8 @@ --- -id: importing-a-component title: Importing Components in React sidebar_label: Importing a Component -sidebar_position: 2 tags: [react, import, component, importation, import, export, module, file, path, relative, absolute, jsx, javascript, code, code-splitting, dynamic, lazy, suspense, react.lazy, react.suspense, dynamic-import, import, export, module, file, path, relative, absolute, jsx, javascript, code, code-splitting, dynamic, lazy, suspense, react.lazy, react.suspense, dynamic-import] description: "Learn how to import components in your React applications. Unleash the magic of component importation and integrate them into your app with ease!" -hide_table_of_contents: true --- Welcome, brave Code Wizards, to the wondrous world of component importation! In this guide, we shall unravel the secrets of importing components in your React applications, enabling you to summon their powers and weave them into the fabric of your app. diff --git a/docs/react/building-your-app/installing-a-dependency.md b/docs/react/building-your-app/installing-a-dependency.md index c014a48..735b58e 100644 --- a/docs/react/building-your-app/installing-a-dependency.md +++ b/docs/react/building-your-app/installing-a-dependency.md @@ -1,11 +1,8 @@ --- -id: installing-a-dependency title: Installing a Dependency sidebar_label: Dependency -sidebar_position: 1 tags: [react, create react app, npm, dependencies, package, install, installation, node package manager, react-scripts, react-dom, react-icons, react-scripts, react-app, react-app-template] description: "Learn how to install a dependency in your Create React App project. Unleash the power of enchanting packages and add new spells to your React app with the help of npm." -hide_table_of_contents: true --- :::note diff --git a/docs/react/building-your-app/making-a-progressive-web-app.md b/docs/react/building-your-app/making-a-progressive-web-app.md index e77e913..ac72306 100644 --- a/docs/react/building-your-app/making-a-progressive-web-app.md +++ b/docs/react/building-your-app/making-a-progressive-web-app.md @@ -1,12 +1,9 @@ --- -id: making-a-progressive-web-app title: Making a Progressive Web App with Create React App sidebar_label: Making a Progressive Web App -sidebar_position: 10 tags: [react, create react app, progressive web app, pwa, react pwa, create react app pwa, service worker, offline support, caching, web app manifest, responsive design, installable app] keywords: [ create react app, progressive web app, pwa, react pwa, create react app pwa, service worker, offline support, caching, web app manifest, responsive design, installable app ] description: "Learn how to turn your regular React application into a fully-fledged Progressive Web App (PWA) using Create React App." -hide_table_of_contents: true --- Welcome to the exciting world of Progressive Web Apps (PWAs)! In this guide, we'll explore how to turn your regular React application into a fully-fledged PWA using Create React App. diff --git a/docs/react/building-your-app/measuring-performance.md b/docs/react/building-your-app/measuring-performance.md index 889ca39..86756e1 100644 --- a/docs/react/building-your-app/measuring-performance.md +++ b/docs/react/building-your-app/measuring-performance.md @@ -1,11 +1,8 @@ --- -id: measuring-performance title: Measuring Performance in React with Create React App sidebar_label: Measuring Performance -sidebar_position: 11 tags: [react, create react app, performance, measuring performance, web vitals, lighthouse, react devtools, performance profiling] description: "Learn how to measure and optimize the performance of your React app using Create React App. Unleash the power of Web Vitals, Lighthouse, and React DevTools to create a blazing-fast user experience!" -hide_table_of_contents: true --- Create React App comes with a built-in feature to help you measure and analyze your app's performance. It uses something called "Web Vitals," which are helpful metrics that capture how users experience your web page. Let's see how we can use this powerful tool to optimize your app! diff --git a/docs/react/building-your-app/production-build.md b/docs/react/building-your-app/production-build.md index e2ccdd8..5f68969 100644 --- a/docs/react/building-your-app/production-build.md +++ b/docs/react/building-your-app/production-build.md @@ -1,12 +1,9 @@ --- -id: production-build title: Creating a Production Build in Create React App sidebar_label: Production Build -sidebar_position: 12 tags: [react, create react app, production build, react production build, create react app build, react build, production build] keywords: ["react", "create react app", "production build", "react production build", "create react app build", "react build", "production build"] description: "Learn how to create a production build for your React app using Create React App. Optimize your code, reduce file sizes, and enhance performance for your users with this enchanting guide!" -hide_table_of_contents: true --- Welcome, aspiring developers, to the magical world of React production builds! In this enchanting guide, we'll walk you through the process of creating a production build for your Create React App. Brace yourselves for optimized code, faster load times, and an immersive user experience! diff --git a/docs/react/building-your-app/using-global-variables.md b/docs/react/building-your-app/using-global-variables.md index b5baf4a..b7ddd17 100644 --- a/docs/react/building-your-app/using-global-variables.md +++ b/docs/react/building-your-app/using-global-variables.md @@ -1,10 +1,7 @@ --- -id: using-global-variables title: Using Global Variables -sidebar_position: 3 tags: [react, global, variables, global-variables, global-variables-in-react, state-management, react-state, react-context, redux, react-redux, context-api, global-state, global-data, sharing-data, data-sharing] description: "Learn how to use global variables in your React applications. Unleash the magic of global variables and wield their power to share data across your entire app!" -hide_table_of_contents: true --- :::note diff --git a/docs/react/create-react-app.mdx b/docs/react/create-react-app.mdx index 047ed7b..84244e2 100644 --- a/docs/react/create-react-app.mdx +++ b/docs/react/create-react-app.mdx @@ -1,9 +1,6 @@ --- -id: create-react-app title: Create React App -sidebar_position: 1 description: Development and implementation the API of interaction of two sites -hide_table_of_contents: true --- Welcome to the React tutorial series! In this comprehensive guide, we will take you through the fundamentals of React, a popular JavaScript library for building user interfaces. Whether you're a beginner or have some experience with web development, this tutorial will provide you with a solid foundation to start building dynamic and interactive web applications using React. diff --git a/docs/react/deployment/_category_.json b/docs/react/deployment/_category_.json deleted file mode 100644 index 4c6b8fd..0000000 --- a/docs/react/deployment/_category_.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "label": "Deployment", - "position": 9, - "link": { - "type": "generated-index", - "description": "5 minutes to learn the most important RoadMap for React Mastery." - } - } \ No newline at end of file diff --git a/docs/react/deployment/deployment.md b/docs/react/deployment/deployment.md index 78a6465..ffa5629 100644 --- a/docs/react/deployment/deployment.md +++ b/docs/react/deployment/deployment.md @@ -1,11 +1,8 @@ --- -id: deployment title: Deployment in Create React App sidebar_label: Deployment -sidebar_position: 1 tags: [react, create-react-app, deployment, vercel, hosting, deployment-platform, production, build, optimization, deployment-steps, deployment-guide, deployment-process, deployment-platforms, deployment-tutorial, deployment-instructions, deployment-in-react, deployment-in-CRA, deployment-in-Create-React-App, Vercel, Vercel-deployment, Vercel-tutorial, Vercel-guide, Vercel-deployment-guide, Vercel-deployment-tutorial, Vercel-deployment-instructions, Vercel-deployment-process, Vercel-deployment-platform, Vercel-deployment-steps] description: "Learn how to deploy your Create React App to the internet using Vercel. Follow the steps to optimize your app, choose a deployment platform, and deploy your app with Vercel" -hide_table_of_contents: true --- diff --git a/docs/react/development/_category_.json b/docs/react/development/_category_.json deleted file mode 100644 index acef1f4..0000000 --- a/docs/react/development/_category_.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "label": "Development", - "position": 4, - "link": { - "type": "generated-index", - "description": "5 minutes to learn the most important RoadMap for React Mastery." - } - } \ No newline at end of file diff --git a/docs/react/development/analyzing-the-bundle-size.md b/docs/react/development/analyzing-the-bundle-size.md index 260b33f..e4c7b83 100644 --- a/docs/react/development/analyzing-the-bundle-size.md +++ b/docs/react/development/analyzing-the-bundle-size.md @@ -1,10 +1,7 @@ --- -id: analyzing-the-bundle-size title: Analyzing Bundle Size -sidebar_position: 3 tags: [react, create-react-app, source-map-explorer, bundle-size, performance] description: "Learn how to analyze the bundle size of your Create React App project using Source Map Explorer. Identify areas of your codebase that might be bloated and optimize them for better performance." -hide_table_of_contents: true --- If you want to understand where the excess code in your JavaScript bundles is coming from, you can use a helpful tool called Source Map Explorer. In this guide, we'll learn how to add Source Map Explorer to your Create React App project and analyze the bundle size. diff --git a/docs/react/development/developing-components-in-isolation.md b/docs/react/development/developing-components-in-isolation.md index 0ff9a6b..b4cfbb2 100644 --- a/docs/react/development/developing-components-in-isolation.md +++ b/docs/react/development/developing-components-in-isolation.md @@ -1,11 +1,8 @@ --- -id: developing-components-in-issolation title: Developing Components in Isolation sidebar_label: Developing Components -sidebar_position: 2 tags: [react, storybook, react-styleguidist, components, ui, development, isolation, preview, states, storybook-for-react, react-styleguidist] description: "Learn how to develop and preview your React components in isolation from your main app using Storybook or React Styleguidist. Create a convenient way to work on components individually and view all their states." -hide_table_of_contents: true --- In a typical app, you have various UI components, each having multiple states. Let's take a basic button component as an example, which can have the following states: diff --git a/docs/react/development/setting-up-your-editor.md b/docs/react/development/setting-up-your-editor.md index 6800c71..bab21af 100644 --- a/docs/react/development/setting-up-your-editor.md +++ b/docs/react/development/setting-up-your-editor.md @@ -1,11 +1,8 @@ --- -id: setting-up-your-editor title: Setting Up Your Editor sidebar_label: Editor Setup -sidebar_position: 1 tags: [react, create-react-app, editor, syntax-highlighting, linting, debugging, code-formatting, prettier, vscode, webstorm] description: "Learn how to set up your text editor for working with Create React App. Enhance your editing experience and maximize productivity with these tips." -hide_table_of_contents: true --- When working with Create React App, there are several tools you can use to enhance your editing experience and maximize productivity. Let's go through some tips to get your editor set up correctly. diff --git a/docs/react/development/using-https-in-development.md b/docs/react/development/using-https-in-development.md index 965c103..d0fa7d2 100644 --- a/docs/react/development/using-https-in-development.md +++ b/docs/react/development/using-https-in-development.md @@ -1,11 +1,8 @@ --- -id: using-https-in-development title: Using HTTPS in Development sidebar_label: HTTPS in Development -sidebar_position: 4 tags: [react, create-react-app, https, development, environment-variables, ssl, certificate, custom-certificate, environment, npm, package.json, .env, create-react-app, CRA, development-server, HTTPS, SSL, SSL certificate, self-signed certificate, custom SSL certificate, environment variables, HTTPS environment variable, SSL_CRT_FILE, SSL_KEY_FILE, start script, .env file, environment variables, environment variables in Create React App, CRA documentation, custom environment variables] description: "Learn how to serve your Create React App over HTTPS in development. This is useful when you need to send requests to an API server that requires HTTPS, or when you want to test your site using a secure connection." -hide_table_of_contents: true --- When you're developing a website using Create React App (CRA), you might need to serve your pages over HTTPS instead of HTTP. This is especially important if you're using the "proxy" feature to send requests from your development server to an API server that requires HTTPS. diff --git a/docs/react/getting-started/_category_.json b/docs/react/getting-started/_category_.json deleted file mode 100644 index ff4bc5f..0000000 --- a/docs/react/getting-started/_category_.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "label": "Getting Started", - "position": 3, - "link": { - "type": "generated-index", - "description": "Getting Started with React" - } - } \ No newline at end of file diff --git a/docs/react/getting-started/available-scripts.md b/docs/react/getting-started/available-scripts.md index 842aaa4..a11ff8d 100644 --- a/docs/react/getting-started/available-scripts.md +++ b/docs/react/getting-started/available-scripts.md @@ -1,10 +1,7 @@ --- -id: available-scripts title: Available Scripts -sidebar_position: 3 tags: [react, create-react-app, scripts, npm, start, test, build, eject, react-scripts, react-dom, react-app] description: "Learn about the available scripts in a Create React App project. Use these scripts to start, test, build, and eject your app, as well as to run custom scripts." -hide_table_of_contents: true --- In your project directory, you can use the following scripts: diff --git a/docs/react/getting-started/folder-structure.md b/docs/react/getting-started/folder-structure.md index 7e74bbe..5b7ef35 100644 --- a/docs/react/getting-started/folder-structure.md +++ b/docs/react/getting-started/folder-structure.md @@ -1,10 +1,7 @@ --- -id: folder-structure title: Folder Structure -sidebar_position: 2 tags: [react, create-react-app, folder-structure, project-structure, file-structure] description: "Learn how to organize your files and folders in a new React project. This structure will help you keep things tidy and make it easier to build and maintain your site." -hide_table_of_contents: true --- When you create a new project for your website, it's important to organize your files in a specific way. This structure will help you keep things tidy and make it easier to build and maintain your site. diff --git a/docs/react/getting-started/forms-in-react.md b/docs/react/getting-started/forms-in-react.md index 94fe9c8..be581f1 100644 --- a/docs/react/getting-started/forms-in-react.md +++ b/docs/react/getting-started/forms-in-react.md @@ -1,9 +1,7 @@ --- -id: forms-in-react title: Forms in React tags: [react, forms, frontend, web development, tutorial] description: Learn how to handle forms in React comprehensively with examples covering controlled components, uncontrolled components, textarea, select, file input, and more. This extensive guide covers theory, usage, features, examples, best practices, alternatives, and advanced techniques. -hide_table_of_contents: true --- You add a form with React like any other element: diff --git a/docs/react/getting-started/getting-started.md b/docs/react/getting-started/getting-started.md index 128cfea..822e6c2 100644 --- a/docs/react/getting-started/getting-started.md +++ b/docs/react/getting-started/getting-started.md @@ -1,10 +1,7 @@ --- -id: getting-started title: Getting Started with React sidebar_label: Getting Started -sidebar_position: 1 -description: "Learn how to get started with React by creating a new app using Create React App. Follow the steps to set up your development environment and build your first React application." -hide_table_of_contents: true +description: "Learn how to get started with React by creating a new app using Create React App. Follow the steps to set up your development environment and build your first React application." --- import '../css/style.css'; diff --git a/docs/react/getting-started/supported-browsers-features.md b/docs/react/getting-started/supported-browsers-features.md index 810caee..b1e37a2 100644 --- a/docs/react/getting-started/supported-browsers-features.md +++ b/docs/react/getting-started/supported-browsers-features.md @@ -1,10 +1,7 @@ --- -id: supported-browsers-features title: Supported Browsers and Features -sidebar_position: 4 tags: [react, create-react-app, browsers, browser compatibility, polyfills, modern JavaScript, language features, async/await, object rest/spread properties, dynamic import, class fields, static properties, JSX, Flow, TypeScript, browserslist, react-app-polyfill, JavaScript] description: "Learn about the supported browsers and advanced language features in the website project. Understand how to ensure broad browser compatibility and leverage modern JavaScript capabilities." -hide_table_of_contents: true --- When building your website, it is designed to work well with all modern web browsers. This means that visitors using popular browsers like Chrome, Firefox, Safari, and Edge should have a smooth experience without any issues. diff --git a/docs/react/getting-started/updating-to-new-releases.md b/docs/react/getting-started/updating-to-new-releases.md index eaf84fa..676ce5f 100644 --- a/docs/react/getting-started/updating-to-new-releases.md +++ b/docs/react/getting-started/updating-to-new-releases.md @@ -1,10 +1,7 @@ --- -id: updating-to-new-releases title: Updating to New Releases -sidebar_position: 5 tags: [react, create-react, react-scripts, updating, upgrading, migration, changelog, breaking-changes, polyfills, babel-loader, browserslist, package.json, npm, yarn, dependencies, development] description: "Learn how to update an existing Create React App project to a newer version of react-scripts. Keep your project up to date with the latest features and improvements." -hide_table_of_contents: true --- In Create React App, there are two important packages: diff --git a/docs/react/hooks/_category_.json b/docs/react/hooks/_category_.json deleted file mode 100644 index 5714ba1..0000000 --- a/docs/react/hooks/_category_.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "label": "Hooks", - "position": 5, - "link": { - "type": "generated-index", - "description": "5 minutes to learn the most important RoadMap for React Mastery." - } - } \ No newline at end of file diff --git a/docs/react/hooks/useCallback.md b/docs/react/hooks/useCallback.md index 13ffb9d..39a3659 100644 --- a/docs/react/hooks/useCallback.md +++ b/docs/react/hooks/useCallback.md @@ -1,10 +1,7 @@ --- -id: useCallback hook title: useCallback Hook Concept sidebar_label: useCallback Hook -sidebar_position: 5 tags: [react, create-react-app, useCallback, hooks, react-scripts, react-dom, react-app] -hide_table_of_contents: true --- The `useCallback` hook is a built-in React hook that allows you to memoize functions in functional components. It is particularly useful for optimizing performance by preventing unnecessary re-renders of child components that depend on callback functions. diff --git a/docs/react/hooks/useContext.md b/docs/react/hooks/useContext.md index 8f714fa..9539c55 100644 --- a/docs/react/hooks/useContext.md +++ b/docs/react/hooks/useContext.md @@ -1,10 +1,7 @@ --- -id: useContext hook title: useContext Hook Concept sidebar_label: useContext Hook -sidebar_position: 3 tags: [react, create-react-app, useContext, hooks, react-scripts, react-dom, react-app] -hide_table_of_contents: true --- The `useContext` hook is a built-in React hook that allows you to consume context values in functional components. It provides a way to access data from a context provider without having to pass props down through multiple levels of the component tree. diff --git a/docs/react/hooks/useEffect-hook.md b/docs/react/hooks/useEffect-hook.md index c8e798d..8b3bd73 100644 --- a/docs/react/hooks/useEffect-hook.md +++ b/docs/react/hooks/useEffect-hook.md @@ -1,8 +1,6 @@ --- -id: useEffect hook title: useEffect Hook Concept sidebar_label: useEffect Hook -sidebar_position: 2 tags: [react, create-react-app, useEffect, hooks, react-scripts, react-dom, react-app] hide_table_of_contents: true --- diff --git a/docs/react/hooks/useMemo.md b/docs/react/hooks/useMemo.md index 2948633..edb0436 100644 --- a/docs/react/hooks/useMemo.md +++ b/docs/react/hooks/useMemo.md @@ -1,10 +1,7 @@ --- -id: useMemo hook title: useMemo Hook Concept sidebar_label: useMemo Hook -sidebar_position: 6 tags: [react, create-react-app, useMemo, hooks, react-scripts, react-dom, react-app] -hide_table_of_contents: true --- The `useMemo` hook is a built-in React hook that allows you to memoize expensive calculations or computations in functional components. It helps optimize performance by preventing unnecessary recalculations of values that depend on certain inputs. diff --git a/docs/react/hooks/useReducer.md b/docs/react/hooks/useReducer.md index 87d3ae2..9e52973 100644 --- a/docs/react/hooks/useReducer.md +++ b/docs/react/hooks/useReducer.md @@ -1,10 +1,7 @@ --- -id: useReducer hook title: useReducer Hook Concept sidebar_label: useReducer Hook -sidebar_position: 4 tags: [react, create-react-app, useReducer, hooks, react-scripts, react-dom, react-app] -hide_table_of_contents: true --- The `useReducer` hook is a built-in React hook that provides an alternative way to manage state in functional components, especially when dealing with complex state logic or multiple related state variables. diff --git a/docs/react/hooks/useRef.md b/docs/react/hooks/useRef.md index 4b6c96b..e183ca8 100644 --- a/docs/react/hooks/useRef.md +++ b/docs/react/hooks/useRef.md @@ -1,10 +1,7 @@ --- -id: useRef hook title: useRef Hook Concept sidebar_label: useRef Hook -sidebar_position: 7 tags: [react, create-react-app, useRef, hooks, react-scripts, react-dom, react-app] -hide_table_of_contents: true --- The `useRef` hook is a built-in React hook that allows you to create mutable references to DOM elements or any other value that persists across renders in functional components. diff --git a/docs/react/hooks/useState-hook.md b/docs/react/hooks/useState-hook.md index 76e3db4..d3a062b 100644 --- a/docs/react/hooks/useState-hook.md +++ b/docs/react/hooks/useState-hook.md @@ -1,10 +1,7 @@ --- -id: useState hook title: useState Hook Concept sidebar_label: useState Hook -sidebar_position: 1 tags: [react, create-react-app, useState, hooks, react-scripts, react-dom, react-app] -hide_table_of_contents: true --- The `useState` hook is a built-in React hook that allows functional components to manage state. It provides a way to add stateful logic to functional components, enabling them to hold and update data over time. diff --git a/docs/react/react-intro.mdx b/docs/react/react-intro.mdx index 01f2895..6301c2f 100644 --- a/docs/react/react-intro.mdx +++ b/docs/react/react-intro.mdx @@ -1,10 +1,7 @@ --- -id: react-intro title: Welcome to React -sidebar_position: 2 -description: Development and implementation the API of interaction of two sites +description: "Development and implementation the API of interaction of two sites" tags: [React, JavaScript library, User interfaces, Virtual DOM, Declarative syntax, UI components, Web development, Front-end, Single-page applications, Performance optimization, State management, Component-based architecture, JavaScript framework] -hide_table_of_contents: true --- React is a JavaScript library for building user interfaces. It allows you to create reusable UI components and efficiently update and render them as the data changes. With its virtual DOM and declarative syntax, React makes it easier to build interactive and performant web applications. diff --git a/docs/react/styles-and-assets/_category_.json b/docs/react/styles-and-assets/_category_.json deleted file mode 100644 index 922cf02..0000000 --- a/docs/react/styles-and-assets/_category_.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "label": "Styles and Assets", - "position": 5, - "link": { - "type": "generated-index", - "description": "5 minutes to learn the most important RoadMap for React Mastery." - } - } \ No newline at end of file diff --git a/docs/react/styles-and-assets/adding-a-css-modules-stylesheet.md b/docs/react/styles-and-assets/adding-a-css-modules-stylesheet.md index 28d1367..ccebb96 100644 --- a/docs/react/styles-and-assets/adding-a-css-modules-stylesheet.md +++ b/docs/react/styles-and-assets/adding-a-css-modules-stylesheet.md @@ -1,11 +1,8 @@ --- -id: adding-a-css-modules-stylesheet title: Adding A CSS Modules Stylesheet sidebar_label: CSS Modules Stylesheet -sidebar_position: 2 tags: [react, create-react-app, css-modules, css, stylesheet, styling, react-scripts, react-dom, react-app] description: "Learn how to add a CSS Modules stylesheet to your Create React App project. Use scoped styling and prevent naming clashes by automatically generating unique class names for your styles." -hide_table_of_contents: true --- import '../css/style.css' diff --git a/docs/react/styles-and-assets/adding-a-sass-stylesheet.md b/docs/react/styles-and-assets/adding-a-sass-stylesheet.md index 0638c8f..ce3c17e 100644 --- a/docs/react/styles-and-assets/adding-a-sass-stylesheet.md +++ b/docs/react/styles-and-assets/adding-a-sass-stylesheet.md @@ -1,11 +1,8 @@ --- -id: adding-a-sass-stylesheet title: Adding A Sass Stylesheet sidebar_label: Sass Stylesheet -sidebar_position: 3 tags: [react, create-react-app, sass, stylesheet] description: "Learn how to add a Sass stylesheet to your Create React App project. Use the power of Sass to write cleaner and more maintainable styles for your React components." -hide_table_of_contents: true --- :::caution warn diff --git a/docs/react/styles-and-assets/adding-a-stylesheet.md b/docs/react/styles-and-assets/adding-a-stylesheet.md index f53120b..857d91d 100644 --- a/docs/react/styles-and-assets/adding-a-stylesheet.md +++ b/docs/react/styles-and-assets/adding-a-stylesheet.md @@ -1,11 +1,8 @@ --- -id: adding-a-stylesheet title: Adding A Stylesheet sidebar_label: Stylesheet -sidebar_position: 1 tags: [react, create-react-app, css, stylesheet, styling, react-scripts, react-dom, react-app] description: "Learn how to add a stylesheet to your Create React App project. Style your components and make them visually appealing with CSS." -hide_table_of_contents: true --- In this guide, we will explore how to add a stylesheet to your React application created with Create React App. Cascading Style Sheets (CSS) allow you to style your components and make them visually appealing. We'll walk through the process step by step, making it easy for beginners to understand. diff --git a/docs/react/styles-and-assets/adding-css-reset.md b/docs/react/styles-and-assets/adding-css-reset.md index 34af7b6..5667a8f 100644 --- a/docs/react/styles-and-assets/adding-css-reset.md +++ b/docs/react/styles-and-assets/adding-css-reset.md @@ -1,11 +1,8 @@ --- -id: adding-css-reset title: Adding A CSS Reset sidebar_label: CSS Reset -sidebar_position: 4 tags: [react, create-react-app, css, stylesheet, styling, react-scripts, react-dom, react-app] description: "Learn how to add a CSS reset to your Create React App project using PostCSS Normalize. Ensure consistent styling across different browsers by providing a solid foundation for your React components." -hide_table_of_contents: true --- This tutorial will guide you on adding a CSS reset to your React project using [PostCSS Normalize], which provides a solid foundation for consistent styling across different browsers. diff --git a/docs/react/styles-and-assets/adding-images-fonts-and-files.md b/docs/react/styles-and-assets/adding-images-fonts-and-files.md index 15e8e4c..654e382 100644 --- a/docs/react/styles-and-assets/adding-images-fonts-and-files.md +++ b/docs/react/styles-and-assets/adding-images-fonts-and-files.md @@ -1,11 +1,8 @@ --- -id: adding-images-fonts-and-files title: Adding Images, Fonts, and Files in a React App sidebar_label: Images Fonts and Files -sidebar_position: 6 tags: [react, create-react-app, images, fonts, files, assets, react-scripts, react-dom, react-app] description: "Learn how to work with images, fonts, and files in a React application. Manage and utilize these assets effectively to create visually appealing and interactive web experiences." -hide_table_of_contents: true --- In this guide, we'll explore how to work with images, fonts, and files in a React application. These assets are essential for creating visually appealing and interactive web experiences. We'll cover everything you need to know to manage and utilize these assets effectively. diff --git a/docs/react/styles-and-assets/code-splitting.md b/docs/react/styles-and-assets/code-splitting.md index a5ccdb1..76ad022 100644 --- a/docs/react/styles-and-assets/code-splitting.md +++ b/docs/react/styles-and-assets/code-splitting.md @@ -1,11 +1,8 @@ --- -id: code-splitting title: Code Splitting sidebar_label: Code Splitting -sidebar_position: 9 tags: [react, performance, optimization, code-splitting, lazy-loading, suspense, react-lazy] description: "Learn how to optimize your React application's performance by code splitting. Split your code into smaller chunks and load them only when needed, resulting in faster load times and improved user experiences." -hide_table_of_contents: true --- import React, { lazy, Suspense } from 'react'; diff --git a/docs/react/styles-and-assets/loading-graphql-files.md b/docs/react/styles-and-assets/loading-graphql-files.md index 3df77e7..9e73e1e 100644 --- a/docs/react/styles-and-assets/loading-graphql-files.md +++ b/docs/react/styles-and-assets/loading-graphql-files.md @@ -1,11 +1,8 @@ --- -id: loading-graphql-files title: How to Load GraphQL Files in React sidebar_label: Loading GraphQL Files -sidebar_position: 7 tags: [react, create-react-app, graphql, apollo-client, graphql-code-generator, react-apollo, react-apollo-hooks] description: "Learn how to load GraphQL files in a Create React App project. Use Apollo Client or GraphQL Code Generator to fetch data from your GraphQL server and simplify your React application development." -hide_table_of_contents: true --- GraphQL is a powerful query language for APIs that allows you to efficiently request only the data you need from your server. If you are using GraphQL in your React application created with Create React App, you might wonder how to load your GraphQL files effectively. diff --git a/docs/react/styles-and-assets/post-processing-css.md b/docs/react/styles-and-assets/post-processing-css.md index 96d253c..0ff84a3 100644 --- a/docs/react/styles-and-assets/post-processing-css.md +++ b/docs/react/styles-and-assets/post-processing-css.md @@ -1,11 +1,8 @@ --- -id: post-processing-css title: Post Processing CSS sidebar_label: Post Processing CSS -sidebar_position: 5 tags: [react, create-react-app, css, stylesheet, styling, react-scripts, react-dom, react-app] description: "Learn how to leverage post-processing CSS in Create React App to enhance your stylesheets and ensure cross-browser compatibility. Automatically add vendor prefixes, embrace new CSS features, and more." -hide_table_of_contents: true --- import '../css/style.css' diff --git a/docs/react/styles-and-assets/using-the-public-folder.md b/docs/react/styles-and-assets/using-the-public-folder.md index 58fca6d..4070199 100644 --- a/docs/react/styles-and-assets/using-the-public-folder.md +++ b/docs/react/styles-and-assets/using-the-public-folder.md @@ -1,11 +1,8 @@ --- -id: using-the-public-folder title: Unleash the Magic of the Public Folder sidebar_label: Using the Public Folder -sidebar_position: 8 tags: [react, create-react-app, public-folder, assets, react-scripts, react-dom, react-app] description: "Learn how to use the public folder in a Create React App project. Customize the HTML file and add assets directly to the public folder to enhance your React application." -hide_table_of_contents: true --- :::tip info diff --git a/docs/react/support/troubleshooting.md b/docs/react/support/troubleshooting.md index daf08bc..a107897 100644 --- a/docs/react/support/troubleshooting.md +++ b/docs/react/support/troubleshooting.md @@ -1,11 +1,8 @@ --- -id: troubleshooting title: Troubleshooting sidebar_label: Troubleshooting -sidebar_position: 1 tags: [react, troubleshooting, create-react-app, react-app, reactjs, react-app-issues, react-app-errors] description: "Learn how to troubleshoot common issues and errors in Create React App. This guide provides detailed solutions and tips to help you overcome problems and get back to coding with confidence!" -hide_table_of_contents: true --- Welcome to the troubleshooting guide for Create React App! If you're new to React or web development, fear not! We'll walk you through common issues with plenty of fun details and tips to get you back on track in no time. Let's dive in! diff --git a/docs/react/testing/_category_.json b/docs/react/testing/_category_.json deleted file mode 100644 index f6e609a..0000000 --- a/docs/react/testing/_category_.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "label": "Testing", - "position": 7, - "link": { - "type": "generated-index", - "description": "5 minutes to learn the most important RoadMap for React Mastery." - } - } \ No newline at end of file diff --git a/docs/react/testing/debugging-tests.md b/docs/react/testing/debugging-tests.md index 4d0d8b4..2d6a278 100644 --- a/docs/react/testing/debugging-tests.md +++ b/docs/react/testing/debugging-tests.md @@ -1,10 +1,7 @@ --- -id: debugging-tests title: Debugging Tests in Create React App sidebar_label: Debugging Tests -sidebar_position: 2 description: "Learn how to debug tests in React applications using Chrome DevTools and Visual Studio Code. Uncover the mysteries of debugging and defeat the Bug Monsters in your test code" -hide_table_of_contents: true --- Welcome to the exciting world of debugging tests in React applications! Debugging can be both an adventure and a puzzle, where you play the role of a code detective, hunting down bugs and solving mysteries in your test code. Fear not, for we will be your trusty sidekick, guiding you through the process step by step, making it interactive and fun! diff --git a/docs/react/testing/running-tests.md b/docs/react/testing/running-tests.md index 9b7d80f..f158040 100644 --- a/docs/react/testing/running-tests.md +++ b/docs/react/testing/running-tests.md @@ -1,11 +1,8 @@ --- -id: running-tests title: Running Tests in Create React App sidebar_label: Running Tests -sidebar_position: 1 tags: [react, testing, jest, create-react-app, react-scripts] description: "Learn how to run tests in a Create React App project using Jest. Explore the basics of testing and discover the joy of catching bugs early!" -hide_table_of_contents: true --- Welcome to the world of testing in Create React App! Testing is a crucial aspect of building robust and bug-free applications. In this guide, we will explore how to run tests effectively in a Create React App environment, with a focus on simplicity and fun! diff --git a/docusaurus.config.js b/docusaurus.config.js index 1135ec2..d5fefbc 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -37,7 +37,7 @@ const config = { // debug: true, docs: { routeBasePath: "/", - sidebarPath: "./sidebars.js", + sidebarPath: "./sidebars.ts", editUrl: "https://github.com/codeharborhub/tutorial/edit/main/", remarkPlugins: [remarkMath], rehypePlugins: [rehypeKatex], @@ -138,13 +138,12 @@ const config = {
HTML - CSS - JavaScript + CSS + JavaScript + Git + GitHub React - TypeScript - Python - Tailwind - Next + Cyber Security
`, }, diff --git a/sidebars.ts b/sidebars.ts new file mode 100644 index 0000000..8751282 --- /dev/null +++ b/sidebars.ts @@ -0,0 +1,859 @@ +/** + * Copyright (c) Ajay Dhangar + * + * This file defines the sidebar configuration for the CodeHarborHub Tutorials Docs. + * Each category represents a tutorial topic like HTML, CSS, JavaScript, React, Git, GitHub, and Cybersecurity. + * + * Licensed under the MIT License. + */ + +import type { SidebarsConfig } from "@docusaurus/plugin-content-docs"; + +const sidebars: SidebarsConfig = { + tutorial: [ + "index", + // HTML Tutorial Structure + { + type: "category", + label: "HTML", + link: { + type: "generated-index", + title: "HTML Tutorials", + description: "Master HTML from basic syntax to advanced web concepts.", + image: "/icons/html-5.svg", + }, + collapsed: true, + items: [ + "html/intro-html", + "html/setup-environment", + "html/how-html-works", + + { + type: "category", + label: "HTML Basics", + link: { + type: "generated-index", + title: "HTML Basics", + description: + "Learn the foundational concepts of HTML syntax, structure, and elements.", + }, + items: [ + "html/html-basics/syntax-and-structure", + "html/html-basics/elements-and-tags", + "html/html-basics/attributes-and-values", + "html/html-basics/document-structure", + ], + }, + + { + type: "category", + label: "Forms", + link: { + type: "generated-index", + title: "HTML Forms", + description: + "Understand how to create and manage forms in HTML for collecting user input.", + }, + items: [ + "html/forms/form-input-element", + "html/forms/form-attribute", + "html/forms/building-form", + ], + }, + + { + type: "category", + label: "Images", + link: { + type: "generated-index", + title: "HTML Images", + description: + "Learn how to insert, format, and optimize images in your web pages.", + }, + items: [ + "html/images/inserting-images", + "html/images/image-attributes", + "html/images/image-formats-and-optimization", + ], + }, + + { + type: "category", + label: "Links & Anchors", + link: { + type: "generated-index", + title: "HTML Links and Anchors", + description: + "Explore how hyperlinks work in HTML and how to connect pages effectively.", + }, + items: [ + "html/links-and-anchors/creating-hyperlinks", + "html/links-and-anchors/link-attributes", + ], + }, + + { + type: "category", + label: "Lists", + link: { + type: "generated-index", + title: "HTML Lists", + description: + "Learn how to create ordered, unordered, and definition lists in HTML.", + }, + items: [ + "html/lists/list-intro", + "html/lists/ordered-lists", + "html/lists/unordered-lists", + "html/lists/definition-lists", + ], + }, + + { + type: "category", + label: "Tables", + link: { + type: "generated-index", + title: "HTML Tables", + description: + "Discover how to organize and structure data using HTML tables.", + }, + items: [ + "html/tables/html-tables", + "html/tables/creating-tables", + "html/tables/table-structure", + "html/tables/table-attributes", + ], + }, + + { + type: "category", + label: "Text Formatting", + link: { + type: "generated-index", + title: "HTML Text Formatting", + description: + "Style and format text using HTML tags like headings, paragraphs, and spans.", + }, + items: [ + "html/text-formatting/headings", + "html/text-formatting/paragraphs", + "html/text-formatting/text-formatting", + ], + }, + + { + type: "category", + label: "Semantic HTML", + link: { + type: "generated-index", + title: "Semantic HTML", + description: + "Learn how semantic elements improve accessibility and SEO.", + }, + items: [ + "html/semantic-html/understanding-semantic-html", + "html/semantic-html/semantic-html5-elements", + "html/semantic-html/benefits-of-semantic-html", + ], + }, + + { + type: "category", + label: "Multimedia", + link: { + type: "generated-index", + title: "HTML Multimedia", + description: + "Add and control multimedia content like audio and video in your web pages.", + }, + items: [ + "html/multimedia/adding-audio-and-video", + "html/multimedia/embedding-multimedia-content", + "html/multimedia/multimedia-attributes-and-controls", + ], + }, + + { + type: "category", + label: "HTML5 APIs", + link: { + type: "generated-index", + title: "HTML5 APIs", + description: + "Explore advanced HTML5 APIs like Canvas, Geolocation, and Storage.", + }, + items: [ + "html/html5-apis/canvas-and-svg-graphics", + "html/html5-apis/geolocation-api", + "html/html5-apis/local-storage-and-session-storage", + ], + }, + + { + type: "category", + label: "Responsive Web Design", + link: { + type: "generated-index", + title: "Responsive Web Design", + description: + "Learn how to make your websites adaptable across devices.", + }, + items: [ + "html/responsive-web-design/introduction-to-responsive-design", + "html/responsive-web-design/media-queries-and-breakpoints", + "html/responsive-web-design/flexbox-and-grid-layout", + ], + }, + + { + type: "category", + label: "HTML Validation & Debugging", + link: { + type: "generated-index", + title: "HTML Validation and Debugging", + description: + "Understand how to validate and debug HTML code effectively.", + }, + items: [ + "html/html-validation-and-debugging/importance-of-validating-html-code", + "html/html-validation-and-debugging/using-w3c-validator", + "html/html-validation-and-debugging/common-html-errors-and-fixes", + ], + }, + + // { + // type: "category", + // label: "Best Practices & Optimization", + // link: { + // type: "generated-index", + // title: "HTML Best Practices", + // description: + // "Follow best practices for writing clean, efficient, and accessible HTML.", + // }, + // items: ["html/best-practices-and-optimization"], + // }, + + { + type: "category", + label: "Next Steps & Resources", + link: { + type: "generated-index", + title: "Next Steps and Resources", + description: + "Continue your learning journey with advanced topics and community resources.", + }, + items: [ + "html/next-steps-and-resources/advanced-html-topics", + "html/next-steps-and-resources/further-learning-resources", + "html/next-steps-and-resources/community-support", + ], + }, + ], + }, + + // CSS Tutorial Structure + + { + type: "link", + label: "CSS", + href: "/css/introduction/what-is-css", + }, + + // JavaScript Tutorial Structure + + { + type: "link", + label: "JavaScript", + href: "/javascript/introduction-to-javascript/what-is-js", + }, + + // Git Tutorial Structure + + { + type: "link", + label: "Git", + href: "/git/introduction", + }, + + // GitHub Tutorial Structure + + { + type: "link", + label: "GitHub", + href: "/github/introduction-to-github", + }, + + // React Tutorial Structure + { + type: "category", + label: "React", + link: { type: "doc", id: "react/react-intro" }, + collapsed: true, + items: [ + "react/create-react-app", + { + type: "category", + label: "Getting Started", + link: { + type: "generated-index", + title: "React Basics", + description: + "Learn the fundamentals of React, including setup, folder structure, forms, and supported browsers. Start building your first React applications with guided instructions.", + }, + items: [ + "react/getting-started/getting-started", + "react/getting-started/available-scripts", + "react/getting-started/folder-structure", + "react/getting-started/forms-in-react", + "react/getting-started/supported-browsers-features", + "react/getting-started/updating-to-new-releases", + ], + }, + { + type: "category", + label: "Building Your App", + link: { + type: "generated-index", + title: "Building Your React App", + description: + "Explore advanced app setup including routing, dependencies, environment variables, progressive web apps, and performance measurement in React.", + }, + items: [ + "react/building-your-app/adding-a-router", + "react/building-your-app/adding-bootstrap", + "react/building-your-app/adding-custom-environment-variables", + "react/building-your-app/adding-flow", + "react/building-your-app/adding-relay", + "react/building-your-app/adding-typescript", + "react/building-your-app/importing-a-component", + "react/building-your-app/installing-a-dependency", + "react/building-your-app/making-a-progressive-web-app", + "react/building-your-app/measuring-performance", + "react/building-your-app/production-build", + "react/building-your-app/using-global-variables", + ], + }, + { + type: "category", + label: "Development", + link: { + type: "generated-index", + title: "Development Tips", + description: + "Learn how to develop React components efficiently, analyze bundle sizes, set up your editor, and use HTTPS in development.", + }, + items: [ + "react/development/analyzing-the-bundle-size", + "react/development/developing-components-in-isolation", + "react/development/setting-up-your-editor", + "react/development/using-https-in-development", + ], + }, + { + type: "category", + label: "Hooks", + link: { + type: "generated-index", + title: "React Hooks", + description: + "Understand and use React hooks such as useState, useEffect, useReducer, useContext, useRef, useMemo, and useCallback to manage state and lifecycle events.", + }, + items: [ + "react/hooks/useState-hook", + "react/hooks/useEffect-hook", + "react/hooks/useReducer", + "react/hooks/useContext", + "react/hooks/useRef", + "react/hooks/useMemo", + "react/hooks/useCallback", + ], + }, + { + type: "category", + label: "Styles & Assets", + link: { + type: "generated-index", + title: "React Styles & Assets", + description: + "Learn how to add styles, images, fonts, CSS modules, SASS, reset styles, code splitting, and handle public folder assets in React.", + }, + items: [ + "react/styles-and-assets/adding-a-stylesheet", + "react/styles-and-assets/adding-a-css-modules-stylesheet", + "react/styles-and-assets/adding-a-sass-stylesheet", + "react/styles-and-assets/adding-css-reset", + "react/styles-and-assets/adding-images-fonts-and-files", + "react/styles-and-assets/code-splitting", + "react/styles-and-assets/loading-graphql-files", + "react/styles-and-assets/post-processing-css", + "react/styles-and-assets/using-the-public-folder", + ], + }, + { + type: "category", + label: "Advanced Usage", + link: { + type: "generated-index", + title: "Advanced React Usage", + description: + "Explore advanced configurations, alternatives to ejecting, decorators, custom templates, and pre-rendering React apps into static HTML.", + }, + items: [ + "react/advanced-usage/advanced-configuration", + "react/advanced-usage/alternatives-to-ejecting", + "react/advanced-usage/can-i-use-decorators", + "react/advanced-usage/custom-templates", + "react/advanced-usage/pre-rendering-into-static-html-files", + ], + }, + { + type: "category", + label: "Back-End Integration", + link: { + type: "generated-index", + title: "Integrating React with Back-End", + description: + "Learn how to fetch data, integrate with APIs, proxy requests in development, and manage title and meta tags for dynamic web apps.", + }, + items: [ + "react/back-end-integration/fetching-data-with-ajax-requests", + "react/back-end-integration/integrating-with-an-api-backend", + "react/back-end-integration/proxying-api-requests-in-development", + "react/back-end-integration/title-and-meta-tags", + ], + }, + { + type: "category", + label: "Testing", + link: { + type: "generated-index", + title: "Testing React Applications", + description: + "Understand how to debug tests and run them effectively in your React applications.", + }, + items: [ + "react/testing/debugging-tests", + "react/testing/running-tests", + ], + }, + { + type: "category", + label: "Support", + link: { + type: "generated-index", + title: "React Support", + description: + "Troubleshooting common React issues and finding solutions for a smoother development experience.", + }, + items: ["react/support/troubleshooting"], + }, + ], + }, + + // Cybersecurity Tutorial Structure + + { + type: "link", + label: "Cybersecurity", + href: "/cybersecurity/", + }, + + ], + + css: [ + { + type: "category", + label: "Introduction to CSS", + link: { + type: "doc", + id: "css/introduction/what-is-css", + }, + items: [ + "css/introduction/what-is-css", + "css/introduction/how-to-add-css-to-html", + "css/introduction/comments-in-css", + ], + }, + + { + type: "category", + label: "Selectors", + link: { + type: "doc", + id: "css/selectors/attribute-selectors", + }, + items: [ + { + type: "category", + label: "Simple Selectors", + items: [ + "css/selectors/simple-selectors/element-selector", + "css/selectors/simple-selectors/class-selector", + "css/selectors/simple-selectors/id-selector", + "css/selectors/simple-selectors/grouping-selectors", + "css/selectors/simple-selectors/universal-selector", + ], + }, + { + type: "category", + label: "Combinator Selectors", + items: [ + "css/selectors/combinator-selectors/descendant-selector", + "css/selectors/combinator-selectors/child-selector", + "css/selectors/combinator-selectors/adjacent-sibling-selector", + "css/selectors/combinator-selectors/general-sibling-selector", + ], + }, + "css/selectors/attribute-selectors", + "css/selectors/compound-selectors", + "css/selectors/pseudo-class-selectors", + "css/selectors/pseudo-elements-selectors", + ], + }, + + { + type: "category", + label: "Colors", + link: { + type: "doc", + id: "css/colors/color-names", + }, + items: [ + "css/colors/color-names", + "css/colors/rgb", + "css/colors/rgba", + "css/colors/hex", + "css/colors/hsl", + "css/colors/hsla", + ], + }, + + { + type: "category", + label: "Box Model", + link: { + type: "doc", + id: "css/box-model/intro", + }, + items: [ + "css/box-model/intro", + "css/box-model/width-height", + "css/box-model/min-width-height", + "css/box-model/max-width-height", + "css/box-model/margin", + "css/box-model/margin-callapse", + "css/box-model/padding", + "css/box-model/border", + "css/box-model/border-radius", + "css/box-model/box-sizing", + ], + }, + + { + type: "category", + label: "Backgrounds", + link: { + type: "doc", + id: "css/backgrounds/background-color", + }, + items: [ + "css/backgrounds/background-color", + { + type: "category", + label: "Background Image", + items: [ + "css/backgrounds/background-image/background-attachment", + "css/backgrounds/background-image/background-position", + "css/backgrounds/background-image/background-repeat", + "css/backgrounds/background-image/background-size", + ], + }, + ], + }, + + { + type: "category", + label: "Fonts and Text Properties", + link: { + type: "doc", + id: "css/fonts-and-text-properties/font-size", + }, + items: [ + "css/fonts-and-text-properties/font-size", + "css/fonts-and-text-properties/font-style", + "css/fonts-and-text-properties/font-weight", + "css/fonts-and-text-properties/font-align", + "css/fonts-and-text-properties/generic-vs-specific-font-families", + ], + }, + + "css/opacity", + ], + + javascript: [ + { + type: "category", + label: "Introduction to JavaScript", + link: { + type: "doc", + id: "javascript/introduction-to-javascript/what-is-js", + }, + items: [ + "javascript/introduction-to-javascript/what-is-js", + "javascript/introduction-to-javascript/history-of-javascript", + "javascript/introduction-to-javascript/javascript-versions", + "javascript/introduction-to-javascript/how-to-run-javascript", + ], + }, + + { + type: "category", + label: "All About Variables", + link: { + type: "doc", + id: "javascript/all-about-variables/variable-declarations", + }, + items: [ + "javascript/all-about-variables/variable-declarations", + "javascript/all-about-variables/variable-naming-rules", + "javascript/all-about-variables/variable-scopes", + "javascript/all-about-variables/hoisting", + ], + }, + + { + type: "category", + label: "Data Types", + link: { + type: "doc", + id: "javascript/data-types/intro", + }, + items: [ + "javascript/data-types/intro", + + { + type: "category", + label: "Primitive Types", + link: { + type: "doc", + id: "javascript/data-types/primitive-types/intro", + }, + items: [ + "javascript/data-types/primitive-types/number", + "javascript/data-types/primitive-types/string", + "javascript/data-types/primitive-types/boolean", + "javascript/data-types/primitive-types/null", + "javascript/data-types/primitive-types/undefined", + "javascript/data-types/primitive-types/symbol", + "javascript/data-types/primitive-types/bigint", + ], + }, + { + type: "category", + label: "Non-Primitive Types", + link: { + type: "doc", + id: "javascript/data-types/non-primitive-types/object/intro", + }, + items: [ + "javascript/data-types/non-primitive-types/object/intro", + "javascript/data-types/non-primitive-types/object/creating-objects", + ], + }, + ], + }, + ], + + git: [ + "git/introduction", + { + type: "category", + label: "Basics", + link: { + type: "generated-index", + title: "Git Basics", + description: + "Learn the foundational Git concepts and commands for version control.", + keywords: ["git", "basics", "version control", "commands"], + }, + items: ["git/basics", "git/roadmap"], + }, + { + type: "category", + label: "Working with Repositories", + link: { + type: "generated-index", + title: "Repositories & Branching", + description: + "Understand branching, merging, remotes, and undo operations in Git.", + keywords: ["git", "branching", "merge", "remotes", "undo"], + }, + items: ["git/branching-merging", "git/remotes", "git/undo"], + }, + { + type: "category", + label: "Advanced Git", + link: { + type: "generated-index", + title: "Advanced Git", + description: + "Explore advanced Git workflows, commands, and best practices.", + keywords: ["git", "advanced", "workflow", "best practices"], + }, + items: ["git/advanced"], + }, + "git/quiz", + ], + + github: [ + "github/introduction-to-github", + { + type: "category", + label: "Getting Started with GitHub", + link: { + type: "generated-index", + title: "Getting Started with GitHub", + description: + "Learn how to set up your GitHub account, create repositories, and start collaborating with ease.", + keywords: ["github", "getting started", "setup", "repository"], + image: "/img/github.png", + }, + collapsed: false, + items: [ + "github/create-a-github-account", + "github/create-a-new-repository", + "github/clone-a-repository", + "github/create-a-branch", + "github/make-changes-to-a-file", + "github/commit-changes", + "github/push-changes-to-github", + "github/create-a-pull-request", + "github/merge-a-pull-request", + ], + }, + { + type: "category", + label: "Collaboration & Workflow", + link: { + type: "generated-index", + title: "Collaboration and Workflow", + description: + "Master collaboration with pull requests, branches, and contribution guidelines to work efficiently with teams.", + keywords: ["github", "collaboration", "workflow", "pull request"], + image: "/img/github-collaboration.png", + }, + items: [ + "github/collaboration", + "github/projects", + "github/open-source", + "github/best-practices", + ], + }, + { + type: "category", + label: "Automation & Integrations", + link: { + type: "generated-index", + title: "Automation and Integrations", + description: + "Automate workflows, integrate tools, and secure your repositories using GitHub Actions and integrations.", + keywords: ["github actions", "automation", "integrations", "security"], + image: "/img/github-actions.png", + }, + items: [ + "github/github-actions", + "github/integrations", + "github/security", + ], + }, + { + type: "category", + label: "Personalization", + link: { + type: "generated-index", + title: "Personalizing Your GitHub Profile", + description: + "Customize your GitHub profile and make it stand out with README files, pinned projects, and contributions.", + keywords: ["github profile", "personalization", "readme"], + image: "/img/github-profile.png", + }, + items: ["github/profile"], + }, + ], + + cybersecurity: [ + "cybersecurity/index", + "cybersecurity/introduction-to-cybersecurity", + + { + type: "category", + label: "Core Concepts", + link: { + type: "generated-index", + title: "Cybersecurity Core Concepts", + description: + "Explore the essential foundations of cybersecurity, including threat types, security principles, network defense, encryption, and ethical hacking. This section helps you understand how to protect systems, networks, and data from digital attacks through practical knowledge, best practices, and real-world projects.", + }, + items: [ + "cybersecurity/network-security-basics", + "cybersecurity/types-of-cyberattacks", + "cybersecurity/cryptography-and-encryption", + "cybersecurity/web-application-security", + "cybersecurity/ethical-hacking-basics", + "cybersecurity/ethical-hacking-and-cyber-defense", + "cybersecurity/dark-web", + "cybersecurity/incident-response", + ], + }, + + { + type: "category", + label: "Best Practices & Career", + link: { + type: "generated-index", + title: "Best Practices and Certifications", + description: + "Learn the industry-recommended best practices to secure systems and networks effectively, and explore professional cybersecurity certifications that validate your skills and knowledge. This section provides guidance on implementing security standards, risk management, and preparing for certification exams.", + }, + items: [ + "cybersecurity/best-practices", + "cybersecurity/certification-guide", + ], + }, + + // { + // type: 'category', + // label: 'Cybersecurity Tools', + // link: { type: 'doc', id: 'cybersecurity/cybersecurity-tools' }, + // items: [], + // }, + + // { + // type: 'category', + // label: 'Hands-on Projects', + // link: { type: 'generated-index', title: 'Cybersecurity Projects & Labs' }, + // items: [ + // 'cybersecurity/projects/setup-lab-environment', + // 'cybersecurity/projects/sql-injection-demo', + // 'cybersecurity/projects/password-cracking-lab', + // 'cybersecurity/projects/network-sniffing-lab', + // 'cybersecurity/projects/penetration-testing-lab', + // ], + // }, + + // { + // type: 'category', + // label: 'Resources', + // link: { type: 'generated-index', title: 'Cybersecurity Learning Resources' }, + // items: [ + // 'cybersecurity/resources/glossary', + // 'cybersecurity/resources/books-and-courses', + // 'cybersecurity/resources/tools-list', + // 'cybersecurity/resources/links', + // ], + // }, + ], +}; + +export default sidebars; diff --git a/static/icons/cyber-security.png b/static/icons/cyber-security.png new file mode 100644 index 0000000..e4c28d2 Binary files /dev/null and b/static/icons/cyber-security.png differ