1. Introduction to CSS

CSS (Cascading Style Sheets) is a stylesheet language that enhances the visual appeal of HTML documents. It controls the design aspects of a webpage, such as layout, colors, fonts, animations, and responsiveness, allowing developers to create visually engaging and user-friendly experiences.

Breaking Down CSS:

1. Cascading: The ability of styles to "cascade" from multiple sources to determine the final appearance of elements.
2. Style Sheets: A collection of style rules that apply to specific HTML elements.

Why CSS is Important

CSS is essential for modern web development as it:

1. Improves Design:

   • Transforms plain HTML into a visually appealing and professional layout.
   • Adds modern design aesthetics like gradients, animations, and responsive layouts.

2. Separates Concerns:

   • Separates structure (HTML) from presentation (CSS), improving code organization and maintainability.
   • Enables designers and developers to work independently on styling and structure.

3. Responsive Design:

   • Makes webpages adaptable to different screen sizes (e.g., mobile, tablet, desktop).
   • Ensures a consistent and user-friendly experience across devices.

4. Reusable Styling:

   • Allows for centralized stylesheets, making it easy to apply consistent styles across multiple pages.

5. Supports Accessibility:

   • Helps improve web accessibility by enhancing readability, contrast, and focus indicators.

The Cascading Nature of CSS

The term cascading refers to the order in which CSS rules are applied when there are conflicting styles. The browser determines which styles take precedence based on three factors:

1. Source Order:

   • If two rules have the same specificity, the one defined later in the stylesheet takes precedence.
   • Example:

     Copy
     h1 {
       color: blue;
     }
     h1 {
       color: red; /* This rule takes precedence. */
     }

2. Specificity:

   • Rules with higher specificity override less specific rules.
   • Specificity is calculated based on the type of selector used:
     • Inline styles (e.g., style="color: red;") have the highest specificity.
     • ID selectors (e.g., #id) are more specific than class selectors.
     • Class selectors (e.g., .class) are more specific than element selectors (e.g., h1).

   Specificity Hierarchy:

   Copy
   Inline Styles > ID Selectors > Class Selectors > Element Selectors

   Example:

   Copy
   h1 {
     color: blue; /* Least specific */
   }
   .title {
     color: green; /* More specific */
   }
   #main-title {
     color: red; /* Most specific */
   }

3. Importance:

   • The !important declaration overrides all other rules, regardless of specificity.
   • Example:

     Copy
     h1 {
       color: blue !important; /* This rule always applies. */
     }

How CSS Works with HTML

CSS works by selecting HTML elements and applying style rules to them. The basic process includes:

1. Selecting Elements:

   • Using selectors (e.g., element selectors, class selectors) to target specific HTML elements.

2. Applying Properties and Values:

   • Defining style properties (e.g., color, font-size) and their corresponding values.

   Example:

   Copy
   h1 {
     color: blue;
     font-size: 24px;
   }

   HTML:

   Copy
   <h1>Welcome to CSS</h1>

3. Rendering by the Browser:

   • The browser interprets CSS and applies the styles to the webpage, rendering it for the user.

CSS Syntax

A CSS rule consists of:

1. Selector: Targets the HTML element(s) to style.
2. Declaration Block: Contains property-value pairs defining the styles.

Example:

Copy
h1 {
  color: blue;
  font-size: 24px;
}

• Selector: h1 targets all <h1> elements.
• Declarations: color: blue; and font-size: 24px; specify the styles.

Types of CSS

1. Inline CSS:

   • Styles are applied directly within the style attribute of an HTML element.

   Copy
   <h1 style="color: blue;">Hello, Inline CSS</h1>

   Advantages:

   • Quick and easy to apply for specific elements.

   Disadvantages:

   • Difficult to maintain and not reusable.

2. Internal CSS:

   • Styles are defined within a <style> tag inside the HTML document's <head>.

   Copy
   <head>
     <style>
       h1 {
         color: blue;
       }
     </style>
   </head>

   Advantages:

   • Useful for single-page designs.

   Disadvantages:

   • Not reusable across multiple pages.

3. External CSS:

   • Styles are stored in a separate .css file and linked to the HTML document.

   Copy
   <link rel="stylesheet" href="styles.css">

   Advantages:

   • Reusable across multiple pages.
   • Keeps HTML and CSS separate, improving readability and maintainability.

   Disadvantages:

   • Requires additional HTTP requests to load the external file.

The Role of CSS in Modern Web Development

1. Enhancing User Experience:

   • Smooth animations, transitions, and responsive layouts improve interactivity and usability.

2. Creating Consistency:

   • Centralized styles ensure a consistent design across all pages of a website.

3. Facilitating Modern Design Trends:

   • Enables implementation of gradients, flexbox, grid layouts, and dark mode.

4. Improving Performance:

   • Minified CSS files and efficient rules optimize webpage load times.

5. Enabling Accessibility:

   • Helps implement accessible designs, such as high-contrast modes and readable fonts.

How to Apply CSS

1. Inline CSS:

   • Add styles directly within an HTML element’s style attribute.
   • Example:

     Copy
     <h1 style="color: blue; text-align: center;">Welcome</h1>

   • Best for: Quick changes or one-time use.
   • Avoid: Inline CSS for large projects as it reduces maintainability.

2. Internal CSS:

   • Define styles in a <style> tag inside the <head> section.
   • Example:

     Copy
     <head>
       <style>
         body {
           font-family: Arial, sans-serif;
           background-color: #f4f4f4;
         }
       </style>
     </head>

   • Best for: Small projects or page-specific styles.

3. External CSS (Preferred):

   • Link an external stylesheet to the HTML document.
   • Example:

     Copy
     <head>
       <link rel="stylesheet" href="styles.css" />
     </head>

   • In the styles.css file:

     Copy
     body {
       font-family: Arial, sans-serif;
       background-color: #f4f4f4;
     }

   • Best for: Large projects requiring reusable, centralized styles.

Setting Up External CSS for the Portfolio

1. Create a CSS File:

   • Save a new file as styles.css in the same folder as your HTML file.

2. Link the CSS File to the Portfolio: Add the following line in the <head> of your HTML document:

   Copy
   <link rel="stylesheet" href="styles.css" />

3. Write Your First Styles: Open styles.css and add:

   Copy
   body {
     font-family: Arial, sans-serif;
     background-color: #f8f9fa;
     color: #212529;
     margin: 0;
     padding: 0;
   }
   h1,
   h2 {
     color: #343a40;
     text-align: center;
   }

4. Test the Styles: Open the HTML file in your browser. The background color should change, and the text styles should apply.

CSS Reset

Browsers apply default styles to elements. To ensure consistency, use a CSS reset or normalize styles.

Example of a Simple Reset:

Add this at the top of styles.css:

Copy
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

First Look at Your Styled Portfolio

With the initial styles applied, your portfolio should now look cleaner and more uniform:

1. Body: Light gray background and centralized font settings.
2. Headings: Darker text color with centered alignment.

Here’s your updated HTML and CSS setup:

HTML (Linked to CSS):

