Toggle menu
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

Main Page: Difference between revisions

From ComputerScience.wiki
No edit summary
Line 1: Line 1:
<templatestyles src="Template:Main_Page/styles.css" />
<templatestyles src="Template:Main_Page/styles.css" />


== ComputerScience.wiki ==
<div style="max-width: 1200px; margin: 0 auto; padding: 0 16px;">
Free computer science education for everyone
  <!-- Hero Banner -->
  <div style="background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); border-radius: 16px; margin: 32px 0; padding: 48px 32px; text-align: center; color: white; box-shadow: 0 8px 20px rgba(37, 99, 235, 0.15);">
    <div style="font-size: 2.5rem; font-weight: 700; margin: 0 0 16px 0;">ComputerScience.wiki</div>
    <div style="font-size: 1.2rem; max-width: 700px; margin: 0 auto;">Free computer science education for everyone</div>
  </div>
 
  <!-- Search Bar -->
  <div style="max-width: 700px; margin: -24px auto 40px; position: relative; z-index: 5;">
    <div style="{{If dark|background-color: #111827; border: 1px solid #1f2937; color: #e5e7eb;|background-color: #ffffff; border: 1px solid #e5e7eb; color: #1f2937;}} border-radius: 12px; padding: 24px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);">
      <inputbox>
      type=search
      width=100%
      buttonlabel=Search
      break=no
      placeholder=Search courses and topics...
      </inputbox>
    </div>
  </div>
 
  <!-- Explore Topics Section -->
  <div style="margin: 48px 0;">
    <div style="font-size: 1.8rem; font-weight: 700; text-align: center; margin-bottom: 40px; {{If dark|color: #60a5fa;|color: #2563eb;}}">Explore Topics</div>
   
    <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 24px;">
      <!-- Software Development -->
      <div style="{{If dark|background-color: #111827; border: 1px solid #1f2937; color: #e5e7eb;|background-color: #ffffff; border: 1px solid #e5e7eb; color: #1f2937;}} border-radius: 12px; padding: 24px; transition: transform 0.3s; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);">
        <div style="display: flex; align-items: center; margin-top: 0; font-size: 1.2rem; font-weight: 700; {{If dark|color: #60a5fa;|color: #2563eb;}}">
          <span style="display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; margin-right: 12px; background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); color: white; font-size: 1.2rem;">💻</span>
          Software Development
        </div>
        <div style="margin-top: 16px;">
          <div style="list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px;">
            <div>[[Python|<span style="{{If dark|color: #d1d5db;|color: #4b5563;}} text-decoration: none; padding: 4px 0;">Python</span>]]</div>
            <div>[[Java|<span style="{{If dark|color: #d1d5db;|color: #4b5563;}} text-decoration: none; padding: 4px 0;">Java</span>]]</div>
            <div>[[C and C++|<span style="{{If dark|color: #d1d5db;|color: #4b5563;}} text-decoration: none; padding: 4px 0;">C/C++</span>]]</div>
            <div>[[JavaScript|<span style="{{If dark|color: #d1d5db;|color: #4b5563;}} text-decoration: none; padding: 4px 0;">JavaScript</span>]]</div>
            <div>[[Web Development|<span style="{{If dark|color: #d1d5db;|color: #4b5563;}} text-decoration: none; padding: 4px 0;">Web Dev</span>]]</div>
            <div>[[Mobile Development|<span style="{{If dark|color: #d1d5db;|color: #4b5563;}} text-decoration: none; padding: 4px 0;">Mobile</span>]]</div>
          </div>
        </div>
      </div>
     
      <!-- Data Science -->
      <div style="{{If dark|background-color: #111827; border: 1px solid #1f2937; color: #e5e7eb;|background-color: #ffffff; border: 1px solid #e5e7eb; color: #1f2937;}} border-radius: 12px; padding: 24px; transition: transform 0.3s; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);">
        <div style="display: flex; align-items: center; margin-top: 0; font-size: 1.2rem; font-weight: 700; {{If dark|color: #60a5fa;|color: #2563eb;}}">
          <span style="display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; margin-right: 12px; background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); color: white; font-size: 1.2rem;">📊</span>
          Data Science
        </div>
        <div style="margin-top: 16px;">
          <div style="list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px;">
            <div>[[Machine Learning|<span style="{{If dark|color: #d1d5db;|color: #4b5563;}} text-decoration: none; padding: 4px 0;">Machine Learning</span>]]</div>
            <div>[[Data Analysis|<span style="{{If dark|color: #d1d5db;|color: #4b5563;}} text-decoration: none; padding: 4px 0;">Data Analysis</span>]]</div>
            <div>[[Statistics|<span style="{{If dark|color: #d1d5db;|color: #4b5563;}} text-decoration: none; padding: 4px 0;">Statistics</span>]]</div>
            <div>[[Data Visualization|<span style="{{If dark|color: #d1d5db;|color: #4b5563;}} text-decoration: none; padding: 4px 0;">Visualization</span>]]</div>
            <div>[[Tableau|<span style="{{If dark|color: #d1d5db;|color: #4b5563;}} text-decoration: none; padding: 4px 0;">Tableau</span>]]</div>
            <div>[[R Programming|<span style="{{If dark|color: #d1d5db;|color: #4b5563;}} text-decoration: none; padding: 4px 0;">R</span>]]</div>
          </div>
        </div>
      </div>


