My Coding Place logo

The Source Code

A Blog on Learning Coding and STEM skills



Algorithms are used by both computers and humans to make interconnected decisions throughout our world. Google's search algorithm sorts through billions of webpages, presenting desired information to you in milliseconds. GPS systems manage massive systems of transport, ride sharing, and shipping. Algorithmic trading executes high-speed decisions to determine optimal investments faster than any human. While these algorithms may sound intimidating, all algorithms are essentially detailed sets of instructions that computers follow to arrive at an answer. Humans also constantly utilize (simpler) algorithms: for example, a recipe to make dinner is an algorithm.


For kids, understanding the process of building an algorithm helps them build a strong foundation in logical thinking and problem solving. Algorithmic thinking in kids develops the cross-disciplinary skills to generate creative, original solutions to a wide array of problems in STEM and beyond. In this article, we'll walk through an example of an algorithm and real-world uses of algorithms across multiple fields.


Historical origins of algorithms


The term algorithm comes from 9th century Persian mathematician and geographer Muhammad ibn Musa al-Khwarizmi. The term algorithm was derived from the Latinization of his name to "Algoirtmi" when his book On the Calculations with Hindu Numerals was spread into Europe and translated into Latin as Algoritmi de numero Indorum. This book was critical to the development and utilization of the decimal system we use today. Al-Khwarizmi developed a systematic approach to solving linear and quadratic equations, which was then termed algebra. This algorithmic approach established the basis for modern mathematics.

In 1936, Alan Turing defined a foundational concept for computer scientists in his paper on the Turing machine. He illustrated that problems could be broken down and solved by machines executing algorithms to perform operations.


What is an algorithm?


An algorithm is a detailed, step-by-step process followed in order to accomplish a specific task or to solve a specific problem.

Computer algorithms can appear complex, but the underlying concept is approachable for both adults and kids. We can define an algorithm by writing out the step-by-step instructions, thinking about things in terms of discrete steps. For example, our algorithm for a child's morning routine could be the following:

  1. Wake up and turn off alarm

  2. Get dressed

  3. Brush teeth

  4. Eat breakfast

  5. Go to school


How do algorithms shape our world?


Google's PageRank algorithm determines how pages on the internet are displayed and ranked based on their relevance to your search. In less than a second, interrelated search algorithms process information extremely quickly, interpreting your query and returning personalized results.


Sites such as Amazon and Netflix base recommendations on collaborative filtering algorithms that look at other uses with similar interests and tastes and subsequently deliver predictions for purchases and shows.


Sorting information into logical order for better presentation and easier analysis is a fundamental consideration for interfaces and databases. Thus, efficient sorting of data is a very common algorithmic challenge. For a visual explanation of various sorting algorithms, this video presents 15 Sorting Algorithms in 6 Minutes, including merge sort and quick sort.

Mapping applications such as Google Maps need to calculate routes through cities, taking into account distance, traffic, and accidents. Tools such as Google Flights consider also routes through many airports while considering layovers, prices, and time. Next, we'll look at Dijkstra's algorithm, an algorithm that helps us find these optimal paths.


Shortest Path: Dijkstra's Algorithm


Consider the process of flying from New York City to San Francisco. There are a large number of different routes to get there: some are direct flights, but some have multiple stops. If we want to calculate the shortest way to get from New York City to San Francisco, we can look at a map with each city represented as a dot with routes between them. We could attach cost, distance, and time to each of these routes. That way, we could more easily weigh our options.

For example, we could fly from New York to Atlanta, and then from Atlanta to San Francisco, which would likely increase the cost, distance, and time required. If we want to figure out what the optimal path is for our specifications, we can create a graph that represents all of these interconnected cities. These cities are represented by nodes, and their connections (edges) are labeled with weights that represent the cost, distance, and time data we want to consider. These nodes and edges are represented by a graph.


How do we use this weighted graph that represents the 1,200 international airports and the flights between them? Dijkstra's algorithm is a famous pathfinding algorithm that determines the shortest path between weighted nodes in a graph. Dijkstra first came up with the algorithm as a "twenty-minute invention" in 1956 while considering what the shortest way to travel from Rotterdam to Groningen was. The algorithm is approachable and makes sense even without the context of computer programming.