Copy
<!DOCTYPE html>
<html>
  <head>
    <title>My Portfolio</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="My portfolio showcasing web development skills and projects.">
    <link rel="icon" href="images/favicon.ico" type="image/x-icon">
    <meta property="og:title" content="My Portfolio">
    <meta property="og:description" content="Showcasing web development skills and projects.">
    <meta property="og:image" content="images/portfolio-preview.jpg">
    <meta property="og:url" content="https://myportfolio.com">
    <meta property="og:type" content="website">
  </head>
  <body>
    <!-- Header with Navigation -->
    <header>
      <h1>Welcome to My Portfolio</h1>
      <h2>Your One-Stop Showcase of My Skills and Projects</h2>
      <nav>
        <ul>
          <li><a href="#about-me">About Me</a></li>
          <li><a href="#skills">Skills</a></li>
          <li><a href="#projects">Projects</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </nav>
    </header>

    <!-- Main Content -->
    <main>
      <section id="about-me">
        <h2>About Me</h2>
        <img src="images/profile.jpg" alt="Profile picture of [Your Name]" width="200">
        <p>I am a web developer passionate about creating efficient and engaging web applications.</p>
      </section>

      <section id="skills">
        <h2>Skills</h2>
        <ul>
          <li>HTML</li>
          <li>CSS</li>
          <li>JavaScript</li>
        </ul>
      </section>

      <section id="projects">
        <h2>Projects</h2>
        <p>Here are some of my recent projects:</p>
        <table border="1" cellpadding="5" cellspacing="0">
          <caption>My Recent Projects</caption>
          <thead>
            <tr>
              <th>Project</th>
              <th>Technology</th>
              <th>Status</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Portfolio Website</td>
              <td>HTML, CSS</td>
              <td>Completed</td>
            </tr>
            <tr>
              <td>Weather App</td>
              <td>JavaScript</td>
              <td>In Progress</td>
            </tr>
            <tr>
              <td>Task Manager</td>
              <td>React, Node.js</td>
              <td>Completed</td>
            </tr>
          </tbody>
          <tfoot>
            <tr>
              <td colspan="3">Total Projects: 3</td>
            </tr>
          </tfoot>
        </table>
      </section>

      <section id="contact">
        <h2>Contact</h2>
        <p>Feel free to reach out using the form below:</p>
        <form action="#" method="post">
          <label for="name">Name:</label>
          <input type="text" id="name" name="name" placeholder="Your Name" required>
          <label for="email">Email:</label>
          <input type="email" id="email" name="email" placeholder="Your Email" required>
          <label for="message">Message:</label>
          <textarea id="message" name="message" rows="5" cols="30" placeholder="Your Message" required></textarea>
          <button type="submit">Send Message</button>
        </form>
      </section>
    </main>

    <!-- Footer -->
    <footer>
      <p>&copy; 2024 My Portfolio. All rights reserved.</p>
      <p>
        Find me on:
        <a href="https://github.com/yourusername" target="_blank">GitHub</a> |
        <a href="https://linkedin.com/in/yourusername" target="_blank">LinkedIn</a>
      </p>
    </footer>
  </body>
</html>

CSS (styles.css):

Copy
/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Global Styles */
body {
  font-family: Arial, sans-serif;
  background-color: #f8f9fa;
  color: #212529;
  margin: 0;
  padding: 0;
}

h1,
h2 {
  color: #343a40;
  text-align: center;
}

---

2. CSS Syntax and Selectors

In this section, we’ll learn how to style the provided portfolio HTML using CSS syntax and selectors. This knowledge will allow us to target specific elements effectively and define their appearance.

CSS Syntax

A CSS rule consists of:

1. Selector: Specifies the HTML element(s) to style.
2. Declaration Block: Contains one or more declarations defining the styles.

Example:

Copy
h1 {
  color: blue;
  font-size: 24px;
}

• Selector: h1 targets all <h1> elements.
• Declarations: Each declaration has a property and a value, separated by a colon:
  • color: blue; sets the text color.
  • font-size: 24px; sets the font size.

Types of Selectors

1. Universal Selector (*):

   • Applies styles to all elements.

   Copy
   * {
     margin: 0;
     padding: 0;
   }

2. Element Selector:

   • Targets all elements of a specific type.

   Copy
   h1 {
     color: navy;
   }

3. Class Selector (.class):

   • Targets elements with a specific class attribute.

   Copy
   .highlight {
     background-color: yellow;
   }

   HTML:

   Copy
   <p class="highlight">Highlighted text</p>

4. ID Selector (#id):

   • Targets a specific element with an id attribute.

   Copy
   #main-header {
     font-size: 32px;
   }

   HTML:

   Copy
   <header id="main-header">Welcome</header>

5. Group Selector:

   • Applies the same styles to multiple selectors.

   Copy
   h1, h2, h3 {
     font-family: Arial, sans-serif;
   }

6. Descendant Selector:

   • Targets elements inside another element.

   Copy
   nav ul {
     list-style-type: none;
   }

7. Combinators:

   • Child (>): Targets direct children.

     Copy
     nav > ul {
       padding: 0;
     }

   • Adjacent Sibling (+): Targets the next sibling.

     Copy
     h1 + p {
       margin-top: 10px;
     }

   • General Sibling (~): Targets all siblings after the first.

     Copy
     h1 ~ p {
       font-style: italic;
     }

Applying Selectors to the Portfolio

Let’s start by targeting specific sections and elements in the portfolio.

1. Styling the Header:

   • Use an element selector for header and a descendant selector for its children.

   Copy
   header {
     background-color: #343a40;
     color: #ffffff;
     padding: 20px;
     text-align: center;
   }
   header h1, header h2 {
     margin: 10px 0;
   }
   nav ul {
     list-style: none;
     padding: 0;
     display: flex;
     justify-content: center;
     gap: 20px;
   }
   nav a {
     color: #ffffff;
     text-decoration: none;
     font-weight: bold;
   }
   nav a:hover {
     text-decoration: underline;
   }

2. Styling the Main Sections:

   • Use ID selectors for individual sections.

   Copy
   #about-me, #skills, #projects, #contact {
     margin: 40px auto;
     max-width: 800px;
     padding: 20px;
     background-color: #ffffff;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     border-radius: 8px;
   }

3. Styling the Table in Projects:

   • Use descendant selectors for the table and its elements.

   Copy
   table {
     width: 100%;
     border-collapse: collapse;
   }
   table th, table td {
     border: 1px solid #dee2e6;
     padding: 10px;
     text-align: left;
   }
   table th {
     background-color: #343a40;
     color: #ffffff;
   }
   table caption {
     font-weight: bold;
     margin-bottom: 10px;
   }

4. Styling the Contact Form:

   • Use descendant selectors to target form elements.

   Copy
   form label {
     display: block;
     font-weight: bold;
     margin-top: 10px;
   }
   form input, form textarea, form select {
     width: 100%;
     padding: 10px;
     margin: 5px 0 15px;
     border: 1px solid #ced4da;
     border-radius: 4px;
   }
   form button {
     background-color: #007bff;
     color: #ffffff;
     padding: 10px 20px;
     border: none;
     border-radius: 4px;
     cursor: pointer;
   }
   form button:hover {
     background-color: #0056b3;
   }

