HTML
Structural Elements
• <html> - Root element of the document
• <head> - Contains metadata and links to external resources
• <body> - Contains the visible content of the webpage
• <header> - Defines the header section
• <nav> - Defines the navigation menu
• <main> - Contains the main content of the page
• <section> - Defines different sections (e.g., hero, projects, contact)
• <article> - Represents independent content
• <aside> - Sidebar section
• <footer> - Defines the footer section
• <div> - General container for structuring content
Text and Formatting Elements
• <h1> - Main heading
• <h2> - Section headings
• <h3> - Subheadings
• <h4> - Smaller subheadings
• <p> - Paragraph for textual content
• <span> - Inline text container
List Elements
• <ul> - Unordered list
• <li> - List items
Forms and Inputs
• <form> - Defines a form
• <input> - Input fields (text, email, number, etc.)
• <label> - Labels for form fields
• <select> - Dropdown menu
• <option> - Options within a dropdown
• <textarea> - Multi-line text input
• <button> - Clickable button
Links and Media
• <a> - Anchor tag for navigation and external links
• <img> - Displays images
Icons and External Resources
• <i> - Used for Font Awesome icons
• <link> - Includes an external CSS file
• <script> - Loads JavaScript files
Miscellaneous Elements
• <hr> - Horizontal rule (divider)
• <meta> - Metadata for the document
• <code> - Displays code snippets
CSS
1. Box Model & Spacing
• margin: 0 auto; → Centers an element horizontally.
• margin-bottom: 20px; → Adds space below an element.
• padding: 2rem; → Adds internal spacing inside an element.
• border: 4px solid var(--lighting-color); → Adds a solid border with a dynamic color.
• border-radius: 0.5rem; → Rounds the corners of an element.
• box-sizing: border-box; → Ensures width and height include padding and border.
2. Layout & Positioning
• display: flex; → Enables flexbox layout.
• display: grid; → Enables grid layout.
• justify-content: center; → Centers items horizontally in a flex container.
• align-items: center; → Aligns items vertically in a flex container.
• flex-direction: column; → Aligns flex items vertically.
• position: sticky; → Keeps an element fixed at the top while scrolling.
• top: 0; → Positions an element at the top (used with position: sticky;).
• z-index: 100; → Controls the stacking order of overlapping elements.
• overflow: hidden; → Hides content that overflows the element’s box.
• white-space: nowrap; → Prevents text from wrapping to the next line.
• grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); → Defines a responsive grid layout.
• gap: 2rem; → Adds space between grid or flex items.
3. Typography
• font-size: 1.8rem; → Sets text size relative to root font size.
• font-weight: bold; → Makes the text bold.
• font-family: 'Roboto', sans-serif; → Defines the font type.
• line-height: 1.5; → Adjusts spacing between lines of text.
• letter-spacing: 1px; → Increases space between characters.
• text-align: center; → Centers text horizontally.
• text-transform: uppercase; → Converts text to uppercase.
• text-decoration: none; → Removes underlines from links.
4. Colors & Backgrounds
• background-color: #000; → Sets a black background.
• color: white; → Sets text color to white.
• background-image: url('image.jpg'); → Applies an image as a background.
• background-size: cover; → Ensures the background image covers the entire container.
• background-repeat: no-repeat; → Prevents background image repetition.
• background-attachment: fixed; → Keeps the background fixed when scrolling.
5. Borders & Shadows
• border-bottom: 4px solid var(--lighting-color); → Adds a bottom border with dynamic color.
• box-shadow: 5px 5px 5px rgba(1, 1, 1, 0.05); → Creates a subtle shadow effect.
6. Buttons & Inputs
• cursor: pointer; → Changes the cursor to a pointer when hovering over an element.
• outline-color: var(--lighting-color); → Changes focus outline color.
• transition: 0.3s ease-in-out; → Adds smooth animation to property changes.
7. Responsive Design
• @media (max-width: 768px) { ... } → Defines styles for smaller screens.
• min-height: 50vh; → Ensures a minimum height of half the viewport.
• max-width: 1200px; → Limits the maximum width of an element.
8. Effects & Animations
• opacity: 0.8; → Makes an element slightly transparent.
• transform: scale(1.05); → Slightly enlarges the element on hover.
• animation: typing 5s steps(40, end); → Creates a typing effect for text.
• scroll-behavior: smooth; → Enables smooth scrolling for anchor links.