Let's go back to our previous example and say that all the direct flights are sold out, so now we have to find a route with multiple stops, and we are purely optimizing for price. Beginning from New York City, we examine the nodes (airports) that are connected - let's say the options are flying to Atlanta ($150) and Denver ($300). We mark each node with the cumulative price so far. Then, let's say from Atlanta, we can fly to Denver ($100) or San Francisco ($200). Now, Denver is labeled as $250 ($150 + $100) and San Francisco is labeled as $350 ($150 + 200). Finally, let's say we can fly from Denver to San Francisco for $150. This is not optimal, as we already have an option that will get us to San Francisco for $350. So, we have found that the cheapest route is New York City -> Atlanta -> San Francisco.


In reality, there would be many more route options to consider, but the process the algorithm follows remains the same. The idea is to start at the origin and follow each possible route and update the price at each city to the cheapest way we can get there, repeating until we've considered all the possible routes to get to the destination. We've purposely left out some details, but this is the big picture. In more formal terms, we might describe the algorithm this way:


To go from point A to point B, the algorithm begins from point A, then looks for the unvisited node with the lowest weight. From that node, it looks at all of the connecting nodes and considers those weights. If this makes routes cost less than before, then the distance to that node is updated. For example, if the previous weight from A to C was 10, but the distance from A to B is 3 and the distance from B to C is 4, then we can update the new cost of going from A to C as a total of 7. From there, the algorithm repeats the steps of traversing the lowest possible distance to the next unvisited node until the final point is reached, and the lowest total cost is determined.


Because the essential steps are not overly complicated, much of the work of repeated calculation and consideration is shifted to the computer. That is the value of an algorithm, and why they are so useful in computer programming to break down tasks into chunks that can be solved through specific implementations.


Why are algorithms important for kids to learn?


Even if we're not conscious of it, we use algorithms all the time. Learning how to create algorithms not only lays a strong foundation in programming skills, but is also useful for developing logical thinking skills beyond writing computer code. Being able to understand and implement an algorithm in code requires students to practice their structured thinking and reasoning abilities.


Here are some problems you can ask your child to discuss algorithmic solutions with you:

  • How do we know if a number is odd or even?

  • How do we calculate all of the factors of a number (i.e. the numbers that divide into it without remainder)?

  • How can we tell if a number is prime?

  • Given a list of 10 numbers in random order, how can we put them order?


How can kids learn to program an algorithm?


In all of our online courses, students develop algorithmic thinking for solving problems. Through our private classes, our instructors are there to actively guide the student through learning new concepts, building their own projects, and solving problems in their code.

Throughout our courses, students are asked to consider problems like:

  • In order for the player to win the game, what conditions have to be met?

  • How can we keep track of the score in our game?

  • How can we count the number of times each letter appears in a word?

  • What are the steps we have to take to swap the smallest and largest numbers in a list of numbers?

In summary, the process of solving problems requires algorithmic thinking, or the process of breaking a problem down into repeatable steps. We encourage students to do this in all of our classes. Then, students learn to translate the logic into code. Coding is a tool to solve problems, but the end goal is for students to gain an understanding of approaches to problem-solving and to gain critical thinking skills that will benefit them in any activity.




This article originally appeared on junilearning.com


Project Introduction


In this tutorial, we’ll be creating a countdown timer that asks the user how much time (in seconds) they want to set the timer for — once time is up, print out “Blast Off!”.

We’ll also be creating an extension to this project where we’ll make a Pomodoro Timer with 25-minute and 5-minute intervals — the Pomodoro technique is a productivity method that is often used while studying or working. It uses a timer to break down work into intervals, traditionally 25 minutes in length, separated by short 5 minute breaks.

Watch the tutorial video to see how we code this game step-by-step, and continue reading this post for more details!

This project info and learning outcomes summary will help you decide if this Python coding project is right for you.


This beginner/intermediate Python tutorial is for students that want an Easy challenge project, about 10-15 lines of code for countdown timer, and 20-30 lines of code long for the pomodoro timer. You should review Python loops, strings, inputs, and conditionals beforehand to get the most out of this project.


Some other projects you can try first for more practice with beginner/intermediate Python are our how to make a calculator in Python and draw an animal face in Python tutorials.


For learning outcomes, you'll get a lot of practice with user input, while loops, modulo, Python time module, and floor div. This project is estimated to take you about 15-30 minutes, but you should move faster or slower at your own pace!


Project Demo


Before getting started, see how our finished project works for reference. Watch the video, or click run to see the project yourself!


You can also view my project solution code if you get stuck.


What to keep in mind before you start:


Remember that floor division in Python returns the quotient, but rounds down to the nearest integer. For example, 10 / 3 = 3.333, but 10 // 3 = 3.