5. Styling the Footer:

   • Use a class selector for the footer and its links.

   Copy
   footer {
     background-color: #343a40;
     color: #ffffff;
     text-align: center;
     padding: 20px;
   }
   footer a {
     color: #007bff;
     text-decoration: none;
   }
   footer a:hover {
     text-decoration: underline;
   }

Updated Portfolio with Selectors Applied

CSS (styles.css):

Copy
/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Header */
header {
  background-color: #343a40;
  color: #ffffff;
  padding: 20px;
  text-align: center;
}
header h1, header h2 {
  margin: 10px 0;
}
nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 20px;
}
nav a {
  color: #ffffff;
  text-decoration: none;
  font-weight: bold;
}
nav a:hover {
  text-decoration: underline;
}

/* Main Sections */
#about-me, #skills, #projects, #contact {
  margin: 40px auto;
  max-width: 800px;
  padding: 20px;
  background-color: #ffffff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

/* Projects Table */
table {
  width: 100%;
  border-collapse: collapse;
}
table th, table td {
  border: 1px solid #dee2e6;
  padding: 10px;
  text-align: left;
}
table th {
  background-color: #343a40;
  color: #ffffff;
}
table caption {
  font-weight: bold;
  margin-bottom: 10px;
}

/* Contact Form */
form label {
  display: block;
  font-weight: bold;
  margin-top: 10px;
}
form input, form textarea, form select {
  width: 100%;
  padding: 10px;
  margin: 5px 0 15px;
  border: 1px solid #ced4da;
  border-radius: 4px;
}
form button {
  background-color: #007bff;
  color: #ffffff;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
form button:hover {
  background-color: #0056b3;
}

/* Footer */
footer {
  background-color: #343a40;
  color: #ffffff;
  text-align: center;
  padding: 20px;
}
footer a {
  color: #007bff;
  text-decoration: none;
}
footer a:hover {
  text-decoration: underline;
}

---

3. Working with Colors

In this section, we will refine the visual appeal of the portfolio by applying modern color schemes. We will explore different color formats, choose a sleek color palette, and apply colors to text, backgrounds, and borders.

CSS Color Formats

CSS supports multiple formats for defining colors:

1. Named Colors:

   • Predefined color names (e.g., red, blue, green).
   • Example:

     Copy
     color: red;

2. Hexadecimal (HEX):

   • Defines colors using hexadecimal values (#RRGGBB).
   • Example:

     Copy
     color: #ff5733; /* Orange */

3. RGB:

   • Specifies colors using Red, Green, and Blue values.
   • Example:

     Copy
     color: rgb(255, 87, 51); /* Orange */

4. RGBA:

   • Same as RGB but includes an alpha value for transparency.
   • Example:

     Copy
     background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */

5. HSL (Hue, Saturation, Lightness):

   • Defines colors based on hue (angle), saturation (%), and lightness (%).
   • Example:

     Copy
     color: hsl(16, 100%, 50%); /* Orange */

6. HSLA:

   • Adds an alpha channel to HSL.
   • Example:

     Copy
     background-color: hsla(16, 100%, 50%, 0.7); /* Semi-transparent orange */

Choosing a Modern Color Palette

For a sleek and elegant portfolio, we will use a neutral and accent color palette:

1. Primary Color (Background): Light Gray (#f8f9fa)
2. Text Color: Dark Gray (#212529)
3. Accent Colors:
   • Primary Accent: Blue (#007bff)
   • Secondary Accent: Orange (#ff6f61)

Applying Colors to the Portfolio

1. Global Styles:

   • Set a light background color for the entire webpage and dark text color.

   Copy
   body {
     background-color: #f8f9fa;
     color: #212529;
   }

2. Header:

   • Use a dark background with white text.

   Copy
   header {
     background-color: #343a40;
     color: #ffffff;
   }

3. Navigation Links:

   • Use a primary accent color and a hover effect.

   Copy
   nav a {
     color: #007bff;
   }
   nav a:hover {
     color: #ff6f61;
   }

4. Section Backgrounds:

   • Apply a white background to content sections with subtle shadows.

   Copy
   #about-me, #skills, #projects, #contact {
     background-color: #ffffff;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   }

5. Table Borders:

   • Use light borders for a cleaner look.

   Copy
   table th, table td {
     border: 1px solid #dee2e6;
   }

6. Buttons:

   • Use the primary accent color and a hover effect.

   Copy
   form button {
     background-color: #007bff;
     color: #ffffff;
   }
   form button:hover {
     background-color: #0056b3;
   }

7. Footer:

   • Match the header’s dark background and accent links.

   Copy
   footer {
     background-color: #343a40;
     color: #ffffff;
   }
   footer a {
     color: #007bff;
   }
   footer a:hover {
     color: #ff6f61;
   }

Updated Portfolio CSS

Here’s the updated styles.css with the applied colors:

Copy
/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Global Styles */
body {
  font-family: Arial, sans-serif;
  background-color: #f8f9fa;
  color: #212529;
}

/* Header */
header {
  background-color: #343a40;
  color: #ffffff;
  padding: 20px;
  text-align: center;
}
header h1, header h2 {
  margin: 10px 0;
}
nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 20px;
}
nav a {
  color: #007bff;
  text-decoration: none;
  font-weight: bold;
}
nav a:hover {
  color: #ff6f61;
}

/* Main Sections */
#about-me, #skills, #projects, #contact {
  margin: 40px auto;
  max-width: 800px;
  padding: 20px;
  background-color: #ffffff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

/* Projects Table */
table {
  width: 100%;
  border-collapse: collapse;
}
table th, table td {
  border: 1px solid #dee2e6;
  padding: 10px;
  text-align: left;
}
table th {
  background-color: #343a40;
  color: #ffffff;
}
table caption {
  font-weight: bold;
  margin-bottom: 10px;
}

/* Contact Form */
form label {
  display: block;
  font-weight: bold;
  margin-top: 10px;
}
form input, form textarea, form select {
  width: 100%;
  padding: 10px;
  margin: 5px 0 15px;
  border: 1px solid #ced4da;
  border-radius: 4px;
}
form button {
  background-color: #007bff;
  color: #ffffff;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
form button:hover {
  background-color: #0056b3;
}

/* Footer */
footer {
  background-color: #343a40;
  color: #ffffff;
  text-align: center;
  padding: 20px;
}
footer a {
  color: #007bff;
}
footer a:hover {
  color: #ff6f61;
}

---

4. Typography

Typography plays a vital role in the readability and aesthetics of a webpage. In this section, we’ll style the portfolio’s text to create a modern, elegant look. We’ll explore font families, sizes, weights, line heights, alignments, and the use of Google Fonts.

Font Properties in CSS

1. font-family: Specifies the typeface.

   • Example:

     Copy
     font-family: Arial, sans-serif;

2. font-size: Sets the size of the text.

   • Can be defined in units like px, em, %, or rem.
   • Example:

     Copy
     font-size: 16px;

3. font-weight: Specifies the thickness of the text.

   • Values: normal, bold, lighter, or numbers like 100 to 900.
   • Example:

     Copy
     font-weight: 600;

4. line-height: Controls the spacing between lines.

   • Example:

     Copy
     line-height: 1.5;

5. text-align: Aligns text horizontally.

   • Values: left, center, right, or justify.
   • Example:

     Copy
     text-align: center;

6. text-transform: Modifies text capitalization.

   • Values: uppercase, lowercase, capitalize.
   • Example:

     Copy
     text-transform: uppercase;

7. text-decoration: Adds or removes underlines, overlines, or strikethroughs.

   • Example:

     Copy
     text-decoration: none;

Using Google Fonts

Google Fonts provides free web fonts to enhance typography. Here’s how to use them:

1. Visit Google Fonts and select your desired fonts.
2. Copy the <link> tag for the font and include it in the <head> of your HTML file.
3. Use the font in your CSS with the font-family property.

Font Choices for the Portfolio

We’ll use:

1. Primary Font: Poppins (for headings).
2. Secondary Font: Roboto (for body text).

Add the following <link> tags to the <head> of your HTML file:

Copy
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&family=Roboto:wght@300;400&display=swap" rel="stylesheet">

Applying Typography to the Portfolio

Here’s how to apply the new fonts and other typography properties:

1. Global Font Styles:

   • Set Roboto as the default font for the entire body.

   Copy
   body {
     font-family: 'Roboto', sans-serif;
     font-size: 16px;
     line-height: 1.6;
   }

2. Headings:

   • Use Poppins for headings with a bold weight.

   Copy
   h1, h2, h3, h4, h5, h6 {
     font-family: 'Poppins', sans-serif;
     font-weight: 600;
     line-height: 1.3;
   }

3. Navigation Links:

   • Adjust the font size and add a hover effect.

   Copy
   nav a {
     font-family: 'Poppins', sans-serif;
     font-size: 16px;
     text-transform: uppercase;
   }

4. Paragraphs:

   • Use lighter font weight for improved readability.

   Copy
   p {
     font-weight: 300;
   }

5. Buttons:

   • Use uppercase text for buttons to make them more prominent.

   Copy
   form button {
     text-transform: uppercase;
     font-weight: 600;
   }

6. Footer Links:

   • Add a subtle hover effect to footer links.

   Copy
   footer a {
     font-weight: 400;
     text-decoration: none;
   }
   footer a:hover {
     text-decoration: underline;
   }

Updated CSS

Here’s the updated styles.css with typography enhancements:

Copy
/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Global Styles */
body {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  background-color: #f8f9fa;
  color: #212529;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  line-height: 1.3;
}

/* Header */
header {
  background-color: #343a40;
  color: #ffffff;
  padding: 20px;
  text-align: center;
}
header h1 {
  font-size: 36px;
}
header h2 {
  font-size: 20px;
  font-weight: 400;
}
nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 20px;
}
nav a {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  text-transform: uppercase;
  color: #007bff;
  text-decoration: none;
  font-weight: bold;
}
nav a:hover {
  color: #ff6f61;
}

/* Sections */
#about-me, #skills, #projects, #contact {
  margin: 40px auto;
  max-width: 800px;
  padding: 20px;
  background-color: #ffffff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}
p {
  font-weight: 300;
}

/* Projects Table */
table {
  width: 100%;
  border-collapse: collapse;
}
table th, table td {
  border: 1px solid #dee2e6;
  padding: 10px;
  text-align: left;
}
table th {
  background-color: #343a40;
  color: #ffffff;
}
table caption {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 10px;
}

/* Contact Form */
form label {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  margin-top: 10px;
}
form input, form textarea, form select {
  width: 100%;
  padding: 10px;
  margin: 5px 0 15px;
  border: 1px solid #ced4da;
  border-radius: 4px;
}
form button {
  background-color: #007bff;
  color: #ffffff;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: 600;
}
form button:hover {
  background-color: #0056b3;
}

/* Footer */
footer {
  background-color: #343a40;
  color: #ffffff;
  text-align: center;
  padding: 20px;
}
footer a {
  color: #007bff;
  text-decoration: none;
  font-weight: 400;
}
footer a:hover {
  color: #ff6f61;
  text-decoration: underline;
}

---

5. The CSS Box Model

The Box Model is a fundamental concept in CSS that defines how elements are structured and styled. It consists of content, padding, border, and margin, all of which affect an element's size and spacing.

In this section, we’ll refine the layout of the portfolio using the Box Model.

What is the Box Model?

The Box Model represents the structure of an element as follows:

1. Content:

   • The actual content inside the element (e.g., text, images).
   • Defined by properties like width and height.

2. Padding:

   • The space between the content and the border.
   • Increases the size of the element without affecting margins.

3. Border:

   • The outline around the padding.
   • Defined using border-width, border-style, and border-color.

4. Margin:

   • The space outside the border that separates the element from other elements.

Box Model Properties

1. Width and Height:

   • Specify the dimensions of the content area.

   Copy
   div {
     width: 300px;
     height: 200px;
   }

2. Padding:

   • Adds space between content and border.

   Copy
   div {
     padding: 20px; /* Applies 20px padding on all sides */
   }

3. Border:

   • Adds an outline around the element.

   Copy
   div {
     border: 2px solid #000;
   }

4. Margin:

   • Creates space outside the border.

   Copy
   div {
     margin: 10px;
   }

Using the Box Model in the Portfolio

We’ll apply Box Model properties to enhance the layout of the portfolio.

1. Global Reset:

   • Ensure consistent behavior across browsers by setting box-sizing to border-box.

   Copy
   * {
     box-sizing: border-box;
   }

2. Sections:

   • Add padding and margin for spacing.

   Copy
   #about-me, #skills, #projects, #contact {
     padding: 20px;
     margin: 40px auto;
     border: 1px solid #dee2e6;
     border-radius: 8px;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   }

3. Navigation Links:

   • Add padding for clickable area and adjust margins for spacing.

   Copy
   nav ul {
     list-style: none;
     padding: 0;
     display: flex;
     justify-content: center;
     gap: 20px;
   }
   nav a {
     padding: 10px 15px;
     margin: 5px 0;
     border-radius: 4px;
   }
   nav a:hover {
     background-color: rgba(0, 123, 255, 0.1);
   }

4. Buttons:

   • Add padding for a larger clickable area.

   Copy
   form button {
     padding: 10px 20px;
     border-radius: 4px;
   }

5. Footer:

   • Add padding for visual balance.

   Copy
   footer {
     padding: 20px;
   }

Box Shadows

We can enhance elements by adding subtle shadows using box-shadow.

Syntax:

Copy
box-shadow: offset-x offset-y blur-radius spread-radius color;

Example:

Copy
div {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

Portfolio Example:

Copy
#about-me, #skills, #projects, #contact {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

Updated CSS

Here’s the updated styles.css with Box Model enhancements:

Copy
/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Global Styles */
body {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  background-color: #f8f9fa;
  color: #212529;
  margin: 0;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  line-height: 1.3;
}

/* Header */
header {
  background-color: #343a40;
  color: #ffffff;
  padding: 20px;
  text-align: center;
}
header h1 {
  font-size: 36px;
}
header h2 {
  font-size: 20px;
  font-weight: 400;
}
nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 20px;
}
nav a {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  text-transform: uppercase;
  color: #007bff;
  text-decoration: none;
  font-weight: bold;
  padding: 10px 15px;
  margin: 5px 0;
  border-radius: 4px;
}
nav a:hover {
  background-color: rgba(0, 123, 255, 0.1);
  color: #ff6f61;
}

/* Sections */
#about-me, #skills, #projects, #contact {
  margin: 40px auto;
  max-width: 800px;
  padding: 20px;
  background-color: #ffffff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  border: 1px solid #dee2e6;
}
p {
  font-weight: 300;
}

/* Projects Table */
table {
  width: 100%;
  border-collapse: collapse;
}
table th, table td {
  border: 1px solid #dee2e6;
  padding: 10px;
  text-align: left;
}
table th {
  background-color: #343a40;
  color: #ffffff;
}
table caption {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 10px;
}

/* Contact Form */
form label {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  margin-top: 10px;
}
form input, form textarea, form select {
  width: 100%;
  padding: 10px;
  margin: 5px 0 15px;
  border: 1px solid #ced4da;
  border-radius: 4px;
}
form button {
  background-color: #007bff;
  color: #ffffff;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: 600;
}
form button:hover {
  background-color: #0056b3;
}

/* Footer */
footer {
  background-color: #343a40;
  color: #ffffff;
  text-align: center;
  padding: 20px;
}
footer a {
  color: #007bff;
  text-decoration: none;
  font-weight: 400;
}
footer a:hover {
  color: #ff6f61;
  text-decoration: underline;
}

---

6. Styling Layouts with Flexbox

Flexbox (Flexible Box Layout) is a CSS layout model that makes it easy to design responsive and flexible layouts. It allows you to align items horizontally or vertically, distribute space, and rearrange elements dynamically.

In this section, we’ll use Flexbox to enhance the layout of the portfolio.

Understanding Flexbox

The Flexbox layout consists of:

1. Flex Container:

   • The parent element with display: flex;.
   • Defines the layout behavior of its children (flex items).

2. Flex Items:

   • The child elements of the flex container.
   • Their alignment and spacing are controlled by the flex container.

Flexbox Properties

1. For the Flex Container:

   • display: flex;: Activates Flexbox.
   • flex-direction: Defines the axis direction (row, column).

     Copy
     flex-direction: row; /* Default: horizontal layout */
     flex-direction: column; /* Vertical layout */

   • justify-content: Aligns items along the main axis.
     • Values: flex-start, center, space-between, space-around, space-evenly.
   • align-items: Aligns items along the cross-axis.
     • Values: stretch, center, flex-start, flex-end.
   • gap: Adds spacing between items.

     Copy
     gap: 20px;

2. For Flex Items:

   • flex: Sets the size and growth behavior of an item.

     Copy
     flex: 1; /* Equal space for all items */
     flex: 2; /* Twice the space of other items */

   • align-self: Overrides the align-items value for a specific item.

Applying Flexbox to the Portfolio

1. Navigation Bar:

   • Use Flexbox to align navigation links horizontally with equal spacing.

   Copy
   nav ul {
     display: flex;
     justify-content: center;
     gap: 20px;
     list-style: none;
     padding: 0;
   }
   nav a {
     padding: 10px 15px;
     text-transform: uppercase;
     font-weight: bold;
   }

2. Skills Section:

   • Use Flexbox to display skills in a grid-like structure.

   Copy
   #skills ul {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 15px;
     list-style: none;
     padding: 0;
   }
   #skills li {
     background-color: #007bff;
     color: #ffffff;
     padding: 10px 20px;
     border-radius: 4px;
     font-weight: bold;
   }

3. Contact Form:

   • Arrange the input fields vertically with consistent spacing.

   Copy
   form {
     display: flex;
     flex-direction: column;
     gap: 15px;
   }

Updated CSS

Here’s the updated styles.css with Flexbox applied:

Copy
/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Global Styles */
body {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  background-color: #f8f9fa;
  color: #212529;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  line-height: 1.3;
}

/* Header */
header {
  background-color: #343a40;
  color: #ffffff;
  padding: 20px;
  text-align: center;
}
header h1 {
  font-size: 36px;
}
header h2 {
  font-size: 20px;
  font-weight: 400;
}
nav ul {
  display: flex;
  justify-content: center;
  gap: 20px;
  list-style: none;
  padding: 0;
}
nav a {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  text-transform: uppercase;
  color: #007bff;
  text-decoration: none;
  font-weight: bold;
  padding: 10px 15px;
  border-radius: 4px;
}
nav a:hover {
  background-color: rgba(0, 123, 255, 0.1);
  color: #ff6f61;
}

/* Sections */
#about-me, #skills, #projects, #contact {
  margin: 40px auto;
  max-width: 800px;
  padding: 20px;
  background-color: #ffffff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  border: 1px solid #dee2e6;
}
p {
  font-weight: 300;
}