<div class="cs-search-container">
      <!-- Big Data -->
<inputbox>
      <div style="{{If dark|background-color: #111827; border: 1px solid #1f2937; color: #e5e7eb;|background-color: #ffffff; border: 1px solid #e5e7eb; color: #1f2937;}} border-radius: 12px; padding: 24px; transition: transform 0.3s; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);">
type=search
        <div style="display: flex; align-items: center; margin-top: 0; font-size: 1.2rem; font-weight: 700; {{If dark|color: #60a5fa;|color: #2563eb;}}">
width=100%
          <span style="display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; margin-right: 12px; background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); color: white; font-size: 1.2rem;">📈</span>
buttonlabel=Search
          Big Data
break=no
        </div>
placeholder=Search courses and topics...
        <div style="margin-top: 16px;">
</inputbox>
          <div style="list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px;">
            <div>[[Hadoop|<span style="{{If dark|color: #d1d5db;|color: #4b5563;}} text-decoration: none; padding: 4px 0;">Hadoop</span>]]</div>
            <div>[[Spark|<span style="{{If dark|color: #d1d5db;|color: #4b5563;}} text-decoration: none; padding: 4px 0;">Spark</span>]]</div>
            <div>[[Cloudera|<span style="{{If dark|color: #d1d5db;|color: #4b5563;}} text-decoration: none; padding: 4px 0;">Cloudera</span>]]</div>
            <div>[[Snowflake|<span style="{{If dark|color: #d1d5db;|color: #4b5563;}} text-decoration: none; padding: 4px 0;">Snowflake</span>]]</div>
            <div>[[Data Warehousing|<span style="{{If dark|color: #d1d5db;|color: #4b5563;}} text-decoration: none; padding: 4px 0;">Data Warehousing</span>]]</div>
            <div>[[NoSQL|<span style="{{If dark|color: #d1d5db;|color: #4b5563;}} text-decoration: none; padding: 4px 0;">NoSQL</span>]]</div>
          </div>
        </div>
      </div>
     
      <!-- Networking -->
      <div style="{{If dark|background-color: #111827; border: 1px solid #1f2937; color: #e5e7eb;|background-color: #ffffff; border: 1px solid #e5e7eb; color: #1f2937;}} border-radius: 12px; padding: 24px; transition: transform 0.3s; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);">
        <div style="display: flex; align-items: center; margin-top: 0; font-size: 1.2rem; font-weight: 700; {{If dark|color: #60a5fa;|color: #2563eb;}}">
          <span style="display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; margin-right: 12px; background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); color: white; font-size: 1.2rem;">🌐</span>
          Networking
        </div>
        <div style="margin-top: 16px;">
          <div style="list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px;">
            <div>[[Network Protocols|<span style="{{If dark|color: #d1d5db;|color: #4b5563;}} text-decoration: none; padding: 4px 0;">Protocols</span>]]</div>
            <div>[[Network Architecture|<span style="{{If dark|color: #d1d5db;|color: #4b5563;}} text-decoration: none; padding: 4px 0;">Architecture</span>]]</div>
            <div>[[Cloud Networking|<span style="{{If dark|color: #d1d5db;|color: #4b5563;}} text-decoration: none; padding: 4px 0;">Cloud</span>]]</div>
            <div>[[Network Security|<span style="{{If dark|color: #d1d5db;|color: #4b5563;}} text-decoration: none; padding: 4px 0;">Security</span>]]</div>
            <div>[[Wireless Networks|<span style="{{If dark|color: #d1d5db;|color: #4b5563;}} text-decoration: none; padding: 4px 0;">Wireless</span>]]</div>
            <div>[[SDN|<span style="{{If dark|color: #d1d5db;|color: #4b5563;}} text-decoration: none; padding: 4px 0;">SDN</span>]]</div>
          </div>
        </div>
      </div>
     
      <!-- Cybersecurity -->
      <div style="{{If dark|background-color: #111827; border: 1px solid #1f2937; color: #e5e7eb;|background-color: #ffffff; border: 1px solid #e5e7eb; color: #1f2937;}} border-radius: 12px; padding: 24px; transition: transform 0.3s; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);">
        <div style="display: flex; align-items: center; margin-top: 0; font-size: 1.2rem; font-weight: 700; {{If dark|color: #60a5fa;|color: #2563eb;}}">
          <span style="display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; margin-right: 12px; background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); color: white; font-size: 1.2rem;">🔒</span>
          Cybersecurity
        </div>
        <div style="margin-top: 16px;">
          <div style="list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px;">
            <div>[[Cryptography|<span style="{{If dark|color: #d1d5db;|color: #4b5563;}} text-decoration: none; padding: 4px 0;">Cryptography</span>]]</div>
            <div>[[Penetration Testing|<span style="{{If dark|color: #d1d5db;|color: #4b5563;}} text-decoration: none; padding: 4px 0;">Pen Testing</span>]]</div>
            <div>[[Security Frameworks|<span style="{{If dark|color: #d1d5db;|color: #4b5563;}} text-decoration: none; padding: 4px 0;">Frameworks</span>]]</div>
            <div>[[Malware Analysis|<span style="{{If dark|color: #d1d5db;|color: #4b5563;}} text-decoration: none; padding: 4px 0;">Malware</span>]]</div>
            <div>[[Identity Management|<span style="{{If dark|color: #d1d5db;|color: #4b5563;}} text-decoration: none; padding: 4px 0;">Identity</span>]]</div>
            <div>[[Security Operations|<span style="{{If dark|color: #d1d5db;|color: #4b5563;}} text-decoration: none; padding: 4px 0;">SecOps</span>]]</div>
          </div>
        </div>
      </div>
     
      <!-- CS Fundamentals -->
      <div style="{{If dark|background-color: #111827; border: 1px solid #1f2937; color: #e5e7eb;|background-color: #ffffff; border: 1px solid #e5e7eb; color: #1f2937;}} border-radius: 12px; padding: 24px; transition: transform 0.3s; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);">
        <div style="display: flex; align-items: center; margin-top: 0; font-size: 1.2rem; font-weight: 700; {{If dark|color: #60a5fa;|color: #2563eb;}}">
          <span style="display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; margin-right: 12px; background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); color: white; font-size: 1.2rem;">🧩</span>
          CS Fundamentals
        </div>
        <div style="margin-top: 16px;">
          <div style="list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px;">
            <div>[[Algorithms|<span style="{{If dark|color: #d1d5db;|color: #4b5563;}} text-decoration: none; padding: 4px 0;">Algorithms</span>]]</div>
            <div>[[Data Structures|<span style="{{If dark|color: #d1d5db;|color: #4b5563;}} text-decoration: none; padding: 4px 0;">Data Structures</span>]]</div>
            <div>[[Theory of Computation|<span style="{{If dark|color: #d1d5db;|color: #4b5563;}} text-decoration: none; padding: 4px 0;">Computation</span>]]</div>
            <div>[[Operating Systems|<span style="{{If dark|color: #d1d5db;|color: #4b5563;}} text-decoration: none; padding: 4px 0;">OS</span>]]</div>
            <div>[[Compilers|<span style="{{If dark|color: #d1d5db;|color: #4b5563;}} text-decoration: none; padding: 4px 0;">Compilers</span>]]</div>
            <div>[[Computer Architecture|<span style="{{If dark|color: #d1d5db;|color: #4b5563;}} text-decoration: none; padding: 4px 0;">Architecture</span>]]</div>
          </div>
        </div>
      </div>
    </div>
  </div>
 
  <!-- Featured Courses Section -->
  <div style="margin: 64px 0;">
    <div style="font-size: 1.8rem; font-weight: 700; text-align: center; margin-bottom: 40px; {{If dark|color: #60a5fa;|color: #2563eb;}}">Featured Courses</div>
   
    <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 24px;">
      <!-- Python Course -->
      <div style="{{If dark|background-color: #111827; border: 1px solid #1f2937; color: #e5e7eb;|background-color: #ffffff; border: 1px solid #e5e7eb; color: #1f2937;}} border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; height: 100%; transition: transform 0.3s; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);">
        <div style="height: 180px; background: linear-gradient(135deg, #4B6EAD 0%, #306998 100%); display: flex; align-items: center; justify-content: center; color: white; font-size: 1.8rem; font-weight: 700;">Python</div>
        <div style="padding: 24px; display: flex; flex-direction: column; flex: 1;">
          <div style="margin-top: 0; {{If dark|color: #60a5fa;|color: #2563eb;}} font-size: 1.4rem; font-weight: 700;">Python Programming</div>
          <div style="margin: 16px 0 24px; {{If dark|color: #9ca3af;|color: #6b7280;}} flex: 1;">From basics to advanced concepts - master Python with practical examples and hands-on projects for all skill levels.</div>
          <div>
            [[Python Course|<span style="display: inline-block; padding: 10px 20px; text-decoration: none; border-radius: 6px; font-weight: 500; {{If dark|background-color: #3b82f6;|background-color: #2563eb;}} color: white;">Start Learning →</span>]]
          </div>
        </div>
      </div>
     
      <!-- Algorithms Course -->
      <div style="{{If dark|background-color: #111827; border: 1px solid #1f2937; color: #e5e7eb;|background-color: #ffffff; border: 1px solid #e5e7eb; color: #1f2937;}} border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; height: 100%; transition: transform 0.3s; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);">
        <div style="height: 180px; background: linear-gradient(135deg, #FF6B6B 0%, #E63946 100%); display: flex; align-items: center; justify-content: center; color: white; font-size: 1.8rem; font-weight: 700;">Algorithms</div>
        <div style="padding: 24px; display: flex; flex-direction: column; flex: 1;">
          <div style="margin-top: 0; {{If dark|color: #60a5fa;|color: #2563eb;}} font-size: 1.4rem; font-weight: 700;">Data Structures & Algorithms</div>
          <div style="margin: 16px 0 24px; {{If dark|color: #9ca3af;|color: #6b7280;}} flex: 1;">Essential CS fundamentals for interviews and problem-solving with interactive challenges and visual explanations.</div>
          <div>
            [[Algorithms Course|<span style="display: inline-block; padding: 10px 20px; text-decoration: none; border-radius: 6px; font-weight: 500; {{If dark|background-color: #3b82f6;|background-color: #2563eb;}} color: white;">Start Learning →</span>]]
          </div>
        </div>
      </div>
     
      <!-- Web Development Course -->
      <div style="{{If dark|background-color: #111827; border: 1px solid #1f2937; color: #e5e7eb;|background-color: #ffffff; border: 1px solid #e5e7eb; color: #1f2937;}} border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; height: 100%; transition: transform 0.3s; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);">
        <div style="height: 180px; background: linear-gradient(135deg, #38BDF8 0%, #0EA5E9 100%); display: flex; align-items: center; justify-content: center; color: white; font-size: 1.8rem; font-weight: 700;">Web Development</div>
        <div style="padding: 24px; display: flex; flex-direction: column; flex: 1;">
          <div style="margin-top: 0; {{If dark|color: #60a5fa;|color: #2563eb;}} font-size: 1.4rem; font-weight: 700;">Modern Web Development</div>
          <div style="margin: 16px 0 24px; {{If dark|color: #9ca3af;|color: #6b7280;}} flex: 1;">Build responsive, interactive websites with the latest web technologies, frameworks, and best practices.</div>
          <div>
            [[Web Development Course|<span style="display: inline-block; padding: 10px 20px; text-decoration: none; border-radius: 6px; font-weight: 500; {{If dark|background-color: #3b82f6;|background-color: #2563eb;}} color: white;">Start Learning →</span>]]
          </div>
        </div>
      </div>
    </div>
  </div>
 
  <!-- Join Community Section -->
  <div style="background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); border-radius: 16px; padding: 48px 32px; margin: 64px 0; text-align: center; color: white; box-shadow: 0 8px 24px rgba(37, 99, 235, 0.2);">
    <div style="font-size: 2rem; font-weight: 700; margin-top: 0; margin-bottom: 16px; color: white;">Join Our Community</div>
    <div style="font-size: 1.1rem; max-width: 700px; margin: 0 auto 32px;">Help us build a comprehensive resource for computer science education. Share your knowledge and expertise with learners worldwide.</div>
    <div style="display: flex; justify-content: center; gap: 16px; flex-wrap: wrap;">
      [[Help:Contributing|<span style="display: inline-block; padding: 12px 24px; background-color: white; color: #2563eb; text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 1.05rem; transition: transform 0.15s;">How to Contribute</span>]]
      [[Project:Guidelines|<span style="display: inline-block; padding: 12px 24px; background-color: rgba(255, 255, 255, 0.15); color: white; text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 1.05rem; transition: transform 0.15s;">Content Guidelines</span>]]
    </div>
  </div>
 
  <!-- About Section -->
  <div style="{{If dark|background-color: #111827; border: 1px solid #1f2937; color: #e5e7eb;|background-color: #ffffff; border: 1px solid #e5e7eb; color: #1f2937;}} border-radius: 12px; padding: 32px; margin: 64px 0; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);">
    <div style="font-size: 1.5rem; font-weight: 700; margin-top: 0; margin-bottom: 16px; {{If dark|color: #60a5fa;|color: #2563eb;}}">About ComputerScience.wiki</div>
    <div style="font-size: 1.05rem; line-height: 1.7; margin: 0;">ComputerScience.wiki is a free, open-source educational platform dedicated to providing high-quality computer science resources for everyone. Our content is created by a community of educators, students, and professionals passionate about computer science education.</div>
  </div>
