<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/"
    xmlns:atom="http://www.w3.org/2005/Atom" xmlns:media="http://search.yahoo.com/mrss/" version="2.0">
    <channel>
        
        <title>
            <![CDATA[ programing - freeCodeCamp.org ]]>
        </title>
        <description>
            <![CDATA[ Browse thousands of programming tutorials written by experts. Learn Web Development, Data Science, DevOps, Security, and get developer career advice. ]]>
        </description>
        <link>https://www.freecodecamp.org/news/</link>
        <image>
            <url>https://cdn.freecodecamp.org/universal/favicons/favicon.png</url>
            <title>
                <![CDATA[ programing - freeCodeCamp.org ]]>
            </title>
            <link>https://www.freecodecamp.org/news/</link>
        </image>
        <generator>Eleventy</generator>
        <lastBuildDate>Wed, 03 Jun 2026 21:42:18 +0000</lastBuildDate>
        <atom:link href="https://www.freecodecamp.org/news/tag/programing/rss.xml" rel="self" type="application/rss+xml" />
        <ttl>60</ttl>
        
            <item>
                <title>
                    <![CDATA[ Programming for Beginners - How to Code with Python and C# ]]>
                </title>
                <description>
                    <![CDATA[ When it comes to learning how to write computer programs, it can be hard to figure out where to start.  Well, look no further. We just released a full course that teaches basic programming skills in both Python and C#. This course is for absolute beg... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/programming-for-beginners-how-to-code-with-python-and-c-sharp/</link>
                <guid isPermaLink="false">66b20614297cd6de0bd5468e</guid>
                
                    <category>
                        <![CDATA[ programing ]]>
                    </category>
                
                    <category>
                        <![CDATA[ youtube ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Beau Carnes ]]>
                </dc:creator>
                <pubDate>Mon, 23 Aug 2021 13:24:09 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/news/content/images/2021/08/jabrils.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>When it comes to learning how to write computer programs, it can be hard to figure out where to start. </p>
<p>Well, look no further.</p>
<p>We just released a full course that teaches basic programming skills in both Python and C#. This course is for absolute beginners.</p>
<p>One of the best things about this course is that it is taught by Jabrils. He is one of the most entertaining tech YouTubers out there. He brings his strong technical skills and his fun style to this beginner's programming course.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2021/08/one-jabrils--1-.gif" alt="Image" width="600" height="400" loading="lazy"></p>
<p>Here are the topics you will learn about in this course:</p>
<ul>
<li>What is an IDE?</li>
<li>Installing Your First IDE ‼ (Windows)</li>
<li>The Differences Between C# &amp; Python</li>
<li>Code Your First Program!</li>
<li>What Are Data Types?</li>
<li>What is a Bool?</li>
<li>What is a String?</li>
<li>What is a Char?</li>
<li>What is a Float?</li>
<li>What is an Array?</li>
<li>What is a Variable?</li>
<li>What is an If Statement?</li>
<li>What is an Else Statement?</li>
<li>What is an Else If Statement?</li>
<li>What is a For Loop?</li>
<li>What is a While Loop?</li>
<li>What is a Method?</li>
<li>What is a Function?</li>
<li>How to Comment Your Code!</li>
<li>You can code anything you can imagine!</li>
</ul>
<p>Watch the full course below or <a target="_blank" href="https://youtu.be/__izua1kKeI">on the freeCodeCamp.org YouTube channel</a> (5-hour watch).</p>
<div class="embed-wrapper">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/__izua1kKeI" style="aspect-ratio: 16 / 9; width: 100%; height: auto;" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen="" loading="lazy"></iframe></div>
<h2 id="heading-transcript">Transcript</h2>
<p>(autogenerated)</p>
<p>If you are familiar with Jabrils, you know that he is one of the most entertaining tech creators out there.</p>
<p>YouTube, the company, asked him to create a full programming course.</p>
<p>And we are proud to be able to release the entire course as one video on the freeCodeCamp channel.</p>
<p>Yo guys, all my life, I was told programming was hard.</p>
<p>It's only for the nerds.</p>
<p>It takes so much math, your grades aren't good enough.</p>
<p>But having programmed now for 13 years, I can confirm that all these assumptions are false.</p>
<p>And that is why when YouTube recently approached me with the opportunity to create an entry level programming course, I knew this was my opportunity to try and correct some misconceptions that I'm sure still preventing average people like you from diving into the amazing world of programming.</p>
<p>But first things first, we have to knock it off with this high wage medic field.</p>
<p>So you want to learn to code.</p>
<p>I mean, I don't blame you for insurance computer science as the second most valuable major to learn.</p>
<p>Now, of course, you could just go to your school and learn how to program or you could just learn how to program from a dunce like me that has no traditional schooling background.</p>
<p>Play.</p>
<p>Wait, hold on before you click off this video and sign up for a course at your local university.</p>
<p>Let me at least try and win your hearts with a quick story.</p>
<p>She's It all started when I was about nine years old, my friend invited me over to play this new game that I had never heard about.</p>
<p>Yeah, man.</p>
<p>It's crazy.</p>
<p>You get to play Donkey Kong if you want and fight against link Mario Pikachu.</p>
<p>And sure enough, he was talking about the original on the Nintendo 64.</p>
<p>And like, I had always played video games.</p>
<p>But there is something about this game that from that day on had me obsessed with video games.</p>
<p>I remember when my family moved from Virginia to California in 2000 the whole drive across the US I was designing my own Smash Bros levels using a little pain in Notepad and when Christmas came around, I asked my mother for a Nintendo 64 with Super Smash Brothers and I played that came for countless hours absolutely captivated with the concept of it all I conict internal mascots all together battling it out in a video game in three dimensions.</p>
<p>How is something like this even possible? This whole experience is what got me interested in wanting to understand more about how video games work, no, not to learn how to program because I was still at that age while still learning to read write in do basic maths.</p>
<p>Again, he got me interested in wanting to learn how games work.</p>
<p>And remember this because this will become important later.</p>
<p>It wasn't long after that until I came across a little website called newgrounds.com.</p>
<p>A place where people like me were making simple low budget games and interactive movies.</p>
<p>And I believe this truly to be the experience that planted the seed in my head that making video games like the ones that I love playing was actually possible for someone like me.</p>
<p>So a little later in life when I came across something called Game Maker, which advertises itself as you can start making games today, no code required.</p>
<p>And after weeks of begging my mother to buy it for me, she finally did.</p>
<p>And man, that was such a fun time in my life.</p>
<p>I had absolutely no idea what I was doing.</p>
<p>But just doing the best that I could create logical statements that will make a computer do what I want to do was enough to get me hooked.</p>
<p>Feeling that sensation of being truly tired for the first time.</p>
<p>Because I stayed up all night trying to understand how to create an inventory system is something I'll never forget.</p>
<p>From that day forward.</p>
<p>I continue to learn as much as I could, asking all for help who are willing to help me learning more and more not about programming, but about how games work.</p>
<p>Because you see, understanding how games work is what initially drew me to programming in the first place.</p>
<p>And without even knowing it.</p>
<p>That is what I would always fall back on when times got rough during my coding adventures.</p>
<p>And so moral of the story is, I know what it's like to have an extreme urge to learn this stuff while being not exactly sure where to start.</p>
<p>So I know exactly what you're missing and how to get you on this side of the fence.</p>
<p>And thankfully, I've learned how to do all this stuff without traditional schooling, which means you and I, we speak the same language.</p>
<p>Now if that story didn't went over your heart, you probably don't have one.</p>
<p>No, I'm just kidding.</p>
<p>I'm just kidding.</p>
<p>But I'm sure that this will this.</p>
<p>Here's my friends are glar zargar is a highly intelligent programmer that has no joke programmed, literal entire star systems solo using only a ti 80 calculator.</p>
<p>And when I told zargar I was gonna be making your programming course he Would not shut up about wanting to teach it for me.</p>
<p>Now zargar is a quintillion times smarter than I am.</p>
<p>But why do you not want zoglair? To teach this course? Well watch this zargar What is an array? Well, you see, we need a bit of a backstory, because traditionally memory can only store information at a 32 bit rate, which means recursion depth called the pull up on Moore's Law gained traction in 1996, we not only obtain more power and memories, okay, sorry, you've proved my point.</p>
<p>This audience didn't understand any of that PhD programming slowing me It's time to go.</p>
<p>And next time, remember, breathe.</p>
<p>Oh, man.</p>
<p>So welcome to my course.</p>
<p>In this series, you will leave with everything you need to start programming.</p>
<p>Yes, you've read the title, right? This is not clickbait.</p>
<p>In fact, by the end of this course, you will write your very first application utilizing everything that we learned.</p>
<p>But if you're to remember anything from this course, please let it be this.</p>
<p>Ask yourself, why are you here? What has drove you to want to learn everything you need to start programming? Again, for me, it was to understand how games work, Whatever your reason may be, I encourage you to write that reason in the comment section now.</p>
<p>And if at any point throughout this course or hell throughout anywhere in your programming adventures, things get tough, I want you to return to that comment and be reminded on the reason why you started.</p>
<p>Trust me, you got this, I promise, it's a lot easier than you think.</p>
<p>And I'm going to do the best I can on the communication side of things to make it even easier for you on this course.</p>
<p>I will see you on the next part.</p>
<p>Yes, it's so tight to see that you've clicked on this video and are interested in learning some programming principles.</p>
<p>Well, I'll tell you one thing, if you want to become a programmer, you aren't going to get very far without this thing.</p>
<p>This is called an ID.</p>
<p>There are many, many, many different types of IDs, some from large organizations that you've definitely heard of like Visual Studio from Microsoft Xcode from Apple and Android Studio from Google.</p>
<p>But there are also IDs from various other organizations as well.</p>
<p>Pie chart from JetBrains Eclipse from Eclipse sublime from a couple of dudes, Adam from GitHub, just to name a few.</p>
<p>And as you probably guessed, today's lesson is all about ID.</p>
<p>Hey, what does it mean? Duh, of course, how could I forget to cover that Id E stands for integrated development environment.</p>
<p>And just as the name suggests, it's a digital environment used to develop games, software, hardware, just about anything with code really, that offers integration or control over many aspects of development from debugging, which means adding removing or changing code that prevents your program from running as intended all the way to compiling, which roughly means taking your code and turning it into something that computers can understand.</p>
<p>Some ID support just a single language, for example, IDL, which is an ID that is bundled with the language Python when you download it, and it only supports Python, but IDs like Xcode from Apple supports a bunch of different languages like C, c++, Java, Python, the list goes on.</p>
<p>But as you see, my point here is that there are many different options when it comes to choosing your ID.</p>
<p>And honestly, it can be a bit intimidating.</p>
<p>But again, if you want to start programming you need in it later, when you get more experience under your belt, you can use Microsoft Word to write your programs, if you really wanted to the whole, I would not recommend this, no matter how much experience you get, you'll be wasting a ton of time.</p>
<p>And that is what it is a digital environment that is a various central parts of programming.</p>
<p>Where do you want to code, some games, software, hardware, you name it, and it is your best friend to help ensuring your success.</p>
<p>It's now time to install your first ID.</p>
<p>Are you ready? Let's do it.</p>
<p>And heads up.</p>
<p>There are many different IDs out there.</p>
<p>But instead of walking you through each and every ID, which would be a very boring lecture to sit through, you're instead going to get my bias and I'm going to show you how to install my two favorite IDs Microsoft Visual Studio, which should interest you if you want to get into Windows development or want to make games using a popular engine called unity.</p>
<p>And we'll also be installing Microsoft Visual Studio code, which should interest you if you're interested in more general programming or data science, as well as a slew of other tasks.</p>
<p>And yes, they both have Microsoft Visual Studio in their name.</p>
<p>And yes, they are two separate IDs.</p>
<p>Now, let's get started.</p>
<p>Alright, so the first thing you're going to want to do is open up your browser.</p>
<p>I'm going with Google Chrome as my browser.</p>
<p>You can choose whatever you want this far, it's not really important, but you want to search Visual Studio in the search bar and then click downloads, you'll see visual studio.microsoft.com Click downloads and it'll take you straight to The page that you want to be on.</p>
<p>So as you see, we have here a Visual Studio 2019, the Community Edition, let's hit free download there.</p>
<p>And then you also have your Visual Studio code, it will hold on one second, you'll see that it pops up down here, lets you know that it's downloading.</p>
<p>And then I'm gonna go back and then I'm gonna click Visual Studio code, free download, this is the second ID we need.</p>
<p>And it will pop up down here, let you know that it's downloading.</p>
<p>And just wait for that to download.</p>
<p>Alright, once those are done downloading, you can either click on them from here in Google Chrome, if that's what you're using, and they will start to install it.</p>
<p>But if you don't have Google Chrome, then you're going to want to find whatever your default Downloads folder is, in most cases, it should be downloads in Windows CE downloads.</p>
<p>But if not, you're going to want to find that so that you can install the IDs.</p>
<p>So first, let's install Visual Studio code.</p>
<p>I'm just gonna double click on this.</p>
<p>And you'll see that we get a window here that says Welcome to the windows studio, code wizard, setup wizard.</p>
<p>And this part's really easy.</p>
<p>It's just like any other installation you've ever done, you just hit next and you agree, read if you want.</p>
<p>Hit next.</p>
<p>And then here, you want to leave this at the default location, which is like see, somewhere somewhere Program Files, likely.</p>
<p>But because I already have this installed on my system, I'm going to install this in a very special location, so it doesn't mess with our presets.</p>
<p>So yeah, just leave that how that is hit next, and then just hit next.</p>
<p>And here, I would recommend that you check open with code and on both of them.</p>
<p>And also make sure that add the path is checked as well.</p>
<p>And what these to do here is allows you for like let's say you have some Python scripts, and instead of having to open up first Visual Studio code, and then hitting file and then open and searching for it, you can just go to like, let's say one of these are a Python script, you can just right click on it.</p>
<p>And then you'll have this available here where it's open with code.</p>
<p>So it will just open that file directly in Visual Studio code is very convenient.</p>
<p>You can also do that with directories in case you have a a file, I'm sorry, you have a folder with a lot of Python scripts, you can just right click somewhere in the folder, hit open with code.</p>
<p>Very, very useful, I would, I would definitely recommend checking both of these, and then just hit next.</p>
<p>Now I'm going to go back and remove these because again, I don't want to mess up my presets.</p>
<p>But this is how your years should look with of course, this the next destination being C C program files, whatever, whatever.</p>
<p>And then after that, just click install, install, and then you can see that it's going to install.</p>
<p>So I'm going to take couple seconds, I'm going to take terribly long, and bada boom, there you have it, Visual Studio code has officially been installed.</p>
<p>We're gonna hit finish and launch vinje Visual Studio code.</p>
<p>I'm going to bring this Oops, wrong window.</p>
<p>Going to bring Visual Studio code over here.</p>
<p>This is what it looks like.</p>
<p>Now before we get started, there's a couple of things that you want to do, you do definitely want to add Python right here.</p>
<p>So click Install.</p>
<p>In fact, I'm going to show you how to do it traditionally just search Python and then install just Python.</p>
<p>This allows you to use Python with Visual Studio code.</p>
<p>And there are a few options to do that.</p>
<p>But this one is straight from Microsoft.</p>
<p>So just install the top one that's just called Python.</p>
<p>And another extension that we're going to need is called code runner, just searched code runner, open the extensions and download the first one is going to allow us to run our Python scripts within Visual Studio code without having to leave the ID.</p>
<p>It's very nice.</p>
<p>Alright, and there you have it, Visual Studio code is installed.</p>
<p>If you want to do new file, just go to File, top new file and bada boom.</p>
<p>If you want to save an extension use simply save the file anywhere, we'll just do documents, for example, and just do like my, my file I don't know.and.pi will get you a Python script, hit save.</p>
<p>And now it's recognized as a Python script.</p>
<p>And if you get this pop up here that tells us that Python is installed.</p>
<p>Visual Studio code is often really good with letting you know like what you need and what you well not so much don't need but really Google with let me know what you need.</p>
<p>So let's hit download here is in a pop up window window, we're going to want to download python 3.7.</p>
<p>And then I'm just going to hit what run odds it's save open folder here.</p>
<p>And I'm just going to double click that to run it.</p>
<p>Next all you want to do is just hit Add Python 3.7 the path and then just click install now.</p>
<p>And it's just going to install now.</p>
<p>Give a little time and Python should be installed.</p>
<p>And just like that setup was successful.</p>
<p>So back in our Downloads folder.</p>
<p>I'm just going to double click that The Visual Studio installer.</p>
<p>And I'm not sure what you're seeing right now, but it's asking me to type in my password.</p>
<p>So I'm going to do that.</p>
<p>Let's see, hold on.</p>
<p>No, it's an older pin, sorry.</p>
<p>All right, sorry, one black there for a second.</p>
<p>And then we have Visual Studio installer, just hit Continue.</p>
<p>And it's going to start downloading and installing some stuff shouldn't take too long, then you should see something like this pop up.</p>
<p>And they're going to give you a few options, you can ignore most of them, maybe come back to him later when you get a bit more experience.</p>
<p>But all you really need is this one on here.</p>
<p>dotnet desktop development, because we're looking for is the console applications using C sharp, so just click that one.</p>
<p>And then you just click install, and see install on system drives recommended.</p>
<p>Again, I have this already installed.</p>
<p>So I'm going to place this in a very special location, but definitely placed this installed on your system drive where it's recommended.</p>
<p>So I'm gonna hit OK.</p>
<p>And you get this that pops up, thank you for installing, take a survey now.</p>
<p>And this will start installing, it's probably going to take a little while.</p>
<p>But once it's done, you won't have much to worry about.</p>
<p>All right, and once it's at 100%, give it a second.</p>
<p>It's kind of a start automatically, because we had that checked.</p>
<p>And bada boom, now you have welcome connect all your developer services, developer services.</p>
<p>Just hit not now maybe later, at some point to force you to make an account anyway.</p>
<p>So just for now, we'll do not now start Microsoft Visual Studio, preparing your first time use.</p>
<p>And here we are.</p>
<p>Now if you want to create a new project, you simply just hit that hit create a new project.</p>
<p>And then we'll ask you what type of projects you want to make.</p>
<p>We're just going to do a simple c console project and C sharp here, and then hit next.</p>
<p>And you can name it, let's just name it all just leave how it is concert project one is fine.</p>
<p>And create console app sorry.</p>
<p>I don't know how to read.</p>
<p>Give that a second, and bada bing, it'll start up and now you're officially in.</p>
<p>And that's pretty much all you have to do for C sharp.</p>
<p>So if you're on a program in C sharp and or Python, it's important to understand their syntax.</p>
<p>But first off what is syntax? Well, syntax in relation to programming, it's pretty much a set of rules that must be followed in order of operation that your code must abide by a process that must be respected if you want your program to run.</p>
<p>And so today, we're gonna look at the syntax for two different languages and see the differences between them, because I think it could be really helpful for you to see how they compare and contrast.</p>
<p>And plus, you'll pretty much learn two languages at once.</p>
<p>And so on the left is language C sharp using the IE Visual Studio, which should interest you if you don't do any windows development or want to make games using a popular game engine called unity.</p>
<p>And on the right is language Python three using the IEEE Visual Studio code, which should interest you if you want to get into general programming or data science.</p>
<p>Alright, so here I have two brand new console projects.</p>
<p>So the first thing we're looking at today is how both languages go about utilizing data types.</p>
<p>Now data types by themselves are useless, you have to assign a data type to a variable.</p>
<p>Now to get started in C sharp over on the left, I'm just going to get rid of these two lines because I no longer need them that comes stock with every new project.</p>
<p>And then we're going to use a Boolean as our example today.</p>
<p>Now a Boolean is a type of data that can only be one of two types.</p>
<p>It's either true, or its false.</p>
<p>So let's initialize a Boolean in C sharp.</p>
<p>Let's call it do it.</p>
<p>And then we're going to assign true to it.</p>
<p>So do it equals true.</p>
<p>Now this is all great and all do it is a Boolean that we assigned to be true.</p>
<p>However, C sharp will not recognize it as a Boolean unless you cast its data type.</p>
<p>And in C sharp, you simply cast the data type by going before the variable which again, a variable has to do it before it just type whatever the data type is.</p>
<p>So this is bool, which is short for Boolean bool do it equals true so your error goes away and everything checks out.</p>
<p>And this very syntax goes for every variable.</p>
<p>For example, if you want to initialize a string variable, you have to cast it.</p>
<p>So I'm gonna say this is a string.</p>
<p>I'm gonna call str short for string, and then I'm going to sign hello to it.</p>
<p>For example, you have to do this for every single variable.</p>
<p>However, there's a bit of a catch.</p>
<p>So I'm just getting rid of this line because I don't need anymore.</p>
<p>You only Have to initialize your variables on their first use.</p>
<p>So like, if I wanted to change the duvet Boolean variable, I just have to come down here.</p>
<p>And I need to do it equals false, for example, and that's because we're on this line right here.</p>
<p>The program knows what the data type for the do it variable is, he knows that it's a bool.</p>
<p>So I don't have to do it again.</p>
<p>In fact, if I try and do it again, you'll see that I get an error, this error is pretty much just telling me that like, I can't create the same variable twice, essentially.</p>
<p>So just remember, you only have to initialize on the first use.</p>
<p>And this convention is for every single data type.</p>
<p>So it's Boolean strings, that's integers as floats, every single one.</p>
<p>Now over in Python, things are a lot different.</p>
<p>So let's say we want to do the same example always want to initialize a boolean variable? Well, in Python, all you have to do is just write the name of a variable and then assign whatever value you want to it.</p>
<p>So in this case, we're gonna assign true to it.</p>
<p>And there we go, we just initialize a boolean variable.</p>
<p>That's right.</p>
<p>In Python, you don't have to cast your variables, you don't have to cast the data type of what you want your variable to be, like you do in C sharp.</p>
<p>And this benefit comes from the fact that Python is what's called an interpreted language.</p>
<p>And what that means is, all you have to do is create a variable and then assign some value to it.</p>
<p>And depending on what value you assign to your variable, Python will interpret what type of data type that variable should have.</p>
<p>And with this syntax, it enables a lot of flexibility with the Python language.</p>
<p>It's one of the reasons why so many people love Python, because it's kind of like a breath of fresh air, as far as computer languages are concerned.</p>
<p>And it's one of the reasons why a lot of developers that are into data science when I use Python, because as you can see, you can save a lot of time not having to type, you know that the data type over and over and over for your variables.</p>
<p>However, the flexibility doesn't stop there.</p>
<p>I'm going to simply print out What do it equals, like, so save it, hit the play button, and you'll see that do it equals true, obviously, is what you expected.</p>
<p>But check this out.</p>
<p>If we want to reassign it to be false.</p>
<p>For example, we just come down and say do it equals false, save, hit the play button, and we have a false value.</p>
<p>But this is where it gets really cool.</p>
<p>So currently, as you understand it, do it is a boolean variable.</p>
<p>But we can do do it equals 13,037, for example.</p>
<p>So first we assign true and then we change the mind sign to false and then we change the mind again, and assign it to 1337.</p>
<p>When I hit play, no errors, it just prints out that is 1337.</p>
<p>The last thing we assigned it to, which is crazy flexibility over in C sharp, we simply cannot do that if we want to change the do it to be a like an integer, for example, we're simply just going to get an error saying that, you know, you cannot convert an integer into a bool.</p>
<p>Once a variable has its data type, it cannot be changed.</p>
<p>And this is probably one of the biggest differences between C sharp and Python at the fact that how they go about casting their data types.</p>
<p>Next, I want to get into command terminations and the differences between C sharp and Python.</p>
<p>First things first, what is a command? Well, for example, this bit of code here is a command.</p>
<p>And what it's saying is take our dude variable and assign a false value to it.</p>
<p>Same with up here, take our dude variable, assign a true value to it, and also cast it as a Boolean.</p>
<p>These are examples of commands.</p>
<p>So on a very low level, the way a computer works is that it needs to know when these commands begin and in so it knows what it needs to process.</p>
<p>And so that is where a command termination comes into play.</p>
<p>We need something to be able to separate all these different commands.</p>
<p>And in C sharp, the command termination is a semi colon.</p>
<p>These semi colons right here is what you have to add to the end of every single command to be able to tell the computer that hey, this command is over, you can process this before you processed the next one.</p>
<p>I'm grossly simplifying it but that's how it works on the higher level.</p>
<p>And so with that in C sharp so long as you have a semi colon separating your previous command for your next one, you can place your commands anywhere you want.</p>
<p>For example, I can move this, this command right here to be right after the previous command.</p>
<p>No errors, no issues, I can put it back on the next line and hit Tab a bunch of times, no issues no errors.</p>
<p>You have a lot of flexibility using the semi colon as a command termination C sharp has a lot of flexibility in this regard using the semi colon as a command termination.</p>
<p>Now over in Python, they differ here a lot as well.</p>
<p>So you might look at C sharp and see okay, semi colon that makes sense as a command termination with Python.</p>
<p>What How do they do that? Well, the answer is quite simple, actually, instead of using semi colons, they just use a line break.</p>
<p>So if you want to separate two commands, you just put it on a new line.</p>
<p>Easy as that, in fact, to demonstrate, we can't do what we did over here in C sharp.</p>
<p>If we were to put these right next to each other, and then save it, you'll see that in the problems tab, it says that we have invalid syntax because you can't, it doesn't know what's going on here.</p>
<p>Why is there a value and a variable afternoon, it just doesn't understand how ever Python kind of thought of all the stops, you can simply just add a semi colon and Wallah, it will now act as a command termination.</p>
<p>In fact, just to prove that, it does what I say it does, I'm going to bring them all on the same line to command terminations.</p>
<p>And then I'm going to press play and show you that it runs it prints out 1337.</p>
<p>So yeah, in this regard, this makes Python really really flexible.</p>
<p>Because you can use semi colons if you want to.</p>
<p>However, you'll find that most developers don't, because it's often a lot faster to just use the new line command termination instead of the semi colons.</p>
<p>And Allow me to demonstrate that.</p>
<p>So I'm just going to restore both scripts to back how they were, this is a new line.</p>
<p>This is a new line.</p>
<p>This to do this.</p>
<p>Alright, so now they're back to their back restored.</p>
<p>So the reason why you can save a lot of time is because if you look at the two different scripts, they kind of both just use a new line termination anyway, even if you were to look at more complex C sharp scripts, oftentimes you'll find that over 90% of a C sharp script is going to use like a new line as a command termination anyway.</p>
<p>So you're actually saving a lot of time without having to type you know, semi colon, semi colon, semi colon, and you'll see that it turns red in this context, because it's letting you know that it's pretty much useless.</p>
<p>Like we know that you want to terminate this command by going to new line.</p>
<p>And then if we were to hit backspace to turns white, because like, okay, now it's in use, we understand what you're trying to do here.</p>
<p>But please know, this is a feature that comes with the Visual Studio Code ID.</p>
<p>So take the information as you want, but do know that most Python developers will probably look at you sideways if they see any semi colons in your in your code.</p>
<p>So yeah, there are a couple of syntax differences there.</p>
<p>Next, I want to go over how they differ in code blocking.</p>
<p>So first question, what is code blocking? Well, I'm gonna come over here in C sharp and give you a quick example.</p>
<p>First and foremost, the way that you indicate a block of code is to use these braces.</p>
<p>Anything that goes inside of these braces is a block of code.</p>
<p>So the general syntax, you don't have to follow this, but most developers will put a block of code, one line in the middle is all the code that will be ran within that block of code, and then a brace at the end.</p>
<p>And so here, we can like just move our do it equals false into here, for example.</p>
<p>And of course, get rid of this one because we don't need it.</p>
<p>And just like that, we have a block of code in C sharp, however, a block of code like this is pretty useless to add because it's going to be ran regardless.</p>
<p>However, what blocking off code allows you to do is you can add things like for example, an if statement.</p>
<p>So we can say if do it, then set duals equals false.</p>
<p>And this block of code will only run if do it equals true.</p>
<p>And I want to prove this to you.</p>
<p>So I'm going to come up here, and I'm going to write console, dot write line, this is going to print anything that we want to the console.</p>
<p>And I'm going to say checking.</p>
<p>And then I'm going to come down here and then do it again.</p>
<p>I'm gonna say console dot write, or wait, what is that? console, dot write line, there we go.</p>
<p>Um, okay, set to false.</p>
<p>Right.</p>
<p>And then at the end, we need a console dot read key.</p>
<p>This just makes sure that the terminal does not close when we hit the start button, which is up here and I'm going to press boom, terminals off screen on, bring it up, and there we go.</p>
<p>You see that it goes checking, and then it sets it to false.</p>
<p>But you are not convinced because we blocked out this code and it's still ran.</p>
<p>So I'm going to change do a T equals false and watch what happens when I hit the start button and bring the terminal over here.</p>
<p>It just says checking because, again, do it equals false And we said if do it, which is another way of saying if do it equals true, then run this block of code.</p>
<p>And at the fact that do it equals false, this block goat has never ran.</p>
<p>And that's code blocking, you'll find that code blocking is very important and very useful for all things programming.</p>
<p>But that's how you do it in C sharp.</p>
<p>Now over in Python, it's again, a lot different, I'm going to get rid of these two lines just to make it a lot less confusing.</p>
<p>And so everything under the condition and indented will be counted as that block of code.</p>
<p>Alright, and I'm going to run that, and you will see that we get checking set to false.</p>
<p>And then we also had an extra print down here, that our move next time, but that also prints out false as well.</p>
<p>And again, you're not convinced because this block of code is run anyway.</p>
<p>So we're going to set this value to be false.</p>
<p>And then I'm also going to remove this just so it's not confusing when it prints, and then save, hit play and only checking.</p>
<p>And so that is how you do code blocking in Python.</p>
<p>And so as you can see, code blocking is another syntax as C sharp and Python have a lot of differences between.</p>
<p>But it's very important to know how to code walk in both languages, because you'll be using it quite a lot for for loops for if statements for methods, functions, all types of stuff.</p>
<p>And the very last thing that I want to go over today is what's called variable scoping.</p>
<p>So what is variable scoping? Well, with the introduction to code blocking, that's this right here, a block of code.</p>
<p>Remember, this is a block of code as well, well, more right here, this is a block of code.</p>
<p>But with the introduction to these blocks of code, now you have to worry about the scope of your variables.</p>
<p>So let me give you a quick example.</p>
<p>So let's say inside of this block of code, here, we want to initialize a new variable.</p>
<p>Let's initialize just to do an integer, we'll call it a just for an example.</p>
<p>And then we'll assign a zero value to it right? Well, because we initialize this integer variable within this block of code, it cannot be used outside of this block of code.</p>
<p>And to demonstrate, I'm going to come down here, and I'm going to do outside of the block of code, console dot write line, oops, bright line.</p>
<p>A, for example.</p>
<p>And you can see what happens is it says that this variable does not exist.</p>
<p>What do you mean, it doesn't exist, so we initialize it here? Well, again, like I said, this variable, because we initialize it within this block of code cannot leave this block of code.</p>
<p>If we wanted to leave this block of code, we have to do it like this, we come out here, oops, we come out here and we initialize int a equals to say, five, for example.</p>
<p>And then inside of this block of code, we just change, we just reassign it back to zero.</p>
<p>So because it's it's initialized within this block of code, which is our main function, we can use it outside of this block of code.</p>
<p>And that is variable scoping.</p>
<p>In a nutshell, over in C sharp, this syntax is no different.</p>
<p>So if we were to come inside this block of code and initialize an A, assign a zero to that, and then come outside of this block of code and try and print that a variable, you'll see that when we save and hit the play button, that we get an error syntax error saying that this a the variable is not defined.</p>
<p>And again, if we want to get around this, we have to change the scope of a variable.</p>
<p>So come out to the regular indentation, and just do a equals five, for example.</p>
<p>And then when we get into this scope, we're simply just going to reassign it, change it to zero, and then we'll be able to print it and approve that I hit save, and then I hit play.</p>
<p>And there you go, checking five.</p>
<p>And again, just want to make sure I cover all bases.</p>
<p>The reason why this prints out checking five is because we said do it equals false.</p>
<p>And if do it is true, then this bytecode will be ran, but because do it as false as both code is not ran.</p>
<p>So it just skips this entire thing.</p>
<p>And it just prints out five, which is what we assigned a to.</p>
<p>And that's pretty much it.</p>
<p>That is everything that you need to notice our programming in regards to the syntax.</p>
<p>And so in conclusion, even though C sharp and Python have differences in their syntax, as you can see, the differences are small enough to be able to remember the important stuff, you have to cast data types in C sharp Python, you do not in C sharp, you must use semicolons to terminate commands.</p>
<p>Python uses new line breaks, and C sharp uses curly braces for co blocking while Python uses indentation.</p>
<p>Of course, there are more differences in their syntax.</p>
<p>But these are the major differences that often confuse the developers.</p>
<p>All right.</p>
<p>All right.</p>
<p>All right.</p>
<p>It's that time to code your first program.</p>
<p>Are you ready to do this Get set, let's go.</p>
<p>So we're going to make a simple MATLAB application.</p>
<p>In the console, because it's simple, doesn't require you to install a million things and is something you can actually show off to your friends and family.</p>
<p>Now, before we jump into this first things, first, the code to this project is in the description.</p>
<p>Also, I think it's important to let you know that this lesson is kind of acting as a placement test.</p>
<p>If you're just beginning to program, you might struggle with understanding what's going on in the code.</p>
<p>And if that is you, well, that's okay.</p>
<p>Because I structure this lesson to be just a little bit difficult to follow.</p>
<p>Once able to code a project like this by yourself, then, I don't think there's much this course can teach you at that point.</p>
<p>But I encourage you to watch the whole thing and follow along.</p>
<p>Anyway.</p>
<p>Again, the code is in the description.</p>
<p>So you can just refer to that and follow along with me.</p>
<p>Because if you do the following, you will get the greatest inspiration to become a programmer.</p>
<p>After you struggle, I encourage you to go through the rest of my course LinkedIn description, or just check out the lessons on the stuff that wasn't easy to follow.</p>
<p>I have over 20 videos teach you how to code and those videos go in depth about their respective topics.</p>
<p>Then, when you feel comfortable, come back to this lesson and see how will you do a second or third time coding your first project.</p>
<p>And trust me, when you ever look at how much you didn't understand in comparison to the next time you try and code your first project, you will not want to stop programming having program for 15 years, I can tell you that feeling pretty much summarizes programming very well, it can become quite addicting to chase but in addiction in the best way possible.</p>
<p>However, if this is your second or third or more times coding your first project, I encourage you to not copy the code verbatim.</p>
<p>But maybe create your own story or at if statements and functions this mad labs game who knows your experimentation could start a whole new programming trend.</p>
<p>Lastly, if you want to share your project with me, feel free to tweet it to me and I'd be happy to reply back to you.</p>
<p>But now with all that stuff out the way, let's get started on coding your first program.</p>
<p>And we're going to make his application in two different languages because I think it can be really helpful for you to see how they compare and contrast.</p>
<p>And plus, you'll pretty much learn two languages at once.</p>
<p>So on the left is the language C sharp using the ID Visual Studio, which should interest you if you want to do windows development, or if you want to make games using one of the most popular game engines called unity.</p>
<p>And on the right is the language Python three using the ID Visual Studio code which should interest you if you want to get into more general programming or data science.</p>
<p>Alright, let's actually begin writing our Mad Libs program.</p>
<p>Now before I write any project or program or prototype, what have you, I usually like to start what I like to call a skeleton and what a skeleton is, it's pretty much just like a step by step process in which you can expect to have to do in order to complete the actual project.</p>
<p>And because this is a smaller, simpler program, we can simply do this by writing out a few comments.</p>
<p>So first, I will comment out initialize variables, and it just stands for initialize is shorter cork at the right then after that simply gets input from user.</p>
<p>So we're gonna initialize the variables.</p>
<p>And then we're going to ask the user to fill out the data for those variables.</p>
<p>And then after that, we need to initialize whoops, and knit story.</p>
<p>And then after we initialize our story, then we simply just need to print our story.</p>
<p>And for parts, our program will be done.</p>
<p>Simple, easy and to the point.</p>
<p>And now let's just do that same thing in Python, do a comment, and then a net variables and then get oops get input from user.</p>
<p>And then after that, we're going to end our story.</p>
<p>And then after that, we need to print story.</p>
<p>Easy as that.</p>
<p>Next thing I'll do real quick is just beautify our script.</p>
<p>I'm just going to add spaces between all the comments, it just helps me read it and understand the different processes that need to take place.</p>
<p>Perfect.</p>
<p>Alright, moving on.</p>
<p>Now before we can do anything over here, C sharp on the left, we kind of need our story because everything depends on our story, really.</p>
<p>So I'm going to paste in a quote from the matrix.</p>
<p>I'm just gonna highlight all this real quick and hit Tab a couple times to beautify it, make it easier for me to read.</p>
<p>But you are welcome to make up your own story.</p>
<p>You're welcome to grab anything from the internet.</p>
<p>Whatever you want to use as your Mad Libs story is completely fine.</p>
<p>I even put the story in the description if you want to use it as well.</p>
<p>But there we have it.</p>
<p>This is the story they want to use for C sharp.</p>
<p>And now I'm going to do the same for Python.</p>
<p>just paste in that story string, same exact thing just in a Python format.</p>
<p>Next thing I'm going to do is simply just print out story.</p>
<p>And in C sharp, you're going to want to do console dot write line.</p>
<p>And then ad lib story, Mad Libs story, boom, semi colon, done.</p>
<p>And in Python, we're going to want to wait, I'm gonna change this to say Madlib story just so that it's the same mother story perfect.</p>
<p>And in Python, it's really simple.</p>
<p>You simply just type prints, and then Madlib story, boom.</p>
<p>So next what we want to do is get input from user.</p>
<p>But we can't really get any input from the user because we have no variables to pass to the user to collect data from.</p>
<p>And so what our next actual step is, we have to initialize our variable so that we can pass it to the user.</p>
<p>And to initialize our variables.</p>
<p>Well, we need to turn our Mad Libs story into a bunch of variables.</p>
<p>And we can do that quite simply, if you're at all familiar with the game, Mad Libs thing, you know, the whole fun of the game is that you have some story or some text or something like that.</p>
<p>And you replace all the verbs, the nouns, the adjectives, etc, with words that are similar context, hopefully, but not exactly.</p>
<p>And it makes for like, really funny, interesting stories.</p>
<p>And so what we want to do is want to scroll through our text and essentially replace verbs, nouns, adjectives, with variables, and the first one I'm going to do is the matrix, I'm just going to put curly braces around this, oh, yeah, I need to make this into an interpolated string.</p>
<p>I'm gonna do that for all of these strings.</p>
<p>And this needs to be a variable, which is one word, the matrix boom.</p>
<p>And so I'm simply going to come to a new variables, I'm going to initialize the string data type, and put the matrix in there.</p>
<p>And now the matrix is a variable that we can ask the user for, and they can change to whatever they want.</p>
<p>And I kind of did this ahead of time, I went through the text and picked a lotta verbs, nouns, adjectives that I thought would be interesting to change.</p>
<p>So I'm just gonna go through and do that, for example, system is another one, I'm going to change system to variables can add that to this list.</p>
<p>And I'm just going to do that for the entire text.</p>
<p>I'm going to skip it though, cuz it's not that fun to watch.</p>
<p>Alright, so I went through my story and replaced all of the interesting verbs, nouns, adjectives, etc, with variables so that we can pass that to the user, and they can put whatever words they want there.</p>
<p>But now I want to show you your first optimization trick.</p>
<p>If you look at this line here, the sentence as businessmen, teachers, lawyers, carpenters, these are all professions, that's what that's what they all have in common.</p>
<p>And at the fact that they go back to back to back, we can do is really cool trick.</p>
<p>Well, we will initialize a string array, and we'll call them profession.</p>
<p>And then back up to initialize equals new string array of how many are there 1234, a four.</p>
<p>And so now we can do this really cool trick where we come in here, and just make this an interpolated string.</p>
<p>And overload case that just for good practice, businessmen, and Oops, sorry, that's not what I want to do, I want to do profession, zero, because we're gonna do a for loop, which I'll get into in a second.</p>
<p>I'm gonna copy this, because I'm lazy.</p>
<p>And I'm going to paste this here, and increment it, and then we'll paste this here.</p>
<p>And then I'm going to increment it to two.</p>
<p>And then the final profession, increments this to three, already start on zero, simple into the point.</p>
<p>And so now what we can do is when we get input from user, since there are four professions, they're all back to back, we can simply just write a simple for loop and ask the user for four different different professions, one after another.</p>
<p>And I'll show you how to do that in a bit.</p>
<p>But there's also two additives down here that also do this with so I'm just going to initialize a new string array, call this additive AJ, DJ sharp additive equals new string array of two, there's only two in there.</p>
<p>And so here, turn this into an interpolated stream, is gonna be a D j, zero.</p>
<p>And I'm gonna copy this because I am lazy in this is the second adjective.</p>
<p>I'm just going to increment.</p>
<p>And there you have it, we now have our two string arrays.</p>
<p>And final note, if you look down here, you'll see a bunch of errors for unassigned local variables.</p>
<p>And that's only because we have not assigned these variables to anything yet.</p>
<p>I believe they're there no at the moment, which is Your program does not like but we will be assigning the variables when we get the input from user.</p>
<p>And over in Python on the right, it's a lot of the same.</p>
<p>First, let's turn all of our strings into interpolated strings.</p>
<p>And it's just like C sharp, except it's an F instead of $1 sign.</p>
<p>So I'm just gonna add an F to all the strings.</p>
<p>Perfect.</p>
<p>And let's pop out this variable right here, the matrix, or rather, let's turn this into a variable called the matrix.</p>
<p>And then let's initialize it up here and do the matrix equals empty string.</p>
<p>All right, and then let's do system next interpolated string system.</p>
<p>And then system like this paste equals empty string.</p>
<p>And I'm gonna go through and do this for all the interesting verbs, adjectives and nouns in this text.</p>
<p>Alright, so I pulled out all the interesting words and turn them into variables.</p>
<p>And now I'm going to show you how to do that optimization trick over in Python.</p>
<p>So again, we have these four professions, and we want to turn that into a string array.</p>
<p>And to do that in Python was going to do profession equals brackets, and therefore rooms are going to empty string, empty string, empty string, empty string for empty strings.</p>
<p>And there we have a, an array with four strings in it, that we can pass the user and then they can change the beer or whatever they want.</p>
<p>And it's the same as C sharp doesn't use interpolated string, professions zero, I'm lazy, I'm a copy this and paste it here, increment it, paste it here, incremented pasted here, increment it, oops, yeah, it is three.</p>
<p>And then we also want our adjective array, which is only two.</p>
<p>So I'm gonna do brackets, empty string, and then another empty string to empty strings.</p>
<p>And then that goes here, which is a edge, zero, I'm going to copy this because I'm lazy, and then paste it on dependent, and then increment that, and bada boom, now the scripts are in the same exact state.</p>
<p>For All right, the final stretch, let's get that input from the user.</p>
<p>So first of all, there are two functions that we need to familiarize herself with.</p>
<p>One we've already went over, and that is console dot write line.</p>
<p>This is where we're going to use to print something to the console.</p>
<p>And the second one is console dot read line.</p>
<p>This is where we're going to use Well, there's no input parameters.</p>
<p>But this is going to return to us a string that we can set our string variables to.</p>
<p>And this comes whatever the user types into the console presses enter.</p>
<p>That's what's going to be returned with console dot read line.</p>
<p>So for example, we can do the matrix equals console dot readline.</p>
<p>Easy as that.</p>
<p>So let's get started.</p>
<p>I kind of ahead of time crafted a little interesting story that the user can have with the terminal just to make sure I'm not Stumbling on this part.</p>
<p>But let's start off with console dot write line.</p>
<p>Let's just do like, welcome.</p>
<p>user, welcome user.</p>
<p>And then we can go down to another one, console dot write line.</p>
<p>And then let's say let's play, let's play a game of Mad Libs.</p>
<p>And then after that, we can get their name.</p>
<p>So we can say, let's do another console dot write line.</p>
<p>And then please share with me your name.</p>
<p>And then here is where the terminal is going to stop and allow them to put in some input.</p>
<p>so here we can do Neo, since that's the name of the character in the text, equals and we can do console dot read line.</p>
<p>And whatever they returned here is what the variable Neo is going to be set as.</p>
<p>And just in case you don't believe me, let's actually run this program and see that being printed on the screen.</p>
<p>First thing we need to do though, is with all these errors, it won't allow us to actually run the program.</p>
<p>So let's just comment out this and Tired thing, whoops, hold on a second, I need to do that and comment this out, come with that one all the way down the line.</p>
<p>So this doesn't get compiled.</p>
<p>And then let's replace this for now with, with Neil.</p>
<p>So whatever name that we pass to the terminal, it's just going to spit that right back at us.</p>
<p>And that's going to prove to you that we're able to set variables this way.</p>
<p>So I'm gonna come up here to the top and hit start.</p>
<p>And my window actually goes out of frame.</p>
<p>I'll bring it on screen.</p>
<p>So as we put Hello, welcome user, let's play me mad libs, share with me your name, and I'm going to put my name to bring this up.</p>
<p>Of course, it's going to exit because we also didn't tell it to pause.</p>
<p>So let's Um, I think we need to cancel that wait for that, let's do another read key concept that read key that's gonna wait for a key press and then it's going to exit the terminal.</p>
<p>So run it again.</p>
<p>Bring it back on screen.</p>
<p>Welcome user.</p>
<p>Let's play a game with Mad Libs, please share with us your name, I'm going to put bros and their prints right back to us the same variable that we put in, which is lets you know that it's actually working.</p>
<p>So now I'm just going to revert back to its original state.</p>
<p>And we can do z Ctrl, z Ctrl Z Ctrl, z Ctrl Z.</p>
<p>So a bunch of times, and we are back woke at semi colon, and we are back to our original state.</p>
<p>And if you don't have control Z, I think on Apple, it's Apple z, I believe.</p>
<p>But if you don't have either those buttons, you can come up to edit and then hit undo up here.</p>
<p>And that will do the same thing that I did with my shortcut on the keyboard.</p>
<p>Also real quick, let's add at the very end of our process, let's add console, console dot read key.</p>
<p>This will make sure that it pauses the application before quits.</p>
<p>Okay, so now over in Python, let's start to get input from users.</p>
<p>So what we want to do here is instead of writing console dot write line, again, it's as simple as prints.</p>
<p>And we can do print, welcome, user, come down to another print.</p>
<p>Let's play a game of Mad Libs, and then another print and say, Please, please share with me your name.</p>
<p>And then we can simply do Neo equals inputs.</p>
<p>Well, technically, technically, we can add this string into input, and it will be the same exact thing.</p>
<p>So we can do this, and it will print and then whatever the next line is, it will get that input.</p>
<p>However, we do need to add a line break here.</p>
<p>Otherwise, it's going to, it's going to allow you to type right after the question mark, we want to go to a new line, just to make it a bit more cleaner.</p>
<p>And so now the cool thing is now that we have our actual name set in the variable, Neo, we can use that with our printing function.</p>
<p>So if we do console dot write line, for example.</p>
<p>Let's interpolate the string and do Hello.</p>
<p>And then we can do here, Neo.</p>
<p>And then exclamation point.</p>
<p>And then let's say something like, are you ready? Are you ready? And then what is something you want to know more what running out of space? So I'm gonna go to next line more about.</p>
<p>He learned how to spell more about.</p>
<p>And then next line, when they answer what they want to know more about, we can put that into the matrix.</p>
<p>So I forgot my semicolon.</p>
<p>So we can do the matrix equals console dot read line.</p>
<p>Easy as that.</p>
<p>And over in Python, it's pretty much the same exact deal.</p>
<p>We'll do print.</p>
<p>What is it when interpolate the string with F? Hello.</p>
<p>And then this will be Neil.</p>
<p>Whoops, Neil.</p>
<p>And then are you ready? Are you ready? And then actually, I'm going to break this off.</p>
<p>Whoops, I'm going to break this up into another print.</p>
<p>Actually, I want to make this an input.</p>
<p>input.</p>
<p>And then this is what is something you want to know, oops, to know more about.</p>
<p>And of course, we need to do the matrix variable equals whatever they want to know more about.</p>
<p>So just to make sure that you're still with me, just remember that the only thing we're currently working on is get input from user.</p>
<p>That's this section right here, everything else we are not focused on.</p>
<p>And within this section, there are only two functions that we're using.</p>
<p>The first one is called to that read line, which is just simply printing some string to the user.</p>
<p>And a second is console dot read line, which will return to us whatever that user inputted into their console, that we can then assign a variable to it.</p>
<p>That's it.</p>
<p>Nothing more complex than that.</p>
<p>So continuing along with our little storytelling, we can have a lot of fun.</p>
<p>And do console dot write line, and then interpolated string, and do something like, ooh, and then we can put you want to know more about, and then the matrix Ha.</p>
<p>You know, just have fun with it.</p>
<p>And then we can do another line console, dot write line, interpolated string.</p>
<p>Let's see.</p>
<p>Next we want to do is we want to get the variable system.</p>
<p>And so we need to give them a bit of a context.</p>
<p>So we can do something like, first, let's see first.</p>
<p>Okay, please bear with me.</p>
<p>Okay, well, first, tell me what you already already know about the matrix.</p>
<p>And then let's do one final one, which gives them a bit of instruction, because this is madlibs.</p>
<p>After all, we're gonna do let's see what now would you categorize the matrix as, and then we can add like a little semi colon here.</p>
<p>And then finally, finally, we can do system equals console dot readline.</p>
<p>And yeah, pretty straightforward.</p>
<p>Again, I'm just trying to have fun with this Mad Libs as we're getting the data, the information, the input from the user.</p>
<p>And so, you know, you also want to give, you know, this is all mad libs clues right now.</p>
<p>But you also want to give the user like some sort of hint as to what word they're replacing.</p>
<p>So I simply just asked what noun would you categorize the matrix as, and he's just trying to have fun with it over in Python, not much really changes, we're just going to print out the same exact strings.</p>
<p>So so Oh, oh, you want to know more about that? I mean, you put the matrix and then print another line.</p>
<p>And this is going to say, Okay, well first, tell me, oops, tell me what you already know about the matrix to another line.</p>
<p>We're in df and then what now? Would you cat TIG Gore, right? Then matrix.</p>
<p>Actually, I forget this is Python.</p>
<p>So we can actually make this our input, and then do system equals this input.</p>
<p>And just to prove to you that we're just trying to craft the story here, nothing more complex than that.</p>
<p>I'm going to initialize all of these remaining variables as empty strings just so that that error clears up.</p>
<p>Because empty string equals empty string, equals empty string equals empty string.</p>
<p>And now we can actually print out this story.</p>
<p>Even though most of the words most of the very roles are going to be whoops, equals empty string are going to be empty strings.</p>
<p>We can print this out.</p>
<p>My console goes over to the left.</p>
<p>So what is my name to Brill's? And then, as we wrote, hello jimbros gave us her name.</p>
<p>Are you ready? What is something Do you want to know more about? There's a typo there.</p>
<p>We can fix that.</p>
<p>I want to know more about pizza, for example.</p>
<p>Oh, you want to know more about pizza? Okay.</p>
<p>Well, first, tell me what you already know about pizza.</p>
<p>What noun? Would you categorize pizza as I categorize pizza as pie.</p>
<p>And then that's as far as we've gotten our code.</p>
<p>So now it does the Mad Libs, it replaces the variables within the actual Madlib story.</p>
<p>And they get we gives us this pizza is a pie two Bros.</p>
<p>That pie is our and then it's all empty strings from there.</p>
<p>But as you see, this is this is all we're doing at the moment is this part of the terminal script, we're just crafting this story.</p>
<p>That's all there is to it.</p>
<p>Hopefully at this point, I've convinced you that we aren't doing anything complex.</p>
<p>With this stage, we're just printing out a story to the console and asking for variables.</p>
<p>That that's all.</p>
<p>So let's just finish off our story by moving on.</p>
<p>So next thing that I want to do here is of course, we're gonna do console dot write line.</p>
<p>And we're gonna interpolate a string.</p>
<p>And what I want to put next is, let's see.</p>
<p>Give me me in opposing, opposing now, to system, right, because the next word we're going to get is enemy, we're going to try and replace enemy ever again, we're just trying to give them some sort of hint for a good noun to replace.</p>
<p>So that should work.</p>
<p>So then we're gonna do enemy equals console.</p>
<p>dot read line.</p>
<p>All right, so hopefully, this string that I printing that I'm printing to the console, is enough to give them a hint.</p>
<p>On a good words, replace enemy with moving on, we're going to do another console dot write line.</p>
<p>And what are we getting next? Next, we are going to get the word inside.</p>
<p>So let's see.</p>
<p>What hint Can I give for inside I don't know relaxing.</p>
<p>Now, let's say now give me any relaxing.</p>
<p>Now, in of course, this needs to be in the present tense, present tense.</p>
<p>And then we can do inside equals console dot read line again.</p>
<p>And we just keep on going down the line, we're not going to get caught up to speed in Python.</p>
<p>So last left off was system.</p>
<p>So we need to print let's see, interpolate a string.</p>
<p>Let's do what is it give me me an opposing now to system.</p>
<p>I always forget this is Python so we don't have to print and then do a read line.</p>
<p>We can just do input.</p>
<p>Let's see what's the variables enemy, right? Yeah, enemy equals input.</p>
<p>Cool.</p>
<p>And then we can do the same thing with inside equals input.</p>
<p>And then I'm gonna interpolate the string.</p>
<p>And then let's do now.</p>
<p>Now give me any relaxing.</p>
<p>Now, present tense.</p>
<p>All right, oops, no, semi colon, none Python.</p>
<p>Cool.</p>
<p>And we are all caught up.</p>
<p>Now next up is the interesting part that we kind of set up a little earlier in the video.</p>
<p>Now we need to actually use our for loop for our string arrays.</p>
<p>And so we can go about doing that really simply just create a for loop for int i equals zero.</p>
<p>i is less than profession, dot length, semi colon i plus plus, and then come down here sort of brackets.</p>
<p>And so this for loop is just going to go through the professions which is next up in the text prompt, and we can simply just asked.</p>
<p>Let's see.</p>
<p>I guess before that though, we need to alert the user say console dot write line and say Okay.</p>
<p>Now I need for professions, professions, professions relating to what is this relaying to system and interpolate the string here, boom.</p>
<p>So we let that alert the user what's about to happen, I need for professional building systems.</p>
<p>And then here we can do console dot write line.</p>
<p>And we're gonna do a course interpolated string here.</p>
<p>And let's do profession.</p>
<p>If I have any typos, I apologize, profession, plural.</p>
<p>Because, again, we're doing businessmen, I don't remember them originally, businessman mckellan, something like that.</p>
<p>But they're an employee rural.</p>
<p>And then we can just simply let them know where they're at, by doing i plus one, because is going to be zero starts at zero.</p>
<p>So we can do that plus one to get it started at one.</p>
<p>And then simply profession dot length.</p>
<p>Right, so what this does, let me just walk you through this thing is a bit vague.</p>
<p>So what this does, simply, as we're going through our for loop, there are four different professions, it's going to write to the console, give me a profession, plural, and it's going to print out what number profession they're currently filling out.</p>
<p>That's all it is.</p>
<p>And then it's divided by the length is how many professions we need.</p>
<p>And I'll show you this example a bit later.</p>
<p>But once we do that, then after every single time, we print that to the console, we want to read line and assign profession of AI to that, and that will pretty much populate our entire profession string array.</p>
<p>All right, and to get caught up in Python, it's not too difficult, of course, we need to write out our print.</p>
<p>And we are currently alerting the player that a for loop is about to happen for the most part.</p>
<p>So okay, now I need four pro fish ones relating to system.</p>
<p>Right.</p>
<p>And then we got to do our for loop.</p>
<p>And for loops in Python are they're a bit different.</p>
<p>So we're gonna do for i in range, length of profession.</p>
<p>And then we'll do our colon and the next line will do the profession of AI equals inputs.</p>
<p>And then here, what do we put we put profession, which is definitely a typo in the C sharp profession.</p>
<p>And then plural.</p>
<p>And then here, we're going to do i plus one, hope this is not interpolated string, and add an F to make an interpolated string, divided by length, oops, come on, come on.</p>
<p>There it is length of profession.</p>
<p>And there we have it.</p>
<p>They are now currently up to speed.</p>
<p>Now this point, I'm pretty sure that you could finish this program on your own because we're just essentially gonna do the same exact stuff we've been doing.</p>
<p>And once you fill out the remainder, what is it like three or four variables, the application is done.</p>
<p>However, I want to take a second to pause because I often don't go this long without leaving comments.</p>
<p>It's always nice to leave comments for yourself in the future.</p>
<p>Or if you're going to send this off to a friend, or if you're going to upload it to GitHub for you know, other developers is trying to take apart and learn from it's always good and nice leave comments.</p>
<p>So let's do that.</p>
<p>Just to explain what's happening here.</p>
<p>I'm just going to say we are getting the matrix variable a variable from user it's going to be a lot of those comments getting system variable variable from user forgetting enemy variable from User where I didn't even add system, system variable from user sorry, getting what is this inside variable? variable from user.</p>
<p>And then this is arms and say commencing for loop.</p>
<p>No way, commencing.</p>
<p>Now I'm going to say that I'm going to say getting getting all professions.</p>
<p>From user.</p>
<p>Also, I know that I have a typo here.</p>
<p>So I'm going to fix that profession.</p>
<p>Yes.</p>
<p>Cool.</p>
<p>I'm actually going to combine these not not.</p>
<p>And yeah, this really helps me out personally.</p>
<p>Oftentimes, when I'm reading code, I'll often look for the green, or like, where the comments are, whatever color the comments are, in the language, often look for those as like kind of like markers.</p>
<p>So I can kind of fill out the code and know exactly what's going on where.</p>
<p>So it's always good practice to leave comments in Python and do the exact same.</p>
<p>And leave a comment here, getting the matrix variable.</p>
<p>From user.</p>
<p>I apologize, if I have typos, I'm not terribly concerned about that getting getting system variable from user, and then this is going to be getting enemy variable from user.</p>
<p>And this is getting inside variable from user.</p>
<p>And this is getting all profession.</p>
<p>variable from user was going to change his profession.</p>
<p>I guess that doesn't really matter.</p>
<p>Cool, a bit redundant, but it always helps.</p>
<p>Alright, so I went and did you a favor and pretty much wrote out the rest of the logic for the rest of the variables, because it probably got a bit too mundane if I were to record it on the screen, but we can walk through it anyway.</p>
<p>So right after the profession's for loop, we are essentially getting the same variable.</p>
<p>And we do that by writing to the console, give me a hero related verb in the present tense.</p>
<p>Again, this is just hints for the user.</p>
<p>So they kind of have an idea on what we're they're replacing.</p>
<p>And then we will save whatever string they returned to us into the Save variable.</p>
<p>And then we get the unplugged variable, which we do that by writing to the console.</p>
<p>Now give me a verb that makes you think about relief in the past tense.</p>
<p>Again, just another hint, you can see how mundane it probably would have been.</p>
<p>And then whatever string they returned to us with counselor reline we will save that into the unplugged variable.</p>
<p>And then after that we need to get our adjectives are two of them.</p>
<p>So we first warn the user say, lastly, I need to dystopian adjectives.</p>
<p>And then we do a for loop.</p>
<p>And simply, we will tell them that they are currently filling out an adjective.</p>
<p>And we'll let them know what number they're on out of the total number.</p>
<p>And then we will save that to their respective adjective variables, whatever string they're returned to us.</p>
<p>And then lastly, we just need to get the fight variable.</p>
<p>And we just say, Hey, we need a verb on the console.</p>
<p>And then whatever string they returned to us, we will save that into the fight variable.</p>
<p>And that's pretty much it on the Python side of things is the exact same just in Python syntax, you know, get the same variable, get the unplugged variable, get the two adjectives to a for loop, and then get the fight variable.</p>
<p>And we're done.</p>
<p>Great work guys are madlibs application is pretty much done.</p>
<p>I mean, there's nothing left to do.</p>
<p>Except there's one thing that I want to do on Python.</p>
<p>So the input function is a bit different than the console dot read line, the constant read line function will always go to a new line, the input does not.</p>
<p>So with that, let's kind of format this a bit.</p>
<p>I'm going to do with all the inputs, semi colon, and then a space.</p>
<p>So whatever question we asked them, they can input that right after our question.</p>
<p>So I'm gonna do that again.</p>
<p>I'm actually going to remove the question mark because it might get a bit confusing with that syntax anymore.</p>
<p>So there's some added space there.</p>
<p>And then input here I'll do colon space.</p>
<p>Here I'll do colon space.</p>
<p>Where else here I'll do colon space.</p>
<p>And this is the input space, there's input space.</p>
<p>Here, space input here, space, and boom.</p>
<p>Alright, and that's just going to look a lot more cleaner when we're actually playing the game in the terminal.</p>
<p>So all that's left is to play it and let's, let's actually play it.</p>
<p>I'm going to run C sharp first.</p>
<p>I'm going to bring this over here and it says welcome user.</p>
<p>Let's play a game of madlibs.</p>
<p>Please share with me your name.</p>
<p>My name is jabril Hello, jabril.</p>
<p>Are you ready? What is something you want to know more about? I want to know more about pizza.</p>
<p>Oh, you want to know more about pizza? Ha.</p>
<p>Okay, well first, tell me what you already know about pizza.</p>
<p>What now? Would you categorize pizza as I'd say pizza is a pie.</p>
<p>Give me an imposing noun to pie.</p>
<p>Hmm, maybe cake.</p>
<p>Now give us a relaxing noun.</p>
<p>Present tense.</p>
<p>I guess sleeping is a relaxed noun and present tense.</p>
<p>Okay, now I need four professions relating to pie.</p>
<p>Ooh, I don't know.</p>
<p>Baker.</p>
<p>Cook.</p>
<p>Chef.</p>
<p>I don't know.</p>
<p>I don't know.</p>
<p>What's the last one? I'm just gonna say butcher.</p>
<p>I don't know.</p>
<p>Give me a hero.</p>
<p>Related verb in present tense.</p>
<p>Here are related verb in present tense.</p>
<p>Let's see.</p>
<p>Save.</p>
<p>That's all I can think of.</p>
<p>I know that's the actual word, but it's all I can think of.</p>
<p>Now, give me a verb that makes you think about relief.</p>
<p>Massage.</p>
<p>Massage in past tense massage.</p>
<p>Yeah.</p>
<p>Is that a verb? Something to do? I guess I don't know.</p>
<p>Lastly, I need to dystopian adjectives describing words.</p>
<p>I don't know birds, I guess.</p>
<p>And what's another one? I'm dirty.</p>
<p>And the verb, a verb is what you do, let's say, um, what you do, kick.</p>
<p>Let's see what we got here.</p>
<p>Pizza is a pie two rows.</p>
<p>That pie is our cake.</p>
<p>But when you're sleeping, you look around.</p>
<p>What do you see? Baker, cook, Chef, butcher, oops, I didn't listen to instructions socially plural, very minds of the people we are trying to save.</p>
<p>But until we do, these people are still part of that pie.</p>
<p>And that makes them our cake very deep.</p>
<p>You have to understand, most of these people are not ready to be massaged.</p>
<p>And many of them are so burnt, so helplessly dirty on the pie that they will kick to protect it.</p>
<p>Art, absolute art.</p>
<p>And now let's play in Python.</p>
<p>Real quick.</p>
<p>Not sure how I missed this.</p>
<p>But we need to put input at the bottom so the console will stay open.</p>
<p>But it's a bit different to actually play it with Python.</p>
<p>Go up to here up the top where your project file name is right click and then do reveal an explorer.</p>
<p>And then wherever your fault your file is just double click it and a terminal should pop up.</p>
<p>It should look pretty much the exact same, just with a slight Python syntax difference that we did.</p>
<p>And so please share with me your name? My name is what am I gonna say? My name is fajita.</p>
<p>I'm cool this time.</p>
<p>Hello Vegito Are you ready? What is something you want to know more about? I want to know more about Um, let's see.</p>
<p>Not pizza.</p>
<p>Oh, no more about Skittles.</p>
<p>Skittles huh? Okay, well first tell me what's your I know about skills? What now? Once you category Skittles, as I'd say it's candy.</p>
<p>Give me an imposing noun to candy.</p>
<p>Ooh, veggies.</p>
<p>Now give me any relaxing noun in the present tense, relaxing noun.</p>
<p>Person place or thing? That's actually probably incorrect, but I understand what it's asking.</p>
<p>Relaxing now.</p>
<p>I don't know.</p>
<p>Relaxing itself.</p>
<p>Okay, so now I need for professionals relating to candy.</p>
<p>Let's see.</p>
<p>Baker.</p>
<p>Down Mama.</p>
<p>Clerk.</p>
<p>I don't know.</p>
<p>Supposed to be plural.</p>
<p>I keep forgetting associate plural clerks.</p>
<p>Baker.</p>
<p>I don't what do you call it candy make candy makers candy.</p>
<p>Make Here's chocolate chocalate factory owners.</p>
<p>Let's see, give me a hero relating verb in the present tense.</p>
<p>What do heroes do they save.</p>
<p>They fight crime.</p>
<p>The verb Fight, fight crime.</p>
<p>fight crime.</p>
<p>I don't know.</p>
<p>Now, give me a verb that makes you think about relief.</p>
<p>coding.</p>
<p>That's what you do in past tense coded.</p>
<p>Lastly, I need to dystopian.</p>
<p>Let's do dystopian, let's do, empty, I guess.</p>
<p>And let's do dark and a verb, a verb.</p>
<p>Slide.</p>
<p>Let's see what we got here.</p>
<p>Skittles is a candy fajita? That candy is our veggies.</p>
<p>But when you're relaxing, you look around when you see bakers, clerks, candy makers, chocolate factory owners, the very minds of people, we are trying to fight crime.</p>
<p>But until we do, these people are still a part of that candy.</p>
<p>And that makes them more veggies very deep.</p>
<p>That is so deep.</p>
<p>You have to understand, most of these people are not ready to be coded.</p>
<p>And many of them are so empty.</p>
<p>So hopelessly dark on the candy that they will slide to protect it.</p>
<p>Wow.</p>
<p>Wow.</p>
<p>So that's poetry.</p>
<p>And there you have it, guys, congratulations on creating your first ever program.</p>
<p>You did it.</p>
<p>Congrats, everyone.</p>
<p>Believe it or not, you just written an actual usable program, you can go right now and play this with your friends and loved ones and impress them with your new skills.</p>
<p>But if you're still lost, you should feel really lucky.</p>
<p>Because this video is part of a programming course that I put together to teach you everything that you need to know to start programming.</p>
<p>And I promise by the end of it, this application will be very easy for you to understand even without my help.</p>
<p>I envy all the knowledge that you get to learn.</p>
<p>So maybe there's some things that you understood and others that confused you.</p>
<p>Well, I designed this course that you only have to take the lessons that you want to take no prior lessons required to make your own curriculum.</p>
<p>So what are you waiting for? Now, if you want to be a good programmer, it's very important that you get a solid understanding on data types.</p>
<p>So let's talk a bit about them and get you familiar with the basics of them.</p>
<p>On the most fundamental level, let's say you have some data that is stored in a variable.</p>
<p>Well, this data has some sort of type that's associated with it.</p>
<p>There are a good number of different data types, and they all have different instructions and rules.</p>
<p>And this is sort of computer knows what it can and can't do with the variable.</p>
<p>Now there are six main data types that are shared across most languages.</p>
<p>bool, which stands for Boolean named after the 19th century mathematician George Boole whose work popularized it char, which stands for character string, which stands for string of characters int, which stands for integer float, which stands for floating point value, and array, which isn't actually a type of data.</p>
<p>It's a data structure.</p>
<p>But by definition, it's an ordered series or an arrangement of similar types of data.</p>
<p>And no, there are more data types that exists out there.</p>
<p>But if you want to learn more about these in particular, I've a lesson on each and every one of them, check the link in the description, because this lesson, we're only briefly go over them.</p>
<p>Now, again, every single one of these have their own unique set of rules and instructions.</p>
<p>For instance, let's take a look at the integer data type, which are a type of data for whole numbers.</p>
<p>Let's say that you have an integer that equals 11.</p>
<p>And you want to minus one from it, well, you'd write off this operation, send it to the computer to perform.</p>
<p>And guess what your computer will take a look at this operation, then we'll look to see if it has the instructions for doing that operation, then we'll go Yeah, I know how to subtract an integer from an integer, the computer will then subtract one from 11 and then send back to you a 10.</p>
<p>all well and good.</p>
<p>everything checks out.</p>
<p>But now let's take a look at a string data type, which again, is a string of characters.</p>
<p>If you were to have the string 11, and you want to subtract the integer one from the string 11.</p>
<p>Well, you send this operation to your computer, your computer would take a look at its operation, then check to see if it has instructions on how to do that or not, then it would realize what you sent it makes absolutely no sense.</p>
<p>It has no instructions on how to subtract integers from strings.</p>
<p>This is no different from telling your computer to subtract one from the word hello.</p>
<p>How do you do So your computer will just send back to an error letting me know that the operation you're trying to do makes no sense.</p>
<p>What specifically in this case is a type error.</p>
<p>Now, let's do the same operation, but instead make both of them strings.</p>
<p>What do you think will happen? Well, we get attending in but as a string, maybe we'll get another error.</p>
<p>Well, if you again have the string 11, and you send the operation to your computer to subtract the string one from the string 11, your computer will look its operation, then again, realize it has no instructions on how to do this, thus, returning back to you in air.</p>
<p>But you may find this next part quite interesting.</p>
<p>If you instead tell your computer to take the string 11 and plus the string one to it, it will look at this operation, then check to see if it has any instructions on how to do this or not.</p>
<p>And then say, Yeah, actually, I can do that for you, then it'll send back to you a string of 111 simply because since the string one and the string 11 are both strings, all it has to do is add an extra one to the 11th string, just for example.</p>
<p>And there you have it for data types.</p>
<p>That is why understanding data types is really important, you will have a very hard time trying to write programs without knowing the difference between a number as an int, float, or string.</p>
<p>Check out the lessons LinkedIn description to learn more about each data type individually.</p>
<p>But in conclusion, just remember that data types are different types of data with different rules and instructions.</p>
<p>And depending on the data type of your variable, there are certain operations that you can and can't do with it, which will become very important to grasp and understand as you start using them.</p>
<p>So let's talk about bulls bull is short for Boolean.</p>
<p>If you hear bull or Boolean, they mean the same exact thing.</p>
<p>And it was introduced by George Boole in his book The mathematical analysis of logic in 1847.</p>
<p>But what is a Boolean in terms of programming? Well, a Boolean is a data type that can only be assigned one of two different values, either a true value or false value.</p>
<p>And that's it, it honestly doesn't get any more complex than that.</p>
<p>And what might take you by surprise is that bullions are the most fundamental building block for programming, most of your code will simply just check if something is true or not.</p>
<p>And complexity is added by combining a bunch of volumes.</p>
<p>But we'll get into that in just a bit.</p>
<p>But for now, let's get into the nitty gritty on how you go about using volumes.</p>
<p>And we're going to do this by using two different languages.</p>
<p>Because I think it can be really helpful for you to learn how they compare and contrast.</p>
<p>And plus, you'll pretty much learn two languages at once.</p>
<p>So on the left is language C sharp using the it Visual Studio, which should interest you if you want to do windows development, or if you want to make games using a popular game engine called a unity.</p>
<p>And on the right is the language Python three using the ID Visual Studio code, which should interest you if you want to get into general programming or data science.</p>
<p>Alright, so here I have two brand new console projects.</p>
<p>And if you don't how to make a new console project in either C sharp or Python or both, be sure to check out the video in the description.</p>
<p>It's called How to install an ad.</p>
<p>And at the end of that video, I'll show you how to do that.</p>
<p>Alright, so the first thing I want to get into today is just some basic Boolean syntax.</p>
<p>So first thing I'm gonna do is just delete these two lines don't need them, they come standard with every new C sharp project.</p>
<p>And then I'm going to cast a boolean data type, bowl, and then I'm gonna create a variable called pizza time them assign it to be true.</p>
<p>Now, the first thing that you know about Boolean is that they only have two states, they can either be true, or they can be false.</p>
<p>That is about the only flexibility that a bullying has when it comes to assigning it.</p>
<p>But over in Python bullions have just a little bit more flexibility.</p>
<p>So I'm going to create a new variable, and we'll call it pizza time, of course, I'm gonna assign a true value to it.</p>
<p>And now it knows that this is a Boolean, but I can also assign a false value to it.</p>
<p>Or I can also say, assign a one value to it, that equals true.</p>
<p>And lastly, I can assign a zero value to it, and that equals false.</p>
<p>And just to prove it to you, I'm going to show you all the different cases.</p>
<p>So we'll do true here.</p>
<p>And then to check it, we need an if statement.</p>
<p>So I'm gonna say if pizza time, then we need to print pizza, or a string pizza.</p>
<p>Like that, I'm gonna hit the play button and you'll see that it prints out pizza.</p>
<p>Next, I'm going to change the false value, and it should print out nothing.</p>
<p>If we hit the play button.</p>
<p>You see nothing was printed just as we expected.</p>
<p>And now I'm going to change this to be a one value and hit the play button.</p>
<p>You'll see that again we get pizza pretty nice.</p>
<p>And lastly, I'm just going to say pizza time equals zero save it hit the play button and you see that we get nothing printed.</p>
<p>So what's going on here because Clearly the pizza time variable is an integer.</p>
<p>And we're saying if zero, then print pizza time.</p>
<p>That doesn't make any sense, right.</p>
<p>And that's one of the benefits to Python being an interpreted language, it allows you to pass in integers in a conditional statement.</p>
<p>And if it's zero, then it's going to convert that into a false value.</p>
<p>But if it's one, it's going to convert that into a true value.</p>
<p>In fact, any numeric value that is not zero, and it's being used as a conditional statement will return a true value.</p>
<p>So Pete's time equals nine, save hit play, you'll see that it prints out pizza, pizza time equals negative three, hit save, hit play, still prints out pizza is in this isn't only limited to integers, you can also use floats.</p>
<p>So if we say pizza time equals point 0000001, hit save, you'll see here pizza time is now a float, we hit play, and still it will print out pizza.</p>
<p>And this is unique to Python, we can't even think to do that in C sharp, if we weren't even tried, we get all sorts of errors.</p>
<p>So that's just one extra flexibility you have with using the language, Python, font and crease.</p>
<p>So now I want to get into the many, many, many operators that bullions have, which is just a testament to how powerful these things are.</p>
<p>But let's start with the equality operator.</p>
<p>Now, let's say that you want to create some like user login system, right.</p>
<p>So I'm just going to create a couple of strings here.</p>
<p>I'm going to say string, password type some su p T stands for password typed, I'm going to say equals ABC 123.</p>
<p>And then let's do another string of semi colon Of course, and then do another string.</p>
<p>And this is going to be P A for password actual.</p>
<p>And we're going to say equals, again, ABC 123.</p>
<p>Okay, so let's say that this is the user's actual password PA, ABC 123.</p>
<p>And what they typed is ABC 123.</p>
<p>So how can we check to see if they match? Well, we'd have to use something that's called the equality equal operator.</p>
<p>And the equality equal operator looks like this.</p>
<p>pt, equals PA.</p>
<p>And that's all it's to it.</p>
<p>Now, I know what you're thinking, this looks really confusing.</p>
<p>And I've been programming for about 13 years now.</p>
<p>And I agree with you.</p>
<p>So one thing that I usually like to do with my bullions is first and foremost, I like to put parentheses around whatever is like the Boolean then I'm checking for, it just makes it a lot easier to read when I'm scanning lines of code.</p>
<p>But to explain to you what's going on here, again, equals equals that's two equals back to back is what we call inequality equals Operator, do not get confused with one equal one equal is simply just the assignment operator, it means that you want to assign something to a variable to equals, again, is checking if two things equal each other.</p>
<p>So if we were to read this full line, we're simply just initializing a boolean variable called pizza time.</p>
<p>And we're assigning the value true or false to it with this Boolean operation here.</p>
<p>And what this Boolean operation simply does is it just checks if p t is equal to PA.</p>
<p>If it is then pizza time will equal true.</p>
<p>But if it's not, it's going to return a false and piece of time will equal false.</p>
<p>I mean, pretty simple, right? We just asked if two things equal each other.</p>
<p>If it is, then give us a true if it doesn't give us a false.</p>
<p>And as simple as this is, if you've ever logged in to anything before, this is pretty much all they're doing with maybe a couple extra checks on top of that.</p>
<p>All right, I think I beat that horse well enough.</p>
<p>But I keep on hammering this in because it's really important that you understand this step.</p>
<p>If you understand what's going on here, then I think a lot of programming is going to be really easy for you to understand, because this is like one of the staples to programming.</p>
<p>Moving on.</p>
<p>Just to prove to you that this works, as I am saying that it does, we're gonna come down here and do a console dot write line, just print this to the console, pizza time.</p>
<p>And then we also need a console dot read key.</p>
<p>This just makes sure that the console doesn't immediately close when we run it, hit the start button up here.</p>
<p>And then I'm going to bring the console on screen.</p>
<p>And as you can see, it returns a true value.</p>
<p>But if we make one of these slightly off, if I turn this to be one to four instead, and we hit the start button, you can see that whatever returns to us is a false value.</p>
<p>So it is not pizza time because they do not match they are not equal.</p>
<p>And now over in Python, I'm just gonna quickly recreate the same scenario.</p>
<p>It's time equals, well, we need some for that we need p t equals A b, c 123 p p A equals equals a string, ABC 123.</p>
<p>And then pizza time equals P t equals P oops, p a, like that go on to add the prince, let's do print pizza time here.</p>
<p>And then I'm gonna hit the play button and return to True Value perfect.</p>
<p>And of course, I can make one of these slightly off, and then hit the play button and returns a false value.</p>
<p>Now, I really hope that all that made sense, because if it did everything from this point on, it's gonna be really easy to understand.</p>
<p>But next, let's move on to our next operator, which is the equality not equal operator.</p>
<p>And how the equality not equal operator works is, let's say that you want to check for like, some bad word, right? So we're gonna change pa to be bad word, right.</p>
<p>And so instead of checking if they are the same, you're going to check if they are not the same, and not is going to be indicated by a exclamation point.</p>
<p>Now, what this is saying is, if they do not equal each other, then I want you to return a true value.</p>
<p>However, if they do equal each other, then I want you to return a false value, it pretty much just flips the Boolean operation, which again, is what we want in this scenario, because we're trying to filter out bad word, if what you typed is bad word, then it's not pizza time.</p>
<p>And just to prove to you that this will return to true because they do not equal each other, I'm just gonna hit the play button up here, and then bring the console on screen, you can see that it returns a true value.</p>
<p>So that's pretty much everything that you need to know about the equality operators.</p>
<p>Next, let's get into the relation operator, starting with the greater than operator.</p>
<p>So imagine that you have some login system, and you want to limit the amount of times that a user can log in, Well, one thing you can do is use one of the relational operators, let's just start with a greater than.</p>
<p>So first thing, let's just ignore these two variables for now and create new ones, we're gonna make an integer, I'm gonna call it a log attempts, equals, let's just say it's three.</p>
<p>And then let's make another integer and call it log max equals five, for instance, right, so what we can do is come down to our pizza time Boolean, and we can replace this with log Max is greater than log attempts.</p>
<p>And what this is doing is it's essentially checking if log Max is greater than log attempt.</p>
<p>And seeing as log Max is five in log 10 plus three, this is going to return a true value for our pizza time Boolean variable.</p>
<p>And just to prove to you that this is correct, I'm gonna hit the start button, bring the console where you can see that we have a true value.</p>
<p>So that's the greater than operator, we could also use the less than operator, which is going to check if logged Max is less than log attempts return a true value if that is true or false value if that is false.</p>
<p>But there's also a greater than equals to operator, which just checks both if it's either greater than or equal to the log attempts.</p>
<p>And finally, of course, there is the less than and equal to operator that will check if log Max is less than or equal to log attempt.</p>
<p>And over in Python, these operators don't change at all, I'm just going to get up to speed I'm gonna do log attempt equals three and log max equals five and then come down to our pizza time go in and do log Max is greater than log attempt.</p>
<p>And then I'm going to run that just to prove this works the same.</p>
<p>And voila.</p>
<p>And the last operators I want to go over are the end and or operators.</p>
<p>So here is where you really can be able to see the power of bullions being demonstrated.</p>
<p>Alright, so let's bring back our old scenario.</p>
<p>So we're going to change this back to ABC 1234, past actual, and then our past typed is also ABC 123.</p>
<p>And let's replace this Boolean operation with P t equals equals that is our equality equal operator equals P a.</p>
<p>So what if you want to check if the password is a match, and they're under a certain number of login attempts? Well, we can use our and operator and in C sharp It's done like this, you just type the an ampersand, and then another and an percent.</p>
<p>And that is the end operator.</p>
<p>And then after that you can do, you can write out another Boolean operation.</p>
<p>So we're gonna write log attempt is less than log max.</p>
<p>And so what this full Boolean is asking, it's just pretty much asking, do our password typed in a password actual do they match, and the two ampersands.</p>
<p>And are we under is the our log attempts less than our log max.</p>
<p>If true, if both of these are true, then return a true value for a pizza time.</p>
<p>But if either of them are false, doesn't matter which one, then return a false value for our pizza time.</p>
<p>And just to prove to you that that is how this operation is done, I'm going to press the start button top and bring the console and open, you can see that we have a true value here.</p>
<p>And all it takes, all it takes is for one of these to be false.</p>
<p>And I'm just going to change this to be passed, or ABC 124.</p>
<p>And then we hit save, and then I'm going to hit the start button and bring the constant window over here.</p>
<p>And you can see that we have a false, even though one is true, we're asking for n.</p>
<p>And that means they both have to be true in order for pizza time to be true.</p>
<p>And just a quick side note, I generally like to use a lot of parentheses as many as possible.</p>
<p>When it comes to Boolean operations like this, I like the segment because it just makes it a lot easier for me to read, when I'm just going through lines of code, parentheses like me know, okay, this Boolean operation here, I see that and I know there's another one, it just makes it a lot easier for me, even sometimes I'll do like an overall parentheses over the entire Boolean operation.</p>
<p>It just helps me read it a lot easier.</p>
<p>I don't know if helps you or not.</p>
<p>But that's a tip that you could use.</p>
<p>And over in Python, the syntax is just a little different.</p>
<p>So I'm just going to get up to speed going to change this back to pass 123 or just not pass is it as ABC 123.</p>
<p>Sorry, ABC 123.</p>
<p>And then we'll change this to be P t equals equals p a, or did you not tell since for me, and the way that we do in an in Python is you literally just typed out the word and, and log attempt is less than log Max, boy, that has became a really small window, maybe I should send out just a bit.</p>
<p>Cool.</p>
<p>So now I'm just gonna prove this by hitting the play button.</p>
<p>And you can see we got a true value.</p>
<p>But yet again, all it takes is one of these Boolean operations to be false.</p>
<p>And they the entire thing becomes false.</p>
<p>And I'm proving that we'll change this to four, hit the play button, and we got a false value returned to us.</p>
<p>But what if you want him to be a merciful social media developer, right, where you don't care if they get one or the other wrong, as long as you get one of them wrong.</p>
<p>First of all, don't ever do this.</p>
<p>But if you want it to do this, you would simply just change the AND operator into an OR operator, and then C sharp This is done by replacing the two ampersands.</p>
<p>With two vertical lines.</p>
<p>I'm not sure what these characters are called.</p>
<p>But you replace it with two vertical lines, it's on the same key that the backslash key is on just looked it up, I guess it's called the vertical bar character never knew that been anyhow, this will now check if either one were true, which we know that one of them is false, because p t does not equal PA.</p>
<p>But the second one is true because log attempts is less than the log max.</p>
<p>And to prove that this will return true because one of them is true, I'm going to hit the start button and then bring the window over you can see that we have a true value returned.</p>
<p>And over in Python, the OR operator is just a bit different, just as you write out and for the an operator in Python, you have to write out or for the OR operator in Python.</p>
<p>And now over in Python, the OR operator is just a bit different, just like how you had to write out an for the an operator, you have to write out or for the OR operator in Python.</p>
<p>And of course, just to prove that this works, I'm gonna hit the play button up here.</p>
<p>And you'll see we get a true value returned.</p>
<p>So I hope you can see what makes Boolean so powerful in the world of programming.</p>
<p>Just from this simple example alone, we already have a Boolean that checks for the log attempts next to you know, the actual password typed.</p>
<p>And then we can take this Boolean and embed that into another Boolean and just keep on adding complexity and complexity.</p>
<p>Billions are incredibly powerful and and they're really important to understand.</p>
<p>And yeah, there you have it, guys.</p>
<p>That is pretty much everything that you need.</p>
<p>To get started programming in regards to billions.</p>
<p>So strings strings are one of the most important ingredients to almost every program you'll ever make.</p>
<p>Why? Well, the odds are likely that at some point in deployment or even during development, some human will have to interface with your application.</p>
<p>And with that, your program needs to communicate with them somehow.</p>
<p>And it's highly likely that using strings will be how you go about doing that strings on the most basic level are a string of characters together in a series, hence the name string, you can write any word in any language, you can write any number, or even any code slang key, you name it, making strings, incredibly powerful.</p>
<p>And that's pretty much all that's the strings, they're really easy to get your head around.</p>
<p>And there are a few things that are really good to know while using them.</p>
<p>So let's take a look at a few examples.</p>
<p>Now we're gonna do these examples using two different languages, because I think it can be really helpful for you to see how they compare and contrast.</p>
<p>And plus, you'll pretty much learn two languages at once.</p>
<p>So on the left is the language C sharp using the it Visual Studio, which should interest you if you're gonna do windows development, or if you want to make games using a popular game engine called unity.</p>
<p>And on the right is the language Python three using the ID Visual Studio code, which should interest you if you want to get into more general programming or data science.</p>
<p>Alright, so here I have two brand new console projects.</p>
<p>And if you don't how to make a new console project and either C sharp or Python, or both, be sure to check out the video in the description.</p>
<p>It's called How to install an ad.</p>
<p>And at the end of that video, I'll show you how to do that.</p>
<p>Alright, so the first thing I want to get into is some basic string syntax.</p>
<p>So first, I'm going to delete these lines, they come stock with your brand new C sharp project.</p>
<p>And then I'm going to initialize a string, we'll call it a just for example.</p>
<p>And then if you want to assign a value to a string, you have to use double quotes.</p>
<p>And then you can type in whatever string you want, and then semi colon at the end.</p>
<p>And as far as C sharp string syntax is concerned, that's all you will need to worry about just the double quotes, make sure they are double quotes.</p>
<p>Now over in Python, we have just a little bit more freedom.</p>
<p>So I'm going to initialize a string here.</p>
<p>And then I'm going to assign hello to it.</p>
<p>And as you can see, I use a double quotes just like we did in C sharp, but you can also initialize a string and assign Hello, with the single quotes as well, both of these will be counted as a string within Python.</p>
<p>And just to prove that I'm going to do print a and then B.</p>
<p>Here we go.</p>
<p>And there you have it, hello, and Hello, both are counted as strings.</p>
<p>In fact, today, you're going to find that this freedom right here, the double quotes in single quotes can be assigned to a string is quite nice, Yossi.</p>
<p>And so the next thing I want to talk about is the fact that strings are arrays of characters.</p>
<p>And to demonstrate that in C sharp over here on the left, we're simply going to do a console dot write line.</p>
<p>And then I'm going to do a and I'm going to use the brackets and just put a zero in between them.</p>
<p>This, this is an element within the A array.</p>
<p>Again, strings are an array of characters.</p>
<p>So I'm just asking for the zeroeth element from the A string array, which this is zero, this is one, this is 234.</p>
<p>Arrays always start on zero in pretty much every programming language.</p>
<p>And so now just to prove that, I'm going to hit the start button up here to run it in Africa, I always forget to do console dot read key, this just makes sure that the terminal stays open until we press a key and hit start.</p>
<p>And then bring this over here and you see that we have the zeroeth element in the A array that is again a string of characters, which is H.</p>
<p>And it's quite flexible, we can put any that we want in here as the exercise.</p>
<p>So if we want to get zero, we can still be count this is zero, and then he is 1234.</p>
<p>So if we put four in here, then when we hit the start button, you'll see that it prints out in Oh, in fact, this technique is what a lot of game developers use when they're trying to create some chat system that pops up one character at a time, they will pretty much write out the entire dialogue here like Hello, welcome.</p>
<p>Welcome to my store.</p>
<p>And then they will write some function that will take in a string and then we'll grab every single character and then we'll print one out with a pause near like a second pause probably a lot less than that, like a 10th of a second pause, then print the next 1/10 the seven second pause, print the next one, so on and so forth.</p>
<p>Just A little add on there, and over in Python, I'm gonna get rid of the B, we're just going to keep the double quotes convention to match with C sharp, given the B here, and then I'm actually just going to do a print.</p>
<p>Let's do zero first, hit the play button, you'll see we get an H.</p>
<p>And again, we're going to do a four.</p>
<p>So we can get the O hit the play button, and Oh, I forgot to save it, and then hit the play button.</p>
<p>And then we have Oh, right there, pretty much the same in both languages.</p>
<p>Again, just remember that all strings are just a array of characters.</p>
<p>Next thing I want to talk about is using the addition operator with strings.</p>
<p>And to demonstrate that over here in the left, when C sharp is going to remove this Bechtel, we had it, remove this from the right, and I'm just going to come down here and do a plus equals oops, plus equals, that's the addition operator, these two right here, when you see plus equals, that is an addition operator, plus equals and then just add a character exclamation mark to it.</p>
<p>And then I'm going to print that, and you'll just see that it's gonna be Hello, and then I'm just gonna add a little exclamation at the end.</p>
<p>Start that up, bring it over here, and voila.</p>
<p>Now one cool thing about this process is because at the fact that the string a is just an array of characters, using the addition operator pretty much just says, Take that string of characters and add this character to the end of it.</p>
<p>However, the cool thing is, you aren't limited to only adding characters.</p>
<p>Again, the single quotes denotes a character double quotes, and that denotes a string.</p>
<p>So we could add to the end of this world, for example.</p>
<p>Now, of course, we have to change these single quotes or double quotes to let C sharp know that this is now a string.</p>
<p>And what this is going to do is, it's now going to add every single character in this, this character array, or this string is going to add every single character to this string.</p>
<p>And just to prove that, I'm gonna hit start, and then we'll bring this over and voila, hello, world.</p>
<p>Alright, now over in Python, I'm just going to restore this back to its original state, then do a plus equals exclamation mark.</p>
<p>Now, of course, this is just going to take the Hello string, the A string, add an exclamation point to it, and is going to print that out with the play button to confirm come down.</p>
<p>And that exactly what we got.</p>
<p>Now, I want to again reiterate that Python doesn't care if you use double quotes or single quotes for characters or strings.</p>
<p>So unlike C sharp, we could just put world right in between of two single quotes, and it will we hit play, it will print out for us without giving us any errors or any problems whatsoever.</p>
<p>That's just one of the benefits to using an interpreted language.</p>
<p>If you want to use single quotes or double quotes, that's pretty much up to you your own discretion.</p>
<p>But just to keep everything consistent, we're going to use double quotes for strings as well, for this lesson, not before we move on, you might be wondering, oh, well, if we can do addition operator, what if we use like a multiplication operator or subtraction operator, a division operator? Well, unfortunately, the addition operator is the only arithmetic operators that you can use on strings.</p>
<p>So don't get too happy.</p>
<p>Now, escape characters are actual characters, so I'm not gonna go too deep into them for this lesson.</p>
<p>But they're pretty important to string sing as strings are an array of characters.</p>
<p>But let's just look at a few of them real quick.</p>
<p>So I'm just going to add a few of them here.</p>
<p>I'm going to do backslash in.</p>
<p>And then I'm gonna do backslash T, I'm gonna do backslash, single quote, backslash double quote, and then backslash, backslash.</p>
<p>Now these are, what is that five are the most popular escape characters.</p>
<p>The first one, this is new line, this is a tab.</p>
<p>This is single quote, this is double quote, and this is backslash.</p>
<p>And I'm going to just print out this to show you that what they do, hit the start button, and then bring this over.</p>
<p>And so you have a new line, which is the backslash, N, and then a tab, which is backslash, T.</p>
<p>And then you have the single quote, which is backslash single, quote, double quote, which is backslash, double quote, then you have backslash, which is backslash, backslash.</p>
<p>And these bad boys are handy because they help you do some things that are probably not intuitive when you first start coding, for example, like how do you press Enter when you have just strings or how do you use double quotes of strings required double quotes to initialize right so for example, I'm just gonna get rid of all these.</p>
<p>Just give you a quick example.</p>
<p>I'm going to use the escape character, double quote at the end and it looks good.</p>
<p>Kill character double quote at the beginning.</p>
<p>And this is going to look like hello in quotes, I'm gonna hit the star button, and then bring this over.</p>
<p>And there you go, you've escaped from the syntax of strings by using the escape character.</p>
<p>Again, I went over this pretty briefly in this lesson.</p>
<p>But if you want to know more about that, check out the lesson I did on characters, and I go a bit more in depth about them.</p>
<p>So I'm just going to restore this back to how it was before I move on to Python.</p>
<p>Now over in Python, the syntax for the escape characters are the exact same, I'm just gonna get rid of this line.</p>
<p>And then just add them just as we have in C sharp, backslash t backslash, single, quote, backslash double quote, and then backslash backslash.</p>
<p>Make sure to add that double quote back.</p>
<p>And yeah, there you have it.</p>
<p>One cool thing about this is actually a Visual Studio Code addition is that it will change the color of the escape characters in your string.</p>
<p>So that's pretty handy.</p>
<p>I'm just going to print that out, we should get similar results.</p>
<p>And there you have it.</p>
<p>Alright, so the next thing I want to get into is interpolated strings.</p>
<p>Now, there is no reason for a man to have so much love for a syntax, but I absolutely love interpolated strings.</p>
<p>And here, you'll love it too.</p>
<p>here's, here's what's going on.</p>
<p>Okay, so say we wanted to deliver some message, right? I'm gonna get rid of all this and do like Hello, name.</p>
<p>How are you? Right.</p>
<p>Now, let's say you didn't want to have actual name here.</p>
<p>You want to have like some user input name, right? So let's create a new string for that name.</p>
<p>initialize string make it name equals job Brill's.</p>
<p>Right.</p>
<p>So how you would do this normally is you would segment this string, you would do this and you would delete this here and you would do plus, plus name, and then plus the string again, right, so you have three different strings, but you have to break it apart to put the the string variable here, and then you stitch it back together by plussing the last half of the string.</p>
<p>I mean, listen, it works, it'll get the job done.</p>
<p>But when you have to write a lot of strings like this, over time, it just gets really tiring and easy to get frustrated.</p>
<p>But that is where interpolated strings come into play.</p>
<p>First, just to prove to you that this works, I'm just going to hit the start button.</p>
<p>And then we're going to bring the screen over here and bada boom, it works fine.</p>
<p>But with interpolated strings, now we no longer have to segment the strings anymore, we can bring this back together as one string, and then simply come to the beginning of our string and add the dollar sign.</p>
<p>This dollar sign denotes that the string is now interpolated.</p>
<p>And what that allows you to do is in the middle of strings, you can add brackets, and inside of those brackets, you can add variables.</p>
<p>And so now when I print this out, check this out.</p>
<p>This is so exciting.</p>
<p>Now you have the same exact thing, it's just that you didn't have to break up your string, I love interpolated strings.</p>
<p>So you can imagine if you have like a really long text or something like that, and you have a lot of variables that you need to inject into that text, you can simply just turn a string into an interpolated string, and just you know, add the brackets and your variables all over the place.</p>
<p>And it saves so much time.</p>
<p>And it's just beautiful.</p>
<p>I love it.</p>
<p>No run Python, it's pretty much the same thing.</p>
<p>I'm just going to set this up and say hello name.</p>
<p>How are you? And the only difference in Python though, is instead of $1 sign, you're going to use an F for interpolated strings.</p>
<p>And so now we have the creator initializer name variable.</p>
<p>This is going to be jabril Rose.</p>
<p>And so now we can do the same thing use the brackets and bada boom, hit play just to prove it to you, and hello to Brill's How are you so beautiful, I love it.</p>
<p>And so the final thing I want to go over is just a few handy functions that come with the string data type.</p>
<p>And to demonstrate these handy functions, I'm going to get rid of this line, it's no longer needed.</p>
<p>And the first one I'm going to show you is a lower casing function.</p>
<p>So we can just do name equals name dots to lower end C sharp to lowers the method and use call that add the semicolon.</p>
<p>Then we come down here and then just print out the name.</p>
<p>And what's going to happen is it's going to take the name and then it's going to do it's going to lowercase every single character within the name.</p>
<p>It starts to prove that bring the window over here and you'll see that it has turned this into all lowercase letters.</p>
<p>This can be quite handy when Perhaps you're creating like a database of users or something like that and you don't want duplicates, then no matter what name they pass in to your database, you'll lowercase it every single time and then just do a match against those.</p>
<p>That's one of the most common use cases for that function.</p>
<p>But it's always good to know just in case you need it.</p>
<p>Next, I want to show you the reverse of that, which is an upper casing function.</p>
<p>And instead of starting over completely, I'm just going to add on to our console logging.</p>
<p>So under the first write line, I'm just going to do reset name back to equal to Brill's.</p>
<p>And then we're gonna do name equals name.to to upper is the function in C sharp.</p>
<p>And then I'm just going to copy this Ctrl C Ctrl V.</p>
<p>And now it's going to first print to the console it and all lower, and then all upper and approve that I'll hit the start button, and bring it over.</p>
<p>And voila.</p>
<p>Next up a really, really, really useful function that comes with the string data type is the split function.</p>
<p>So I'm going to reset name, I'm gonna say name equals I'm do a little bit different this time, though.</p>
<p>jabril is what the comma in the middle because we're going to use that as our character that we're going to use to split the string apart.</p>
<p>So with this, we because we're splitting the string into two, we need to have an array instead.</p>
<p>So I'm gonna say, string, and then add the brackets, let a note, let the C sharp know that it's an array, and we'll call it name to equals, and then this we're going to name dot split, and then we'll pass in the character, we want to use the split as gonna be the comma.</p>
<p>And then we can simply just come down here and do console dot write line, and name to.</p>
<p>And then we want to do the first element of that array, which is zero.</p>
<p>And that is the copy and paste.</p>
<p>And then we're going to print the second array element from that array, which is one, and approve that it is going to split this I'm going to hit start here.</p>
<p>And then I'm going to bring the window over and you see that it's split the name based on the comma, jab, reals, beautiful.</p>
<p>And the final handy function I want to show you is the contains function.</p>
<p>So I'm just going to do name equals, I like the spaceship.</p>
<p>I don't know, I like the spaceship.</p>
<p>And then we need a Boolean because contained returns a Boolean.</p>
<p>So Boolean, we'll just say does, and that equals name, dot contains, and then we need to pass in a string here.</p>
<p>And then we're gonna say the does this contain the word the in it and then simply we just do console dot write line does.</p>
<p>And then just to prove that this does return a true value, if it returns, if it has the word the, in the string, I'm going to hit start, and then bring the wind over.</p>
<p>And you see the last right here it was returned a true and yeah, contains is just another really powerful function that comes with the string data type.</p>
<p>Really good use cases for that, and always good to know.</p>
<p>And over in Python, it's just a little different than how they do it in C sharp.</p>
<p>So we ever named here we're gonna do name equals whoops, equals name, dots.</p>
<p>Lower.</p>
<p>Huh.</p>
<p>And we're gonna do print name here.</p>
<p>We're gonna print that out, press the play button, show you that it lowercase is the name, just as we expect.</p>
<p>And then the next one, I'm going to do name again equals to Brill's, and name equals name dot upper function, and then print name again.</p>
<p>I'm going to print that out.</p>
<p>And you'll see that we have all lowercase and then all uppercase.</p>
<p>And now this next string function is going to really demonstrate how Python has a bit of an edge over C sharp in this regard.</p>
<p>So we're going to do name equals the same jab and then rails.</p>
<p>And then here, all we have to do is name equals name, dot split, we're just reassigned name and it will instantly turn this into an array.</p>
<p>That easy, reassign it and then all we have to do then is just to print name and to prove them and hit the play button.</p>
<p>And there you have it jab rails.</p>
<p>Yeah, personally, this is one of my favorite reasons for using Python is because of the ease of doing stuff.</p>
<p>Like this versus over in C sharp how we had to have our string name, we had to initialize a new string array to hold the new string array we're about to make and then printing them out one at a time.</p>
<p>This is just like three lines of code.</p>
<p>easy, simple.</p>
<p>One of the advantages that I love using Python, and the final one is the contains function.</p>
<p>So it doesn't do name equals I like the space ship.</p>
<p>And then come on down here, and then do does initialize a Boolean called does.</p>
<p>And then we're going to do name dots.</p>
<p>Contains, I'll explain why this looks weird in the second, and then the, and then we can print does, alright, and just to prove that works can press play, and it does not work.</p>
<p>And that is because of course, I forgot to save it.</p>
<p>So hit save, and then hit play, come on down, and there you have it true value, I really just want to pause for a second here and emphasize that Python really doesn't care if you use double quotes or single quotes.</p>
<p>As you see, we're using double quotes here for the name and single quotes for the string that it contains.</p>
<p>And it still returns true, it just interprets.</p>
<p>Now, the reason why this part looks so ugly, is because this is what's called a wrapper method, or a method wrapper rather, and it's not important for you understand what that term is yet, in your early days of programming, but essentially what this is, the Python doesn't want you to use this way.</p>
<p>How they prefer you to use it is if you were to go if and then the in name.</p>
<p>So if the string the is a name, then we'll do print does.</p>
<p>Python really prides itself on you know, being a language is kind of close to how we actually, you know, use language as humans.</p>
<p>So this is how I prefer for you to use this, this, this, this method rather.</p>
<p>And just to prove that we're gonna hit play, we'll make sure it's saved and hit play, and we should see two trues, which we do and that doesn't guys, that's pretty much everything that you need to get started with programming in terms of strings.</p>
<p>char data types are pretty easy to grasp.</p>
<p>char is short for character.</p>
<p>And if you know how to read and write in any language, then you know what a character is.</p>
<p>first letter, your name, character letter, you gotten math class character, that hashtag symbol that you overuse on social media care, reg dir, any letter from any language, any single digit number, any sign or symbol, even some glyphs like the yin and yang sign or a single character.</p>
<p>But that's a bit beyond the scope for this course, just keep this in the back of your mind for when you want to learn more about them.</p>
<p>But for now, just know that characters are very important in the world of programming this year, a lot of overlap with a string data type, because a string of characters is what makes up a string.</p>
<p>In fact, way back in the early days of programming language, language, C strings didn't even exist as a data type, you instead had to create an array of characters, but strings like desktop downloads c colon backslash program files that all your applications are installed in are all a series of characters that computers use on a daily basis to make your computer experience as smooth as possible.</p>
<p>Characters play an essential role for computers being able to communicate and relay information to us.</p>
<p>And that's pretty much all there is to it.</p>
<p>Now from here, there's not really much to go over.</p>
<p>But let's have a quick look at how we go about using characters in two different languages.</p>
<p>Because I think it can be really helpful to see how they compare and contrast.</p>
<p>And plus, you'll pretty much learn two languages at once.</p>
<p>So on the left, it's a language C sharp using it Visual Studio, which should interest you if you want to do windows development or want to make games using a popular engine called unity.</p>
<p>And on the right is language Python three using the ID Visual Studio code, which should interest you if you want to get into more general programming or data science.</p>
<p>Alright, so here I have two brand new console projects.</p>
<p>And if you don't know how to make a new console project, neither C sharp or Python or both, be sure to check out the video in the description.</p>
<p>It's called How to install an ad.</p>
<p>And at the end of that video, I'll show you how to do that.</p>
<p>So first things first, let's look at some basic char syntax.</p>
<p>So over here on the left, and C sharp is going to remove that that come standard with your blank console project.</p>
<p>And then I'm going to write char which is casting our data type.</p>
<p>And then we're call our variable a, and I'm going to assign a z character to it.</p>
<p>Now, this is how you write a character a character in C sharp must always be in the middle of two single quotes.</p>
<p>And it's really as simple as that we can put any character we want in here we can put a we can put j we can put eight, we can put the dollar assign any character you want can go in between these two single quotes, and there you have a char.</p>
<p>Now over in Python assigning chars is just a little bit different.</p>
<p>So we can do just as we do in C sharp, we can do a equal single quote z.</p>
<p>However, we can also do a equals double quote, and z.</p>
<p>And Python will set either one, and it will figure out that these are both a char.</p>
<p>But you'll see if we go back into C sharp, and then change these from a single quote, to a double quote z, you'll see that we'll get a type error.</p>
<p>The in C sharp, it specifically uses double quotes for strings, and single quotes for chars.</p>
<p>But again, in Python, it's pretty smart, we're figuring out you know, if it's a char, or a string, one of the benefits to an interpreted language.</p>
<p>And just to prove to you that this is the case, I'm going to actually change this to variable b.</p>
<p>And then we're going to do Print A, and then we're gonna do print B.</p>
<p>And we're going to hit the play button up here in the corner, and you'll see down here in the output, it prints both of them.</p>
<p>Zizi, no problem.</p>
<p>I'm gonna change this back to single quotes real quick.</p>
<p>Right? Okay, so now with the basic char syntax out of the way, let's talk about escape characters.</p>
<p>Now, what are escape characters, there will undoubtedly come a time where maybe you're writing out some story or creating like a list of names or something like that.</p>
<p>And you will undoubtedly come across the question, How do I press Enter? Or hit tab or insert quotes? How do I do these things? Well, that is where escape characters come into play.</p>
<p>Alright, so now let's initialize an escape character, I'm just going to cast a new variable as a char.</p>
<p>And then inside my character, I'm going to hit backslash.</p>
<p>Now technically backslash is the escape character like to escape the syntax of characters.</p>
<p>But I like to call the whole character as an escape character.</p>
<p>It's in, it's up for debate.</p>
<p>But I'm going to hit backslash in which is one of the most common escape characters called new line.</p>
<p>Now, I really want you to understand how important escape characters are.</p>
<p>If I were to, for example, replace the backslash with forward slash, for example, you see, they will get an error down here for too many characters and character literal.</p>
<p>Everything within the single quotes is what's called the character literal.</p>
<p>And you can only put one character per character literal, these count is two.</p>
<p>But when you put the backslash, that counts as one character literal, which, again, this is a new line escape character.</p>
<p>And just to prove to you that it actually does what I claimed that it does, we're going to do console dot write line, this is just going to print up the terminal for us, I'm gonna do a print A, which is a variable that has z in there, and then we're gonna do another woman to A, B, and then I'm just copy and paste Ctrl C Ctrl, V, and then we're gonna do another a, so what we should see is in a print out z, and then new line, and then another z, I'm just going to run that.</p>
<p>And it's off screen.</p>
<p>Oops, I forgot I have to also do console dot read key, otherwise, the console will not stay open.</p>
<p>So hit start, it's off screen here, I'm going to bring it on the screen.</p>
<p>And you'll see that we have exactly what we should expect.</p>
<p>Now, I know there's some y'all out there probably going Wait a second jabril.</p>
<p>That is not what I expect.</p>
<p>There are two spaces in between the Z's.</p>
<p>And let's just pause here for a second and really examine the logic of our program.</p>
<p>So the reason that we're getting two lines in between a B and A when you probably expect no no lines in between them, is because the function right line itself, it does a new line for us.</p>
<p>So it prints out z equals z will print out z, and they'll go to a new line, and then I'll print out a new line and then go to a new line and then print out z, then go to new line.</p>
<p>And I'm going to just run that one more time.</p>
<p>Just confirm that's what happens prints out a goes to new line prints out new line goes the new line, then prints out z and goes to new line word ends there.</p>
<p>So it's doing exactly as as you as we want it to do.</p>
<p>It just looks a little weird in this context, because the right line function adds a new line without really telling us it Yeah.</p>
<p>Alright, so now with that out of the way, let's check out our escape characters in Python over here on the left, I was going to change our B variable to be single quotes.</p>
<p>I'm just gonna use single quotes because it's easier convention between the two, and we're going to do a new line.</p>
<p>And I have that backwards supposed to do backslash.</p>
<p>And you can see in Visual Studio code, it'll actually slightly tint the escape characters yellow for you to help you give a little more assistance, which is nice.</p>
<p>Visual Studio regular doesn't want to do that, anyhow, new line, and then we're going to print out a and then we're going to print out B, and then I'm going to copy and paste one more a.</p>
<p>And then let's run this by hitting the play button.</p>
<p>And you'll see that we have the same exact result that we have in C sharp and you already know why there are two lines there.</p>
<p>Moving right along, let's take a look at concatenating characters concatenating, it just simply means taking a few different things and putting them together.</p>
<p>So if you have three different characters, for example, you can concatenate them, and they become one word or one phrase, what have you.</p>
<p>That's all to concatenate means so to concatenate characters, you would think it would be as easy as you know, a new character c equals a plus a.</p>
<p>But it's not that simple.</p>
<p>In C sharp, when you add two characters together, the character data type takes the addition operator in turns the characters into intz.</p>
<p>In fact, every single character under the hood actually has an integer value assigned to it.</p>
<p>And we take a look at this chart here, which is this is the ASCII chart part of Unicode, you can see that every single character has some sort of decimal value assigned to it.</p>
<p>So we could take the character two, for example, and do two plus two.</p>
<p>And that will get us 100, which is a lowercase D character.</p>
<p>But just know There aren't too many use cases, for operations like that, just know that this is how it works under the hood, it's interesting stuff to know.</p>
<p>But let's move on.</p>
<p>So what you want to do is you actually want to turn your characters into a stream, just like that, and then you'll get an error.</p>
<p>Because again, when you use the addition operator on characters, they get turned ence and you're trying to assign an integer to a string.</p>
<p>So way to override that is simply just right to double quotes, and then just plus to it, it's like a shortcut to quickly convert whatever the assignment is to a string.</p>
<p>The assignment, again, is everything that's on the right side of the variable.</p>
<p>And so now we can just add all of our characters, the string C.</p>
<p>And so I'm just going to do a plus b plus a, which is z plus new line plus C.</p>
<p>And then I can delete two of these right lines.</p>
<p>And then I'm going to add c instead of a, and then I'm gonna hit play.</p>
<p>Don't bring this over.</p>
<p>And you can see here that it's a bit different now.</p>
<p>Now, why is that? Well, let's take a look.</p>
<p>Again, right line, every time you call this function, it will return to a new line, however, we use a string and only one write line.</p>
<p>So there are no new breaks other than the one that we coated in.</p>
<p>So it's literally does print z, go to new line, and then print another z, as you see here, print z go to new line, then print z.</p>
<p>So that's what's going on there.</p>
<p>Everything with programming, it's always really basic logic that you have to follow.</p>
<p>And, yeah, now in Python, because Python is an interpreted language, it makes doing stuff like this really easy.</p>
<p>All we have to do really is just do c equals, then we can do a plus b plus a simple as that, come down to our prints, we don't need two of them.</p>
<p>So I'll delete two of them.</p>
<p>And instead replace a with C, and then save that hit the play button in the corner.</p>
<p>And you can see that we have the same exact result.</p>
<p>It prints out an A goes to new line, I'm sorry, it prints out a z goes to new line, and then prints to another z, as you see here.</p>
<p>Simple, easy.</p>
<p>God bless Python.</p>
<p>So that's pretty much all that's to concatenating characters.</p>
<p>Let's now take a look finally, at the remainder of the most important escape characters.</p>
<p>So your you know backslash in or the new line escape character.</p>
<p>There's another pretty important one that you should know as well.</p>
<p>And that is backslash, R.</p>
<p>This is the return character.</p>
<p>So what the return character does, it returns back to the beginning of the line.</p>
<p>Now, back in the old days, this was really important to us, because you would go to a new line, but it wouldn't return back to the beginning.</p>
<p>Just wherever you left off in the previous sentence, it would just go to new line at that same exact spot.</p>
<p>So you had to call the return escape characters to make it go back to the beginning of the line.</p>
<p>So what happens if we were to run this in the console? Let's hit start the play button.</p>
<p>I'm going to bring it over and you'll see that we just have one character.</p>
<p>And that z.</p>
<p>Even though we have z return z, what's happening is that it's printing out z within, it's going back to the beginning of the line and printing z again.</p>
<p>And just to prove this, we can change this to why.</p>
<p>And then just just for extra proof, we can change, we can add a plus u, and hit start play button.</p>
<p>And you'll see what happens is it prints out z, but then the return character returns to x and get in line, and then it prints out a y.</p>
<p>And then it prints out a you essentially overriding our first character, which is z.</p>
<p>Now in the new modern age, you're not really going to use the return character too much.</p>
<p>However, I bring it up because it is good to know there might be some scenarios in which you might be using an older terminal or, or an older engine or something like that.</p>
<p>And you're losing your mind that you're using the new line escape character, but it's not returning to the beginning sentence.</p>
<p>Here, this is the return character use that it will all your problems will disappear.</p>
<p>Furthermore, in most new modern programs in terminals, next y&amp;z the new line is actually it actually looks like this, and also looks like new line and then return.</p>
<p>And we can demonstrate that, interestingly enough, if we come over to Python and replace the new line shape character with a returning escape character, hit save, then play, you'll see that what we get is not what we expect, it actually is a new line, instead of a return.</p>
<p>And the reason for this is because what we're using to interpret the code is something called code runner.</p>
<p>And the way that code runner interprets a return escape character is likely like this, I can't verify it.</p>
<p>But this is likely how it interprets just a regular return character, thus, while we have a new line and a return.</p>
<p>And furthermore, if you really want to see the difference between code runner and you know, the terminal PowerShell that ships with Microsoft Windows, you can hit right click on the name of the Python script reveal in Explorer, and then just double click on this to run the Python script.</p>
<p>Oh, wait, I'm sorry, we have to add input here.</p>
<p>input, we'll keep the term open, double click on the Python script.</p>
<p>And there you have it, we have exactly what we expect.</p>
<p>That is just the difference between two different terminals interpreting interp breading sorry, code.</p>
<p>Okay, I hope that wasn't too confusing.</p>
<p>Again, you won't really have to worry about, you know, using characters in this manner.</p>
<p>Oftentimes, most people don't even you interface with characters this low level, but it is good stuff to know when you're dealing with strings all the time.</p>
<p>And yeah, let's move along.</p>
<p>The next escape character is backslash t, which is a tab character.</p>
<p>I'm going to turn this back into our simple, simple string.</p>
<p>And then I'm going to hit the start button and bring the console over and you can see that is z, tab z.</p>
<p>Simple as that Python, it's the same, just do a backslash T.</p>
<p>And we hit the play button, you see that z, tab z? Easy.</p>
<p>So the next escape characters we're gonna look at are the, quote, escape characters.</p>
<p>So at some point, you might want to add the character single quote, or something like that.</p>
<p>And you go to do that you're like, Okay, cool, single quote.</p>
<p>Wait a second, that how do I do that? Well, of course, simply put, just add the escape character, backslash, and then single quote.</p>
<p>So this right here, these two pieces, the backslash, and the single quote is the single quote, escape character.</p>
<p>And of course, you can do the same thing with that four string.</p>
<p>So let's say you want to write out some code or something, you can do backslash, and then a double quote.</p>
<p>And that is the double, quote, escape character.</p>
<p>So now if we just run this program, hit the start button, you can see that we get some really weird string with the double quotes.</p>
<p>The single quote z is just a demonstration to show you how you can use quotes if you really need to.</p>
<p>And now in Python, it's actually a little bit different.</p>
<p>So we can still do the same.</p>
<p>Use the backslash, whoa, I'm going to replace that backslash and then single quote, to get our escape character single quote, for example, you can hit play.</p>
<p>Oh, and saying sorry, running.</p>
<p>Oh, of course, I have to stop code on right click on the output, and then do stop.</p>
<p>Code run if you have input, just a quick caveat, because you won't be able to hit that play button anymore.</p>
<p>But I'm gonna hit play.</p>
<p>And you'll see that we have our sin called escape character, I replace with double quote, same deal, right, hit the play, you see that? Oh, wait, I have to save it, sorry.</p>
<p>And then hit play.</p>
<p>And you'll see they have a double quote, no big deal, right? Now, how Python is a little more special a little different is that we can use either single quotes or double quotes for a character literal.</p>
<p>So we can, you know, if we want to use a double quote, we just use single quotes on the outside.</p>
<p>And then I'm gonna save that and hit play.</p>
<p>And it's the same exact thing.</p>
<p>But if only is the same, quote, I can change the outside quotes to be double quotes, like so.</p>
<p>And just put a single quote in the middle, and then save that hit play.</p>
<p>And you see that we have a single quote in the middle of twosies.</p>
<p>So that's another benefit to an interpreted language.</p>
<p>It might save you a bit of time there.</p>
<p>But it's just yeah, it is what it is.</p>
<p>And the last important escape character is actually the backslash itself.</p>
<p>At this point, you already know where I'm going with this.</p>
<p>But if you want to write a backslash escape character, you have to do backslash to escape out, and then another backslash.</p>
<p>So two backslashes will get you one.</p>
<p>And just to prove that, I'm gonna remove this right there, and then I'm gonna hit the start button, bring this over, and voila, z, backslash, z.</p>
<p>And over in Python, it's the same exact thing, you just have to do backslash to escape out, and then another backslash.</p>
<p>And I'm just gonna save it play.</p>
<p>Come on, down.</p>
<p>And there you go, z, backslash, z.</p>
<p>And there you have it, guys.</p>
<p>That's pretty much everything you need to know to get started with programming in terms of characters.</p>
<p>Let's talk about floats, floats sent for floating point values, or floating point numbers, both are pretty much the same thing in which you could think as numbers or values that float somewhere in between integers.</p>
<p>So if both one and two are integers, with two coming right after one, then a float makes up all the numbers in between one and two 1.1 1.2 1.3 1.4 1.5 all the way to 1.9.</p>
<p>But make no mistake about it floats aren't limited to just one decimal place value.</p>
<p>Pi, for instance, is a float, it's most commonly represented as 3.14.</p>
<p>But we have no idea how many actual decimal points pi has, as it stands, researchers have calculated the two quadrillion digit for pie, and are still researching how to calculate even more digits.</p>
<p>So in short, the floating point values in between two integers are infinite.</p>
<p>And that is pretty much the basic two floats, they can honestly take a little work to understand them in their entirety.</p>
<p>But for now, all you need to know is that they are values in between integers.</p>
<p>So now let's take a look at a few examples on how to use floats with code.</p>
<p>And we're going to do this by using two different languages because I think it can be really helpful to see how they compare and contrast.</p>
<p>And plus, you will pretty much learn two languages at once.</p>
<p>So on the left is the language C sharp using the ID Visual Studio, which should interest you if you want to do windows development, or if you want to make games using a popular game engine called unity.</p>
<p>And on the right is language Python three using the Add Visual Studio code, which should interest you if you want to get into more general programming or data science.</p>
<p>Alright, so here I have two brand new console projects.</p>
<p>And if you don't know how to make a new console project, neither C sharp or Python, or both, be sure to check out the video in the description.</p>
<p>It's called How to install an ID.</p>
<p>And at the end of that video, I'll show you how to do that.</p>
<p>Alright, so the first thing I want to get into floats is the different operators.</p>
<p>If you're familiar at all with the operators, the integers use, then you'll be quite familiar with the operators that floats use as well.</p>
<p>Why? Because they are the same exact operators.</p>
<p>So jumping right into it in C sharp here on the left, I'm just going to get rid of these two lines that don't need them anymore.</p>
<p>They come standard with every single new console project.</p>
<p>And I'm just gonna initialize a float.</p>
<p>So I'm gonna type out float.</p>
<p>And then I'm gonna call it a just for an example.</p>
<p>And I'm assign zero to it.</p>
<p>Actually, that's no fun because zero is integer.</p>
<p>So let's assign, let's assign 7.77.</p>
<p>That sounds fun.</p>
<p>Now actually, before we get into talking about operators, let's touch a bit on the syntax between Python and C sharp.</p>
<p>There's not really much to the differences between the syntax of floats.</p>
<p>However, in C sharp you do have to clarify that your numeric value is a float by adding an F at the end of the numeric value.</p>
<p>This is just further instructions to tell the compiler on how they should go about handling this numeric value.</p>
<p>Simply meaning when your code is turned into instructions for a computer to do, when it gets to this line right here, it reads the flow.</p>
<p>And it knows without any confusion that this is a floating point value.</p>
<p>However, there is a caveat.</p>
<p>Even though this variable A is a float variable, you don't always have to add the float to the end of your values.</p>
<p>For example, if you instead just say float a is an integer seven floats automatically can convert themselves from integers to floats, therefore, you don't have to add the F.</p>
<p>Now while in C sharp, you have to add the F at the end of floating point values.</p>
<p>In Python, you don't have to do that, all you have to do is just type out whatever value that you want to do 7.77.</p>
<p>And Python will take care of the rest for you.</p>
<p>And Python is able to do this because it's a type of language called an interpreted language, where all you have to do is assign a value to a variable.</p>
<p>And it will interpret what data type that variable should have, which in a lot of cases is pretty nice, because you don't have to worry about the differences between floating point values are integers, you can just do sums and multiplication division, and not have to worry about any of that stuff.</p>
<p>But now let's get into some operators starting with the increment operator.</p>
<p>So an increment operator does exactly what it describes it increments and the syntax for that goes like this, a plus plus, that's it.</p>
<p>If we were to come down here and do a console dot write line, that just will print to the console for us.</p>
<p>And then we also need to console dot read key for C sharp so that the console doesn't close on us.</p>
<p>And I'm gonna hit the start button and bring the console window over, you can see that it just increments it by one plus one to 7.77 gives us 8.77.</p>
<p>And that is the increment operator.</p>
<p>Now in my experiences, it's not like a terribly good, handy tool.</p>
<p>But it can save you some times oftentimes, if you just want to add one to something, instead of having to do like full out.</p>
<p>Other operators need to do you know the variable plus plus and you're done.</p>
<p>And to do the increment operator in Python, you actually can't do an increment operator in Python, if we were to type out a plus plus, you can see that our ID shows that it's red to let us know that this is not a thing in Python, every language is different.</p>
<p>And Python just doesn't care about the increment operator, I guess.</p>
<p>So now imagine that you want to add more than one to your float? How would you go about doing that? Well, that is where our next operator, the addition operator comes into play the syntax for the addition operator goes like so.</p>
<p>So you want to do a or your variable, your float plus equals and then whatever value so we can do plus equals one to do another way to do an increment operator.</p>
<p>Or we can pass in a flow we can do, for example 3.33, F, and again, I added an F to the end of this value because it is a floating point value.</p>
<p>And if we were to run this hit the start button, bring the window over, you can see that we got 11.1.</p>
<p>Now just the minor note just to make sure we're covering all bases, you can see that it does not pronounce 11.1 F.</p>
<p>And the reason for that is because the F is something that only the computer needs.</p>
<p>Once the computer sees the code reads to F and sees that it's a floating point value, there's no point to return that back to us because we're humans, and we're smart.</p>
<p>And we know the difference between a float.</p>
<p>And just by looking at it moving a long to use the addition operator in Python, it's absolutely no different syntax wise, you do your variable in our case, a plus equals 3.33.</p>
<p>And again, we don't need add f because it's Python in Python doesn't care about F's far to come down here and write print a and then save it and hit the play button you can see down here that we will get 11.1.</p>
<p>And as far as adding is concerned, the final way that you can add value to your float is by doing something that I like to call a modified assignment.</p>
<p>Now this isn't a technical term.</p>
<p>I'm not sure if it has one or not.</p>
<p>But I like to distinguish this from regular assignments.</p>
<p>So what we're going to do is just get rid of all this just to clear up confusion.</p>
<p>And then we can do a equals a plus 3.33 F.</p>
<p>And there you have a modified assignment.</p>
<p>Now Whoa, what's going on here looks a little bit confusing.</p>
<p>Well, don't worry, let me walk you through it.</p>
<p>First thing you need to know is that this is the assignment operator.</p>
<p>And everything that is on the right side of an assignment operator is calculated first.</p>
<p>So the whatever the state of A is, which in this case is 7.77 is going to be added to 3.33.</p>
<p>And once that result is calculated, then it's going to throw that result to the left side of the assignment which is again In a sauna, since we're assigning a to equal what it currently equals, plus some extra value, we're just updating it really just a few different ways to do the same thing.</p>
<p>But you, as a developer have the choice to go with whatever best fits your programming styles.</p>
<p>And just to prove to you that this is the exact same result on hit the start button, bring the window over, you can see that again, we have 11.1.</p>
<p>And over in Python to do a modified assignment is the same exact syntax.</p>
<p>So I'm going to remove this lines to clear confusion start over and we can do a equals itself, plus 3.33.</p>
<p>And just to prove to you it's the same exact result, I made the play button, you can see boom, another 11.1.</p>
<p>Next up, we have a few operators for subtracting.</p>
<p>And the first one is the decrement.</p>
<p>operator.</p>
<p>Well, you already know what the increment operator does.</p>
<p>So guessing what the decrement operator does should be a no brainer.</p>
<p>Yes, you guessed it is simply just minuses one from your float.</p>
<p>And just like the increment operator is plus plus, well, the decrement operator is minus minus, that's all there is to it.</p>
<p>And to prove to you that it does what I say it does, I'm going to hit the start button, bring the wind over.</p>
<p>And you can see, we have 6.77, because 7.77 minus one is, of course 6.77.</p>
<p>And again, from my experience is not the most helpful operator out there, it can help you save some time writing code here and there.</p>
<p>But it is what it is.</p>
<p>And also again in Python, just as they don't have the increment operator, well, they also don't have the decrement operator, I can type out a minus minus and you can see turns red, then it's know that this is not a thing in this language.</p>
<p>And so if you want to subtract more than one from your float, you can use what's called the subtraction operator.</p>
<p>And the syntax for that is probably just as you expect, minus equals and then your float value, or your integer value, whatever numeric value, and just to prove to omit the Start button and bring the window over.</p>
<p>And as you can see, 7.77 minus 3.33 equals 4.44.</p>
<p>And over in Python, the subtraction operator is the same exact syntax, we're going to get rid of this start over a minus equals and then your value.</p>
<p>And just to prove that to you met the play button, and you can see that we have 4.43999999.</p>
<p>Now some of you are probably going what's up this discrepancy, C sharp said 4.44.</p>
<p>But Python says 4.43999 bla bla bla bla, well, I'm just going to give it to straight floating point values is something made by the devil, it's important to remember that floating points are the values in between integers.</p>
<p>And that space in between any two integers is infinite, and anything dealing with infinity.</p>
<p>But long story short, if you're just starting out, you don't have to concern yourself with things like this at the moment, at some point in time, perhaps he might dig into some project that requires like really precise floating point precision.</p>
<p>And at that point, you can pull your hair out.</p>
<p>But for now, just know the reason why you're seeing this is because in C sharp floats around to nearest digit, there are more accurate data types.</p>
<p>But that's beyond the scope for this, this course.</p>
<p>And for almost all your applications, two to three point floating precision is oftentimes good enough, you don't need to worry yourself with this kind of accuracy.</p>
<p>It's part of the reason why we have calculated about I think the quadrillion digit of pi, but we often just round it off to 3.14.</p>
<p>Because oftentimes, that's a good enough precision estimate.</p>
<p>Moving on, the final way that we can subtract is of course, by using a modified assignment.</p>
<p>And to do a modified assignment for subtracting all we do is get rid of this and we do a equals itself minus 3.33 F.</p>
<p>And just to prove to you that works, just as I say it does, I'm hit the play button, bring it over, and you can see that we have 4.44.</p>
<p>And over in Python, the syntax is no different than C sharp, we can do a equals itself minus 3.33.</p>
<p>I'm gonna save hit the play button, and you can see that we got 4.43999.</p>
<p>Next up the multiplication operator, whenever you want to do multiplication to your floats, you simply just have to use the multiplication operator.</p>
<p>And the syntax for that goes like this A times equals two, for example, and when you run this, it's simply just going to take your float a and times it by two and prove that to you.</p>
<p>I'm at the start button and bring the window over you can see that 7.77 times two equals 15 point 54 and of course what you times your float by doesn't have to be an integer, it can be a floating point.</p>
<p>But of course it just has to be some numeric value.</p>
<p>And over in Python, the syntax is the same exact as it is in C sharp A times equals to prove that to you hit the play button, and you see that we have 15 point 54.</p>
<p>And of course, another way we can do multiplication is if we do a modified assignment and the syntax for that, of course, you already know it is a equals a times to prove that to you, I hit the start button and bring the wind over.</p>
<p>And again, we have 15 point 54.</p>
<p>And in Python, the syntax is no different.</p>
<p>We can do a equals a times two, and then press play and show it to you that again, we have 15 point 54.</p>
<p>Now one thing that you didn't see me do is like something like a times times, and the reason for that is unlike subtraction or addition, there is no sort of incrementing multiplication.</p>
<p>What does that even mean, really.</p>
<p>And so moving on, the final operator is the division operator, which the syntax for that goes as follows a divided by equals to Alice make an interesting, let's say, 2.15.</p>
<p>And of course, what this is going to do is going to take our a float, and it's going to divide it by 2.15.</p>
<p>and prove that to you, I'm gonna hit the start button and bring the window over a, we see that we have 3.613953, that's gonna be fun to say over and over.</p>
<p>And over in Python, the division operator is the same exact syntax.</p>
<p>So we can do a divided by equals 2.15.</p>
<p>And to prove that to you, I'm gonna hit the play button.</p>
<p>And you can see that Python is a lot worse, we have 3.613953.</p>
<p>And it goes on and on.</p>
<p>I know that I'm kind of demonizing the long decimal points with Python, but it's actually a good thing that they give you this precision right out the box.</p>
<p>And the final way we can divide is by using a modified assignment, which the syntax for that looks like this, I'm just gonna start over to make it a bit less confusing.</p>
<p>A equals A divided by 2.15, F.</p>
<p>And just to prove that to you, I'm at the start button and bring the window over, you can see again, we have 3.613953.</p>
<p>And yeah, there you have it.</p>
<p>floats are pretty useful in the world of programming.</p>
<p>They're used for a lot of different applications.</p>
<p>And don't let me scare you with the whole floating point precision talk.</p>
<p>It's very, very rare that you'll have to be in this world floating points.</p>
<p>Usually, you won't go no further than like two or three point precision, which at that precision, everything's really simple to understand.</p>
<p>But that's pretty much everything you need to know to get started with programming in regards to floats.</p>
<p>It's time to talk about arrays.</p>
<p>Now, arrays are most often used with loops, but they can use in almost any context.</p>
<p>So what is an array? Well, you can think of an array as essentially a container that holds a fixed number of variables that all have the same data type.</p>
<p>So the fact that they're just containers that hold variables, you can use these variables independently.</p>
<p>in any context.</p>
<p>Say you want to update an array full of names with a couple of lines of code, or maybe easily save an array of 100 emails to a file without having to copy and paste and change the variable here and there.</p>
<p>Well, arrays make doing things like this really easy to do.</p>
<p>But instead of going on and on with examples about how arrays are the coolest thing since sliced bread, let's just jump right into looking at a few examples and use cases to learn how do we go about using arrays with code.</p>
<p>And we're going to do this using two different languages because I think it can be really helpful for you to see how they compare and contrast.</p>
<p>And plus, you'll pretty much learn two languages at once.</p>
<p>So on the left is language C sharp using the it Visual Studio, which should interest you if you want to into Windows development, or make games using a popular game engine called unity.</p>
<p>And on the right is the language Python three using the it Visual Studio code, which should interest you you're going into more general programming or data science.</p>
<p>Alright, so here I have two brand new console projects.</p>
<p>And if you don't how to make a new console project, neither C sharp or Python or both, be sure to check out the video in the description.</p>
<p>It's called How to install an ID.</p>
<p>And at the end of that video, I'll show you how to do that.</p>
<p>Alright, so let's get a bit into arrays.</p>
<p>So arrays are simply just a data structure, meaning it's a certain way in which you can structure your different data types.</p>
<p>So I won't get into too much in how to use arrays.</p>
<p>Otherwise, this video returns just like a long list of examples.</p>
<p>But let's jump into this.</p>
<p>So the first thing I want to touch on is the different syntax for arrays in both C sharp and Python.</p>
<p>But before we do that, I want you to imagine that you're making some sort of four player game, let's say and every single player starts with the same amount of HP.</p>
<p>So let's create those variables first over here in the lesson C sharp and get rid of these two lines.</p>
<p>Because I don't need them to come standard with every console project, and I'm going to initialize an integer, I'm gonna call it HP one, I'm assign that to be 100.</p>
<p>And then I'm gonna do it again, assign another, HP to equals 100.</p>
<p>And then int, HP three equals 100.</p>
<p>And then finally, ant HP four equals 100.</p>
<p>Great.</p>
<p>So we have four different integers for four different players.</p>
<p>But with the raise, there's no need for four different variables, we can simply come up here and initialize a new integer array.</p>
<p>And the syntax for that goes as follows.</p>
<p>First, we want to type out the data type that we want to put into an array, which of course, in our case, is an integer.</p>
<p>And if you want to denote that this is an array, you simply just add a start bracket.</p>
<p>And in bracket, this right here is how you denote an integer array data structure.</p>
<p>And so after that, we just type out our variable name, which I'm going to call it hp.</p>
<p>And then we have to assign to it a new integer array.</p>
<p>And then within the brackets here, you have to specifies the size of your array, which we have four players, so the size is four at a semi-colon, and you're done.</p>
<p>So now that we have our integer array with the size of four, we can now assign values to what's called the elements of that array.</p>
<p>And to do that, I'm just going to come down here, and I'm going to say HP, and then at the bring back the starting bracket and then typing the element number.</p>
<p>Again, it's the size of four.</p>
<p>So we're going to start with zero.</p>
<p>All right, so you probably just got a little confused on why I started on zero instead of one.</p>
<p>Well, in most programming languages, arrays always start on zero.</p>
<p>Why you ask? Well, zero is a number two and in computing, zero is actually the first number, not the biggest deal.</p>
<p>But a really simple fact that it's important to remember because if you start on one, you might get a lot of errors and might want to pull your hair out.</p>
<p>So just remember with arrays, zeros always first Anywho, we have the HP integer array at element zero.</p>
<p>And what we want to do is assign 100 to it.</p>
<p>And now we just want to do this for all four elements, I'm going to do HP of element one, assign another 100 to it, the HP of element two if I can type, and then assign 100 to it.</p>
<p>And then finally HP element three and assign 100.</p>
<p>to it.</p>
<p>Again, quick note, you can see that we ended on the element three, although we initialized an integer array with the size of four.</p>
<p>But if you were to count them, you can see that we have four elements here, 012, and three.</p>
<p>And of course, the reason for this offset is because in computing, we always start on zero, it can trip you up a lot at the beginning, but it's something that you'll get used to eventually.</p>
<p>Now I know if this is your first time learning about arrays, it can be quite difficult to get a conceptual grasp on what's going on here.</p>
<p>And so I'm going to walk you through a quick visual.</p>
<p>So what we have here is an array with the length of 901234567 and eight, this bottom row right here is the index or the element.</p>
<p>They're both interchangeable.</p>
<p>But for this course, I'm going to be calling it the element and this top row is the value at that element.</p>
<p>And so if this were our HP integer array, it would end right here, right at the third element.</p>
<p>And after we initialize the integer array, it was filled with all zeros in the value spots.</p>
<p>And so what we did in the code is we simply went through and assigned 100 to every single element in that array.</p>
<p>And that conceptually is what's going on with the race.</p>
<p>And that's not just for integers, it's for every single type of array, if you have a string array, a float array, a character array, what have you.</p>
<p>Now with that out the way we no longer need these variables, we can delete those.</p>
<p>And then to prove to you that these work, as I say they do, I'm going to write a console dot write line.</p>
<p>So that we can print this to the console and I'll do HP zero, and then semi colon, I'm just going to hit Ctrl C Ctrl V copy paste a few times and simply just change elements zero to one, two, and three, we're also going to need a console dot read key.</p>
<p>This is so that the terminal doesn't close when we run it.</p>
<p>And now I'm just going to come up here to the start, hit the start button, and then bring the console window over to show you that we have four players with 100 Hp initialized.</p>
<p>Now last thing I want to mention on this is that if you try to assign a value to an element that is outside of the range for that array, then you will get an error and to demonstrate that if I come here and do HP of element four and assign 100 to it, hit the Save button then play and you can see that it gives us an exception Saying pretty much that we don't have an array of this size, therefore you can't assign to the fourth element.</p>
<p>So just be mindful of the size of your race.</p>
<p>Now over in Python, the syntax for arrays are a bit different.</p>
<p>And Python actually doesn't even use arrays, they actually use a type of data structure called a list.</p>
<p>And you can initialize a list in Python in two different ways.</p>
<p>But the syntax for the first one goes as follows.</p>
<p>First, we're going to write out the name of our variable, which of course is HP, and then we're going to do equal and then start bracket.</p>
<p>And then you just type out whatever values you want in here.</p>
<p>So again, we have a four player game with four different players with 100 hp each.</p>
<p>So I'm simply just going to write 104 times with a comma separating each of them.</p>
<p>And there you have it, that's done.</p>
<p>And then to prove it to you, I'm just going to write print and then pass in the whole array, HP, hit the play button, and you can see that it prints out an array with four elements.</p>
<p>As you can already see, Python has a huge leg up when it comes to doing this type of stuff.</p>
<p>In Python, we really wanted to do two lines of code in C sharp, we had to do what eight 910, about nine different lines of code.</p>
<p>Big difference.</p>
<p>And the reason for this you might ask is just the design philosophies with the languages.</p>
<p>Python is more designed to be really easy to use and do a lot of data stuff.</p>
<p>And C sharp was kind of piggybacked off of the C language.</p>
<p>So that did carry over a lot of stuff the C was already doing.</p>
<p>But yeah, you get to pick and choose, there are pros and cons with both of them.</p>
<p>So that was the first way that you can initialize a list in Python.</p>
<p>And here's the second way, I'm going to come down here and do HP equals empty array.</p>
<p>And then it's as easy as HP dot append, and then your new parentheses because it's a function.</p>
<p>And then you want to append whatever you want.</p>
<p>So I'll pin 200 for the first player, and then I'll append again, another 100 for the second player, HP dot a pin, the third player and at last HP dot append for the last player.</p>
<p>And just to prove to you that does exactly what I say it does, I'm going to do print, again, HP, come up here to the topic, the play button, and you can see that we print out 100 100 100 102 times now this function is one of the benefits to using lists over array is that you can initialize the empty list and just add to that list.</p>
<p>And C sharp has one too, but it's a bit beyond the scope for this video.</p>
<p>Okay, so let's now talk about the real thing that makes a race so powerful.</p>
<p>And that's array iteration.</p>
<p>Alright, so this is cool.</p>
<p>Now we have all of our player HP in one variable.</p>
<p>But what if instead of four players with hp, you had 100 players with hp, this would get old quick haven't read this out 100 times.</p>
<p>Well, that is where four loops come into play.</p>
<p>Now, arrays and for loops are like burgers and fries, they're just a perfect combo.</p>
<p>So now let's bring in a for loop so that we can easily assign a value to the elements in our array.</p>
<p>So I'm just going to come up here above our variables here.</p>
<p>And I'm just going to write out the for loop syntax.</p>
<p>So for and then int i equals zero, and then semi colon, and then if i is less than we have four elements, so four, and then we're going to do i plus plus if that is true, and then we need to add our code block here.</p>
<p>And then we simply just need to write our variable.</p>
<p>And two here, so I'm not going to go too much into the for loop on how it works, because I have a full episode about that.</p>
<p>So check that out if you're confused, but essentially, on a very layman's level, the for loop, it's simply just assigns zero to our integer here, and then if it's less than four, then we're just going to add to it every single update.</p>
<p>And we can then use the eye as a location within the for loop.</p>
<p>And so with that, if this four loop is less than four, then they will increment meaning it's going to stop at three, which is exactly what we need, because our element also stops at three.</p>
<p>And so what that means is that now we can change this zero element two I element, and we no longer need these because they will be set with the for loop.</p>
<p>In addition to that, because we're also using the array element for printing.</p>
<p>We could even come down here and do console dot write line, and then HP of I elements, meaning we no longer need these lines either.</p>
<p>And so now just the proof to this works.</p>
<p>I'm hit the start button, and then I'm going to bring the window over you can see that we have four For 100.</p>
<p>So now back to the scenario I set up, say instead of four players you wanted 100, well, we simply will come to our array size here.</p>
<p>And we'll change the array size to 100.</p>
<p>And we also need to change the iteration for our for loop, one to stop at 100.</p>
<p>And to prove that to you, I can just hit the play button, and then bring the wind over here and there is 100 100.</p>
<p>It's a bit hard to tell.</p>
<p>But there's, there's 100, hundreds here and over in Python.</p>
<p>Again, the syntax for this is a bit different.</p>
<p>So I'm just going to get rid of these lines, because let's just start over.</p>
<p>But again, we do have two ways we can go about doing this.</p>
<p>And the first way is really, really simple.</p>
<p>All you got to do is do HP and then assign a an array of 100, but times that by 100.</p>
<p>and prove that to you, I'm gonna do print HP, and then hit the play button.</p>
<p>And you can see that we have 100 A hundreds in an array.</p>
<p>Simple, easy into the point God love Python.</p>
<p>And for the second way, it's a bit more involved, um, come down here and initialize an empty array.</p>
<p>And then we're gonna do a for loop.</p>
<p>The syntax is a bit different in Python, for i in range of 100, and then oops, and then I'm going to come down here.</p>
<p>And because it's an empty, I said empty array, but it's actually empty list, we're not going to get like the element of anything, we're simply just going to do HP dot append, and 100.</p>
<p>So then down here, all you got to do is print hp.</p>
<p>And we should get two arrays of 100.</p>
<p>Hundreds, which probably is going to be a bit confusing, but let's do it anyway, hit play.</p>
<p>And yeah, there is the second one.</p>
<p>And there's the first one completely identical.</p>
<p>Two ways to go about doing it, you as developer, you have the choice on which one you want to use.</p>
<p>And so yeah, that's pretty much the basics, all you need to know to go about using this data structure.</p>
<p>Anything from this point on would just be me listening out a million different examples on, you know, different use cases.</p>
<p>But if pretty much from this point on, it's up to you, as a developer to get creative and apply this data structure in different ways.</p>
<p>And hopefully, you are starting to think of some different creative ways on how you might be able to use arrays or arrays and for loops together.</p>
<p>But that is everything that you need to know to get started with programming in regards to a race.</p>
<p>Okay, let's talk about the big bad variables without even talking about programming.</p>
<p>What does variable mean variable defined by dictionary calm is something that has the ability to vary or change him believe it or not, it means the same exact thing in programming as well.</p>
<p>A variable is something used to store data, you can think of it as a container, but what you put in this container can be changed and updated, giving it the name variable.</p>
<p>Now there is one very important thing that requires understanding when talking about variables.</p>
<p>And that is data types.</p>
<p>If you can grasp this thing about variables, I think you'll save yourself a log of annoying errors, especially in the beginning, when you create a variable.</p>
<p>all languages need to know the data type of your variable and to again, thinking about a variable as a container.</p>
<p>Imagine that we have two data types that we want to store into a container.</p>
<p>Let's just say one data type is reptiles and the others fish, well, you can't store these two data types in the same container fish need to be surrounded by water in order to breathe.</p>
<p>And reptiles need land in often hot, dry climate in order to stay comfortable and alive.</p>
<p>So what happens if you drop a reptile into a containment for fish? That's right, you'll get a type error, just as if you create a variable meant for billions and try and assign a string to it.</p>
<p>So how do we actually go about using variables with the different data types and etc? Well, it's quite simple actually, let's take a look at some examples using two different languages because I think it can be really helpful for you to see how they compare and contrast.</p>
<p>And plus, you'll pretty much learn two languages at once.</p>
<p>So on the left is language C sharp using it Visual Studio, which should interest you if you want to do windows development or want to make games using a popular game engine called unity.</p>
<p>And on the right is language Python three using the Add Visual Studio code which interests you if you want to get into more general programming or data science.</p>
<p>Alright, so here I have two brand new console projects.</p>
<p>And if you don't how to make a new console project and either C sharp or Python or both.</p>
<p>Be sure to check out the video in the description.</p>
<p>It's called How to install an ID.</p>
<p>And at the end of that video, I'll show you how to do that.</p>
<p>Alright, let's start off by looking at initializing some variables and the syntax of that between C sharp and Python.</p>
<p>So over here on the left and C sharp I'm going to start by getting rid of these two lines because I don't need them.</p>
<p>They come standard with it.</p>
<p>The new console project.</p>
<p>And now let's take a look at the five main data types.</p>
<p>First, we have bullions.</p>
<p>And you can initialize a Boolean, like so, just type out the word bool.</p>
<p>And then whatever name for your variable.</p>
<p>In this case, we'll just do a.</p>
<p>And now let's initialize our next data type, which is a char.</p>
<p>So you do that by typing out the type of data, which again, is char, and the name your variable.</p>
<p>Let's just keep in alphabetical order going here, and I'll just name it B.</p>
<p>And now the char has been initialized, let's initialize our next data type, which is a string.</p>
<p>And we do that by typing out the type of data which is a string, and then keeping the alphabetical order, we'll just name it a C, I think you can get the pattern at this point, we're gonna initialize the next data type, which is an int, just type of the type of data and then name, the variable, we'll keep, we'll call it a D keep the order convention going.</p>
<p>Now, the last data type is a float, which we'll call an E.</p>
<p>And there you have it, initializing your variables in C sharp is pretty straightforward.</p>
<p>You just type out whatever type of data you want to initialize, and then name that variable.</p>
<p>And that's for all data types.</p>
<p>However, this isn't the only way that you can initialize variables, you can also assign something to those variables when you initialize them.</p>
<p>And to assign something to variables, you have to use what's called the assignment operator, which don't let that scare you, because it's as simply as just typing equals, equals here, this sign is what's called the assignment operator, it allows you to assign something to a variable.</p>
<p>And for this Boolean, let's just assign it to be true.</p>
<p>So let's go through and assign something to all of our variables.</p>
<p>So for our char variable, let's assign the letter J to it.</p>
<p>And then for our string, let's assign the string candy to it our integer, let's assign the number 13.</p>
<p>And then for our flow, let's assign a 7.77.</p>
<p>f, that's, that's a good number.</p>
<p>And there you have it, that is a another way that you can initialize a variable.</p>
<p>But heads up, it's always best practice to initialize your variables with an assignment like true j, for example, these are assignments.</p>
<p>And the reason for that is because like the previous example, if you initialize them without any assignments, sometimes they can return No.</p>
<p>And if you're using that variable, you might come up with some weird edge cases, and you'll get errors.</p>
<p>So it's always best practice to just assign a value to your variables whenever you initialize them.</p>
<p>Now to initialize variables in Python, it's a lot simpler with a slight caveat.</p>
<p>So Python does away with the idea of having to cast your variables.</p>
<p>So like over here, in C sharp, we have to cast that our a variable is a bool datatype cast that our B variables a char data type, typing the type of data next to it is what's called Data casting.</p>
<p>And then Python, you don't have to do that, all we have to do instead is simply type out the name of our variable and assign something to it.</p>
<p>So if we want to make a Boolean, we just assign a true value to it.</p>
<p>The Python language is a type of language classified as an interpreted language.</p>
<p>And what that means is Python interprets the data type of your variables depending on what you assigned to it.</p>
<p>So at the fact that we assigned a true value to the a variable, when you go to run your Python script, Python will know that the a variable has a boolean data type, because we assign a boolean value to it.</p>
<p>And this goes for all variables.</p>
<p>For example, if we just copy what we did in C sharp, b equals j, and C equals candy, and then d equals 13, and then equals 7.77, Python will interpret all of these variables into their appropriate data type.</p>
<p>And there are benefits to this.</p>
<p>And to examine that, let's go back to C sharp for a second.</p>
<p>Now at the fact that you have to explicitly cast your data type in C sharp, the moment that you initialize that variable, it is stuck with that data type.</p>
<p>For example, if I wanted to come down here, and let's say, I don't want a to be a char actually wants to be a bull.</p>
<p>Well, I couldn't do bool b equals true.</p>
<p>For example, it will tell us that this variable has already been defined.</p>
<p>So we can't recast data types of variables.</p>
<p>Well, can we just reassign the tab a different type of data? And the answer is no, it will tell you that you cannot convert it from its original data type to new data type is pretty much saying this variable already has a data type.</p>
<p>However, in Python, because it's an interpreted language, we can do whatever we want with our variables.</p>
<p>So for example, we can come down here and say like, I want B to equal true and it'll give you no error.</p>
<p>whatsoever.</p>
<p>And to prove this, I'm just going to write out a print function here, print a, whoops, A, B, C, D, E, and you will see that we will get two trues for a and b.</p>
<p>Let's save and hit the play button.</p>
<p>And Wallah.</p>
<p>Now, although this data type free syntax seems pretty cool and whatnot, and don't get me wrong, it is really cool.</p>
<p>It is a lot of flexibility, especially if you know how to use it, right.</p>
<p>But it can also cause some problems if you're not careful.</p>
<p>A lot of the common issues that I was finding myself in in the early days of learning Python with this data type free syntax was that I was never really sure what data type some variables were.</p>
<p>And I was trying to use them in certain contexts, and it was just really messing me up.</p>
<p>Another issue is that there's nothing preventing you from easily reassigning a variable, when you didn't mean to end C sharp, for example, they'll tell you if you already have a variable with that name in your script.</p>
<p>And it will also tell you for trying to change the data type for that variable, which both kind of act as a sort of security, if you will, but either way both have their own pros and cons, it's up to you decide which one is best for you moving along, one thing that I think is really important to touch on is assigning your variables after initialization.</p>
<p>So in C sharp, you only have to cast the data type of your variable one time.</p>
<p>In fact, you can only cast the data type of your variable one time to demonstrate this, I'm just going to get rid of this line because I don't need it.</p>
<p>And let's try and reinitialize our a variable as a bowl with a false value.</p>
<p>So I'm going to cast our data type, I'm gonna do bool, and then a equals false.</p>
<p>And you can see here that it tells us that this variable has already been initialized.</p>
<p>Essentially, that's what it's saying.</p>
<p>And of course, what you're assigning to that variable has to be a value that is accepted by that data type.</p>
<p>For example, Boolean only except true or false, for example, and of course, in Python, because it's an interpreted language, this is no problem, we can simply just do a equals false.</p>
<p>And we could also do b equals false if we wanted to C equals false.</p>
<p>And why stop there, we can do d equals false as well.</p>
<p>And we can even do c equals false.</p>
<p>Because this will all be interpreted when we run our script, which is now I made the play button up at the top and you'll see we get all false and a 777.</p>
<p>Because I didn't do II here sorry, equals false save, hit the play button.</p>
<p>And there you go all falses it was interpreted as soon as you run the script.</p>
<p>And so that is the gist of variables, they're really easy to get your mind around, it's just you have to remember that these are pretty much containers that have some sort of data in them with a specific data type.</p>
<p>So lastly, I'm just going to leave you with a simple example.</p>
<p>So that you can kind of get a better idea on how variables are applied and how they're useful.</p>
<p>So imagine you're making some sort of game with the boss battle.</p>
<p>And this boss can only take damage, when it's either hurt, flashing or dizzy.</p>
<p>It has to be in some sort of state.</p>
<p>So I'm just gonna create the scenario.</p>
<p>Remove all these lines, don't need them start over.</p>
<p>First initialize an int, I'm gonna call it enemy hp.</p>
<p>For example, that equals 50.</p>
<p>And then get a Boolean there recall this hurt.</p>
<p>And let's just say that it's already hurt.</p>
<p>So hurt equals true.</p>
<p>Get another Boolean, we'll call it a flashing, flashing equals true.</p>
<p>And then let's do ball.</p>
<p>dizzy, let's say dizzy.</p>
<p>And let's just say that it's not dizzy.</p>
<p>It's not really important.</p>
<p>I'm just gonna use if statements to create those states.</p>
<p>If hurt, then we're going to do enemy HP minus equals four, for example.</p>
<p>And then if I'm going off screen here, if I'm what else is there, flashing? Oops.</p>
<p>If it's flashing, then enemy HP minus equals four.</p>
<p>And lastly, sorry, see if what dizzy.</p>
<p>Then also enemy HP minus equals four.</p>
<p>Alright, so just to explain what's going on here.</p>
<p>It's just as I said, we have, let's say you're making some game with the boss battle.</p>
<p>And the only way that the boss can take damage as if it's either hurt, flashing, or dizzy.</p>
<p>Now, none of this is really important to the example that I wanted to create.</p>
<p>But it at least gives you an idea of a scenario.</p>
<p>So now imagine that you did some testing on your game and you figured out that for is not enough damage to make the game fun.</p>
<p>You need that damage to be higher.</p>
<p>Well, you would have to go back into your script and change enemy HP minus equals you know, let's just say seven enemy HP minus equals seven again In any HP minus equals seven.</p>
<p>And let's say that you had this reference to damage like all over your scripts, you have to do this as many times as you as you have that reference.</p>
<p>And this is a use case where variables are very useful.</p>
<p>So instead of having to do this, as many times as you make the reference in your script, you could simply just come up to your variables up here and just initialize let's say, a new integer, call it damage and set it to seven.</p>
<p>And then all you have to do is go throughout your script, and just add a reference to that the integer you just initialized.</p>
<p>So my sequel stat, whoops, damage, damage and damage.</p>
<p>So now let's say that you retested your game again, and you're like, Oh, wait, On second thought, seven is a bit too high, I need to bring it down a bit.</p>
<p>Well, instead of having to go again, through all of your scripts, and changing wherever you make a reference to HP minus damage, all you have to do is now change one variable to you know, a lower number, let's say six.</p>
<p>And now all of these references are updated.</p>
<p>And so now that your damage value is a variable, you now have a lot more power with it, you can come down, for example, so your dizzy state and say like, just for example, if he's dizzy, then what I want to do is damage equals three, for example, I want to make it a lot weaker if it's dizzy, and this will be updated whenever it's flashing, and you do this line, or you do this line.</p>
<p>And of course, I'll just quickly do this example in Python, it's going to get rid of everything, I don't need it.</p>
<p>I'm going to do enemy, HP enemy HP equals 50.</p>
<p>And then hertz equals true and flashing equals false and then dizzy.</p>
<p>equals false.</p>
<p>I got that backwards, this is actually true.</p>
<p>And then we have to do if hertz, then enemy, HP minus equals damage, I guess we need to damage them just go straight for the actual example minus equals six.</p>
<p>And then if, if what is it flashing, then enemy HP minus equals damage.</p>
<p>And if dizzy, whoops, dizzy, then damage equals three.</p>
<p>And why not just for fun, we can run this I'll do at the end of it all print and PHP, just see what we get.</p>
<p>I did not pre calculate this, we get 38.</p>
<p>Very nice.</p>
<p>And then if we print this in C sharp, we should get the same result.</p>
<p>I'm going to console dot write line.</p>
<p>And then what is this enemy hp.</p>
<p>And then oops, similar icon then we also need a console dot read line.</p>
<p>So the console doesn't close on us when we run it.</p>
<p>I'm at the start button up here and then bring the console over and you see that again, we have 38 Very nice.</p>
<p>And there you have it.</p>
<p>Again, variables are pretty easy to conceptually understand, but they get a lot more powerful and a bit more complex when you start using different data structures like arrays and whatnot.</p>
<p>But that's pretty much everything that you need to know to get started with programming and regards to variables.</p>
<p>Alright, so in if statement is a type of conditional statement in programming, meaning it checks if a certain condition is met an if statement in the most simplest terms is if this than that, in fact, if statements in programming are actually shorthand for If This Then That statements, one of the greatest lessons on fact that most people don't even realize with if statements is that if statements are essentially just bullions they activate if something is true, and don't if something is false.</p>
<p>Now remember that because understanding that fact can save you a lot of headache when trying to debug your if statements, you simply just have to look at your if statement and ask is this returning a true or false value? And honestly, it doesn't get any more complex than that.</p>
<p>If you've ever asked when an IF question, you understand if statements Now let's look at how to write an if statement with code.</p>
<p>And we're going to do this by using two different languages because I think it can be really helpful for you to see how they compare and contrast.</p>
<p>And plus, you'll pretty much learn two languages at once.</p>
<p>So on the left is the language C sharp using the it Visual Studio, which should interest you if you want to do windows development or want to make games using a popular game engine called unity.</p>
<p>And on the right is the language Python three using the IDA Visual Studio code which should interest you if you want to get more into general programming or data science.</p>
<p>Alright, so here I have two brand new console projects and if you don't have To make a new console project, neither C sharp or Python or both, be sure to check out the video in the description.</p>
<p>It's called How to install an ID.</p>
<p>And at the end of that video, I'll show you how to do that.</p>
<p>Alright, so today's lab is going to be really simple and really easy, because once I show you the Boolean secret with if statements, you're going to get it right away, and you're not gonna have any problems with if statements moving forward.</p>
<p>So just as I mentioned, the secret that most people don't even realize with if statements is that they're really just bullying that will run some code block if their value is true.</p>
<p>But before we dig into that, let's first look at some of the syntax differences between C sharp and Python.</p>
<p>Alright, so starting with C sharp over here on the left, I'm just gonna get rid of these two lines, because I do not need them, they come standard with any new console project.</p>
<p>And I'm going to write out an if statement.</p>
<p>And to do that in C sharp, first thing you need to do is just write out the word if, and then you want to add parentheses, and then inside these parentheses are where you want to put your Boolean, so I'm going to put true in C sharp, the true value is lowercase.</p>
<p>And then under it, I'm just going to write out a start brace.</p>
<p>And then in brace, this is the code block that will run if our if statement is true.</p>
<p>And there you have it.</p>
<p>This is how you write an if statement in C sharp From here, you can write any commands that you want in here.</p>
<p>So you can do like, I don't know console dot write line if you want to.</p>
<p>And then we can put Hi, for example, you can put whatever you want.</p>
<p>And so long as this returns true, this Boolean within the if statement in parentheses is true, then this block of code will be ran.</p>
<p>Now, before we move on to Python, I just want to mention one really important thing.</p>
<p>If statements in C sharp, they have to have the parentheses, and the Boolean has to go inside of the parentheses.</p>
<p>If you were to remove this, you can see that we will get a syntax error because if statements in C sharp again have to encompass the boolean value in parentheses.</p>
<p>Now over in Python, the way that the if statement works is the exact same however, the syntax is a bit different.</p>
<p>To write an if statement in Python, we want to first write out the word if, and then simply just put true.</p>
<p>And the true value in Python is capitalized.</p>
<p>So don't forget that.</p>
<p>And then at the end, we have to end it with the semi colon, I just want to pause here and make this distinction.</p>
<p>While Yes, Python doesn't use parentheses, it uses instead a colon.</p>
<p>And this colon is what tells Python that the Boolean for your if statement, it has been completed.</p>
<p>And so moving along to do the code block for your if statement in Python, it's a bit different than how C sharp does it again, the way that we indicate a code block in C sharp is we use the two braces starting in and we put all of our commands in the middle of those two braces, all which are under the if statement.</p>
<p>But in Python, instead, we have to go to the new line.</p>
<p>And we use indentations instead of braces.</p>
<p>So let's give an example.</p>
<p>and here we can just do like print.</p>
<p>And then Hi.</p>
<p>And there you have it.</p>
<p>And so the next natural question to ask is, well, how do I add more commands to my if statement? Well, the answer is pretty easy.</p>
<p>Actually, anything that is under the if statement and is indented in will count within that if statements code block.</p>
<p>So for example, I'm just going to hit Ctrl C Ctrl V, just to give you an example.</p>
<p>So here are four different print functions that are all within this if statements code block, because they all are indented in and they're all under this if statement.</p>
<p>And so the next natural question to ask is probably something like, Well, how do I exit this code block? I mean, I don't want my whole entire program to be dependent on this if statement.</p>
<p>And the answer is in Python, indentation rules over everything.</p>
<p>So for example, if you want to exit out of this code block, all you would have to do is just come down and then return back to the regular regular indentation, and just do print them out.</p>
<p>For example.</p>
<p>And just to prove to you that this works, as I say it does, I'm gonna hit the play button right here.</p>
<p>And you'll see that we get high high high amount.</p>
<p>And then I'm just going to set this to false to let you to let you see that we set this to false, this code block will not run, you weren't going to get printed, I'm out hit the play button.</p>
<p>And right there all we have is I'm out.</p>
<p>And another question you might have is well what about if statements within if statements like nesting if statements, I think in C sharp, it's pretty obvious how you do that you would just write in if another f within an F and do another code block and you can do another if you want to.</p>
<p>And this can go on forever and ever until you get tired.</p>
<p>But in Python, it's probably not as obvious for so I'll show you so you just right within That code block which again, is indented one indentation out, you just do another if statement.</p>
<p>True, for example, colon, and then just another indentation.</p>
<p>And you just keep this format going, as long as you need to.</p>
<p>And here we'll do another if statement.</p>
<p>Hmm.</p>
<p>Print another high.</p>
<p>And that's all there is to it.</p>
<p>And here's the very last thing that I'm going to leave you with.</p>
<p>So in C sharp, I'm just going to get rid of all this just so it's a lot less confusing.</p>
<p>In C sharp, when you have a code block, you can leave that code block empty, if you want, you have no errors, no problems.</p>
<p>C sharp won't complain, you'll be fine.</p>
<p>But in Python, you can't do that.</p>
<p>So if I remove all of these lines, and just have our if statement, and then we will return in the notation after the statement.</p>
<p>You can see if we go to our problems here, you see that we get an error for that.</p>
<p>This is not allowed, you have to put at least something in there.</p>
<p>So you know, if you just want to write some if statement, just to fill it out later.</p>
<p>For example, you can just put a if you want to, which does absolutely nothing.</p>
<p>And yeah, there you have it, guys, that's if statements for you.</p>
<p>I just want you to remember our little secret, the condition that if statements checks for they're only a Boolean, and again, the code block will run if the Boolean returns true, and it will not run if the Boolean returns false.</p>
<p>And so with that, you can create some pretty intricate and complex bullions and then just put that Boolean right here in the if condition from the most simplest program to the most complex program.</p>
<p>That is pretty much how every program works under the hood.</p>
<p>If you want to learn how to better use if statements I highly suggest you check out the Boolean lesson that I did in that lesson I go over more detail on how to use bullions in some real world situations and then once you create that Boolean you can just embed it in an if statement like this.</p>
<p>And yeah, that's pretty much everything you need to know to get started programming in regards to if statements.</p>
<p>So at the fact that you're watching a video on elf statements, I'm going to assume that you know what an if statement is, or in other words, If This Then That statement in disguise, but if statements alone are very limited, for example, say you build a robot to get lunch for you, and you tell it if they have spicy jackasses, Delia's Give me one your robot goes to get lunch, they don't have any spicy jack case to deal us.</p>
<p>And so it returns not giving you anything.</p>
<p>Now you can't get mad at your robot because it did exactly what you instructed it to do.</p>
<p>Very literally computers are very literal, but that is where an if statements partner in crime, the L statement comes in.</p>
<p>Let's start with what is an elf statement? Well, in the most layman's definition possible, an L statement is a conditional statement that will run if the initial condition is not met, and they're very important to programming.</p>
<p>Going back to our example, an L statement would be the equivalent to telling your robot if they are spicy jack case, and Delia's barmy one else give me anything, your robot again goes get lunch, they don't have any spicy jack case and dalias that initial condition is not met.</p>
<p>And so it gets you anything.</p>
<p>And honestly, elf statements don't get any more complex than that.</p>
<p>They are pretty simple concepts to get your mind around.</p>
<p>Now let's look at how to use the L statement properly with code.</p>
<p>And we're going to do this by using two different languages because I think it can be really helpful to see how they compare and contrast.</p>
<p>And plus, you'll pretty much learn two languages at once.</p>
<p>So on the left is the language C sharp using the ID Visual Studio, which should interest you if you want to do windows development or want to make games using a popular game engine called unity.</p>
<p>And on the right is the language Python three using the ID Visual Studio code which should interest you if you want to get into more general programming or data science.</p>
<p>Alright, so here I have two brand new console projects.</p>
<p>And if you don't how to make a new console project neither C sharp or Python or both.</p>
<p>Be sure to check out the video in the description.</p>
<p>It's called How to install an ID.</p>
<p>And at the end of that video, I'll show you how to do that.</p>
<p>Alright, so just like the if statement lab, this else lab is gonna be pretty quick and easy because there's not much to it.</p>
<p>So how do we use an L statement? Well, the first thing that's important to know is that l statements are completely useless without an if statement.</p>
<p>They are 100% dependent on an if statement.</p>
<p>To demonstrate this over on the left and C sharp, I'm just going to get rid of these two lines because I don't need them.</p>
<p>They come standard with every new console project.</p>
<p>And then I'm just gonna write out else and then our code blocks.</p>
<p>But you can see that we have an error, but syntactically we did everything right as far as syntax is concerned.</p>
<p>So what do we do wrong? Well, again, l statements by themselves are completely useless.</p>
<p>They need an F statement to depend upon.</p>
<p>So to fix this, I'm just gonna come above the else statement and write if and then let's actually do false and then our code blocks.</p>
<p>And then there you have it fixed.</p>
<p>As you can see, we're getting no errors, we have no issues, everything is fine and dandy.</p>
<p>So let me explain this relationship that we have going on here.</p>
<p>So you have your if statement right here, and this code block is only going to be ran if the Boolean inside the parentheses is true, but at the fact that it's we set it to false, it's going to go down and do this elf statement.</p>
<p>So in other words, if this statement is true, that means whatever is inside this parentheses, if this returns true, then run this block of code, else, run this block of code.</p>
<p>As simple as that.</p>
<p>And to demonstrate this, I'm going to write to the console.</p>
<p>So I want to use console dot write line.</p>
<p>And then here, I'm going to put a plan A, and then I'm going to come down here in the L OS, and then write console dot write line.</p>
<p>And I'm gonna do Plan B.</p>
<p>And then of course, I need to add a console dot read key, just so that the terminal doesn't close on us until we press a key.</p>
<p>Hmm.</p>
<p>And then just for demonstration purposes, I'm going to change this to be a true value, then I hit the start button up here, and bring the window over right here.</p>
<p>And you can see that it prints out a plan A, and again, very intuitive.</p>
<p>The reason is, because we said If true, which if this whatever is inside the parentheses is true, which we said is true, then it's going to print out this, and at the fact that it's true, it ignores everything after that.</p>
<p>Now, let's say that our if statement, Boolean returns a false value instead, well, remember the logic, this is checking if whatever's in this parentheses returns true, then run this code, else.</p>
<p>If it doesn't, then run this code.</p>
<p>And you can see that Visual Studio, the ID is giving us a little heads up that this is not going to be reachable, because it's kind of kind of put the alpha down a bit, it's a bit darker than the rest of the code, which is a nice little heads up from the ID and just demonstrate that this works.</p>
<p>Let me hit the start button and bring the console window over.</p>
<p>And you can see that it prints out plan B, just as we expect.</p>
<p>And now over in Python, the L statement works the exact same however, of course, the syntax is a bit different.</p>
<p>And just like the L statement in C sharp, we can't just write an L statement by itself in Python either.</p>
<p>So just for example, I'm gonna put a zero and then hit the play button.</p>
<p>And you can see that it returns a syntax error.</p>
<p>And again, the reason for this is that l statements need to depend on an if statement.</p>
<p>And so I'm just going to come above the O statement and then write an if statement, I'm going to say if false.</p>
<p>And then I'm going to print out what I'll just do one, yes.</p>
<p>And then you can see that I use the wrong false that is false for C sharps false in Python, and true in Python are both capitalized, trips me up all the time.</p>
<p>But there we fixed our l statement error.</p>
<p>And just to make this look just like the program that we did in C sharp, I'm gonna write Plan A here.</p>
<p>And then I'm gonna write Plan B there.</p>
<p>And again, you can use single or double quotes for Python, and doesn't really matter.</p>
<p>But just make it look cleaner, I'm gonna use double quotes for both.</p>
<p>And of course, if I change this to a true value, then it's going to give us plan A, when I hit play, Oh, I got of course do from print.</p>
<p>Plenty.</p>
<p>My mistake, let me just change this real quick print, Plan A, and then hit play.</p>
<p>And you see that we get Plan A and not Plan B.</p>
<p>And of course, if we change this back to false, and then hit save, and then hit the play button, you'll see that we get Plan B instead.</p>
<p>Because again, it checks if this statement is true.</p>
<p>Do this block of code.</p>
<p>Else do this block of code.</p>
<p>Simple as that.</p>
<p>And the final thing that I want to leave you with is that you can only have one l statement per if statement.</p>
<p>For example, if you come down here in C sharp and do if this statement, run this block of code else from this block of code, and then we chained to another else.</p>
<p>You can see instantly we get a syntax error.</p>
<p>Because even if you think about logic, this makes absolutely no sense.</p>
<p>You're saying if this is true, then run this is true.</p>
<p>Or else just run this and then or else run this that it just logically doesn't even make any sense.</p>
<p>So that's why you can't do it.</p>
<p>And of course in Python, we can't do two l statements back to back either was going to type l 's and then print plan.</p>
<p>gosh dang it, Plan C save hit run See that we get a syntax here because it makes absolutely no sense.</p>
<p>And yeah, there you have it.</p>
<p>l statements are pretty handy when paired with if statements and of course your if statements are just regular if statements in Jag bullions in there and make some really powerful logical operations.</p>
<p>And there is everything that you need to know to start programming in regards to L statements.</p>
<p>Alright, so you have if statements and you have Elif statements, but you also have else if statements.</p>
<p>So starting with the first obvious question, what is an else if statement, so you build a robot to get lunch for you, and you tell it if they have spicy jack case, and dalias Give me one else give me anything, your robot goes to get you lunch, they don't have any spicy jack case, Delia's and sort of returns with getting you a cheeseburger, but you realize that the restaurant doesn't serve french fries and now you wish that you had something different because what's a cheeseburger without fries and soda? Correct something like this.</p>
<p>You can bring in if statements other partner in crime the else if statement.</p>
<p>So how does it work? Going back to our example, using the elsif statement, you can tell your robot if they are spicy jackasses do is give me one else, if they serve french fries, give me a cheeseburger, else give me anything.</p>
<p>And with this program, you can send your robot to any restaurant and be sure it'll get you what you want if the conditions are right, because if statements are pretty much just bullions they're essentially like backup if statements.</p>
<p>And that's pretty much all this to an else if statement.</p>
<p>Now let's look at how to use elsif statements properly with code.</p>
<p>And we're going to do this by using two different languages.</p>
<p>Because I think it can be really helpful for you to see how they compare and contrast.</p>
<p>And plus, you'll pretty much learn two languages at once.</p>
<p>So on the left is language C sharp using it Visual Studio, which should interest you if you're in the windows development or want to make games using a popular game engine called unity.</p>
<p>And on the right is language Python three using the ID Visual Studio code which interests you if you want to get into more general programming or data science.</p>
<p>Alright, so here I have two brand new console projects.</p>
<p>And if you don't how to make a new console project and either C sharp or Python or both, be sure to check out the video in the description.</p>
<p>It's called How to install an ID.</p>
<p>And at the end of that video, I'll show you how to do that.</p>
<p>Alright, so just like the L slab, the elsif Lab is going to be pretty quick and easy.</p>
<p>Because again, there's not really too much to this.</p>
<p>So how do we use an else if statement? Well, just like an L statement, if elsif statement is completely dependent on an if statement without an if statement in elsif statement is just completely useless.</p>
<p>And to demonstrate this over here in the left in C sharp, I'm just going to remove these two lines because I don't need them, they come standard with any new console project.</p>
<p>And I'm just gonna write else.</p>
<p>And then if and then true, and then my code block.</p>
<p>And as you can see, we get an error because this is invalid syntax, again, elsif statements are completely useless without an if statement.</p>
<p>And over in Python, it's the same exact thing, except for the syntax for elsif statements, it's just a little different.</p>
<p>So instead of else if typing that out explicitly, you just type e L, i f, else if it's shorten, and then you can just put true here, and then your colon and then your logic.</p>
<p>But even if I were to put some logic here, let's just say I'm gonna put zero, you can see that we get an error, I'm going to hit play.</p>
<p>And it tells us that this is invalid syntax.</p>
<p>Again, the elsif statement by itself is completely useless.</p>
<p>And so to fix this, I'm just gonna come right above our elsif statement and add an if statement to that.</p>
<p>So if true, then we go on to do console dot write line.</p>
<p>And then we're going to say Plan A, and then I'm going to come down here and do the same console dot write line, and then plan spell Plan B, semi colon, who's going to do the same thing in Python so that they are on the same spot.</p>
<p>Let's see true, then we want to do print planning.</p>
<p>Remember, indentation is really important.</p>
<p>So we're going to come back down here.</p>
<p>And then it also if that's true, they want to print Plan B.</p>
<p>And so what is all this same? Well, this is saying if this statement is true, then run this block of code.</p>
<p>Else.</p>
<p>If this statement is not true, but this statement is true, then run this block of code.</p>
<p>And over in Python, it works the same exact way.</p>
<p>So we have if this statement is true, then run this block of code here.</p>
<p>Else if this statement is not true, but if this statement is true, then run this block of code, one difference on a point output To for the elsif statement, it's a minimal difference.</p>
<p>But Python really prides itself in being like optimized in every way possible.</p>
<p>And that includes like how many characters you have to type for elsif.</p>
<p>This is only four verses over in C sharp, you have to type seven, including the space.</p>
<p>Again, it's minimal, but differences or differences.</p>
<p>Now here is where the real power of elsif statements comes into play.</p>
<p>What makes elsif statement so useful is that you can add as many else if statements as you want, there are no limits.</p>
<p>So if I come over here, and just grab this, and then hit copy, and then paste and then paste, and then paste, you can see that we have no errors, there's no problems, no issues, you can do this as many times as you want.</p>
<p>In Python, there's no difference, you can grab this copy and paste for example.</p>
<p>And oops, and do this as many times as you want.</p>
<p>They'll do be careful with your indentation, make sure that your indentation is always correct.</p>
<p>And so with that, I think it's important to touch on the order of operation and how important that is.</p>
<p>So with any if statement tree, it always will first check the first one, if the first one is not true, then it'll go to the next one.</p>
<p>If the next one's not true, then it will go to the next one, it'll keep on going blonde down the line until it gets one that is true.</p>
<p>So say, for instance, this one is true, then it's going to run this block of code, and it's going to exit out, it's never going to even touch this elsif statement right there.</p>
<p>And I can demonstrate this for you.</p>
<p>I'll just change this to plan C plan changes a plan D changes, plan E.</p>
<p>And let's say that the Boolean check here returns a false.</p>
<p>And then let's say this one also returns a false, and so does this one right here? Well, what we should expect is that it's going to check this one, get a false elsif, check that one get a false L.</p>
<p>So check that one, get a false, Elsa, check this one and get a true, and then we'll run this block of code and should print out plan D.</p>
<p>And just to prove that I'm going to hit the start button.</p>
<p>And then I'm going to bring oops, we forgot to add a console.</p>
<p>Console dot read key so that the terminal doesn't close until we press a button.</p>
<p>And then I'm going to hit the start and then bring crossover and Wallah, we have plan D just as we expected.</p>
<p>Now, of course, this also works in Python, and I can prove that to you just going to change this to see the E did I mess up a B, C, D E is m a one over here, either way, e f, and then we can set this one to false.</p>
<p>And then we can set this to false.</p>
<p>And then we can set this to false.</p>
<p>And we should expect again to get to print out plan D going to hit the play button and we see a plan D.</p>
<p>And the last bit of information I think will be useful for you to know is how to incorporate the actual elf statement.</p>
<p>So let's say that you have some variable, right? You have like a money variable.</p>
<p>And you have this first statements like if I have over, I don't know $1,000, then do this block of code.</p>
<p>Else.</p>
<p>If I have over, let's say $750, then run this block code.</p>
<p>If I have over 500, run this one, if I have over 250 for example, run this one.</p>
<p>If I have over 100 then run this one.</p>
<p>And let's say that you have to print to the console something, right? Well, if you do all these checks, and you have $0 and you'll never print anything, but that's where the else statement comes back into play.</p>
<p>All you have to do at the very end of your if statement tree is just simply add else.</p>
<p>I want to do a console dot write line.</p>
<p>plan what is f Plan F and that is all you got to do.</p>
<p>Now take note your elf statement has to be at the end of your if statement tree.</p>
<p>It can't be anywhere else.</p>
<p>But at the very end.</p>
<p>I mean even if you think about it logically, that's the only thing that makes sense.</p>
<p>And that's pretty much everything else if statements.</p>
<p>The final thing maybe to note is that else if statements are no different than if statements like this, and this are the same exact thing.</p>
<p>The only difference is that an else if statement is dependent on an if statement.</p>
<p>You remember that simple rule and you'll have no trouble using elsif statements and that is everything that you need to get started programming in regards to else if statements.</p>
<p>For loops, it's time to learn all about for loops.</p>
<p>Now, these are a very essential thing for any programmer to know.</p>
<p>So what is a for loop? Well, simply put a for loop is a shortcut to run a block of code a certain number of times.</p>
<p>So say you have four phone numbers, for example, and you want to add an area code to each of them.</p>
<p>Well, instead of hard coding this four times phone number one plus equals area code, phone number two plus equals area code, phone number three plus equals area code, etc, etc, you can just use a for loop and write up the logic one time to get the same job done in less lines of code.</p>
<p>And for loops are very powerful in this regard, because they scale quite well.</p>
<p>So for phone numbers isn't that bad, you can write out phone number 1234 plus equals area code pretty quickly.</p>
<p>But now imagine, instead of four phone numbers shown at area code two, imagine that you had 4000 phone numbers, you can imagine how redundant it would be to have to write out phone number 1234567, all the way to 4000 plus equals area code 4000 times.</p>
<p>So let's take a look at how we can use for loops to do amazing things like this.</p>
<p>And we're going to do so by using two different languages because I think it can be really helpful for you to see how they compare and contrast.</p>
<p>And plus, you'll pretty much learn two languages at once.</p>
<p>So on the left is the language C sharp using the ID Visual Studio, which should interest you if you're interested in doing windows development or want to make games using a popular game engine called unity.</p>
<p>And on the right is the language Python three using the IDE, a Visual Studio code which should interest you if you want to get into more general programming or data science.</p>
<p>Alright, so here I have two brand new console projects.</p>
<p>And if you don't know how to make a new console, project new, the C sharp or Python or both, be sure to check out the video in the description.</p>
<p>It's called How to install an ID.</p>
<p>And at the end of that video, I'll show you how to do that.</p>
<p>Alright, so for loops, for loops are extremely useful tools in programming.</p>
<p>So let's jump into it starting with some syntax.</p>
<p>Now the syntax for for loops in C sharp can be a bit tricky to remember.</p>
<p>But it's not terribly hard, you only have to remember these three things.</p>
<p>But first, I'm going to remove these two lines because I don't need them that come standard with every new console project in C sharp, so we can just get rid of them.</p>
<p>And this is what you have to remember, I'm gonna write this in a comment just so that it's easier to remember.</p>
<p>So a couple forward slashes for that.</p>
<p>And so first you write the word for, and then parentheses.</p>
<p>And now in these parentheses, this for loop happens in three steps.</p>
<p>So let's segment in by adding two semi colons.</p>
<p>And that last, the first thing yet memorize is to initialize your variables variable.</p>
<p>I'll just shorten this to initialize because we were going to quickly run out of room.</p>
<p>And then the second thing you have to remember to do is to set your condition.</p>
<p>And the final thing you have to do is give a command.</p>
<p>So long as you remember, these three things for loops will be really easy for you to remember.</p>
<p>So now let's walk through an example on how to initialize a for loop for real, I'm just going to come down here to the next line, and I'm gonna write out the word for.</p>
<p>And then the first thing I need to do is initialize a variable.</p>
<p>Now, the most common variable that most people initialize at this step is actually an integer variable called I.</p>
<p>And you'll assign usually zero to it.</p>
<p>But you can assign whatever you want to it.</p>
<p>Actually, you can initialize any variable of any data type that you want here, but we'll come back to that in a bit.</p>
<p>And so the next thing we have to add here is the condition, which simply just asks, How long do we want this for loop to run.</p>
<p>And this condition here in this space is actually just expecting a Boolean.</p>
<p>And so let's write a Boolean in here.</p>
<p>Let's say that we want to run so long as is less than 10.</p>
<p>Sounds good enough to us.</p>
<p>And then the final thing we need to add is the command and what the command, we simply just instruct our computer to do something.</p>
<p>So if we initialize an integer named I and assign zero to it, and we're saying that we want this for loop to run so long as is less than 10.</p>
<p>Then here, we can say, We want i for every time the loop finishes to simply just add one, using the increment operator, it just adds one to whatever variable we added the increment operator to.</p>
<p>And then at last, we just come down here and add our code block for the for loop.</p>
<p>And now every single time that this loop goes through, it's going to run everything within the code blocks, which again is every thing that we add within these two braces, and then at the end of it is just going to come back to the top and then when it comes back to the top, it's simply going to check our condition here, it's going to ask is i less than 10? If true, then it's going to exit here.</p>
<p>It's no longer gonna run this this loop anymore and go to whatever line is right after that, but if false Then it's going to do our command here.</p>
<p>And then it's going to again, run this block of code and continue that until when it checks here, and this is false, then again, it's going to exit and run whatever line comes after the for loop.</p>
<p>And so now to do a for loop in Python, it's actually a lot different.</p>
<p>Python doesn't have this syntax where you initialize a variable, and then you set a condition and then you give a command.</p>
<p>It's actually, in fact, probably a lot more simpler.</p>
<p>But the syntax for it goes as follows.</p>
<p>First you want to type out the word for, and then you want to type out I, for i in and then you need to define a range.</p>
<p>And let's just say 10, we're gonna use the same 10.</p>
<p>And then you write your colon here to start your code block.</p>
<p>And then here, you can put whatever commands you want in there.</p>
<p>Now, that's how you initialize a for loop in both C sharp and Python.</p>
<p>However, I want to go back to the C sharp initialization real quick and point out something really interesting.</p>
<p>Now, I think in most cases, for for loops with this syntax, you'll find that most developers will first initialize an int called I, and then assign it to be zero and then do like, if and if i is less than a certain number, then we're just going to use the increment operator on it.</p>
<p>But I want to relinquish your mind early in development, because this right here is the actual rules for a for loop.</p>
<p>But to understand where I'm about to go, I think I need to first show you what's going on with a traditional for loops.</p>
<p>So I'm gonna do console dot write line here.</p>
<p>And I'm just going to print out the value of i.</p>
<p>And then of course, down here, I need to write a console dot read key, so that the terminal doesn't close on us.</p>
<p>As soon as we run it, I was gonna come up here, hit the start button.</p>
<p>And then I'm bringing the console window overseeing see we have going on here.</p>
<p>So as you see, I is initialized and assigned to zero, and then we increment increment all the way until I is no longer less than 10.</p>
<p>And then we exit out the for loop.</p>
<p>Pretty simple.</p>
<p>But again, here it says initialize.</p>
<p>So we can initialize whatever we want.</p>
<p>Actually, this doesn't have to be an end, we can initialize a float if you want to run it again.</p>
<p>And you can see that we have the same exact result.</p>
<p>But why stop there, instead of using the increment operator, we can do plus equals point five, we want to hit the start just to show would that result and you see that we zero then we increment plus five and then another plus five all the way to 9.5.</p>
<p>And of course, that's not all, we can initialize a string if we want to and assign that to equal empty string.</p>
<p>And then here our condition as long as I and then we can grab the length by hitting dot length of the string is less than 10.</p>
<p>Let's just say, then we want to do i plus equals, let's say z, for example.</p>
<p>And then we can run this for loop here.</p>
<p>Start button, bring the window over.</p>
<p>And we can see that it creates this interesting for loop, the sky's the limit, so long as you follow this convention right here.</p>
<p>And because Python doesn't have the syntax, you can still achieve it, but you'd have to achieve it in other creative ways.</p>
<p>Also, I didn't prove it to you that this works in Python.</p>
<p>So I'll do that really fast.</p>
<p>I'm gonna do print, and then I and then I will run this when the play button, you see that it prints out all the digits in the range of 10.</p>
<p>Now that's pretty much how you go about using for loops.</p>
<p>Now as far as how you go about applying for loops, that's your own creative problem solving endeavor that I'll let you figure out on your own.</p>
<p>However, I will leave you with one use case.</p>
<p>So I went ahead and wrote out the program for our scenario, because otherwise, it would have been a long silence watching me type this out.</p>
<p>But I'll walk you through it.</p>
<p>But first, imagine that you've collected 700 files with a bunch of candy data on it.</p>
<p>And now that you have this data, you need to get it all in one place.</p>
<p>Now you could open up one text file and manually add it to the other then open up another text file and manually added and the next and then add in next and add but that's even exhausting for me just saying it verbally, you could instead write a program with a for loop to do this for you.</p>
<p>And so first we initialize a few variables.</p>
<p>First one is a string array with all the file names on it.</p>
<p>And then the next we have the master data string, which we're going to compile all of our data to and over in Python and we do the same exact thing.</p>
<p>We initialize a string array called filename with 700 files that can fit on there, and then our master data string that will compile all of our data onto and then we come down to our for loop in which we initialize an integer named I assigned zero to it.</p>
<p>And then we have a condition here, which pretty much just says so long as I which is location in our for loop, as long as that is less than the amount of files that we have in the file name string array.</p>
<p>Then we want Want to continue looping.</p>
<p>And then of course, our command, we just want to increment the integer I, and then down here in the code block.</p>
<p>All of this is kind of fake, I just made it up for the scenario.</p>
<p>But there's a huge assumption happening here, I'm assuming that you as the data collector, you are really good at naming your data files.</p>
<p>And so every single data file that you have is named candy, space, data space, and then whatever number of data file that is dot txt, very important, because if your data files are named something a bit more chaotic, then we lose the power to use a for loop by and so let's just say that this is you're really good at naming your files like this.</p>
<p>Oh, and just to clarify, this dollar sign means that this string is interpolated.</p>
<p>This is an interpolated string.</p>
<p>If that's confusing, check out my string lesson, I go all in depth into it Anywho, what we're doing here is we are taking the file name array at the element of AI, which is where we're at in the loop.</p>
<p>And then we're just going to assign this file name to that location, or that element in the file name array.</p>
<p>And then on the next line, I made a fake function here, where it takes in the name of the file name, and it's supposed to read data.</p>
<p>But down here doesn't do anything, but just return.</p>
<p>So like some string with the actual data name, but this is a real function.</p>
<p>It exists in a lot of libraries.</p>
<p>But I it's beyond the scope of this video.</p>
<p>So just know that this, this, this right here represents something that really does happen.</p>
<p>And so we pass the file name to the read data function, the read data function will open up the text file rewear was on there.</p>
<p>And then we will add that to our master data string.</p>
<p>And then over in Python, we do the same exact thing.</p>
<p>We have a for loop here for i in range length of filename, just to break apart what this means really quick.</p>
<p>So length function, it returns a number of items in a container.</p>
<p>And so this file name is a list with 700 items in it.</p>
<p>So when we run length of filename, it's going to return 700.</p>
<p>So for i in range of 700, will be our for loop.</p>
<p>And then we come on down into our code block.</p>
<p>And here, again, we have our file naming convention that we're just going to assume that you're good at labeling data.</p>
<p>Every file is named Kenny data, and then whatever the number is, but it doesn't start at zero, it starts at one, so we have to add one to our I because I does start at zero dot txt.</p>
<p>And then we just assign that to our filename list at the element of AI, again, that lives from zero all the way to 700.</p>
<p>And this is going to match up because they're both using eyes here and here.</p>
<p>And then finally, we made a fake function called read data, it doesn't really do anything except for return Kenny data from and then whatever the name of the file is, but we will run that function pass in the file name.</p>
<p>And let's say this was a real world scenario, then this would open up whatever that txt file is grab the data from that.</p>
<p>And then we would add that to our master data string.</p>
<p>And then finally, we come down here, and then we'll print the master data.</p>
<p>And just to prove that these work, I'm going to come up here and hit the start button, C sharp, and bring the window over and you can see that we have all this candy data.</p>
<p>Look at all that candy data.</p>
<p>Wow.</p>
<p>Then I'm come up here in Python and hit the play button and error.</p>
<p>Oh, right, right.</p>
<p>So Visual Studio code has a really weird, well, it's not weird, it's helpful.</p>
<p>But if you have something selected and you hit the play button, then it's just going to run that.</p>
<p>So almost like nothing and then hit the play button.</p>
<p>And there you go.</p>
<p>You can see that a generates all that data.</p>
<p>Wow.</p>
<p>And yeah, there you have it.</p>
<p>This is one creative use case in which for loops can be really helpful.</p>
<p>But there are a ton of different for loop use cases.</p>
<p>But it would take me all day to sit here and list out a bunch of different ones, but you now know how to write your own four loops.</p>
<p>So now you can think of really interesting ways yourself to apply for loops.</p>
<p>And that is everything that you need to know to get started with programming in regards to for loops.</p>
<p>Let's talk about while loops.</p>
<p>while loops are a type of loop obviously, and they share a lot with a for loop except instead of running a block of code a number of times it runs a block of code while a certain condition is true, hence the name while loop you'll find that while loops are a lot less common for loops, but every once in a while you'll find the perfect use for a while loop.</p>
<p>So for for loops.</p>
<p>For instance, when I make any sort of robotics project I find while loops very handy to use anywho.</p>
<p>Let's take a look at how to use while loops with code.</p>
<p>And we're going to do this using two different languages because I think it can be really helpful for you to see how they compare and contrast and plus, you'll pretty much learn two different languages at once.</p>
<p>So on the left is language C sharp using the ID e Visual Studio which should interest you if you want to do windows development or want to make games using a popular game engine called unity and on the right is the English Python three using the ID Visual Studio code, which should interest you if you want to get more into general programming or data science.</p>
<p>Alright, so here I have two brand new console projects.</p>
<p>And if you don't know how to make a new console project, neither C sharp or Python or both, be sure to check out the video in the description.</p>
<p>It's called How to install an ID.</p>
<p>And at the end of that video, I'll show you how to do that.</p>
<p>Alright, so while loops, Now today's labs can be pretty short, because there's not really a lot to while loops.</p>
<p>But let's start by looking at the syntax for a while loop in C sharp over here on the left, I'm going to get rid of these two lines because I don't need them.</p>
<p>And they come standard with every new console project.</p>
<p>And I'm simply going to write out while and then in parentheses true.</p>
<p>And then our code block.</p>
<p>This is the syntax for a while loop in C sharp, you essentially just write while and then you have to pass in a Boolean here.</p>
<p>And then you ever code blocks and where you can put all of your demands that will continue running over and over and over.</p>
<p>While this Boolean is true.</p>
<p>And over in Python, a while loop looks like this while and then true.</p>
<p>And then I'm just going to put pass here in our code block past just pretty much means don't do anything.</p>
<p>And this is the syntax for a while loop in Python.</p>
<p>Pretty simple.</p>
<p>Now one extremely important thing that you need to know about while loops is that while a while loop is running, whatever comes after the while loop.</p>
<p>So if I come down here, for example, into a console, console dot write line, for example.</p>
<p>And then reach, for example, anything that comes after a while loop will not be reached until the while loop has been completed.</p>
<p>And again, the reason for this is because when you run a while loop, it just runs whatever the code is in its code blocks over and over and over however many lines there are, it goes one by one by one.</p>
<p>And then once it reaches the end, it starts over the top and continues going until this boolean value here is no longer true.</p>
<p>Once this is false, then it will stop doing this loop and then go to the next lines after the while loop.</p>
<p>And this process also happens in Python.</p>
<p>If I just come down here and do print and then reached, for example, this while loop will keep on doing every single line in this code block until this condition here is false.</p>
<p>And if it's never false, then guess what this code right here will never be reached.</p>
<p>And I can prove that.</p>
<p>But first I need to set up a couple of variables, I'm going to come up here and then I'm going to initialize an integer.</p>
<p>Let's just call it a why not, and also t equals zero.</p>
<p>And so within this boolean value, all we have to do is say if a is less than 100, then we want you to run and then every single time to run, we can simply just do a plus plus, use the increment operator.</p>
<p>And then let's also do a console dot write line.</p>
<p>And just just print out the actual integer value.</p>
<p>And so what's going to happen here is that when our main program is ran, it's going to go down the line and then hit our while loop.</p>
<p>And because A is less than 100, it's going to run this block of code one time, you know plus to a and then write it out.</p>
<p>And then it's going to reach the end and do it again.</p>
<p>And then again 100 times until a is no longer less than 100.</p>
<p>Once it's greater than 100 or equal to then this will no longer run and then they'll go to our right line reached right here.</p>
<p>And we can print it out.</p>
<p>And I can prove it to you.</p>
<p>But first I need come down here and do a console dot read key.</p>
<p>So the terminal doesn't close on us when we hit the start button up here.</p>
<p>And I'll bring the window over.</p>
<p>And as you can see, we get results that we expect to get the while loop will run over and over and over until it's Boolean condition is no longer true.</p>
<p>And once it's false, then finally the while loop will exit it goes to the next line.</p>
<p>And then on that that line after it we have the printout reached which there it is at the end of the while loop.</p>
<p>And over in Python.</p>
<p>This is done the same exact way just in the Python syntax.</p>
<p>So to set that up, I'm simply going to come up here.</p>
<p>Oops, what did I just do? Oops, I think I Yep, collapse that.</p>
<p>Okay, come up here I'm gonna do a equals zero.</p>
<p>And then while a is less than 100, and then instead of pass, we're gonna print just whatever A equals and so not approve that they work the same.</p>
<p>I'm hit the play button up here.</p>
<p>And as you can see, we have Oh, we forgot to increment, right? I'm simply going to increment a up here to a plus equals one.</p>
<p>And now our code should be fixed, I hit the play button, and bada boom, there you have it, same exact scenario as in C sharp.</p>
<p>And finally, there's one more way that you can go about stopping a while loop.</p>
<p>And that's by using the break statement.</p>
<p>So first question, what is the break statement? Well, the break statement is a statement that can only be used with loops, like for loops, and while loops.</p>
<p>And when you use the break statement, all it does is just breaks that loop moving on to the next line after the loop.</p>
<p>So to demonstrate this, I'm going to replace this Boolean right here with just a regular Boolean, true value.</p>
<p>And then I'm going to go into here and write an if statement.</p>
<p>So now I'm gonna say if a is greater than or equal to 100, then what we want to do is break.</p>
<p>And to prove this works, I'm coming here to the play button, hit start, and then bring the window over.</p>
<p>And you can see that it works exactly the same as the other method.</p>
<p>And to do this method in Python, I'm simply going to replace this Boolean with the true boolean value.</p>
<p>And then I'm going to come down here and do if A is, is greater than or equal to 100, oops, 100, then we want to break, gonna hit that play button up here to prove that it works.</p>
<p>And you see that we have the same exact thing, probably didn't even notice that it changed.</p>
<p>And that's why it was for you.</p>
<p>They can be handy in certain situations.</p>
<p>But to be honest, you will probably more often be using for loops.</p>
<p>And there you have it.</p>
<p>That is everything that you need to know to get started with programming in regards to while loops.</p>
<p>It's finally time to talk about methods.</p>
<p>So methods are amazing programming tools that simply put allow you to not have to repeat code over and over and over.</p>
<p>And to be able to get a better grasp on your code.</p>
<p>For instance, say you have some inventory class.</p>
<p>And in this inventory class, you have a few things that can happen, you can close the inventory, you can open the inventory, you can empty the inventory, just to give a few examples.</p>
<p>And instead of having to change a list of inventory variables, every time you want to do these things, you can just wrap all this code into a method and just call that method whenever you want to do it saving you a lot of time from writing the same code over and over and saving you from future headache.</p>
<p>So now let's take a look at how to use methods with code.</p>
<p>And we're going to do this using two different languages.</p>
<p>Because I think it can be really helpful for you to see how they compare and contrast.</p>
<p>And plus, you'll pretty much learn two languages at once.</p>
<p>And so on the left is language C sharp using the IDE, a Visual Studio, which should interest you if you want to do windows development or want to make games using a popular game engine called unity.</p>
<p>And on the right is the language Python three using the it Visual Studio code, which should interest you if you want to get into general programming or data science.</p>
<p>Alright, so here I have two brand new console projects.</p>
<p>And if you don't how to make a new console project and either C sharp or Python or both, be sure to check out the video in the description.</p>
<p>It's called How to install an ad.</p>
<p>And at the end of that video, I'll show you how to do that.</p>
<p>So before we can use methods, we first have to learn how to initialize them.</p>
<p>So let's take a look at their syntax first over on the left and C sharp, I'm just going to get rid of these two lines because I don't need them.</p>
<p>And then I'm going to come down here so that we can initialize a new method and the syntax for that goes as follows.</p>
<p>You simply just type out void, and then whatever name you want for your method, I'll just call it ABC, for example.</p>
<p>And then you need to put a start in parentheses.</p>
<p>And then finally, is simply just add a code block.</p>
<p>And now you can put whatever commands you want within this code block.</p>
<p>For example, I'm just going to put console dot write line, and pizza, because pizza is the best.</p>
<p>And there we have initialized a method.</p>
<p>Now to do this in Python, it's just a little different, but the concept is still the same.</p>
<p>So to initialize a method in Python, you want to type out instead of void, you want to type out def, def, and then whatever name for your method or isn't called again, ABC.</p>
<p>And then you're gonna do your start in parentheses, this convention stays the same.</p>
<p>But instead of going to a new line and doing code blocks using the braces, you simply just use a colon here, and then go to next line and make sure that it's indented.</p>
<p>I'm using the Visual Studio Code ID, which automatically adds an indent for me when I go to next line.</p>
<p>Well now just like in C sharp, I can add whatever commands I want in this code block.</p>
<p>So I'm going to write out prints.</p>
<p>And then again, pizza, because pizza is the best.</p>
<p>So that's how you initialize a method in most C sharp and Python.</p>
<p>But without more context, I don't think they're that helpful.</p>
<p>So let's take a step back and examine a scenario.</p>
<p>So imagine that you're writing some sort of program with an inventory system that has three spaces, and this program requires you to swap out what's in those three spaces quite a lot.</p>
<p>So just to make is less confusing, I'm going to get rid of our initial examples on both Python and C sharp.</p>
<p>And now I'm just going to pretty much set up that scenario with some variables.</p>
<p>So I went ahead and wrote the scenario off screen, because otherwise it probably would have been about five minutes of silence.</p>
<p>But I'll walk you through it.</p>
<p>So up here, we have all of our string variables.</p>
<p>This is our inventory standing for I envy slot, one, two, and three Python as the same.</p>
<p>And we first set them all to be empty.</p>
<p>And then we have a couple of items we can pick up under the variable name, pickup, one, two, the first one is pizza, because pizza is the best.</p>
<p>And then we have candy.</p>
<p>And of course, Python has the same exact thing going on there.</p>
<p>Next, we just have a couple of if statements to kind of simulate an event happening, let's say that you want to pick up some items.</p>
<p>Well, first, you want to check to see if it's empty.</p>
<p>And then if it's empty, then you pick it up.</p>
<p>Same thing happening here in Python.</p>
<p>Okay, so we have our scenario all set up, I'm just going to come down here and add a console dot write line, so we can print out the results here.</p>
<p>Let's print out first in Vin one.</p>
<p>And then I'm lazy, I'm just gonna do Ctrl C Ctrl, V, copy paste a couple more times, and print out also in Vin two and inven.</p>
<p>Three.</p>
<p>And I'm, of course, gonna come over here and Python do the same exact thing, except for the syntax a bit easier.</p>
<p>In Python, I can just do inven, one, there, and then comma, and one, two, and comma in vim three, a much more simplistic print function Python has now before we run it, what should we expect? Well, again, all of our inventory, slots, stuff is empty.</p>
<p>And then we come down here and do a check if the first slot is empty, then we're going to assign the pickup one to Inventory Slot one, which is pizza.</p>
<p>And then we do another check.</p>
<p>If Inventory Slot three is empty, then we'll assign the pickup to to it, which is candy.</p>
<p>So all we should expect is pizza, empty candy.</p>
<p>Let's see if we get that just gonna come up here and hit the start button.</p>
<p>Oh, that's going to close on us.</p>
<p>I forgot to add, of course, console dot read key.</p>
<p>Alright, so again, I'm just gonna come up here and hit the start button and bring the window over.</p>
<p>And you can see that we have an Inventory Slot one pizza, slot two empty and slot three candy.</p>
<p>Perfect.</p>
<p>Gonna run that in Python as well hit the play button up here.</p>
<p>And you see we got pizza, empty candy.</p>
<p>Perfect.</p>
<p>Okay, so this isn't bad.</p>
<p>This is pretty straightforward, does exactly what we want.</p>
<p>But now imagine this scenario where when you assign a new item in your inventory, it doesn't only just change that item slot.</p>
<p>Maybe also, you know, it does some UI stuff here.</p>
<p>And then it does like some special effects was that I'm saying v effects, and then maybe like updates, other like update.</p>
<p>slot one, for example, Inventory Slot one also updates inventory, slot two, slot two, for example.</p>
<p>And this does this happens for every time that you want to do this, right.</p>
<p>So I'm gonna copy this and bring this down here.</p>
<p>And you can see that our code is starting to get long and kind of strenuous.</p>
<p>Now, this is where one of the use cases for methods come back into play.</p>
<p>The first advantage to using methods is having the ability to compress your code.</p>
<p>Now, why would we want to do that? Well, everything within the code blocks have this main function right here is our main program.</p>
<p>And over in Python, just for comparison, every line in the script counts as your main program.</p>
<p>But as you add more code in the main program gets longer and longer, it can become more and more confusing and difficult to read and understand.</p>
<p>And so instead of having this chunk of code or this chunk of code, we can convert that into a method and just call that method in our main program.</p>
<p>And so let's do that.</p>
<p>And to do that, I'm first going to come over to our first chunk of code, and essentially encapsulated inside of a method.</p>
<p>So right above it, I'm going to add a start brace comes to the bottom of it at an end brace and Visual Studio automatically reformats to it for me, thank you Visual Studio, and then I can simply add our void.</p>
<p>And then we can now get to the hardest part in all of programming.</p>
<p>Now, we have to name our method, which thankfully, I thought of all this ahead of time, so you don't have to watch me struggle, but I'm gonna call it pick up pizza.</p>
<p>I won.</p>
<p>And then of course, our parentheses, close it out.</p>
<p>We already did our code block ahead of time.</p>
<p>And there you go, we have converted this to a method successfully.</p>
<p>Now I'm just gonna do the same thing for our second chunk of code.</p>
<p>Just a bit different in my process here, pick up what is this candy and i three that do that.</p>
<p>Oops.</p>
<p>We're going to get rid of this.</p>
<p>And then we'll use the bottom automatically formats.</p>
<p>Thank you.</p>
<p>Visual co And there we have it.</p>
<p>And over in Python again, let's say that when you pick up something, you also do like some UI stuff and some visual effects.</p>
<p>And you also do, you know, you update whatever information you need update and slot, one of your inventory, you also update whatever's going on.</p>
<p>And slide two, for example, so on and so forth.</p>
<p>I'm just gonna copy this and bring this down to this one as well fixed the format a bit.</p>
<p>And you can see the script got a lot longer.</p>
<p>So let's convert those into methods.</p>
<p>Now, you already know the syntax for methods in Python, we simply just replace void with def, and then we name our variable is going to be pick up pizza, Inventory Slot, one, starting in parentheses, and then our semi colon.</p>
<p>And then we have come down to all of this and then hit the tab button so that this counts as a code block for that method.</p>
<p>And let's do the same exact thing for our second chunk of code.</p>
<p>def, what is it pick up candy, inventory, three, starting in parentheses, and then our colon, and then come down to all these lines and indent the man.</p>
<p>So they count as a code block for this method.</p>
<p>Now, we need to pause if you take a look at our inventory, three variable, and even our inventory one variable, they are underlined red, which means that we have a problem, it would come down to our console and press problem, we see that word is telling us that these variables are not assigned.</p>
<p>What's going on here? Well, this has to do with something called scoping.</p>
<p>And Python is very peculiar about your scoping to simplify, this block of code is self contained only within this method, pick up pizza inventory one, he doesn't have any reference to anything outside of this code block.</p>
<p>And of course, same goes for this code block as well.</p>
<p>So one simple thing we can do to let these code blocks know that there is a variable called iron v one outside of its scope, which again, is this, we can simply just come at the top of it, and then type global and then I N v one.</p>
<p>Same down here, we can type global, and then type ion v three, and you can see our problems are gone.</p>
<p>Problem solved.</p>
<p>What we can do now to compress our code is grab all of these lines here, which contained both of our methods.</p>
<p>And I'm going to hit Ctrl x or cuts.</p>
<p>And I'm going to now move this to the bottom of our entire program at the very end, and D realize what just happened, pretty much our program ends here.</p>
<p>So everything before that is our actual program, look how much shorter that is.</p>
<p>And over in Python, we can do the same exact thing.</p>
<p>I'm going to select all these lines that have our two methods here, hit Ctrl, x or cuts.</p>
<p>And then I'm going to move that up.</p>
<p>And then underneath our print function, I'm going to hit Ctrl V or paste and put that underneath.</p>
<p>And again, right here, our program ends here, much, much shorter.</p>
<p>However, our code is now compressed.</p>
<p>Yes, but we aren't completely done yet.</p>
<p>Over in C sharp and the left, you can see that if I hit the start button up here on top and bring the window over, you can see that our entire inventory is still empty.</p>
<p>And the same goes for Python, if I hit the play button, you can see that we have empty, empty, empty.</p>
<p>And the reason for that is because at no point did we call our methods.</p>
<p>And to do that in C sharp over here on the left, all you have to do is simply just write out the name of your method.</p>
<p>So our first one, we want to do pick up pizza for one.</p>
<p>And then you also need to include your Start and End parentheses.</p>
<p>This is what denotes that it's a method.</p>
<p>And then we need to do pick up candy inventory, i three started in parentheses, and then our semi colon.</p>
<p>And to prove to you that this works, like I say it does, I'm gonna hit the start button, and then bring the window over and you can see that they have now been set, check that out.</p>
<p>Now over in Python, it's actually quite different, although the concept is still the same.</p>
<p>So earlier, I moved off our methods to the bottom of our Python script.</p>
<p>But if we were to come into the middle of our program, and then type out, pick up, what is it pizza item one, and then start in parentheses and then run our program, you'll see that we get an error because pizza pickup pizza item one is not defined yet, or inventory one rather, is not defined yet.</p>
<p>And so a truth about Python is revealed.</p>
<p>using methods in this context isn't really all that useful because the order of operation is extremely important in Python.</p>
<p>So to use our methods, we have to initialize them before we call them For the first time in our scripts, but also after we initialize the variables that we're using within them.</p>
<p>And where's that sweet spot you ask? Well, it's right here.</p>
<p>And so I'm just going to select all these lines that contain our methods.</p>
<p>And then I'm gonna hit Ctrl, X to cut and then Ctrl V to paste.</p>
<p>And there you have it.</p>
<p>And just to prove that everything is exactly what it needs to be, I'm gonna hit the play button up here in Visual Studio code.</p>
<p>And you can see that we get pizza, empty, empty, hold on, That's not right.</p>
<p>Of course, the reason for that is we have to call the second pickup as well pick up candy I three star in parentheses at the save the play button, and voila, we got pizza, empty candy.</p>
<p>Okay, so that was one use case for methods.</p>
<p>But I want to show you another one, I'm gonna start by removing all the code that we did, and C sharp and Python so that we can set up a new scenario.</p>
<p>By now imagine that you have some program with some sort of boss battle in it.</p>
<p>And every time that you successfully hit the boss, two things or more happen, so I'm just going to quickly code up this scenario.</p>
<p>Alright, so I went ahead and code up the scenario off screen, because otherwise would have been another couple of minutes of silence, but I'll walk you through it.</p>
<p>So here we have a few integers initialize, we have my HP the enemy HP and some money, then we have some Boolean to check if we hit legs, arms or head, set them all to be true.</p>
<p>And then we simply have some if statements to check for those volumes.</p>
<p>And if any of them are true, then we simply will minus HP from the boss and then add some money to our bank account.</p>
<p>And Python does the same exact thing.</p>
<p>Same variables might be in PHP and money, and then some hit legs, hit arm and hit head bullions.</p>
<p>And we simply check those blades.</p>
<p>And if they're true, then again, we're going to minus HP from the enemy and add some money to our bank account.</p>
<p>And that's all it's to it.</p>
<p>And so the next advantage that methods could give you is reducing repetition, if you haven't already observed, and both scripts, we have this chunk of code right here, enemy HP minus equals one, and money plus equals five.</p>
<p>And this is repeated over and over three times each on both scripts.</p>
<p>And I mean, that's fine.</p>
<p>In all, I mean, this will do exactly what you expect it to do.</p>
<p>However, we have this rule in programming, and it goes as follows.</p>
<p>never write the same code twice.</p>
<p>In addition, imagine that you want to add something else to these hit events.</p>
<p>Like for example, let's say that you wanted to take your HP and add a little healing for every successful hit, right.</p>
<p>So you would come down here and do my HP plus equals two, for example.</p>
<p>But the problem is that you now have to write this for every single hit event.</p>
<p>So my HP plus equals to go to the next one, again, my HP whoops, my HP plus two equals two.</p>
<p>Now there is a clear pattern here.</p>
<p>And there's no reason for you to repeat this over and over and over again.</p>
<p>And so let's bring back methods, all we have to do at the end of our main function here is write out void and then name our function, let's call it I'll just call it hit event.</p>
<p>Sounds good enough to me open starting in parentheses, and then come down here and your code block.</p>
<p>And let's just write all this out.</p>
<p>Any PHP minus equals one, perfect money, plus equals five, and then my HP plus equals two.</p>
<p>And so now all we have to do is simply just remove all of these and replace them with hit events.</p>
<p>Starting in parentheses, semi colon, and bottom being do that for all other spaces as well.</p>
<p>And do hit events.</p>
<p>Start in parentheses, semi colon, oops, get rid of that line.</p>
<p>And then of course here as well hits events about bomba bomb and bada bing.</p>
<p>And there you have it, we have greatly reduced our repetition.</p>
<p>And of course, just to prove to you that all this works, and we come to the end of our script here, which again, ends right before our method is called.</p>
<p>So in script, and then I'm going to add a console dot write line.</p>
<p>And we really just want to know all of our variables, so enemy HP, and then I'm lazy.</p>
<p>So I'm gonna hit Ctrl, C Ctrl, v a couple times and then replace this with money.</p>
<p>And then replace this with my HP.</p>
<p>Come up here, hit the start button.</p>
<p>Up, it's going to close Of course, we have to hit console that read key always forget this.</p>
<p>Probably a bit.</p>
<p>So use the Python, hit play, bring the window over and you can see that we have our calculations.</p>
<p>I mean, there's not going to confirm that they're what they are, but trust me, it's working and now over in Python, this technique has a lot of benefits, but it's still limited to the order of operation.</p>
<p>And so again, to implement this in Python, we simply just go after our variables that we're using are initialized.</p>
<p>But before we call it, which that sweet spot is right here, and so we can do def, what do we call it? I forget hit event, hit events, and then start in parentheses there.</p>
<p>And then I forgot some, just regular colon.</p>
<p>In our code block, we can just bring in this right here, I'm lazy.</p>
<p>So I'm just copy and pasted by being and then we can replace all of these with hit events.</p>
<p>And then I'm going to copy this because I am lazy and copy this as well, because I'm lazy.</p>
<p>And you can see that we have our issue again, and you can see that we have our scoping issue again.</p>
<p>And you can see that we have our scoping issue again.</p>
<p>And you can see that we have our scoping issue again.</p>
<p>And to fix this, all we have to do is just again, add our global, and then we need what enemy, HP and money.</p>
<p>Perfect.</p>
<p>And so now to prove all this works, I'm just simply going to repeat what we did in C sharp and do print and PHP.</p>
<p>And then we also want to print our money.</p>
<p>And then we also want to print our my HP.</p>
<p>I boom, except for the HP Of course, because we didn't add that.</p>
<p>But it's a lot easier to add things.</p>
<p>Now, instead of having to go through every single event, we just go to the actual hit event method.</p>
<p>And then we can do my HP plus equals to I believe it was I'm just double check here.</p>
<p>Yes, it was too.</p>
<p>And we need to set that as a global as well to grab that from our scripts.</p>
<p>And then I can hit play again.</p>
<p>And you can see that we have the same exact variables 2715 and 16.</p>
<p>And there you have it for reducing repetition with methods.</p>
<p>Now, I just want to show you one last technique with methods and that is returning values.</p>
<p>To do this.</p>
<p>Again, I'm just going to get rid of all the code that we did already sing with Python.</p>
<p>And now imagine this scenario.</p>
<p>And so I went ahead and wrote this scenario of code off camera, because otherwise, this probably would have been about a 10 minute silence.</p>
<p>But as always, I'll walk you through it First, consider the scenario that you're developing some app or some social media or something like that.</p>
<p>And you want to generate a user ranking for all of your users.</p>
<p>Now, what's going on in our program isn't really important at all, honestly.</p>
<p>But here we have our user rank variable.</p>
<p>And let's say that we want to generate this user rank using these variables here.</p>
<p>Well, I just came down here and just made a pretty big tree, and did a bunch of checks.</p>
<p>So if guests then minus something if page, plus something else.</p>
<p>Plus, if this is all arbitrary, I just want to make a really big tree to demonstrate this next example.</p>
<p>So let's just say that all of this right here, actually starting here, all this right here is like an algorithm that you and your social media your app team has developed.</p>
<p>And you guys have concluded that it's a very accurate way to assess the user ranking of your users.</p>
<p>Well, instead of having this algorithm hard coded for a single variable, we can convert this algorithm into a method and have that method return a value.</p>
<p>And so to do that, we only need to do two things.</p>
<p>First, let's convert this algorithm into a method.</p>
<p>Now, this is still hard coding our user rank variable.</p>
<p>This is no different than just a regular method.</p>
<p>So what we need to do next is we need to create a temporary variable and we'll call it actually temp, and then let's set its equals zero.</p>
<p>And then we need to change all the user ranks to be timps.</p>
<p>Or the temp variable, my apologies.</p>
<p>So I must say temp here, use a rank.</p>
<p>I'm gonna go right here temp and then use rank here is also temp.</p>
<p>And then use rank here is also temp and then use rank here is also Tim Hahn this user rank is temp is well.</p>
<p>And this final one is to at last No, we have to do is come to the end of our method, and then do return tip.</p>
<p>Now, you'll see that we will get an error here.</p>
<p>And the reason for this, it requires a bit of explanation.</p>
<p>So when you initialize methods, you are also casting its data type.</p>
<p>And so if we check out our score method, you can see the data type for our score method is a void, which is essentially data type lists.</p>
<p>So our score made through essentially just go through its code block, run that and then exit out but if we wanted to return data of some type, all we have to do is replace this with that data.</p>
<p>Type.</p>
<p>And seeing that our use rank is a float, we're going to replace this with a float.</p>
<p>And you see our error has disappeared.</p>
<p>And so what does that allow us to do? Well, I'm going to do our convention, our program ends here.</p>
<p>And then I'm gonna go down and find these two things, and then Ctrl X to cut them, and then put them before programmings.</p>
<p>And now all we have to do is just assign a score to our user rank variable.</p>
<p>Isn't that nice? And let's say that we have another user rank that we want to calculate, right? This is easier rank two equals zero.</p>
<p>Well, all we have to do now is just go user rank two equals score.</p>
<p>And nowhere in Python, we can do the same exact thing, just first wrap our algorithm here into a method was called score.</p>
<p>And do that and then now we need to select the entire algorithm, and then hit the tab button.</p>
<p>So that is all within the code block for a score.</p>
<p>And then because it's a method, hopefully something broke here, what broke here.</p>
<p>Now I'm not entirely sure what happened here.</p>
<p>But to fix this, we simply just add a tab fix the syntax, error disappears.</p>
<p>Perfect.</p>
<p>Next, we'll add back in our temp variable.</p>
<p>Let's just initialized this temp equals zero.</p>
<p>And then was replace all the user ranks with temp.</p>
<p>I'm just gonna copy and paste because I am pretty lazy right now.</p>
<p>temp, temp, temp, temp, temp, to temp.</p>
<p>And then at last we just come out I think this is it.</p>
<p>Return tip seven double check, this is the right place to put it.</p>
<p>Yes, it is.</p>
<p>Now again, because this is Python, this method isn't that useful for compression, again as to be in that sweet spot.</p>
<p>But we can get our user ranking simply by calling user rank and then assigning score to it.</p>
<p>And so now to prove to you that these do exactly as I say they do, over here in C sharp and left, I'm just gonna copy and paste this right line, because I'm lazy, then added to there.</p>
<p>And then we have read key.</p>
<p>So now I'm gonna hit the start button.</p>
<p>And then I'm gonna bring the window over.</p>
<p>And you can see that we have 49 and 49.</p>
<p>And to prove the same thing to you in Python, I'm just gonna initialize a new user rank here, use rank two, and that also equals score two.</p>
<p>So we have the same exact scenario.</p>
<p>And then we're praying user rank two.</p>
<p>And then I'm gonna hit the play button up here, you see we have 49, and 49.</p>
<p>And yeah, there you have it.</p>
<p>If you want to learn more about methods, I think the best thing that you can do is just to start using them more, because you'll learn more about them in the process.</p>
<p>But that is everything that you need to get started with programming in regards to methods, functions functions, let's step into the wonderful world of functions.</p>
<p>Now I'll just go on record saying this functions are hands down the most valuable tool to program.</p>
<p>Now, why is that? Well, functions share a lot of commonality with methods for they allow you to be able to reuse code giving you the ability to write more neat and nice code, which in effect makes it easier to read giving you a better grasp on your code.</p>
<p>But the advantage that functions have over methods is that you can pass in data and slightly alter the code that is ran within a function making them extremely powerful.</p>
<p>So for example, say you have an inventory class that can hold four items and you want to remove the items.</p>
<p>Well, instead of creating four different methods that you can call to remove the for various items, inventory dot remove item one, inventory dot remove item two, so on and so forth.</p>
<p>That will all run the same exact code minus may be a variable or two with functions you can pass in, for example, the item number and using the same code can remove that item.</p>
<p>Now talking about the theory of functions is great and all but let's take a look at how to use functions practically with code because I promise this will become so much easier to understand.</p>
<p>And we're going to do this using two different languages because I think it can be really helpful for you to see how they compare and contrast.</p>
<p>And plus, you'll pretty much learn two languages at once.</p>
<p>So on the left is the language C sharp using the ID Visual Studio, which should interest you if you want to do windows development or make games using a popular game engine called unity.</p>
<p>And on the right is language Python three using the IEEE Visual Studio code which should interest you if you want to get into more general programming or data science.</p>
<p>Alright, so here I have two brand new console projects and if you don't how to make a new console project and either C sharp or Python or both.</p>
<p>Be sure to check out the video in the description.</p>
<p>And it's called How to install an ad.</p>
<p>And at the end of that video, I'll show you how to do that Paul Wright, who's ready to have some fun with some functions.</p>
<p>Now before we can do that, we need to go over the syntax for functions in both C sharp and Python over on the left and C sharp, I'm going to get rid of these two lines, they come standard with every new console project, but I don't need them.</p>
<p>And then in this code block, I'm going to initialize a function, which, if you're familiar at all, with methods, this is going to seem very familiar to you, I'm just going to type out void, and then the name of our function, which is called F for now, and then start in parentheses.</p>
<p>Now, if you're familiar at all, with methods, you're probably looking at this and you're like, Wait a second, that's just the method what's going on here.</p>
<p>And yes, you're right methods and functions have a lot of overlap.</p>
<p>But what makes functions super cool and extremely useful is that you can pass in some input.</p>
<p>So if I type in right here, if I initialize an int, and then I'm a call this x, for f of x, that's a standard notation for functions, I can now make my code block here.</p>
<p>And we can do something with this input within the code block.</p>
<p>For example, let's say that we want to take our input x, and we simply just want to times it by two.</p>
<p>So I'll use the multiplication operator and then times it by two.</p>
<p>And then to see this change, let's come down here and add a console dot write line just to print to the console.</p>
<p>And then we're going to put in here our x variable.</p>
<p>Well, now we can do something cool with this function, if I just come to the beginning of the script, and then I'm going to initialize an integer, I'm going to call it, I don't know my number, for example.</p>
<p>And then let's make it nine.</p>
<p>And so now I just want to call F and then pass in my number, which is nine.</p>
<p>And what it's going to do is it's going to take my number in this function, and then here is just going to times by two and printed out.</p>
<p>And to prove that to you, I'm going to come right underneath our function and add a console dot read key, so that the terminal doesn't close on us.</p>
<p>As soon as we run it, hit the start button, and our terminals over here.</p>
<p>And you see that nine times two does in fact, equal weighting.</p>
<p>Now in Python, the syntax is a bit different.</p>
<p>I'm just gonna start off by initializing our integer, my num, assign a nine to it.</p>
<p>And then our, our function has to come before we actually call it.</p>
<p>So I'm going to initialize that, first, I'm gonna say def, with the name F, and then we're in past nine input x, and then I'm using a colon here, go down into the code block, and then I'm going to do X times equals to no different than what we did in C sharp, and then simply just print out whatever x is, then lastly, we can just call our f function by saying F and then passing in my num, knowing my num when I do my num, and there you have it, I'm gonna press the play button just to prove to you this works.</p>
<p>And bada boom, you see the web 18.</p>
<p>Now, we just barely scratched the surface with functions.</p>
<p>But hopefully, you can already see how much power we have with just this very simple example.</p>
<p>Allow me to show you one more example.</p>
<p>Before we move on.</p>
<p>Imagine that we have a list of names and we want to add Mr.</p>
<p>or Mrs to the beginning of those names, well, we can simply get rid of this integer no longer need that.</p>
<p>What else do we don't need, we actually don't need this function anymore.</p>
<p>So we don't need this will keep the console actually let's just get rid of the whole entire program and start over from scratch and do the same for Python.</p>
<p>So let's initialize a string array.</p>
<p>Let's call it a name.</p>
<p>And then that equals a new string array of size.</p>
<p>Let's Let's initialize sizes to make it simple.</p>
<p>And then we can come in here and manually set the variables within our array.</p>
<p>So I'll do zero equals, let's say his name is Johnny.</p>
<p>And then let's say that name of element one is equal to Carla.</p>
<p>And then name of element two is equal to let's just say that Zack, and I suppose Zack, thank you.</p>
<p>So now let's write out our function that will do this process for us.</p>
<p>I'm going to come down here and I'm going to do a void and then let's call it surname, I believe they're surnames.</p>
<p>And then we can pass in.</p>
<p>Let's see, a string and this is going to be It was called sir as the variable.</p>
<p>And so now we can do down here name of zero equals sir, plus name of zero.</p>
<p>And then of course, let's let's print this out so that we can see what's going on console dot write line.</p>
<p>So what I'm looking for, and we can print out name of zero.</p>
<p>Come on, there we are.</p>
<p>And then we can call our surname here.</p>
<p>And then let's pass in Mr.</p>
<p>Mr with the space there.</p>
<p>And then of course, console dot read key.</p>
<p>So a terminal doesn't close on us.</p>
<p>Also, I'm just going to write right here, just because it's fun to make the distinction that our program is here.</p>
<p>And so I went ahead and wrote out the program in Python, so you don't have to sit and listen to my silence for a couple of minutes.</p>
<p>But it does the same exact thing.</p>
<p>We have the nameless here that is initialized with Johnny Carla and Zach in it.</p>
<p>And then we initialize our surname function that takes the input of sir.</p>
<p>And we essentially just assign sir, plus the name of element zero, to name velleman, zero, so we essentially reassign it, and then we print it out.</p>
<p>And here is when we call the actual function itself.</p>
<p>And so if I just come up here to the play button and press it, you can see that again, we have Mr.</p>
<p>Johnny except for I put the period in the wrong spot supposed to go there, press it again, bada boom.</p>
<p>Alright, cool.</p>
<p>So now we have a surname function that adds a certain name to our names, however, we have three names.</p>
<p>And I really don't want to have to write three different functions just to do this.</p>
<p>Well, thankfully, we don't have to, thanks to this next feature that further makes functions even more powerful.</p>
<p>So there is no real limit on how many inputs we can pass in with our function.</p>
<p>And at the fact that we're using an array here, we can just pass an integer to change whatever element in the name array that we want.</p>
<p>And so to do that, I'm just going to add an integer variable at the beginning here, we'll call it, I'm just calling ind for index.</p>
<p>And then we can simply just replace this zero here with ind whatever, integer we pass in i n d again, and then i n d.</p>
<p>And lastly, we just come up here and then just pass in the zero.</p>
<p>So we want to change the zero element in the name array, which corresponds to Johnny run that again, by hitting the play button at the top here, bring the console window over, and you can see nothing has changed.</p>
<p>And so now that we have this add to flexibility, I can simply take this line, and copy and paste, copy and paste, copy and paste, and just change the index to one which is Carla, and two, which is Zack.</p>
<p>And of course, Carla is not a mystery.</p>
<p>So we can change that to a message here.</p>
<p>And when we run this, it's going to print out all three of them.</p>
<p>So I'll just press the play button again, and bring the window over.</p>
<p>And would you look at that, and Mr.</p>
<p>Johnny, Mrs.</p>
<p>Carla and Mr.</p>
<p>Zack function is working perfectly.</p>
<p>And over in Python, we can do the same exact thing.</p>
<p>So I'm gonna pass in an input variable here called ind again, separate them with the comma that's important for both syntaxes separate your variables with commas.</p>
<p>And then we can replace all of the element numbers here with ind, and then just pass an integer in when we call the function we get there.</p>
<p>Right here.</p>
<p>So Mr.</p>
<p>Zero.</p>
<p>And then of course, we can do copy, paste, paste.</p>
<p>And then one and two.</p>
<p>Carlos misses the Save button clears all errors, then hit the play button.</p>
<p>And would you look at that Mr.</p>
<p>Johnny, Mrs.</p>
<p>Carla, and Mr.</p>
<p>Zack, I'll never stop saying this.</p>
<p>But functions are the greatest thing there is high love functions.</p>
<p>And if you think that it stops there.</p>
<p>Well, you're in for a bit of a surprise.</p>
<p>But first, let me introduce a problem to you say that we want to come down to the bottom of our program and initialize a new string, right? And the name here.</p>
<p>Let's just say this is the boss's name, and it equals Helen.</p>
<p>And now what if we wanted to add a surname to Helens name? Well, because this surname function is directly tied to the name array.</p>
<p>We kind of can't at the moment, I mean, of course, we could just come in here and just add it manually, Mrs.</p>
<p>Helen, or we could remove this and then just come down to the next line and do something like bossy cool.</p>
<p>What is it Mrs.</p>
<p>Plus boss here.</p>
<p>And then we also want to do a console dot Yeah, we could redo the same code over if we really wanted to imagine that you were doing this as an automated task, well, you wouldn't want to manually go and add the surname to all the names that you have.</p>
<p>And you wouldn't really want to rewrite the code over and over and over.</p>
<p>And so the solution to this problem is by changing this function from being a variable dependent function into a variable, independent function, and we can do that by using the return statement.</p>
<p>And so to do that, first I'm gonna get rid of these two lines, because they're just for an example.</p>
<p>And then I'm gonna go into our surname function, and we're going to return a string.</p>
<p>So I'll initialize a string, I'll call it temp, and then I'll sign it to be an empty string for now.</p>
<p>And now we have to replace all of the variable references to the name array into the temp, because this is what makes this function variable dependent.</p>
<p>So I'm gonna change this here to temp.</p>
<p>And then I will change this one to temp as well.</p>
<p>And then I'm gonna change this here to temp.</p>
<p>And actually, because we need an input with the original name is we actually don't need to initialize this here.</p>
<p>So I'm going to get rid of that line.</p>
<p>And we can now change our integer variable input into a string variable input and call it temp.</p>
<p>And so the very last thing we need to do here is we need to change the data type of our function from a void to be a string.</p>
<p>And then you'll see we get an error saying that it doesn't return a value.</p>
<p>When you cast the data type on your functions, they have to return the same type of data type in the return.</p>
<p>So we'll go down here and add, return and temp is a string.</p>
<p>So we'll just return back the temp which has been modified with sir at the beginning.</p>
<p>And so now because we change the input to surname from the data type integer to string, you can see that we have three errors here.</p>
<p>For the times that we called it, these are currently integers, they need to be strings, which is no problem, we can just input the actual name that we want to change here.</p>
<p>So of course, the first one is name of element zero, and I'm lazy.</p>
<p>So I'm gonna copy and paste this, paste and paste and change this to one and two, which again corresponds here.</p>
<p>And if I just hit save, and then the Start button up here, and then bring the console, you can see that absolutely nothing has changed function works exactly the same.</p>
<p>However, the very last thing that we have to do to make this completely functional is, again, right here, it's printing out the temp, so this is only temporary, we get a reference to that, and then we change it and then we return it.</p>
<p>But you can see here that's that's not being assigned to anything.</p>
<p>So that's the final thing that we have to do here.</p>
<p>But before we do to further illustrate my point, I'll simply come at the bottom here and do a console dot write line.</p>
<p>And then we're going to print out name zero, and then I will copy paste few times because I'm lazy, changed to one in two.</p>
<p>And so if I come up here and hit the start button and bring the console and over you can see that yes the certain names are added for the first three which is what is inside the actual surname function.</p>
<p>But the last three that were printed which is outside the surname function is the actual ground truth to are named of zero element name of one element and name of two elements are still the same exact as we initialized it.</p>
<p>And so to fix this, we simply just have to assign it whatever is being returned right here.</p>
<p>So name of zero equal surname with the inputs and name of one equal surname with the inputs and name have to equal surname with the inputs come up here hit the start button, bring the window over and you can see that they have actually been assigned.</p>
<p>And just to walk you through what's going on here.</p>
<p>On these three right here we will assign that name of zero element name of one element name with two element will equal surname with some inputs.</p>
<p>And so we go into the function and we pass in the inputs.</p>
<p>temp, which is the actual name at the moment and then surname is a name that we want to add to the beginning of the name and so we will assign the surname to the beginning of the name and then we will print that out and then we will return temp.</p>
<p>And so because this whole function right here, is returned with the value whatever temp is which again is calculated here, we will assign that return value to name of element zero named value one and name of L admit to.</p>
<p>And now at last to bring it full circle.</p>
<p>Now that we have this flexible variable independent function surname, we can initialize our boss string here, which equals Helen, and simply just reassign it by going boss equals surname.</p>
<p>And then we're going to pass in boss here.</p>
<p>And we can pass in Mrs.</p>
<p>And as simple as that.</p>
<p>And just to prove it to you, I'm going to get rid of these three lines, make it a bit less confusing, hit the star button and bring the window over.</p>
<p>And as you can see, we have Mr.</p>
<p>Johnny, Mrs.</p>
<p>Carla, Mr.</p>
<p>Zack, and at the very end, Mrs.</p>
<p>Helen.</p>
<p>Now that is how you write good code.</p>
<p>And so we're in Python, we can make this change really easily as well, we can simply just change this to say temp, and then change this as well to say temp, and then change this one to say temp.</p>
<p>And of course, we want to change our input to be temp, oops, and then come down here.</p>
<p>And then we want to assign this to be name of zero, and then this one to be named one.</p>
<p>And then this one to be named to.</p>
<p>Of course, and then we need to assign this here name of zero equals surname with these inputs, and then name of one equals surname with those inputs, and then I'm lazy.</p>
<p>So I'm gonna copy and paste the last one change that to name a surname equals the last of those inputs.</p>
<p>And of course, I'm getting an error here.</p>
<p>It's saying that assigned to a function which doesn't return, I forgot to return here.</p>
<p>So we're simply just do return tip.</p>
<p>And then of course, we can't forget our boss, Helen.</p>
<p>So we can initialize that by saying boss equals surname.</p>
<p>And because we're initializing this, we simply just pass in Helen.</p>
<p>Like so.</p>
<p>And then Mrs.</p>
<p>can come up here, hit the play button.</p>
<p>And voila, Mr.</p>
<p>Johnny, Mrs.</p>
<p>Carla, Mr.</p>
<p>Zack and Mrs.</p>
<p>Helen functions are just absolutely incredible.</p>
<p>I love these things.</p>
<p>We barely scratched the surface with what's possible with functions here.</p>
<p>But hopefully, your creative juices are flowing in, you're thinking of different ways on how you might be able to apply a function.</p>
<p>I've said it before.</p>
<p>And I'll go on record saying that, again, functions are probably the most powerful tool when it comes to programming.</p>
<p>In fact, if you're familiar at all, with all the breakthrough research that's happening in the field of machine learning, well, it's all powered by functions.</p>
<p>So I hope I was helpful for getting you excited about some functions.</p>
<p>But that's everything you need to know to get started with programming in regards to functions.</p>
<p>Now, commenting can be a make or break for your coding success, especially if you're working on a team on an open source project or on a project, you plan to work on long term comments, just as you expect our way to leave comments within your code in a human readable format, so that you know what's going on in different parts of your code.</p>
<p>At all times, sometimes you'll write out extremely complicated code that makes perfect sense in the moment.</p>
<p>But when you return to that code months later, or give it to someone else, so they can add on to it, it may be really difficult or a ton of wasted time trying to reverse engineer the code.</p>
<p>So let's take a look at how to use commenting in two different languages.</p>
<p>Because I think it can be really helpful for you to see how they compare and contrast.</p>
<p>And plus, you'll pretty much learn two languages at once.</p>
<p>So on the left is the language C sharp using the ID Visual Studio, which should interest you if you want to do windows development or make games using a popular game engine called unity.</p>
<p>And on the right is the language Python three using the ID Visual Studio code, which should interest you if you want to get into more general programming or data science.</p>
<p>Alright, so here I have two brand new console projects.</p>
<p>And if you don't know how to make a new console project, neither C sharp or Python or both, be sure to check out the video in the description.</p>
<p>It's called How to install an ID.</p>
<p>And at the end of that video, I'll show you how to do that.</p>
<p>Alright, so the first thing I want to go over is line commenting.</p>
<p>So over in C sharp and left, I'm just going to remove these two lines that come stock with every new C sharp project.</p>
<p>And I'm going to start creating a little fake project.</p>
<p>So I'm going to initialize a couple of floats.</p>
<p>We'll call this location x is going to do one 2.345 F and then we'll do another one float location y and we'll do 123 point 456 All right.</p>
<p>Oh f Sorry.</p>
<p>Alright, so these variables are just going to act as fate coordinates for and lo example.</p>
<p>So I'm gonna create a more involved Boolean, I'm gonna say bull in oops, in position, let's say in pause equals, and let's do location x is greater than, I don't know, let's just say 12.</p>
<p>Right.</p>
<p>And then we'll also check if, if location, y is less than 30, for example.</p>
<p>But then outside of that, we'll also check, or if I'm about to go off screen here, I'll scoot over, or if location, x is greater than location, y, and then we'll put a semicolon.</p>
<p>And now we have a more involved bullying.</p>
<p>Alright, so here, we have maybe one of the greatest examples of how line commenting is pretty useful, or it can be pretty useful.</p>
<p>Rather, I'm going to go on top of our bullying here, and I'm just going to do forward slash forward slash, and that right there, it starts our comment, and we can write whatever we want.</p>
<p>So I'm just going to do my best to explain what this Boolean does.</p>
<p>So if location, x is greater, is greater than 12, and 12.</p>
<p>And location why why is is greater, no less than, less than 30.</p>
<p>Or if location x, x is greater than location, y, y, then we are in position.</p>
<p>Sorry, it's a bit long, and it doesn't exactly fit with the rest of the code.</p>
<p>But that is how you write a line comment.</p>
<p>And the way it works is when your code is compiled, anytime that the compiler sees a double forward slash, it knows to ignore everything after it.</p>
<p>So just pretty much will go to the next line.</p>
<p>And over in Python, it's a lot of the same, I'm just going to do loke oops, loke x equals one 2.345.</p>
<p>And look, y equals one 2.412 3.456.</p>
<p>And then I'm going to do in pause equals, let's see loake x is greater than 12.</p>
<p>And what is the loq? Why is less than 30? Hmm.</p>
<p>Or we have look loq already forgot x is greater than x is greater than look Why? Boy, that was brutal.</p>
<p>And to add our comment, I'm just gonna come over here above our in position variable.</p>
<p>And instead of doing forward slash forward slash, that form of currency is not accepted in Python, I'm going to hit the pound sign or the hashtag, whatever you call it, and then I was going to write out our message.</p>
<p>So I'm not going to write it because that's going to take forever again, I'm going to copy it from here and then paste it.</p>
<p>And there we go.</p>
<p>Comments, and comment.</p>
<p>Sorry, I just realized the Python font should probably be a bit bigger.</p>
<p>So I'm just gonna make that a bit bigger.</p>
<p>Yeah.</p>
<p>So that's one use case for line commenting probably one of the most useful cases for line commenting, however, you can do something else as well.</p>
<p>So let's say that, you know, we try out this Boolean and it just isn't working right for for whatever reason, well, we can do a line comment on everything after the assignment operator, and then just put, like, for example, equals one, just to make sure that oops, we actually need to put my true here, just to make sure that this Boolean is actually working, just for example, and then in Python, it's all the same, use the hash tag, everything after that it's ignored, and you just put true oops, true.</p>
<p>Oops, no semi colon.</p>
<p>And Yep, that's another use case, that can be quite handy as well when debugging your code.</p>
<p>And so the final use case I want to show you with line commenting is let's say that we're going to return these back to that assignment.</p>
<p>And let's come down here.</p>
<p>And then let's add an if statement.</p>
<p>So if in position, right, we want something to happen.</p>
<p>However, we don't exactly know what we want to happen yet.</p>
<p>We have an idea maybe maybe we don't know how to do it.</p>
<p>Maybe you want someone else to do it.</p>
<p>Well, what we can do here is just add a comment.</p>
<p>on like, here, I want to display something, you know, some notification, I don't know, I just want to display something here.</p>
<p>And you can leave this comment here, maybe come back to it later, maybe give it to a friend, maybe do some research and then you know, learn how to do it and then implement it.</p>
<p>This comment is just an easy way for you to, you know, know what your intent was with putting this if statement there.</p>
<p>And in Python, it's really similar, but a little different.</p>
<p>So let's say we do our if statement, if in position, we'll come down here, we can write our comment, which was, again, copy and paste, copy, paste.</p>
<p>However, we can't leave it like this, you see, if we had saved, we will have a problem, which is, we have a parsing error, a syntax error, rather.</p>
<p>And the reason is, because if you do if you do an if statement, and then you indent, which you have to do, there's there's nothing when it runs as if statement, it's not going to run anything.</p>
<p>And that's a syntax error in Python.</p>
<p>So we can just simply put, like print, you know, zero, for instance, just so that it clears that syntax error.</p>
<p>And technically speaking, you don't even have to do a print, for example, you can just do like empty quotes, whoops, you can do like empty quotes.</p>
<p>And that will work just the same, but it has to run something within the indentation.</p>
<p>Because again, this line is ignored.</p>
<p>Alright, so that was line commenting.</p>
<p>Next, I want to talk about block commenting.</p>
<p>So to demonstrate, I'm going to get rid of all this code that we just did.</p>
<p>And then oops, yeah.</p>
<p>And then I'm going to, let's just say that you're creating some like, complex algorithm that you quite understand, but you kind of don't understand.</p>
<p>So I'm just gonna create something, it was just a representation for an advanced algorithm, just use your imagination.</p>
<p>Let's do loq y, divided by equals four, right? And then we need to return it or something like that.</p>
<p>So we'll do local New equals loake y divided by loquax.</p>
<p>For example, oh, I have to initialize that this is not Python floats.</p>
<p>And then finally, let's just return it.</p>
<p>Let's do.</p>
<p>Let's do this console.</p>
<p>Oops, console dot write line.</p>
<p>Right? line, location, new.</p>
<p>All right.</p>
<p>So let's just say this is some advanced algorithm, and you just implement it in your program.</p>
<p>But all of a sudden, like everything's broken, nothing works anymore.</p>
<p>You're like, what's going on? This isn't behavior that I expect, I know that this is working, right.</p>
<p>This is obviously, you know, very straightforward.</p>
<p>But maybe this part of the algorithm isn't working right.</p>
<p>Now, you could, you know, go by and do like, you know, forward slash forward slash forward slash four slash.</p>
<p>And if you have a bunch of these do that line by line.</p>
<p>But one really convenient ways use block coming, which in C sharp is just one forward slash, and then an asterick.</p>
<p>And the after ended doing the opposite, so an Asterix and then one forward slash, and that is one way that you can quickly comment a whole block of code.</p>
<p>Now one really important thing to take note of a block commenting is that you have to have a start, and you have to have an end.</p>
<p>Because if you don't have an end, what happens here is that it comments out everything after it including the brackets.</p>
<p>And if the brackets has a start, but doesn't have an end, you're going to get a bunch of errors.</p>
<p>So they all I always have to have a start, and they always have to have and now in Python, I'm just going to replicate our super advanced algorithm here, I'm going to do loake x times equals two and then loake y divided by equals four.</p>
<p>And then we're going to do loake nu equals loake y divided by loake.</p>
<p>x, then we'll just print it because why not look new.</p>
<p>And to add block commenting in Python, it's similar, but also very different.</p>
<p>And what I mean by that is you want to come up to above or if you want to do your block, comment and just do three single quotes.</p>
<p>And again, it needs a start and he needs a finish.</p>
<p>If you do not have a finish, you are going to get a syntax error, because it needs a start and a finish for the triple quoted string literal, aka the block comment.</p>
<p>Now the very last type of comment that I want to go over is summary commenting.</p>
<p>So to demonstrate, I'm just going to get rid of All this code is no longer needed.</p>
<p>And then I'm just going to initialize a float variables, call it loke equals zero, for example.</p>
<p>Next, let's create a quick little function, I'm going to go outside of our main function and then do static float.</p>
<p>Let's call it ret, one.</p>
<p>And then let's, let's pass in a float, and then we'll call our float a sum, make it easy.</p>
<p>And then what we're going to do is we're going to return a, let's see a plus one.</p>
<p>That's what we're going to return.</p>
<p>And then let's just use it real quick.</p>
<p>So we'll do loke equals rat one, and then we'll just pass in itself.</p>
<p>So it's going to plus one to itself.</p>
<p>And just to prove that we'll do console dot write line, even though it's not about proving in this, it's really about comments, but we'll just do that anyway.</p>
<p>Console dot read key.</p>
<p>And then I will hit the play button.</p>
<p>And boom, there we go.</p>
<p>Zero plus one equals one.</p>
<p>So our function works.</p>
<p>But let's say that you know, it's later down the line in your project, and you come back to the script to upgrade or fix something, you see that Loki goes right one, what does that do, and you go down to the read one function.</p>
<p>And let's say this is a lot more complex, you don't really understand what's going on.</p>
<p>Well, you might waste a lot of time reverse engineering to figure out what that function is.</p>
<p>But what SOT what can solve that is by adding a summary comment.</p>
<p>So adding summary comments in C sharp is actually really easy.</p>
<p>All you have to do is go right above whatever function that you want to add a summary to or method and just hit backslash, backslash backslash, it will autocomplete if you're in Visual Studio, meaning just fill in whatever your your summary is.</p>
<p>So I'm going to do plus one to the input.</p>
<p>Now, if I go over the red one, you'll see that now there's a little description there.</p>
<p>And it tells me exactly where does it pluses, one, two, whatever the input is, the input is Loke.</p>
<p>So it's going to be local plus one is what it's going to return.</p>
<p>Simple, easy, and to the point.</p>
<p>And they also have some other variables that you can fill in, you can fill in like whatever the parameter A is, you can put out what that is for you can put out whatever returns, and in the right context, it will display that information for you as well.</p>
<p>And over in Python, I'm just going to get rid of everything and set up our scenario real quick.</p>
<p>So loke equals zero doing a do def read one, and then we need our a input.</p>
<p>And then let's see return, whoops, return a plus one.</p>
<p>And then we just simply do loke equals what is the right one, and then pass in Loke.</p>
<p>And then we can print low out, and then we don't need a input.</p>
<p>And just to prove that it works, I'm going to hit play up here and you see that we have a one.</p>
<p>Now to add summary comments to Python methods and functions, all you have to do is go right under the method or function in Python, and then hit three single quote characters, and then another one.</p>
<p>So you pretty much block comment.</p>
<p>And then you just type whatever the function is.</p>
<p>I'm just gonna pop copy this because I'm lazy.</p>
<p>And then I'm going to paste it here.</p>
<p>And so now if we go over here, it shows you what it does definition red one, it pluses one to the user, I'm sorry, to the input.</p>
<p>And then we can add more if you want like a equals, you know, float, for instance, just more information for the user.</p>
<p>And that's pretty much all there is to it.</p>
<p>And there you have it, guys, that is pretty much everything you need to know to get started with programming in terms of comedy.</p>
<p>Well, all right, congratulations, you fully made it through the course.</p>
<p>Now, how do you think you did? If you really aren't sure, you should go back to the your first program lesson section four and retry it on a different tier.</p>
<p>If you're able to complete your first program on his hardest difficulty, then you know, you are officially ready to go out into the world to find your own problems to solve and code up your own ideas with your new found skill.</p>
<p>But before I let you go completely, I just want to pump you with some inspiration on the cool possibilities that you can take with this skill from here with more practice of course, but I just want you to think about everything you do these days.</p>
<p>Just think about the fact that almost everything you interact with in this new digital age is some way determined by code online banking, offline banking, text messaging, tweeting, watching this very YouTube video even driving your smart car now or using your smart toothbrush.</p>
<p>Lock your home with your Smart Lock or even using yourself Smart thermometer, the list goes on and on and on.</p>
<p>And of course, From this day on that list is only going to grow larger.</p>
<p>Our world is becoming more and more dependent on programs running the show, which is a whole other conversation.</p>
<p>But again, congrats because you at least now have what it takes to better understand and contribute to that landscape.</p>
<p>I wish you and your coding adventures nothing with the best.</p>
<p>And the last thing I want to leave you with is this bit of advice.</p>
<p>You're guaranteed to do amazing things with code so long as you follow this final rule.</p>
<p>Remember to always feed your curiosity.  </p>


 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ The Model View Controller Pattern – MVC Architecture and Frameworks Explained ]]>
                </title>
                <description>
                    <![CDATA[ The MVC architecture pattern turns complex application development into a much more manageable process. It allows several developers to simultaneously work on the application. When I first learned about MVC patterns, I was intimidated by all the jarg... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/the-model-view-controller-pattern-mvc-architecture-and-frameworks-explained/</link>
                <guid isPermaLink="false">66bae5f5fea3aa95c7620fad</guid>
                
                    <category>
                        <![CDATA[ design patterns ]]>
                    </category>
                
                    <category>
                        <![CDATA[ programing ]]>
                    </category>
                
                    <category>
                        <![CDATA[ software design ]]>
                    </category>
                
                    <category>
                        <![CDATA[ software design patterns ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Rafael D. Hernandez ]]>
                </dc:creator>
                <pubDate>Mon, 19 Apr 2021 14:13:49 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/news/content/images/2021/04/BG.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>The MVC architecture pattern turns complex application development into a much more manageable process. It allows several developers to simultaneously work on the application.</p>
<p>When I first learned about MVC patterns, I was intimidated by all the jargon. And even more so when I started applying these concepts to an actual application.</p>
<p>By taking a step back to focus on what MVC is and what it can accomplish, it's much easier to understand and apply the pattern to any web application.</p>
<h2 id="heading-what-is-mvc">What is MVC?</h2>
<p>MVC stands for model-view-controller. Here's what each of those components mean:</p>
<ul>
<li><strong>Model</strong>: The backend that contains all the data logic</li>
<li><strong>View</strong>: The frontend or graphical user interface (GUI)</li>
<li><strong>Controller</strong>: The brains of the application that controls how data is displayed</li>
</ul>
<p><img src="https://www.freecodecamp.org/news/content/images/2021/04/MVC3.png" alt="Image" width="600" height="400" loading="lazy"></p>
<p>The concept of MVCs was first introduced by Trygve Reenskaug, who proposed it as a way to develop desktop application GUIs.</p>
<p>Today the MVC pattern is used for modern web applications because it allows the application to be scalable, maintainable, and easy to expand.</p>
<h2 id="heading-why-should-you-use-mvc">Why Should You Use MVC?</h2>
<p>Three words: <strong>separation of concerns</strong>, or SoC for short.</p>
<p>The MVC pattern helps you break up the frontend and backend code into separate components. This way, it's much easier to manage and make changes to either side without them interfering with each other. </p>
<p>But this is easier said than done, especially when several developers need to update, modify, or debug a full-blown application simultaneously.</p>
<h2 id="heading-how-to-use-mvc">How to Use MVC</h2>
<p>To better illustrate the MVC pattern, I've included a web application that shows how these concepts all work.</p>
<p>My Car Clicker application is a variation of a well-known Cat Clicker app.</p>
<p>Here are some of the major differences in my app:</p>
<ol>
<li>No cats, <strong>only</strong> muscle cars images (sorry cat lovers!)</li>
<li>Multiple car models are listed</li>
<li>There are multiple click counters</li>
<li>It only displays the selected car</li>
</ol>
<p><img src="https://www.freecodecamp.org/news/content/images/2021/04/Screen-Recording-2021-04-11-at-11.31.27.07-PM.gif" alt="Image" width="600" height="400" loading="lazy"></p>
<p>Now let's dive into these three components that make up the MVC architecture pattern.</p>
<h3 id="heading-model-data">Model (data)</h3>
<p>The model's job is to simply manage the data. Whether the data is from a database, API, or a JSON object, the model is responsible for managing it.</p>
<p>In the Car Clicker application, the model object contains an array of car objects with all the information (data) needed for the app.</p>
<p>It also manages the current car being displayed with a variable that's initially set to <code>null</code>.</p>
<pre><code class="lang-javascript"><span class="hljs-keyword">const</span> model = {
    <span class="hljs-attr">currentCar</span>: <span class="hljs-literal">null</span>,
    <span class="hljs-attr">cars</span>: [
        {
            <span class="hljs-attr">clickCount</span>: <span class="hljs-number">0</span>,
            <span class="hljs-attr">name</span>: <span class="hljs-string">'Coupe Maserati'</span>,
            <span class="hljs-attr">imgSrc</span>: <span class="hljs-string">'img/black-convertible-coupe.jpg'</span>,
        },
        {
            <span class="hljs-attr">clickCount</span>: <span class="hljs-number">0</span>,
            <span class="hljs-attr">name</span>: <span class="hljs-string">'Camaro SS 1LE'</span>,
            <span class="hljs-attr">imgSrc</span>: <span class="hljs-string">'img/chevrolet-camaro.jpg'</span>,
        },
        {
            <span class="hljs-attr">clickCount</span>: <span class="hljs-number">0</span>,
            <span class="hljs-attr">name</span>: <span class="hljs-string">'Dodger Charger 1970'</span>,
            <span class="hljs-attr">imgSrc</span>: <span class="hljs-string">'img/dodge-charger.jpg'</span>,
        },
        {
            <span class="hljs-attr">clickCount</span>: <span class="hljs-number">0</span>,
            <span class="hljs-attr">name</span>: <span class="hljs-string">'Ford Mustang 1966'</span>,
            <span class="hljs-attr">imgSrc</span>: <span class="hljs-string">'img/ford-mustang.jpg'</span>,
        },
        {
            <span class="hljs-attr">clickCount</span>: <span class="hljs-number">0</span>,
            <span class="hljs-attr">name</span>: <span class="hljs-string">'190 SL Roadster 1962'</span>,
            <span class="hljs-attr">imgSrc</span>: <span class="hljs-string">'img/mercedes-benz.jpg'</span>,
        },
    ],
};
</code></pre>
<h3 id="heading-views-ui">Views (UI)</h3>
<p>The view's job is to decide what the user will see on their screen, and how.</p>
<p>The Car Clicker app has two views: <code>carListView</code> and <code>CarView</code>.</p>
<p>Both views have two critical functions that define what each view wants to initialize and render.</p>
<p>These functions are where the app decides what the user will see and how.</p>
<h4 id="heading-carlistview">carListView</h4>
<pre><code class="lang-js"><span class="hljs-keyword">const</span> carListView = {
    init() {
        <span class="hljs-comment">// store the DOM element for easy access later</span>
        <span class="hljs-built_in">this</span>.carListElem = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'car-list'</span>);

        <span class="hljs-comment">// render this view (update the DOM elements with the right values)</span>
        <span class="hljs-built_in">this</span>.render();
    },

    render() {
        <span class="hljs-keyword">let</span> car;
        <span class="hljs-keyword">let</span> elem;
        <span class="hljs-keyword">let</span> i;
        <span class="hljs-comment">// get the cars to be render from the controller</span>
        <span class="hljs-keyword">const</span> cars = controller.getCars();

        <span class="hljs-comment">// to make sure the list is empty before rendering</span>
        <span class="hljs-built_in">this</span>.carListElem.innerHTML = <span class="hljs-string">''</span>;

        <span class="hljs-comment">// loop over the cars array</span>
        <span class="hljs-keyword">for</span>(<span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>; i &lt; cars.length; i++) {
            <span class="hljs-comment">// this is the car we've currently looping over</span>
            car = cars[i];

            <span class="hljs-comment">// make a new car list item and set its text</span>
            elem = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">'li'</span>);
            elem.className = <span class="hljs-string">'list-group-item d-flex justify-content-between lh-condensed'</span>;
            elem.style.cursor = <span class="hljs-string">'pointer'</span>;
            elem.textContent = car.name;
            elem.addEventListener(
                <span class="hljs-string">'click'</span>,
                (<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">carCopy</span>) </span>{
                    <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
                        controller.setCurrentCar(carCopy);
                        carView.render();
                    };
                })(car)
            );
            <span class="hljs-comment">// finally, add the element to the list</span>
            <span class="hljs-built_in">this</span>.carListElem.appendChild(elem);
        }
    },
};
</code></pre>
<h4 id="heading-carview">CarView</h4>
<pre><code class="lang-js"><span class="hljs-keyword">const</span> carView = {
    init() {
        <span class="hljs-comment">// store pointers to the DOM elements for easy access later</span>
        <span class="hljs-built_in">this</span>.carElem = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'car'</span>);
        <span class="hljs-built_in">this</span>.carNameElem = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'car-name'</span>);
        <span class="hljs-built_in">this</span>.carImageElem = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'car-img'</span>);
        <span class="hljs-built_in">this</span>.countElem = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'car-count'</span>);
        <span class="hljs-built_in">this</span>.elCount = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'elCount'</span>);


        <span class="hljs-comment">// on click, increment the current car's counter</span>
        <span class="hljs-built_in">this</span>.carImageElem.addEventListener(<span class="hljs-string">'click'</span>, <span class="hljs-built_in">this</span>.handleClick);

        <span class="hljs-comment">// render this view (update the DOM elements with the right values)</span>
        <span class="hljs-built_in">this</span>.render();
    },

    handleClick() {
        <span class="hljs-keyword">return</span> controller.incrementCounter();
    },

    render() {
        <span class="hljs-comment">// update the DOM elements with values from the current car</span>
        <span class="hljs-keyword">const</span> currentCar = controller.getCurrentCar();
        <span class="hljs-built_in">this</span>.countElem.textContent = currentCar.clickCount;
        <span class="hljs-built_in">this</span>.carNameElem.textContent = currentCar.name;
        <span class="hljs-built_in">this</span>.carImageElem.src = currentCar.imgSrc;
        <span class="hljs-built_in">this</span>.carImageElem.style.cursor = <span class="hljs-string">'pointer'</span>;
    },
};
</code></pre>
<h3 id="heading-controller-brain">Controller (Brain)</h3>
<p>The controller's responsibility is to pull, modify, and provide data to the user. Essentially, the controller is the link between the view and model.</p>
<p>Through getter and setter functions, the controller pulls data from the model and initializes the views.</p>
<p>If there are any updates from the views, it modifies the data with a setter function.</p>
<pre><code class="lang-js"><span class="hljs-keyword">const</span> controller = {
    init() {
        <span class="hljs-comment">// set the current car to the first one in the list</span>
        model.currentCar = model.cars[<span class="hljs-number">0</span>];

        <span class="hljs-comment">// tell the views to initialize</span>
        carListView.init();
        carView.init();
    },

    getCurrentCar() {
        <span class="hljs-keyword">return</span> model.currentCar;
    },

    getCars() {
        <span class="hljs-keyword">return</span> model.cars;
    },

    <span class="hljs-comment">// set the currently selected car to the object that's passed in</span>
    setCurrentCar(car) {
        model.currentCar = car;
    },

    <span class="hljs-comment">// increment the counter for the currently-selected car</span>
    incrementCounter() {
        model.currentCar.clickCount++;
        carView.render();
    },
};

<span class="hljs-comment">// Let's goooo!</span>
controller.init();
</code></pre>
<h2 id="heading-mvc-frameworks">MVC Frameworks</h2>
<p>JavaScript has grown in popularity, and it's taken over the backend in recent years. More and more full-blown JavaScript applications have opted for the MVC architecture pattern in one way or another.</p>
<p>Frameworks come and go, but what has been constant are the concepts borrowed from the MVC architecture pattern.</p>
<p>Some of the early frameworks that applied these concepts were <strong>KnockoutJS</strong>, <strong>Django</strong>, and <strong>Ruby on Rails.</strong></p>
<h2 id="heading-conclusion">Conclusion</h2>
<p>The most attractive concept of the MVC pattern is separation of concerns.</p>
<p>Modern web applications are very complex, and making a change can sometimes be a big headache.</p>
<p>Managing the frontend and backend in smaller, separate components allows for the application to be scalable, maintainable, and easy to expand.</p>
<p><em><strong>If you want to take a look at the Car Clicker app, the code is available on <a target="_blank" href="https://github.com/RafaelDavisH/car-clicker/blob/main/README.md">GitHub</a> or checkout the live version <a target="_blank" href="https://rafaeldavish.github.io/car-clicker/">here</a>.</strong></em> </p>
<p>🌟Thank you for reading this far!🌟</p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ Learn How to Code ]]>
                </title>
                <description>
                    <![CDATA[ Are you a new developer just getting started? Or are you a seasoned developer looking to expand your skill set? Either way, the freeCodeCamp community's got you covered. A lot of the time, learning how to program is not so much a straight line as it ... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/how-to/</link>
                <guid isPermaLink="false">66ac881115af8baa725ed384</guid>
                
                    <category>
                        <![CDATA[ Data Science ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Docker ]]>
                    </category>
                
                    <category>
                        <![CDATA[ how-to ]]>
                    </category>
                
                    <category>
                        <![CDATA[ JavaScript ]]>
                    </category>
                
                    <category>
                        <![CDATA[ programing ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Python ]]>
                    </category>
                
                    <category>
                        <![CDATA[ TypeScript ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Web Design ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Web Development ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Kristofer Koishigawa ]]>
                </dc:creator>
                <pubDate>Wed, 17 Mar 2021 05:55:00 +0000</pubDate>
                <media:content url="https://cdn-media-2.freecodecamp.org/w1280/604f04d028094f59be255cc6.jpg" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>Are you a new developer just getting started? Or are you a seasoned developer looking to expand your skill set?</p>
<p>Either way, the freeCodeCamp community's got you covered.</p>
<p>A lot of the time, learning how to program is not so much a straight line as it is a vast flowchart, with lots of repeated sections and loops:</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2021/03/windows-system-calls.jpg" alt="Image" width="600" height="400" loading="lazy">
<em>A flowchart for system calls in Windows Server Edition (<a target="_blank" href="https://slideplayer.com/slide/11896895/">source</a>)</em></p>
<p>But it doesn't have to be that complicated.</p>
<p>I've gone through our vast catalog of tutorials and created a list of some of the best resources on how to learn pretty much everything you'd need to know as a developer.</p>
<p>The list is loosely organized into different sections and subsections. Feel free to browse the table of contents below and skip around to look for an article on whatever you're trying to learn.</p>
<p>Also, many things on this list require some prerequisite knowledge of another technology. Don't be surprised if you find yourself opening articles from multiple sections.</p>
<p>Finally, this is a living document, and will grow as we publish more helpful articles. Be sure to check back often, and share this with your friends if you find it helpful.</p>
<h2 id="heading-table-of-contents">Table of Contents</h2>
<ul>
<li><a class="post-section-overview" href="#how-to-build-a-website">How to Build a Website</a><ul>
<li><a class="post-section-overview" href="#html">HTML</a></li>
<li><a class="post-section-overview" href="#css">CSS</a></li>
</ul>
</li>
<li><a class="post-section-overview" href="#how-to-learn-programming">How to Learn Programming</a><ul>
<li><a class="post-section-overview" href="#javascript">JavaScript</a></li>
<li><a class="post-section-overview" href="#node-js">Node.js</a></li>
<li><a class="post-section-overview" href="#typescript">TypeScript</a></li>
<li><a class="post-section-overview" href="#deno">Deno</a></li>
<li><a class="post-section-overview" href="#python">Python</a></li>
<li><a class="post-section-overview" href="#java">Java</a></li>
<li><a class="post-section-overview" href="#go-golang-">Go (Golang)</a></li>
<li><a class="post-section-overview" href="#rust">Rust</a></li>
<li><a class="post-section-overview" href="#c">C</a></li>
<li><a class="post-section-overview" href="#c-">C++</a></li>
<li><a class="post-section-overview" href="#c--1">C#</a></li>
</ul>
</li>
<li><a class="post-section-overview" href="#how-to-learn-linux">How to Learn Linux</a></li>
<li><a class="post-section-overview" href="#how-to-learn-git-and-version-control">How to Learn Git and Version Control</a></li>
<li><a class="post-section-overview" href="#how-to-learn-a-frontend-framework-library">How to Learn a Frontend Framework / Library</a><ul>
<li><a class="post-section-overview" href="#react">React</a></li>
<li><a class="post-section-overview" href="#vue">Vue</a></li>
<li><a class="post-section-overview" href="#angular">Angular</a></li>
</ul>
</li>
<li><a class="post-section-overview" href="#how-to-learn-web-basics-and-web-security">How to Learn Web Basics and Web Security</a><ul>
<li><a class="post-section-overview" href="#web-basics">Web Basics</a></li>
<li><a class="post-section-overview" href="#https">HTTPS</a></li>
<li><a class="post-section-overview" href="#cookies">Cookies</a></li>
</ul>
</li>
<li><a class="post-section-overview" href="#how-to-learn-databases">How to Learn Databases</a><ul>
<li><a class="post-section-overview" href="#sql-mysql">SQL / MySQL</a></li>
<li><a class="post-section-overview" href="#mongodb-mongoose-nosql-">MongoDB / Mongoose (NoSQL)</a></li>
<li><a class="post-section-overview" href="#redis-nosql-">Redis (NoSQL)</a></li>
<li><a class="post-section-overview" href="#postgres-postgresql">Postgres / PostgreSQL</a></li>
</ul>
</li>
<li><a class="post-section-overview" href="#how-to-learn-backend-development">How to Learn Backend Development</a><ul>
<li><a class="post-section-overview" href="#express">Express</a></li>
<li><a class="post-section-overview" href="#flask">Flask</a></li>
<li><a class="post-section-overview" href="#django">Django</a></li>
</ul>
</li>
<li><a class="post-section-overview" href="#how-to-learn-static-site-generators">How to Learn Static Site Generators</a><ul>
<li><a class="post-section-overview" href="#gatsby">Gatsby</a></li>
<li><a class="post-section-overview" href="#next-js">Next.js</a></li>
<li><a class="post-section-overview" href="#hugo">Hugo</a></li>
<li><a class="post-section-overview" href="#nuxt-js">Nuxt.js</a></li>
<li><a target="_blank" href="vuepress">Vuepress</a></li>
</ul>
</li>
<li><a class="post-section-overview" href="#how-to-learn-bundlers-compilers-dependency-managers-task-runners-formatters-and-linters">How to Learn Bundlers, Compilers, Dependency Managers, Task Runners, Formatters, and Linters</a><ul>
<li><a class="post-section-overview" href="#webpack-and-babel">Webpack and Babel</a></li>
<li><a class="post-section-overview" href="#eslint-and-prettier">ESLint and Prettier</a></li>
<li><a class="post-section-overview" href="#parcel">Parcel</a></li>
<li><a class="post-section-overview" href="#gulp">Gulp</a></li>
<li><a class="post-section-overview" href="#npm-scripts">npm Scripts</a></li>
</ul>
</li>
<li><a class="post-section-overview" href="#how-to-learn-mobile-application-development">How to Learn Mobile Application Development</a><ul>
<li><a class="post-section-overview" href="#react-native">React Native</a></li>
<li><a class="post-section-overview" href="#ionic">Ionic</a></li>
<li><a class="post-section-overview" href="#flutter">Flutter</a></li>
</ul>
</li>
<li><a class="post-section-overview" href="#how-to-learn-desktop-application-development">How to Learn Desktop Application Development</a><ul>
<li><a class="post-section-overview" href="#electron">Electron</a></li>
<li><a class="post-section-overview" href="#proton-native">Proton Native</a></li>
</ul>
</li>
<li><a class="post-section-overview" href="#how-to-learn-data-science-and-machine-learning">How to Learn Data Science and Machine Learning</a><ul>
<li><a class="post-section-overview" href="#general-machine-learning">General Machine Learning</a></li>
<li><a class="post-section-overview" href="#pandas">Pandas</a></li>
<li><a class="post-section-overview" href="#numpy">Numpy</a></li>
<li><a class="post-section-overview" href="#scikit-learn">Scikit-Learn</a></li>
<li><a class="post-section-overview" href="#seaborn">Seaborn</a></li>
<li><a class="post-section-overview" href="#matplotlib">Matplotlib</a></li>
<li><a class="post-section-overview" href="#tensorflow">TensorFlow</a></li>
<li><a class="post-section-overview" href="#pytorch">PyTorch</a></li>
<li><a class="post-section-overview" href="#keras">Keras</a></li>
</ul>
</li>
<li><a class="post-section-overview" href="#how-to-learn-virtualization-and-containerization">How to Learn Virtualization and Containerization</a><ul>
<li><a class="post-section-overview" href="#virtual-machines">Virtual Machines</a></li>
<li><a class="post-section-overview" href="#docker">Docker</a></li>
<li><a class="post-section-overview" href="#kubernetes">Kubernetes</a></li>
</ul>
</li>
<li><a class="post-section-overview" href="#how-to-learn-cloud-computing">How to Learn Cloud Computing</a><ul>
<li><a class="post-section-overview" href="#amazon-web-services-aws-">Amazon Web Services (AWS)</a></li>
<li><a class="post-section-overview" href="#google-cloud-platform-gcp-">Google Cloud Platform (GCP)</a></li>
<li><a class="post-section-overview" href="#microsoft-azure">Microsoft Azure</a></li>
</ul>
</li>
<li><a class="post-section-overview" href="#how-to-learn-devops">How to Learn DevOps</a><ul>
<li><a class="post-section-overview" href="#general-devops">General DevOps</a></li>
<li><a class="post-section-overview" href="#travis-ci">Travis CI</a></li>
<li><a class="post-section-overview" href="#jenkins">Jenkins</a></li>
<li><a class="post-section-overview" href="#gocd">GoCD</a></li>
<li><a class="post-section-overview" href="#ansible">Ansible</a></li>
<li><a class="post-section-overview" href="#chef">Chef</a></li>
<li><a class="post-section-overview" href="#kafka">Kafka</a></li>
<li><a class="post-section-overview" href="#terraform">Terraform</a></li>
</ul>
</li>
</ul>
<h2 id="heading-how-to-build-a-website">How to Build a Website</h2>
<p>To build a basic website, all you really need are HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets). HTML provides the content and structure of the site, and CSS is used to style it.</p>
<p>Here are some of the best resources on HTML and CSS. Once you're familiar with these technologies, move on to the next section and learn JavaScript to make your web sites more interactive.</p>
<h3 id="heading-html">HTML</h3>
<ul>
<li><a target="_blank" href="https://www.freecodecamp.org/news/html-basics-for-beginners/">Learn HTML Basics for Beginners in Just 15 Minutes</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-make-html-hyperlinks-using-the-href-attribute-on-tags/">How to Make HTML Hyperlinks Using the HREF Attribute on Tags</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-use-html-to-open-link-in-new-tab/">How to Use HTML to Open a Link in a New Tab</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/html-link-code-how-to-insert-a-link-to-a-website-with-href-3/">HTML Link Code – How to Insert a Link to a Website with HREF</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/html-entities-symbols-special-character-codes-list/">HTML Entities – A List of HTML Space and other HTML Symbols and Special Character Codes</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/dark-mode-in-html-email-everything-you-need-to-know/">How to Enable Dark Mode in HTML Email – Everything You Need to Know</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/make-it-blink-html-tutorial-how-to-use-the-blink-tag-with-code-examples/">Make It Blink HTML Tutorial – How to Use the Blink Tag, with Code Examples</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/html-full-course-for-beginners/">HTML Basics: A Free Full-Length Course</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/the-html-handbook/">The HTML Handbook</a></li>
</ul>
<h3 id="heading-css">CSS</h3>
<ul>
<li><a target="_blank" href="https://www.freecodecamp.org/news/css-font-size-tutorial-how-to-change-text-size-in-html/">CSS Font Size Tutorial – How to Change Text Size in HTML</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/html-background-color-tutorial-how-to-change-a-div-background-color-explained-with-code-examples/">HTML Background Color Tutorial – How to Change a Div Background Color, Explained with Code Examples</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/inline-css-guide-how-to-style-an-html-tag-directly/">Inline CSS Guide – How to Style an HTML Tag Directly</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/html-center-text-how-to-css-vertical-align-a-div/">HTML Center Text – How to CSS Vertical Align a Div</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-center-anything-with-css-align-a-div-text-and-more/">How to Center Anything with CSS - Align a Div, Text, and More</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/html-page-width-height/">HTML vs Body: How to Set Width and Height for Full Page Size</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/css-tutorial-drop-shadow/">Box Shadow CSS Tutorial – How to Add a Drop Shadow to Any HTML Element</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/css-positioning-and-flexbox-explained/">How CSS Positioning and Flexbox Work – Explained with Examples</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/flexbox-the-ultimate-css-flex-cheatsheet/">Flexbox - The Ultimate CSS Flex Cheatsheet (with animated diagrams!)</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/intro-to-css-grid-layout/">An Introduction to CSS Grid Layout (with Examples)</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/learn-css-grid-by-building-5-layouts/">Learn CSS Grid by Building 5 Layouts in 17 minutes</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/css-grid-changes-how-we-can-think-about-structuring-our-content/">How CSS Grid Changes the Way We Think About Structuring Our Content</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/flexbox-vs-grid-how-to-build-the-most-common-html-layouts/">Flexbox vs Grid - How to Build the Most Common HTML Layouts</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/learn-css-in-this-free-6-hour-video-course/">Learn CSS in this free 6-hour video course</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/the-css-handbook-a-handy-guide-to-css-for-developers-b56695917d11/">The CSS Handbook: A Handy Guide to CSS for Developers</a></li>
</ul>
<h3 id="heading-how-to-learn-programming">How to Learn Programming</h3>
<p>In essence, programming is how humans tell computers what to do. Whether it's a laptop, a smartphone, or a browser, programming and programming languages give us a way to interact with those devices.</p>
<p>In this section, you'll learn the fundamentals of programming and the basics of some of the most popular programming languages today.</p>
<p>If you want to learn frontend and backend development, definitely learn JavaScript and Node.js. And once you're familiar with those, look into TypeScript.</p>
<p>If you're more interested in data science and machine learning, learn Python. For mobile apps, it helps to know Java. Game development? C++, C#, or even Java.</p>
<p>We've got a bit of everything, including newer programming languages like Go.</p>
<h3 id="heading-javascript">JavaScript</h3>
<ul>
<li><a target="_blank" href="https://www.freecodecamp.org/news/javascript-variables-beginners-guide/">JavaScript Variables – A Beginner's Guide to var, const, and let</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/javascript-split-string-example/">JavaScript Split String Example – How to Split a String into an Array in JS</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/javascript-typeof-how-to-check-the-type-of-a-variable-or-object-in-js/">JavaScript TypeOf – How to Check the Type of a Variable or Object in JS</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/check-if-javascript-array-is-empty-or-not-with-length/">How to Check if a JavaScript Array is Empty or Not with .length</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/javascript-loop-tutorial-how-to-iterate-over-an-array-in-javascript/">JS For Loop Tutorial – How to Iterate Over an Array in JavaScript</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/javascript-array-sort-tutorial-how-to-use-js-sort-methods-with-code-examples/">JavaScript Array Sort – How to Use JS Sort Methods (With Code Examples)</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/javascript-array-reverse-tutorial-with-example-js-code/">JavaScript Reverse Array – Tutorial With Example JS Code</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/javascript-foreach-how-to-loop-through-an-array-in-js/">JavaScript forEach – How to Loop Through an Array in JS</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/javascript-array-slice-vs-splice-whats-the-difference/">JavaScript Array Slice vs Splice: the Difference Explained with Cake</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/javascript-object-keys-tutorial-how-to-use-a-js-key-value-pair/">JavaScript Object Keys Tutorial – How to Use a JS Key-Value Pair</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/javascript-create-object-how-to-define-objects-in-js/">JavaScript Create Object  –  How to Define Objects in JS</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-javascript-implements-oop/">Object Oriented Programming in JavaScript – Explained with Examples</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/javascript-this-keyword-binding-rules/">The JavaScript <code>this</code> Keyword + 5 Key Binding Rules Explained for JS Beginners</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/a-beginners-guide-to-javascripts-prototype/">A Beginner’s Guide to JavaScript’s Prototype</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/javascript-date-now-how-to-get-the-current-date-in-javascript/">JavaScript Date Now – How to Get the Current Date in JavaScript</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/the-ultimate-guide-to-javascript-date-and-moment-js/">The Ultimate Guide to JavaScript Date and Moment.js</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/javascript-array-reverse-tutorial-with-example-js-code/">What is Functional Programming? A Beginner's JavaScript Guide</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/learn-javascript-full-course/">Learn JavaScript - Full 134-Part Course for Beginners</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/data-structures-and-algorithms-in-javascript/">Data Structures and Algorithms in JavaScript - Full Course for Beginners</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/sparse-and-dense-arrays-in-javascript/">Sparse Arrays vs Dense Arrays in JavaScript — Explained with Examples</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/javascript-regex-match-example-how-to-use-the-js-replace-method-on-a-string/">JavaScript Regex Match Example – How to Use JS Replace on a String</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/a-quick-and-simple-guide-to-javascript-regular-expressions-48b46a68df29/">A Quick and Simple Guide to JavaScript Regular Expressions</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/javascript-keycode-list-keypress-event-key-codes/">JavaScript Keycode List – Keypress Event Key Codes for Enter, Space, Backspace, and More</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/javascript-object-destructuring-spread-operator-rest-parameter/">JavaScript Object Destructuring, Spread Syntax, and the Rest Parameter – A Practical Guide</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/nullish-coalescing-operator-in-javascript/">How the Nullish Coalescing Operator Works in JavaScript</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/try-catch-in-javascript/">Try/Catch in JavaScript – How to Handle Errors in JS</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/async-await-in-javascript/">How to Use Async/Await in JavaScript with Example JS Code</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-the-question-mark-works-in-javascript/">How the Question Mark (?) Operator Works in JavaScript</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/ternary-operator-javascript-if-statement-tutorial/">Ternary Operator JavaScript If Statement Tutorial</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/javascript-debounce-example/">Debounce – How to Delay a Function in JavaScript (JS ES6 Example)</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/find-the-number-of-vowels-in-a-string-with-javascript/">How to Find the Number of Vowels in a String with JavaScript</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/form-validation-with-html5-and-javascript/">Data Validation – How to Check User Input on HTML Forms with Example JavaScript Code</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/what-is-recursion-in-javascript/">What is Recursion? A Recursive Function Explained with JavaScript Code Examples</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/javascript-skills-you-need-for-react-practical-examples/">The JavaScript Skills You Need For React (+ Practical Examples)</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/higher-order-functions-in-javascript-examples/">Higher Order Functions in JavaScript – Reach New Heights in Your JS Code</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/node-module-exports-explained-with-javascript-export-function-examples/">Node Module Exports Explained – With JavaScript Export Function Examples</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-make-a-landing-page-using-html-scss-and-javascript/">How to Make a Landing Page using HTML, SCSS, and JavaScript</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/build-and-validate-beautiful-forms-with-vanilla-html-css-js/">How to Build and Validate Beautiful Forms with Vanilla HTML, CSS, &amp; JS</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-build-a-responsive-and-dynamic-progress-bar/">How to Build a Responsive and Dynamic Progress Bar with HTML, CSS, and JavaScript</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/the-complete-javascript-handbook-f26b2c71719c/">The JavaScript Beginner's Handbook</a></li>
</ul>
<h3 id="heading-nodejs">Node.js</h3>
<ul>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-install-node-js-and-npm-on-windows/">How to Install Node.js and npm on Windows</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-install-node-js-on-ubuntu-and-update-npm-to-the-latest-version/">How to Install Node.js on Ubuntu and Update npm to the Latest Version</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/node-module-exports-explained-with-javascript-export-function-examples/">Node Module Exports Explained – With JavaScript Export Function Examples</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/npm-cheat-sheet-most-common-commands-and-nvm/">npm Cheat Sheet - Most Common Commands and nvm</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/what-is-npm-a-node-package-manager-tutorial-for-beginners/">What is npm? A Node Package Manager Tutorial for Beginners</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-ignore-files-from-your-npm-package-4724e6d9575d/">How to Ignore Files from Your npm Package</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-publish-packages-to-npm-the-way-the-industry-does-things-2077ec34d7e8/">How to Publish Packages to npm (the Way the Industry Does Things)</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-make-a-beautiful-tiny-npm-package-and-publish-it-2881d4307f78/">How to Make a Beautiful, Tiny npm Package and Publish It</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-force-use-yarn-or-npm/">How to Force Use Yarn or NPM</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-enable-es6-and-beyond-syntax-with-node-and-express-68d3e11fe1ab/">How to enable ES6 (and beyond) syntax with Node and Express</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/automate-simple-tasks-with-nodejs/">How to Automate Simple Tasks with Node.js</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/node-js-production-checklist/">The Ultimate Node.js Production Checklist</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/get-started-with-graphql-and-nodejs/">How to Get Started with GraphQL and Node.js</a></li>
</ul>
<h3 id="heading-typescript">TypeScript</h3>
<ul>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-install-and-begin-using-typescript/">How to Install and Start Using TypeScript</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-add-typescript-to-a-javascript-project/">How to Add TypeScript to a JavaScript Project</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/learn-typescript-data-types-from-zero-to-hero/">Learn TypeScript Data Types – From Zero to Hero</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/all-about-typescript-static-members-typescript-oop/">All about TypeScript Static Members | TypeScript OOP</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/typescript-javascript-getters-and-setters-are-they-useless/">No, Getters and Setters in TypeScript &amp; JavaScript Aren't Useless</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/a-crash-course-in-typescript-e6bf9c10946/">A Crash Course in TypeScript</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/a-mental-model-to-think-in-typescript-2/">TypeScript Types Explained – A Mental Model to Help You Think in Types</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/react-typescript-how-to-set-up-types-on-hooks/">The React TypeScript Cheatsheet – How To Set Up Types on Hooks</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/make-typescript-easy-using-basic-ts-generics/">How TypeScript Generics Help You Write Less Code</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/ux-studies-with-react-typescript-and-testing-library/">How to Create a Great User Experience with React, TypeScript, and the React Testing Library</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/advanced-typescript-types-cheat-sheet-with-examples/">Advanced TypeScript Types Cheat Sheet (with Examples)</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/a-practical-guide-to-typescript-how-to-build-a-pokedex-app-using-html-css-and-typescript/">A Practical Guide to TypeScript - How to Build a Pokedex App Using HTML, CSS, and TypeScript</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-build-a-todo-app-with-react-typescript-nodejs-and-mongodb/">How to Build a Todo App with React, TypeScript, NodeJS, and MongoDB</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-build-a-rocketchat-bot-with-typescript/">How to Build a RocketChat Chatbot with TypeScript</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/the-definitive-typescript-handbook/">The Definitive TypeScript Handbook</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/learn-typescript-with-this-crash-course/">Learn TypeScript With This Crash Course</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-build-a-quiz-app-using-react-and-typescript/">How to Build a Quiz App Using React and TypeScript</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/build-a-shopping-cart-with-react-and-typescript/">Build a Shopping Cart with React and TypeScript</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/typescript-in-react/">How to Use Typescript in React</a></li>
</ul>
<h3 id="heading-deno">Deno</h3>
<ul>
<li><a target="_blank" href="https://www.freecodecamp.org/news/learn-deno-a-node-js-alternative/">Learn Deno, a Node.js Alternative</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/build-react-app-using-deno-and-alephjs/">How to Build React Applications with Deno Using the AlephJS Library</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/build-a-url-shortener-in-deno/">How to Build a URL Shortener in Deno</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/create-a-todo-api-in-deno-written-by-a-guy-coming-from-node/">How to Create a Todo API in Deno and Oak</a></li>
<li>T<a target="_blank" href="https://www.freecodecamp.org/news/the-deno-handbook/">he Deno Handbook: A TypeScript Runtime Tutorial with Code Examples</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/securing-node-js-restful-apis-with-json-web-tokens-9f811a92bb52/">Securing Node.js RESTful APIs with JSON Web Tokens</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/getting-started-with-node-js/">Learn Node.js and Start Executing JavaScript Outside of the Browser</a></li>
</ul>
<h3 id="heading-python">Python</h3>
<ul>
<li><a target="_blank" href="https://www.freecodecamp.org/news/hello-world-programming-tutorial-for-python/">Hello World Programming Tutorial for Python</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/python-while-loop-tutorial/">Python While Loop Tutorial – While True Syntax Examples and Infinite Loops</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/python-new-line-and-how-to-python-print-without-a-newline/">Python New Line and How to Python Print Without a Newline</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/python-dictionaries-detailed-visual-introduction/">Python Dictionaries 101: A Detailed Visual Introduction</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/python-sets-detailed-visual-introduction/">Python Sets: A Detailed Visual Introduction</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/python-read-json-file-how-to-load-json-from-a-file-and-parse-dumps/">Python Read JSON File – How to Load JSON from a File and Parse Dumps</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/python-list-files-in-a-directory-guide-listdir-vs-system-ls-explained-with-examples/">Python List Files in a Directory Guide - listdir VS system("ls") Explained with Examples</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/python-write-to-file-open-read-append-and-other-file-handling-functions-explained/">Python Write to File – Open, Read, Append, and Other File Handling Functions Explained</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/python-empty-list-tutorial-how-to-create-an-empty-list-in-python/">Python Empty List Tutorial – How to Create an Empty List in Python</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/python-list-append-how-to-add-an-element-to-an-array-explained-with-examples/">Python List Append – How to Add an Element to an Array, Explained with Examples</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/python-list-append-vs-python-list-extend/">Python List Append VS Python List Extend – The Difference Explained with Array Method Examples</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/the-python-sort-list-array-method-ascending-and-descending-explained-with-examples/">The Python Sort List Array Method – Ascending and Descending Explained with Examples</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/python-unique-list-how-to-get-all-the-unique-values-in-a-list-or-array/">Python Unique List – How to Get all the Unique Values in a List or Array</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/truthy-and-falsy-values-in-python/">Truthy and Falsy Values in Python: A Detailed Introduction</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/the-python-modulo-operator-what-does-the-symbol-mean-in-python-solved/">The Python Modulo Operator - What Does the % Symbol Mean in Python? (Solved)</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/python-datetime-module/">Python's datetime Module – How to Handle Dates in Python</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/exception-handling-python/">How to Handle Exceptions in Python: A Detailed Visual Introduction</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/python-property-decorator/">The @property Decorator in Python: Its Use Cases, Advantages, and Syntax</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/the-python-sleep-function-how-to-make-python-wait-a-few-seconds-before-continuing-with-example-commands/">The Python Sleep Function – How to Make Python Wait A Few Seconds Before Continuing, With Example Commands</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/mutable-vs-immutable-objects-python/">Mutable vs Immutable Objects in Python – A Visual and Hands-On Guide</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/build-your-first-python-package/">How to Build Your Very First Python Package</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/python-dictionary-guide/">Python Dictionary Guide – How to Iterate Over, Copy, and Merge Dictionaries in Python 3.9</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/binary-search-in-python-visual-introduction/">Binary Search in Python: A Visual Introduction</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/multithreaded-python/">Multithreaded Python: Slithering Through an I/O Bottleneck?</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-set-up-python-virtual-environment-on-ubuntu-20-04/">How to Set Up a Python Virtual Environment on Ubuntu 20.04</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/virtualenv-with-virtualenvwrapper-on-ubuntu-18-04/">How to Set Up Virtualenv with Virtualenvwrapper on Ubuntu 18.04</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/installing-multiple-python-versions-on-windows-using-virtualenv/">Installing Multiple Python Versions on Windows Using Virtualenv</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/intermediate-python-course/">Take Your Python Skills to the Next Level With This Free 6-Hour Video Course</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/the-python-handbook/">The Python Handbook</a></li>
</ul>
<h3 id="heading-java">Java</h3>
<ul>
<li><a target="_blank" href="https://www.freecodecamp.org/news/java-string-to-int-how-to-convert-a-string-to-an-integer/">Java String to Int – How to Convert a String to an Integer</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/java-list-tutorial-util-list-api-example/">Java List Methods Tutorial – Util List API Example</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/java-array-methods-how-to-print-an-array-in-java/">Java Array Methods – How to Print an Array in Java</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/utilizing-javas-arrays-sort-for-any-list-of-objects-e3e2db61d70b/">Using Java’s Arrays.sort() for any List of Objects</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-handle-nullpointerexception-in-java/">How to Handle NullPointerException in Java</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/priority-queue-implementation-in-java/">Priority Queues in Java Explained with Examples</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/java-object-oriented-programming-system-principles-oops-concepts-for-beginners/">Object-Oriented Programming Principles  in Java:  OOP Concepts for Beginners</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/polymorphism-in-java-tutorial-with-object-oriented-programming-example-code/">Polymorphism in Java Tutorial – With Object Oriented Programming Example Code</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/functional-programming-in-java-course/">Learn Functional Programming in Java - Full Course</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-get-started-with-multithreading-in-java/">Multithreading in Java: How to Get Started with Threads</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/generate-random-numbers-java/">Java Random Number Generator – How to Generate Integers With Math Random</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/garbage-collection-in-java-what-is-gc-and-how-it-works-in-the-jvm/">Garbage Collection in Java – What is GC and How it Works in the JVM</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/jvm-tutorial-java-virtual-machine-architecture-explained-for-beginners/">JVM Tutorial - Java Virtual Machine Architecture Explained for Beginners</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/java-android-app-using-rest-api-network-data-in-android-course/">Build a Java Android App Using a REST API - Network Data in Android Course</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-setup-jwt-authorization-and-authentication-in-spring/">How to Set Up Java Spring Boot JWT Authorization and Authentication</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/jvm-tutorial-java-virtual-machine-architecture-explained-for-beginners/">JVM Tutorial - Java Virtual Machine Architecture Explained for Beginners</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/use-spring-boot-and-java-to-create-a-rest-api-tutorial/">Use Spring Boot and Java to Create a Rest API (Tutorial)</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/build-a-sudoku-java-desktop-application/">How to Build a Sudoku Game Java Desktop Application – A Free 2-hour Course</a></li>
</ul>
<h3 id="heading-go-golang">Go (Golang)</h3>
<ul>
<li><a target="_blank" href="https://www.freecodecamp.org/news/go-golang-programming-language/">Go (Golang) Programming Language</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/learning-go-from-zero-to-hero-d2a3223b3d86/">Learning Go — From Zero to Hero</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/go-automate-your-github-profile-readme/">How to Automate Your GitHub Profile README</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/build-your-own-serverless-subscriber-list-with-go-and-aws/">How to Build Your Own Serverless Subscriber List with Go and AWS</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-validate-ssl-certificates-in-go/">How to Validate SSL Certificates in Go</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/design-a-key-value-store-in-go/">How to Design a Transactional Key-value Store in Go</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-i-built-a-web-server-using-go-and-on-chromeos-3b83e4c2da5f/">How I built a Web Server Using Go — and On ChromeOS</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/grpc-server-side-streaming-with-go/">How to Set Up gRPC Server-Side Streaming with Go</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-i-set-up-a-real-world-project-with-go-and-vue/">How to Set Up a Real-World Project with Go and Vue</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/go-elasticsearch/">How to Implement Elasticsearch in Go</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/reading-challenge-heap-sort-in-go/">How to Implement Heap-Sort in the Go Standard Library</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/go-golang-course/">Learn the Fast and Simple Go Programming Language (Golang) in 7 Hours</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/learn-go-in-this-crash-course/">Learn Go in This Crash Course</a></li>
</ul>
<h3 id="heading-rust">Rust</h3>
<ul>
<li><a target="_blank" href="https://www.freecodecamp.org/news/rust-getting-started-with-the-most-loved-programming-language/">Rust for Beginners – Get Started with the Most Loved Programming Language</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/learn-rust-with-github-actions/">How to Learn Rust Without Installing Any Software</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-build-a-to-do-app-with-rust/">Rust Programming Language Tutorial – How to Build a To-Do List App</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/building-powerful-graphql-servers-with-rust/">How to Build Powerful GraphQL Servers with Rust</a></li>
</ul>
<h3 id="heading-c">C</h3>
<ul>
<li><a target="_blank" href="https://www.freecodecamp.org/news/boost-programming-skills-read-git-code/">Boost Your Programming Skills by Reading Git's Code</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/format-specifiers-in-c/">Format Specifiers in C</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/file-handling-in-c-how-to-open-close-and-write-to-files/">File Handling in C — How to Open, Close, and Write to Files</a></li>
</ul>
<h3 id="heading-c-1">C++</h3>
<ul>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-classes-work-in-cplusplus/">How Classes Work in C++</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/do-while-loops-in-c-plus-plus-example-loop-syntax/">Do While Loops in C++ with Example Loop Syntax</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-overload-operators-in-cplusplus/">How to Overload Operators in C++</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/c-plus-plus-map-explained-with-examples/">C++ Map Explained with Examples</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-write-clean-code-in-c/">How to Write Clean Code in C++</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-compile-your-c-code-in-visual-studio-code/">How to Compile Your C++ Code in Visual Studio Code</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/learn-object-oriented-programming-oop-in-c-full-video-course/">Learn Object Oriented Programming (OOP) in C++ | Full Video Course</a></li>
</ul>
<h3 id="heading-c-2">C</h3>
<ul>
<li><a target="_blank" href="https://www.freecodecamp.org/news/csharp/">C# Programming: An Intro for Beginners</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/c-basics-your-first-c-program-types-and-variables-and-flow-control-statements/">C# Basics - Your First C# Program, Types and Variables, and Flow Control Statements</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/is-the-c-internal-keyword-a-code-smell/">Is the C# Internal Keyword a Code Smell?</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-build-an-spa-with-vuejs-and-c-using-net-core/">How to Build an SPA with Vue.js and C# Using .NET Core</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/learn-c-and-unity-by-making-digital-tabletop-games/">Learn C# and Unity by Making Digital Tabletop Games</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/c-sharp-24-hour-course/">Create a C# Application from Start to Finish - Complete 24-Hour Course</a></li>
</ul>
<h2 id="heading-how-to-learn-linux">How to Learn Linux</h2>
<p>Whether you know it or not, you probably use Linux every day. Android is based on Linux, and macOS, which is based on Unix just like Linux, is a close cousin. And an estimated <a target="_blank" href="https://w3techs.com/technologies/overview/operating_system">74.2%</a> (as of March, 2021) of all web servers run on Unix, the vast majority of which are probably Linux.</p>
<p>In short, if you work on the web, you should get comfortable with Linux and its default shell, Bash. And here are some of our best tutorials to get started:</p>
<ul>
<li><a target="_blank" href="https://www.freecodecamp.org/news/basic-linux-commands-bash-tips-you-should-know/">Linux Commands - Basic Bash Command Line Tips You Should Know</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/the-cat-command-in-linux-concatenation-explained-with-bash-examples/">The Cat Command in Linux – Concatenation Explained with Bash Examples</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/the-cat-command-in-linux-how-to-create-a-text-file-with-cat-or-touch/">The Cat Command in Linux – How to Create a Text File with Cat or Touch</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/grep-command-tutorial-how-to-search-for-a-file-in-linux-and-unix/">Grep Command Tutorial – How to Search for a File in Linux and Unix with Recursive Find</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/linux-how-to-add-users-and-create-users-with-useradd/">Linux: How to Add Users and Create Users with useradd</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/linux-user-groups-explained-how-to-add-a-new-group-a-new-group-member-and-change-groups/">Linux User Groups Explained: How to Add a New Group, a New Group Member, and Change Groups</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/the-linux-ls-command-how-to-list-files-in-a-directory-with-options/">The Linux LS Command – How to List Files in a Directory + Option Flags</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/tar-in-linux-example-tar-gz-tar-file-and-tar-directory-and-tar-compress-commands/">Tar in Linux – Tar GZ, Tar File, Tar Directory, and Tar Compress Command Examples</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/tar-command-linux-tar-cvf-tar-xvf/">The Tar Command in Linux: Tar CVF and Tar XVF Explained with Example Commands</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/symlink-tutorial-in-linux-how-to-create-and-remove-a-symbolic-link/">Symlink Tutorial in Linux – How to Create and Remove a Symbolic Link</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/linux-package-management-with-snaps/">Linux Package Management with Snaps</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/build-your-own-dotfiles-manager-from-scratch/">How to Build Your Own Linux Dotfiles Manager from Scratch</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/linux-for-ethical-hackers-course/">Learn the Basics of Linux and How It Can Be Used by Ethical Hackers</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/linux-server-course-system-configuration-and-operation/">How to Configure and Operate Linux Servers - Full Course</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/the-linux-commands-handbook/">The Linux Command Handbook</a></li>
</ul>
<h2 id="heading-how-to-learn-git-and-version-control">How to Learn Git and Version Control</h2>
<p>Once your programs start growing in size and complexity, you'll want a way to track your changes in case you need to roll back to an earlier version.</p>
<p>Git lets you do just that, and is the most popular version control software in use today. If you want to collaborate with other developers and get a job in the industry, it's important to know how Git works.</p>
<p>Some of our best articles on Git are listed below. Also, when you use Git it'll probably be through the command line, so make sure you know some basic Linux / Bash before diving in. </p>
<ul>
<li><a target="_blank" href="https://www.freecodecamp.org/news/what-is-git-learn-git-version-control/">What is Git? A Beginner's Guide to Git Version Control</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/learn-git-and-version-control-in-an-hour/">Learn Git and Version Control in an Hour</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/git-and-github-overview/">Git vs GitHub – What is Version Control and How Does it Work?</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/what-is-github-what-is-git-and-how-to-use-these-developer-tools/">What is GitHub? What is Git? And How to Use These Developer Tools</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/5-git-commands-you-should-know-with-code-examples/">Git Commands You Should Know, with Code Examples</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/git-cheat-sheet/">Git Cheat Sheet – 50 Git Commands You Should Know</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/git-reset-to-remote-head-how-to-reset-a-remote-branch-to-origin/">Git Reset to Remote Head – How to Reset a Remote Branch to Origin</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/git-checkout-remote-branch-tutorial/">Git Checkout Remote Branch Tutorial</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-use-branches-in-git/">How to Use Branches in Git – the Ultimate Cheatsheet</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/a-beginners-guide-to-git-how-to-write-a-good-commit-message/">A Beginner’s Guide to Git — How to Write a Good Commit Message</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/writing-good-commit-messages-a-practical-guide/">How to Write Good Commit Messages: A Practical Git Guide</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/a-beginners-guide-to-git-what-is-a-changelog-and-how-to-generate-it/">A Beginner’s Guide to Git — What is a Changelog and How to Generate it</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/git-ssh-how-to/">How to Get and Configure Your Git and GitHub SSH Keys</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-handle-multiple-git-configurations-in-one-machine/">How to Use Multiple Git Configs on One Computer</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-handle-merge-conflicts-in-git/">How to Understand and Solve Conflicts in Git</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-undo-mistakes-with-git/">How to Undo Mistakes with Git</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-use-git-aliases/">How to Use Git Aliases to Increase Your Productivity</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/save-the-day-with-git-reset/">Git Reset Explained – How to Save the Day with the Reset Command</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/7-git-commands-you-might-not-know/">Git Secrets: 7 Commands You Might Not Know</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-uncommit-sensitive-files-from-git/">How to Uncommit Sensitive Files from Git</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/git-pull-force-how-to-overwrite-local-changes-with-git/">Git Pull Force – How to Overwrite Local Changes With Git</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/git-clone-branch-how-to-clone-a-specific-branch/">Git Clone Branch – How to Clone a Specific Branch</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-switch-between-issues-in-git/">How to Switch Between Issues in Your Local Git Repository</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-sync-your-fork-with-the-original-git-repository/">How to Sync Your Fork with the Original Git Repository</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/git-and-github-crash-course/">Git and GitHub Crash Course</a></li>
</ul>
<h2 id="heading-how-to-learn-a-frontend-framework-library">How to Learn a Frontend Framework / Library</h2>
<p>Once you know how to build basic websites with HTML, CSS, and JavaScript, level up your skills by learning a frontend framework / library. Of these, the three most popular are React, Vue, and Angular.</p>
<p>Angular is considered a framework because it includes a lot of things like routing out of the box. </p>
<p>React, on the other hand, is usually referred to as a library because it doesn't come with a lot by default. Instead, you'll need to add some extra packages to handle routing and other things. </p>
<p>Vue falls somewhere in the middle in terms of functionality and weight.</p>
<p>Whatever you call them, each has its own strengths and weaknesses. There is no best framework / library – just choose one that seems the most interesting, or that companies in your area are hiring for, and go from there.</p>
<h3 id="heading-react">React</h3>
<ul>
<li><a target="_blank" href="https://www.freecodecamp.org/news/install-react-with-create-react-app/">How to Install React.js with create-react-app</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/react-components-jsx-props-for-beginners/">React Functional Components, Props, and JSX – React.js Tutorial for Beginners</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/jsx-in-react-introduction/">JSX in React – Explained with Examples</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/react-background-image-tutorial-how-to-set-backgroundimage-with-inline-css-style/">React Background Image Tutorial – How to Set backgroundImage with Inline CSS Style</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/build-accordion-menu-in-react-without-external-libraries/">How to Build an Accordion Menu in React from Scratch – No External Libraries Required</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-build-react-forms/">How to Build React Forms the Easy Way with react-hook-form</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-create-react-hooks/">How to Build Your Own React Hooks: A Step-by-Step Guide</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/react-testing-library-tutorial-javascript-example-code/">React Testing Library – Tutorial with JavaScript Code Examples</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/learn-react-by-building-a-weather-app/">How to Build a Weather Application with React and React Hooks</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-add-drag-and-drop-in-react-with-react-beautiful-dnd/">How to Add Drag and Drop in React with React Beautiful DnD</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-use-svg-icons-in-react-with-react-icons-and-font-awesome/">How to Use SVG Icons in React with React Icons and Font Awesome</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-build-a-shopping-list-using-react-hooks-w-starter-code-and-video-walkthrough/">How to Build a Shopping List Using React Hooks (w/ Starter Code and Video Walkthrough)</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/react-budget-tracker-app/">Build a React Budget Tracker App – Learn React &amp; Context API with this Fun Project</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/best-file-structure-for-react-components/">The Best File Structure for Your React Components</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/react-props-cheatsheet/">React Props Cheatsheet: 10 Patterns You Should Know</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/react-and-googlesheets/">How to Turn Google Sheets into a REST API and Use it with a React Application</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/fetch-data-react/">How to Fetch Data in React: Cheat Sheet + Examples</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/use-the-youtube-iframe-api-in-react/">How to Use the YouTube IFrame API in React</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-set-up-https-locally-with-create-react-app/">How to Setup HTTPS Locally with create-react-app</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-create-a-react-app-with-a-node-backend-the-complete-guide/">How to Create a React App with a Node Backend: The Complete Guide</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/build-a-shopping-cart-with-react-and-typescript/">How to Add a Serverless Database to your React Projects</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/create-react-app-npm-scripts-explained/">The React Scripts Start Command – Create-React-App npm Scripts Explained</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/build-a-shopping-cart-with-react-and-typescript/">Build a Shopping Cart with React and TypeScript</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/react-practice-project-birthday-reminder-app/">Learn React.js by Building Projects – Create a Birthday Reminder App</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-create-a-nextjs-starter-to-easily-bootstrap-a-new-react-app/">How to Create a Next.js Starter to Easily Bootstrap a New React App</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/learn-how-to-use-react-and-graphql-to-make-a-full-stack-social-network/">Learn How to Use React and GraphQL to Make a Full Stack Social Network</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/react-beginner-handbook/">React for Beginners – A React.js Handbook for Front End Developers</a></li>
</ul>
<h3 id="heading-vue">Vue</h3>
<ul>
<li><a target="_blank" href="https://www.freecodecamp.org/news/learn-basic-vue-js-crash-course-guide-vue-tutorial-e3da361c635/">Learn Vue: A 3-minute Interactive Vue JS T</a>utorial</li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/learn-how-to-use-the-vue-js-cli-8349fb23a566/">Learn How to Use the Vue.js CLI</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/vue-js-full-course/">Learn Vue.js - Full Course for Beginners</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/vue-js-components-an-interactive-guide-1b8149ecc254/">Vue Components: An Interactive Vue JS Tutorial</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-use-routing-in-vue-js-to-create-a-better-user-experience-98d225bbcdd9/">How to Use Routing in Vue.js to Create a Better User Experience</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/markdown-previewer-vue-js-tutorial/">Build a Markdown Previewer with Vue.js</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-add-internationalization-to-a-vue-application-d9cfdcabb03b/">How to Add Internationalization to a Vue Application</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-add-charts-and-graphs-to-a-vue-js-application-29f943a45d09/">How to Add Charts and Graphs to a Vue.js Application</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-build-a-memory-card-game-with-vuejs/">How to Build a Memory Card Game with Vue.js</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-create-and-publish-a-vue-component-library/">How to Create and Publish a Vue Component Library</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/build-a-full-stack-mevn-app/">How to Build a Full Stack RPG Character Generator with MongoDB, Express, Vue, and Node (the MEVN Stack)</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-add-authentication-to-a-vue-app-using-firebase/">How to Add Authentication to a Vue App Using Firebase</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-add-authentication-to-a-vue-app-using-auth0/">How to Add Authentication to a Vue App Using Auth0</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-add-authentication-to-a-vue-app-using-aws-amplify/">How to Add Authentication to a Vue App Using AWS Amplify</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/the-vue-handbook-a-thorough-introduction-to-vue-js-1e86835d8446/">The Vue Handbook: A Thorough Introduction to Vue.js</a></li>
</ul>
<h3 id="heading-angular">Angular</h3>
<ul>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-install-angular-on-windows-a-guide-to-angular-cli-node-js-and-build-tools/">How to Install Angular on Windows: A Guide to Angular CLI, Node.js, and Build Tools</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/angular-9-for-beginners-components-and-string-interpolation/">Angular 9 for Beginners - Components and String Interpolation</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/angular-9-for-beginners-how-to-install-your-first-app-with-angular-cli/">Angular 9 for Beginners — How to Install Your First App with Angular CLI</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/everything-you-need-to-know-about-ng-template-ng-content-ng-container-and-ngtemplateoutlet-4b7b51223691/">Everything you need to know about ng-template, ng-content, ng-container, and *ngTemplateOutlet in Angular</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/global-error-handling-in-angular-with-the-help-of-the-cdk/">What Could Go Wrong? How to Handle Errors in Angular</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/angular-generic-form-validator/">How to Build a Generic Form Validator in Angular</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-validate-angular-template-driven-forms/">How to Validate Angular Template-Driven Forms</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-validate-angular-reactive-forms/">How to Validate Angular Reactive Forms</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-create-reusable-loading-indicator-for-angular-projects-d0a11f4631e0/">How to Create a Reusable Loading-Indicator for Angular Projects</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-i-built-a-customizable-loading-indicator-with-angular-dynamic-components-a291310f01d/">How I Built a Customizable Loading-Indicator with Angular Dynamic Components</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-create-an-online-poll-with-asp-net-core-angular-5-and-highcharts-85ff7fecbaf1/">How to Create an Online Poll with ASP.NET Core, Angular 5, and Highcharts</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/generate-qr-codes-in-angular-10/">How to Generate QR Codes in Angular 10</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/angular-material-course/">Use Angular Material to add modern UI components to your Angular projects</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/angular-rxjs-in-depth/">Angular RxJS In-Depth</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-create-an-optical-character-reader-using-angular-and-azure-computer-vision/">How To Create An Optical Character Reader Using Angular And Azure Computer Vision</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/angular-tutorial-course/">Learn Angular - Full Tutorial Course</a></li>
</ul>
<h2 id="heading-how-to-learn-web-basics-and-web-security">How to Learn Web Basics and Web Security</h2>
<p>When you get familiar with building web sites and web applications in the framework / library of your choice, you'll want to deploy them. But before you put your work online, it helps to know how the web works and the basics of web security.</p>
<h3 id="heading-web-basics">Web Basics</h3>
<ul>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-the-internet-works/">How HTTP Works and Why it's Important – Explained in Plain English</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/http-401-error-vs-http-403-error-status-code-responses-explained/">HTTP 401 Error vs HTTP 403 Error – Status Code Responses Explained</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/http-error-403-forbidden-what-it-means-and-how-to-fix-it/">HTTP Error 403 Forbidden: What It Means and How to Fix It</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/error-403-forbidden-explained-how-can-i-fix-this-http-error-code/">Error 403 Forbidden Explained - How Can I Fix This HTTP Error Code?</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/http-error-500-internal-server-error-explained-in-plain-english/">HTTP Error 500 – Internal Server Error Explained in Plain English</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/http-error-503-service-unavailable-explained-what-the-503-error-code-means/">HTTP Error 503 Service Unavailable Explained – What the 503 Error Code Means</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/an-in-depth-introduction-to-http-caching-cache-control-vary/">An In-depth Introduction to HTTP Caching: Cache-control &amp; Vary</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/http-and-everything-you-need-to-know-about-it/">An Introduction to HTTP: Everything You Need to Know</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/what-is-tcp-ip-layers-and-protocols-explained/">What is the TCP/IP Model? Layers and Protocols Explained</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/wifi-security-explained/">WPA Key, WPA2, WPA3, and WEP Key: Wi-Fi Security Explained</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/what-is-tls-transport-layer-security-encryption-explained-in-plain-english/">What is TLS? Transport Layer Security Encryption Explained in Plain English</a></li>
</ul>
<h3 id="heading-https">HTTPS</h3>
<ul>
<li><a target="_blank" href="https://www.freecodecamp.org/news/what-is-https-a-guide-to-secure-web-browsing-and-browser-encryption/">What is HTTPS? A Guide to Secure Web Browsing and Browser Encryption</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/wtf-is-https/">WTF is HTTPS?</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/chrome-plans-to-implement-insecure-form-warnings-how-can-wordpress-plugins-help-fix-your-form/">How to Protect Your WordPress Website With HTTPS in 5 Simple Steps</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-redirect-http-to-https-using-htaccess/">How to Redirect HTTP to HTTPS Using .htaccess</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/simple-site-hosting-with-amazon-s3-and-https-5e78017f482a/">Simple Site Hosting with Amazon S3 and HTTPS</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/https-explained-with-carrier-pigeons-7029d2193351/">HTTPS Explained with Carrier Pigeons</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-get-https-working-on-your-local-development-environment-in-5-minutes-7af615770eec/">How to Get HTTPS Working on Your Local Development Environment in 5 Minutes</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/free-https-c051ca570324/">How to Add HTTPS to Your Website for Free in 10 Minutes, and Why You Need to Do This Now More Than…</a></li>
</ul>
<h3 id="heading-cookies">Cookies</h3>
<ul>
<li><a target="_blank" href="https://www.freecodecamp.org/news/web-security-hardening-http-cookies-be8d8d8016e1/">Web Security: How to Harden Your HTTP Cookies</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/everything-you-need-to-know-about-cookies-for-web-development/">Everything You Need to Know About Cookies for Web Development</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/what-are-cookies-on-the-web-and-how-do-you-use-them/">What are Cookies on the Web and How Do You Use Them?</a></li>
</ul>
<h2 id="heading-how-to-learn-databases">How to Learn Databases</h2>
<p>By this point you've probably built a bunch of websites and applications. You've likely used an API to get data on things like the weather, or to grab a random quote to display on the page.</p>
<p>But if you've ever wanted to create your own API, or store information from your users, you'll need to learn how to use a database.</p>
<p>Generally speaking, databases fall into two categories: <strong>relational</strong>, or SQL, and <strong>non-relational</strong>, or NoSQL. SQL stands for "structured query language", and is a broad term to refer to relational databases. NoSQL, or "not only SQL" refer to non-relational databases.</p>
<p>Neither type of database is better or worse than the other – it mostly comes down to the project you're working on, and the sort of data you'll be working with.</p>
<p>Here's a list of some of the best articles we have on databases. I'll make a note about whether the database system is relational (SQL) or non-relational (NoSQL) if it isn't clear:</p>
<h3 id="heading-sql-mysql">SQL / MySQL</h3>
<ul>
<li><a target="_blank" href="https://www.freecodecamp.org/news/sql-and-databases-explained-in-plain-english/">What is SQL? What is a Database? Relational Database Management Systems (RDBMS) Explained in Plain English</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/why-learn-sql/">Why You Should Learn SQL – Even If You're Not a Developer</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/basic-sql-commands/">Basic SQL Commands - The List of Database Queries and Statements You Should Know</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/sql-recipes/">Learn SQL with These 5 Easy Recipes</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/sql-create-table-statement-with-example-syntax/">SQL Create Table Statement - With Example Syntax</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/sql-operators-tutorial/">SQL Operators Tutorial – Bitwise, Comparison, Arithmetic, and Logical Operator Query Examples</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/sql-joins-tutorial/">SQL Joins Tutorial: Cross Join, Full Outer Join, Inner Join, Left Join, and Right Join</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/sql-foreign-key-vs-primary-key-explained-with-mysql-syntax-examples/">SQL Foreign Key VS Primary Key Explained with MySQL Syntax Examples</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/sql-create-view-mysql/">SQL View Explained - How to Create a View in SQL and MySQL</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/the-sql-update-statement-explained/">The SQL Update Statement Explained: Queries for Updating Tables (including MySQL Examples)</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/sql-insert-and-insert-into-statements-with-example-syntax/">SQL Insert Into and Insert Statements: With Example MySQL Syntax</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/sql-create-table-explained-with-mysql-and-postgres-examples/">SQL Create Table Explained with Syntax Examples for MySQL and Postgres</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/check-constraint-sql-server-mysql/">Check Constraint in SQL - Explained with MySQL and SQL Server Syntax Examples</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/sql-delete-row-statement-examples/">SQL Delete Row Statement - How to Remove Data From a Table With Example Queries</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/primary-key-sql-tutorial-how-to-define-a-primary-key-in-a-database/">Primary Key SQL Tutorial – How to Define a Primary Key in a Database</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/learn-the-basics-of-sql-injection-and-how-to-protect-your-web-apps/">Learn the Basics of SQL Injection and How to Protect Your Web Apps</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/what-is-sql-injection-how-to-prevent-it/">SQL Injection Tutorial - What is SQL Injection and How to Prevent it</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/sql-update-statement-example-queries-for-updating-table-values/">SQL Update Statement — Example Queries for Updating Table Values</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/cjn-is-your-mysql-secured-7793e5444cf5/">How to Make Sure Your MySQL Database is Secured</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/connect-python-with-sql/">How to Create and Manipulate SQL Databases with Python</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/laravel-5-7-tutorial-build-your-first-crud-app-with-laravel-and-mysql-15cbd06c6cef/">How to Build Your First CRUD App with Laravel and MySQL</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/sql-and-databases-full-course/">SQL and Databases - A Full Course for Beginners</a></li>
</ul>
<h3 id="heading-mongodb-mongoose-nosql">MongoDB / Mongoose (NoSQL)</h3>
<p>Note: Mongoose is a tool for MongoDB that lets you do things like object data modeling (ODM) to create models or schemas for your data. A lot of people use Mongoose to interact with a MongoDB database, so I've combined them here.</p>
<ul>
<li><a target="_blank" href="https://www.freecodecamp.org/news/learn-mongodb-a4ce205e7739/">How to Get Started with MongoDB in 10 Minutes</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/mongodb-aggregation-framework/">How to Handle Advanced Data Processing with MongoDB's Aggregation Framework</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/mongodb-node-express-project/">Learn Node + MongoDB by Creating a URL Shortener Project</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/mongodb-mongoose-node-tutorial/">How to Use MongoDB + Mongoose with Node.js – Best Practices for Back End Devs</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/deploying-a-mern-application-using-mongodb-atlas-to-heroku/">How to Deploy a MERN Application to Heroku Using MongoDB Atlas</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-build-a-todo-app-with-react-typescript-nodejs-and-mongodb/">How to Build a Todo App with React, TypeScript, NodeJS, and MongoDB</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/build-a-full-stack-mevn-app/">How to Build a Full Stack RPG Character Generator with MongoDB, Express, Vue, and Node (the MEVN Stack)</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-build-a-blazing-fast-graphql-api-with-node-js-mongodb-and-fastify-77fd5acd2998/">How to build a blazing fast GraphQL API with Node.js, MongoDB and Fastify</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-create-a-realtime-app-using-socket-io-react-node-mongodb-a10c4a1ab676/">How to Create a Realtime App Wsing Socket.io, React, Node &amp; MongoDB</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-build-blazing-fast-rest-apis-with-node-js-mongodb-fastify-and-swagger-114e062db0c9/">How to Build Blazing Fast REST APIs with Node.js, MongoDB, Fastify and Swagger</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/introduction-to-mongoose-for-mongodb-d2a7aa593c57/">Introduction to Mongoose for MongoDB</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-log-a-node-js-api-in-an-express-js-app-with-mongoose-plugins-efe32717b59/">How to Log a Node.js API in an Express.js App with Mongoose Plugins</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/mongoose101/">Mongoose 101: An Introduction to the Basics, Subdocuments, and Population</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-allow-users-to-upload-images-with-node-express-mongoose-and-cloudinary-84cefbdff1d9/">How to Allow Users to Upload Images with Node/Express, Mongoose, and Cloudinary</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/mongodb-quickstart-with-python/">MongoDB Quickstart with Python</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/mongodb-crud-app/">MongoDB Tutorial - CRUD App from Scratch Using Node.js</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/mongodb-full-course-nodejs-express-mongoose/">MongoDB Full Course w/ Node.js, Express, &amp; Mongoose</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/restful-api-using-node-express-mongo/">How to Build a RESTful API Using Node, Express, and Mongo</a></li>
</ul>
<h3 id="heading-redis-nosql">Redis (NoSQL)</h3>
<ul>
<li><a target="_blank" href="https://www.freecodecamp.org/news/redis-caching-essentials-with-node-and-mongoose/">How to Use Redis to Supercharge Your Web APIs</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/a-quick-guide-to-redis-lua-scripting/">A Quick Guide to Redis Lua Scripting</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/redis-hash-table-scan-explained-537cc8bb9f52/">How the Redis Hash Table Scan Function Works</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/build-a-multi-step-registration-app-with-animated-transitions-using-mern-stack/">How to Build a Multi-Step Registration App with Animated Transitions Using the MERN Stack</a></li>
</ul>
<h3 id="heading-postgres-postgresql">Postgres / PostgreSQL</h3>
<ul>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-get-started-with-postgresql-9d3bc1dd1b11/">How to Get Started with PostgreSQL</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/postgresql-tricks/">Learn These Quick Tricks in PostgreSQL</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/fuzzy-string-matching-with-postgresql/">How to Use Fuzzy String Matching with PostgreSQL</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-update-objects-inside-jsonb-arrays-with-postgresql-5c4e03be256a/">How to Update Objects Inside JSONB Arrays with PostgreSQL</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-deploy-a-rails-5-2-postgresql-app-on-aws-elastic-beanstalk-34e5cec3a984/">How to Deploy a Rails 5.2 PostgreSQL App on AWS Elastic Beanstalk</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/django-uwsgi-nginx-postgresql-setup-on-aws-ec2-ubuntu16-04-with-python-3-6-6c58698ae9d3/">How to Create a Django Server Running uWSGI, NGINX and PostgreSQL on AWS EC2 with Python 3.6</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/build-web-apis-with-nestjs-beginners-guide/">How to Build Web APIs with NestJS, Postgres, and Sequelize - A Beginner's Guide</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/production-fullstack-react-express/">How to Deploy a React App to Production on AWS Using Express, Postgres, PM2 and NGINX</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/docker-development-workflow-a-guide-with-flask-and-postgres-db1a1843044a/">Docker Development WorkFlow — a Guide with Flask and Postgres</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/postgresql-full-course/">Learn SQL with This Free 4-hour Course on the Popular PostgreSQL Database</a></li>
</ul>
<h2 id="heading-how-to-learn-backend-development">How to Learn Backend Development</h2>
<p>Similar to how frontend development is a broad subject, backend development can refer to many things, and encompasses a lot of different technologies.</p>
<p>Usually when you start working on the backend, which controls how sites and web apps work behind the scenes, you'll use a framework like Express, Flask, or Django.</p>
<h3 id="heading-express">Express</h3>
<ul>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-enable-es6-and-beyond-syntax-with-node-and-express-68d3e11fe1ab/">How to Enable ES6 (and beyond) Syntax with Node and Express</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-deploy-your-site-using-express-and-heroku/">How to Deploy Your App to the Web Using Express.js and Heroku</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/add-a-graphql-server-to-a-restful-express-js-api-in-2-minutes/">How to Add a GraphQL Server to a RESTful Express.js API in 2 Minutes</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/express-js-security-tips/">Express.js Security Tips: How You Can Save and Secure Your App</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/build-a-full-stack-mevn-app/">How to Build a Full Stack RPG Character Generator with MongoDB, Express, Vue, and Node (the MEVN Stack)</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-build-a-multiplayer-card-game-with-phaser-3-express-and-socket-io/">How to Build a Multiplayer Card Game with Phaser 3, Express, and Socket.IO</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-build-a-multiplayer-tabletop-game-simulator/">How to Build a Multiplayer Tabletop Game Simulator with Vue, Phaser, Node, Express, and Socket.IO</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-make-input-validation-simple-and-clean-in-your-express-js-app-ea9b5ff5a8a7/">How to Make Input Validation Simple and Clean in Your Express.js App</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-write-a-production-ready-node-and-express-app-f214f0b17d8c/">How to Write a Production-Ready Node and Express App</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/restful-api-using-node-express-mongo/">How to Build a RESTful API using Node, Express, and Mongo</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/learn-express-js-in-this-complete-course/">Learn Express.js in This Complete Course</a></li>
</ul>
<h3 id="heading-flask">Flask</h3>
<ul>
<li><a target="_blank" href="https://www.freecodecamp.org/news/end-to-end-machine-learning-project-turorial/">How to Develop an End-to-End Machine Learning Project and Deploy it to Heroku with Flask</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/python-microservices-course/">Learn About Python Microservices by Building an App Using Django, Flask, and React</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-use-python-and-flask-to-build-a-web-app-an-in-depth-tutorial-437dbfe9f1c6/">How to Use Python and Flask to Build a Web App — An In-Depth Tutorial</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/setting-up-a-ci-cd-on-gitlab-for-deploying-a-python-flask-application-on-heroku-e154db93952b/">Setting up CI/CD on GitLab for Deploying Python Flask Application on Heroku</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/learn-flask-for-python-full-tutorial/">Learn Flask Web Development for Python in This Free 1-hour Course</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/learn-web-programming-with-flask-from-harvards-cs50/">Learn Web Programming with Flask from Harvard's CS50</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/learn-the-flask-python-web-framework-by-building-a-market-platform/">Learn the Flask Python Web Development Framework by Building an Ecommerce Platform</a></li>
</ul>
<h3 id="heading-django">Django</h3>
<ul>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-write-efficient-views-models-and-queries-in-django/">How to Write Efficient Views, Models, and Queries in Django</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-manipulate-data-with-django-migrations/">How to Manipulate Data with Django Migrations</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/django-project-best-practices-for-happy-developers/">Django Project Best Practices That'll Keep Your Developers Happy</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/increase-developer-confidence-with-a-great-django-test-suite/">Django Test Suite Introduction – How to Increase Your Confidence as a Python Developer</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/eli5-full-stack-basics-breakthrough-with-django-emberjs-402fc7af0e3/">ELI5 Full Stack Basics: Breakthrough with Django &amp; EmberJS</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/i-built-a-members-area-on-my-website-with-python-and-django-heres-what-i-learned/">I Built a Members' Area on My Website with Python and Django. Here's What I Learned.</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-build-a-web-based-dashboard-with-django-mongodb-and-pivot-table/">How to Build a Web-Based Dashboard with Django, MongoDB, and Pivot Table</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-create-an-analytics-dashboard-in-django-app/">How to Create an Analytics Dashboard in a Django App</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-build-an-e-commerce-website-with-django-and-python/">How to Build an E-commerce Website with Django and Python</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/django-rest-framework-react-tutorial/">Build a Moodle / Blackboard clone with Django Rest Framework &amp; React</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-build-a-progress-bar-for-the-web-with-django-and-celery-12a405637440/">How to Build a Progress Bar for the Web with Django and Celery</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/sphinx-for-django-documentation-2454e924b3bc/">How to Document Your Django Project Using the Sphinx Tool</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/python-django-course/">Python Django Web Framework - Full Course for Beginners</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/python-microservices-course/">Learn About Python Microservices by Building an App Using Django, Flask, and React</a></li>
</ul>
<h2 id="heading-how-to-learn-static-site-generators">How to Learn Static Site Generators</h2>
<p>Static Site Generators were created to make development easy, and they represent the "M" in <a target="_blank" href="https://www.freecodecamp.org/news/what-is-the-jamstack-and-how-do-i-host-my-website-on-it/">JAMstack</a> (JavaScript, APIs, and Markup). With a static site generator, it's much easier to create a quick, scaleable website, blog, or web app with modern benefits like server-side rendering.</p>
<h3 id="heading-gatsby">Gatsby</h3>
<ul>
<li><a target="_blank" href="https://www.freecodecamp.org/news/gatsby-blog-header-image-twitter-card/">Gatsby Starter Blog: How to Add Header Images to Posts with Support for Twitter Cards</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-create-an-image-gallery-gatsby-and-cloudinary/">How to Create an Image Gallery Using Gatsby and Cloudinary</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-build-a-blog-with-gatsby-and-netlify-cms/">How to Build a Blog with Gatsby and Netlify CMS – A Complete Guide</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/create-a-full-stack-website-with-strapi-and-gatsbyjs/">Create a Full-Stack Website with Strapi and GatsbyJS</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-create-a-travel-bucket-list-map-with-gatsby-react-leaflet-graphcms/">How to Create a Travel Bucket List Map with Gatsby, React Leaflet, &amp; GraphCMS</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-enable-offline-mode-for-gatsby-site/">How to Enable Offline Mode for Your Gatsby Site</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/what-are-environment-variables-and-how-can-i-use-them-with-gatsby-and-netlify/">What Are Environment Variables and How Can I Use Them with Gatsby and Netlify?</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/3-ways-to-edit-markdown-with-tina-gatsby/">3 Ways to Edit Markdown with TinaCMS</a> + Gatsby</li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/build-a-developer-blog-from-scratch-with-gatsby-and-mdx/">How to Build Your Coding Blog From Scratch Using Gatsby and MDX</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/what-is-gatsby-and-why-its-time-to-get-on-the-hype-train/">What Is Gatsby and Why It's Time to Get on the Hype Train</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/building-jamstack-apps/">How to Build Authenticated Serverless JAMstack Apps with Gatsby and Netlify</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/keeping-state-between-pages-with-local-state-in-gatsby-js/">How to Keep State Between Pages with Local State in Gatsby.js</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-automatically-cross-post-from-your-gatsbyjs-blog-with-rss/">How to Automatically Cross-post from Your GatsbyJS Blog with RSS</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-create-a-searchable-log-with-gatsby-d624bf3a05af/">How to Create a Searchable Log with Gatsby</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/from-zero-to-deploy-how-i-created-a-static-website-from-scratch-using-netlify-gatsby-ebca82612ffd/">From Zero to Deploy: How I Created a Static Website from Scratch Using Netlify + Gatsby</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/get-your-graphcms-data-into-gatsby-2018/">Get Your GraphCMS Data into Gatsby</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/great-gatsby-bootcamp/">The Great Gatsby.js Bootcamp</a></li>
</ul>
<h3 id="heading-nextjs">Next.js</h3>
<ul>
<li><a target="_blank" href="https://www.freecodecamp.org/news/static-site-generation-with-nextjs/">What is Static Site Generation? How Next.js Uses SSG for Dynamic Web Apps</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/nextjs-basics/">Next.js Basics Tutorial – Server-side Rendering, Static Sites, REST APIs, Routing, and More</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/routing-in-nextjs-beginners-guide/">Routing in Next.js – A Complete Beginner's Guide</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-create-a-nextjs-starter-to-easily-bootstrap-a-new-react-app/">How to Create a Next.js Starter to Easily Bootstrap a New React App</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-build-a-jamstack-site-with-next-js-and-vercel-jamstack-handbook/">How to Build a Jamstack Site with Next.js and Vercel - Jamstack Handbook</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-create-a-contact-form-with-netlify-forms-and-nextjs/">How to Create a Contact Form with Netlify Forms and Next.js</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/build-an-image-gallery-with-nextjs/">How to Build an Image Gallery with NextJS Using the Pexels API and Chakra UI</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-add-interactive-animations-and-page-transitions-to-a-next-js-web-app-with-framer-motion/">How to Add Interactive Animations and Page Transitions to a Next.js Web App with Framer Motion</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-use-github-actions-to-deploy-a-next-js-website-to-aws-s3/">How to Use Github Actions to Deploy a Next.js Website to AWS S3</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-use-chakra-ui-with-next-js-and-react/">How to Use Chakra UI with Next.js and React</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-use-sass-with-css-modules-in-next-js/">How to Run Visual Regression Testing on a Next.js App with Cypress and Applitools</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-fetch-graphql-data-in-next-js-with-apollo-graphql/">How to Fetch GraphQL Data in Next.js with Apollo GraphQL</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/discover-next-js-and-write-server-side-react-apps-the-easy-way-cc920dea2d9d/">Discover Next.js and Write Server-Side React Apps the Easy Way</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/the-next-js-handbook/">The Next.js Handbook</a></li>
</ul>
<h3 id="heading-hugo">Hugo</h3>
<ul>
<li><a target="_blank" href="https://www.freecodecamp.org/news/your-first-hugo-blog-a-practical-guide/">How to Create Your First Hugo Blog: a Practical Guide</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/a-portable-makefile-for-continuous-delivery-with-hugo-and-github-pages/">A Portable Makefile for Continuous Delivery with Hugo and GitHub Pages</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/two-ways-to-deploy-a-public-github-pages-site-from-a-private-hugo-repository-627312ec63b9/">Two Ways to Deploy a Public GitHub Pages Site from a Private Hugo Repository</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/hugo-firebase-how-to-create-your-own-dynamic-website-for-free-in-minutes-463b4fb7bf5a/">Hugo + Firebase: How to Create Your Own Static Website for Free in Minutes</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/hugo-vs-jekyll-battle-of-static-site-generator-themes/">Hugo vs Jekyll: an Epic Battle of Static Site Generator Themes</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/my-latest-self-hosted-hugo-workflow/">How to Self-Host a Hugo Web App</a></li>
</ul>
<h3 id="heading-nuxtjs">Nuxt.js</h3>
<ul>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-use-flat-file-data-in-a-static-nuxt-app/">How to Use Flat-File Data in a Static Nuxt App</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/up-goind-with-nuxt-js-bulma-and-sass/">Up &amp; Going with Nuxt.js, Bulma and Sass</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/universal-application-code-structure-in-nuxt-js-4cd014cc0baa/">Universal Application Code Structure in Nuxt.js</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/architecting-dapp-using-nuxt-js-nebulas-fc00712ae341/">How to Architect a DApp Using Nuxt.js and Nebulas</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/deploy-a-nuxt-app-to-s3-in-5-minutes-515a161eb74f/">Deploy a Nuxt App to S3 in 5 Minutes</a></li>
</ul>
<h3 id="heading-vuepress">Vuepress</h3>
<ul>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-create-a-documentation-website-using-vuepress-eeabe8a99045/">How to Create a Documentation Website Using VuePress</a></li>
</ul>
<h2 id="heading-how-to-learn-bundlers-compilers-dependency-managers-task-runners-formatters-and-linters">How to Learn Bundlers, Compilers, Dependency Managers, Task Runners, Formatters, and Linters</h2>
<p>Once you start working with frontend frameworks / libraries, or your projects start to grow in size and complexity, things can quickly get out of hand.</p>
<p>To keep things organized and tidy, it helps to learn linting, especially if you work on large teams. With linting, you can catch errors before they happen, and with a formatter like prettier, you can enforce a code style guide for your entire team.</p>
<p>And though a lot of Angular, Vue, and React projects already include a bundler like Webpack, it's helpful to learn more about how it works in case you need to adjust its behavior later.</p>
<h3 id="heading-webpack-and-babel">Webpack and Babel</h3>
<ul>
<li><a target="_blank" href="https://www.freecodecamp.org/news/an-intro-to-webpack-what-it-is-and-how-to-use-it-8304ecdc3c60/">An Intro to Webpack: What It Is and How to Use It</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/creating-a-production-ready-webpack-4-config-from-scratch/">How to Create a Production-Ready Webpack 4 Config From Scratch</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-share-variables-across-html-css-and-javascript-using-webpack/">How to Share Variables Across HTML, CSS, and JavaScript Using Webpack</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-combine-webpack-4-and-babel-7-to-create-a-fantastic-react-app-845797e036ff/">How to Combine Webpack 4 and Babel 7 to Create a Fantastic React App</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-set-up-deploy-your-react-app-from-scratch-using-webpack-and-babel-a669891033d4/">How to Set up &amp; Deploy Your React App from Scratch Using Webpack and Babel</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/using-babel-macros-with-react-native-8615aaf5b7df/">How to Use Babel Macros with React Native</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/webpack-course/">Learn Webpack to Simplify and Speed Up Your Website</a></li>
</ul>
<h3 id="heading-eslint-and-prettier">ESLint and Prettier</h3>
<ul>
<li><a target="_blank" href="https://www.freecodecamp.org/news/what-is-linting-and-how-can-it-save-you-time/">What Is Linting and How Can It save You Time?</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/dont-just-lint-your-code-fix-it-with-prettier/">Don’t Just Lint Your Code - Fix It with Prettier</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/creating-your-own-eslint-config-package/">How to Create Your Own ESLint Config Package</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/the-essentials-eslint/">ESLint: The Essential Facts About Essential Front End Tools</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-stop-errors-before-they-ever-hit-your-codebase-with-travis-ci-and-eslint-7a5a6b1fcd4a/">How to Stop Errors Before They Ever Hit Your Codebase with Travis CI and ESLint</a></li>
</ul>
<h3 id="heading-parcel">Parcel</h3>
<ul>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-up-a-react-app-with-parcel/">How to Set Up a React App with Parcel</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-use-parcel-to-bundle-your-react-js-application-d023979e9fe4/">How to Use Parcel to Bundle Your React.js Application</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/building-chrome-extensions-in-react-parcel-79d0240dd58f/">How to Build Chrome Extensions with React + Parcel</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/using-parcel-bundler-with-react/">Using Parcel Bundler with React</a></li>
</ul>
<h3 id="heading-gulp">Gulp</h3>
<ul>
<li><a target="_blank" href="https://www.freecodecamp.org/news/super-simple-gulp-tutorial-for-beginners-45141974bfe8/">Super Simple Gulp Tutorial for Beginners</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/gulp-4-walk-through-with-example-code-c3c018eab306/">Using Gulp 4 in Your Workflow for Sass and JS Files</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-minify-images-with-gulp-gulp-imagemin-and-boost-your-sites-performance-6c226046e08e/">How to Minify Images with Gulp &amp; Gulp-imagemin and Boost Your Site’s Performance</a></li>
</ul>
<h3 id="heading-npm-scripts">npm Scripts</h3>
<ul>
<li><a target="_blank" href="https://www.freecodecamp.org/news/why-i-left-gulp-and-grunt-for-npm-scripts-3d6853dd22b8/">Why I Left Gulp and Grunt for npm Scripts</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/create-react-app-npm-scripts-explained/">The React Scripts Start Command – Create-React-App npm Scripts Explained</a></li>
</ul>
<h2 id="heading-how-to-learn-mobile-application-development">How to Learn Mobile Application Development</h2>
<p>These days, a lot of mobile app development is done with a framework like React Native.</p>
<p>While in the past you had to know a specific language like Java to develop a mobile app, with a framework, a lot of your frontend framework / library knowledge can be used to develop a mobile app.</p>
<p>Also, if you use a framework, you can just build the app once, and create both iOS and Android versions from the same code base.</p>
<h3 id="heading-react-native">React Native</h3>
<ul>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-react-native-animations-work/">How Animations Work in React Native</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-create-a-background-video-in-react-native-cb53304ee4f6/">How to Use Video As a Background in React Native</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/introducing-react-navigation-5/">How to Handle Navigation in React Native with react-navigation 5</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/i-switched-to-react-native-and-created-a-bottom-sheet-its-easier-than-native/">Why I Switched to React Native to Create a Super Easy Bottom Sheet</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-react-native-constructs-app-layouts-and-how-fabric-is-about-to-change-it-dd4cb510d055/">How React Native Constructs App Layouts (and How Fabric is About to Change It)</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-create-a-camera-app-with-expo-and-react-native/">How to Create a Camera App with Expo and React Native</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/build-react-native-app-user-authentication/">How to Build Your First Serverless React Native App with User Authentication</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-add-authentication-to-react-native-in-three-steps-using-firebase/">How to Add Authentication to React Native in Three Steps Using Firebase</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/react-native-firebase-tutorial/">How to Build a React Native App and Integrate It with Firebase</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/google-login-with-react-native-and-firebase/">How to Set Up Google Login in React Native &amp; Firebase</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/react-native-gestures-animations-tutorial/">Add Gestures and Animations to React Native Projects</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/using-babel-macros-with-react-native-8615aaf5b7df/">How to Use Babel Macros with React Native</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/build-an-instagram-clone-with-react-native-firebase-firestore-redux-and-expo/">Build an Instagram Clone with React Native, Firebase Firestore, Redux, and Expo</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/create-an-app-that-works-on-ios-android-and-the-web-with-react-native-web/">React Native Course: How to Build an iPhone App, Android App, and Website - All with the Same Codebase</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-integrate-redux-into-your-application-with-react-native-and-expo-ec37c9ca6033/">How to Integrate Redux into Your Application with React Native and Expo</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/converting-a-react-app-to-react-native/">How to Convert a React App to React Native</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/react-native-course-for-beginners/">Intro to React Native Course</a></li>
</ul>
<h3 id="heading-ionic">Ionic</h3>
<ul>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-write-hello-world-in-ionic/">How to Write "Hello, World!" in Ionic</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/creating-a-crud-to-do-app-using-ionic-4/">How to Create a CRUD To-do App Using Ionic 3</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-build-your-first-ionic-4-app-with-api-calls-f6ea747dc17a/">How to Build Your First Ionic 4 App with API Calls</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-get-push-notifications-working-with-ionic-4-and-firebase-ad87cc92394e/">How to Get Push Notifications Working with Ionic 4 and Firebase</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-develop-a-great-facebook-login-flow-with-firebase-and-ionic-656a295c4fe9/">How to Develop a Great Facebook Login Flow with Firebase and Ionic</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-integrate-google-login-into-an-ionic-app-with-firebase-41cb69234919/">How to Integrate Google Login into an Ionic App with Firebase</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/ionic-full-course/">Learn Ionic 4 and start creating iOS / Android Apps</a></li>
</ul>
<h3 id="heading-flutter">Flutter</h3>
<ul>
<li><a target="_blank" href="https://www.freecodecamp.org/news/https-medium-com-rahman-sameeha-whats-flutter-an-intro-to-dart-6fc42ba7c4a3/">A Simplified Introduction to Dart and Flutter</a></li>
<li>An Introduction to Flutter: The Basics</li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/serialize-object-flutter/">How to Serialize An Object In Flutter</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-handle-state-in-flutter-using-the-bloc-pattern-8ed2f1e49a13/">How to Handle State in Flutter Using the BLoC Pattern</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/using-streams-blocs-and-sqlite-in-flutter-2e59e1f7cdce/">How to Use Streams, BLoCs, and SQLite in Flutter</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-handle-navigation-in-your-flutter-apps-ceaf2f411dcd/">How to Handle Navigation in Your Flutter Apps</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/provider-pattern-in-flutter/">How to Use the Provider Pattern in Flutter</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/build-a-chat-app-ui-with-flutter/">How to Build a Chat App UI With Flutter and Dart</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-add-push-notifications-to-flutter-app/">How to Add Push Notifications to a Flutter App using Firebase Cloud Messaging</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-add-google-admob-to-flutter/">How to Integrate Google AdMob into Flutter</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-build-a-native-communication-bridge-in-flutter-with-webview-and-javascript/">How to Build a Native Communication Bridge in Flutter with WebView and JavaScript</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/build-a-tip-calculator-with-flutter/">How to Use Flutter to Build a Tip Calculator</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-build-a-cryptocurrency-price-list-app-using-flutter-sdk-1c75998e1a58/">How to Build a Cryptocurrency Price List App Using Flutter SDK</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/flutter-messenger-clone/">Flutter UI Tutorial – How to Build a Chat App with Stories Using the Flutter SDK</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-create-a-production-app-with-flutter/">Flutter Course – How to Create a Production iPhone and Android App with the Flutter UI Tookit</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/flutter-app-course-mobile-web-desktop/">Use Flutter to Make an App for Mobile, Web, and Desktop - All with One Codebase</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/flutter-course-ios-android/">Learn to Build iOS and Android Apps with Flutter</a></li>
</ul>
<h2 id="heading-how-to-learn-desktop-application-development">How to Learn Desktop Application Development</h2>
<p>Similar to modern mobile app development, a lot of desktop apps these days are developed using a framework. This has a lot of the same advantages, and means that you can write your desktop app just once, and create Windows, macOS, and even Linux versions from the same code base.</p>
<h3 id="heading-electron">Electron</h3>
<ul>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-write-os-specific-code-in-electron-bf6379c62ff6/">Writing OS-specific Code in Electron</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/building-an-electron-application-with-create-react-app-97945861647c/">Building an Electron Application with create-react-app</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/quick-painless-automatic-updates-in-electron-d993d5408b3a/">Quick, Painless, Automatic Updates in Electron</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/heres-how-i-created-a-markdown-app-with-electron-and-react-1e902f8601ca/">Here’s How I created a Markdown App with Electron and React</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/creating-an-electron-app-using-angular-and-sqlite3-24ca7d892810/">How to Create an Electron App Using Angular and SQLite3</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/lessons-learned-from-electronjs/">Things I Wish I Knew Before Working with Electron.js</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-build-an-electron-desktop-app-in-javascript-multithreading-sqlite-native-modules-and-1679d5ec0ac/">How to Build an Electron Desktop App in JavaScript: Multithreading, SQLite, Native Modules, and Other Common Pain Points</a></li>
</ul>
<h3 id="heading-proton-native">Proton Native</h3>
<ul>
<li><a target="_blank" href="https://www.freecodecamp.org/news/build-native-desktop-apps-with-javascript-a49ede90d8e9/">How to Build Native Desktop Apps with JavaScript (Pr</a>oton Native)</li>
</ul>
<h2 id="heading-how-to-learn-data-science-and-machine-learning">How to Learn Data Science and Machine Learning</h2>
<p>Data science and machine learning are all the rage, and the number of jobs in each field is growing every year.</p>
<p>Put simply, data science refers to a broad range of techniques used to analyze and make sense of vast amounts of data.</p>
<p>Machine learning falls under the umbrella of data science, and it employs techniques that data scientists use to enable computers to learn from all this data.</p>
<p>It's a lot to take in, but no worries – here are some of the best articles and courses we have on machine learning, and the different libraries and frameworks you'll use on the job.</p>
<h3 id="heading-general-machine-learning">General Machine Learning</h3>
<ul>
<li><a target="_blank" href="https://www.freecodecamp.org/news/machine-learning-basics-for-developers/">Machine Learning Basics for Developers</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/convolutional-neural-network-tutorial-for-beginners/">What Is a Convolutional Neural Network? A Beginner's Tutorial for Machine Learning and Deep Learning</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/8-clustering-algorithms-in-machine-learning-that-all-data-scientists-should-know/">Clustering Algorithms in Machine Learning that All Data Scientists Should Know</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/a-no-code-intro-to-the-9-most-important-machine-learning-algorithms-today/">Key Machine Learning Algorithms Explained in Plain English</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-use-the-tree-based-algorithm-for-machine-learning/">Random Forest Classifier Tutorial: How to Use Tree-Based Algorithms for Machine Learning</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/google-bert-nlp-machine-learning-tutorial/">Google BERT NLP Machine Learning Tutorial</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/svm-machine-learning-tutorial-what-is-the-support-vector-machine-algorithm-explained-with-code-examples/">SVM Machine Learning Tutorial – What is the Support Vector Machine Algorithm, Explained with Code Examples</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/machine-learning-with-scikit-learn-full-course/">Machine Learning with Scikit-Learn—Full Course</a></li>
</ul>
<h3 id="heading-pandas">Pandas</h3>
<ul>
<li><a target="_blank" href="https://www.freecodecamp.org/news/the-ultimate-guide-to-the-pandas-library-for-data-science-in-python/">The Ultimate Guide to the Pandas Library for Data Science in Python</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/python-pandas-functions/">How to Get Started with Pandas in Python – a Beginner's Guide</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/python-pandas-major-storms-hard-data/">How to Use Python and Pandas to Map Major Storms, Pessimism, and Hard Data</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-analyze-data-with-python-pandas/">How to Analyze Data with Python, Pandas &amp; Numpy - 10 Hour Course</a></li>
</ul>
<h3 id="heading-numpy">Numpy</h3>
<ul>
<li><a target="_blank" href="https://www.freecodecamp.org/news/the-ultimate-guide-to-the-numpy-scientific-computing-library-for-python/">The Ultimate Guide to the NumPy Package for Scientific Computing in Python</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/numpy-crash-course-build-powerful-n-d-arrays-with-numpy/">Python NumPy Crash Course – How to Build N-Dimensional Arrays for Machine Learning</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/numpy-python-tutorial/">Learn NumPy and Start Doing Scientific Computing in Python</a></li>
</ul>
<h3 id="heading-scikit-learn">Scikit-Learn</h3>
<ul>
<li><a target="_blank" href="https://www.freecodecamp.org/news/machine-learning-with-scikit-learn-full-course/">Machine Learning with Scikit-Learn—Full Course</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/regression-analysis-on-life-expectancy/">How I Used Regression Analysis to Analyze Life Expectancy with Scikit-Learn and Statsmodels</a></li>
</ul>
<h3 id="heading-seaborn">Seaborn</h3>
<ul>
<li><a target="_blank" href="https://www.freecodecamp.org/news/kaggle-dataset-analysis-with-pandas-matplotlib-seaborn/">Python Data Analysis: How to Visualize a Kaggle Dataset with Pandas, Matplotlib, and Seaborn</a></li>
</ul>
<h3 id="heading-matplotlib">Matplotlib</h3>
<ul>
<li><a target="_blank" href="https://www.freecodecamp.org/news/matplotlib-course-learn-python-data-visualization/">Matplotlib Course – Learn Python Data Visualization</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-embed-interactive-python-visualizations-on-your-website-with-python-and-matplotlib/">How to Embed Interactive Python Visualizations on Your Website with Python and Matplotlib</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-create-auto-updating-data-visualizations-in-python-with-matplotlib-and-aws/">How to Create Auto-Updating Data Visualizations in Python with IEX Cloud, Matplotlib, and AWS</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/kaggle-dataset-analysis-with-pandas-matplotlib-seaborn/">Python Data Analysis: How to Visualize a Kaggle Dataset with Pandas, Matplotlib, and Seaborn</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/python-data-science-course-matplotlib-pandas-numpy/">Python Data Science – A Free 12-Hour Course for Beginners. Learn Pandas, NumPy, Matplotlib, and More</a></li>
</ul>
<h3 id="heading-tensorflow">TensorFlow</h3>
<ul>
<li><a target="_blank" href="https://www.freecodecamp.org/news/massive-tensorflow-2-0-free-course/">Learn How to Use TensorFlow 2.0 For Machine Learning in This Massive Free Course</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/learn-natural-language-processing-no-experience-required/">Learn Natural Language Processing with Python and TensorFlow 2.0 – No Machine Learning Experience Required</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/applied-deep-learning-with-pytorch-full-course/">Learn to Apply Deep Learning with Pytorch in This Full Course</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/learn-to-develop-neural-networks-using-tensorflow-2-0-in-this-beginners-course/">Learn to Develop Neural Networks Using TensorFlow 2.0 In This Beginner's Course</a></li>
</ul>
<h3 id="heading-pytorch">PyTorch</h3>
<ul>
<li><a target="_blank" href="https://www.freecodecamp.org/news/pytorch-tensor-methods/">PyTorch Tensor Methods – How to Create Tensors in Python</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-build-a-neural-network-with-pytorch/">How to Build a Neural Network from Scratch with PyTorch</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/pytorch-full-course/">Learn How to Use PyTorch for Deep Learning</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/free-deep-learning-with-pytorch-live-course/">Free Live Course: Deep Learning with PyTorch</a></li>
</ul>
<h3 id="heading-keras">Keras</h3>
<ul>
<li><a target="_blank" href="https://www.freecodecamp.org/news/keras-video-course-python-deep-learning/">Keras Course – Learn Python Deep Learning and Neural Networks</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/classify-butterfly-images-deep-learning-keras/">How to Classify Butterflies with Deep Learning in Keras</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-build-your-first-neural-network-to-predict-house-prices-with-keras-f8db83049159/">How to Build Your First Neural Network to Predict House Prices with Keras</a></li>
</ul>
<h2 id="heading-how-to-learn-virtualization-and-containerization">How to Learn Virtualization and Containerization</h2>
<p>Once you learn the basics of Linux, you'll want to learn about virtual machines / virtualization, and containerization.</p>
<p>The main difference between the two is that virtualization is an abstraction on the hardware level, and allows multiple emulated machines to run on a single machine.</p>
<p>For example, with virtualization, you can split up a single machine's resources (CPU, SSD, RAM, and so on) into two smaller machines, with one running Windows server and another running Ubuntu.</p>
<p>On the other hand, containerization is emulation on the software level. This allows you to package applications and all their dependencies into a small, portable container that runs pretty much anywhere.</p>
<p>With containerization, you have a Node.js app that runs on Ubuntu. You can include your app, all its <code>node_module</code> files, and even the entire Ubuntu OS, in a small ~1 GB container. VMs are typically between 20 - 160 GB in size.</p>
<p>But both are useful, and serve different purposes. Check out our tutorials below to learn more about both virtualization and containerization.</p>
<h3 id="heading-virtual-machines">Virtual Machines</h3>
<ul>
<li><a target="_blank" href="https://www.freecodecamp.org/news/linux-server-virtualization-the-basics/">Linux Server Virtualization: The Basics</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/virtualbox-are-you-getting-your-moneys-worth/">VirtualBox: Are You Getting Your Money’s Worth?</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-install-ubuntu-with-oracle-virtualbox/">How to install Ubuntu on VirtualBox</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/what-is-a-virtual-machine-and-how-to-setup-a-vm-on-windows-linux-and-mac/">What is a Virtual Machine And How to Setup a VM on Windows, Linux, and Mac</a></li>
</ul>
<h3 id="heading-docker">Docker</h3>
<ul>
<li><a target="_blank" href="https://www.freecodecamp.org/news/what-is-docker-used-for-a-docker-container-tutorial-for-beginners/">What is Docker Used For? A Docker Container Tutorial for Beginners</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/comprehensive-introductory-guide-to-docker-vms-and-containers-4e42a13ee103/">A Comprehensive Introduction to Docker, Virtual Machines, and Containers</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/docker-101-creation-to-deployment/">Docker 101 - How to Get from Creation to Deployment</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/a-beginners-guide-to-docker-how-to-create-your-first-docker-application-cc03de9b639f/">A Beginner’s Guide to Docker — How to Create Your First Docker Application</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/docker-remove-image-how-to-delete-docker-images-explained-with-examples/">Docker Remove Image: How to Delete Docker Images Explained with Examples</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-get-a-docker-container-ip-address-explained-with-examples/">How to Get A Docker Container IP Address - Explained with Examples</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-install-docker-on-ubuntu-18-04-guide-for-both-ce-and-ee/">How to Install Docker on Ubuntu 18.04 [Guide for both CE and EE]</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-run-docker-on-windows-10-home-edition/">How to Run Docker on Windows 10 Home Edition</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/node-js-debugging/">How to Debug a Node.js Application with VSCode, Docker, and Your Terminal</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/docker-exec-how-to-run-a-command-inside-a-docker-image-or-container/">Docker Exec - How to Run a Command Inside a Docker Image or Container</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/where-are-docker-images-stored-docker-container-paths-explained/">Where are Docker Images Stored? Docker Container Paths Explained</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/docker-data-containers/">Docker Data Containers</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/docker-image-guide-how-to-remove-and-delete-docker-images-stop-containers-and-remove-all-volumes/">Docker Image Guide: How to Delete Docker Images, Stop Containers, and Remove All Volumes</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/cleaning-up-docker/">Cleaning Up Docker</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/an-introduction-to-docker-tags-9b5395636c2a/">A Quick Introduction to Docker Tags</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-enable-live-reload-on-docker-based-applications/">How to Enable Live-reload on Docker-based Applications with Docker Volumes</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/a-practical-introduction-to-docker-compose/">A Practical Introduction to Docker Compose</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/a-beginners-guide-to-docker-how-to-create-a-client-server-side-with-docker-compose-12c8cf0ae0aa/">A Beginner’s Guide to Docker — How to Create a Client/Server Side with docker-compose</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-do-deploy-docker-containers-to-the-cloud-with-aws-lightsail/">Docker Deployment Guide – How to Deploy Containers to the Cloud with AWS Lightsail</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/the-docker-handbook/">The Docker Handbook – 2021 Edition</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/course-on-docker-and-kubernetes/">Free 4-Hour Course on Docker and Kubernetes</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/docker-devops-course/">Learn DevOps Basics with This Free 2-hour Docker Course</a></li>
</ul>
<h3 id="heading-kubernetes">Kubernetes</h3>
<ul>
<li><a target="_blank" href="https://www.freecodecamp.org/news/kubernetes-vs-docker-whats-the-difference-explained-with-examples/">Kubernetes VS Docker: What's the Difference? Explained With Examples</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/a-simple-introduction-to-kubernetes-container-orchestration/">A Simple Introduction to Kubernetes Container Orchestration</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/a-friendly-introduction-to-kubernetes-670c50ce4542/">A Friendly Introduction to Kubernetes</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/developing-kubernetes-applications-with-joy/">How to Develop Kubernetes Applications with Joy</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/what-is-a-helm-chart-tutorial-for-kubernetes-beginners/">What is a Helm Chart? A Tutorial for Kubernetes Beginners</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/helm-charts-tutorial-the-kubernetes-package-manager-explained/">Helm Charts Tutorial: The Kubernetes Package Manager Explained</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/learn-kubernetes-in-under-3-hours-a-detailed-guide-to-orchestrating-containers-114ff420e882/">Learn Kubernetes in Under 3 Hours: A Detailed Guide to Orchestrating Containers</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/docker-swarm-vs-kubernetes-how-to-setup-both-in-two-virtual-machines-f8897fce7967/">Docker Swarm vs Kubernetes: How to Setup Both in Two Virtual Machines</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/the-kubernetes-handbook/">The Kubernetes Handbook</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/an-introduction-to-the-helm-package-manager-for-kubernetes/">An Introduction to the Helm Package Manager for Kubernetes</a></li>
</ul>
<h2 id="heading-how-to-learn-cloud-computing">How to Learn Cloud Computing</h2>
<p>Once you learn the basics about virtual machines, you'll want to learn about cloud computing.</p>
<p>Not too long ago, if a company wanted to run a server to host a website, they would have to build and maintain the server themselves.</p>
<p>With cloud computing, you can spin up virtual machine running your OS of choice in a few minutes. Better yet, the company hosting your VM will take care of the general maintenance for you, and ensure that the server is online and highly available.</p>
<p>And with cloud computing, you don't even have to have a server running 24/7 – with certain services, you can run a function and just pay for the milliseconds of time it took to complete.</p>
<p>Check out our tutorials below to learn more about cloud computing on the three big players in this space: Amazon Web Services, Google Cloud Platform, and Microsoft Azure.</p>
<h3 id="heading-amazon-web-services-aws">Amazon Web Services (AWS)</h3>
<ul>
<li><a target="_blank" href="https://www.freecodecamp.org/news/learn-the-basics-of-amazon-web-services/">AWS Training – Learn the Basics of Amazon Web Services</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/top-5-things-to-learn-first-when-getting-started-with-aws/">AWS Cheatsheet: The Top 5 Things to Learn First When Getting Started with Amazon Web Services</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/everything-you-need-to-know-about-aws-s3/">Everything You Need to Know About AWS S3</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/getting-started-with-server-administration-on-aws/">How to Spin Up a Remote Server on AWS</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/install-elastic-bean-cli-on-mac/">How to Install the AWS Elastic Beanstalk CLI on a Mac</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/aws-cli-tutorial-install-configure-understand-resource-environment/">AWS CLI Tutorial – How to Install, Configure, and Use AWS CLI to Understand Your Resource Environment</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-host-a-static-site-in-the-cloud-in-4-steps/">How to Host a Static Site in the Cloud in Four Steps</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-host-and-deploy-a-static-website-or-jamstack-app-to-s3-and-cloudfront/">How to Host and Deploy a Static Website or JAMstack App to AWS S3 and CloudFront</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/a-beginners-guide-on-how-to-host-a-static-site-with-aws/">How to Host your Static Website with AWS - A Beginner's Guide</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/using-lambda-functions-as-cronjobs/">Cron Job AWS Lambda Functions Tutorial – How to Schedule Tasks</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-build-and-deploy-aws-applications-on-local-machine/">How to Build and Deploy AWS Applications on Your Local Machine</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-build-a-serverless-application-using-aws-sam/">How to Build a Serverless Application Using AWS SAM</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-build-a-serverless-application-using-aws-chalice/">How to Build a Serverless Application Using AWS Chalice</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/design-and-deploy-backend-with-amplify-sandbox/">How to Design Almost Any Backend and Deploy It to AWS with No Code</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-add-authentication-to-a-vue-app-using-aws-amplify/">How to Add Authentication to a Vue App Using AWS Amplify</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/build-a-screenshot-capture-api-using-terraform-aws-api-gateway-and-aws-lambda/">How to Build a Screenshot Capture API Using Terraform, AWS API Gateway, and AWS Lambda</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/build-your-own-serverless-subscriber-list-with-go-and-aws/">How to Build Your Own Serverless Subscriber List with Go and AWS</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-secure-your-workloads-on-aws/">How to Secure Your Workloads on AWS</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/ultimate-guide-to-aws-amplify-and-reacxt/">How to Build a Full Stack App with AWS Amplify and React</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-use-github-actions-to-deploy-a-next-js-website-to-aws-s3/">How to Use Github Actions to Deploy a Next.js Website to AWS S3</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/cost-optimization-in-aws/">How to Optimize your AWS Cloud Architecture Costs</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/build-an-api-with-typescript-and-aws/">The Complete Guide to building an API with TypeScript and AWS</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-build-and-deploy-graphql-server-in-aws-lambda-using-nodejs-and-cloudformation/">How to Build and Deploy a GraphQL Server in AWS Lambda Using Node.js and CloudFormation</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/complete-back-end-system-with-serverless/">How to Build a Complete Back End System with Serverless</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/simple-site-hosting-with-amazon-s3-and-https-5e78017f482a/">Simple Site Hosting with Amazon S3 and HTTPS</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/aws-sysops-adminstrator-associate-certification-exam-course/">Pass the AWS SysOps Administrator Associate Exam With This Free 14-Hour Course</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/ultimate-dynamodb-2020-cheatsheet/">DynamoDB Cheatsheet – Everything you need to know about Amazon Dynamo DB for the 2020 AWS Certified Developer Associate Certification</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/pass-the-aws-developer-associate-exam-with-this-free-16-hour-course/">Pass the AWS Developer Associate Exam With This Free 16-Hour Course</a></li>
</ul>
<h3 id="heading-google-cloud-platform-gcp">Google Cloud Platform (GCP)</h3>
<ul>
<li><a target="_blank" href="https://www.freecodecamp.org/news/google-cloud-platform-from-zero-to-hero/">Google Cloud Platform Tutorial: From Zero to Hero with GCP</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-create-and-connect-to-google-cloud-virtual-machine-with-ssh-81a68b8f74dd/">How to Create and Connect to Google Cloud Virtual Machine with SSH</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-pass-almost-every-google-cloud-professional-certification-exam/">How to Pass Almost Every Google Cloud Platform Professional Certification Exam</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-setup-laravel-6-on-google-cloud-run-with-continuous-integration-ci-step-by-step/">How to Run Laravel on Google Cloud Run with Continuous Integration - a Step by Step Guide</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-perform-crud-operations-using-blazor-and-google-cloud-firestore-52890b06e2f8/">How to perform CRUD operations using Blazor and Google Cloud Firestore</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/the-firestore-tutorial-for-2020-learn-by-example/">The JavaScript + Firestore Tutorial for 2020: Learn by Example</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/firestoreliving/">Firestore: How to Stay Within the Limits of Firebase's New Database Free Tier</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/build-an-instagram-clone-with-react-native-firebase-firestore-redux-and-expo/">Build an Instagram Clone with React Native, Firebase Firestore, Redux, and Expo</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-get-started-with-firebase-using-python/">How to Get Started with Firebase Using Python</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-add-authentication-to-a-vue-app-using-firebase/">How to Add Authentication to a Vue App Using Firebase</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-build-an-android-app-with-firebase-and-kotlin/">How to Build an Android App with Firebase and Kotlin</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/authenticate-users-and-save-data-in-a-database-using-firebase/">How to Authenticate Users And Save Data in a Database Using Firebase</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/google-login-with-react-native-and-firebase/">How to Set Up Google Login in React Native &amp; Firebase</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-build-a-todo-application-using-reactjs-and-firebase/">How to Build a TodoApp Using ReactJS and Firebase</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-build-an-event-booking-app-using-html-css-javascript-and-firebase/">How to Build an Event Booking App Using HTML, CSS, JavaScript, and Firebase</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/netlify-functions-firebase-and-graphql-working-together-at-last/">How I Got Netlify Functions, Firebase, and GraphQL to Work Together At Last</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/you-cant-get-there-from-here-how-netlify-lambda-and-firebase-led-me-to-a-serverless-dead-end/">You Can't Get There from Here: How Netlify Lambda and Firebase Led Me to a Serverless Dead End</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/evernote-clone-react-firebase-tutorial/">Build an Evernote clone using React and Firebase (Video Tutorial)</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/react-firebase-social-media-app-course/">Learn How to Create a Social Media App from Scratch Using React, Firebase, Redux, and Express</a></li>
</ul>
<h3 id="heading-microsoft-azure">Microsoft Azure</h3>
<ul>
<li><a target="_blank" href="https://www.freecodecamp.org/news/getting-started-with-microsoft-azure/">How to Get Started with Microsoft Azure - Function Apps, HTTP Triggers, and Event Queues</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/introduction-to-azure-function-proxies/">A Quick Introduction to Azure Function Proxies</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/making-sense-of-azure-durable-functions/">Making Sense of Azure Durable Functions</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/an-introduction-to-azure-durable-functions-patterns-and-best-practices-b1939ae6c717/">An Introduction to Azure Durable Functions: Patterns and Best Practices</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-implement-azure-serverless-with-blazor-web-assembly/">How to Implement Azure Serverless with Blazor WebAssembly</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-use-azure-functions-to-process-high-throughput-messages-996d05d4ab23/">How to Use Azure Functions to Process High Throughput Messages</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/azure-fundamentals-course-az900/">Azure Fundamentals Certification (AZ-900) – Pass the Exam With This Free 3-Hour Course</a></li>
</ul>
<h2 id="heading-how-to-learn-devops">How to Learn DevOps</h2>
<p>Now that you know virtualization, containerization, and cloud computing, it's time to take things to the next level.</p>
<p>DevOps is equal parts software development and IT operations. If you're involved in DevOps, not only can you build an application, but you can spin up the VMs, deploy the app, monitor the servers, and scale the app and resources as more people start using it.</p>
<p>There's a lot to cover, and these articles should get you started on your DevOps path.</p>
<h3 id="heading-general-devops">General DevOps</h3>
<ul>
<li><a target="_blank" href="https://www.freecodecamp.org/news/2019-web-developer-roadmap/">The 2020 Web Developer Roadmap – A Visual Guide to Becoming a Front End, Back End, or DevOps Developer</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-make-your-startups-cloud-more-stable-4-practical-devops-tips-823e4202518c/">How to Make Your Startup’s Cloud More Stable: 4 Practical DevOps Tips</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/docker-devops-course/">Learn DevOps Basics with This Free 2-hour Docker Course</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/devops-prerequisites-course/">Want to learn DevOps? This Free 3-Hour Course will Teach You the Prerequisites to Get Started</a></li>
</ul>
<h3 id="heading-travis-ci">Travis CI</h3>
<ul>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-stop-errors-before-they-ever-hit-your-codebase-with-travis-ci-and-eslint-7a5a6b1fcd4a/">How to Stop Errors Before They Ever Hit Your Codebase with Travis CI and ESLint</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/learn-how-to-automate-deployment-on-github-pages-with-travis-ci/">How to Automate Deployment on GitHub-Pages with Travis CI</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/advanced-automatic-deployment-with-travis-ci-1da32f7930ce/">How to Set Up Advanced Automatic Deployment with Travis CI</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-wire-travis-ci-to-do-the-heavy-lifting-in-your-workflow-72693c855696/">How to Use Travis CI and GitHub for Your Web Development Workflow’s Heavy Lifting</a></li>
</ul>
<h3 id="heading-jenkins">Jenkins</h3>
<ul>
<li><a target="_blank" href="https://www.freecodecamp.org/news/you-rang-mlord-docker-in-docker-with-jenkins-declarative-pipelines/">You Rang, M'Lord? Docker in Docker with Jenkins Declarative Pipelines</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-make-an-ios-on-demand-build-system-with-jenkins-and-fastlane-8eb1e02c73d1/">How to Make an iOS On-demand Build System with Jenkins and Fastlane</a></li>
</ul>
<h3 id="heading-gocd">GoCD</h3>
<ul>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-integrate-dangerjs-into-gocd-pipelines-7f930932ea07/">How to Integrate DangerJS into GoCD Pipelines</a></li>
</ul>
<h3 id="heading-ansible">Ansible</h3>
<ul>
<li><a target="_blank" href="https://www.freecodecamp.org/news/ansible-manage-aws/">How to Use Ansible to Manage Your AWS Resources</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/why-you-might-need-ansible-and-not-even-know-it-d33b6e4b2ebe/">Why You Might Need Ansible and Not Even Know It</a></li>
</ul>
<h3 id="heading-chef">Chef</h3>
<ul>
<li><a target="_blank" href="https://www.freecodecamp.org/news/an-introduction-to-chef-and-infrastructure-as-code-7d8ad2689b8/">A Complete Beginner’s Guide to Chef and Infrastructure As Code</a></li>
</ul>
<h3 id="heading-kafka">Kafka</h3>
<ul>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-implement-the-change-data-capture-pattern-using-kafka-streams/">How to Implement Change Data Capture Using Kafka Streams</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/what-to-consider-for-painless-apache-kafka-integration-df559e828876/">What to Consider for Painless Apache Kafka Integration</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-ingest-data-into-neo4j-from-a-kafka-stream-a34f574f5655/">How to Ingest Data into Neo4j from a Kafka Stream</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/simple-chatops-with-kafka-grafana-prometheus-and-slack-764ece59e707/">How to Build a Aimple Chatops Bot with Kafka, Grafana, Prometheus, and Slack</a></li>
</ul>
<h3 id="heading-terraform">Terraform</h3>
<ul>
<li><a target="_blank" href="https://www.freecodecamp.org/news/terraform-workflow-working-individually-and-in-a-team/">Terraform Workflow: How to Work Individually and in a Team</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/terraform-modules-explained/">What Are Terraform Modules and How Do They Work?</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-use-terraform-to-automate-your-aws-cloud-infrastructure-tutorial/">How to Use Terraform to Automate Your AWS Cloud Infrastructure – Tutorial</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-extend-your-aws-infrastructure/">How to Extend Your AWS Infrastructure with Direct Connect Using Terraform</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-manage-wavefront-resources-using-terraform/">How to Manage Wavefront Resources Using Terraform</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/build-a-screenshot-capture-api-using-terraform-aws-api-gateway-and-aws-lambda/">How to Build a Screenshot Capture API Using Terraform, AWS API Gateway, and AWS Lambda</a></li>
</ul>
<h2 id="heading-in-closing">In Closing</h2>
<p>Thanks for reading this far. If you found this compilation of resources helpful, share it with your friends so they can learn something, too.</p>
<p>Was there an article or video tutorial you liked? Did I miss anything? Let me know over on <a target="_blank" href="https://twitter.com/kriskoishigawa">Twitter</a>.</p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ Git Clone Branch – How to Clone a Specific Branch ]]>
                </title>
                <description>
                    <![CDATA[ Unlike older centralized version control systems such as SVN and CVS, Git is distributed. Every developer has the full history and control of their code locally or remotely. They can also access or manipulate several parts of the code as they deem fi... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/git-clone-branch-how-to-clone-a-specific-branch/</link>
                <guid isPermaLink="false">66d84e0f29e30bc0ad477548</guid>
                
                    <category>
                        <![CDATA[ 100DaysOfCode ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Git ]]>
                    </category>
                
                    <category>
                        <![CDATA[ GitHub ]]>
                    </category>
                
                    <category>
                        <![CDATA[ programing ]]>
                    </category>
                
                    <category>
                        <![CDATA[ terminal ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Bolaji Ayodeji ]]>
                </dc:creator>
                <pubDate>Tue, 30 Jun 2020 18:56:31 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/news/content/images/2020/06/article-banner--1-.gif" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>Unlike older centralized version control systems such as SVN and CVS, Git is distributed. Every developer has the full history and control of their code locally or remotely. They can also access or manipulate several parts of the code as they deem fit from different locations.</p>
<p>Since Linus Torvalds (the famous creator of the Linux operating system kernel) created Git in 2005 for Linux kernel development, it has become the most widely used modern version control system in the world.</p>
<p>In this article, I'll introduce you to the Git clone and Git branch workflows and I'll show you how you can clone a specific branch based on your needs. Let's begin! ?</p>
<h2 id="heading-prerequisites">Prerequisites</h2>
<ul>
<li><p>Basic knowledge of the terminal</p>
</li>
<li><p>Ability to type commands in the terminal</p>
</li>
<li><p>Git installed (I'll still show you how)</p>
</li>
<li><p>A GitHub account</p>
</li>
<li><p>A smile on your face (Put up that smile friend ?)</p>
</li>
</ul>
<h2 id="heading-quick-introduction-to-git-and-github">Quick Introduction to Git and GitHub</h2>
<p>According to <a target="_blank" href="https://en.wikipedia.org/wiki/Git">Wikipedia</a>,</p>
<blockquote>
<p><strong>Git</strong> is a distributed version control system designed to track changes to a project (code) in software development. It is intended to enforce coordination, collaboration, speed, and efficiency among developers.</p>
</blockquote>
<p><strong>GitHub,</strong> on the other hand, is a web-based hosting service for version control using Git. It offers all of the distributed version control and source code management functionality of Git as well as adding more features for computer code.</p>
<h2 id="heading-how-to-install-git-on-windows">How to Install Git on Windows</h2>
<p>Download and install the latest <a target="_blank" href="https://git-for-windows.github.io/">Git for Windows Installer here.</a></p>
<h2 id="heading-how-to-install-git-on-linux">How to Install Git on Linux</h2>
<p>Here are the commands based on your Linux distro:</p>
<h3 id="heading-debian-or-ubuntu">Debian or Ubuntu</h3>
<pre><code class="lang-python">sudo apt-get update
sudo apt-get install git
</code></pre>
<h3 id="heading-fedora">Fedora</h3>
<pre><code class="lang-python">sudo dnf install git
</code></pre>
<h3 id="heading-centos">CentOS</h3>
<pre><code class="lang-python">sudo yum install git
</code></pre>
<h3 id="heading-arch-linux">Arch Linux</h3>
<pre><code class="lang-python">sudo pacman -Sy git
</code></pre>
<h3 id="heading-gentoo">Gentoo</h3>
<pre><code class="lang-python">sudo emerge --ask --verbose dev-vcs/git
</code></pre>
<h2 id="heading-how-to-install-git-on-a-mac">How to Install Git on a Mac</h2>
<p>Download and install the latest <a target="_blank" href="https://sourceforge.net/projects/git-osx-installer/files/">Git for Mac installer here</a>.</p>
<p>Or you can type this command:</p>
<pre><code class="lang-python">brew install git
</code></pre>
<p>Now that we've got Git installed, let's move on to the tutorial.</p>
<h2 id="heading-introduction-to-git-clone">Introduction to Git Clone</h2>
<p>Git allows you to manage and version your project(s) in a "repository". This repository is stored on a web-based hosting service for version control, like GitHub.</p>
<p>You can then clone this repository to your local machine and have all the files and branches locally (I'll explain more about branches soon).</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/06/Screenshot-2020-06-23-at-5.47.48-AM.png" alt="Image" width="600" height="400" loading="lazy"></p>
<p>For example, you can clone freeCodeCamp's repository with SSH like so:</p>
<pre><code class="lang-python">git clone git@github.com:freeCodeCamp/freeCodeCamp.git
</code></pre>
<h2 id="heading-introduction-to-git-branches">Introduction to Git Branches</h2>
<p>When working on a project, you will likely have different features. And multiple contributors will be working on this project and its features.</p>
<p>Branches allow you to create a "playground" with the same files in the <code>master</code> branch. You can use this branch to build independent features, test new features, make breaking changes, create fixes, write docs or try out ideas without breaking or affecting the production code. When you're done, you merge the branch into the production <code>master</code> branch.</p>
<p>Branching is a core concept in Git which is also used in GitHub to manage workflows of different versions of one project. The <code>master</code> branch is always the default branch in a repository that is most often considered "production and deployable code". New branches like <code>passwordless-auth</code> or <code>refactor-signup-ux</code> can be created from the <code>master</code> branch.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/06/Screenshot-2020-06-22-at-2.47.53-AM.png" alt="Image" width="600" height="400" loading="lazy"></p>
<p><em>All branches in freeCodeCamp's repository</em></p>
<h2 id="heading-how-to-clone-git-branches">How to Clone Git Branches</h2>
<p>While you can clone repositories with the <code>git clone</code> command, keep in mind that this clones the branch and the remote <code>HEAD</code>. This is usually <code>master</code> by default and includes all other branches in the repository.</p>
<p>So when you clone a repository, you clone the <code>master</code> and all other branches. This means you will have to checkout another branch yourself.</p>
<p>Let's say your task on a project is to work on a feature to add passwordless authentication to a user dashboard. And this feature is in the <code>passwordless-auth</code> branch.</p>
<p>You really don't need the <code>master</code> branch since your "feature branch" will be merged into <code>master</code> afterward. How then do you clone this <code>passwordless-auth</code> branch without fetching all other branches with "a bunch of files you don't need"?</p>
<p>I created this sample repository to explain this. This repository holds a simple blog built with Nextjs and has four dummy branches:</p>
<ul>
<li><p>master</p>
</li>
<li><p>dev</p>
</li>
<li><p>staging</p>
</li>
<li><p>passwordless-auth</p>
</li>
</ul>
<p>In Nextjs, any file inside the folder <code>pages/api</code> is mapped to the <code>/api/*</code> path and will be treated as an API endpoint instead of a <code>page</code>. In our repository, I have created different dummy APIs <a target="_blank" href="https://github.com/BolajiAyodeji/nextjs-blog/tree/master/pages/api">in this directory</a> to make each branch different.</p>
<p>The <code>master</code> branch holds the file <strong>pages/api/hello.js</strong> while <code>passwordless-auth</code> holds the file <strong>pages/api/auth.js</strong>. Each file just returns a dummy text response. See <code>master</code>'s hello API response <a target="_blank" href="https://nextjs-blog.bolajiayodeji.vercel.app/api/hello">here</a> (with a special message for you ?).</p>
<p>Let's clone the repository:</p>
<pre><code class="lang-python">git clone git@github.com:BolajiAyodeji/nextjs-blog.git
</code></pre>
<p>This gives us access to all branches in this repository and you can easily toggle between each to see each version and its files.</p>
<pre><code class="lang-python">git branch -a
</code></pre>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/06/Screenshot-2020-06-22-at-4.51.56-AM.png" alt="Image" width="600" height="400" loading="lazy"></p>
<p>Wondering where the <strong>remotes/origin/..</strong> branches came from?</p>
<p>When you clone a repository, you pull data from a repository on the internet or an internal server known as the <strong>remote</strong>. The word origin is an alias created by your Git to replace the remote URL (you can change or specify another alias if you want).</p>
<p>These <strong>remotes/origin/..</strong> branches point you back to the origin repository you cloned from the internet so you can still perform pull/push from the origin.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/06/Screenshot-2020-06-23-at-5.24.43-AM.png" alt="Image" width="600" height="400" loading="lazy"></p>
<p>So when you clone <code>master</code> onto your machine, <code>remotes/origin/master</code> is the original <code>master</code> branch on the internet, and <code>master</code> is on your local machine. So you will pull/push from and to the <code>remotes/origin/master</code>.</p>
<p>In summary <strong>Remote</strong> is the URL that points you to the repository on the internet while <strong>Origin</strong> is an alias for this remote URL.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/06/Screenshot-2020-06-23-at-5.28.06-AM.png" alt="Image" width="600" height="400" loading="lazy"></p>
<h2 id="heading-how-to-clone-a-specific-branch">How to Clone a Specific Branch</h2>
<p>Now let's clone a specific branch from our demo repository. There are two ways to clone a specific branch. You can either:</p>
<ul>
<li><p>Clone the repository, fetch all branches, and checkout to a specific branch immediately.</p>
</li>
<li><p>Clone the repository and fetch only a single branch.</p>
</li>
</ul>
<h3 id="heading-option-one">Option One</h3>
<pre><code class="lang-python">git clone --branch &lt;branchname&gt; &lt;remote-repo-url&gt;
</code></pre>
<p>or</p>
<pre><code class="lang-python">git clone -b &lt;branchname&gt; &lt;remote-repo-url&gt;
</code></pre>
<p>With this, you fetch all the branches in the repository, checkout to the one you specified, and the specific branch becomes the configured local branch for <code>git push</code> and <code>git pull</code> . But you still fetched all files from each branch. This might not be what you want right? ?</p>
<p>Let's test it:</p>
<pre><code class="lang-python"> git clone -b passwordless-auth git@github.com:BolajiAyodeji/nextjs-blog.git
</code></pre>
<p>This automatically configures <code>passwordless-auth</code> as the local branch but still tracks other branches.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/06/Screenshot-2020-06-23-at-5.30.01-AM.png" alt="Image" width="600" height="400" loading="lazy"></p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/06/Screenshot-2020-06-30-at-3.27.31-AM.png" alt="Image" width="600" height="400" loading="lazy"></p>
<h3 id="heading-option-two">Option Two</h3>
<pre><code class="lang-python">git clone --branch &lt;branchname&gt; --single-branch &lt;remote-repo-url&gt;
</code></pre>
<p>or</p>
<pre><code class="lang-python">git clone -b &lt;branchname&gt; --single-branch &lt;remote-repo-url&gt;
</code></pre>
<p>This performs the same action as option one, except that the <code>--single-branch</code> option was introduced in Git version 1.7.10 and later. It allows you to only fetch files from the specified branch without fetching other branches.</p>
<p>Let's test it:</p>
<pre><code class="lang-python">git clone -b passwordless-auth --single-branch git@github.com:BolajiAyodeji/nextjs-blog.git
</code></pre>
<p>This automatically configures <code>passwordless-auth</code> as the local branch and only tracks this branch.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/06/Screenshot-2020-06-23-at-5.31.12-AM.png" alt="Image" width="600" height="400" loading="lazy"></p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/06/Screenshot-2020-06-30-at-3.29.07-AM.png" alt="Image" width="600" height="400" loading="lazy"></p>
<p>If you run <code>cd pages/api</code> you'll find the <code>auth.js</code> file in the <code>passwordless-auth</code> branch as expected from the previous setup.</p>
<h2 id="heading-conclusion">Conclusion</h2>
<p>You might be running out of internet or storage space but you need to work on a task in a specific branch. Or you might want to clone a specific branch with limited files for various reasons. Fortunately, Git provides you the flexibility to do this. Flex your muscles and try it out, there's much more "Git" to learn.</p>
<p>One at a time, yeah? ✌?</p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ How to Test and Play with Web APIs the Easy Way with Postman ]]>
                </title>
                <description>
                    <![CDATA[ In a world where static websites and apps increasingly depend on separately maintained APIs, it can be hard to figure out how they work by just playing around in the browser.  So how can we use Postman to both test our existing APIs and understand ho... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/how-to-test-and-play-with-web-apis-the-easy-way-with-postman/</link>
                <guid isPermaLink="false">66b8e36e47e3b55b9fb6ee45</guid>
                
                    <category>
                        <![CDATA[ api ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Developer Tools ]]>
                    </category>
                
                    <category>
                        <![CDATA[ programing ]]>
                    </category>
                
                    <category>
                        <![CDATA[ QA ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Quality Assurance ]]>
                    </category>
                
                    <category>
                        <![CDATA[ REST API ]]>
                    </category>
                
                    <category>
                        <![CDATA[ software development ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Software Engineering ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Software Testing ]]>
                    </category>
                
                    <category>
                        <![CDATA[ tech  ]]>
                    </category>
                
                    <category>
                        <![CDATA[ technology ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Testing ]]>
                    </category>
                
                    <category>
                        <![CDATA[ tools ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Colby Fayock ]]>
                </dc:creator>
                <pubDate>Tue, 30 Jun 2020 16:34:32 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/news/content/images/2020/06/postman.jpg" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>In a world where static websites and apps increasingly depend on separately maintained APIs, it can be hard to figure out how they work by just playing around in the browser. </p>
<p>So how can we use Postman to both test our existing APIs and understand how they work?</p>
<ul>
<li><a class="post-section-overview" href="#heading-what-is-postman">What is Postman?</a></li>
<li><a class="post-section-overview" href="#heading-what-are-we-going-to-build-learn">What are we going to build / learn?</a></li>
<li><a class="post-section-overview" href="#heading-part-0-getting-set-up-with-postman">Part 0: Getting set up with Postman</a></li>
<li><a class="post-section-overview" href="#heading-part-1-an-introduction-to-postman">Part 1: An introduction to Postman</a></li>
<li><a class="post-section-overview" href="#heading-part-2-creating-a-new-postman-request-to-get-info-about-squirtle">Part 2: Creating a new Postman request to GET info about Squirtle</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/p/a02335e1-4f9a-453d-8916-db6b8419cf99/part-3-creating-a-collection-of-requests-in-postman-for-the-pok-api">Part 3: Creating a collection of requests in Postman for the PokéAPI</a></li>
<li><a class="post-section-overview" href="#heading-part-4-making-post-requests-with-postman-to-translate-sentences-to-sound-like-yoda">Part 4: Making POST requests with Postman to translate sentences to sound like Yoda</a></li>
<li><a class="post-section-overview" href="#heading-part-5-authenticating-requests-to-the-lord-of-the-rings-api-with-an-api-key">Part 5: Authenticating requests to the Lord of the Rings API with an API Key</a></li>
</ul>
<div class="embed-wrapper">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/KFuaybrXCdw" style="aspect-ratio: 16 / 9; width: 100%; height: auto;" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen="" loading="lazy"></iframe></div>
<h2 id="heading-what-is-postman">What is Postman?</h2>
<p><a target="_blank" href="https://www.postman.com/">Postman</a> is a tool teams can use to reliably test APIs using easy to use configurations. It comes stocked with features you would expect when dealing with APIs, including authentication, setting headers, customizing the payload, and a bunch more that help reduce the friction of using an API.</p>
<p>And it’s not just for testing. The beauty is that this can be used for many aspects of working with APIs for many different members of the team. Maybe a Project Manager wants to verify that things work or might find it easier to make a change straight with the API, or a QA Engineer needs to make sure everything still works, or a developer wants to actively make changes while working on the API itself.</p>
<p>The best part about it – Postman provides collaboration features. The free tier includes exporting and importing collections of saved API requests as well as creating shared links. If you're part of a team, they have paid tiers that allow you to sync up your collections to make sure everyone has the most recent and up to date collection.</p>
<h2 id="heading-what-are-we-going-to-build-learn">What are we going to build / learn?</h2>
<p>We’re going to walk through two different example APIs to cover the concepts of Postman.</p>
<p>First, we’ll walk through some simple HTTP requests with a <a target="_blank" href="https://pokeapi.co/">public API for Pokémon</a>.</p>
<p>We’ll then use the Yoda Translator API for one part to demonstrate how to make specific HTTP requests.</p>
<p>Once we understand how the basics work, we’ll use the <a target="_blank" href="https://the-one-api.herokuapp.com/">Lord of the Rings API</a> to learn how authentication works with APIs. For this, you’ll need to register for a free account for an API key.</p>
<h2 id="heading-part-0-getting-set-up-with-postman">Part 0: Getting set up with Postman</h2>
<p>Before we get started, you’ll need <a target="_blank" href="https://www.postman.com/downloads/">Postman</a> in order to follow along with this walkthrough. The good news, is Postman is available for free on Mac, Windows, and Linux, so you should be able to find a version that works for you.</p>
<p>Get Postman: <a target="_blank" href="https://www.postman.com/downloads/">https://www.postman.com/downloads/</a></p>
<p>Once downloaded, go through the standard installation instructions, open it up, and we should be ready to go!</p>
<h2 id="heading-part-1-an-introduction-to-postman">Part 1: An introduction to Postman</h2>
<p>The first time you open up Postman you’ll immediately be shown a launchpad with a bunch of options to get started.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/06/postman-launchpad.jpg" alt="Image" width="600" height="400" loading="lazy"></p>
<p>It might seem a bit overwhelming, but let’s break down some of the key concepts that we’ll need to know.</p>
<h3 id="heading-requests">Requests</h3>
<p>A request is kind of what it sounds like, it’s a specific API request. This will be a single type of request, whether it’s a GET or POST to a specific endpoint. You’ll want to create new requests for each type of endpoint which will allow you to move between them when testing.</p>
<h3 id="heading-collections">Collections</h3>
<p>A collection is a group of requests. This is handy for organizing your requests into different groups. This could be as simple as two totally different APIs (ie. Twitter vs Slack) or it could be two different groups of APIs for a single API (ie. Twitter Tweets API vs Twitter Accounts API).</p>
<h3 id="heading-authorization">Authorization</h3>
<p>Authorization is how requests are authenticated with an API, whether by a person making a request or by a computer making that request on your behalf. This commonly comes in the form of an API key which can be a static value assigned to your account or dynamically generated with tools like <a target="_blank" href="https://oauth.net/">OAuth</a>.</p>
<h3 id="heading-environments">Environments</h3>
<p>Environments will allow you to configure your endpoints to use specific variables that make it easier to use the same endpoints between different environments. For instance, you might have the same <code>/profile</code> endpoint on both your production and development environments, but they have different domains. Environments lets you manage a single request with a variable domain.</p>
<h3 id="heading-workspaces">Workspaces</h3>
<p>We won’t go too far into workspaces in this post, but it allows you to manage and organize different sets of collections. Imagine if you want to use Postman for both work and a personal project, you might have a Work workspace as well as a Personal workspace.</p>
<p>For the purposes of this article, we’ll be covering Requests, Collections, and Authorization.</p>
<h2 id="heading-part-2-creating-a-new-postman-request-to-get-info-about-squirtle">Part 2: Creating a new Postman request to GET info about Squirtle</h2>
<p>Now that we have a better understanding of the different terminology, let’s actually create a request.</p>
<p>At the top left of the UI you should see a but orange button that says <strong>New</strong>. Go ahead and click that and then select <strong>Request</strong>.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/06/postman-create-new-request.jpg" alt="Image" width="600" height="400" loading="lazy"></p>
<p>Before we get into the request itself, it requests a few things.</p>
<p>This first thing requires is a name. We’re going to start off by requesting information about the Pokémon Squirtle, so let’s name this “Pokémon - Squirtle”.</p>
<p>It also requires a collection, so click <strong>Create Collection</strong> and let’s name the collection “My Favorite Pokémon”.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/06/postman-configure-new-request.jpg" alt="Image" width="600" height="400" loading="lazy"></p>
<p>Click the orange checkmark button next to the collection name then hit <strong>Save</strong>.</p>
<p>At this point we’ll have a new request, so let’s build that request.</p>
<p>There are two things we’ll first need to fill out for our first request:</p>
<ul>
<li><strong>Request type:</strong> GET, POST, PUT, etc - we’ll use GET</li>
<li><strong>Request URL:</strong> The endpoint for your API request - for our request we’ll use <a target="_blank" href="https://pokeapi.co/api/v2/pokemon/squirtle/">https://pokeapi.co/api/v2/pokemon/squirtle/</a></li>
</ul>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/06/postman-squirtle-pokemon-get.jpg" alt="Image" width="600" height="400" loading="lazy"></p>
<p>And once you make sure those are correct, you can simply hit the blue <strong>Send</strong> button on the right and we’ve successfully made our first request!</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/06/postman-squirtle-pokemon-get-success.jpg" alt="Image" width="600" height="400" loading="lazy"></p>
<p>We immediately get a few things we can see:</p>
<ul>
<li><strong>Body:</strong> at the bottom we should now see the response body of the API request. For our Squirtle API, we should have a JSON object with data like <code>abilities</code>, <code>base_experience</code>, and <code>forms</code>.</li>
<li><strong>Status:</strong> on the right, we should see the HTTP status code. “200 Ok” is a good sign and it means it was successful!</li>
<li><strong>Time:</strong> simply how long the request took to finish</li>
<li><strong>Size:</strong> the size in KB (in our example) of the response data</li>
</ul>
<p>You can also hover over Status, Time, and Size and get a more in depth look at each option.</p>
<p>So we made our first request!</p>
<p>Once thing to notice before we move on is that our request looks like it’s in a browser tab. If we’re done with that particular request, we can close the tab and click <strong>Save</strong> to make sure all of our changes are there for next time!</p>
<h2 id="heading-part-3-creating-a-collection-of-requests-in-postman-for-the-pokeapi">Part 3: Creating a collection of requests in Postman for the PokéAPI</h2>
<p>Now that we’ve created a request, let’s create a collection of them. Technically we already had to create a new collection for Part 2, but we’ll create a new one to learn how collections themselves work.</p>
<p>At the top left of the UI, click the orange <strong>New</strong> button again and select <strong>Collection</strong>.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/06/postman-create-new-collection.jpg" alt="Image" width="600" height="400" loading="lazy"></p>
<p>Similar to a request, it asks for a name so let’s call this “PokéAPI”. Optionally you can add a description, then click <strong>Create</strong> at the bottom.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/06/postman-configure-new-collection.jpg" alt="Image" width="600" height="400" loading="lazy"></p>
<p>On the left, you’ll now see your collection. You can select and expand the folder since we’ll be working with it.</p>
<p>Before we add a request, the PokéAPI has different types of requests, so it makes sense to organize it a little more thoroughly. So let’s click the three dots next to the PokéAPI collection and select <strong>Add Folder</strong>.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/06/postman-add-folder-to-collection.jpg" alt="Image" width="600" height="400" loading="lazy"></p>
<p>Similar to the others, this asks for a name. Folders are kind of like collections inside of a collection, so you get similar options. Let’s name this one “Pokémon” and click the orange <strong>Save</strong> button like before.</p>
<p>Now let’s add our requests! First, click the three dots next to the Pokémon folder, similar to how we added a folder to the collection, but this time select <strong>Add Request</strong>.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/06/postman-add-request-to-collection.jpg" alt="Image" width="600" height="400" loading="lazy"></p>
<p>Let’s name this request “Pokemon”. While it might be confusing that we have a Pokemon request inside of the Pokémon folder, Pokemon is just one of the endpoints of the Pokémon group.</p>
<p>Now, let’s use the same exact API that we used with our Squirtle request before:</p>
<ul>
<li><strong>Request Type:</strong> GET</li>
<li><strong>Request URL:</strong> <a target="_blank" href="https://pokeapi.co/api/v2/pokemon/squirtle/">https://pokeapi.co/api/v2/pokemon/squirtle/</a></li>
</ul>
<p>And similar to before, when we hit the blue <strong>Send</strong> button, we should see a successful request!</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/06/postman-successful-get-request-squirtle.jpg" alt="Image" width="600" height="400" loading="lazy"></p>
<p>Now let’s add another request. Follow the same process as before to create a new request under the PokéAPI Pokémon folder and let’s name this request “Abilities”.</p>
<p>If you scroll through the response from the first Squirtle endpoint, you see a lot of other API urls. At the top, we have <code>abilities</code> and we have two different ones — “torrent” and “rain-dish”.</p>
<p>Choose your favorite Squirtle ability and copy the <code>url</code> value into the new Abilities request we just created, I’m going to use <code>rain-dish</code>.</p>
<p>We can leave the Request Type as GET, hit the blue <strong>Send</strong> button, and we can again see a successful response!</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/06/postman-successful-request-squirtle-abilities.jpg" alt="Image" width="600" height="400" loading="lazy"></p>
<p>Here we get a lot of information about our Squirtle ability Rain Dish and some of the details come in different languages which is cool!</p>
<p>So now we have a new PokéAPI collection with a Pokémon folder representing the group of Pokémon API endpoints including Pokemon and abilities.</p>
<p>We’re going to stop Part 3 with those 2 requests, but feel free to continue on and add as many of the PokéAPI requests as you’d like!</p>
<h2 id="heading-part-4-making-post-requests-with-postman-to-translate-sentences-to-sound-like-yoda">Part 4: Making POST requests with Postman to translate sentences to sound like Yoda</h2>
<p>So far we’ve only made GET requests, but what if we wanted to make a POST request where we need to actually send some data?</p>
<p>For making a POST request, we’re going to use the Yoda Translator API from funtranslations.com. While this API only takes a single parameter, it’s still a good public endpoint we can use to understand the concept.</p>
<p>First, let’s create a new collection with a new request:</p>
<ul>
<li><strong>Collection:</strong> Fun Translations</li>
<li><strong>Request:</strong> Yoda</li>
</ul>
<p>This time, instead of a GET request, our request configuration will be:</p>
<ul>
<li><strong>Request Type:</strong> POST</li>
<li><strong>Request URL:</strong> <a target="_blank" href="https://api.funtranslations.com/translate/yoda">https://api.funtranslations.com/translate/yoda</a></li>
</ul>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/06/postman-new-request-yoda-api.jpg" alt="Image" width="600" height="400" loading="lazy"></p>
<p>Now this time, if we hit the blue <strong>Send</strong> button, we’ll notice we don’t get a successful 200 response, we get a 400!</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/06/postman-yoda-api-bad-request.jpg" alt="Image" width="600" height="400" loading="lazy"></p>
<p>We never actually set up any data to be posted to the API and it requires that data, so let’s add it.</p>
<p>Right below the <strong>Request URL</strong>, click <strong>Body</strong>. Then instead of none, select <strong>raw</strong> as the body type. Finally, on the far right of the types, change <strong>Text</strong> to <strong>JSON</strong>.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/06/postman-yoda-request-body-type.jpg" alt="Image" width="600" height="400" loading="lazy"></p>
<p>Then, in the space below it, you can add the following:</p>
<pre><code class="lang-json">{
    <span class="hljs-attr">"text"</span>: <span class="hljs-string">"Hello, I am learning how to test APIs with Postman!"</span>
}
</code></pre>
<p>And now click the blue <strong>Send</strong> button again and we get a successful response!</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/06/postman-successful-post-body-yoda-api.jpg" alt="Image" width="600" height="400" loading="lazy"></p>
<p>We can apply this concept to pretty much any API. Postman doesn’t only permit you to post JSON, it allows you to use the other formats that we see listed in the Body Type section, meaning you have a lot of options depending on what the API you’re using requires.</p>
<h2 id="heading-part-5-authenticating-requests-to-the-lord-of-the-rings-api-with-an-api-key">Part 5: Authenticating requests to the Lord of the Rings API with an API Key</h2>
<p>For the rest of the walkthrough, we’re going to use the Lord of the Rings API.</p>
<p>First up, the Lord of the Rings API requires authentication in order to make requests using an API key. So to start, you’ll before we dive in, you’ll need to go <a target="_blank" href="https://the-one-api.herokuapp.com/sign-up">create a free account</a>.</p>
<p><a target="_blank" href="https://the-one-api.herokuapp.com/sign-up">https://the-one-api.herokuapp.com/sign-up</a></p>
<p>Once you sign up and log in, the first thing you’ll see is your API key! Either copy this key down or remember where you can find it for later. If you leave the page, you can always grab it by navigating to <strong>Welcome</strong> and then <strong>Account</strong> in the navigation of the API website.</p>
<p>To get started, let’s first create a new collection and request:</p>
<ul>
<li><strong>Collection:</strong> Lord of the Rings</li>
<li><strong>Folder:</strong> Movie</li>
<li><strong>Request:</strong> All Movies</li>
<li><strong>Request Type:</strong> GET</li>
<li><strong>Request URL:</strong> <a target="_blank" href="https://the-one-api.herokuapp.com/v1/movie">https://the-one-api.herokuapp.com/v1/movie</a></li>
</ul>
<p>Once you’re set with the above, click <strong>Send</strong>, and you’ll notice immediately it gives a response that says 401 and that it’s unauthenticated.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/06/postman-unauthorized-request-lord-of-the-rings-api.jpg" alt="Image" width="600" height="400" loading="lazy"></p>
<p>Because this API requires the API key, this is exactly what we expected. So let’s click on the <strong>Authorization</strong> tab. We can then select a <strong>Type</strong> of <strong>Bearer Token</strong>, and on the right, we can paste in our key that we just set up with the Lord of the Rings API.</p>
<p>And as soon as we hit <strong>Send</strong>, we now see a successful response!</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/06/postman-authorized-successful-lord-of-the-rings-api-request.jpg" alt="Image" width="600" height="400" loading="lazy"></p>
<p>This worked really great, but what if we have a bunch of requests that use a single key. Do we have to manage that on each request?</p>
<p>Instead of managing it on each individual request, we can manage it on the collection. Let’s first build another request.</p>
<p>Under our Lord of the Rings collection and in the Movie folder, create a new request:</p>
<ul>
<li><strong>Request:</strong> Quote by Movie ID</li>
<li><strong>Request Type:</strong> GET</li>
<li><strong>Request URL:</strong> <a target="_blank" href="https://the-one-api.herokuapp.com/v1/movie/%7Bid%7D">https://the-one-api.herokuapp.com/v1/movie/{id}</a></li>
</ul>
<p>In this request, let’s use an ID from the response of the first request, I’m going to use <code>5cd95395de30eff6ebccde5b</code> which is the ID of The Two Towers, so the request URL will look like:</p>
<pre><code>https:<span class="hljs-comment">//the-one-api.herokuapp.com/v1/movie/5cd95395de30eff6ebccde5b</span>
</code></pre><p><img src="https://www.freecodecamp.org/news/content/images/2020/06/postman-inherit-authorization-from-parent.jpg" alt="Image" width="600" height="400" loading="lazy"></p>
<p>Now, instead of setting our token in the request Authorization, we’re going to leave the type as <strong>Inherit auth from parent</strong>. Click on the three dots next to the collection and select <strong>Edit</strong>.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/06/postman-edit-collection.jpg" alt="Image" width="600" height="400" loading="lazy"></p>
<p>Here, we’re going to do the same exact thing we did with the first request but on the Collection configuration. Select the <strong>Authorization</strong> tab, under type select <strong>Bearer Token</strong>, and in the <strong>Token</strong> field again paste your token.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/06/postman-add-authorization-api-key-token-to-collection.jpg" alt="Image" width="600" height="400" loading="lazy"></p>
<p>Finally, click <strong>Update</strong> and hit the blue <strong>Send</strong> button again and we can see a successful request!</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/06/postman-authorized-request-inherit-token-from-parent.jpg" alt="Image" width="600" height="400" loading="lazy"></p>
<p>We can now go back to our All Movies request and update the Authorization to use a Type of Inherit auth from parent and it should still continue to work!</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/06/postman-successful-request-lord-of-the-rings-api.jpg" alt="Image" width="600" height="400" loading="lazy"></p>
<h2 id="heading-what-else-can-we-do-with-postman">What else can we do with Postman?</h2>
<p>While I covered a lot of the basics, there’s quite a lot more you can do with Postman. Here are a few of my favorites.</p>
<h3 id="heading-environment-variables">Environment Variables</h3>
<p>If you’re working as a developer on a project, it’s likely that your team uses multiple environments, such as a development and production environment. Instead of creating and maintaining completely separate requests, you can add an environment variable and instead change that variable when switching between environments!</p>
<p>Variables apply to many scenarios, but that’s a common use. Check out Postman’s docs to learn how.</p>
<p><a target="_blank" href="https://learning.postman.com/docs/postman/variables-and-environments/variables/">https://learning.postman.com/docs/postman/variables-and-environments/variables/</a></p>
<h3 id="heading-import-and-export-collections-and-data">Import and Export Collections and Data</h3>
<p>A great thing about Postman is once you have your requests all organized, you can export them for others to use. This also means that you can import collections from other team members. This makes it much easier to make sure everyone’s using the same collection.</p>
<p>Bonus: you can even store these files in a Git repository, as they’re just JSON.</p>
<p>But keep in mind - if you’re using Authorization on the collection like we went over in this guide, you’ll want to make sure you don’t include that when exporting your collection.</p>
<p><a target="_blank" href="https://learning.postman.com/docs/postman/collections/importing-and-exporting-data/">https://learning.postman.com/docs/postman/collections/importing-and-exporting-data/</a></p>
<h3 id="heading-automated-testing">Automated testing</h3>
<p>Once you have a set of requests in a collection and even better, if you’re storing them in Github, you can begin to use those requests as part of a way to manage automated testing of your API.</p>
<p>While there are a few solutions for doing this, Postman includes a Collection runner built right into the app and <a target="_blank" href="https://learning.postman.com/docs/postman/collection-runs/command-line-integration-with-newman/">Newman</a> is a command line tool that lets you run tests right from the terminal.</p>
<p><a target="_blank" href="https://www.postman.com/use-cases/api-testing-automation/">https://www.postman.com/use-cases/api-testing-automation/</a></p>
<h2 id="heading-whats-your-favorite-way-to-test-and-play-with-apis">What’s your favorite way to test and play with APIs?</h2>
<p><a target="_blank" href="https://twitter.com/colbyfayock">Share with me on Twitter!</a></p>
<div id="colbyfayock-author-card">
  <p>
    <a href="https://twitter.com/colbyfayock">
      <img src="https://res.cloudinary.com/fay/image/upload/w_2000,h_400,c_fill,q_auto,f_auto/w_1020,c_fit,co_rgb:007079,g_north_west,x_635,y_70,l_text:Source%20Sans%20Pro_64_line_spacing_-10_bold:Colby%20Fayock/w_1020,c_fit,co_rgb:383f43,g_west,x_635,y_6,l_text:Source%20Sans%20Pro_44_line_spacing_0_normal:Follow%20me%20for%20more%20JavaScript%252c%20UX%252c%20and%20other%20interesting%20things!/w_1020,c_fit,co_rgb:007079,g_south_west,x_635,y_70,l_text:Source%20Sans%20Pro_40_line_spacing_-10_semibold:colbyfayock.com/w_300,c_fit,co_rgb:7c848a,g_north_west,x_1725,y_68,l_text:Source%20Sans%20Pro_40_line_spacing_-10_normal:colbyfayock/w_300,c_fit,co_rgb:7c848a,g_north_west,x_1725,y_145,l_text:Source%20Sans%20Pro_40_line_spacing_-10_normal:colbyfayock/w_300,c_fit,co_rgb:7c848a,g_north_west,x_1725,y_222,l_text:Source%20Sans%20Pro_40_line_spacing_-10_normal:colbyfayock/w_300,c_fit,co_rgb:7c848a,g_north_west,x_1725,y_295,l_text:Source%20Sans%20Pro_40_line_spacing_-10_normal:colbyfayock/v1/social-footer-card" alt="Follow me for more Javascript, UX, and other interesting things!" width="2000" height="400" loading="lazy">
    </a>
  </p>
  <ul>
    <li>
      <a href="https://twitter.com/colbyfayock">? Follow Me On Twitter</a>
    </li>
    <li>
      <a href="https://youtube.com/colbyfayock">?️ Subscribe To My Youtube</a>
    </li>
    <li>
      <a href="https://www.colbyfayock.com/newsletter/">✉️ Sign Up For My Newsletter</a>
    </li>
  </ul>
</div>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ How to Sync VS Code Settings Between Multiple Devices and Environments ]]>
                </title>
                <description>
                    <![CDATA[ All developers like their text editor a certain way, but it can be tough to make sure all of your environments have the same configuration. How can we make sure our VS Code configuration is the same wherever we use it? What is VS Code? What will we ... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/how-to-sync-vs-code-settings-between-multiple-devices-and-environments/</link>
                <guid isPermaLink="false">66b8e36c682e4a25eed261a2</guid>
                
                    <category>
                        <![CDATA[ code ]]>
                    </category>
                
                    <category>
                        <![CDATA[ coding ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Developer Tools ]]>
                    </category>
                
                    <category>
                        <![CDATA[ editor ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Productivity ]]>
                    </category>
                
                    <category>
                        <![CDATA[ programing ]]>
                    </category>
                
                    <category>
                        <![CDATA[ tech  ]]>
                    </category>
                
                    <category>
                        <![CDATA[ technology ]]>
                    </category>
                
                    <category>
                        <![CDATA[ tools ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Visual Studio Code ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Colby Fayock ]]>
                </dc:creator>
                <pubDate>Tue, 16 Jun 2020 14:45:45 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/news/content/images/2020/06/vs-code-settings-sync.jpg" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>All developers like their text editor a certain way, but it can be tough to make sure all of your environments have the same configuration. How can we make sure our VS Code configuration is the same wherever we use it?</p>
<ul>
<li><a class="post-section-overview" href="#heading-what-is-vs-code">What is VS Code?</a></li>
<li><a class="post-section-overview" href="#heading-what-will-we-use">What will we use?</a></li>
<li><a class="post-section-overview" href="#heading-how-does-it-work">How does it work?</a></li>
<li><a class="post-section-overview" href="#heading-step-1-install-settings-sync">Step 1: Install Settings Sync</a></li>
<li><a class="post-section-overview" href="#heading-step-2-authorize-access-to-github">Step 2: Authorize access to Github</a></li>
<li><a class="post-section-overview" href="#heading-step-3-upload-your-current-settings">Step 3: Upload your current settings</a></li>
<li><a class="post-section-overview" href="#heading-step-4-syncing-your-configuration-to-another-environment">Step 4: Syncing your configuration to another environment</a></li>
<li><a class="post-section-overview" href="#heading-step-5-updating-your-configuration">Step 5: Updating your configuration</a></li>
</ul>
<div class="embed-wrapper">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/TR2va67cVkQ" style="aspect-ratio: 16 / 9; width: 100%; height: auto;" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen="" loading="lazy"></iframe></div>
<h2 id="heading-what-is-vs-code">What is VS Code?</h2>
<p><a target="_blank" href="https://code.visualstudio.com/">Visual Studio Code</a>, or VS Code, is an all-inclusive code editor that takes all of the features you want out of working with code and puts them in one editor to make you ultra productive.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/06/visual-studio-code-editor.jpg" alt="Image" width="600" height="400" loading="lazy">
<em>VS Code editor</em></p>
<p>It’s been the “cool kid on the block” for a little while now and has been increasingly growing in popularity at least in the JavaScript community. Microsoft has put a lot of effort into making it something people want to use (and they’re doing a great job at that).</p>
<h2 id="heading-what-will-we-use">What will we use?</h2>
<p>We’re going to use a VS Code extension called <a target="_blank" href="https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync">Settings Sync</a> that makes use of Github’s <a target="_blank" href="https://gist.github.com/">Gist</a> feature to store a private JSON configuration file in the cloud.</p>
<h2 id="heading-how-does-it-work">How does it work?</h2>
<p>The extension uses Github’s OAuth to log in to your Github account. Once approved, VS Code obtains an access token and reaches out to both store and download your settings file to a private Github Gist.</p>
<p>Once it’s set up, you can then configure the extension on any other instance of VS Code and immediately download your configuration to sync up your editor.</p>
<h2 id="heading-step-0-vs-code">Step 0: VS Code</h2>
<p>We’ll assume for this walkthrough you have VS Code already installed. While you don’t need to have any special configuration, having something different than the default (like a <a target="_blank" href="https://code.visualstudio.com/docs/getstarted/themes">color theme</a>) will help you see it work.</p>
<p>Let’s get started!</p>
<h2 id="heading-step-1-install-settings-sync">Step 1: Install Settings Sync</h2>
<p>The first thing we need to do is install the extension. You can do this <a target="_blank" href="https://code.visualstudio.com/docs/editor/extension-gallery">a few ways</a> — you can visit <a target="_blank" href="https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync">the webpage</a> and hit <strong>Install</strong> which will open up VS Code or you can search for the extension in the Extensions panel.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/06/vs-code-settings-sync-1.jpg" alt="Image" width="600" height="400" loading="lazy">
<em>VS Code Settings Sync extension</em></p>
<p>Once installed, it will open up a new tab with the Settings Sync dashboard.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/06/vs-code-settings-sync-dashboard.jpg" alt="Image" width="600" height="400" loading="lazy">
<em>Settings Sync dashboard after installation</em></p>
<h2 id="heading-step-2-authorize-access-to-github">Step 2: Authorize access to Github</h2>
<p>To get started with Github, click the <strong>Login with Github</strong> button in the Settings Sync dashboard.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/06/vs-code-settings-sync-login-with-github.jpg" alt="Image" width="600" height="400" loading="lazy">
<em>Log in to Settings Sync with Github</em></p>
<p>This will open up Github in your default web browser and ask you to log in. While you can use any Github account you want, it would probably make most sense to use your personal account.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/06/vs-code-login-success.jpg" alt="Image" width="600" height="400" loading="lazy">
<em>Successful Github login to Settings Sync</em></p>
<p>Once you’re logged in, you should now see <strong>Success!</strong> in your browser.</p>
<h2 id="heading-step-3-upload-your-current-settings">Step 3: Upload your current settings</h2>
<p>Now that you’re connected to Github, you’re ready to upload your settings.</p>
<p>Open up your <a target="_blank" href="https://code.visualstudio.com/docs/getstarted/userinterface#_command-palette">Command Palette</a> with CMD+Shift+P (on Mac) or navigate to View and Command Palette. Type “Sync Upload” which will filter the commands and hit enter once the <strong>Sync: Update/Upload Settings</strong> option is selected.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/06/vs-code-settings-sync-upload-update-command.jpg" alt="Image" width="600" height="400" loading="lazy">
<em>Update/Upload Settings command in Settings Sync</em></p>
<p>When doing this, you might be prompted with screen that asks if you want to force upload — press <strong>Yes</strong>.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/06/vs-code-settings-sync-force-upload.jpg" alt="Image" width="600" height="400" loading="lazy">
<em>Force upload new settings in Settings Sync</em></p>
<p>At this point, Settings Sync will create a new Gist in your Github account with your configuration settings. Once it’s done you should see a success message.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/06/vs-code-settings-sync-successful-upload.jpg" alt="Image" width="600" height="400" loading="lazy">
<em>Successful settings upload in Settings Sync</em></p>
<p>You should now be able to visit <a target="_blank" href="https://gist.github.com/">gist.github.com</a> and find a new private <code>cloudSettings</code> Gist that includes all of your VS Code settings!</p>
<h2 id="heading-step-4-syncing-your-configuration-to-another-environment">Step 4: Syncing your configuration to another environment</h2>
<p>To sync your VS Code configuration to another computer or VS Code environment, you want to first follow steps 1 and 2 above — installing the extension and logging in to Github.</p>
<p>The difference is this time, you’ll want to configure VS Code to download your settings instead of upload them.</p>
<p>To get started, first open back up your Sync Settings dashboard. If this is a new installation like we’re assuming here, you can open up the Command Palette and type “sync download” and hit enter which will open up that dashboard. Here, click <strong>Edit Configuration</strong> this time.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/06/vs-code-settings-sync-edit-configuration.jpg" alt="Image" width="600" height="400" loading="lazy">
<em>Edit Settings Sync configuration</em></p>
<p>On this screen, you should see your <strong>Github Access Token</strong>, but you should also see an empty field for Gist ID. Here, we want to first grab the ID from our cloudSettings Gist URL:</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/06/vs-code-settings-github-gist.jpg" alt="Image" width="600" height="400" loading="lazy">
<em>VS Code cloudSettings Gist ID</em></p>
<p>And then paste that value inside of our <strong>Gist ID</strong> input in VS Code.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/06/vs-code-settings-sync-gist-id-configuration-1.jpg" alt="Image" width="600" height="400" loading="lazy">
<em>Adding Gist ID to Settings Sync configuration</em></p>
<p>Once it’s there, you can open the Command Palette again, type “sync download”, and hit enter, and Sync Settings will fetch your VS Code configuration from the Gist and update your local settings with that configuration!</p>
<h2 id="heading-step-5-updating-your-configuration">Step 5: Updating your configuration</h2>
<p>From here on, any time you want to make a new change to your stored configuration, you’ll want to use both the Update/Upload and Download features like we used above.</p>
<p>To update a new tweak to your configuration, type “sync update”  and hit enter:</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/06/vs-code-settings-sync-update-settings.jpg" alt="Image" width="600" height="400" loading="lazy">
<em>Update command for Settings Sync</em></p>
<p>And to download your configuration to sync up another editor, type “sync download” and hit enter:</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/06/vs-code-settings-sync-download-command.jpg" alt="Image" width="600" height="400" loading="lazy">
<em>Download settings command for Settings Sync</em></p>
<p>These commands will both update your cloudSettings Gist and download from it to sync up your VS Code instances</p>
<h2 id="heading-whats-your-favorite-vs-code-trick">What’s your favorite VS Code trick?</h2>
<p><a target="_blank" href="https://twitter.com/colbyfayock">Share it with me on Twitter!</a></p>
<h2 id="heading-join-the-conversation">Join the conversation</h2>
<div class="embed-wrapper">
        <blockquote class="twitter-tweet">
          <a href="https://twitter.com/colbyfayock/status/1272906851005366274"></a>
        </blockquote>
        <script defer="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></div>
<div id="colbyfayock-author-card">
  <p>
    <a href="https://twitter.com/colbyfayock">
      <img src="https://res.cloudinary.com/fay/image/upload/w_2000,h_400,c_fill,q_auto,f_auto/w_1020,c_fit,co_rgb:007079,g_north_west,x_635,y_70,l_text:Source%20Sans%20Pro_64_line_spacing_-10_bold:Colby%20Fayock/w_1020,c_fit,co_rgb:383f43,g_west,x_635,y_6,l_text:Source%20Sans%20Pro_44_line_spacing_0_normal:Follow%20me%20for%20more%20JavaScript%252c%20UX%252c%20and%20other%20interesting%20things!/w_1020,c_fit,co_rgb:007079,g_south_west,x_635,y_70,l_text:Source%20Sans%20Pro_40_line_spacing_-10_semibold:colbyfayock.com/w_300,c_fit,co_rgb:7c848a,g_north_west,x_1725,y_68,l_text:Source%20Sans%20Pro_40_line_spacing_-10_normal:colbyfayock/w_300,c_fit,co_rgb:7c848a,g_north_west,x_1725,y_145,l_text:Source%20Sans%20Pro_40_line_spacing_-10_normal:colbyfayock/w_300,c_fit,co_rgb:7c848a,g_north_west,x_1725,y_222,l_text:Source%20Sans%20Pro_40_line_spacing_-10_normal:colbyfayock/w_300,c_fit,co_rgb:7c848a,g_north_west,x_1725,y_295,l_text:Source%20Sans%20Pro_40_line_spacing_-10_normal:colbyfayock/v1/social-footer-card" alt="Follow me for more Javascript, UX, and other interesting things!" width="2000" height="400" loading="lazy">
    </a>
  </p>
  <ul>
    <li>
      <a href="https://twitter.com/colbyfayock">? Follow Me On Twitter</a>
    </li>
    <li>
      <a href="https://youtube.com/colbyfayock">?️ Subscribe To My Youtube</a>
    </li>
    <li>
      <a href="https://www.colbyfayock.com/newsletter/">✉️ Sign Up For My Newsletter</a>
    </li>
  </ul>
</div>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ Arrow Function JavaScript Tutorial – How to Declare a JS Function with the New ES6 Syntax ]]>
                </title>
                <description>
                    <![CDATA[ By Amy Haddad You’ve probably seen arrow functions written a few different ways. //example 1 const addTwo = (num) => {return num + 2;}; //example 2 const addTwo = (num) => num + 2; //example 3 const addTwo = num => num + 2; //example 4 const addTw... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/arrow-function-javascript-tutorial-how-to-declare-a-js-function-with-the-new-es6-syntax/</link>
                <guid isPermaLink="false">66d45d97bc9760a197a10345</guid>
                
                    <category>
                        <![CDATA[ ES6 ]]>
                    </category>
                
                    <category>
                        <![CDATA[ JavaScript ]]>
                    </category>
                
                    <category>
                        <![CDATA[ js ]]>
                    </category>
                
                    <category>
                        <![CDATA[ learn to code ]]>
                    </category>
                
                    <category>
                        <![CDATA[ programing ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ freeCodeCamp ]]>
                </dc:creator>
                <pubDate>Tue, 02 Jun 2020 15:38:35 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/news/content/images/2020/05/nick-fewings-zF_pTLx_Dkg-unsplash-1.jpg" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>By Amy Haddad</p>
<p>You’ve probably seen arrow functions written a few different ways.</p>
<pre><code class="lang-JS"><span class="hljs-comment">//example 1</span>
<span class="hljs-keyword">const</span> addTwo = <span class="hljs-function">(<span class="hljs-params">num</span>) =&gt;</span> {<span class="hljs-keyword">return</span> num + <span class="hljs-number">2</span>;};

<span class="hljs-comment">//example 2</span>
<span class="hljs-keyword">const</span> addTwo = <span class="hljs-function">(<span class="hljs-params">num</span>) =&gt;</span> num + <span class="hljs-number">2</span>;

<span class="hljs-comment">//example 3</span>
<span class="hljs-keyword">const</span> addTwo = <span class="hljs-function"><span class="hljs-params">num</span> =&gt;</span> num + <span class="hljs-number">2</span>;

<span class="hljs-comment">//example 4</span>
<span class="hljs-keyword">const</span> addTwo = <span class="hljs-function"><span class="hljs-params">a</span> =&gt;</span> {
 <span class="hljs-keyword">const</span> newValue = a + <span class="hljs-number">2</span>;
 <span class="hljs-keyword">return</span> newValue;
};
</code></pre>
<p>Some have parentheses around the parameters, while others don’t. Some use curly brackets and the <code>return</code> keyword, others don’t. One even spans multiple lines, while the others consist of a single line.</p>
<p>Interestingly, when we invoke the above arrow functions with the same argument we get the same result.</p>
<pre><code class="lang-JS"><span class="hljs-built_in">console</span>.log(addTwo(<span class="hljs-number">2</span>));
<span class="hljs-comment">//Result: 4</span>
</code></pre>
<p>How do you know which arrow function syntax to use? That’s what this article will uncover: how to declare an arrow function.</p>
<h2 id="heading-a-major-difference">A Major Difference</h2>
<p>Arrow functions are another—more concise—way to write function expressions. However, they don’t have their own binding to the <strong><code>this</code></strong> keyword. </p>
<pre><code class="lang-JS"><span class="hljs-comment">//Function expression</span>
<span class="hljs-keyword">const</span> addNumbers = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">number1, number2</span>) </span>{
   <span class="hljs-keyword">return</span> number1 + number2;
};

<span class="hljs-comment">//Arrow function expression</span>
<span class="hljs-keyword">const</span> addNumbers = <span class="hljs-function">(<span class="hljs-params">number1, number2</span>) =&gt;</span> number1 + number2;
</code></pre>
<p>When we invoke these functions with the same arguments we get the same result.</p>
<pre><code class="lang-JS"><span class="hljs-built_in">console</span>.log(addNumbers(<span class="hljs-number">1</span>, <span class="hljs-number">2</span>));
<span class="hljs-comment">//Result: 3</span>
</code></pre>
<p>There's an important syntactical difference to note: arrow functions use the arrow <strong><code>=&gt;</code></strong> instead of the <strong><code>function</code></strong> keyword. There are other differences to be aware of when you write arrow functions, and that’s what we’ll explore next.</p>
<h2 id="heading-parentheses">Parentheses</h2>
<p>Some arrow functions have parentheses around the parameters and others don't.</p>
<pre><code class="lang-JS"><span class="hljs-comment">//Example with parentheses</span>
<span class="hljs-keyword">const</span> addNums = <span class="hljs-function">(<span class="hljs-params">num1, num2</span>) =&gt;</span> num1 + num2;

<span class="hljs-comment">//Example without parentheses</span>
<span class="hljs-keyword">const</span> addTwo = <span class="hljs-function"><span class="hljs-params">num</span> =&gt;</span> num + <span class="hljs-number">2</span>;
</code></pre>
<p>As it turns out, the number of parameters an arrow function has determines whether or not we need to include parentheses.</p>
<p>An arrow function with <strong>zero parameters</strong> requires parentheses.</p>
<pre><code class="lang-JS"><span class="hljs-keyword">const</span> hello = <span class="hljs-function">() =&gt;</span> <span class="hljs-string">"hello"</span>;
<span class="hljs-built_in">console</span>.log(hello());
<span class="hljs-comment">//Result: "hello"</span>
</code></pre>
<p>An arrow function with <strong>one parameter</strong> does <em>not</em> require parentheses. In other words, parentheses are optional. </p>
<pre><code class="lang-JS"><span class="hljs-keyword">const</span> addTwo = <span class="hljs-function"><span class="hljs-params">num</span> =&gt;</span> num + <span class="hljs-number">2</span>;
</code></pre>
<p>So we can add parentheses to the above example and the arrow function still works.</p>
<pre><code class="lang-JS"><span class="hljs-keyword">const</span> addTwo = <span class="hljs-function">(<span class="hljs-params">num</span>) =&gt;</span> num + <span class="hljs-number">2</span>;
<span class="hljs-built_in">console</span>.log(addTwo(<span class="hljs-number">2</span>));
<span class="hljs-comment">//Result: 4</span>
</code></pre>
<p>An arrow function with <strong>multiple parameters</strong> requires parentheses.</p>
<pre><code class="lang-JS"><span class="hljs-keyword">const</span> addNums = <span class="hljs-function">(<span class="hljs-params">num1, num2</span>) =&gt;</span> num1 + num2;
<span class="hljs-built_in">console</span>.log(addNums(<span class="hljs-number">1</span>, <span class="hljs-number">2</span>));
<span class="hljs-comment">//Result: 3</span>
</code></pre>
<p>Arrow functions also support <strong>rest parameters</strong> and <strong>destructuring</strong>. Both features require parentheses.</p>
<p>This is an example of an arrow function with a <strong>rest parameter</strong>.</p>
<pre><code class="lang-JS"><span class="hljs-keyword">const</span> nums = <span class="hljs-function">(<span class="hljs-params">first, ...rest</span>) =&gt;</span> rest;
<span class="hljs-built_in">console</span>.log(nums(<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>));
<span class="hljs-comment">//Result: [ 2, 3, 4 ]</span>
</code></pre>
<p>And here’s one that uses <strong>destructuring</strong>.</p>
<pre><code class="lang-JS"><span class="hljs-keyword">const</span> location = {
   <span class="hljs-attr">country</span>: <span class="hljs-string">"Greece"</span>,
   <span class="hljs-attr">city</span>: <span class="hljs-string">"Athens"</span>
};

<span class="hljs-keyword">const</span> travel = <span class="hljs-function">(<span class="hljs-params">{city}</span>) =&gt;</span> city;

<span class="hljs-built_in">console</span>.log(travel(location));
<span class="hljs-comment">//Result: "Athens"</span>
</code></pre>
<p>To summarize: if there’s only one parameter—and you’re not using rest parameters or destructuring—then parentheses are optional. Otherwise, be sure to include them.</p>
<h2 id="heading-the-function-body">The Function Body</h2>
<p>Now that we’ve got the parentheses rules covered, let’s turn to the function body of an arrow function.</p>
<p>An arrow function body can either have a <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#:~:text=An%20arrow%20function%20expression%20is,cannot%20be%20used%20as%20constructors.">“concise body” or “block body”</a>. The body type influences the syntax.</p>
<p>First, the “concise body” syntax.</p>
<pre><code class="lang-JS"><span class="hljs-keyword">const</span> addTwo = <span class="hljs-function"><span class="hljs-params">a</span> =&gt;</span> a + <span class="hljs-number">2</span>;
</code></pre>
<p>The “concise body” syntax is just that: it’s concise! We don’t use the <code>return</code> keyword or curly brackets. </p>
<p>If you have a one-line arrow function (like the example above), then the value is implicitly returned. So you can omit the <code>return</code> keyword and the curly brackets. </p>
<p>Now let’s look at “block body” syntax.</p>
<pre><code class="lang-JS"><span class="hljs-keyword">const</span> addTwo = <span class="hljs-function"><span class="hljs-params">a</span> =&gt;</span> {
    <span class="hljs-keyword">const</span> total = a + <span class="hljs-number">2</span>;
    <span class="hljs-keyword">return</span> total;
}
</code></pre>
<p>Notice that we use <em>both</em> curly brackets and the <code>return</code> keyword in the above example. </p>
<p>You normally see this syntax when the body of the function is more than one line. And that’s a key point: wrap the body of a multi-line arrow function in curly brackets and use the <code>return</code> keyword.</p>
<h3 id="heading-objects-and-arrow-functions">Objects and Arrow Functions</h3>
<p>There’s one more syntax nuance to know about: wrap the function body in parentheses when you want to return an <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">object literal expression</a>.</p>
<pre><code class="lang-JS"><span class="hljs-keyword">const</span> f = <span class="hljs-function">() =&gt;</span> ({
 <span class="hljs-attr">city</span>:<span class="hljs-string">"Boston"</span>
})
<span class="hljs-built_in">console</span>.log(f().city)
</code></pre>
<p>Without the parentheses, we get an error.</p>
<pre><code class="lang-JS"><span class="hljs-keyword">const</span> f = <span class="hljs-function">() =&gt;</span> {
   <span class="hljs-attr">city</span>:<span class="hljs-string">"Boston"</span>
}
<span class="hljs-comment">//Result: error</span>
</code></pre>
<p>If you find the arrow function syntax a bit confusing, you’re not alone. It takes some time to get familiar with it. But being aware of your options and requirements are steps in that direction.</p>
<p><em>I write about learning to program and the best ways to go about it (</em><a target="_blank" href="https://amymhaddad.com/">amymhaddad.com</a>).  </p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ How to Ask Effective Questions: A Practical Guide for Developers ]]>
                </title>
                <description>
                    <![CDATA[ Learning is a journey that never ends. At every point in your career, you will keep learning, re-learning, and un-learning. The ability to find answers to problems is key, and these answers can be gotten by either debugging, googling or asking questi... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/asking-effective-questions-a-practical-guide-for-developers/</link>
                <guid isPermaLink="false">66d84e095a0b456f4d321437</guid>
                
                    <category>
                        <![CDATA[ 100DaysOfCode ]]>
                    </category>
                
                    <category>
                        <![CDATA[ career advice ]]>
                    </category>
                
                    <category>
                        <![CDATA[ debugging ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Developer ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Google ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Problem Solving ]]>
                    </category>
                
                    <category>
                        <![CDATA[ programing ]]>
                    </category>
                
                    <category>
                        <![CDATA[ research ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Bolaji Ayodeji ]]>
                </dc:creator>
                <pubDate>Tue, 12 May 2020 08:20:49 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/news/content/images/2020/05/asking-effectively.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>Learning is a journey that never ends. At every point in your career, you will keep learning, re-learning, and un-learning.</p>
<p>The ability to find answers to problems is key, and these answers can be gotten by either debugging, googling or asking questions. These are skills everyone should learn.</p>
<p>While asking questions is great, doing it the wrong or less effective way might lead to many hours of unproductive work. In this article show you how to ask effective questions, become a better googler, and hone your problem-solving skills.</p>
<h2 id="heading-the-read-search-ask-method">The Read Search Ask Method</h2>
<p>freeCodeCamp came up with this amazing method for their students called the <a target="_blank" href="https://www.freecodecamp.org/forum/t/how-to-get-help-when-you-are-stuck-coding/19514">Read Search Ask</a> method where you can solve your problems efficiently while respecting other people’s time, too.</p>
<p>It is expected that you follow these steps in order before you ask a question.</p>
<ul>
<li><p><strong>Read</strong> the error or documentation</p>
</li>
<li><p><strong>Search</strong> Google or Stackoverflow</p>
</li>
<li><p><strong>Ask</strong> for help</p>
</li>
</ul>
<h3 id="heading-read-your-errors">Read your errors</h3>
<p>The first step to finding a solution(s) to your problem is to understand the problem itself. Many developers ask questions without understanding the problem. Remember you want to ask questions efficiently and also respect the time of the individual you will be asking.</p>
<p>Most often, the answers to your bugs are in the errors itself. It's not considerate to ask questions that you could have solved yourself if you had read the error itself.</p>
<p>One great way to debug your errors is to log the error on your console or terminal and read the errors. Five things can happen at this stage:</p>
<ul>
<li><p>You identify the bug</p>
</li>
<li><p>You determine the location of the bug (possible a file or section of your code)</p>
</li>
<li><p>You understand the cause(s) of the bug</p>
</li>
<li><p>You outline possible fixes of the bug</p>
</li>
<li><p>You implement the possible fixes</p>
</li>
</ul>
<p>Most often, just this step alone can help you solve your problem. The more you practice this, the better you become at debugging and fixing issues. Some bugs might be more complex than your capacity, and then you need to seek external help or resources.</p>
<h3 id="heading-read-the-documentation">Read the Documentation</h3>
<p>Let's assume you couldn't fix your issues from the first step (but you were able to identify the bug at least). Then you need to read some documentation.</p>
<p>This might not apply to all bugs, but make sure to run your issue through this step before moving to the next. After identifying your bug, it's time to determine the cause and outline possible fixes.</p>
<blockquote>
<p>Documentation is a set of documents provided on paper, or online, or on digital or analogue media, such as audio tape or CDs. Examples are user guides, white papers, on-line help, quick-reference guides. Paper or hard-copy documentation has become less common. ~ <a target="_blank" href="https://en.wikipedia.org/wiki/Documentation">Wikipedia</a></p>
</blockquote>
<p>Documentation serves as the official guide of a particular programming language, framework, library or technology. The best place to get the first-hand resource on a specific issue is to check the official help guide of the technology.</p>
<p>You might have misconfigured something, installed some wrong package or forgot to import something. But when you read the docs of the tech responsible for the bug it can help you find a fix quickly.</p>
<p>Recently I was working on a Gatsby project, and I ran into some console errors and blank white page in production. But this didn't occur in development.</p>
<pre><code class="lang-python">TypeError: t.test <span class="hljs-keyword">is</span> <span class="hljs-keyword">not</span> a function
</code></pre>
<p>So vague right? After identifying the bug location, reading the docs and trying out several fixes, I discovered something: in the Gatsby Google analytics plugin configuration, I left the array meant to avoid sending pageview hits from custom paths empty.</p>
<pre><code class="lang-python">plugins: [
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        trackingId: <span class="hljs-string">'UA-XXXXXXXX-1'</span>,
        head: false,
        anonymize: true,
        respectDNT: true,
        exclude: [<span class="hljs-string">''</span>],
        pageTransitionDelay: <span class="hljs-number">0</span>,
      }
]
</code></pre>
<p>After 3 hours of reading the error, trying to identify the bug and reading Gatsby docs, I figured out that the <code>exclude[]</code> option had no values in it. Removing this fixed my issue since I didn't need to exclude any page after all.</p>
<p>This shows why you should spend some time debugging. It might take some time, and it will be frustrating. The bug might look stupid, the fix might be simple, but it's worth it. The more time you spend debugging, the better you become and the faster you will fix even more complex bugs next time.</p>
<h3 id="heading-search">Search</h3>
<p>Now if you have read your errors and several docs, but your bug is becoming more complex, it's time to search the web "effectively".</p>
<p>One of the best places to search for solutions to your issues is <a target="_blank" href="https://google.com">Google</a> since it already crawls content from numerous webpages, dev communities, and docs like <a target="_blank" href="https://stackoverflow.com/">StackOverflow</a>, <a target="_blank" href="https://hashnode.com/">Hashnode</a>, <a target="_blank" href="https://www.freecodecamp.org/news/">freeCodeCamp News</a>, <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web">MDN</a>, <a target="_blank" href="https://css-tricks.com/">CSS tricks</a>, <a target="_blank" href="https://hackernoon.com/">Hackernoon</a>, and many others.</p>
<p>Here are some helpful Google search tips you can try to get answers more efficiently:</p>
<ul>
<li>Add a specific domain to channel your search to a particular website and save some time. You can append the <code>site: sitename</code> to your search, and it'll return only results from that website.</li>
</ul>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1589268176790/vwk3EmzK9.png" alt="Screen Shot 2020-05-12 at 12.49.06 PM.png" width="3104" height="1978" loading="lazy"></p>
<ul>
<li>Search for specific title and text in specific sites. This will allow your results to include resources related to the title or text keyword you specified.</li>
</ul>
<blockquote>
<p>intitle:axe</p>
<p>intitle:axe intext:web ui testing</p>
<p>intitle:axe intext:web ui testing site:bolajiayodeji.com</p>
</blockquote>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1589268185857/KA_B5_TTq.png" alt="Screen Shot 2020-05-12 at 12.48.59 PM.png" width="3104" height="1978" loading="lazy"></p>
<ul>
<li><p>Add specific keywords to your search and pull out individual details like file paths. If your bug is related to Python, add it to your search query. If it is related to objects, add that too. This will streamline the results to a wider range of possible resources related to your bug, since there are objects in just about every programming language.</p>
</li>
<li><p>Google automatically omits most non-alphanumeric characters from your queries. Symbols like <strong>`!@#$%^&amp;*(){}[]&lt;&gt;</strong> are not included in your search. So you can focus on more specific keywords, as discussed above.</p>
</li>
<li><p>Copy and paste your errors (removing specific information); there is a 99.9% chance that someone else has encountered the same error and has maybe opened some issue or written an article about it. Never underestimate the power of StackOverflow and GitHub issues.</p>
</li>
<li><p>Search within the past few years since programming changes pretty quickly. This will ensure you don't hit redundant resources.</p>
</li>
<li><p>Reiterate, try different keywords and more general keywords multiple times, and open multiple tabs until you find an answer. This might be awkward at first, but as you consistently do this, you'll get better, and with time it will take you less time and fewer tabs to find an answer.</p>
</li>
</ul>
<h3 id="heading-ask">Ask</h3>
<p>Now comes the sought-after diamond. I would advise, before you ask ANY questions, that you make sure you have completed steps 1 and 2.</p>
<p>This might be hard, but the earlier you get used to this, the better you grow. I've had people ask me questions, and when I copy and paste their question into Google, the first result answers the question 100%. This doesn't feel great.</p>
<p>Most often, I'll have to send the link to them. Meanwhile, they could have done this themselves and saved me some time while increasing their problem-solving skills.</p>
<p>Even if your next-door neighbour works at Google, if your dad is a Software Engineer, if your close friend has two more years experience beyond you, try not to ask them questions until you have invested time into finding solutions yourself. This will help you:</p>
<ul>
<li><p>Build more self-confidence, as you won't need to rely so much on others. (What if that close friend is unavailable to respond to you someday, what will you do?!)</p>
</li>
<li><p>Save the time of whomever you are planning to ask questions. There are tons of developers around the world, and you might not be the only one asking that same person questions. By completing steps 1 and 2 first, you are also helping others with less experience or more complex problems get answers quickly.</p>
</li>
<li><p>Build your problem-solving, debugging, research and googling skills. These are essential skills that will help you become a better developer. You only master a skill when you consistently practice it, so try to practice this regularly and watch yourself grow and master the art.</p>
</li>
</ul>
<div class="embed-wrapper">
        <blockquote class="twitter-tweet">
          <a href="https://twitter.com/iambolajiayo/status/1255694731482365952"></a>
        </blockquote>
        <script defer="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></div>
<p> </p>
<p>But let's say that you have completed both steps, and you still need external help from a mentor, senior developer, team lead, the local community, group, or friend. How then do you ask questions effectively?</p>
<ul>
<li><p>Complete step 1 and make sure you understand the problem already</p>
</li>
<li><p>Complete step 2 so you might at least have gotten some insights into possible causes and solutions of the problem</p>
</li>
<li><p>Now do some research: you are either asking the question in dev communities like <a target="_blank" href="https://stackoverflow.com/">Stackoverflow</a> or <a target="_blank" href="https://hashnode.com/">Hashnode</a> or requesting help from an individual you feel has more experience than you.</p>
</li>
<li><p>Developers answering questions on dev communities are sacrificing their time to help you. Help them also by asking "clear and concise questions". You should choose your words deliberately and precisely, constructing your sentences carefully to avoid confusion. From step 1 and step 2, properly draft your questions based on:</p>
<ul>
<li><p>The "problem" you have encountered</p>
</li>
<li><p>Your thoughts on what you think might be wrong "based on your research."</p>
</li>
<li><p>Proof of research efforts (Devs will be happier to help you once they see you have made some effort already). Add links to resources you have checked and solutions you have tried already.</p>
</li>
<li><p>Be conversant with tools like <a target="_blank" href="https://codepen.io/">CodePen</a>, <a target="_blank" href="https://codesandbox.io/">CodeSandBox</a>, <a target="_blank" href="https://gist.github.com/">GitHub Gist</a>, <a target="_blank" href="https://repl.it/">Repl.it</a>, and <a target="_blank" href="https://github.com/">GitHub</a> so you can easily provide a link to a snippet of your code, a working project or <a target="_blank" href="https://gist.github.com/Rich-Harris/88c5fc2ac6dc941b22e7996af05d70ff">mimimal reproduction</a> without having to type so much text. <strong>Please try as much as possible not to paste code that is more than one line in chat.</strong></p>
</li>
<li><p>Take clean and clear screenshots where necessary. Most often, you can take a snapshot of your console errors for smaller issues. Try not to strain your helper's eyes. Take specific and clear screenshots related to your error.</p>
</li>
</ul>
</li>
<li><p>Be sure you're asking the right person or community. Don't ask a python related question to someone who knows just Java. Your research from the previous step will help you here. It's also great to bookmark specific communities, individuals or groups where you will regularly ask questions based on how helpful their responses have been to you.</p>
</li>
<li><p>Now don't be afraid to ask. I've had my share of toxic responses from people who respond with comments like "this is simple", "come on, google it", "you should know this", and you might get that too :(. The internet is a combination of good and toxic individuals who might be or not welcoming. Be confident in yourself, you have done your part by completing steps 1 and 2, so ask the question freely.</p>
</li>
</ul>
<h2 id="heading-conclusion">Conclusion</h2>
<p>You don't need to "know it all", you just need to "know it and know how and where to find more knowledge."</p>
<p>Dear 10x, Senior, "It's Simple", Engineer: please note that you're discouraging developers who are asking these questions. I had to battle so much with my self-confidence some years ago, and it took me a while to get over it.</p>
<p>There is so much for learners to battle with already (learning, imposter syndrome, and personal issues), so please don't add to it. Be welcoming, make them feel like they belong here, and support them.</p>
<p>Your response can intentionally or unintentionally influence someone's decision to ask questions freely next time. If you can't or won't be available, you can either not respond at all or respond in a friendly way with feedback.</p>
<p>Refer people to your friends if you don't have the time or capabilities to attend to them, give constructive criticism, and try not to leave a question without feedback or impact.</p>
<blockquote>
<p>Beginner developers need support. Learning to code is hard, especially if you're doing it alone. If you're learning in a traditional classroom, be sure to network with the other students. Do homework together. Discuss the problems. If you're learned online, it's very easy to get discouraged. Find chat spaces with others who are on a similar journey and use that space to encourage one another. Twitter also makes the experts accessible to you (reason #49948 why I love Twitter). Find the experts in whatever it is you're learning and consume their content. Ask them questions if you need to. The key is not to do it alone. ~ <a target="_blank" href="https://townhall.hashnode.com/women-in-tech-angie-jones-cjyodxwfc003ls8s10syrzvq7">Angie Jones</a></p>
</blockquote>
<p>The industry is growing daily. We are all trying to learn and get better at different levels. A lot of developer <a target="_blank" href="https://bolajiayodeji.com/best-developer-communities-to-be-part-of-in-2020-ck7ugplig01a9zis174d7zrnk">communities</a> are supportive and make their resources available for consumption. Make sure you are a part of this movement, consume those available resources, contribute to these resources, and be a helper in any way you can.</p>
<p>Thank you to all the amazing developers across the globe, creating and sharing contents/ projects. Your contributions are the pillars holding up the tech ecosystem today. ??</p>
<blockquote>
<p>Quick note, I interview awesome women in tech on the <a target="_blank" href="https://hashnode.com/series/she-inspires-cjt0d02lq001e7ps2wo420g15">She Inspires</a> at <a target="_blank" href="https://hasnode.com">Hashnode</a> where I understand the current health of the tech industry, get insights from their personal and career growth, and inspire other women to become better. Read all past interviews <a target="_blank" href="https://hashnode.com/series/she-inspires-cjt0d02lq001e7ps2wo420g15">here</a>, trust me it's worth your time. :)</p>
</blockquote>
<p>Don't spend your entire life waiting for the best time to make that move – write that article, build that side-project, apply for that job or ask that question today. The best time is always now!</p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ How to Add Authentication to React Native in Three Steps Using Firebase ]]>
                </title>
                <description>
                    <![CDATA[ By Said Hayani Authentication allows us to secure our apps, or limit access for non-user members. Authentication can also be used, for example, to limit access to a paid service or specific service.  That's just one example of how authentication can ... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/how-to-add-authentication-to-react-native-in-three-steps-using-firebase/</link>
                <guid isPermaLink="false">66d460d04bc8f441cb6df823</guid>
                
                    <category>
                        <![CDATA[ 100DaysOfCode ]]>
                    </category>
                
                    <category>
                        <![CDATA[ authentication ]]>
                    </category>
                
                    <category>
                        <![CDATA[ coding ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Firebase ]]>
                    </category>
                
                    <category>
                        <![CDATA[ #firebase-cloud-functions ]]>
                    </category>
                
                    <category>
                        <![CDATA[ JavaScript ]]>
                    </category>
                
                    <category>
                        <![CDATA[ learning to code ]]>
                    </category>
                
                    <category>
                        <![CDATA[ programing ]]>
                    </category>
                
                    <category>
                        <![CDATA[ React Native ]]>
                    </category>
                
                    <category>
                        <![CDATA[ tech  ]]>
                    </category>
                
                    <category>
                        <![CDATA[ technology ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ freeCodeCamp ]]>
                </dc:creator>
                <pubDate>Wed, 22 Apr 2020 04:22:18 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/news/content/images/2020/04/rn-firebase-auth.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>By Said Hayani</p>
<p>Authentication allows us to secure our apps, or limit access for non-user members. Authentication can also be used, for example, to limit access to a paid service or specific service. </p>
<p>That's just one example of how authentication can be in your app. Today we will add authentication to a React Native app using Firebase.</p>
<h2 id="heading-1-installing-react-native-firebase">1 Installing react-native-firebase</h2>
<p>The first thing we do is install and initialize Firebase inside our app. In React Native we need to use a Firebase Container for React Native. We are going to use <a target="_blank" href="https://github.com/invertase/react-native-firebase">react-native-firebase</a>.</p>
<p>If you are about to start a new React Native app from scratch and you would like to use Firebase, you are lucky - you can install react-native-firebase pre-integrated using the React Native CLI.</p>
<pre><code class="lang-shell">//
npx @react-native-community/cli init --template=@react-native-firebase/template authenticationFirebase
//** source: https://invertase.io/oss/react-native-firebase/quick-start/new-project
</code></pre>
<p>Then just install the pod for iOS by running the following command inside the root directory of your app.</p>
<pre><code class="lang-shell">cd ios &amp;&amp; pod install
</code></pre>
<p>If you are having issues installing a new project with Firebase please refer to <a target="_blank" href="https://invertase.io/oss/react-native-firebase/quick-start/new-project">react-native-firebase docs</a></p>
<h3 id="heading-adding-react-native-firebase-to-an-existing-project">Adding react-native-firebase to an existing project</h3>
<p>Install the <code>react-native-firebase</code> package using yarn or npm</p>
<pre><code class="lang-shell"> yarn add @react-native-firebase/app
</code></pre>
<p>or:</p>
<pre><code class="lang-shell"> npm install @react-native-firebase/app
</code></pre>
<p>Then install pods for iOS.</p>
<p><code>shell cd ios &amp;&amp; pod install</code></p>
<h3 id="heading-running-the-app">Running the app</h3>
<p>For iOS, there are two ways to do it: I personally use Xcode, as it gives me a clear idea if something went wrong and the build failed.
<img src="build-xcode.gif" alt="Xcode" width="600" height="400" loading="lazy"></p>
<p>Always make sure the package is running - hit <code>yarn start</code> to start the app.</p>
<p>The second way to run the app on iOS is running the react-native run-ios command - and that's it.</p>
<h2 id="heading-adding-firebase-credentials">Adding firebase credentials</h2>
<p>This step requires us to create a new project in <a target="_blank" href="https://console.firebase.google.com/">the Firebase console </a>.</p>
<p>After creating a new project on the dashboard page select <strong>add Firebase to iOS app</strong>. This will show you the steps to add credentials to iOS like below.</p>
<p>It consists of a few steps :</p>
<ul>
<li><p>Download the <code>GoogleService-info.plist</code> file and put it inside the iOS folder within your project.
<img src="https://www.freecodecamp.org/news/content/images/2020/04/add-firebase-ios.png" alt="add-firebase-ios" width="600" height="400" loading="lazy"></p>
</li>
<li><p>Initialize Firebase</p>
</li>
</ul>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/04/initialize-firebase.png" alt="initialize-firebase" width="600" height="400" loading="lazy"></p>
<h2 id="heading-for-android">For Android</h2>
<p>Android has a different setup for Firebase. In project settings in the Firebase console select <strong>add Firebase to Android</strong>.
<img src="https://www.freecodecamp.org/news/content/images/2020/04/firebase-to-android.png" alt="firebase-to-android" width="600" height="400" loading="lazy"></p>
<p>You can put any name you like in the app name input - just make sure it conforms to the Firebase requirements. Then click <strong>Register</strong>.</p>
<p>After that, you need to download the <code>google-services.json</code> file and put it within the android/app folder.</p>
<p>Then the next step is to initialize the Android SDK.
<img src="https://www.freecodecamp.org/news/content/images/2020/04/add-android-sdk.png" alt="add-android-sdk" width="600" height="400" loading="lazy"></p>
<p>The last step is to apply the Firebase plugin inside: <code>android/app/build.gradle</code> .</p>
<pre><code class="lang-shell">apply plugin: 'com.google.gms.google-services'
</code></pre>
<p>If you have any issues running the steps above you can always refer to the <a target="_blank" href="https://firebase.google.com/docs">Firebase docs</a> or <a target="_blank" href="https://rnfirebase.io/">react-native-firebase</a> websites.</p>
<p>Now that we are done with the integration, the next step is to implement Firebase functions to create users and sign in in React Native.</p>
<h2 id="heading-adding-signin-login">Adding SignIn, Login</h2>
<p>This phase is simple: just some React and JavaScript code to call Firebase functions. I'm going to create a simple UI for Login and SignUp (this is not necessary for this tutorial so you can skip this step).</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/04/loginComponent.gif" alt="loginComponent" width="600" height="400" loading="lazy"></p>
<blockquote>
<p>I will put the full source code at the end of article *</p>
</blockquote>
<p>We will use the <code>createUserWithEmailAndPassword</code> function to sign up for a new user. I already implemented all the validation on the form - we just need to call this function to create a user.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/04/form-validation.gif" alt="form-validation" width="600" height="400" loading="lazy"></p>
<p>When the user presses the Continue button, <code>__doSignUp</code> will be called and the code looks like this:</p>
<pre><code class="lang-jsx"><span class="hljs-keyword">const</span> __doSignUp = <span class="hljs-function">() =&gt;</span> {
  <span class="hljs-keyword">if</span> (!email) {
    setError(<span class="hljs-string">"Email required *"</span>)
    setValid(<span class="hljs-literal">false</span>)
    <span class="hljs-keyword">return</span>
  } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (!password &amp;&amp; password.trim() &amp;&amp; password.length &gt; <span class="hljs-number">6</span>) {
    setError(<span class="hljs-string">"Weak password, minimum 5 chars"</span>)
    setValid(<span class="hljs-literal">false</span>)
    <span class="hljs-keyword">return</span>
  } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (!__isValidEmail(email)) {
    setError(<span class="hljs-string">"Invalid Email"</span>)
    setValid(<span class="hljs-literal">false</span>)
    <span class="hljs-keyword">return</span>
  }

  __doCreateUser(email, password)
}

<span class="hljs-keyword">const</span> __doCreateUser = <span class="hljs-keyword">async</span> (email, password) =&gt; {
  <span class="hljs-keyword">try</span> {
    <span class="hljs-keyword">let</span> response = <span class="hljs-keyword">await</span> auth().createUserWithEmailAndPassword(email, password)
    <span class="hljs-keyword">if</span> (response) {
      <span class="hljs-built_in">console</span>.log(tag, <span class="hljs-string">"?"</span>, response)
    }
  } <span class="hljs-keyword">catch</span> (e) {
    <span class="hljs-built_in">console</span>.error(e.message)
  }
}
</code></pre>
<p>Make sure you installed <code>@react-native-firebase/auth</code>to be able to call <code>auth().createUserWithEmailAndPassword(email, password)</code></p>
<pre><code class="lang-jsx"><span class="hljs-comment">// import auth</span>
<span class="hljs-keyword">import</span> auth <span class="hljs-keyword">from</span> <span class="hljs-string">"@react-native-firebase/auth"</span>
</code></pre>
<p>The function that creates a new user in Firebase looks like this:</p>
<pre><code class="lang-jsx"><span class="hljs-keyword">const</span> __doCreateUser = <span class="hljs-keyword">async</span> (email, password) =&gt;{
    <span class="hljs-keyword">try</span> {
     <span class="hljs-keyword">let</span> response =  <span class="hljs-keyword">await</span> auth().createUserWithEmailAndPassword(email, password);
      <span class="hljs-keyword">if</span>(response){
        <span class="hljs-built_in">console</span>.log(tag,<span class="hljs-string">"?"</span>,response)
      }
    } <span class="hljs-keyword">catch</span> (e) {
      <span class="hljs-built_in">console</span>.error(e.message);
    }
</code></pre>
<p>If the function throws an error, make sure to enable the email / password method in the authentication section in the Firebase console.
<img src="https://www.freecodecamp.org/news/content/images/2020/04/enable-email-auth.png" alt="enable-email-auth" width="600" height="400" loading="lazy"></p>
<p>If everything went well, and the data entered (email, password) is valid, an alert will show up. If you check the Authentication section in the Firebase console you will notice that a new user has been created.
<img src="https://www.freecodecamp.org/news/content/images/2020/04/signUpSuccess.gif" alt="signUpSuccess" width="600" height="400" loading="lazy"></p>
<p>Here is the source code of <code>SignInComponent</code>.</p>
<pre><code class="lang-jsx"><span class="hljs-keyword">const</span> SigInComponent = <span class="hljs-function">() =&gt;</span> {
  <span class="hljs-keyword">const</span> [email, setEmail] = useState(<span class="hljs-string">""</span>)
  <span class="hljs-keyword">const</span> [password, setPassword] = useState(<span class="hljs-string">""</span>)
  <span class="hljs-keyword">const</span> [fetching, setFetching] = useState(<span class="hljs-literal">false</span>)
  <span class="hljs-keyword">const</span> [error, setError] = useState(<span class="hljs-string">""</span>)
  <span class="hljs-keyword">const</span> [isValid, setValid] = useState(<span class="hljs-literal">true</span>)
  <span class="hljs-keyword">const</span> __doSignUp = <span class="hljs-function">() =&gt;</span> {
    <span class="hljs-keyword">if</span> (!email) {
      setError(<span class="hljs-string">"Email required *"</span>)
      setValid(<span class="hljs-literal">false</span>)
      <span class="hljs-keyword">return</span>
    } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (!password &amp;&amp; password.trim() &amp;&amp; password.length &gt; <span class="hljs-number">6</span>) {
      setError(<span class="hljs-string">"Weak password, minimum 5 chars"</span>)
      setValid(<span class="hljs-literal">false</span>)
      <span class="hljs-keyword">return</span>
    } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (!__isValidEmail(email)) {
      setError(<span class="hljs-string">"Invalid Email"</span>)
      setValid(<span class="hljs-literal">false</span>)
      <span class="hljs-keyword">return</span>
    }

    __doCreateUser(email, password)
  }

  <span class="hljs-keyword">const</span> __doCreateUser = <span class="hljs-keyword">async</span> (email, password) =&gt; {
    <span class="hljs-keyword">try</span> {
      <span class="hljs-keyword">let</span> response = <span class="hljs-keyword">await</span> auth().createUserWithEmailAndPassword(
        email,
        password
      )
      <span class="hljs-keyword">if</span> (response &amp;&amp; response.user) {
        Alert.alert(<span class="hljs-string">"Success ✅"</span>, <span class="hljs-string">"Account created successfully"</span>)
      }
    } <span class="hljs-keyword">catch</span> (e) {
      <span class="hljs-built_in">console</span>.error(e.message)
    }
  }

  <span class="hljs-keyword">return</span> (
    <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">SafeAreaView</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.containerStyle}</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{{</span> <span class="hljs-attr">flex:</span> <span class="hljs-attr">0.2</span> }}&gt;</span>
        {!!fetching &amp;&amp; <span class="hljs-tag">&lt;<span class="hljs-name">ActivityIndicator</span> <span class="hljs-attr">color</span>=<span class="hljs-string">{blue}</span> /&gt;</span>}
      <span class="hljs-tag">&lt;/<span class="hljs-name">View</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.headerContainerStyle}</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.headerTitleStyle}</span>&gt;</span> Sign Up <span class="hljs-tag">&lt;/<span class="hljs-name">Text</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">View</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.formContainerStyle}</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">TextInput</span>
          <span class="hljs-attr">label</span>=<span class="hljs-string">{</span>"<span class="hljs-attr">Email</span>"}
          <span class="hljs-attr">autoCapitalize</span>=<span class="hljs-string">{false}</span>
          <span class="hljs-attr">keyboardType</span>=<span class="hljs-string">"email-address"</span>
          <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.textInputStyle}</span>
          <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Mail address"</span>
          <span class="hljs-attr">onChangeText</span>=<span class="hljs-string">{text</span> =&gt;</span> {
            setError
            setEmail(text)
          }}
          error={isValid}
        /&gt;

        <span class="hljs-tag">&lt;<span class="hljs-name">TextInput</span>
          <span class="hljs-attr">label</span>=<span class="hljs-string">{</span>"<span class="hljs-attr">Password</span>"}
          <span class="hljs-attr">secureTextEntry</span>
          <span class="hljs-attr">autoCapitalize</span>=<span class="hljs-string">{false}</span>
          <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.textInputStyle}</span>
          <span class="hljs-attr">selectionColor</span>=<span class="hljs-string">{blue}</span>
          <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Password"</span>
          <span class="hljs-attr">error</span>=<span class="hljs-string">{isValid}</span>
          <span class="hljs-attr">onChangeText</span>=<span class="hljs-string">{text</span> =&gt;</span> setPassword(text)}
        /&gt;
      <span class="hljs-tag">&lt;/<span class="hljs-name">View</span>&gt;</span>
      {error ? (
        <span class="hljs-tag">&lt;<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.errorLabelContainerStyle}</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.errorTextStyle}</span>&gt;</span>{error}<span class="hljs-tag">&lt;/<span class="hljs-name">Text</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">View</span>&gt;</span>
      ) : null}
      <span class="hljs-tag">&lt;<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.signInButtonContainerStyle}</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">TouchableHighlight</span>
          <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.signInButtonStyle}</span>
          <span class="hljs-attr">onPress</span>=<span class="hljs-string">{__doSignUp}</span>
          <span class="hljs-attr">underlayColor</span>=<span class="hljs-string">{blue}</span>
        &gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">View</span>
            <span class="hljs-attr">style</span>=<span class="hljs-string">{{</span>
              <span class="hljs-attr">flexDirection:</span> "<span class="hljs-attr">row</span>",
              <span class="hljs-attr">justifyContent:</span> "<span class="hljs-attr">space-around</span>",
            }}
          &gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.signInButtonTextStyle}</span>&gt;</span>Continue<span class="hljs-tag">&lt;/<span class="hljs-name">Text</span>&gt;</span>
          <span class="hljs-tag">&lt;/<span class="hljs-name">View</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">TouchableHighlight</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">View</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">SafeAreaView</span>&gt;</span></span>
  )
}
</code></pre>
<p>For <code>LoginComponent</code> it’s mostly the same the only thing we need to change is we use <code>signInWithEmailAndPassword</code> method instead.</p>
<pre><code class="lang-jsx"><span class="hljs-keyword">const</span> __doSingIn = <span class="hljs-keyword">async</span> (email, password) =&gt; {
  <span class="hljs-keyword">try</span> {
    <span class="hljs-keyword">let</span> response = <span class="hljs-keyword">await</span> auth().signInWithEmailAndPassword(email, password)
    <span class="hljs-keyword">if</span> (response &amp;&amp; response.user) {
      Alert.alert(<span class="hljs-string">"Success ✅"</span>, <span class="hljs-string">"Authenticated successfully"</span>)
    }
  } <span class="hljs-keyword">catch</span> (e) {
    <span class="hljs-built_in">console</span>.error(e.message)
  }
}
</code></pre>
<p>![loginSuccess](loginSuccess.gif</p>
<p>And the authentication has been successfully implemented in our app ??</p>
<p>Just one last thing: if we have to verify if the user is already logged in, we need to display something else instead of the Login or SignIn screens. For example, we can display the Home screen.</p>
<p>We can use a Firebase module to verify a session. It can be imported from the auth module.</p>
<pre><code class="lang-jsx"><span class="hljs-keyword">import</span> auth, { firebase } <span class="hljs-keyword">from</span> <span class="hljs-string">"@react-native-firebase/auth"</span>
</code></pre>
<pre><code class="lang-jsx"> componentDidMount() {
    <span class="hljs-comment">//  this.register("said1292@gmail.com", "123456");</span>
    <span class="hljs-built_in">this</span>.__isTheUserAuthenticated();
  }

  __isTheUserAuthenticated = <span class="hljs-function">() =&gt;</span> {
    <span class="hljs-keyword">let</span> user = firebase.auth().currentUser.uid;
    <span class="hljs-keyword">if</span> (user) {
      <span class="hljs-built_in">console</span>.log(tag,  user);
      <span class="hljs-built_in">this</span>.setState({ <span class="hljs-attr">authenticated</span>: <span class="hljs-literal">true</span> });
    } <span class="hljs-keyword">else</span> {
      <span class="hljs-built_in">this</span>.setState({ <span class="hljs-attr">authenticated</span>: <span class="hljs-literal">false</span> });
    }
  };
</code></pre>
<p>And we can change the UI based on if the user is authenticated or not. We can display user info by just using the same method.</p>
<pre><code class="lang-jsx">firebase.auth().currentUser.email <span class="hljs-comment">// said543@gmail.com</span>
</code></pre>
<p>And to logout, you can just call <code>await firebase.auth().signOut()</code>;</p>
<p>I’m sure integrating navigation like <a target="_blank" href="https://reactnavigation.org/">react-navigation </a> would be awesome, but it was not our focus in this article. So feel free to add navigation so you can just navigate based on the user status.</p>
<p>Feel free to check out the full source code ?on <a target="_blank" href="https://github.com/hayanisaid/react-native-authentication-firebase">GitHub</a></p>
<p><em>Thanks for reading</em>.</p>
<p>Originally published on <a target="_blank" href="https://saidhayani.com/How%20to%20Add%20authentication%20to%20React%20Native%20in%20three%20steps%20using%C2%A0Firebase/">saidhayani.com</a></p>
<h3 id="heading-learn-more-about-react-nativehttpssaidhayanicom"><a target="_blank" href="https://saidhayani.com/">Learn more about React native</a>.</h3>
<ul>
<li><a target="_blank" href="https://twitter.com/SaidHYN">Twitter</a></li>
<li><a target="_blank" href="https://github.com/hayanisaid">GitHub</a></li>
<li><a target="_blank" href="https://www.instagram.com/saaed_happy/">Instagram</a></li>
<li><a target="_blank" href="http://eepurl.com/dk9OJL">Join the mail-list</a></li>
</ul>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ How to Handle Timezones and Synchronize Your Software with International Customers ]]>
                </title>
                <description>
                    <![CDATA[ By Jérémy Bardon When you develop some software you may not think about timezones at first. Unless you live in a country which has to deal with multiple time zones, such as the United States or Russia. I recently came across an issue involving timezo... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/synchronize-your-software-with-international-customers/</link>
                <guid isPermaLink="false">66d45f3cf855545810e9346c</guid>
                
                    <category>
                        <![CDATA[ i18n ]]>
                    </category>
                
                    <category>
                        <![CDATA[ internationalization ]]>
                    </category>
                
                    <category>
                        <![CDATA[ programing ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Web Development ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ freeCodeCamp ]]>
                </dc:creator>
                <pubDate>Tue, 07 Apr 2020 16:51:45 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/news/content/images/2020/04/steven-hille-VP25o26erko-unsplash.jpg" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>By Jérémy Bardon</p>
<p>When you develop some software you may not think about timezones at first. Unless you live in a country which has to deal with multiple time zones, such as the United States or Russia.</p>
<p>I recently came across an issue involving timezones. There were some unit tests making assertions about dates that used to work at my office in France but weren't working in Morocco for new members on our team.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/04/1-2.png" alt="Image" width="600" height="400" loading="lazy">
<em>Here is the unit test working in France but not in Morocco</em></p>
<p>‌This was an opportunity for me to learn how to correctly handle dates and times for international software. In this article, I’ll introduce time zone issues and share some rules to follow.</p>
<h2 id="heading-quick-introduction-to-time-zones">Quick introduction to time zones</h2>
<p>As the earth is kind of a sphere, the sun is rising in Japan while it's setting in America. If everyone used global time, let’s say <code>09:00</code> would be sunrise in Japan, but for Americans it would be sunset. Not very handy.</p>
<p>To make sure the time is coordinated with the sun for everyone, it’s necessary to shift from global time according to your location. As a result, the globe gets split into <strong>time zones</strong> and each gets an <strong>offset</strong>. This offset is a number of minutes to add to the global time to get your time zone time. It can be either positive or negative.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/04/2-2.png" alt="Image" width="600" height="400" loading="lazy">
_Standard world time zones — Illustration by [Wikimedia Commons](https://commons.wikimedia.org/wiki/User:Hellerick" rel="noopener"&gt;Hellerick from &lt;a href="https://en.wikipedia.org/wiki/File:Standard_World_Time<em>Zones.png" rel="noopener)</em></p>
<p>Global time is called <a target="_blank" href="https://en.wikipedia.org/wiki/Coordinated_Universal_Time"><strong>UTC</strong></a><strong>,</strong> it stands for Coordinated Universal Time. You may also heard about <a target="_blank" href="https://en.wikipedia.org/wiki/Greenwich_Mean_Time"><strong>GMT</strong></a> which is a time zone without any offset.</p>
<p>For instance, when it’s <code>10:50</code> at UTC, it’s also  <code>03:50</code> in San Francisco with a <code>-0700</code> offset and <code>18:50</code> in Beijing with a <code>+0800</code> offset. Yet, the shift isn’t only in whole hours: Nepal's offset is <code>+0545</code>. You can check it out on <a target="_blank" href="https://en.wikipedia.org/wiki/List_of_tz_database_time_zones">Wikipedia</a>.</p>
<p>In addition of this offset, which comes with the time zone, some countries also shift clocks twice a year. <a target="_blank" href="https://en.wikipedia.org/wiki/Daylight_saving_time"><strong>DST or summer time</strong></a> adds one hour to the time zone offset before summer. Then, the clock is reset to the time zone time in winter. The goal is to make the daytime longer.</p>
<p>The most common way to figure out a time zone is by using the <a target="_blank" href="https://www.iana.org/time-zones">IANA Time Zone Database</a>. You end up with a string such as <code>Europe/Paris</code> following the Area/City pattern. Besides, Microsoft maintains its own <a target="_blank" href="https://support.microsoft.com/en-us/help/973627/microsoft-time-zone-index-values">Microsoft Time Zone Database</a> used on its operating systems. But this can <a target="_blank" href="https://devblogs.microsoft.com/dotnet/cross-platform-time-zones-with-net-core/">cause issues</a> when running cross-platform .NET Core apps. </p>
<p>IANA is still the go-to. The Microsoft database isn't updated often, it contains less history, fairly curious time zone names (eg: <code>Romantic Standard Time</code>) and is error prone. For example, try to not mix up <code>Arab</code> , <code>Arabic</code> and <code>Arabian Standard Time</code>. For more details on each database and their differences, <a target="_blank" href="https://codeofmatt.com/what-is-a-time-zone/">check out this article</a>.</p>
<p>One last thing: there are plenty of ways to write a date. Fortunately, the <a target="_blank" href="https://en.wikipedia.org/wiki/ISO_8601"><strong>ISO 8601 specification</strong></a> sets a common rule for date formatting.</p>
<pre><code>November <span class="hljs-number">11</span>, <span class="hljs-number">2018</span> at <span class="hljs-number">12</span>:<span class="hljs-number">51</span>:<span class="hljs-number">43</span> AM (<span class="hljs-keyword">in</span> a time zone at UTC+<span class="hljs-number">00</span>:<span class="hljs-number">00</span>)
<span class="hljs-number">2018</span><span class="hljs-number">-11</span><span class="hljs-number">-05</span>T12:<span class="hljs-number">51</span>:<span class="hljs-number">43</span>Z &lt;- Z stands <span class="hljs-keyword">for</span> UTC

November <span class="hljs-number">11</span>, <span class="hljs-number">2018</span> at <span class="hljs-number">12</span>:<span class="hljs-number">51</span>:<span class="hljs-number">43</span> AM (<span class="hljs-keyword">in</span> a time zone at UTC +<span class="hljs-number">07</span>:<span class="hljs-number">30</span>)
<span class="hljs-number">2018</span><span class="hljs-number">-11</span><span class="hljs-number">-05</span>T12:<span class="hljs-number">51</span>:<span class="hljs-number">43</span>+<span class="hljs-number">0730</span>
</code></pre><h2 id="heading-how-computers-handle-dates">How computers handle dates</h2>
<p>Computers are only able to perform operations using numbers. This means that <code>2020-08-01 +1</code>  is not equal to <code>2020-08-02</code> and can’t be handled.</p>
<p>In order to work with dates more easily, we can represent dates as numbers. This is what <strong>timestamps</strong> are all about. It’s the number of milliseconds elapsed from a pre-defined date (or <strong>epoch</strong>) to the specified date.</p>
<p>Great, let’s choose an epoch then! Actually, the common epoch has already been set and its value is <strong>January 1, 1970 (midnight UTC)</strong>.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/04/3-2.png" alt="Image" width="600" height="400" loading="lazy"></p>
<p>To make sure you understood, run the previous snippet in your browser. What? You didn’t get the same result?</p>
<p>Ok, I cheated a bit to get this result… I should get <code>Thu Jan 01 1970 01:00 GMT+0100</code> because my computer time zone is set to Europe/Paris.</p>
<p>Actually, this moment with a zero timestamp is midnight in Greenwich, but also <code>05:45</code> in Mumbai and even <code>1969-12-31T16:30</code> in San Francisco when you consider their time zone’s offset.</p>
<blockquote>
<p>Rule #1 : Timestamps are only for saving, not for displaying. It's considered on UTC because it doesn’t include any offset or time zone.</p>
</blockquote>
<p>You didn’t get the “right” date before because JavaScript uses your local time zone to show the most accurate date/time to you.</p>
<p>Now, try the following snippet. I’m sure you’ll get the same result as I did:</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/04/4-2.png" alt="Image" width="600" height="400" loading="lazy"></p>
<p>Yes, the zero timestamp is <code>1970-01-01T00:00:00</code> <strong>at UTC</strong> for everyone around the globe. Still, it’s not true if you choose another time zone.</p>
<p>To sum up, <code>toString</code> shows the date using your local time zone while <code>toUTCString</code> is based on UTC. Also don’t be fooled by <code>toISOString</code> which is the same as <code>toUTCString</code> but outputs the ISO 8601 format (its name should be <code>toUTCISOString</code>).</p>
<p>I recommend the <a target="_blank" href="http://man7.org/linux/man-pages/man1/date.1.html">date command</a> to convert a second timestamp (not milliseconds) into a readable string. Using this command with the UTC option makes sure it doesn't take your computer/browser's time zone into account. </p>
<pre><code class="lang-bash"><span class="hljs-comment"># Linux</span>
$ date -d @1586159897 -u 
Mon Apr  6 07:58:17 UTC 2020

<span class="hljs-comment"># For Osx users</span>
$ date -r 1586159897 -u
</code></pre>
<h2 id="heading-lets-fix-our-unit-test">Let’s fix our unit test</h2>
<p>The problem I encountered with time zones was in my unit tests. Take the time to read it and understand what it’s supposed to assert:</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/04/6-2.png" alt="Image" width="600" height="400" loading="lazy"></p>
<p>In this test, the goal is to check that <code>setHours</code> sets the date’s hours and minutes to zero (midnight). I first choose a random timestamp which isn’t at midnight. Then compare the result with the timestamp for the same day at midnight.</p>
<p>Actually it’s working – but only if your time zone offset is <code>+0200</code> (including DST) at this moment. For instance, it’s not working for Africa/Casablanca ( <code>+0100</code> including DST). Let’s see how those timestamps are printed:</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/04/7-2.png" alt="Image" width="600" height="400" loading="lazy"></p>
<p>That’s it, the UTC date for both results isn't the same. It also means the resulting timestamps aren’t the same either.</p>
<p>As you can see, the offset for Paris is <code>+0200</code> and <code>+0100</code> for Casablanca. But both display midnight with <code>toString</code>. This means that the <code>setHours</code> function uses your computer time zone to perform the operation. And <code>toString</code> displays the date using your time zone.</p>
<p>This is not the only issue with this test: what if you run this test in San Fransisco? Right, the day would be <code>2020-07-31</code> for both dates because of the <code>-0700</code> offset.</p>
<p>The safest way to make this test reliable and work all around the world is to use a date in your local time zone. You’ll not use timestamps to set initial dates anymore.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/04/8-2.png" alt="Image" width="600" height="400" loading="lazy"></p>
<p>We can enhance the previous rule about timestamps:</p>
<blockquote>
<p>Rule #2 : String dates are suitable for display using the user's time zone and computations. They aren’t on UTC but generally include an offset.</p>
</blockquote>
<h2 id="heading-keep-it-on-date-on-the-server-side">Keep it on date on the server side</h2>
<p>The rule about timestamps still applies on the server side. However the second rule about using string dates can’t be used.</p>
<p>Indeed, in some case with technologies such as PHP, Java, and Rails the pages are rendered on server side (<a target="_blank" href="https://www.quora.com/What-is-the-difference-between-client-side-and-server-side-rendering-Why-is-server-side-rendering-required-for-React-and-Redux">SSR</a>). This means all the HTML is generated by the server and it has no idea about the client's time zone. Think about the server – it’s nothing more than a computer on the globe. It also has its own time zone but it’s not necessarily the same as the client's time zone.</p>
<blockquote>
<p>Rule #3 : Servers might either know the client's time zone or send a date on UTC. The server's time zone doesn’t matter.</p>
</blockquote>
<p>The new Java 8 Date/Time is considered one of the most understandable and clear APIs that helps you deal with date. I’m not going to explain how it works here but let’s review some interesting points.</p>
<p><code>LocalDateTime</code>, <code>OffsetDateTime</code> and <code>ZonedDateTime</code> are the 3 classes provided to compute and display date and time. No more <code>Date</code> or <code>DateTime</code> which mix up displaying the local date and UTC date.</p>
<p>The following examples are extracted from <a target="_blank" href="https://yawk.at/java.time/">this awesome article</a> (written by Jonas Konrad) which describes the Java 8 Date/Time API with a bunch of examples. By the way, many thanks to him, he kindly let me quote its pieces of code!</p>
<p>Let’s look at the differences between the 3 classes:</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/04/9-2.png" alt="Image" width="600" height="400" loading="lazy"></p>
<p>There is a small but important difference between <code>OffsetDateTime</code> and <code>ZonedDateTime</code>, did you notice it?</p>
<p>As its name says, <code>OffsetDateTime</code> is only aware of an offset between the local date and UTC. This means that it handles DST differently from a date which is attached to a time zone.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/04/10-2.png" alt="Image" width="600" height="400" loading="lazy"></p>
<p>The example with a time zone seems to be the right behavior. Actually, both are correct because adding 1 day can either mean:</p>
<ul>
<li>Add 1 day and keep the same hour (handles DST with <code>ZonedDateTime</code>)</li>
<li>Add 24 hours to the current date (with <code>OffsetDateTime</code>).</li>
</ul>
<p>Remember Rule #1 about timestamps? You should only use a UTC timestamp for saving. The Java API provides an <code>Instant</code> class which is a timestamp you can get from any of the three classes used for displaying the date.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/04/11-2.png" alt="Image" width="600" height="400" loading="lazy"></p>
<h2 id="heading-final-thoughts">Final thoughts</h2>
<p>In this article, you've learned that timestamps are for saving (Rule #1) and string dates are for displaying (Rule #2). Did you notice that the number of seconds from the epoch is quite a big number?</p>
<p>That’s why after the <a target="_blank" href="https://en.wikipedia.org/wiki/Year_2000_problem">Unix Millennium Bug (Y2K) problem</a> comes the <a target="_blank" href="https://en.wikipedia.org/wiki/Year_2038_problem">Y2K38 problem</a> which stands for the year 2038. At <code>2038-01-19T03:14:07Z</code> the timestamp (in seconds) will reach its maximum for 32-bit signed integers <code>2,147,483,647</code> . It will then turn into a negative number after adding one more second.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/04/5-2.jpg" alt="Image" width="600" height="400" loading="lazy">
_This sign indicates January 1900 instead of January 2000 — Picture from [Wikipedia Commons](https://en.wikipedia.org/wiki/File:Bug_de_l%27an<em>2000.jpg" rel="noopener)</em></p>
<p>‌On forums, people say they don’t care because their software won't be used for 20 years without re-writing. Well, that might be true but let’s still think about some solutions (with MySQL):</p>
<ul>
<li>Update <code>TIMESTAMP</code> type to 64-bit signed integers</li>
<li>Save UTC dates in <code>DATETIME</code> columns instead of <code>TIMESTAMP</code></li>
</ul>
<p>Both solutions have their advantages and drawbacks. The first one seems like a hack which reports the issue later. Yet, it fixes the issue for an almost infinite amount of time (billions of years). Your software will be deprecated and not used anymore when the problem occurs again. </p>
<p>The second solution also works for a very long time (up to <code>9999-12-31T23:59:59Z</code>).</p>
<p>Using <code>TIMESTAMP</code> is recommended for logs, while <code>DATETIME</code> is better for other needs. Remember a timestamp can’t store a date prior to <code>1970-01-01T00:00:00Z</code> and not after <code>2038-01-19T03:14:07Z</code>. This means you should use <code>DATETIME</code> to save dates far in the past and future.</p>
<p>Besides, in MySQL <code>TIMESTAMP</code>s are stored at UTC but displayed according to a specified time zone (and converted to UTC before saving). This mechanism comes in handy when you need to get a local date and doesn’t exist with <code>DATETIME</code>.</p>
<p>A last word about <a target="_blank" href="https://momentjs.com/">moment.js</a>, a popular library to deal with dates. I first experimented an issue and wanted to warn you about it:</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/04/12sq-2.png" alt="Image" width="600" height="400" loading="lazy"></p>
<p>Both <code>console.log</code>s will output <code>2020-08-02 00:00</code>. If you’re used to functional programming, you expect <code>hours</code> and <code>minutes</code> to return a new moment object because they are <a target="_blank" href="https://en.wikipedia.org/wiki/Pure_function">pure functions</a>. It’s not the case – they modify the input date and return it for easy chaining.</p>
<p>Thanks for reading up to the end. I hope this experience of mine has been useful to you. By the way, I’m not very confident about the choice between <code>TIMESTAMP</code> and <code>DATETIME</code>, so don’t hesitate to share your experience!</p>
<p><strong>If you found this article useful, please share it on social media to help others find it and to show your support!</strong> ?</p>
<p><strong>Don’t forget to check my <a target="_blank" href="https://www.freecodecamp.org/news/author/jbardon/">author page</a> for upcoming articles</strong> ?</p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ CSS Background Image – How to Add an Image URL to Your Div ]]>
                </title>
                <description>
                    <![CDATA[ By Amy Haddad Say you want to put an image or two on a webpage. One way is to use the background-image CSS property.  This property applies one or more background images to an element, like a <div>, as the documentation explains. Use it for aesthetic... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/how-to-add-an-image-url-to-your-div/</link>
                <guid isPermaLink="false">66d45d9dcc7f04d2549a3730</guid>
                
                    <category>
                        <![CDATA[ CSS ]]>
                    </category>
                
                    <category>
                        <![CDATA[ css properties ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Design ]]>
                    </category>
                
                    <category>
                        <![CDATA[ image ]]>
                    </category>
                
                    <category>
                        <![CDATA[ programing ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ freeCodeCamp ]]>
                </dc:creator>
                <pubDate>Sun, 05 Apr 2020 11:22:36 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/news/content/images/2021/06/w-qjCHPZbeXCQ-unsplash.jpg" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>By Amy Haddad</p>
<p>Say you want to put an image or two on a webpage. One way is to use the <strong><code>background-image</code></strong> CSS property. </p>
<p>This property applies one or more background images to an element, like a <strong><code>&lt;div&gt;</code>,</strong> as the <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-image">documentation</a> explains. Use it for aesthetic reasons, such as adding a textured background to your webpage.</p>
<h1 id="heading-add-an-image">Add an Image</h1>
<p>It’s easy to add an image using the <code>background-image</code> property. Just provide the path to the image in the <code>url()</code> value.</p>
<p>The image path can be a URL, as shown in the example below:</p>
<pre><code class="lang-css"><span class="hljs-selector-tag">div</span> {
   <span class="hljs-comment">/* Background pattern from Toptal Subtle Patterns */</span>
   <span class="hljs-attribute">background-image</span>: <span class="hljs-built_in">url</span>(<span class="hljs-string">"https://amymhaddad.s3.amazonaws.com/morocco-blue.png"</span>);
   <span class="hljs-attribute">height</span>: <span class="hljs-number">400px</span>;
   <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;
}
</code></pre>
<p>Or it can be a local path. Here’s an example:</p>
<pre><code class="lang-css"><span class="hljs-selector-tag">body</span> {
   <span class="hljs-comment">/* Background pattern from Toptal Subtle Patterns */</span>
   <span class="hljs-attribute">height</span>: <span class="hljs-number">400px</span>;
   <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;
   <span class="hljs-attribute">background-image</span>: <span class="hljs-built_in">url</span>(<span class="hljs-string">"./images/oriental-tiles.png"</span>);
}
</code></pre>
<h1 id="heading-add-multiple-images">Add Multiple Images</h1>
<p>You can apply multiple images to the <code>background-image</code> property.</p>
<pre><code class="lang-css"><span class="hljs-selector-tag">div</span> {
<span class="hljs-comment">/* Background pattern from Toptal Subtle Patterns */</span>
   <span class="hljs-attribute">height</span>: <span class="hljs-number">400px</span>;
   <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;
   <span class="hljs-attribute">background-image</span>: 
       <span class="hljs-built_in">url</span>(<span class="hljs-string">"https://amymhaddad.s3.amazonaws.com/morocco-blue.png"</span>),
       <span class="hljs-built_in">url</span>(<span class="hljs-string">"https://amymhaddad.s3.amazonaws.com/oriental-tiles.png"</span>);
   <span class="hljs-attribute">background-repeat</span>: no-repeat, no-repeat;
   <span class="hljs-attribute">background-position</span>: right, left; 
}
</code></pre>
<p>That’s a lot of code. Let’s break it down.</p>
<p>Separate each image <code>url()</code> value with a comma.</p>
<pre><code class="lang-css"><span class="hljs-selector-tag">background-image</span>: 
    <span class="hljs-selector-tag">url</span>("<span class="hljs-selector-tag">https</span>://<span class="hljs-selector-tag">amymhaddad</span><span class="hljs-selector-class">.s3</span><span class="hljs-selector-class">.amazonaws</span><span class="hljs-selector-class">.com</span>/<span class="hljs-selector-tag">morocco-blue</span><span class="hljs-selector-class">.png</span>"),
    <span class="hljs-selector-tag">url</span>("<span class="hljs-selector-tag">https</span>://<span class="hljs-selector-tag">amymhaddad</span><span class="hljs-selector-class">.s3</span><span class="hljs-selector-class">.amazonaws</span><span class="hljs-selector-class">.com</span>/<span class="hljs-selector-tag">oriental-tiles</span><span class="hljs-selector-class">.png</span>");
</code></pre>
<p>Now position and enhance your images by applying additional properties.</p>
<pre><code class="lang-css"><span class="hljs-selector-tag">background-repeat</span>: <span class="hljs-selector-tag">no-repeat</span>, <span class="hljs-selector-tag">no-repeat</span>;
<span class="hljs-selector-tag">background-position</span>: <span class="hljs-selector-tag">right</span>, <span class="hljs-selector-tag">left</span>;
</code></pre>
<p>There are several <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds">sub-properties</a> you can add to your background images, such as <strong><code>background-repeat</code></strong> and <strong><code>background-position</code></strong>, which we used in the above example. You can even add <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/gradient">gradients</a> to a background image.</p>
<p>See what it looks like when we put everything together.</p>
<div class="embed-wrapper">
        <iframe width="100%" height="350" src="https://codepen.io/amymhaddad/embed/VwLqWbm" style="aspect-ratio: 16 / 9; width: 100%; height: auto;" title="CodePen embed" scrolling="no" allowtransparency="true" allowfullscreen="true" loading="lazy"></iframe></div>
<h1 id="heading-order-matters">Order Matters</h1>
<p>The order that you list your images in matters because of the stacking order. That means the first image listed is nearest to the user, according to the <a target="_blank" href="https://www.w3.org/TR/css-backgrounds-3/#layering">documentation</a>. Then, the next one, and the next, and so on. </p>
<p>Here’s an example.</p>
<pre><code class="lang-css"><span class="hljs-selector-tag">div</span> {
<span class="hljs-comment">/* Background pattern from Toptal Subtle Patterns */</span>
   <span class="hljs-attribute">height</span>: <span class="hljs-number">400px</span>;
   <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;
   <span class="hljs-attribute">background-image</span>: 
       <span class="hljs-built_in">url</span>(<span class="hljs-string">"https://amymhaddad.s3.amazonaws.com/morocco-blue.png"</span>),
       <span class="hljs-built_in">url</span>(<span class="hljs-string">"https://amymhaddad.s3.amazonaws.com/oriental-tiles.png"</span>);
   <span class="hljs-attribute">background-repeat</span>: no-repeat, no-repeat;
}
</code></pre>
<p>We’ve listed two images in the code above. The first image (morocco-blue.png) will be in front of the second (oriental-tiles.png). Both images are the same size and lack opacity, so we only see the first image.</p>
<p>But if we move the second image (oriental-tiles.png) over to the right by 200 pixels, then you can see part of it (the rest remains hidden).</p>
<p>Here’s what it looks like when we put everything together.</p>
<div class="embed-wrapper">
        <iframe width="100%" height="350" src="https://codepen.io/amymhaddad/embed/oNXrXMo" style="aspect-ratio: 16 / 9; width: 100%; height: auto;" title="CodePen embed" scrolling="no" allowtransparency="true" allowfullscreen="true" loading="lazy"></iframe></div>
<h2 id="heading-when-should-you-use-background-image">When Should You Use Background Image?</h2>
<p>There’s a lot to like about the <code>background-image</code> property. But there’s a drawback. </p>
<p>The image may not be accessible to all users, the <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-image">documentation</a> points out, like those who use screen readers.</p>
<p>That’s because you can’t add textual information to the <code>background-image</code> property. As a result, the image will be missed by screen readers.</p>
<p>Use the <code>background-image</code> property only when you need to add some decoration to your page. Otherwise, use the HTML <strong><code>&lt;img&gt;</code></strong> element if an image has meaning or purpose, as the <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-image">documentation</a> notes.</p>
<p>That way, you can add text to an image element, using the <strong><code>alt</code></strong> attribute, which <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img">describes the image</a>. The provided text will be picked up by screen readers.</p>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"house"</span> 
       <span class="hljs-attr">src</span>=<span class="hljs-string">"./images/farnsworth_house.jpeg"</span>
       <span class="hljs-attr">alt</span>=<span class="hljs-string">"A glass house designed by Ludwig Mies van der Rohe located in Plano, Illinois."</span>&gt;</span>
</code></pre>
<p>Think of it this way: <code>background-image</code> is a CSS property, and CSS focuses on presentation or style; HTML focuses on semantics or meaning. </p>
<p>When it comes to images, you’ve got options. If an image is needed for decoration, then the <code>background-image</code> property may be a good choice for you.</p>
<p><em>I write about learning to program and the best ways to go about it (</em><a target="_blank" href="https://amymhaddad.com/">amymhaddad.com</a>).  </p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ The Parallel Threads of Life and Programming ]]>
                </title>
                <description>
                    <![CDATA[ I’m convinced our deepest desire is, by paying the cost of time, to be shown a glimmer of some fundamental truth about the universe. To hear it whisper its lessons and point towards its purpose. And,  ]]>
                </description>
                <link>https://www.freecodecamp.org/news/the-parallel-threads-of-life-and-programming-2/</link>
                <guid isPermaLink="false">66d4617f3dce891ac3a96842</guid>
                
                    <category>
                        <![CDATA[ Life lessons ]]>
                    </category>
                
                    <category>
                        <![CDATA[ programing ]]>
                    </category>
                
                    <category>
                        <![CDATA[ programming languages ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Brandon Wozniewicz ]]>
                </dc:creator>
                <pubDate>Sun, 23 Feb 2020 16:50:40 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/news/content/images/2020/02/daria-sukhorukova-I51HSIo8k-4-unsplash.jpg" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>I’m convinced our deepest desire is, by paying the cost of time, to be shown a glimmer of some fundamental truth about the universe. To hear it whisper its lessons and point towards its purpose.</p>
<p>And, if you look hard enough for these lessons, you will find them. Whether they are a manifestation of your mind or can be held in your hand, once you see them, they remain yours forever.</p>
<p>Programming offers significant parallels to life. We are tasked with creating something–something whose sum <em>feels</em> more significant than the parts. Like life, it is a test of bounded creativity. There are rules we <em>must</em> follow, some we <em>should</em> follow, and others we are free to ignore. Programming offers us a glimpse, however ephemeral it may be, into some fundamental truths about the world in which we reside.</p>
<h2 id="heading-the-four-parallels-between-programming-and-life">The Four Parallels Between Programming and Life</h2>
<h3 id="heading-iteration-is-progress">Iteration is progress.</h3>
<p>Did you know, if you started the month with a single penny and it doubled every day, you would have \(163 on the 15th of the month? Surely, you think, there must be a better way to make \)163 in 15 days. But, if you wait another 15 days, you would have more than 5 million dollars.</p>
<p>Go ahead, I’ll wait while you do the math.</p>
<p>In programming, we use the term <em>iterate</em> to indicate repeating something. In a more formal definition, it is repeatedly applying a procedure to the previous result of that procedure. For example, adding the numbers 1 and 1 to get 2, then adding 1 and 2 to get 3, and so forth.</p>
<p>When we iterate, we look for feedback. We wait for some condition to be met so we can either stop iterating or adjust <em>how</em> we are iterating. If we fail to listen for that feedback, we can get stuck in an infinite loop.</p>
<p>Life is no different. We often expect we can jump from point A to point B without ever defining what point A or point B is. And, even when we identify those points, we expect an immediate move from start to finish. Instead, what is often the truth, is we must incrementally make our way from beginning to end. We must listen for feedback that tells us where we are so we can make adjustments.</p>
<p>When we have goals, progress can often feel–for the first few days, weeks, or even months–non-existent. We’re often enticed to start over or start fresh. But in doing so, we fail to realize, while we might not have reached our destination, we are somewhere far past where we started. A complete restart isn’t necessary, we just need to make some minor adjustments.</p>
<p>Stop starting over. Let iteration be the force the creates progress.</p>
<h3 id="heading-most-complex-problems-are-collections-of-smaller-problems-that-have-already-been-solved">Most complex problems are collections of smaller problems that have already been solved.</h3>
<p>Even the most fascinating apps are a series of mostly mundane solutions to mundane problems. In fact, most of the solutions implemented within a program are nothing unique. It is the combination of those ordinary solutions that creates an extraordinary product.</p>
<p>In programming, there are different ways to use these quite-ordinary solutions. One way is through a term called <em>abstraction</em>. To abstract something is to move something away from something else.</p>
<p>In computer programming, when we abstract something, we are often building higher-level technology on top of lower-level technology. This makes it easier to work with lower-level technologies.</p>
<p>For example, most programming languages are <em>abstractions</em> of the enigmatic binary language (0s and 1s). They put a layer between us and some more fundamental, but cumbersome, level of interaction with the computer. These higher-level languages allow us to focus on higher-level problems.</p>
<p>Another way we can more efficiently solve problems is by using someone else’s solutions. You may have also heard the term <em>library</em>. And, while I am not speaking of a poorly lit, dusty, and quiet location where books live, it isn’t far off.</p>
<p>A <em>library</em>, in programming terms, is code that someone else wrote that solves routine problems. It also abstracts away those things which aren’t absolutely fundamental to solving whatever problem you have.</p>
<p>For example, if you are writing a program that requires someone to log in to use your application, you <em>could</em> write the code to encrypt and decrypt passwords yourself, <em>or,</em> you could use code written by someone else to do that for you. With the latter option, we free up time to focus on more significant problems our application is trying to solve.</p>
<p>All of us use abstractions and libraries in some shape or form. For example, the grocery store is an abstraction of producing our own food. A car is an abstraction of traveling on foot. An oven is an abstraction of building a fire. These are layers we place in front of us that allows us to allocate time to higher-level problems.</p>
<p>Reinvent the wheel only to learn how to make a wheel, not to drive to the store.</p>
<h3 id="heading-how-you-define-a-problem-is-how-you-will-solve-it">How you define a problem is how you will solve it.</h3>
<p>Recall the story of a truck that drove under a bridge and got stuck. Engineers spent hours trying to figure out how to move the bridge. A small child came up, face to face with the tires of the truck, and said, “what if you let the air out of the tires?”</p>
<p>From the child’s vantage point, the problem wasn’t the bridge was too short, but rather the truck was too tall.</p>
<p>Most people can solve any problem. In fact, most problems state the solution. For example, if the bridge is causing the issue, the answer is to do something with the bridge. If, however, the problem is that the truck is too tall, then the solution–almost glaringly obvious–is to make the truck shorter.</p>
<h3 id="heading-the-arrangement-of-parts-is-much-more-important-than-the-parts-themselves">The arrangement of parts is much more important than the parts themselves.</h3>
<p>What does the Google Maps codebase, the Declaration of Independence, Martin Luther King Jr.’s <em>I have a dream</em> speech, Steve Jobs’s 2005 commencement address, and my first app, <em>Hello, World</em> have in common?</p>
<p>The access to the same 26 letters of the English alphabet.</p>
<p>There is very little that is more fascinating to me than the written word. The written word is one of the most powerful <em>technologies</em> that emerged from humans.</p>
<p>Yes, I use the term <em>technology</em> because–even carved into the wall of a cave–it fundamentally changed how we persist information. No longer was data constrained within the boundaries of our minds.</p>
<p>While the purpose of the written word was initially linked to record-keeping, it quickly became a way to spread ideas. Some of these ideas would anger, and others inspire.</p>
<p>Every language (including computer language) has subtleties when transmitting information through writing or speech. The words and their constituent parts may be slightly different. Still, however, a language is a set of symbols that can be arranged into what seems to be an infinite number of ideas.</p>
<p>For example, in the English language, there are roughly 29 symbols that I can use to represent nearly my entire universe. I’ve mentioned the 26 letters, but it is also helpful to have access to periods, commas, and question marks.</p>
<p>Those 29 characters are available to you, me, and were available to Steve Jobs. Yet, each of us, throughout our lives, will follow different trajectories based on the combination of letters we chose to believe and speak into existence.</p>
<p>Interestingly, while we often add words to the dictionary, we don’t usually add letters. This means, at the most fundamental level, that all the ideas that can exist, already do, with their constituent parts quietly waiting for us to shuffle them into existence.</p>
<p><strong><em>Les Brown</em> sums it up well with this thought experiment:</strong></p>
<p><em>Imagine if you will, being on your death bed. And standing around your bed–the ghosts of the ideas, the dreams, the abilities, the talents given to you by life.</em></p>
<p><em>And that you, for whatever reason, never acted on those ideas. You never pursued that dream. You never used those talents. We never saw your leadership. You never used your voice. You never wrote that book.</em></p>
<p><em>And there they are, standing around your bed, looking at you with large angry eyes saying: “We came to you. And only you could have given us life! Now we must die with you forever.”</em></p>
<p><em>The question is — if you die today–what ideas, what dreams, what abilities, what talents, what gifts, would die with you?</em></p>
<p>Thank you for reading!</p>
<p>Found this helpful? I write about practical automation, productivity systems, and building smarter workflows — without the jargon. Visit me at <a href="http://brandonwoz.com">brandonwoz.com</a>.</p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ Do You Solve Programming Problems or Complete Exercises? (The Difference Matters.) ]]>
                </title>
                <description>
                    <![CDATA[ By Amy Haddad People tend to use the terms “problems” and “exercises” interchangeably. But there’s a difference—and it matters. Professor Paul Zeitz makes the distinction. Take 5 × 5. That’s easy, and that’s an exercise. So is 5,490,900 × 496. It’s a... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/do-you-solve-programming-problems-or-complete-exercises-the-difference-matters/</link>
                <guid isPermaLink="false">66d45d9b3bc3ab877dae21f6</guid>
                
                    <category>
                        <![CDATA[ code ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Problem Solving ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Productivity ]]>
                    </category>
                
                    <category>
                        <![CDATA[ programing ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ freeCodeCamp ]]>
                </dc:creator>
                <pubDate>Tue, 11 Feb 2020 13:59:00 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/news/content/images/2020/02/amy-haddad-article.jpg" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>By Amy Haddad</p>
<p>People tend to use the terms “problems” and “exercises” interchangeably. But there’s a difference—and it matters.</p>
<p>Professor Paul Zeitz makes the distinction.</p>
<p>Take 5 × 5. That’s easy, and that’s an exercise. So is 5,490,900 × 496. It’s a bit harder and will take you more time to solve, but you know what to do. That’s the key point.</p>
<p>“An exercise is a mathematical question that you immediately know how to answer,” explains Zeitz in a <a target="_blank" href="https://www.thegreatcoursesplus.com/show/art_and_craft_of_mathematical_problem_solving">lecture series on problem-solving</a>. “You may not answer it correctly, in fact you may never answer it correctly...but there’s no doubt about how to proceed.”</p>
<p>Not so with problems. A problem, according to Zeitz, “is a mathematical question that you do not know how to answer, at least initially.” </p>
<p>He defines problems and exercises through the lens of mathematical problem-solving, but they’re applicable to programming as well. </p>
<p>Each day we put our <a target="_blank" href="https://www.freecodecamp.org/news/how-to-be-a-great-programmer-34939494996d/">problem-solving</a> skills to work as programmers: debugging code, learning a new topic, or even solving a problem. Exercises have their place, but as a programmer there’s no replacement for solving problems.</p>
<h2 id="heading-exercise-with-exercises">Exercise with Exercises</h2>
<p>There are two ways you can benefit from exercises. First, they’re helpful when learning a new topic. </p>
<p>I’m learning JavaScript right now and using a mix of exercises and problems to do so. The exercises help me see patterns and get comfortable with concepts and syntax. </p>
<p>Here’s an example of an exercise from a <a target="_blank" href="https://github.com/LambdaSchool/JS-Exercise-Functions-Arrays-Objects">project</a> that asked me to write a function, which took an array of cars.</p>
<pre><code><span class="hljs-keyword">const</span> cars = [
  { <span class="hljs-attr">id</span>: <span class="hljs-number">1</span>, <span class="hljs-attr">car_make</span>: <span class="hljs-string">"Lincoln"</span>, <span class="hljs-attr">car_model</span>: <span class="hljs-string">"Navigator"</span>, <span class="hljs-attr">car_year</span>: <span class="hljs-number">2009</span> },
  { <span class="hljs-attr">id</span>: <span class="hljs-number">2</span>, <span class="hljs-attr">car_make</span>: <span class="hljs-string">"Mazda"</span>, <span class="hljs-attr">car_model</span>: <span class="hljs-string">"Miata MX-5"</span>, <span class="hljs-attr">car_year</span>: <span class="hljs-number">2001</span> },
  { <span class="hljs-attr">id</span>: <span class="hljs-number">3</span>, <span class="hljs-attr">car_make</span>: <span class="hljs-string">"Land Rover"</span>, <span class="hljs-attr">car_model</span>: <span class="hljs-string">"Defender Ice Edition"</span>, <span class="hljs-attr">car_year</span>: <span class="hljs-number">2010</span> },
  ...
 ]
</code></pre><p>I had to sort the array of objects by the <code>car_model</code> key, in ascending order.</p>
<p>It’s not to say this exercise was a breeze—it wasn’t. It took me time and I got my fair share of error messages. </p>
<p>However, it qualifies as an exercise because I knew what I needed to do from the start. </p>
<p>I’d recently learned about arrays in JavaScript. I was familiar with sorting data from my experience with Python, though I had to research how to do this in JavaScript. The explicit directions helped, too. </p>
<p>But the concepts were still new. I needed practice putting them together, which is why this exercise was valuable. Repetition breeds familiarity, and the concepts began to solidify in my mind.</p>
<h2 id="heading-maintain-what-youve-gained">Maintain What You’ve Gained</h2>
<p>Exercises also help keep learned information fresh. </p>
<p>As I learn JavaScript, I don’t want to forget everything I’ve learned about the first language I learned, Python. So I use Anki, a flashcard program, multiple times per day. </p>
<p>In this context, exercises help you keep a mountain of material straight, remind you of important concepts, and get more comfortable using a particular data structure or approach. It’s maintenance work on the body of knowledge you’ve gained so far. </p>
<p>I have over 1,000 cards that are filled with material I’ve seen many times before. Some cards have questions about syntax. Others ask me to write SQL queries or command-line or Git commands. Many others are filled with exercises, like “rotate a list of numbers to the right by one place value.”</p>
<p>It’s important to note that this exercise was once a problem for me. If you do a problem enough, it can become an exercise. At the same time, you can make an exercise a problem by <a target="_blank" href="https://www.freecodecamp.org/news/why-i-recycle-programming-problems-7785e04e451d/">adding a constraint</a>. </p>
<p>Exercises are a slippery slope. On the one hand, they’re useful for learning purposes. On the other, it’s easy to get comfortable by sticking with exercises exclusively.</p>
<p>That’s the downside: staying in your comfort zone.</p>
<h2 id="heading-dealing-with-ambiguity">Dealing with Ambiguity</h2>
<p>Programming is about problem-solving. And solving problems will take you <em>outside</em> of your comfort zone. This is a good thing. </p>
<p>For me, problems have two distinctive qualities. The first is ambiguity. Problem-solving is largely about how to effectively deal with ambiguity.   </p>
<ul>
<li>An error message appears each time your program runs. Why? What’s going on? Where’s the bug? How can you fix it? </li>
<li>You pull up a new problem statement. You read it and re-read it. At first glance, you’ve got no idea what’s going on, let alone what you need to do to solve it. You may even get the “deer in headlights” sensation that’s accompanied by a pit in the bottom of your stomach. (You picked a good problem!)</li>
<li>You need to learn about relational databases. That’s pretty broad. How are you going to go about it? What to focus on first? What matters most? What do you really need to know right <em>now</em>?</li>
</ul>
<p>These examples all involve ambiguity. And all of them require solving <em>problems</em>, whether that’s finding and trouble-shooting a bug, solving an actual problem, or learning a new topic.  </p>
<p>To make progress, you research, experiment, pull out the facts, create a plan, and apply a variety of problem-solving tactics. In short, you learn to figure it out. The more time you spend with a problem and the <a target="_blank" href="https://amymhaddad.com/the-art-of-problem-solving">different perspectives you gain</a>, the more layers it reveals and the closer you get to the “aha” moment.</p>
<h2 id="heading-embrace-the-struggle">Embrace the Struggle</h2>
<p>The other difference with problems is the struggle. It’s real.</p>
<p>Problem-solving will test your mental stamina and patience. Progress can be slow, and the process tedious. I’ve toiled away at problems for hours, days, and even weeks.</p>
<p>It’s not to say that exercises won’t challenge you. They can. It’s one thing when you know that you need to use a particular method; you just need to get it to work properly. That’s a challenge, which can sometimes be downright frustrating.</p>
<p>But it’s something else entirely when you have no idea what to do from the start, which may happen multiple times when solving a problem. To me, problems are a struggle.</p>
<p>The best solution is to endure it and get yourself <a target="_blank" href="https://www.freecodecamp.org/news/how-to-get-unstuck/">unstuck</a>. In my experience, the struggle means I’m learning a lot and the breakthrough is usually around the corner. </p>
<p>As you push through the mental discomfort, you’ll find yourself thinking creatively and devising solutions you never thought of before. (You surprise and impress yourself—you know more than you think!) You’re becoming a stronger programmer.</p>
<p>You’ll even find yourself having fun. Problem-solving is challenging, to be sure, and even frustrating at times. But it’s also incredibly rewarding. </p>
<p>It’s like crossing the finish line of a half-marathon. No doubt the past 13.1 miles were grueling, but crossing the finish line was worth it and I’d do it again. Solving a problem feels the same way.</p>
<h2 id="heading-which-is-it-problems-or-exercises">Which Is It: Problems or Exercises?</h2>
<p>When you crack open your laptop, are you going to solve problems or complete exercises?  </p>
<p>Exercises have benefits, and it’s fine to incorporate them into your programming sessions. I use exercises as a warm-up prior to a programming session. I’ll flip through an Anki flashcard deck for ten or fifteen minutes and work through some exercises. If I’m learning something new, like JavaScript, I may have an entire programming session devoted to exercises. </p>
<p>However, I devote time each day to solving <em>problems</em>—no matter what else I’m learning or building. Even on the days when I allocate a large chunk of time to exercises, I allocate plenty of time to solving problems, too.  </p>
<p>So when you’re about to start a programming session, be aware what you’re setting out to do: exercises or problems. And no matter what, make time for solving problems.</p>
<p>Problem-solving is a skill that takes a lot of practice and time to develop. The only way to get better is to work at it each day. It’s that important, and for good reason.</p>
<p>We solve problems each day as programmers, and in a variety of ways. Making time to problem-solve is a no-brainer; our work as programmers depends on it.</p>
<p><em>I write about learning to program, and the best ways to go about it</em> (<a target="_blank" href="https://amymhaddad.com/">amymhaddad.com</a>).</p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ Binary Search in Python: A Visual Introduction ]]>
                </title>
                <description>
                    <![CDATA[ Welcome In this article, you will learn how the Binary Search algorithm works behind the scenes and how you can implement it in Python. In particular, you will learn: How the algorithm works behind the scenes to find a target element. How its Python... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/binary-search-in-python-visual-introduction/</link>
                <guid isPermaLink="false">66b1f827bafebbb4a1f9f6ce</guid>
                
                    <category>
                        <![CDATA[ algorithms ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Computer Science ]]>
                    </category>
                
                    <category>
                        <![CDATA[ programing ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Python ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Estefania Cassingena Navone ]]>
                </dc:creator>
                <pubDate>Mon, 13 Jan 2020 14:00:00 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/news/content/images/2020/01/Binary-Search-1.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <h2 id="heading-welcome">Welcome</h2>
<p>In this article, you will learn how the Binary Search algorithm works behind the scenes and how you can implement it in Python.</p>
<p><strong>In particular, you will learn:</strong></p>
<ul>
<li>How the algorithm works behind the scenes to find a target element.</li>
<li>How its Python implementation works line by line.</li>
<li>Why it is a very efficient algorithm compared to Linear Search. </li>
<li>Its advantages and requirements.</li>
</ul>
<p><strong>Let's begin! ✨</strong></p>
<h2 id="heading-intro-to-binary-search">🔹 Intro to Binary Search</h2>
<p>This algorithm is used to find an element in an ordered sequence (for example: a list, tuple, or string). </p>
<h3 id="heading-requirements">Requirements</h3>
<p>To apply the Binary Search algorithm to a sequence, the sequence already has to be sorted in ascending order. Otherwise, the algorithm will not find the correct answer. If it does, it will be by pure coincidence. </p>
<p><strong>💡 Tip:</strong> You can sort the sequence before applying Binary Search with a sorting algorithm that meets your needs.</p>
<h3 id="heading-input-and-output">Input and Output</h3>
<p>The algorithm (implemented as a function) needs this data:</p>
<ul>
<li>An ordered sequence of elements (for example: list, tuple, string).</li>
<li>The target element that we are searching for. </li>
</ul>
<p>It returns the <strong>index</strong> of the element that you are looking for if it's found. If the element is not found, -1 is returned.</p>
<h3 id="heading-efficiency">Efficiency</h3>
<p>It is very efficient compared to Linear Search (searching for an element one by one, starting from the first one) because we are able to "discard" half of the list on every step. </p>
<p>Let's start diving into this algorithm.</p>
<h2 id="heading-visual-walkthrough">🔸 Visual Walkthrough</h2>
<p>We will apply the Binary Search algorithm to this list:</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/01/image-4.png" alt="Image" width="600" height="400" loading="lazy"></p>
<p><strong>💡 Tip:</strong> Notice that the list is already sorted. It included the indices as a visual reference.</p>
<h3 id="heading-goal">Goal</h3>
<p>We want to find the index of the integer <strong>67</strong>. </p>
<h3 id="heading-interval">Interval</h3>
<p>Let's pretend that we are the algorithm. How do we start the process? </p>
<p>We start by selecting the two bounds of the interval where we want to search. We want to search the entire list, so we select index <code>0</code> as the lower bound and index <code>5</code> as the upper bound:</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/01/image-6.png" alt="Image" width="600" height="400" loading="lazy"></p>
<h3 id="heading-middle-element">Middle Element</h3>
<p>Now we need to find the index of the middle element in this interval. We do this by adding the lower bound and the upper bound and dividing the result by 2 using integer division. </p>
<p>In this case, <code>(0 + 5)//2</code> is <strong><code>2</code></strong> because the result of <code>5/2</code> is <code>2.5</code> and integer division truncates the decimal part. </p>
<p>So the middle element is located at <strong>index 2</strong>, and the middle element is the number <strong>6</strong>:</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/01/image-7.png" alt="Image" width="600" height="400" loading="lazy"></p>
<h3 id="heading-comparisons">Comparisons</h3>
<p>Now we need to start comparing the middle element with our target element to see what we need to do next.</p>
<p>We ask:<br><strong>Is the middle element equal to the element that we are looking for?</strong></p>
<pre><code class="lang-python"><span class="hljs-number">6</span> == <span class="hljs-number">67</span> <span class="hljs-comment"># False</span>
</code></pre>
<p>No, it isn't. </p>
<p>So we ask:<br><strong>Is the middle element greater than the element that we are looking for?</strong></p>
<pre><code class="lang-python"><span class="hljs-number">6</span> &gt; <span class="hljs-number">67</span> <span class="hljs-comment"># False</span>
</code></pre>
<p>No, it isn't.</p>
<p>So <strong>the middle element is smaller than the element that we are looking for.</strong></p>
<pre><code><span class="hljs-number">6</span> &lt; <span class="hljs-number">67</span> # True
</code></pre><h3 id="heading-discard-elements">Discard Elements</h3>
<p>Since the list is already sorted, this tells us something extremely important. It tells us that we can "discard" the lower half of the list because we know that all the elements that come before the middle element will be smaller than the element that we are looking for, so our target element is not there.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/01/image-9.png" alt="Image" width="600" height="400" loading="lazy"></p>
<h3 id="heading-start-again-choose-the-bounds">Start Again - Choose the Bounds</h3>
<p>What do we do next? We've discarded the elements and the cycle is repeated again. </p>
<p>We have to choose the bounds for the new interval (see below). But notice that the upper bound is kept intact and only the lower bound is changed. </p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/01/image-10.png" alt="Image" width="600" height="400" loading="lazy"></p>
<p>This is because the element that we are looking could be in the upper half of the list. The upper bound is kept intact and the lower bound is changed to "shrink" the interval to an interval where our target element could be found.</p>
<p>💡 <strong>Tip:</strong> If the middle element had been greater than the element that we are looking for, the upper bound would have been changed and the lower bound would have been kept intact. This way, we would discard the upper half of the list and continue searching in the lower half.</p>
<h3 id="heading-middle-element-1">Middle Element</h3>
<p>Now we need to find the index of the middle element by adding the lower bound to the upper bound and dividing the result by 2 using integer division. </p>
<p>The result of <code>(3+5)//2</code> is <code>4</code>, so the middle element is located at <strong>index</strong> <code>**4**</code> and the middle element is <strong>67</strong>.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/01/image-11.png" alt="Image" width="600" height="400" loading="lazy"></p>
<h3 id="heading-comparisons-1">Comparisons</h3>
<p>We ask:<br><strong>Is the middle element equal to the element that we are looking for?</strong></p>
<pre><code><span class="hljs-number">67</span> == <span class="hljs-number">67</span> # True
</code></pre><p>Yes, it is! So we've found the element at index <strong>4</strong>. The value 4 is returned and the algorithm was completed successfully.</p>
<p>💡 <strong>Tip:</strong> If the element had not been found, the process would have continued until the interval was no longer valid. If the element had not been found in the entire list, -1 would have been returned. </p>
<h2 id="heading-code-walkthrough">🔹 Code Walkthrough</h2>
<p>Now that you have a visual intuition of how the algorithm works behind the scenes, let's dive into the iterative Python implementation by analyzing it line by line:</p>
<pre><code>def binary_search(data, elem):

    low = <span class="hljs-number">0</span>
    high = len(data) - <span class="hljs-number">1</span>

    <span class="hljs-keyword">while</span> low &lt;= high:

        middle = (low + high)<span class="hljs-comment">//2</span>

        <span class="hljs-keyword">if</span> data[middle] == elem:
            <span class="hljs-keyword">return</span> middle
        elif data[middle] &gt; elem:
            high = middle - <span class="hljs-number">1</span>
        <span class="hljs-attr">else</span>:
            low = middle + <span class="hljs-number">1</span>

    <span class="hljs-keyword">return</span> <span class="hljs-number">-1</span>
</code></pre><h3 id="heading-header">Header</h3>
<p>Here we have the function header:</p>
<pre><code>def binary_search(data, elem):
</code></pre><p>It takes two arguments: </p>
<ul>
<li>The ordered sequence of elements (for example: list, tuple, or string). </li>
<li>The element that we want to find.</li>
</ul>
<h3 id="heading-initial-interval">Initial Interval</h3>
<p>The next line sets the initial lower and upper bounds:</p>
<pre><code class="lang-python">low = <span class="hljs-number">0</span>
high = len(data) - <span class="hljs-number">1</span>
</code></pre>
<p>The initial lower bound is index <code>0</code> and the initial upper bound is the last index of the sequence.</p>
<h3 id="heading-loop">Loop</h3>
<p>We will repeat the process while there is a valid interval, while the lower bound is smaller than or equal to the upper bound. </p>
<pre><code class="lang-python"><span class="hljs-keyword">while</span> low &lt;= high:
</code></pre>
<p>💡 <strong>Tip:</strong> Remember that the bounds are indices.</p>
<h3 id="heading-middle-element-2">Middle Element</h3>
<p>On every iteration, we need to find the index of the middle element. To do this, we add the lower and upper bounds and divide the result by 2 using integer division. </p>
<pre><code class="lang-python">middle = (low + high)//<span class="hljs-number">2</span>
</code></pre>
<p>💡 <strong>Tip:</strong> We use integer division in case the list or interval contains an even number of elements. For example, if the list had 6 elements and we did not use integer division, <code>middle</code> would be the result of <code>(0 + 5)/2</code> which is <code>2.5</code>. An index cannot be a float, so we truncate the decimal portion by using <code>//</code> and select the element at index <code>2</code>. </p>
<h3 id="heading-comparisons-2">Comparisons</h3>
<p>With these conditionals (see below), we determine what to do depending on the value of the middle element <code>data[middle]</code>. We compare it to the target element that we are looking for.</p>
<pre><code class="lang-python"><span class="hljs-keyword">if</span> data[middle] == elem:
    <span class="hljs-keyword">return</span> middle
<span class="hljs-keyword">elif</span> data[middle] &gt; elem:
    high = middle - <span class="hljs-number">1</span>
<span class="hljs-keyword">else</span>:
    low = middle + <span class="hljs-number">1</span>
</code></pre>
<p>There are three options:</p>
<ul>
<li>If the middle element is equal to the element that we are looking for, we return the index immediately because we found the element.</li>
</ul>
<pre><code class="lang-python"><span class="hljs-keyword">if</span> data[middle] == elem:
    <span class="hljs-keyword">return</span> middle
</code></pre>
<ul>
<li>If the middle element is greater than the element that we are looking for, we reassign the upper bound because we know that the target element is in the lower half of the list.</li>
</ul>
<pre><code class="lang-python"><span class="hljs-keyword">elif</span> data[middle] &gt; elem:
    high = middle - <span class="hljs-number">1</span>
</code></pre>
<ul>
<li>Else, the only option left is that the middle element is smaller than the element that we are looking for, so we reassign the lower bound because we know that the target element is in the upper half of the list.</li>
</ul>
<pre><code class="lang-python"><span class="hljs-keyword">else</span>:
    low = middle + <span class="hljs-number">1</span>
</code></pre>
<h3 id="heading-element-not-found">Element Not Found</h3>
<p>If the loop is completed without finding the element, the value -1 is returned.</p>
<pre><code class="lang-python"><span class="hljs-keyword">return</span> <span class="hljs-number">-1</span>
</code></pre>
<p>and we have the final implementation of the Binary Search algorithm:</p>
<pre><code>def binary_search(data, elem):

    low = <span class="hljs-number">0</span>
    high = len(data) - <span class="hljs-number">1</span>

    <span class="hljs-keyword">while</span> low &lt;= high:

        middle = (low + high)<span class="hljs-comment">//2</span>

        <span class="hljs-keyword">if</span> data[middle] == elem:
            <span class="hljs-keyword">return</span> middle
        elif data[middle] &gt; elem:
            high = middle - <span class="hljs-number">1</span>
        <span class="hljs-attr">else</span>:
            low = middle + <span class="hljs-number">1</span>

    <span class="hljs-keyword">return</span> <span class="hljs-number">-1</span>
</code></pre><h2 id="heading-special-cases">🔸 Special Cases</h2>
<p>These are some particular cases that you may find as you start working with this algorithm:</p>
<h3 id="heading-repeated-elements">Repeated Elements</h3>
<p>If the element that you are looking for is repeated in the sequence, the index returned will depend on the number of elements and on the sequence of operations that the algorithm performs on the sequence.</p>
<pre><code class="lang-python"><span class="hljs-meta">&gt;&gt;&gt; </span>&gt;&gt;&gt; b = [<span class="hljs-number">2</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">6</span>, <span class="hljs-number">7</span>, <span class="hljs-number">7</span>]
<span class="hljs-meta">&gt;&gt;&gt; </span>binary_search(b, <span class="hljs-number">7</span>)
<span class="hljs-number">4</span>
</code></pre>
<h3 id="heading-element-not-found-1">Element Not Found</h3>
<p>If the element is not found, -1 is returned.</p>
<pre><code class="lang-python"><span class="hljs-meta">&gt;&gt;&gt; </span>b = [<span class="hljs-number">2</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">6</span>, <span class="hljs-number">7</span>, <span class="hljs-number">7</span>]
<span class="hljs-meta">&gt;&gt;&gt; </span>binary_search(b, <span class="hljs-number">8</span>)
<span class="hljs-number">-1</span>
</code></pre>
<h3 id="heading-empty-sequence">Empty Sequence</h3>
<p>If the sequence is empty, -1 will be returned.</p>
<pre><code class="lang-python"><span class="hljs-meta">&gt;&gt;&gt; </span>b = []
<span class="hljs-meta">&gt;&gt;&gt; </span>binary_search(b, <span class="hljs-number">8</span>)
<span class="hljs-number">-1</span>
</code></pre>
<h3 id="heading-unsorted-sequence">Unsorted Sequence</h3>
<p>If the sequence is unsorted, the answer will not be correct. Getting the correct index is pure coincidence and it could be due to the order of the elements in the sequence and the sequence of operations performed by the algorithm.</p>
<p>This example returns the correct result:</p>
<pre><code class="lang-python"><span class="hljs-meta">&gt;&gt;&gt; </span>b = [<span class="hljs-number">5</span>, <span class="hljs-number">7</span>, <span class="hljs-number">3</span>, <span class="hljs-number">0</span>, <span class="hljs-number">-9</span>, <span class="hljs-number">2</span>, <span class="hljs-number">6</span>]
<span class="hljs-meta">&gt;&gt;&gt; </span>binary_search(b, <span class="hljs-number">6</span>)
<span class="hljs-number">6</span>
</code></pre>
<p>But this one doesn't:</p>
<pre><code class="lang-python"><span class="hljs-meta">&gt;&gt;&gt; </span>b = [<span class="hljs-number">5</span>, <span class="hljs-number">7</span>, <span class="hljs-number">3</span>, <span class="hljs-number">0</span>, <span class="hljs-number">-9</span>, <span class="hljs-number">2</span>, <span class="hljs-number">10</span>, <span class="hljs-number">6</span>]
<span class="hljs-meta">&gt;&gt;&gt; </span>binary_search(b, <span class="hljs-number">6</span>)
<span class="hljs-number">-1</span>
</code></pre>
<p>💡 <strong>Tip:</strong> Think about why the first example returns the correct result. Hint: It's pure coincidence that the order of the elements happens to make the algorithm reach the correct index, but the step-by-step process evaluates <code>0</code>, then <code>2</code>, and finally <code>6</code>. In this particular case, for this particular element, the correct index is found even if the sequence is not sorted.</p>
<h2 id="heading-a-more-complex-example">🔹 A More Complex Example</h2>
<p>Now that you're more familiar with the algorithm and its Python implementation, here we have a more complex example:</p>
<p>We want to find the index of the element <strong>45</strong> in this list using Binary Search:</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/01/image-12.png" alt="Image" width="600" height="400" loading="lazy"></p>
<h3 id="heading-first-iteration">First Iteration</h3>
<p>The lower and upper bounds are selected:</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/01/image-13.png" alt="Image" width="600" height="400" loading="lazy"></p>
<p>The middle element (<strong>26</strong>) is selected:</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/01/image-14.png" alt="Image" width="600" height="400" loading="lazy"></p>
<p>But the middle element (<strong>26</strong>) is not the element that we are looking for, it is smaller than <strong>45</strong>:</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/01/image-15.png" alt="Image" width="600" height="400" loading="lazy"></p>
<h3 id="heading-second-iteration">Second Iteration</h3>
<p>So we can discard all the elements that are smaller than the middle element and select new bounds. The new lower bound (<strong>27</strong>) is the element located immediately to the right of the previous middle element:</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/01/image-16.png" alt="Image" width="600" height="400" loading="lazy"></p>
<p>💡 <strong>Tip:</strong> Remember that the list is already sorted.</p>
<p>The new middle element (<strong>30</strong>) is selected:</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/01/image-17.png" alt="Image" width="600" height="400" loading="lazy"></p>
<p>The middle element (<strong>30</strong>) is not the element that we are looking for, it is smaller than <strong>45</strong>:</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/01/image-18.png" alt="Image" width="600" height="400" loading="lazy"></p>
<h3 id="heading-third-iteration">Third Iteration</h3>
<p>We can discard the elements that are smaller than or equal to <strong>30</strong> that have not been discarded already. The lower bound is updated to <strong>32</strong>:</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/01/image-19.png" alt="Image" width="600" height="400" loading="lazy"></p>
<p>Here we have an interesting case: the middle element is one of the bounds of the current interval because <code>(7+8)//2</code> is <code>7</code>. </p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/01/image-20.png" alt="Image" width="600" height="400" loading="lazy"></p>
<p>The middle element (<strong>32</strong>) is not the element that we are looking for (<strong>45</strong>), it is smaller. </p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/01/image-21.png" alt="Image" width="600" height="400" loading="lazy"></p>
<h3 id="heading-fourth-iteration">Fourth Iteration</h3>
<p>We can discard the elements that are smaller than or equal to <strong>32</strong> that have not been discarded already. </p>
<p>Here we have another very interesting case: the interval only has one element. </p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/01/image-22.png" alt="Image" width="600" height="400" loading="lazy"></p>
<p>💡 <strong>Tip:</strong> This interval is valid because we wrote this condition <code>while high &lt;= low:</code> , which includes intervals where the index of the lower bound is equal to the index of the upper bound.</p>
<p>The middle element is the only element in the interval because <code>(8+8)//2</code> is <code>8</code>, so the index of the middle element is <strong>8</strong> and the middle element is <strong>45</strong>. </p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/01/image-23.png" alt="Image" width="600" height="400" loading="lazy"></p>
<p>Now the middle element is the element that we are looking for, <strong>45</strong>:</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/01/image-24.png" alt="Image" width="600" height="400" loading="lazy"></p>
<p>So the value <strong>8</strong> (the index) is returned:</p>
<pre><code>&gt;&gt;&gt; binary_search([<span class="hljs-number">1</span>, <span class="hljs-number">3</span>, <span class="hljs-number">7</span>, <span class="hljs-number">15</span>, <span class="hljs-number">26</span>, <span class="hljs-number">27</span>, <span class="hljs-number">30</span>, <span class="hljs-number">32</span>, <span class="hljs-number">45</span>], <span class="hljs-number">45</span>)
<span class="hljs-number">8</span>
</code></pre><h2 id="heading-extra-practice">🔸 Extra Practice</h2>
<p>If you would like to have some extra practice with this algorithm, try to explain how the algorithm works behind the scenes when it's applied to this list to find the integer <strong>90</strong>:</p>
<pre><code>[<span class="hljs-number">5</span>, <span class="hljs-number">8</span>, <span class="hljs-number">15</span>, <span class="hljs-number">26</span>, <span class="hljs-number">38</span>, <span class="hljs-number">56</span>]
</code></pre><ul>
<li>What happens step by step?</li>
<li>What value is returned?</li>
<li>Is the element found?</li>
</ul>
<p><strong>I really hope you liked my article and found it helpful.</strong> Now you can implement the Binary Search algorithm in Python. Check out my online course "<a target="_blank" href="https://www.udemy.com/course/python-searching-sorting-algorithms/?couponCode=FREECODECAMP-ALG">Python Searching &amp; Sorting Algorithms: A Practical Approach</a>". Follow me on <a target="_blank" href="https://twitter.com/EstefaniaCassN">Twitter</a>. ⭐️</p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ Python Sets: A Detailed Visual Introduction ]]>
                </title>
                <description>
                    <![CDATA[ Welcome In this article, you will learn the fundamentals of Sets in Python. This is a very powerful built-in data type that you can use in your Python projects.  We will explore: What sets are and why they are relevant for your projects. How to crea... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/python-sets-detailed-visual-introduction/</link>
                <guid isPermaLink="false">66b1f87abafebbb4a1f9f6d2</guid>
                
                    <category>
                        <![CDATA[ Computer Science ]]>
                    </category>
                
                    <category>
                        <![CDATA[ learning to code ]]>
                    </category>
                
                    <category>
                        <![CDATA[ programing ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Python ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Sets ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Estefania Cassingena Navone ]]>
                </dc:creator>
                <pubDate>Mon, 06 Jan 2020 13:19:00 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/news/content/images/2019/12/Sets-3.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <h2 id="heading-welcome">Welcome</h2>
<p>In this article, you will learn the fundamentals of Sets in Python. This is a very powerful built-in data type that you can use in your Python projects. </p>
<p><strong>We will explore:</strong></p>
<ul>
<li>What sets are and why they are relevant for your projects.</li>
<li>How to create a set.</li>
<li>How to check if an element is in a set.</li>
<li>The difference between sets and frozensets.</li>
<li>How to operate with sets (in this part we will dive into the basics of set theory).</li>
<li>How to add and remove elements from sets and how to clear them.</li>
</ul>
<p><strong>Let's begin! ⭐️</strong></p>
<h2 id="heading-sets-in-context">🔹 Sets in Context</h2>
<p>Let me start by telling you why would you want to use sets in your projects. In mathematics, a set is a collection of distinct objects. In Python, what makes them so special is the fact that <strong>they have no duplicate elements</strong>, so they can be used to remove duplicate elements from lists and tuples efficiently. </p>
<p>According to the <a target="_blank" href="https://docs.python.org/3/tutorial/datastructures.html#sets">Python Documentation</a>:</p>
<blockquote>
<p>Python also includes a data type for <em>sets</em>. A set is an unordered collection with no duplicate elements. Basic uses include membership testing and eliminating duplicate entries.</p>
</blockquote>
<p><strong>❗️Important:</strong> The elements of a set must be immutable (they cannot be changed). Immutable data types include strings, tuples, and numbers such as integers and floats.</p>
<h2 id="heading-syntax">🔸 Syntax</h2>
<p>To create a set, we start by writing a pair of curly brackets <code>{}</code> and within those curly brackets, we include the elements of the set separated by a comma and a space.  </p>
<p><img src="https://www.freecodecamp.org/news/content/images/2019/12/image-66.png" alt="Image" width="600" height="400" loading="lazy"></p>
<p><strong>💡 Tip:</strong> Notice that this syntax is different from Python dictionaries because we are not creating key-value pairs, we are simply including individual elements within curly brackets <code>{}</code>.</p>
<h3 id="heading-set">Set()</h3>
<p>Alternatively, we can use the <a target="_blank" href="https://docs.python.org/3/library/stdtypes.html#set">set()</a> function to create a set (see below). </p>
<p>To do this, we would pass an iterable (for example, a list, string, or tuple) and this iterable would be converted to a set, removing any duplicate elements. </p>
<p><img src="https://www.freecodecamp.org/news/content/images/2019/12/image-64.png" alt="Image" width="600" height="400" loading="lazy"></p>
<p>This is an example in IDLE:</p>
<pre><code class="lang-python"><span class="hljs-comment"># Set</span>
<span class="hljs-meta">&gt;&gt;&gt; </span>{<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>}
{<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>}

<span class="hljs-comment"># From a list</span>
<span class="hljs-meta">&gt;&gt;&gt; </span>set([<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>])
{<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>}

<span class="hljs-comment"># From a tuple</span>
<span class="hljs-meta">&gt;&gt;&gt; </span>set((<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>))
{<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>}
</code></pre>
<p><strong>💡 Tip:</strong> To create an empty set, you must use the <a target="_blank" href="https://docs.python.org/3/library/stdtypes.html#set">set()</a> function because using an empty set of curly brackets, like this <code>{}</code>, will automatically create an empty <strong>dictionary</strong>, not an empty set.</p>
<pre><code class="lang-python"><span class="hljs-comment"># Creates a dictionary, not a set.</span>
<span class="hljs-meta">&gt;&gt;&gt; </span>type({})
&lt;<span class="hljs-class"><span class="hljs-keyword">class</span> '<span class="hljs-title">dict</span>'&gt;

# <span class="hljs-title">This</span> <span class="hljs-title">is</span> <span class="hljs-title">a</span> <span class="hljs-title">set</span>
&gt;&gt;&gt; <span class="hljs-title">type</span>(<span class="hljs-params">set(<span class="hljs-params"></span>)</span>)
&lt;<span class="hljs-title">class</span> '<span class="hljs-title">set</span>'&gt;</span>
</code></pre>
<h2 id="heading-duplicate-elements-are-removed">🔹 Duplicate Elements are Removed</h2>
<p>If the iterable that you pass as the argument to <code>set()</code> has duplicate elements, they are removed to create the set.</p>
<p>For example, notice how duplicate elements are removed when we pass this list:</p>
<pre><code class="lang-python"><span class="hljs-meta">&gt;&gt;&gt; </span>a = [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">2</span>, <span class="hljs-number">2</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>, <span class="hljs-number">1</span>, <span class="hljs-number">4</span>]
<span class="hljs-meta">&gt;&gt;&gt; </span>set(a)
{<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>}
</code></pre>
<p>and notice how duplicate characters are removed when we pass this string:</p>
<pre><code class="lang-python"><span class="hljs-meta">&gt;&gt;&gt; </span>a = <span class="hljs-string">"hhheeelllooo"</span>
<span class="hljs-meta">&gt;&gt;&gt; </span>set(a)
{<span class="hljs-string">'e'</span>, <span class="hljs-string">'l'</span>, <span class="hljs-string">'o'</span>, <span class="hljs-string">'h'</span>}
</code></pre>
<h2 id="heading-length">🔸 Length</h2>
<p>To find the length of a set, you can use the built-in function <a target="_blank" href="https://docs.python.org/3/library/stdtypes.html#set">len()</a>:</p>
<pre><code class="lang-python"><span class="hljs-meta">&gt;&gt;&gt; </span>a = {<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>}
<span class="hljs-meta">&gt;&gt;&gt; </span>b = set(a)
<span class="hljs-meta">&gt;&gt;&gt; </span>len(b)
<span class="hljs-number">4</span>
</code></pre>
<p>In mathematics, the number of elements of a set is called the "<strong>cardinality</strong>" of the set.</p>
<h2 id="heading-membership-testing">🔹 Membership Testing</h2>
<p>You can test if an element is in a set with the <code>in</code> operator:</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2019/12/image-65.png" alt="Image" width="600" height="400" loading="lazy"></p>
<p>This in an example:</p>
<pre><code class="lang-python"><span class="hljs-meta">&gt;&gt;&gt; </span>a = <span class="hljs-string">"hhheeelllooo"</span>
<span class="hljs-meta">&gt;&gt;&gt; </span>b = set(a)
<span class="hljs-meta">&gt;&gt;&gt; </span>b
{<span class="hljs-string">'e'</span>, <span class="hljs-string">'l'</span>, <span class="hljs-string">'o'</span>, <span class="hljs-string">'h'</span>}

<span class="hljs-comment"># Test if the characters 'e' and 'a' are in set b</span>
<span class="hljs-meta">&gt;&gt;&gt; </span><span class="hljs-string">'e'</span> <span class="hljs-keyword">in</span> b
<span class="hljs-literal">True</span>
<span class="hljs-meta">&gt;&gt;&gt; </span><span class="hljs-string">'a'</span> <span class="hljs-keyword">in</span> b
<span class="hljs-literal">False</span>
</code></pre>
<h2 id="heading-sets-vs-frozensets">🔸 Sets vs. Frozensets</h2>
<p>Sets are mutable, which means that they can be modified after they have been defined. </p>
<p>According to the <a target="_blank" href="https://docs.python.org/3.8/library/stdtypes.html#set-types-set-frozenset">Python Documentation</a>:</p>
<blockquote>
<p>The <a target="_blank" href="https://docs.python.org/3.8/library/stdtypes.html#set"><code>set</code></a> type is <strong>mutable</strong> — the contents can be changed using methods like <code>add()</code> and <code>remove()</code>. Since it is mutable, it has no hash value and cannot be used as either a dictionary key or as an element of another set.</p>
</blockquote>
<p>Since they cannot contain values of mutable data types, if we try to create a set that contains sets as elements (nested sets), we will see this error:</p>
<pre><code class="lang-python">TypeError: unhashable type: <span class="hljs-string">'set'</span>
</code></pre>
<p>This is an example in IDLE. Notice how the elements that we are trying to include are sets:</p>
<pre><code class="lang-python"><span class="hljs-meta">&gt;&gt;&gt; </span>a = {{<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>}, {<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">4</span>}}
Traceback (most recent call last):
  File <span class="hljs-string">"&lt;pyshell#23&gt;"</span>, line <span class="hljs-number">1</span>, <span class="hljs-keyword">in</span> &lt;module&gt;
    a = {{<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>}, {<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">4</span>}}
TypeError: unhashable type: <span class="hljs-string">'set'</span>
</code></pre>
<h3 id="heading-frozensets">Frozensets</h3>
<p>To solve this problem, we have another type of set called frozensets. </p>
<p>They are <strong>immutable</strong>, so they cannot be changed and we can use them to create nested sets.</p>
<p>According to the <a target="_blank" href="https://docs.python.org/3.8/library/stdtypes.html#set-types-set-frozenset">Python Documentation</a>:</p>
<blockquote>
<p>The <a target="_blank" href="https://docs.python.org/3.8/library/stdtypes.html#frozenset"><code>frozenset</code></a> type is immutable and <a target="_blank" href="https://docs.python.org/3.8/glossary.html#term-hashable">hashable</a> — its contents cannot be altered after it is created; it can therefore be used as a dictionary key or as an element of another set.</p>
</blockquote>
<p>To create a frozenset, we use:</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2019/12/image-67.png" alt="Image" width="600" height="400" loading="lazy"></p>
<p>💡 <strong>Tip:</strong> You can create an empty frozenset with <code>frozenset()</code>.</p>
<p>This is an example of a set that contains two frozensets:</p>
<pre><code>&gt;&gt;&gt; a = {frozenset([<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>]), frozenset([<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">4</span>])}
&gt;&gt;&gt; a
{frozenset({<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>}), frozenset({<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">4</span>})}
</code></pre><p>Notice that we don't get any errors and the set is created successfully. </p>
<h2 id="heading-introduction-to-set-theory">🔹 Introduction to Set Theory</h2>
<p>Before diving into set operations, we need to explore a little bit of set theory and Venn diagrams. We will dive into each set operation with its corresponding equivalent in Python code. Let's begin. </p>
<h3 id="heading-subsets-and-supersets">Subsets and Supersets</h3>
<p>You can think of a subset as a "smaller portion" of a set. That is how I like to think about it. If you take some of the elements of a set and make a new set with those elements, the new set is a subset of the original set. </p>
<p>It's as if you had a bag full of rubber balls of different colors. If you make a set with all the rubber balls in the bag, and then take some of those rubber balls and make a new set with them, the new set is a subset of the original set. </p>
<p>Let me illustrate this graphically. If we have a set A with the elements 1, 2, 3, 4:</p>
<pre><code>&gt;&gt;&gt; a = {<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>}
</code></pre><p>We can "take" or "select" some elements of a and make a new set called B. Let's say that we chose to include the elements 1 and 2 in set B:</p>
<pre><code class="lang-python"><span class="hljs-meta">&gt;&gt;&gt; </span>a = {<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>}
<span class="hljs-meta">&gt;&gt;&gt; </span>b = {<span class="hljs-number">1</span>, <span class="hljs-number">2</span>}
</code></pre>
<p>Every element of B is in A. Therefore, B is a subset of A. </p>
<p>This can be represented graphically like this, where the new set B is illustrated in yellow:</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2019/12/image-69.png" alt="Image" width="600" height="400" loading="lazy"></p>
<p><strong>💡 Note:</strong> In set theory, it is a convention to use uppercase letters to denote sets. This is why I will use them to refer to the sets (A and B), but I will use lowercase letter in Python (a and b).</p>
<h3 id="heading-issubset">.issubset()</h3>
<p>We can check if B is a subset of A with the method <a target="_blank" href="https://docs.python.org/3/library/stdtypes.html#frozenset.issubset">.issubset()</a>:</p>
<pre><code class="lang-python"><span class="hljs-meta">&gt;&gt;&gt; </span>a = {<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>}
<span class="hljs-meta">&gt;&gt;&gt; </span>b = {<span class="hljs-number">1</span>, <span class="hljs-number">2</span>}
<span class="hljs-meta">&gt;&gt;&gt; </span>b.issubset(a)
<span class="hljs-literal">True</span>
</code></pre>
<p>As you can see, B is a subset of A because the value returned is <code>True</code>.</p>
<p>But the opposite is not true since not all the element of A are in B:</p>
<pre><code class="lang-python"><span class="hljs-meta">&gt;&gt;&gt; </span>a.issubset(b)
<span class="hljs-literal">False</span>
</code></pre>
<p>Let's see something very interesting:</p>
<pre><code class="lang-python"><span class="hljs-meta">&gt;&gt;&gt; </span>a = {<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>}
<span class="hljs-meta">&gt;&gt;&gt; </span>b = {<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>}
<span class="hljs-meta">&gt;&gt;&gt; </span>a.issubset(b)
<span class="hljs-literal">True</span>
<span class="hljs-meta">&gt;&gt;&gt; </span>b.issubset(a)
<span class="hljs-literal">True</span>
</code></pre>
<p>If two sets are equal, one is a subset of the other and vice versa because all the elements of A are in B and all elements of B are in A. This can be illustrated like this:</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2019/12/image-70.png" alt="Image" width="600" height="400" loading="lazy"></p>
<h3 id="heading-using-lt">Using &lt;=</h3>
<p>We can achieve the same functionality of the <code>.issubset()</code> method with the <code>&lt;=</code> comparison operator:</p>
<pre><code class="lang-python"><span class="hljs-meta">&gt;&gt;&gt; </span>a = {<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>}
<span class="hljs-meta">&gt;&gt;&gt; </span>b = {<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>}
<span class="hljs-meta">&gt;&gt;&gt; </span>a &lt;= b
<span class="hljs-literal">True</span>
</code></pre>
<p>This operator returns <code>True</code> if the left operand is a subset of the right operand, even when the two sets are equal (when they have the same elements).</p>
<h3 id="heading-proper-subset">Proper Subset</h3>
<p>But what happens if we want to check if a set is a <strong>proper subset</strong> of another? A proper subset is a subset that is not equal to the set (does not have all the same elements). </p>
<p>This would be a graphical example of a proper subset. B does not have all the elements of A:</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2019/12/image-69.png" alt="Image" width="600" height="400" loading="lazy"></p>
<p>To check this, we can use the <code>&lt;</code> comparison operator:</p>
<pre><code class="lang-python"><span class="hljs-comment"># B is not a proper subset of A because B is equal to A</span>
<span class="hljs-meta">&gt;&gt;&gt; </span>a = {<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>}
<span class="hljs-meta">&gt;&gt;&gt; </span>b = {<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>}
<span class="hljs-meta">&gt;&gt;&gt; </span>b &lt; a
<span class="hljs-literal">False</span>

<span class="hljs-comment"># B is a proper subset of A because B is not equal to A</span>
<span class="hljs-meta">&gt;&gt;&gt; </span>a = {<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>}
<span class="hljs-meta">&gt;&gt;&gt; </span>b = {<span class="hljs-number">1</span>, <span class="hljs-number">2</span>}
<span class="hljs-meta">&gt;&gt;&gt; </span>b &lt; a
<span class="hljs-literal">True</span>
</code></pre>
<h3 id="heading-superset">Superset</h3>
<p><strong>If B is a subset of A, then A is a superset of B</strong>. A superset is the set that contains all the elements of the subset.  </p>
<p>This can be illustrated like this (see below), where A is a superset of B:</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2019/12/image-97.png" alt="Image" width="600" height="400" loading="lazy"></p>
<h3 id="heading-issuperset">.issuperset()</h3>
<p>We can test if a set is a superset of another with the <a target="_blank" href="https://docs.python.org/3/library/stdtypes.html#frozenset.issuperset">.issuperset()</a> method:</p>
<pre><code class="lang-python"><span class="hljs-meta">&gt;&gt;&gt; </span>a = {<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>}
<span class="hljs-meta">&gt;&gt;&gt; </span>b = {<span class="hljs-number">1</span>, <span class="hljs-number">2</span>}
<span class="hljs-meta">&gt;&gt;&gt; </span>a.issuperset(b)
<span class="hljs-literal">True</span>
</code></pre>
<p>We can also use the operators <code>&gt;</code> and <code>&gt;=</code>. They work exactly like <code>&lt;</code> and <code>&lt;=</code>, but now they determine if the left operand is a <strong>superset</strong> of the right operand:</p>
<pre><code class="lang-python"><span class="hljs-meta">&gt;&gt;&gt; </span>a = {<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>}
<span class="hljs-meta">&gt;&gt;&gt; </span>b = {<span class="hljs-number">1</span>, <span class="hljs-number">2</span>}
<span class="hljs-meta">&gt;&gt;&gt; </span>a &gt; b
<span class="hljs-literal">True</span>
<span class="hljs-meta">&gt;&gt;&gt; </span>a &gt;= b
<span class="hljs-literal">True</span>
</code></pre>
<h3 id="heading-disjoint-sets">Disjoint Sets</h3>
<p>Two sets are disjoint if they have no elements in common. For example, here we have two disjoint sets:</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2019/12/image-83.png" alt="Image" width="600" height="400" loading="lazy"></p>
<h3 id="heading-isdisjoint">.isdisjoint()</h3>
<p>We can check if two sets are disjoint with the <a target="_blank" href="https://docs.python.org/3/library/stdtypes.html#frozenset.isdisjoint">.isdisjoint()</a> method:</p>
<pre><code class="lang-python"><span class="hljs-comment"># Elements in common: 3, 1</span>
<span class="hljs-meta">&gt;&gt;&gt; </span>a = {<span class="hljs-number">3</span>, <span class="hljs-number">6</span>, <span class="hljs-number">1</span>}
<span class="hljs-meta">&gt;&gt;&gt; </span>b = {<span class="hljs-number">2</span>, <span class="hljs-number">8</span>, <span class="hljs-number">3</span>, <span class="hljs-number">1</span>}
<span class="hljs-meta">&gt;&gt;&gt; </span>a.isdisjoint(b)
<span class="hljs-literal">False</span>

<span class="hljs-comment"># Elements in common: None</span>
<span class="hljs-meta">&gt;&gt;&gt; </span>a = {<span class="hljs-number">3</span>, <span class="hljs-number">1</span>, <span class="hljs-number">4</span>}
<span class="hljs-meta">&gt;&gt;&gt; </span>b = {<span class="hljs-number">8</span>, <span class="hljs-number">9</span>, <span class="hljs-number">0</span>}
<span class="hljs-meta">&gt;&gt;&gt; </span>a.isdisjoint(b)
<span class="hljs-literal">True</span>
</code></pre>
<h2 id="heading-set-operations">🔸 Set Operations</h2>
<p>We can operate on sets to create new sets, following the rules of set theory. Let's explore these operations.</p>
<h3 id="heading-union">Union</h3>
<p>This is the first operation that we will analyze. It creates a new set that contains all the elements of the two sets (without repetition).</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2019/12/image-72.png" alt="Image" width="600" height="400" loading="lazy"></p>
<p>This is an example:</p>
<pre><code class="lang-python"><span class="hljs-meta">&gt;&gt;&gt; </span>a = {<span class="hljs-number">3</span>, <span class="hljs-number">1</span>, <span class="hljs-number">7</span>, <span class="hljs-number">4</span>}
<span class="hljs-meta">&gt;&gt;&gt; </span>b = {<span class="hljs-number">2</span>, <span class="hljs-number">8</span>, <span class="hljs-number">3</span>, <span class="hljs-number">1</span>}
<span class="hljs-meta">&gt;&gt;&gt; </span>a | b
{<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>, <span class="hljs-number">7</span>, <span class="hljs-number">8</span>}
</code></pre>
<p>💡 <strong>Tip:</strong> We can assign this new set to a variable, like this:</p>
<pre><code class="lang-python"><span class="hljs-meta">&gt;&gt;&gt; </span>a = {<span class="hljs-number">3</span>, <span class="hljs-number">1</span>, <span class="hljs-number">7</span>, <span class="hljs-number">4</span>}
<span class="hljs-meta">&gt;&gt;&gt; </span>b = {<span class="hljs-number">2</span>, <span class="hljs-number">8</span>, <span class="hljs-number">3</span>, <span class="hljs-number">1</span>}
<span class="hljs-meta">&gt;&gt;&gt; </span>c = a | b
<span class="hljs-meta">&gt;&gt;&gt; </span>c
{<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>, <span class="hljs-number">7</span>, <span class="hljs-number">8</span>}
</code></pre>
<p>In a diagram, these sets could be represented like this (see below). This is called a Venn diagram, and it is used to illustrate the relationships between sets and the result of set operations.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2019/12/image-74.png" alt="Image" width="600" height="400" loading="lazy">
<em>Venn Diagram. Union.</em></p>
<p>We can easily extend this operation to work with more than two sets:</p>
<pre><code class="lang-python"><span class="hljs-meta">&gt;&gt;&gt; </span>a = {<span class="hljs-number">3</span>, <span class="hljs-number">1</span>, <span class="hljs-number">7</span>, <span class="hljs-number">4</span>}
<span class="hljs-meta">&gt;&gt;&gt; </span>b = {<span class="hljs-number">2</span>, <span class="hljs-number">8</span>, <span class="hljs-number">3</span>, <span class="hljs-number">1</span>}
<span class="hljs-meta">&gt;&gt;&gt; </span>c = {<span class="hljs-number">1</span>, <span class="hljs-number">0</span>, <span class="hljs-number">4</span>, <span class="hljs-number">6</span>}
<span class="hljs-meta">&gt;&gt;&gt; </span>d = {<span class="hljs-number">8</span>, <span class="hljs-number">2</span>, <span class="hljs-number">6</span>, <span class="hljs-number">3</span>}

<span class="hljs-comment"># Union of these four sets</span>
<span class="hljs-meta">&gt;&gt;&gt; </span>a | b | c | d
{<span class="hljs-number">0</span>, <span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>, <span class="hljs-number">6</span>, <span class="hljs-number">7</span>, <span class="hljs-number">8</span>}
</code></pre>
<p>💡 <strong>Tip:</strong> If the union contains repeated elements, only one is included in the final set to eliminate repetition.</p>
<h3 id="heading-intersection">Intersection</h3>
<p>The intersection between two sets creates another set that contains all the elements that are <strong>in</strong> <strong>both A and B</strong>.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2019/12/image-77.png" alt="Image" width="600" height="400" loading="lazy"></p>
<p>This is an example:</p>
<pre><code class="lang-python"><span class="hljs-meta">&gt;&gt;&gt; </span>a = {<span class="hljs-number">3</span>, <span class="hljs-number">6</span>, <span class="hljs-number">1</span>}
<span class="hljs-meta">&gt;&gt;&gt; </span>b = {<span class="hljs-number">2</span>, <span class="hljs-number">8</span>, <span class="hljs-number">3</span>, <span class="hljs-number">1</span>}
<span class="hljs-meta">&gt;&gt;&gt; </span>a &amp; b
{<span class="hljs-number">1</span>, <span class="hljs-number">3</span>}
</code></pre>
<p>The Venn diagram for the intersection operation would be like this (see below), because only the elements that are <strong>in both A and B</strong> are included in the resulting set:</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2019/12/image-78.png" alt="Image" width="600" height="400" loading="lazy">
<em>Venn Diagram. Intersection.</em></p>
<p>We can easily extend this operation to work with more than two sets:</p>
<pre><code class="lang-python"><span class="hljs-meta">&gt;&gt;&gt; </span>a = {<span class="hljs-number">3</span>, <span class="hljs-number">1</span>, <span class="hljs-number">7</span>, <span class="hljs-number">4</span>, <span class="hljs-number">5</span>}
<span class="hljs-meta">&gt;&gt;&gt; </span>b = {<span class="hljs-number">2</span>, <span class="hljs-number">8</span>, <span class="hljs-number">3</span>, <span class="hljs-number">1</span>, <span class="hljs-number">5</span>}
<span class="hljs-meta">&gt;&gt;&gt; </span>c = {<span class="hljs-number">1</span>, <span class="hljs-number">0</span>, <span class="hljs-number">4</span>, <span class="hljs-number">6</span>, <span class="hljs-number">5</span>}
<span class="hljs-meta">&gt;&gt;&gt; </span>d = {<span class="hljs-number">8</span>, <span class="hljs-number">2</span>, <span class="hljs-number">6</span>, <span class="hljs-number">3</span>, <span class="hljs-number">5</span>}

<span class="hljs-comment"># Only 5 is in a, b, c, and d.</span>
<span class="hljs-meta">&gt;&gt;&gt; </span>a &amp; b &amp; c &amp; d
{<span class="hljs-number">5</span>}
</code></pre>
<h3 id="heading-difference">Difference</h3>
<p>The difference between set A and set B is another set that contains all the <strong>elements of set A that are not in set B</strong>.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2019/12/image-79.png" alt="Image" width="600" height="400" loading="lazy"></p>
<p>This is an example:</p>
<pre><code class="lang-python"><span class="hljs-meta">&gt;&gt;&gt; </span>a = {<span class="hljs-number">3</span>, <span class="hljs-number">6</span>, <span class="hljs-number">1</span>}
<span class="hljs-meta">&gt;&gt;&gt; </span>b = {<span class="hljs-number">2</span>, <span class="hljs-number">8</span>, <span class="hljs-number">3</span>, <span class="hljs-number">1</span>}
<span class="hljs-meta">&gt;&gt;&gt; </span>a - b
{<span class="hljs-number">6</span>}
</code></pre>
<p>The Venn diagram for this difference would be like this (see below), because only the elements of A that are not in B are included in the resulting set:</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2019/12/image-80.png" alt="Image" width="600" height="400" loading="lazy">
<em>Venn Diagram. Difference.</em></p>
<p>💡 <strong>Tip:</strong> Notice how we remove the elements of A that are also in B (in the intersection). </p>
<p>We can easily extend this to work with more than two sets:</p>
<pre><code class="lang-python"><span class="hljs-meta">&gt;&gt;&gt; </span>a = {<span class="hljs-number">3</span>, <span class="hljs-number">1</span>, <span class="hljs-number">7</span>, <span class="hljs-number">4</span>, <span class="hljs-number">5</span>}
<span class="hljs-meta">&gt;&gt;&gt; </span>b = {<span class="hljs-number">2</span>, <span class="hljs-number">8</span>, <span class="hljs-number">3</span>, <span class="hljs-number">1</span>, <span class="hljs-number">5</span>}
<span class="hljs-meta">&gt;&gt;&gt; </span>c = {<span class="hljs-number">1</span>, <span class="hljs-number">0</span>, <span class="hljs-number">4</span>, <span class="hljs-number">6</span>, <span class="hljs-number">5</span>}

<span class="hljs-comment"># Only 7 is in A but not in B and not in C</span>
<span class="hljs-meta">&gt;&gt;&gt; </span>a - b - c
{<span class="hljs-number">7</span>}
</code></pre>
<h3 id="heading-symmetric-difference">Symmetric Difference</h3>
<p>The symmetric difference between two sets A and B is another set that contains <strong>all the elements that are in either A or B, but not both</strong>. We basically remove the elements from the intersection.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2019/12/image-81.png" alt="Image" width="600" height="400" loading="lazy"></p>
<pre><code class="lang-python"><span class="hljs-meta">&gt;&gt;&gt; </span>a = {<span class="hljs-number">3</span>, <span class="hljs-number">6</span>, <span class="hljs-number">1</span>}
<span class="hljs-meta">&gt;&gt;&gt; </span>b = {<span class="hljs-number">2</span>, <span class="hljs-number">8</span>, <span class="hljs-number">3</span>, <span class="hljs-number">1</span>}
<span class="hljs-meta">&gt;&gt;&gt; </span>a ^ b
{<span class="hljs-number">2</span>, <span class="hljs-number">6</span>, <span class="hljs-number">8</span>}
</code></pre>
<p>The Venn diagram for the symmetric difference would be like this (see below), because only the elements that are in either A or B, but not both, are included in the resulting set:</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2019/12/image-82.png" alt="Image" width="600" height="400" loading="lazy">
<em>Venn Diagram. Symmetric Difference</em></p>
<p>We can easily extend this to work with more than two sets:</p>
<pre><code class="lang-python"><span class="hljs-meta">&gt;&gt;&gt; </span>a = {<span class="hljs-number">3</span>, <span class="hljs-number">1</span>, <span class="hljs-number">7</span>, <span class="hljs-number">4</span>, <span class="hljs-number">5</span>}
<span class="hljs-meta">&gt;&gt;&gt; </span>b = {<span class="hljs-number">2</span>, <span class="hljs-number">8</span>, <span class="hljs-number">3</span>, <span class="hljs-number">1</span>, <span class="hljs-number">5</span>}
<span class="hljs-meta">&gt;&gt;&gt; </span>c = {<span class="hljs-number">1</span>, <span class="hljs-number">0</span>, <span class="hljs-number">4</span>, <span class="hljs-number">6</span>, <span class="hljs-number">5</span>}
<span class="hljs-meta">&gt;&gt;&gt; </span>d = {<span class="hljs-number">8</span>, <span class="hljs-number">2</span>, <span class="hljs-number">6</span>, <span class="hljs-number">3</span>, <span class="hljs-number">5</span>}

<span class="hljs-meta">&gt;&gt;&gt; </span>a ^ b ^ c ^ d
{<span class="hljs-number">0</span>, <span class="hljs-number">1</span>, <span class="hljs-number">3</span>, <span class="hljs-number">7</span>}
</code></pre>
<h3 id="heading-update-sets-automatically">Update Sets Automatically</h3>
<p>If you want to update set A immediately after performing these operations, you can simply add an equal sign after the operator. For example:</p>
<pre><code class="lang-python"><span class="hljs-meta">&gt;&gt;&gt; </span>a = {<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>}
<span class="hljs-meta">&gt;&gt;&gt; </span>b = {<span class="hljs-number">1</span>, <span class="hljs-number">2</span>}

<span class="hljs-comment"># Notice the &amp;= </span>
<span class="hljs-meta">&gt;&gt;&gt; </span>a &amp;= b
<span class="hljs-meta">&gt;&gt;&gt; </span>a
{<span class="hljs-number">1</span>, <span class="hljs-number">2</span>}
</code></pre>
<p>We are assigning the set that results from <code>a &amp; b</code> to set <code>a</code> in just one line. You can do the same with the other operators: <code>^=</code> , <code>|=</code>, and <code>-=</code>. </p>
<p><strong>💡 Tip:</strong> This is very similar to the syntax that we use with variables (for example: <code>a += 5</code>) but now we are working with sets.</p>
<h2 id="heading-set-methods">🔹 Set Methods</h2>
<p>Sets include helpful built-in methods to help us perform common and essential functionality such as adding elements, deleting elements, and clearing the set.</p>
<h3 id="heading-add-elements">Add Elements</h3>
<p>To add elements to a set, we use the <a target="_blank" href="https://docs.python.org/3/library/stdtypes.html#frozenset.add">.add()</a> method, passing the element as the only argument.</p>
<pre><code>&gt;&gt;&gt; a = {<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>}
&gt;&gt;&gt; a.add(<span class="hljs-number">7</span>)
&gt;&gt;&gt; a
{<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>, <span class="hljs-number">7</span>}
</code></pre><h3 id="heading-delete-elements">Delete Elements</h3>
<p>There are three ways to delete an element from a set: <code>.remove(&lt;elem&gt;)</code> ,<code>.discard(&lt;elem&gt;)</code>, and <code>.pop()</code>. They have key differences that we will explore.</p>
<p>The first two methods (.remove() and .discard()) work exactly the same when the element is in the set. The new set is returned:</p>
<pre><code class="lang-python"><span class="hljs-meta">&gt;&gt;&gt; </span>a = {<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>}
<span class="hljs-meta">&gt;&gt;&gt; </span>a.remove(<span class="hljs-number">3</span>)
<span class="hljs-meta">&gt;&gt;&gt; </span>a
{<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">4</span>}

<span class="hljs-meta">&gt;&gt;&gt; </span>a = {<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>}
<span class="hljs-meta">&gt;&gt;&gt; </span>a.discard(<span class="hljs-number">3</span>)
<span class="hljs-meta">&gt;&gt;&gt; </span>a
{<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">4</span>}
</code></pre>
<p>The key difference between these two methods is that if we use the <a target="_blank" href="https://docs.python.org/3/library/stdtypes.html#frozenset.remove">.remove()</a> method, we run the risk of trying to remove an element that doesn't exist in the set and this will raise a <code>KeyError</code>:</p>
<pre><code class="lang-python"><span class="hljs-meta">&gt;&gt;&gt; </span>a = {<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>}
<span class="hljs-meta">&gt;&gt;&gt; </span>a.remove(<span class="hljs-number">5</span>)
Traceback (most recent call last):
  File <span class="hljs-string">"&lt;pyshell#102&gt;"</span>, line <span class="hljs-number">1</span>, <span class="hljs-keyword">in</span> &lt;module&gt;
    a.remove(<span class="hljs-number">5</span>)
KeyError: <span class="hljs-number">5</span>
</code></pre>
<p>We will never have that problem with <a target="_blank" href="https://docs.python.org/3/library/stdtypes.html#frozenset.discard">.discard()</a> since it doesn't raise an exception if the element is not found. This method will simply leave the set intact, as you can see in this example:</p>
<pre><code class="lang-python"><span class="hljs-meta">&gt;&gt;&gt; </span>a = {<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>}
<span class="hljs-meta">&gt;&gt;&gt; </span>a.discard(<span class="hljs-number">5</span>)
<span class="hljs-meta">&gt;&gt;&gt; </span>a
{<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>}
</code></pre>
<p>The third method (<a target="_blank" href="https://docs.python.org/3/library/stdtypes.html#frozenset.pop">.pop()</a>) will remove and return an arbitrary element from the set and it will raise a <code>KeyError</code> if the set is empty. </p>
<pre><code class="lang-python"><span class="hljs-meta">&gt;&gt;&gt; </span>a = {<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>}
<span class="hljs-meta">&gt;&gt;&gt; </span>a.pop()
<span class="hljs-number">1</span>
<span class="hljs-meta">&gt;&gt;&gt; </span>a.pop()
<span class="hljs-number">2</span>
<span class="hljs-meta">&gt;&gt;&gt; </span>a.pop()
<span class="hljs-number">3</span>
<span class="hljs-meta">&gt;&gt;&gt; </span>a
{<span class="hljs-number">4</span>}
<span class="hljs-meta">&gt;&gt;&gt; </span>a.pop()
<span class="hljs-number">4</span>
<span class="hljs-meta">&gt;&gt;&gt; </span>a
set()
<span class="hljs-meta">&gt;&gt;&gt; </span>a.pop()
Traceback (most recent call last):
  File <span class="hljs-string">"&lt;pyshell#119&gt;"</span>, line <span class="hljs-number">1</span>, <span class="hljs-keyword">in</span> &lt;module&gt;
    a.pop()
KeyError: <span class="hljs-string">'pop from an empty set'</span>
</code></pre>
<h3 id="heading-clear-the-set">Clear the Set</h3>
<p>You can use the <code>.clear()</code> method if you need to delete all the elements from a set. For example:</p>
<pre><code class="lang-python"><span class="hljs-meta">&gt;&gt;&gt; </span>a = {<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>}
<span class="hljs-meta">&gt;&gt;&gt; </span>a.clear()
<span class="hljs-meta">&gt;&gt;&gt; </span>a
set()
<span class="hljs-meta">&gt;&gt;&gt; </span>len(a)
<span class="hljs-number">0</span>
</code></pre>
<h2 id="heading-in-summary">🔸 In Summary</h2>
<ul>
<li>Sets are unordered built-in data types that don't have any repeated elements, so they allow us to eliminate repeated elements from lists and tuples.</li>
<li>They are mutable and they can only contain immutable elements.</li>
<li>We can check if a set is a subset or superset of another set.</li>
<li>Frozenset is an immutable type of set that allows us to create nested sets.</li>
<li>We can operate on sets with: union (<code>|</code>), intersection (<code>&amp;</code>), difference (<code>-</code>), and symmetric difference (<code>^</code>).</li>
<li>We can add elements to a set, delete them, and clear the set completely using built-in methods.</li>
</ul>
<p><strong>I really hope you liked my article and found it helpful.</strong> Now you can work with sets in your Python projects. <a target="_blank" href="https://www.udemy.com/user/estefania-cn/">Check out my online courses</a>. Follow me on <a target="_blank" href="https://twitter.com/EstefaniaCassN">Twitter</a>. ⭐️</p>
 ]]>
                </content:encoded>
            </item>
        
    </channel>
</rss>