/* Skills Section */
#skills ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  list-style: none;
  padding: 0;
}
#skills li {
  background-color: #007bff;
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 4px;
  font-weight: bold;
}

/* Projects Table */
table {
  width: 100%;
  border-collapse: collapse;
}
table th, table td {
  border: 1px solid #dee2e6;
  padding: 10px;
  text-align: left;
}
table th {
  background-color: #343a40;
  color: #ffffff;
}
table caption {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 10px;
}

/* Contact Form */
form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
form label {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}
form input, form textarea, form select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ced4da;
  border-radius: 4px;
}
form button {
  background-color: #007bff;
  color: #ffffff;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: 600;
}
form button:hover {
  background-color: #0056b3;
}

/* Footer */
footer {
  background-color: #343a40;
  color: #ffffff;
  text-align: center;
  padding: 20px;
}
footer a {
  color: #007bff;
  text-decoration: none;
  font-weight: 400;
}
footer a:hover {
  color: #ff6f61;
  text-decoration: underline;
}

---

7. Backgrounds and Images

Backgrounds and images play a significant role in creating visually appealing and professional designs. In this section, we’ll refine the portfolio with stylish background effects and modern image enhancements.

CSS Background Properties

1. background-color: Sets the background color.

   Copy
   body {
     background-color: #f8f9fa;
   }