</div>
</div>



Revision as of 16:31, 10 August 2025

ComputerScience.wiki
Free computer science education for everyone
   <div style="background-color: #ffffff; border: 1px solid #e5e7eb; color: #1f2937;background-color: #111827; border: 1px solid #1f2937; color: #e5e7eb; border-radius: 12px; padding: 24px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);">
<div style="font-size: 1.8rem; font-weight: 700; text-align: center; margin-bottom: 40px; color: #2563eb;color: #60a5fa;">Explore Topics
     <div style="background-color: #ffffff; border: 1px solid #e5e7eb; color: #1f2937;background-color: #111827; border: 1px solid #1f2937; color: #e5e7eb; border-radius: 12px; padding: 24px; transition: transform 0.3s; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);">
       <div style="display: flex; align-items: center; margin-top: 0; font-size: 1.2rem; font-weight: 700; color: #2563eb;color: #60a5fa;">
         💻
         Software Development
     <div style="background-color: #ffffff; border: 1px solid #e5e7eb; color: #1f2937;background-color: #111827; border: 1px solid #1f2937; color: #e5e7eb; border-radius: 12px; padding: 24px; transition: transform 0.3s; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);">
       <div style="display: flex; align-items: center; margin-top: 0; font-size: 1.2rem; font-weight: 700; color: #2563eb;color: #60a5fa;">
         📊
         Data Science
     <div style="background-color: #ffffff; border: 1px solid #e5e7eb; color: #1f2937;background-color: #111827; border: 1px solid #1f2937; color: #e5e7eb; border-radius: 12px; padding: 24px; transition: transform 0.3s; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);">
       <div style="display: flex; align-items: center; margin-top: 0; font-size: 1.2rem; font-weight: 700; color: #2563eb;color: #60a5fa;">
         📈
         Big Data
     <div style="background-color: #ffffff; border: 1px solid #e5e7eb; color: #1f2937;background-color: #111827; border: 1px solid #1f2937; color: #e5e7eb; border-radius: 12px; padding: 24px; transition: transform 0.3s; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);">
       <div style="display: flex; align-items: center; margin-top: 0; font-size: 1.2rem; font-weight: 700; color: #2563eb;color: #60a5fa;">
         🌐
         Networking
     <div style="background-color: #ffffff; border: 1px solid #e5e7eb; color: #1f2937;background-color: #111827; border: 1px solid #1f2937; color: #e5e7eb; border-radius: 12px; padding: 24px; transition: transform 0.3s; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);">
       <div style="display: flex; align-items: center; margin-top: 0; font-size: 1.2rem; font-weight: 700; color: #2563eb;color: #60a5fa;">
         🔒
         Cybersecurity
     <div style="background-color: #ffffff; border: 1px solid #e5e7eb; color: #1f2937;background-color: #111827; border: 1px solid #1f2937; color: #e5e7eb; border-radius: 12px; padding: 24px; transition: transform 0.3s; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);">
       <div style="display: flex; align-items: center; margin-top: 0; font-size: 1.2rem; font-weight: 700; color: #2563eb;color: #60a5fa;">
         🧩
         CS Fundamentals