The % symbol is called the modulo operator. It returns the remainder of dividing the left hand operand by right hand operand. For example, 10 % 3 = 1, because 3 goes into 10 three times, with a remainder of 1.


Steps to Code the Project:

  1. Set up the project and create a function that takes in an the number of seconds we want to count down for.

  2. Use a while loop so that we keep counting down until t is 0.

  3. Calculate the amount of time remaining and print out the timer.

How do we do each of these steps?


Step 1: Set up the project and create a function that takes in the number of seconds we want to count down for.

  • Import the time module and ask the user for the number of seconds they want to set the timer for.

Step 2: Use a while loop so that we keep counting down until t is 0.

  • Inside the loop, calculate the amount of time in minutes and seconds that the timer has left. (Hint: // and % may be helpful here. Remember that each minute has 60 seconds!)

  • Once you calculate the number of minutes and seconds, format the time to be in minutes:seconds using timer = '{:02d}:{:02d}'.format(mins, secs).

Step 3: Calculate the amount of time remaining and print out the timer.

  • Next, print out the timer and make sure to overwrite the previous time as the amount of time remaining continuously updates. (Hint: Use print(timer, end="\r")), the \r will allow us to overwrite the previous line).

  • Be sure to call time.sleep(1) to make sure our timer waits one second before decreasing as well as decrement it by 1 each time.

  • Once the timer runs out, print “Blast Off!”

Bonus: Make a Pomodoro Timer


Transform your countdown timer into a Pomodoro timer! It uses a timer to break down work into intervals, traditionally 25 minutes in length, separated by short 5 minute breaks.


Step 1. Set up the project and create a function.

  • Import the time module and print out “Pomodoro starts now!” at the beginning outside of the function