2. background-image: Adds an image as the background.

   Copy
   header {
     background-image: url('images/header-bg.jpg');
   }

3. background-size: Defines how the background image is scaled.

   • Values: cover, contain, or pixel/percentage values.

   Copy
   header {
     background-size: cover;
   }

4. background-repeat: Determines whether the background repeats.

   • Values: repeat, no-repeat, repeat-x, repeat-y.

   Copy
   header {
     background-repeat: no-repeat;
   }

5. background-position: Specifies the starting position of the background image.

   • Example: center, top, bottom, left 50px, center center.

   Copy
   header {
     background-position: center;
   }

6. background-attachment: Controls whether the background scrolls with the content.

   • Values: scroll, fixed.

   Copy
   header {
     background-attachment: fixed;
   }

Applying Backgrounds to the Portfolio

1. Header Background:

   • Add a stylish background image to the header for visual appeal.

   Copy
   header {
     background-image: url('images/header-bg.jpg');
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
     color: #ffffff;
   }

2. Section Backgrounds:

   • Use subtle gradients for section backgrounds to create depth.

   Copy
   #about-me, #skills, #projects, #contact {
     background: linear-gradient(to bottom, #ffffff, #f8f9fa);
   }

3. Body Background:

   • Apply a soft pattern or solid light color for the webpage.

   Copy
   body {
     background-color: #f4f4f4;
   }