<div style="font-size: 1.8rem; font-weight: 700; text-align: center; margin-bottom: 40px; color: #2563eb;color: #60a5fa;">Featured Courses
     <div style="background-color: #ffffff; border: 1px solid #e5e7eb; color: #1f2937;background-color: #111827; border: 1px solid #1f2937; color: #e5e7eb; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; height: 100%; transition: transform 0.3s; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);">
Python
<div style="margin-top: 0; color: #2563eb;color: #60a5fa; font-size: 1.4rem; font-weight: 700;">Python Programming
<div style="margin: 16px 0 24px; color: #6b7280;color: #9ca3af; flex: 1;">From basics to advanced concepts - master Python with practical examples and hands-on projects for all skill levels.
     <div style="background-color: #ffffff; border: 1px solid #e5e7eb; color: #1f2937;background-color: #111827; border: 1px solid #1f2937; color: #e5e7eb; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; height: 100%; transition: transform 0.3s; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);">
Algorithms
<div style="margin-top: 0; color: #2563eb;color: #60a5fa; font-size: 1.4rem; font-weight: 700;">Data Structures & Algorithms

<div style="margin: 16px 0 24px; color: #6b7280;color: #9ca3af; flex: 1;">Essential CS fundamentals for interviews and problem-solving with interactive challenges and visual explanations.

     <div style="background-color: #ffffff; border: 1px solid #e5e7eb; color: #1f2937;background-color: #111827; border: 1px solid #1f2937; color: #e5e7eb; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; height: 100%; transition: transform 0.3s; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);">
