diff --git a/public/introduction-to-javascript.jpg b/public/introduction-to-javascript.jpg new file mode 100644 index 0000000..a9d5484 Binary files /dev/null and b/public/introduction-to-javascript.jpg differ diff --git a/public/javascript-dom.jpg b/public/javascript-dom.jpg new file mode 100644 index 0000000..5f50853 Binary files /dev/null and b/public/javascript-dom.jpg differ diff --git a/public/javascript-functions.jpg b/public/javascript-functions.jpg new file mode 100644 index 0000000..aa12272 Binary files /dev/null and b/public/javascript-functions.jpg differ diff --git a/public/javascript-history.jpg b/public/javascript-history.jpg new file mode 100644 index 0000000..85874e0 Binary files /dev/null and b/public/javascript-history.jpg differ diff --git a/src/app/gen-thumbnail/page.tsx b/src/app/gen-thumbnail/page.tsx index 4320ff8..f25d3e4 100644 --- a/src/app/gen-thumbnail/page.tsx +++ b/src/app/gen-thumbnail/page.tsx @@ -6,8 +6,8 @@ function RenderThumbnail() {
-

Web Development

-

Resources

+

Introduction to JavaScript

+

JavaScript Guides

CA Resources

diff --git a/src/app/guides/[slug]/page.tsx b/src/app/guides/[slug]/page.tsx index e2608a9..853d704 100644 --- a/src/app/guides/[slug]/page.tsx +++ b/src/app/guides/[slug]/page.tsx @@ -80,7 +80,7 @@ export default async function Page({ params }: { params: { slug: string } }) { return ( <>
- {guide.modTitle} + {guide.title}

{guide.readingTime}

{MDXContent && ( @@ -90,8 +90,8 @@ export default async function Page({ params }: { params: { slug: string } }) { /> )} ) diff --git a/src/app/guides/[slug]/slug.css b/src/app/guides/[slug]/slug.css index 6844259..2f6a76d 100644 --- a/src/app/guides/[slug]/slug.css +++ b/src/app/guides/[slug]/slug.css @@ -164,6 +164,7 @@ h1 code, h2 code, h3 code, h4 code { + @apply font-semibold; font-size: inherit; } diff --git a/src/components/shared/guides-paths.tsx b/src/components/shared/guides-paths.tsx index 28f0ba0..326c3f1 100644 --- a/src/components/shared/guides-paths.tsx +++ b/src/components/shared/guides-paths.tsx @@ -15,8 +15,8 @@ function GuidestPaths({ category }: { category: string }) { return ( <> {allGuides - .filter((g) => g?.category && g.category.trim() === category.trim()) // Ensure g?.category is defined - .sort((a, b) => a.title.localeCompare(b.title)) + .filter((g) => g?.category && g.category.trim() === category.trim()) + // .sort((a, b) => a.modTitle.localeCompare(b.modTitle)) .map((p, i: number) => { const isActive = pathname === `/guides/${p._raw.flattenedPath}` return ( @@ -29,7 +29,7 @@ function GuidestPaths({ category }: { category: string }) { currentPath(isActive) )} > - {p.title} + {p.modTitle}
) diff --git a/src/components/shared/sheet-links.tsx b/src/components/shared/sheet-links.tsx index 4c94dbb..f2fc52e 100644 --- a/src/components/shared/sheet-links.tsx +++ b/src/components/shared/sheet-links.tsx @@ -18,7 +18,7 @@ const SheetLinks: React.FC = ({ const guides = category ? allGuides.filter((guide) => guide?.category?.trim() === category) : allGuides const links = isGuide - ? guides.map((guide) => ({ slug: guide._raw.flattenedPath, title: guide.title })) + ? guides.map((guide) => ({ slug: guide._raw.flattenedPath, title: guide.modTitle })) : paths // * getHref: A function to get the href of the link. @@ -40,7 +40,7 @@ const SheetLinks: React.FC = ({

{header}

{links.length > 0 ? links - .sort((a, b) => getTitle(a).localeCompare(getTitle(b))) + // .sort((a, b) => getTitle(a).localeCompare(getTitle(b))) .map((item, i) => { const isActive = pathname === getHref(item) diff --git a/src/guides-pages/audio-and-video.mdx b/src/guides-pages/audio-and-video.mdx index 1b9e467..3611b72 100644 --- a/src/guides-pages/audio-and-video.mdx +++ b/src/guides-pages/audio-and-video.mdx @@ -1,10 +1,10 @@ --- -title: Audio and Video -modTitle: Integrating Audio and Video +title: Integrating Audio and Video +modTitle: Audio and Video description: Integrating audio and video in HTML5 allows embedding media files directly into web pages for native playback. thumbnail: audio-and-video.jpg category: html -readingTime: 6–7 MIN READ +readingTime: 6–7 MINS READ ---
@@ -17,7 +17,7 @@ readingTime: 6–7 MIN READ 1. Making audio files work with older browsers.
-### HTML div Element +### HTML `
` Element - The `
` tag defines a division or a section in an HTML document. - The `
` tag is used as a container for HTML elements which is then styled with CSS or manipulated with JavaScript. - The `
` tag is easily styled by using the class or id attribute. @@ -25,13 +25,13 @@ readingTime: 6–7 MIN READ - By default, browsers always place a line break before and after the `
` element.
-### HTML span Element +### HTML `` Element - The `` tag is an inline container used to mark up a part of a text, or a part of a document. - The `` tag is easily styled by CSS or manipulated with JavaScript using the class or id attribute. - The `` tag is much like the `
` element, but `
` is a block-level element and `` is an inline element.
-### HTML div and span pairs +### HTML `
` and `` pairs ```HTML {17, 19, 31} showLineNumbers @@ -93,18 +93,16 @@ readingTime: 6–7 MIN READ
### Common HTML Video formats - | Format | File Extension | Description | |------------|--------------------|------------------------------------------------------------------------------------------------------| | MPEG | `.mpg` | Developed by the Moving Pictures Expert Group. The first popular video format on the web. | -| OGG | `.ogg` | Theora Ogg. Developed by the Xiph.org Foundaion. | +| OGG | `.ogg` | Theora Ogg. Developed by the Xiph.org Foundation. | | WEBM | `.webm` | Developed by Mozilla, Opera, Adobe, and Google. | | MP4 | `.mp4` | Commonly used in video cameras and TV hardware. Supported by all browsers and recommended by YouTube.| -
-### Autoplay attribute +### `autoplay` attribute - The **autoplay** attribute is used to specify that the video should start playing when a web page is loaded. ```HTML {2} showLineNumbers @@ -116,7 +114,7 @@ readingTime: 6–7 MIN READ ```
-### Muted attribute +### `muted` attribute - The **muted** attribute on a media element mutes the audio or video player. With the use of muted attributes, the video can be played, but without a sound. ```HTML {2} showLineNumbers @@ -128,9 +126,9 @@ readingTime: 6–7 MIN READ ```
-### Poster attribute +### `poster` attribute - The **poster** attribute specifies an image to be shown while the video is downloading, or until the user hits the play button. If this is not included, the first frame of the video will be used instead. -```HTML {2} showLineNUmbers +```HTML {2} showLineNumbers
-### Loop attribute +### `loop` attribute - The **loop** attribute will make the audio file play over and over again. ```HTML {2} showLineNumbers @@ -169,20 +165,17 @@ readingTime: 6–7 MIN READ
### Common HTML Audio formats - | Format | File Extension | Description | |------------|--------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------| | WAV | `.wav` | Developed by IBM and Microsoft. Plays well on Windows, Macintosh, and Linux operating systems. | | OGG | `.ogg` | Developed by the Xiph.org Foundaion. | | MP3 | `.mp3` | MP3 files are actually the sound part of MPEG files. MP3 is the most popular format for music players. Combines good compression (small files) with high quality.| | MP4 | `.mp4` | MP4 is a video format, but can also be used for audio. | -
## Summary Table - | Elements | Definition | |-----------------------------------|--------------------------------------------------------------------------------------------| | [`
`](#html-div-element) | Defines a block-level division or section in an HTML document. | @@ -190,12 +183,10 @@ readingTime: 6–7 MIN READ | [`
- | Attributes | Definition | |----------------------------------|-------------------------------------------------------------------------------------| | [`controls`](#html-video) | Adds video controls like play, pause, and volume. | @@ -203,10 +194,9 @@ readingTime: 6–7 MIN READ | [`muted`](#muted-attribute) | Mutes the audio or video by default. | | [`poster`](#poster-attribute) | Displays an image while the video is downloading or until the user hits play button.| | [`loop`](#loop-attribute) | Will make the audio file play over and over again. | -
### Credits This webpage was created based on lessons provided by **Rose Anne G. Cochanco** as part of Web Development subject. -
\ No newline at end of file +
diff --git a/src/guides-pages/form.mdx b/src/guides-pages/form.mdx index 5e3a07e..a5581c7 100644 --- a/src/guides-pages/form.mdx +++ b/src/guides-pages/form.mdx @@ -1,10 +1,10 @@ --- -title: Form -modTitle: HTML Form +title: HTML Form +modTitle: Form description: An HTML form is used to collect user input. The user input is most often sent to a server for processing. thumbnail: form.jpg category: html -readingTime: 15–19 MIN READ +readingTime: 15–19 MINS READ ---
@@ -36,12 +36,12 @@ HTML **forms** are a fundamental part of web development, enabling user interact ### HTML Form attributes - The **action attribute** defines the action to be performed when the form is submitted. - The **method attribute** specifies the HTTP method to be used when submitting the form data. -- The form-data can be sent as URL variables (with `method="get"`) or as HTTP post transaction (with `method="post"`). +- The form-data can be sent as URL variables (with `method="get"`) or as HTTP POST transaction (with `method="post"`).
### HTML Form Elements The HTML `
` element can contain one or more of the following form elements. -
+ - `` - `` - `` @@ -58,7 +58,7 @@ The HTML `
` element can contain one or more of the following form e - The `` element defines a label for several form elements. - The `` element is useful for screenreader users. - The **for** attribute of the `
-### Input types text and password +### Input types `text` and `password` - `` defines a one-line text input field. - `` defines a password field. The characters in a password field are masked (shown as asterisks or circles). ```HTML {3, 5} showLineNumbers @@ -87,7 +87,7 @@ The HTML `
` element can contain one or more of the following form e ```
-### Input types submit, reset and button +### Input types `submit`, `reset` and `button` - `` defines a button for submitting form data to a form handler - `` defines a reset button that will reset all form values to their default values - `` defines a programmable button @@ -104,7 +104,7 @@ The HTML `
` element can contain one or more of the following form e ```
-### Input types radio and checkbox +### Input types `radio` and `checkbox` - `` defines a radio button. A radio button lets a user select only one of a limited number of choices. - `` defines a checkbox. Checkboxes lets users select zero or more options of a limited number of choices. ```HTML {3-4, 6-9} showLineNumbers @@ -121,7 +121,7 @@ The HTML `
` element can contain one or more of the following form e ```
-### Input types email, number and date +### Input types `email`, `number` and `date` - `` is used for input fields that should contain an email address. - `` is used for input fields that should contain a date. - `` defines a numeric input field. @@ -139,7 +139,7 @@ The HTML `
` element can contain one or more of the following form e ```
-### Input types range, tel +### Input types `range` and `tel` - `` defines a control for entering a number whose exact value is not important (slider control). Default range is 0 to 100. - `` is used for input fields that should contain a telephone number. ```HTML {3, 5-11} showLineNumbers @@ -159,11 +159,12 @@ The HTML `
` element can contain one or more of the following form e ```
-### Input types url, time and file +### Input types `url`, `time` and `file` - `` is used for input fields that should contain a URL address. - `` allows the user to select a time. - `` allows the user to choose a file from their device or computer’s storage. -> Adding the `multiple` attribute to `` allows users to select more than one file. +> Adding the `multiple` attribute to `` allows users to select more than one file from their device or computer's storage. +> > **Example**: `` ```HTML {3, 5, 7} showLineNumbers
@@ -181,7 +182,7 @@ The HTML `
` element can contain one or more of the following form e
## Input Attributes -### value, readonly and disabled +### `value`, `readonly` and `disabled` - The **value** attribute specifies the initial value for an input field. - The **readonly** attribute specifies that the input field is read only (cannot be changed) - The **disabled** attribute specifies that the input field is disabled. A disabled input field is unusable and unclickable, and its value will not be sent when submitting a form. @@ -197,7 +198,7 @@ The HTML `
` element can contain one or more of the following form e ```
-### The size and maxlength +### The `size` and `maxlength` - The **size** attribute specifies the size (in characters) for the input field. - The **maxlength** attribute specifies the maximum allowed length for the input field. With a maxlength attribute, the input field will not accept more than the allowed number of characters. ```HTML {5, 7} showLineNumbers @@ -214,7 +215,7 @@ The HTML `
` element can contain one or more of the following form e ```
-### The min, max and step +### The `min`, `max` and `step` - The **min** and **max** attributes specify the minimum and maximum values for an `` element. - The **step** attribute specifies the legal number of intervals for an `` element. ```HTML {3} showLineNumbers @@ -227,7 +228,7 @@ The HTML `
` element can contain one or more of the following form e ```
-### The placeholder, required and autofocus +### The `placeholder`, `required` and `autofocus` - The **placeholder** attribute specifies a hint describing an input field’s expected value. The hint is displayed in the field before the user enters a value. - The **required** attribute specifies that an input field must be filled out before submitting the form. - The **autofocus** attribute specifies that an input field should automatically get focus when the page loads. @@ -240,7 +241,7 @@ The HTML `
` element can contain one or more of the following form e ```
-### The pattern and title +### The `pattern` and `title` - The **pattern** attribute specifies a regular expression that the input element’s value is checked against. - The **title** attribute is used to describe the pattern to the user. ```HTML {3} showLineNumbers @@ -253,7 +254,7 @@ The HTML `
` element can contain one or more of the following form e ```
-### The select and option elements +### The `select` and `option` elements - The `` element defines a drop-down list. - The `` element defines an option that can be selected. - Use the **selected** attribute to the `
-### The datalist element +### The `datalist` element - The `` tag specifies a list of pre-defined options for an `` element. - The `` tag is used to provide an "autocomplete" feature for `` elements. Users will see a drop-down list of pre-defined options as they input data. - The `` element‘s **id** attribute must be equal to the `` element‘s **list** attribute (this binds them together). @@ -287,7 +288,7 @@ The HTML `
` element can contain one or more of the following form e ```
-### The textarea element +### The `textarea` element - The `` element defines a multi-line input field. - This element is often used in a form, to collect user inputs like comments or reviews. - The **rows** attribute specifies the visible number of lines in a text area. @@ -300,7 +301,7 @@ The HTML `
` element can contain one or more of the following form e ```
-### The fieldset and legend element +### The `fieldset` and `legend` element - The `
` element is used to group related data in a form. - The `` elements defines a caption for `
` element. ```HTML {2-3, 9} showLineNumbers @@ -317,7 +318,7 @@ The HTML `
` element can contain one or more of the following form e ```
-### The button element +### The `button` element - The `` element is used to create a clickable button. - The `` element can be used to trigger custom JavaScript functions. ```HTML showLineNumbers @@ -347,7 +348,7 @@ The HTML `
` element can contain one or more of the following form e | Attributes | Definition | |------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------| -| [`action`](#html-form-attributes) | Defines the action to be performeed when the form is submitted. | +| [`action`](#html-form-attributes) | Defines the action to be performed when the form is submitted. | | [`method`](#html-form-attributes) | Specifies the HTTP method used when submitting the form data. (`GET` or `POST`) | | [`for`](#the-label-element) | Use in label tag that should be equal to `id` attribute of the `` element to bind them together.| | [`type`](#the-input-element) | Specifies the type of input element to display. | @@ -362,7 +363,7 @@ The HTML `
` element can contain one or more of the following form e | [`step`](#the-min-max-and-step) | Specifies the legal number of intervals for an `` element. | | [`placeholder`](#the-placeholder-required-and-autofocus) | Specifies a hint describing an input field’s expected value. | | [`required`](#the-placeholder-required-and-autofocus) | Specifies that an input field must be filled out before submitting the form. | -| [`autofocus`](#the-placeholder-required-and-autofocus) | Specifes that an input field should automatically should focus when the page loads. | +| [`autofocus`](#the-placeholder-required-and-autofocus) | Specifies that an input field should automatically should focus when the page loads. | | [`pattern`](#the-pattern-and-title) | Specifies a regular expression that the input element’s value is checked against. | | [`title`](#the-pattern-and-title) | Use to describe the pattern to the user. | | [`selected`](#the-select-option-elements) | Use to the `
-| Types | Definition | -|-------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------| +| Types | Definition | +|-------------------------------------------------|--------------------------------------------------------------------------------------------------------| | [`text`](#input-types-text-and-password) | Defines a one-line text input field. | | [`password`](#input-types-text-and-password) | Defines a password field. The characters in password field are masked (shown as asterisk or circles). | | [`submit`](#input-types-submit-reset-and-button)| Defines a button for submitting form data to a form handler. | @@ -397,4 +398,4 @@ The HTML `
` element can contain one or more of the following form e This webpage was created based on lessons provided by **Rose Anne G. Cochanco** as part of Web Development subject. The form example is sourced from shadcn/ui. -
\ No newline at end of file +
diff --git a/src/guides-pages/hyperlinks.mdx b/src/guides-pages/hyperlinks.mdx index e03703d..eea54a9 100644 --- a/src/guides-pages/hyperlinks.mdx +++ b/src/guides-pages/hyperlinks.mdx @@ -1,10 +1,10 @@ --- -title: Hyperlinks -modTitle: Inserting Hyperlinks +title: Inserting Hyperlinks +modTitle: Hyperlinks description: HTML Hyperlink is a word, phrase or image that a user can click on to jump to a new document or a new section within the current document. thumbnail: hyperlinks.jpg category: html -readingTime: 5–6 MIN READ +readingTime: 5–6 MINS READ ---
@@ -49,9 +49,9 @@ readingTime: 5–6 MIN READ
### HTML Link colors - By default, links will appear as follows in all browsers. - - An **Unvisited link** is underlined and **blue** - - A **Visited link** is underlined and **purple** - - An **Active link** is underlined and **red** + - An **unvisited link** is underlined and **blue** + - A **visited link** is underlined and **purple** + - An **active link** is underlined and **red**
### `target` attribute @@ -72,7 +72,6 @@ readingTime: 5–6 MIN READ
## Link Image -
### Use Image as a Links - Images can also be used as links, just put the `` element inside the `` and `` tags. - The **title** attribute specifies extra information about an element. @@ -90,7 +89,6 @@ readingTime: 5–6 MIN READ
## Link Bookmarks -
### Bookmark Hyperlinks - HTML **bookmarks** are used to allow readers to jump to specific parts of a web page. - Bookmarks can be useful if a web page is very long. @@ -98,8 +96,7 @@ readingTime: 5–6 MIN READ
## Navigation Menu -
-- Enhance the look and functionality of your website by styling your HTML lists into a sleek horizontal or navigation menu. With a few CSS declaration, your website can become more user-friendly and visually appealing. +- Enhance the look and functionality of your website by styling your HTML lists into a sleek horizontal or navigation menu. With a few CSS declarations, your website can become more user-friendly and visually appealing. - The **padding** element is used to create space around an element’s content, inside of any defined borders.
@@ -123,7 +120,7 @@ readingTime: 5–6 MIN READ - The **overflow** property specifies what should happen if content overflows an element’s box. - This property specifies whether to **clip** content or to add **scrollbars** when an element’s content is too big to fit in a specified area. - The value for overflow property can be **visible**, **scroll**, **auto**, **hidden**, **clip**. -> **Note**: The overflow property only works for block elements with a specified height. +> **Note**: The `overflow` property only works for block elements with a specified height. ```HTML {7} showLineNumbers