Image Styling

1. Adding Rounded Corners:

   • Use border-radius to give images rounded corners.

   Copy
   img {
     border-radius: 8px;
   }

2. Adding Shadows:

   • Add subtle shadows to images using box-shadow.

   Copy
   img {
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   }

3. Responsive Images:

   • Use max-width and height: auto to make images responsive.

   Copy
   img {
     max-width: 100%;
     height: auto;
   }

4. Hover Effects:

   • Apply hover effects for interactivity.

   Copy
   img:hover {
     transform: scale(1.05);
     transition: transform 0.3s ease;
   }

Updated CSS

Here’s the updated styles.css with background and image enhancements:

Copy
/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Global Styles */
body {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  background-color: #f4f4f4;
  color: #212529;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  line-height: 1.3;
}

/* Header */
header {
  background-image: url('images/header-bg.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  color: #ffffff;
  padding: 40px;
  text-align: center;
}
header h1 {
  font-size: 36px;
}
header h2 {
  font-size: 20px;
  font-weight: 400;
}

/* Navigation */
nav ul {
  display: flex;
  justify-content: center;
  gap: 20px;
  list-style: none;
  padding: 0;
}
nav a {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  text-transform: uppercase;
  color: #007bff;
  text-decoration: none;
  font-weight: bold;
  padding: 10px 15px;
  border-radius: 4px;
}
nav a:hover {
  background-color: rgba(0, 123, 255, 0.1);
  color: #ff6f61;
}

/* Sections */
#about-me, #skills, #projects, #contact {
  margin: 40px auto;
  max-width: 800px;
  padding: 20px;
  background: linear-gradient(to bottom, #ffffff, #f8f9fa);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  border: 1px solid #dee2e6;
}
p {
  font-weight: 300;
}

/* Images */
img {
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  max-width: 100%;
  height: auto;
  transition: transform 0.3s ease;
}
img:hover {
  transform: scale(1.05);
}

/* Skills Section */
#skills ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  list-style: none;
  padding: 0;
}
#skills li {
  background-color: #007bff;
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 4px;
  font-weight: bold;
}

/* Projects Table */
table {
  width: 100%;
  border-collapse: collapse;
}
table th, table td {
  border: 1px solid #dee2e6;
  padding: 10px;
  text-align: left;
}
table th {
  background-color: #343a40;
  color: #ffffff;
}
table caption {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 10px;
}

/* Contact Form */
form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
form label {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}
form input, form textarea, form select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ced4da;
  border-radius: 4px;
}
form button {
  background-color: #007bff;
  color: #ffffff;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: 600;
}
form button:hover {
  background-color: #0056b3;
}

/* Footer */
footer {
  background-color: #343a40;
  color: #ffffff;
  text-align: center;
  padding: 20px;
}
footer a {
  color: #007bff;
  text-decoration: none;
  font-weight: 400;
}
footer a:hover {
  color: #ff6f61;
  text-decoration: underline;
}

---

8. Responsive Design

Responsive design ensures that a webpage looks great and functions seamlessly across all devices, from desktops to smartphones. In this section, we’ll make the portfolio fully responsive using media queries and responsive CSS techniques.

What is Responsive Design?

Responsive design adjusts the layout, font sizes, and images based on the device's screen size. This ensures a user-friendly experience on devices like smartphones, tablets, and desktops.

Core Concepts:

1. Fluid Layouts:

   • Use percentages or relative units (em, rem) instead of fixed units (px) for widths, heights, and spacing.

2. Flexible Images:

   • Ensure images resize proportionally with their container.

   Copy
   img {
     max-width: 100%;
     height: auto;
   }

3. Media Queries:

   • Apply specific styles based on screen size.

   Copy
   @media (max-width: 768px) {
     body {
       font-size: 14px;
     }
   }

Breakpoints

Breakpoints define the screen sizes where the layout changes. Common breakpoints are:

1. Large Screens (Desktops): 1200px and above.
2. Medium Screens (Tablets): 768px to 1199px.
3. Small Screens (Mobiles): 767px and below.

Making the Portfolio Responsive

We’ll refine the portfolio to adjust at different screen sizes using media queries.

Global Adjustments

• Reduce the base font size for smaller screens.
• Adjust the spacing between sections.

Copy
@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
  #about-me, #skills, #projects, #contact {
    margin: 20px auto;
    padding: 15px;
  }
}

Responsive Header

• Reduce the header padding and font sizes on smaller screens.

Copy
@media (max-width: 768px) {
  header {
    padding: 20px;
  }
  header h1 {
    font-size: 28px;
  }
  header h2 {
    font-size: 16px;
  }
}

Responsive Navigation

• Stack navigation links vertically on smaller screens.

Copy
@media (max-width: 768px) {
  nav ul {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  nav a {
    padding: 8px 10px;
    font-size: 14px;
  }
}

Responsive Skills Section

• Adjust skill item widths for better readability.

Copy
@media (max-width: 768px) {
  #skills ul {
    flex-wrap: wrap;
    justify-content: center;
  }
  #skills li {
    flex: 1 1 45%;
    margin: 5px;
    text-align: center;
  }
}

Responsive Projects Table

• Use a scrollable table for smaller screens.

Copy
@media (max-width: 768px) {
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  table th, table td {
    padding: 8px;
  }
}

Responsive Footer

• Reduce footer padding and font sizes.

Copy
@media (max-width: 768px) {
  footer {
    padding: 10px;
    font-size: 14px;
  }
  footer a {
    font-size: 14px;
  }
}

Updated CSS

Here’s the updated styles.css with responsive design applied:

Copy
/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Global Styles */
body {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  background-color: #f4f4f4;
  color: #212529;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  line-height: 1.3;
}

