Week 1 Assignment

Use the HTML template given below. (feel free to add / modify content)

<!DOCTYPE html>
<html>
  <head>
    <title>My Personal Website</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="UTF-8" />
  </head>
  <body style="font-family: monospace, sans-serif; margin: 0; padding: 0;">
    <header
      style="background-color: #673ab7; color: white; text-align: center; padding: 1rem;"
    >
      <h1>Welcome to My Page</h1>
    </header>
    <main style="padding: 20px;">
      <section style="margin-bottom: 20px;">
        <h2>About Me</h2>
        <p>Hello, World! I love coding. I am here to learn CSS.</p>
      </section>
      <section>
        <h2>My Interests</h2>
        <ul>
          <li>Coding</li>
          <li>Coding</li>
          <li>Coding</li>
        </ul>
      </section>
    </main>
    <footer
      style="background-color: #673ab7; color: white; text-align: center; padding: 1rem; position: fixed; bottom: 0; width: 100%;"
    >
      <p>&copy; 2023 My Page. All rights reserved.</p>
    </footer>
  </body>
</html>

  1. Identify all the inline css

    1. Remove all the inline css and add them to a internal css block.

    2. Use the browser inspector to check different properties that are applied and try changing the values.

  2. Add external css and check the results.

    1. https://cdn.jsdelivr.net/npm/water.css@2/out/water.css

    2. https://cdn.jsdelivr.net/npm/spcss@0.9.0

    3. https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css

    4. https://latex.now.sh/style.css

    5. https://unpkg.com/chota@latest

    6. https://unpkg.com/mvp.css

    7. https://unpkg.com/terminal.css@0.7.2/dist/terminal.min.css

    8. https://unpkg.com/@sakun/system.css

    9. Use any other css library link as external css

  3. Deploy to GitHub pages

PreviousassignmentsNextCSS-102

Last updated