Step 2. Use a loop to create the 25-minute work time intervals. Traditionally, the Pomodoro technique has four intervals of 25-minute work time followed by 5-minute break time. We can use a for loop to repeat the following code four times.

  • Create a variable to keep track of the time remaining. Remember that each minute has 60 seconds, so our 25-minute work time should have 25*60 seconds at the start.

  • Calculate the amount of time in minutes and seconds that the timer has left. (Hint: // and % may be helpful here.)

  • Similar to the countdown timer from above, format the time to be in minutes:seconds using timer = '{:02d}:{:02d}'.format(mins, secs)

  • Next, print out the timer and make sure to overwrite the previous time as the amount of time remaining continuously updates. (Hint: Use print(timer, end="\r"), the \r will allow us to overwrite the previous line) .

  • After the 25-minute work time is up, print out “Break Time!

Step 3. Create the 5-minute break time timer.

  • Repeat Step 2 to program a 5-minute break time timer. Once the time is up, print out “Work Time!”

That's it! Great job!


Check out Juni Learning's step-by-step coding projects to find their other tutorials in Python and more coding languages!

A Juni Instructor teaches basic Python to a young student.



This article originally appeared on junilearning.com.

Updated: May 6

Code Your Own Website


Have you ever wanted to learn how to design web pages or make a site online? Today, we’re going to show you how to build your own personal website!


Read on for more information about the importance of learning web development, a step-by-step guide to accompany the video, and to learn about tools you can use to further enhance your web development experience.


REMEMBER:

  • The website in this tutorial is just an example project for teaching purposes. Before starting, keep in mind that minors should not post personal information online like your full name, address, or telephone number! Also be careful when uploading personal photos online.

  • If you’re unsure what is okay to upload, always check with an adult.

Who’s this for?



This project info and learning outcomes summary will help you decide if this HTML/CSS coding project is right for you.


This beginner HTML/CSS tutorial is for students that want a medium challenge project, about 121 lines of code long. It will help to have a basic understanding of how HTML and CSS work beforehand, but if you’re completely new, we also explain more basics in this video!


This tutorial is great for beginners in coding, especially those interested in design or art. We recommend that students be 12 years old or older to follow along.


For learning outcomes, you'll get a lot of practice with div, lists, links, position, display, text (h1/h2/p), fonts, and general CSS. This project is estimated to take you about 40 minutes or longer, depending on how creative you get, but you should move faster or slower at your own pace!


Why Learn Web Development?


These days, you don’t need to know web development or coding to create a website. Toward the end of this article, we’ll show you a few drag-and-drop website creators that will make the process incredibly easy to do. So why should you learn web development? That’s a great question.


Unlimited Customization


All of the easy website creation tools are actually limited. They offer you a set of themes and plugins that are very easy for beginners to use – as long as you don’t need to modify them.

When you do need to modify a theme or do something more custom with your website, however, you will need at least a basic understanding of web development code. As an example, with a bit of Javascript knowledge, you can integrate nearly any social media feed into your website!


Coding Careers & Foundations


If you’ve ever considered a career in coding, web design and web development knowledge will also give you a huge head start. Web development helps kids and new coders interested in art and design to explore their passion while also learning coding basics. Career aside, there are also countless life skill benefits to learning coding for kids.


Applicable to Many Fields


Lastly, being able to build your own website is a valuable skill in today’s digital age. Bloggers want developers to make them custom blogs. Internet businesses are looking for developers to build eCommerce sites instead of just posting items on Amazon.


It’s a golden age for website design and development, and a great time to learn how to build your own site!


Let’s Get Started!


We’re going to use basic HTML and CSS to learn how to make a simple personal website.


Project Demo


Before starting to write code, see how our finished project works for reference. Watch the video to check out all of our project website's features.


You can also view our project solution code if you get stuck.


What to keep in mind before you start:

  • There’s an image header with text on it. The text is different sizes, and uses two different fonts. It also has a white outline.

  • The white section below it has two parts side by side.

  • We have a list of hyperlinks, that link to another page. When you hover over them they change to blue.

  • There's also an About Me section with text.

  • Below that, there’s an experience section with a different color background.

Steps to Code the Project


To build our website, we’ll follow this order of steps. Watch the tutorial to see how Instructor Maya codes each part, and follow along with the explanations below.

  1. Add the image header & the text that goes on it.

  2. Create the list of links you’d like to share.

  3. Create the About Me section.

  4. Create the Experience section.

Step-by-Step Tutorial


Step 1: Add the image header & the text that goes on it.

  • Create a div with relative positioning to contain the image and text.

  • Create a div to contain the text, and use absolute positioning to place it on the image.

  • Use <h1> and <h3> to add the text.

  • Use CSS to modify the text font.

  • Use CSS to remove the extra margin & padding around the image.

Step 2: Create the list of links you’d like to share.

  • Create a div with relative positioning to contain the links and About Me section.

  • Add padding to the div.

  • Create a div with inline-block display to contain the links list.

  • Use <ul> to create a list.

  • Use <li> and <a> to create the links.

  • Use <i> and a font-awesome link to add icons.

  • Modify the CSS to make it look like the original.

NOTE:

Feel free to keep adding to this list if you'd like to include more links!


Step 3: Create the About Me section.

  • Create a div with inline-block display to contain the About Me section.

  • Use <h3> and <p> to add text.

Step 4: Create the Experience section.

  • Create a div with relative positioning to contain the Experience section.

  • Create a div for the first experience, and use <h4> and <p> to add text.

  • Add more experience divs!

Next steps


Great job! Now, feel free to add more sections to your website. Some ideas might include a section for projects that you’ve worked on or clubs that you’re in. You can also upload your new website to the web using Github and Github pages.


Webpage Creation Tools



As we mentioned earlier, there are several website creators out there. Most of the best website builders are made to streamline the process by providing you with templates, drag-and-drop interfaces, and any other functionalities that you need to create a free personal website.


Just because you have a basic understanding of web development doesn’t mean you should forget about these tools. They can help you host your new website, find a custom domain (the name and address of your website), and offer you templates, themes, and plugins that will speed up your web design process.


By taking care of the basics, these tools give you a chance to focus your newfound coding skills on customizing your website to perfection! Or — even if you want to build everything from scratch — these tools can give you some great ideas for what to build and how to build it.


Here's some of the most popular tools for webpage creation:

Wix is one of the easiest to use website builders out there. Their free plan is complete enough to make it a great option for a kid’s website builder, as long as you are okay with your URL being a subdomain of Wix (www.username.wixsite.com). They do have paid plans with reasonable pricing if you outgrow the free tier.

Although people know it as a free website builder, what WordPress really is a content management system (CMS). In a simple sense, the difference is that a website builder is easier to use, but a CMS offers more opportunities for customization. Although WordPress itself is free, you may have to pay for some themes and plugins or for hosting if you want your own domain name.

Weebly is a website builder, much like Wix. The primary difference is that Weebly offers much less customizability, making it a user-friendly option that is great for coding for kids, but less likely to grow with you as your website building skills improve. Keep on Learning: Web Development Classes for Kids Congratulations, you now have your own website! This is an exciting step for which you should feel incredibly proud. The learning doesn’t have to stop there, either.


This article originally appeared on junilearning.com.