/* Header */
header {
  background-image: url('images/header-bg.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  color: #ffffff;
  padding: 40px;
  text-align: center;
}
header h1 {
  font-size: 36px;
}
header h2 {
  font-size: 20px;
  font-weight: 400;
}

/* Navigation */
nav ul {
  display: flex;
  justify-content: center;
  gap: 20px;
  list-style: none;
  padding: 0;
}
nav a {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  text-transform: uppercase;
  color: #007bff;
  text-decoration: none;
  font-weight: bold;
  padding: 10px 15px;
  border-radius: 4px;
}
nav a:hover {
  background-color: rgba(0, 123, 255, 0.1);
  color: #ff6f61;
}

/* Sections */
#about-me, #skills, #projects, #contact {
  margin: 40px auto;
  max-width: 800px;
  padding: 20px;
  background: linear-gradient(to bottom, #ffffff, #f8f9fa);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  border: 1px solid #dee2e6;
}
p {
  font-weight: 300;
}

/* Images */
img {
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  max-width: 100%;
  height: auto;
  transition: transform 0.3s ease;
}
img:hover {
  transform: scale(1.05);
}

/* Skills Section */
#skills ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  list-style: none;
  padding: 0;
}
#skills li {
  background-color: #007bff;
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 4px;
  font-weight: bold;
}

/* Projects Table */
table {
  width: 100%;
  border-collapse: collapse;
}
table th, table td {
  border: 1px solid #dee2e6;
  padding: 10px;
  text-align: left;
}
table th {
  background-color: #343a40;
  color: #ffffff;
}
table caption {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 10px;
}

/* Contact Form */
form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
form label {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}
form input, form textarea, form select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ced4da;
  border-radius: 4px;
}
form button {
  background-color: #007bff;
  color: #ffffff;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: 600;
}
form button:hover {
  background-color: #0056b3;
}

/* Footer */
footer {
  background-color: #343a40;
  color: #ffffff;
  text-align: center;
  padding: 20px;
}
footer a {
  color: #007bff;
  text-decoration: none;
  font-weight: 400;
}
footer a:hover {
  color: #ff6f61;
  text-decoration: underline;
}

/* Responsive Design */
@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
  #about-me, #skills, #projects, #contact {
    margin: 20px auto;
    padding: 15px;
  }
  header {
    padding: 20px;
  }
  header h1 {
    font-size: 28px;
  }
  header h2 {
    font-size: 16px;
  }
  nav ul {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  nav a {
    padding: 8px 10px;
    font-size: 14px;
  }
  #skills ul {
    flex-wrap: wrap;
    justify-content: center;
  }
  #skills li {
    flex: 1 1 45%;
    margin: 5px;
    text-align: center;
  }
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  table th, table td {
    padding: 8px;
  }
  footer {
    padding: 10px;


 font-size: 14px;
  }
  footer a {
    font-size: 14px;
  }
}

---

9. Animations and Transitions

Adding animations and transitions enhances user engagement by creating smooth, visually appealing interactions. In this section, we’ll apply subtle animations and transitions to the portfolio, making it more dynamic and modern.

CSS Transitions

Transitions create smooth changes between two states (e.g., hover effects).

Syntax:

Copy
element {
  transition: property duration timing-function delay;
}

• Property: Specifies the property to animate (e.g., color, background-color, transform).
• Duration: Time for the transition (e.g., 0.3s, 1s).
• Timing Function: Controls the speed curve (e.g., ease, linear, ease-in, ease-out).
• Delay: Specifies the delay before the transition starts (optional).

Example:

Copy
button {
  background-color: #007bff;
  transition: background-color 0.3s ease;
}
button:hover {
  background-color: #0056b3;
}

CSS Animations

Animations define keyframes for more complex movements or effects.

Syntax:

1. Define the animation:

Copy
@keyframes animation-name {
  0% { property: value; }
  100% { property: value; }
}

2. Apply the animation to an element:

Copy
element {
  animation: animation-name duration timing-function delay iteration-count direction;
}

Example:

Copy
@keyframes slideIn {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(0); }
}
div {
  animation: slideIn 0.5s ease-out;
}

Applying Transitions and Animations to the Portfolio

1. Navigation Links:

   • Add hover effects with smooth color transitions.

   Copy
   nav a {
     transition: color 0.3s ease, background-color 0.3s ease;
   }
   nav a:hover {
     background-color: rgba(0, 123, 255, 0.1);
     color: #ff6f61;
   }

2. Buttons:

   • Scale buttons slightly on hover.

   Copy
   form button {
     transition: transform 0.3s ease, background-color 0.3s ease;
   }
   form button:hover {
     transform: scale(1.05);
     background-color: #0056b3;
   }

3. Images:

   • Scale images on hover for a zoom effect.

   Copy
   img {
     transition: transform 0.3s ease, box-shadow 0.3s ease;
   }
   img:hover {
     transform: scale(1.05);
     box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
   }

4. Header Text Animation:

   • Animate the header text to fade in and slide from the top on page load.

   Copy
   @keyframes fadeSlideIn {
     0% {
       opacity: 0;
       transform: translateY(-20px);
     }
     100% {
       opacity: 1;
       transform: translateY(0);
     }
   }
   header h1 {
     animation: fadeSlideIn 1s ease-out;
   }
   header h2 {
     animation: fadeSlideIn 1s ease-out 0.3s; /* Delayed start */
   }

5. Skills Section Animation:

   • Add a subtle bounce-in effect for skills.

   Copy
   @keyframes bounceIn {
     0% {
       transform: scale(0.8);
       opacity: 0;
     }
     50% {
       transform: scale(1.1);
       opacity: 0.5;
     }
     100% {
       transform: scale(1);
       opacity: 1;
     }
   }
   #skills li {
     animation: bounceIn 0.6s ease-out;
   }

Updated CSS

Here’s the updated styles.css with animations and transitions:

Copy
/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Global Styles */
body {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  background-color: #f4f4f4;
  color: #212529;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  line-height: 1.3;
}

/* Header */
header {
  background-image: url('images/header-bg.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  color: #ffffff;
  padding: 40px;
  text-align: center;
}
header h1 {
  font-size: 36px;
  animation: fadeSlideIn 1s ease-out;
}
header h2 {
  font-size: 20px;
  font-weight: 400;
  animation: fadeSlideIn 1s ease-out 0.3s;
}

/* Navigation */
nav ul {
  display: flex;
  justify-content: center;
  gap: 20px;
  list-style: none;
  padding: 0;
}
nav a {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  text-transform: uppercase;
  color: #007bff;
  text-decoration: none;
  font-weight: bold;
  padding: 10px 15px;
  border-radius: 4px;
  transition: color 0.3s ease, background-color 0.3s ease;
}
nav a:hover {
  background-color: rgba(0, 123, 255, 0.1);
  color: #ff6f61;
}

/* Sections */
#about-me, #skills, #projects, #contact {
  margin: 40px auto;
  max-width: 800px;
  padding: 20px;
  background: linear-gradient(to bottom, #ffffff, #f8f9fa);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  border: 1px solid #dee2e6;
}
p {
  font-weight: 300;
}

/* Images */
img {
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  max-width: 100%;
  height: auto;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
img:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
}

/* Skills Section */
#skills ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  list-style: none;
  padding: 0;
}
#skills li {
  background-color: #007bff;
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 4px;
  font-weight: bold;
  animation: bounceIn 0.6s ease-out;
}

