HTML Examples and What They Do

• <h1> – <h6> → Headings, where <h1> is the largest and most important, <h6> the smallest.
• <p> → Paragraphs of text.
• <a href=""> → Links to other pages or websites.
• <img src=""> → Images (needs a file path and alt text).
• <video> → Embeds a video player into the page.
• <audio> → Adds audio/sound playback.
• <ul>/<ol> and <li> → Lists (unordered with bullets, ordered list with numbers).
• <header> → Top part of a page (logo, navigation, hero image).
• <main> → The main content of the page.
• <footer> → Bottom part of a page (credits, copyright, contact info).
• <section> → Groups related content into blocks.
• <div> → General container for grouping and styling elements.
• <nav> → Navigation menus or links.
• <input> → Input fields (text, checkbox, radio, etc.).
• <button> → Clickable button.
• <svg> → Vector graphics, often used for icons.
• <br> → Line break inside text.
• <strong>/<em> → Bold text (<strong>) or italic/emphasized text (<em>).

CSS Examples and What They Do

• color → Changes the text color.
• background-color → Sets the background color of an element.
• background-image → Adds an image as a background.
• font-family → Changes the font type of text.
• font-size → Sets the size of text.
• margin → Creates space outside an element.
• padding → Creates space inside an element.
• border → Adds a border around an element.
• border-radius → Rounds the corners of an element.
• width / height → Sets the size of elements.
• position → Controls how elements are placed (static, relative, absolute, fixed).
• top / left / right / bottom → Positions elements when using relative or absolute positioning.
• opacity → Makes an element partially transparent.
• text-align → Aligns text inside an element (left, center, right).
• line-height → Adjusts the spacing between lines of text.
• overflow → Controls what happens when content is too big for an element (hidden, scroll, visible).
• hover → Adds styles when the user hovers over an element.
• transition → Smoothly animates changes in styles.
• media queries → Applies different styles based on screen size (responsive design).

Flexbox CSS Properties

• display: flex → Turns a container into a flex container to arrange child items in rows or columns.
• flex-direction → Sets the direction of flex items (row, column, row-reverse, column-reverse).
• justify-content → Aligns flex items horizontally (flex-start, center, flex-end, space-between, space-around).
• align-items → Aligns flex items vertically (flex-start, center, flex-end, stretch, baseline).
• flex-wrap → Allows flex items to wrap onto multiple lines (nowrap, wrap, wrap-reverse).
• gap → Adds spacing between flex items.
• align-self → Overrides vertical alignment for a single flex item.
• order → Changes the visual order of flex items without changing the HTML.