This course demystifies Python programming for beginners, offering a path to learn Python from scratch, build foundational skills in Python programming, and begin your journey as a Python developer.

python11.tar.gz

while-challenge

This course is designed for you to learn Python from scratch, making it ideal for anyone interested in Python programming for beginners. Using Edward the robot to gamify concepts, you'll explore Python programming fundamentals, from built-in functions to user-defined functions and basic data types. You’ll also learn how to write programs using sequential, selective, and iterative structures. By completing hands-on projects, you'll gain the skills needed to kickstart your career as a Python developer and become a lifelong learner in computing.

Learn Python

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Example</title>

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">

  <body>
      
      <div class = "container" id='main-container'>
        <div class="grid-container">
        </div>

        <div class="grid-container-transparent">
        </div>

        <div class="message-box" style="display: none;">  
            <div class="box-heading">
                <p>Memory Box</p>
            </div>
            <p id="memo1"></p>
            <p id="memo2"></p>
            <p id="demo"></p>            
        </div>

        <div class="btn-container">
            <div class="move-button">
                <button id="move-btn", style="font-family:'Helvetica'; font-size:18px;">move()</button>
            </div>

            <div class="turn-button">
                <button id="turn-btn", style="font-family:'Helvetica'; font-size:18px;">turn()</button>
            </div>

            

            

            <div class="reset-button">
                <button id="reset-btn", style="font-family:'Helvetica'; font-size:18px;">Reset</button>
            </div>
        </div>

        <div class="log-box", style='height:280px; overflow:auto;'>
            <p id="command-log"></p>
        </div>

        <div class="arcade-box">
            <p>Command log</p>
        </div>

        <div class="passcode-box" id="inputBubble" style="display: none;">
            <input class="input-field" type="input" id="passwordInput" style="font-family: 'Helvetica'; font-size:16px;" placeholder="Enter the answer">
            <button class="submit-button" id="submitButton" style="font-family: 'Helvetica'; font-size:16px;">Submit</button>
        </div>

        <div class="decision-box" style="display: none" id="pass-box">
            <p id="passcode-decision" style="font-family: 'Helvetica'; font-size:16px;">What is 8-3+5?</p>
        </div>    
    
      </div>
      <script src="https://cdn.jsdelivr.net/npm/confetti-js@0.0.18/dist/index.min.js"></script>
      <canvas id="my-canvas"></canvas>
  </body>

</head>
</html>

body{
    font-family: 'Helvetica', sans-serif; 
    font-weight: bold;
}

.container {
    display: flex;
}

.decision-box {
    position: absolute;
    top: 0px;
    left: 285px;
    padding: 5px;
    width: 350px; /* Increased width for the background */
    height: fit-content; /* Increased height for the background */
    background-color: white; /* Background color */
    border: 1px solid black;
    border-radius: 5px;
    text-align: center;
    line-height: 16pt;
}

.passcode-box {
    position: absolute;
    top: 355px;
    left: 274px;
    padding: 5px;
    width:0px; /* Increased width for the background */
    height: 0px; /* Increased height for the background */
    background-color: none; /* Background color */
    border: 0px solid black;
    border-radius: 5px;
}

.input-field {
    position: absolute;
    width: 220px;
    height: 20px;
    left: 25px;
    top: 10px;
}

.submit-button {
    position: absolute;
    width: 100px;
    height: 25px;
    top: 10px;
    left: 260px;
}

.grid-item {
    width: 70px; /* Adjust the width as needed */
    height: 70px; /* Adjust the height as needed */
    border: 1px solid black; /* Optional border around each cell */
    background-size: cover;  /* Ensure the background image covers the entire grid item */
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(5, 70px);
    grid-template-rows: repeat(5, 70px);
    gap: 0px; /* Adjust this value for spacing between grid cells */
    border: 0px solid black; /* Optional border around the grid */
    /* width: fit-content;*/ /* Set width to fit the content */
    margin: 0 auto; /* Center the grid horizontally */
    position: absolute;
    left: 290px;
}

.transparent-item {
    width: 10px; /* Adjust the width as needed */
    height: 10px; /* Adjust the height as needed */
    border: 1px solid black; /* Optional border around each cell */
    background-size: cover;  /* Ensure the background image covers the entire grid item */
}

