Scribd Logo
Upload

Welcome to Scribd!

  • 1 views

    Frontend Dev

    Uploaded by

    Tahreem Feroz

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content

    You might also like

    Frontend Dev

    Uploaded by

    Tahreem Feroz
    1 views4 pages

    Original Title

    Frontend dev

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    1 views4 pages

    Frontend Dev

    Uploaded by

    Tahreem Feroz

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    of 4

    FRONTEND WEB DEVELOPMENT

    HTML:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Page Title</title>
    </head>
    <body>

    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <!-- ... -->
    <p>This is a paragraph.</p>
    <a href="https://www.example.com">Link Text</a>
    <img src="image.jpg" alt="Image Description">

    <ul>
    <li>List Item 1</li>
    <li>List Item 2</li>
    </ul>

    <ol>
    <li>Ordered List Item 1</li>
    <li>Ordered List Item 2</li>
    </ol>
    <table>
    <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    </tr>
    <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
    </tr>
    <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
    </tr>
    </table>
    <form action="/submit" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    <input type="submit" value="Submit">
    </form>
    </body>
    </html>

    CSS:
    /* Selectors */
    selector {
    property: value;
    }

    /* Example of using selectors */


    h1 {
    color: red;
    }

    /* Common CSS Properties */

    /* Text Styling */
    color: #ff0000; /* Text color */
    font-size: 16px; /* Font size */
    font-family: Arial, sans-serif; /* Font family */
    font-weight: bold; /* Font weight (bold) */
    text-decoration: underline; /* Text decoration (underline) */

    /* Box Model */
    width: 300px; /* Width of the element */
    height: 200px; /* Height of the element */
    padding: 10px; /* Padding inside the element */
    margin: 20px; /* Margin outside the element */
    border: 1px solid #000000; /* Border */

    /* Display and Positioning */


    display: block; /* Display type (block) */
    position: relative; /* Positioning type (relative) */
    top: 20px; /* Offset from the top */
    left: 10px; /* Offset from the left */

    /* Backgrounds */
    background-color: #f0f0f0; /* Background color */
    background-image: url("image.jpg"); /* Background image */
    background-size: cover; /* Background image size */

    /* Flexbox */
    display: flex; /* Enables flexbox layout */
    justify-content: center; /* Horizontal alignment of flex items */
    align-items: center; /* Vertical alignment of flex items */

    /* Transitions and Animations */


    transition: all 0.3s ease; /* Transition effect */
    animation: spin 2s linear infinite; /* Animation effect */

    /* Pseudo-classes */
    selector:hover {
    property: value;
    }

    /* Example of using pseudo-classes */


    a:hover {
    color: blue;
    }

    You might also like