Web Development
<div style="margin-top: 0; color: #2563eb;color: #60a5fa; font-size: 1.4rem; font-weight: 700;">Modern Web Development

<div style="margin: 16px 0 24px; color: #6b7280;color: #9ca3af; flex: 1;">Build responsive, interactive websites with the latest web technologies, frameworks, and best practices.

Join Our Community
Help us build a comprehensive resource for computer science education. Share your knowledge and expertise with learners worldwide.
 <div style="background-color: #ffffff; border: 1px solid #e5e7eb; color: #1f2937;background-color: #111827; border: 1px solid #1f2937; color: #e5e7eb; border-radius: 12px; padding: 32px; margin: 64px 0; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);">

<div style="font-size: 1.5rem; font-weight: 700; margin-top: 0; margin-bottom: 16px; color: #2563eb;color: #60a5fa;">About ComputerScience.wiki

ComputerScience.wiki is a free, open-source educational platform dedicated to providing high-quality computer science resources for everyone. Our content is created by a community of educators, students, and professionals passionate about computer science education.

Explore Topics

Software Development

Data Science

Big Data

Networking

Cybersecurity

CS Fundamentals

Python Programming From basics to advanced concepts - master Python with practical examples and hands-on projects for all skill levels. Start Learning →

Data Structures & Algorithms Essential CS fundamentals for interviews and problem-solving with interactive challenges and visual explanations. Start Learning →

Modern Web Development Build responsive, interactive websites with the latest web technologies, frameworks, and best practices. Start Learning →

Join Our Community

Help us build a comprehensive resource for computer science education. Share your knowledge and expertise with learners worldwide.

How to Contribute | Content Guidelines

About ComputerScience.wiki

ComputerScience.wiki is a free, open-source educational platform dedicated to providing high-quality computer science resources for everyone. Our content is created by a community of educators, students, and professionals passionate about computer science education.