.grid-container-transparent {
    display: grid;
    grid-template-columns: repeat(5, 10px);
    grid-template-rows: repeat(3, 10px);
    gap: 0px; /* Adjust this value for spacing between grid cells */
    border: 0px solid black; /* Optional border around the grid */
    /* width: fit-content;*/ /* Set width to fit the content */
    margin: 0 auto; /* Center the grid horizontally */
    position: absolute;
    right: 200px;
    opacity: 0;
}

.message-box {
    position: absolute;
    top: 255px;
    left: 10px;
    width: 210px; /* Increased width for the background */
    height: 100px; /* Increased height for the background */
    background-color: white; /* Background color */
    border: 1px solid black;
    border-radius: 5px;
    text-align: left;
    // font-family: "Press Start 2P", system-ui;
    font-weight: 100;
    font-size: 16px;
    font-style: normal;
    padding-left: 5px;
    padding-right: 5px;
    line-height: 16pt;
}

.log-box {
   position: absolute;
   top: 60px;
   left: 730px;
   width: 180px; /* Increased width for the background */
   height: 280px; /* Increased height for the background */
   /* background-color: white; */ /* Background color */
   border: 1px solid black;
   align-items: center;
   border-radius: 5px;
   text-align: left;
   font-family: "Helvetica";
   font-weight: 100;
   font-size: 18px;
   font-style: normal;
   padding-left: 5px;
   padding-right: 5px;
   line-height: 16pt;
   background-color: white;
}
.arcade-box {
   position: absolute;
   top: 20px;
   left: 756px;
   border: 1px solid black;
   padding-left: 10px;
   padding-right: 10px;
   background-color: white;
   border-radius: 5px;
   font-size: 18px;
   line-height: 8pt;
   text-align: center;
   width: fit-content; /* Set width to fit the content */
   font-family: 'Helvetica', sans-serif;
   font-weight: bold;
}

.task-box {
    font-size: 18px;
}

.box-heading {
    border: 1px solid black;
    padding-left: 10px;
    padding-right: 10px;
    background-color: white;
    border-radius: 5px;
    margin-top: -25px;
    font-size: 18px;
    line-height: 8pt;
    text-align: center;
    width: fit-content; /* Set width to fit the content */
}

.white {
    background-color: white;
}

.gray {
    background-color: #ccc;
}

.yellow {
    background-color: yellow;
}

.green {
    background-color: lightgreen;
}

.orange {
    background-color: orange;
}

.black {
    background-color: black;
}

.btn-container {
    position: absolute;
    left: 0px;
    top: 0px;
}

.move-button {
    position: absolute;
    left: 10px;
    text-align: center;
    top: 20px;
}

.turn-button {
    position: absolute;
    left: 90px;
    text-align: center;
    top: 20px;
    pad: 15px;
}

.plant-button {
    position: absolute;
    left: 10px;
    top: 80px;
    text-align: center;
}

.trash-button {
    position: absolute;
    left: 10px;
    top: 50px;
    text-align: center;
}

.print-button {
    position: absolute;
    left: 10px;
    top: 110px;
    text-align: center;
}

.reset-button {
    position: absolute;
    left: 10px;
    top: 190px;
    text-align: center;
}

@keyframes shake {
    0% { transform: translateX(0); }
    10% { transform: translateX(-5px); }
    20% { transform: translateX(5px); }
    30% { transform: translateX(-5px); }
    40% { transform: translateX(5px); }
    50% { transform: translateX(-5px); }
    60% { transform: translateX(5px); }
    70% { transform: translateX(-5px); }
    80% { transform: translateX(5px); }
    90% { transform: translateX(-5px); }
    100% { transform: translateX(0); }
}

.shake-animation {
    animation: shake 0.5s ease-in-out;
}


codemirror

Learn to give input to a computer program.

Introduction to Python Programming

Python Functions, Conditional Statements, and Error Handling

Loops in Python

Assessment on Common Programming Mistakes and Misconceptions

Input to the Rescue

Answering Edward’s riddle

Input in Python