My Web Development Work
1. Difference Between JS, CSS, and HTML:
○ HTML: The structure and content of a webpage.
○ CSS: The styling and visual design of the content.
○ JavaScript (JS): Adds interactive and dynamic features.
2. What is <p>?
○ Defines a paragraph of text.
3. What is <b>?
○ Makes text bold.
4. What are <h1> to <h6>?
○ <h1>: Main heading, most important.
○ <h2>: Major subsections.
○ <h3>: Subsections under <h2>.
○ <h4>: Subsections under <h3>.
○ <h5>: Subsections under <h4>.
○ <h6>: Smallest subsection, under <h5>.
5. Chrome Developer Tools:
○ A set of tools built into Google Chrome for inspecting and debugging web pages.
Key features include:
■ Elements Panel: Modify HTML and CSS in real-time.
■ Console: Test and debug JavaScript.
■ Network Panel: Monitor network activity.
■ Performance Panel: Diagnose performance issues.
■ Sources Panel: Debug JavaScript code.
6. HTML Skeleton:
○ The basic structure of an HTML document, which includes:
■ <!DOCTYPE html>: Declares the document type.
■ <html>: The root element of the document.
■ <head>: Contains metadata, links to stylesheets, and the title of the
document.
■ <title>: Sets the title displayed in the browser tab.
■ <body>: Contains the content of the webpage, such as headings,
paragraphs, images, and links.
7. Two Types of Lists:
○ Ordered List (<ol>): A list with items in a specific sequence, numbered
automatically by the browser.
○ Unordered List (<ul>): A list where the order of items does not matter, typically
marked with bullet points.
8. Nested Lists:
○ Definition: A list within another list. Both ordered and unordered lists can be
nested to create hierarchical structures.
○ Usage: Nested lists are useful for representing hierarchical data or breaking
down complex lists into more manageable parts.
9. Anchor Tags (<a>):
○ Definition: The anchor tag is used to create hyperlinks, which allow users to
navigate to other pages, sections within the same page, or external websites.
○ Attributes:
■ href: Specifies the URL or the link destination.
■ target: Defines where to open the linked document (e.g., _blank to
open in a new tab).
○ Usage: Anchor tags are crucial for website navigation, enabling users to move
between different resources and pages.
10. Images in HTML (<img>):
○ Definition: The <img> tag is used to embed images in a webpage.
○ Attributes:
■ src: Specifies the path to the image file.
■ alt: Provides alternative text for the image if it cannot be displayed
(important for accessibility and SEO).
■ width and height: Set the dimensions of the image.
○ Usage: Images enhance the visual appeal and information delivery on a
webpage.
11. <div> and <span> Tags:
○ <div>:
■ A block-level element used to group content together, often for styling or
layout purposes. It takes up the full width available.
■ Usage: Commonly used for creating sections, containers, or layouts on a
webpage.
○ <span>:
■ An inline element used to style or manipulate a specific portion of text or
content within a block-level element.
■ Usage: Useful for applying styles or scripts to a part of the text without
breaking the flow of the content.
12. Line Breaks (<br>) and Horizontal Rules (<hr>):
○ <br>:
■ Inserts a line break, moving the content following it to a new line.
■ Usage: Used when you want text or content to start on a new line without
creating a new paragraph.
○ <hr>:
■ Creates a horizontal line (or "rule") across the page, often used to
separate sections of content.
■ Usage: Useful for visually dividing content or indicating a thematic shift.
13. Superscript (<sup>) and Subscript (<sub>) Tags:
○ <sup>:
■ Renders text as superscript, which appears slightly above the normal text
line. Commonly used for exponents (e.g., x<sup>2</sup> for x²).
○ <sub>:
■ Renders text as subscript, which appears slightly below the normal text
line. Commonly used for chemical formulas (e.g., H<sub>2</sub>O for
H₂O).
14. Entity Codes:
○ Definition: Entity codes (or HTML entities) are special codes used to display
characters that have special meanings in HTML (like <, >, &, etc.) or to display
characters not easily typed on a keyboard.
○ Examples:
■ < for < (less than).
■ > for > (greater than).
■ & for & (ampersand).
■ for a non-breaking space.
■ © for © (copyright symbol).
○ Usage: Entity codes are essential when you need to include symbols that might
otherwise be interpreted as HTML code or are not available on a standard
keyboard.