/* Projects Table */
table {
  width: 100%;
  border-collapse: collapse;
}
table th, table td {
  border: 1px solid #dee2e6;
  padding: 10px;
  text-align: left;
}
table th {
  background-color: #343a40;
  color: #ffffff;
}
table caption {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 10px;
}

/* Contact Form */
form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
form label {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}
form input, form textarea, form select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ced4da;
  border-radius: 4px;
}
form button {
  background-color: #007bff;
  color: #ffffff;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: 600;
  transition: transform 0.3s ease, background-color 0.3s ease;
}
form button:hover {
  transform: scale(1.05);
  background-color: #0056b3;
}

/* Footer */
footer {
  background-color: #343a40;
  color: #ffffff;
  text-align: center;
  padding: 20px;
}
footer a {
  color: #007bff;
  text-decoration: none;
  font-weight: 400;
}
footer a:hover {
  color: #ff6f61;
  text-decoration: underline;
}

/* Animations */
@keyframes fadeSlideIn {
  0

% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bounceIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

---

Styling Skills as Gradient Cards

To make the skills section more visually appealing, we will style each skill as a card with individual gradient backgrounds. This will add depth and modern design aesthetics to the portfolio.

Plan for Gradient Cards

1. Each Skill as a Card:
   • Use Flexbox to arrange skill cards in a responsive grid.
   • Apply different gradient backgrounds for each skill.
2. Card Design:
   • Add padding, border-radius, and shadows for a card-like effect.
   • Center-align the text.

CSS for Gradient Cards

1. Flexbox Layout:

   • Arrange the skill cards in a grid using Flexbox.

2. Skill Card Styling:

   • Set fixed dimensions for the cards.
   • Add gradient backgrounds, padding, and rounded corners.

3. Responsive Adjustments:

   • Ensure the cards resize appropriately on smaller screens.

CSS Code for Skills Section

Copy
/* Skills Section */
#skills ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  list-style: none;
  padding: 0;
}

#skills li {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 120px;
  height: 120px;
  padding: 15px;
  font-size: 14px;
  font-weight: bold;
  color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Different Gradient Backgrounds for Each Skill */
#skills li:nth-child(1) {
  background: linear-gradient(135deg, #ff6f61, #ff8e53);
}

#skills li:nth-child(2) {
  background: linear-gradient(135deg, #6a11cb, #2575fc);
}

#skills li:nth-child(3) {
  background: linear-gradient(135deg, #43cea2, #185a9d);
}

#skills li:nth-child(4) {
  background: linear-gradient(135deg, #f7971e, #ffd200);
}

#skills li:nth-child(5) {
  background: linear-gradient(135deg, #f953c6, #b91d73);
}

/* Hover Effect for Cards */
#skills li:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
}

Updated Skills Section in HTML

Update the Skills section in your HTML as follows:

Copy
<section id="skills">
  <h2>Skills</h2>
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>React</li>
    <li>Node.js</li>
  </ul>
</section>

Preview of the Changes

1. Each skill will now appear as a card with:
   • Distinct gradient backgrounds.
   • Smooth hover effects (scaling and shadow changes).
2. The cards will be arranged in a responsive grid:
   • On larger screens, the cards will align horizontally with gaps.
   • On smaller screens, the cards will wrap and align centrally.

Responsive Adjustments

Ensure the cards adapt to smaller screens by modifying their layout:

Copy
@media (max-width: 768px) {
  #skills li {
    width: 100px;
    height: 100px;
    font-size: 12px;
  }
}

---

Full Portfolio Styles

Here's the complete CSS code combining all styles:

Copy
/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Global Styles */
body {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  background-color: #f4f4f4;
  color: #212529;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  line-height: 1.3;
}

/* Header */
header {
  background-image: url('images/header-bg.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  color: #ffffff;
  padding: 40px;
  text-align: center;
}
header h1 {
  font-size: 36px;
  animation: fadeSlideIn 1s ease-out;
}
header h2 {
  font-size: 20px;
  font-weight: 400;
  animation: fadeSlideIn 1s ease-out 0.3s;
}

/* Navigation */
nav ul {
  display: flex;
  justify-content: center;
  gap: 20px;
  list-style: none;
  padding: 0;
}
nav a {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  text-transform: uppercase;
  color: #007bff;
  text-decoration: none;
  font-weight: bold;
  padding: 10px 15px;
  border-radius: 4px;
  transition: color 0.3s ease, background-color 0.3s ease;
}
nav a:hover {
  background-color: rgba(0, 123, 255, 0.1);
  color: #ff6f61;
}

/* Sections */
#about-me, #skills, #projects, #contact {
  margin: 40px auto;
  max-width: 800px;
  padding: 20px;
  background: linear-gradient(to bottom, #ffffff, #f8f9fa);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  border: 1px solid #dee2e6;
}
p {
  font-weight: 300;
}

/* Images */
img {
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  max-width: 100%;
  height: auto;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
img:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
}

/* Skills Section */
#skills ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  list-style: none;
  padding: 0;
}
#skills li {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 120px;
  height: 120px;
  padding: 15px;
  font-size: 14px;
  font-weight: bold;
  color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Different Gradient Backgrounds for Each Skill */
#skills li:nth-child(1) {
  background: linear-gradient(135deg, #ff6f61, #ff8e53);
}
#skills li:nth-child(2) {
  background: linear-gradient(135deg, #6a11cb, #2575fc);
}
#skills li:nth-child(3) {
  background: linear-gradient(135deg, #43cea2, #185a9d);
}
#skills li:nth-child(4) {
  background: linear-gradient(135deg, #f7971e, #ffd200);
}
#skills li:nth-child(5) {
  background: linear-gradient(135deg, #f953c6, #b91d73);
}

/* Hover Effect for Cards */
#skills li:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
}

/* Responsive Adjustments for Skills Section */
@media (max-width: 768px) {
  #skills li {
    width: 100px;
    height: 100px;
    font-size: 12px;
  }
}

/* Projects Table */
table {
  width: 100%;
  border-collapse: collapse;
}
table th, table td {
  border: 1px solid #dee2e6;
  padding: 10px;
  text-align: left;
}
table th {
  background-color: #343a40;
  color: #ffffff;
}
table caption {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 10px;
}

/* Contact Form */
form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
form label {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}
form input, form textarea, form select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ced4da;
  border-radius: 4px;
}
form button {
  background-color: #007bff;
  color: #ffffff;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: 600;
  transition: transform 0.3s ease, background-color 0.3s ease;
}
form button:hover {
  transform: scale(1.05);
  background-color: #0056b3;
}

/* Footer */
footer {
  background-color: #343a40;
  color: #ffffff;
  text-align: center;
  padding: 20px;
}
footer a {
  color: #007bff;
  text-decoration: none;
  font-weight: 400;
}
footer a:hover {
  color: #ff6f61;
  text-decoration: underline;
}

/* Animations */
@keyframes fadeSlideIn {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bounceIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}