Rivalry2

Programming fundamentals
2026-02-21 02:50 Diff
https://hexlet.io/courses/intro_to_programming/lessons/language/theory_unit
Video script

We have called this system of pushing buttons a 'language'. The lever seems to be a separate thing, it's like a "RUN" command. We put in the code with the buttons, and then RUN the code with the lever.
You know how linguists discuss grammar, structure of words and stuff like that? They don't really care about novels or songs or stories, they are very much interested in the language used in those novels, songs and stories. They care about the code. Most people are the other way around: we care about the story, about the meaning. Not only in books and movies, but in everyday life: when I'm telling my girlfriend to buy me another sketchbook because I'm doing awkward drawings for teaching, I care about the result, the goal, not about the grammar and the history of the word "sketch".
We can think of language having two... things to think about or two aspects: grammar and meaning. Programming languages are similar to this, but since programming languages are way simpler than human languages, there isn't much grammar, there is mostly syntax — word order and spelling. And for the meaning, computer scientists use a fancy word "semantics".
Let's compare Tota's magic box language with some modern programming language.
This box has very hard syntax, it's difficult to operate with X's and O's. On the other hand, this modern code looks... well, like English! This syntax is much easier to grasp, we can at least guess what each word means.
The set of rules that describe how symbols and words can be used is the syntax.
You will see that some programming languages have similar syntax, and some have exotic, unusual syntax.
The semantics or the meaning is harder to see because it's not explicit. What is the meaning of this code? It's fire flash, as we know. What's the meaning of this code? Maybe, you guessed it: it prints a phrase backwards. The meaning, the end result of running the code is the semantics.
Generally, with modern programming languages, this relationship between code and its meaning can be used to judge the code. If you look at the code and quickly get an idea of what it means, then this code is good. If you look at the code and say "what the hell is this?!", then it's probably not too good. This brings us to an important point: code is for people. Computers don't really care if code is easy to read or hard: for them all code is equally easy to understand.
You might say, well, I want to write apps and websites, so I care about the meaning — semantics, just like a writer cares about the story and not about the linguistics that much. So, why bother with syntax really? Well, programming language is the tool you use to tell your story, be it an app, a website or a robot. And the better you know your tool, the less you think about it, and more you can do. Just like a writer must be able to express ideas, with correct words and syntax for people to understand.
Luckily, programming languages have very simple syntax compared to human languages. So, don't worry, even though we must learn syntax, it's going to be pretty easy.
Well... is programming easy then? If computers are stupid and only do what we tell them to do, and programming language syntax is easy, then this whole thing must be pretty easy, right?
Well... no. Programming is not too easy, honestly. I mean, yeah, writing a high school essay is easy compared to writing "War and Peace". And writing a PhD thesis on quantum tunnelling is on a different level completely. So, we should not generalize, really. All of those activities are writing, but comparing them and making arguments about "writing" in general is pretty useless. Programming can be easy or very hard — depends on who is doing what.
You will quickly realize that syntax is easy to learn, but it doesn't really help you alone. It is necessary but not sufficient.
During the following lessons we will focus on the semantics, the meaning, and will explore some fascinating ideas that made it possible to create computers, internet, robots and mobile phones. We will learn syntax as we go.
One last thing we have to touch before we dive in is, well, what language to choose? There are so many, and this might seem like a critical moment. It is critical, but not because "WE MUST MAKE THE PERFECT DECISION WHICH WILL AFFECT THE REST OF OUR LIVES", but because we must understand that choosing a programming language is like choosing a writing device, not like choosing a human language.
You can write a story with pen and paper, using a typewriter, a computer or a whiteboard. Yes, each writing device comes with different capabilities and limitations. And if you are trying to become a writer, it doesn't relly matter if you learn to write on paper or on a typewriter. So, we want to learn programming, not just a programming language.
We have to choose a language that is good enough, simple enough, popular enough and powerful enough. As you grow professionally, you WILL switch languages, will use multiple languages and technologies at the same time, and it won't be a big deal, just like switching from a typewriter to Microsoft Word is not a big deal.
We are choosing JavaScript as our first programming language and as the tool to learn programming. JavaScript programs are running pretty much all the time on your computer, because most of the websites, including the one you're watching this video on, use JavaScript. It's extremely popular, and it's gettig more and more popular every year.
So, yeah... Let's go ahead and start programming!
Synopsis

Two aspects of languages

Programming language has two aspects:
- syntax (coding rules of writing, spelling, word order)
- semantics (idea, meaning)
Some programming languages have similar syntax
Some programming languages have exotic, unusual syntax
Semantics is hard to see, it's not explicit
Syntax and semantics

In modern languages good code means easily-understood semantics
If it's hard to understand what code does, than code is not too good
Syntax is easy to understand
Syntax is necessary to know but not sufficient
Choosing a language

It is not very important which language to learn first
You will switch languages and use multiple languages and technologies at the same time. It's not a big deal
We chose JavaScript, because it's simple, very popular, and works almost everywhere
JavaScript is used to write websites, mobile apps, server software and much much more
This website uses JavaScript right now
JavaScript programs are running on your computer right now
Additional materials

Turing Machines Explained - Computerphile
How smart is today’s artificial intelligence? / PBS Newshour
Why Use Binary? - Computerphile
<!DOCTYPE html>
<html class="h-100" data-bs-theme="light" data-mantine-color-scheme="light" lang="en" prefix="og: https://ogp.me/ns#">
<head>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<link crossorigin="true" href="https://cdn.hexlet.io" rel="preconnect">
<meta content="aa2vrdtq64dub8knuf83lwywit311w" name="facebook-domain-verification">
<link href="/favicon.ico" rel="icon" sizes="any">
<link href="/favicon.svg" rel="icon" type="image/svg+xml">
<link href="/apple-touch-icon.png" rel="apple-touch-icon">
<link href="/manifest.webmanifest" rel="manifest">

<script>
//<![CDATA[
window.gon={};gon.ym_counter="25559621";gon.is_bot=true;gon.applications={};gon.current_user={"id":null,"last_viewed_notification_id":null,"email":null,"state":null,"first_name":"","last_name":"","current_program":null,"current_team":null,"full_name":"","guest":true,"can_use_paid_features":false,"is_hexlet_employee":false,"sanitized_phone_number":"","can_subscribe":true,"can_renew_education":false};gon.token="bdKpaIfUONKnADsdCB-sPNlnGSB4iSW_8l5IKt3FGYs-FMRepr8DMsAKxPW6gZv91c2Xe7SXP7NQ24I5kBnGUA";gon.locale="en";gon.language="en";gon.theme="light";gon.rails_env="production";gon.mobile=false;gon.google={"analytics_key":"UA-1360700-51","optimize_key":"GTM-5QDVFPF"};gon.captcha={"google_v3_site_key":"6LenGbgZAAAAAM7HbrDbn5JlizCSzPcS767c9vaY","yandex_site_key":"ysc1_Vyob5ZPPUdPBsu0ykt8bVFdzsfpoVjQChLGl2b4g19647a89","verification_failed":null};gon.social_signin=false;gon.typoreporter_google_form_id="1FAIpQLScNwxM8rjQRRWqW5G6dn6-0NvLUblFemy7EvA9VsJ7Ov5wXqA";
//]]>
</script>
<meta charset="utf-8">
<title>Human and computer languages | Programming fundamentals</title>
<meta name="description" content="Human and computer languages / Programming fundamentals: Let&#39;s explore the idea of programming languages themselves and figure out what language should you start with.">
<link rel="canonical" href="https://hexlet.io/courses/intro_to_programming/lessons/language/theory_unit">
<meta name="robots" content="noarchive">
<meta property="og:title" content="Human and computer languages">
<meta property="og:title" content="Programming fundamentals">
<meta property="og:description" content="Human and computer languages / Programming fundamentals: Let&#39;s explore the idea of programming languages themselves and figure out what language should you start with.">
<meta property="og:url" content="https://hexlet.io/courses/intro_to_programming/lessons/language/theory_unit">
<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="VtqL8I7I9oCUjfLETxLPDiTIPsXh7XTIM3ZYfjGaS0YFHObGr6PNYPOHDSz9jPjPKGKwni3zbsSR85JtfEaUnQ" />



<script src="/vite/assets/inertia-CgrHVkgd.js" crossorigin="anonymous" type="module"></script><link rel="modulepreload" href="/vite/assets/chunk-DsPFFUou.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/preload-helper-C1cfMHAs.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/init-0bhwJkNI.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/ahoy-BXKrsWjp.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/analytics-Du9ljYPK.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/ErrorFallbackBlock-V3hfk_CP.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/RootLayout-CUZzAr0T.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/Surface-DbDKujDz.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/gon-B-jV56Ol.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/mantine-DOJkeu70.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/utils-ClTF9s_T.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/routes-mvvEXZQ8.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/index.esm-DATLpQdV.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/Modal-BhY0AP_c.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/Textarea-P1s4q94S.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/exports-BsSGGK2I.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/dayjs.min-Bfba02I7.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/client-CYyKzrjQ.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/react-dom-SJZekO2j.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/useTranslation-bo78L81P.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/compiler-runtime-BhqaZ6vG.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/jsx-runtime-DlXMvSuQ.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/react-CFtMU8gd.js" as="script" crossorigin="anonymous">
<link rel="stylesheet" href="/vite/assets/application-BhDYOUva.css" />
<script src="/vite/assets/application-ZyVHkzwO.js" crossorigin="anonymous" type="module"></script><link rel="modulepreload" href="/vite/assets/chunk-DsPFFUou.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/autocomplete-BokUl44d.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/routes-mvvEXZQ8.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/createPopper-gQnwoPhY.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/js.cookie-CB1F2-VC.js" as="script" crossorigin="anonymous"><link rel="stylesheet" href="/vite/assets/application-BhDYOUva.css" media="screen" />
<!-- Google Tag Manager - deferred -->
<script>
  // dataLayer stub сразу — пуши работают до загрузки скрипта
  window.dataLayer = window.dataLayer || [];
  
  // Сам скрипт — отложенно после load
  window.addEventListener('load', function() {
    setTimeout(function() {
      dataLayer.push({'gtm.start': new Date().getTime(), event: 'gtm.js'});
      var j = document.createElement('script');
      j.async = true;
      j.src = 'https://www.googletagmanager.com/gtm.js?id=GTM-WK88TH';
      document.head.appendChild(j);
    }, 1500);
  });
</script>
<!-- End Google Tag Manager -->




</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript>
<iframe height="0" src="https://www.googletagmanager.com/ns.html?id=GTM-WK88TH" style="display:none;visibility:hidden" width="0"></iframe>
</noscript>
<!-- End Google Tag Manager (noscript) -->


<header class="sticky-top bg-body">
<nav class="navbar navbar-expand-lg">
<div class="container-xxl">
<a class="navbar-brand" href="/"><img alt="Hexlet logo" height="24" src="https://hexlet.io/vite/assets/logo_en_light-FS-yL6XB.svg" width="96">
</a><button aria-controls="collapsable" aria-expanded="false" aria-label="Menu" class="navbar-toggler border-0 mb-0 mt-1" data-bs-target="#collapsable" data-bs-toggle="collapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsable">
<ul class="navbar-nav mb-lg-0 mt-lg-1">
<li class="nav-item dropdown">
<button aria-haspopup class="btn nav-link" data-bs-toggle="dropdown" type="button">
All courses
<span class="bi bi-chevron-down align-middle ms-1"></span>
</button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item d-flex py-2" href="/courses"><div class="fw-bold me-auto">Everything</div>
<div class="text-muted">8</div>
</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li class="dropdown-item">
<b>Popular categories</b>
</li>
<li>
<a class="dropdown-item py-2" href="/courses_backend-development">Backend Development
</a></li>
<li>
<a class="dropdown-item py-2" href="/courses_devops">DevOps
</a></li>
<li>
<a class="dropdown-item py-2" href="/courses_frontend-development">Frontend Development
</a></li>
<li>
<a class="dropdown-item py-2" href="/courses_testing">Testing
</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li class="dropdown-item">
<b>Popular courses</b>
</li>
<li>
<a class="dropdown-item py-2" href="/programs/frontend">Frontend Developer
</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<button aria-haspopup class="btn nav-link" data-bs-toggle="dropdown" type="button">
About Hexlet
<span class="bi bi-chevron-down align-middle"></span>
</button>
<ul class="dropdown-menu bg-body">
<li>
<a class="dropdown-item py-2" href="/pages/about">About company
</a></li>
<li>
<a class="dropdown-item py-2" href="/blog">Blog
</a></li>
<li>
<span class="dropdown-item py-2 external-link" data-href="https://special.hexlet.io/hse-research" role="button"><span class="translation_missing" title="translation missing: en.layouts.header.results">Results</span>
</span></li>
<li>
<span class="dropdown-item py-2 external-link" data-href="https://career.hexlet.io" role="button"><span class="translation_missing" title="translation missing: en.layouts.header.career">Career</span>
</span></li>
<li>
<a class="dropdown-item py-2" href="/testimonials">Testimonials
</a></li>
<li>
<span class="dropdown-item py-2 external-link" data-href="https://t.me/hexlet_help_bot" role="button"><span class="translation_missing" title="translation missing: en.layouts.header.support">Support</span>
</span></li>
<li>
<span class="dropdown-item py-2 external-link" data-href="https://special.hexlet.io/referal-program/?promo_creative=priglasite-druzei&amp;promo_name=referal-program&amp;promo_position=promo_position&amp;promo_start=010724&amp;promo_type=link" role="button"><span class="translation_missing" title="translation missing: en.layouts.header.referal_program">Referal Program</span>
</span></li>
<li>
<span class="dropdown-item py-2 external-link" data-href="https://special.hexlet.io/certificate" role="button"><span class="translation_missing" title="translation missing: en.layouts.header.certificates">Certificates</span>
</span></li>
<li>
<span class="dropdown-item py-2 external-link" data-href="https://hh.ru/employer/4307094" role="button"><span class="translation_missing" title="translation missing: en.layouts.header.vacancies">Vacancies</span>
</span></li>
<li>
<span class="dropdown-item d-flex external-link" rel="noopener noreferrer nofollow" data-href="https://b2b.hexlet.io" data-target="_blank" role="button"><span class="translation_missing" title="translation missing: en.layouts.header.teams">Teams</span>
</span></li>
<li>
<span class="dropdown-item d-flex external-link" rel="noopener noreferrer nofollow" data-href="https://hexly.ru/" data-target="_blank" role="button"><span class="translation_missing" title="translation missing: en.layouts.header.college">College</span>
</span></li>
<li>
<span class="dropdown-item d-flex external-link" rel="noopener noreferrer nofollow" data-href="https://hexlyschool.ru/" data-target="_blank" role="button"><span class="translation_missing" title="translation missing: en.layouts.header.private_school">Private School</span>
</span></li>
</ul>
</li>
</ul>
<ul class="navbar-nav flex-lg-row align-items-lg-center gap-2 ms-auto">
<li>
<a class="nav-link" aria-label="Switch theme" href="/theme/switch?new_theme=dark"><span aria-hidden="true" class="bi bi-moon"></span>
</a></li>
<li>
<span data-target="_self" class="nav-link external-link" data-href="/u/new" role="button"><span>Sign up</span>
</span></li>
<li>
<span data-target="_self" class="nav-link external-link" data-href="https://hexlet.io/session/new" role="button"><span>Sign in</span>
</span></li>
</ul>
</div>
</div>
</nav>
</header>
<div class="x-container-xxxl">


</div>

<main class="mb-6 min-vh-100 h-100">
<div id="app" data-page="{&quot;component&quot;:&quot;web/courses/lessons/theory_unit&quot;,&quot;props&quot;:{&quot;errors&quot;:{},&quot;locale&quot;:&quot;en&quot;,&quot;language&quot;:&quot;en&quot;,&quot;httpsHost&quot;:&quot;https://hexlet.io&quot;,&quot;host&quot;:&quot;hexlet.io&quot;,&quot;colorScheme&quot;:&quot;light&quot;,&quot;auth&quot;:{&quot;user&quot;:{&quot;id&quot;:null,&quot;last_viewed_notification_id&quot;:null,&quot;email&quot;:null,&quot;state&quot;:null,&quot;first_name&quot;:&quot;&quot;,&quot;last_name&quot;:&quot;&quot;,&quot;current_program&quot;:null,&quot;current_team&quot;:null,&quot;full_name&quot;:&quot;&quot;,&quot;guest&quot;:true,&quot;can_use_paid_features&quot;:false,&quot;is_hexlet_employee&quot;:false,&quot;sanitized_phone_number&quot;:&quot;&quot;,&quot;can_subscribe&quot;:true,&quot;can_renew_education&quot;:false}},&quot;cloudflareTurnstileSiteKey&quot;:&quot;0x4AAAAAAA15KmeFXzd2H0Xo&quot;,&quot;vkIdClientId&quot;:&quot;51586979&quot;,&quot;yandexIdClientId&quot;:null,&quot;formAuthToken&quot;:&quot;K7yQWJdQ1OGmwYKPkTpvXrrTk0S_72J3Ct9LMEQqq3J4ev1utjvvAcHLfWcjpFiftnkdH3PxeHuoWoEjCfZ0qQ&quot;,&quot;topics&quot;:[{&quot;id&quot;:5791,&quot;title&quot;:&quot;Very fun pictures, especially with pirate! Let&#x27;s go futher with style ,-)&quot;,&quot;plain_title&quot;:&quot;Very fun pictures, especially with pirate! Let&#x27;s go futher with style ,-) &quot;,&quot;creator&quot;:{&quot;public_name&quot;:&quot;Тимур Арбаев&quot;,&quot;id&quot;:106834,&quot;is_tutor&quot;:false},&quot;comments&quot;:[{&quot;creator&quot;:{&quot;public_name&quot;:&quot;Rakhim D.&quot;,&quot;id&quot;:42197,&quot;is_tutor&quot;:false},&quot;id&quot;:10399,&quot;body&quot;:&quot;Thanks, will do!&quot;,&quot;topic_id&quot;:5791},{&quot;creator&quot;:{&quot;public_name&quot;:&quot;Jamshed Makhkamzoda&quot;,&quot;id&quot;:29005,&quot;is_tutor&quot;:false},&quot;id&quot;:10811,&quot;body&quot;:&quot;Is Toto&#x27;s head an &#x27;and&#x27; logical operator?)&quot;,&quot;topic_id&quot;:5791},{&quot;creator&quot;:{&quot;public_name&quot;:&quot;Rakhim D.&quot;,&quot;id&quot;:42197,&quot;is_tutor&quot;:false},&quot;id&quot;:10819,&quot;body&quot;:&quot;![no way](http://i.imgur.com/HH7wipB.png \&quot;enter image title here\&quot;)&quot;,&quot;topic_id&quot;:5791},{&quot;creator&quot;:{&quot;public_name&quot;:&quot;Александр Яковлев&quot;,&quot;id&quot;:113331,&quot;is_tutor&quot;:false},&quot;id&quot;:10516,&quot;body&quot;:&quot;Like in a cartoon Petrovich.&quot;,&quot;topic_id&quot;:5791}],&quot;communitable&quot;:{&quot;parent_entity_name&quot;:null,&quot;parent_entity_url&quot;:null,&quot;entity_name&quot;:&quot;Human and computer languages&quot;,&quot;entity_url&quot;:null,&quot;active&quot;:true}},{&quot;id&quot;:5980,&quot;title&quot;:&quot;Oh gosh! I really love this course!!! Definitely will share with some people who would like to learn programming! And awesome pronunciation tho ;)&quot;,&quot;plain_title&quot;:&quot;Oh gosh! I really love this course!!! Definitely will share with some people who would like to learn programming! And awesome pronunciation tho ;) &quot;,&quot;creator&quot;:{&quot;public_name&quot;:&quot;&quot;,&quot;id&quot;:58458,&quot;is_tutor&quot;:false},&quot;comments&quot;:[{&quot;creator&quot;:{&quot;public_name&quot;:&quot;R. D.&quot;,&quot;id&quot;:3,&quot;is_tutor&quot;:false},&quot;id&quot;:10821,&quot;body&quot;:&quot;Glad to hear it! Let them know that we answer all the questions here, so they don&#x27;t have to worry about being stuck.\n\nThanks!&quot;,&quot;topic_id&quot;:5980},{&quot;creator&quot;:{&quot;public_name&quot;:&quot;&quot;,&quot;id&quot;:58458,&quot;is_tutor&quot;:false},&quot;id&quot;:10852,&quot;body&quot;:&quot;Deal!!!&quot;,&quot;topic_id&quot;:5980}],&quot;communitable&quot;:{&quot;parent_entity_name&quot;:null,&quot;parent_entity_url&quot;:null,&quot;entity_name&quot;:&quot;Human and computer languages&quot;,&quot;entity_url&quot;:null,&quot;active&quot;:true}},{&quot;id&quot;:29695,&quot;title&quot;:&quot;Link to the PBS article \&quot;How smart is today&#x27;s artificial intelligence?\&quot; doesn&#x27;t working anymore.\n\nI searched and found this:\nhttps://www.pbs.org/newshour/show/smart-todays-artificial-intelligence-2&quot;,&quot;plain_title&quot;:&quot;Link to the PBS article \&quot;How smart is today&#x27;s artificial intelligence?\&quot; doesn&#x27;t working anymore. I searched and found this: https://www.pbs.org/newshour/show/smart-todays-artificial-intelligence-2 &quot;,&quot;creator&quot;:{&quot;public_name&quot;:&quot;Thorian Flomas&quot;,&quot;id&quot;:235504,&quot;is_tutor&quot;:false},&quot;comments&quot;:[{&quot;creator&quot;:{&quot;public_name&quot;:&quot;Ivan Gagarinov&quot;,&quot;id&quot;:75907,&quot;is_tutor&quot;:true},&quot;id&quot;:149859,&quot;body&quot;:&quot;**Thorian Flomas**, hello! Now everything should work. Can you check if the problem is still there?&quot;,&quot;topic_id&quot;:29695}],&quot;communitable&quot;:{&quot;parent_entity_name&quot;:null,&quot;parent_entity_url&quot;:null,&quot;entity_name&quot;:&quot;Human and computer languages&quot;,&quot;entity_url&quot;:null,&quot;active&quot;:true}},{&quot;id&quot;:13554,&quot;title&quot;:&quot;This is my second lesson only , but having struggle to learn JS for about 8 months now, if i can learn some thing here , i will buy you a nice vegetable salad &quot;,&quot;plain_title&quot;:&quot;This is my second lesson only , but having struggle to learn JS for about 8 months now, if i can learn some thing here , i will buy you a nice vegetable salad  &quot;,&quot;creator&quot;:{&quot;public_name&quot;:&quot;Amit Shrivastava&quot;,&quot;id&quot;:167755,&quot;is_tutor&quot;:false},&quot;comments&quot;:[{&quot;creator&quot;:{&quot;public_name&quot;:&quot;Ivan Gagarinov&quot;,&quot;id&quot;:75907,&quot;is_tutor&quot;:true},&quot;id&quot;:149870,&quot;body&quot;:&quot;**Amit Shrivastava**, hello! We have a [Frontend Developer program](https://hexlet.io/programs/frontend), you can switch to it.&quot;,&quot;topic_id&quot;:13554}],&quot;communitable&quot;:{&quot;parent_entity_name&quot;:null,&quot;parent_entity_url&quot;:null,&quot;entity_name&quot;:&quot;Human and computer languages&quot;,&quot;entity_url&quot;:null,&quot;active&quot;:true}}],&quot;lesson&quot;:{&quot;exercise&quot;:null,&quot;units&quot;:[{&quot;id&quot;:1661,&quot;name&quot;:&quot;theory&quot;,&quot;url&quot;:&quot;/courses/intro_to_programming/lessons/language/theory_unit&quot;}],&quot;links&quot;:[],&quot;ordered_units&quot;:[{&quot;id&quot;:1661,&quot;name&quot;:&quot;theory&quot;,&quot;url&quot;:&quot;/courses/intro_to_programming/lessons/language/theory_unit&quot;}],&quot;id&quot;:812,&quot;slug&quot;:&quot;language&quot;,&quot;state&quot;:&quot;approved&quot;,&quot;name&quot;:&quot;Human and computer languages&quot;,&quot;course_order&quot;:120,&quot;goal&quot;:&quot;Let&#x27;s explore the idea of programming languages themselves and figure out what language should you start with.&quot;,&quot;self_study&quot;:null,&quot;theory_video_provider&quot;:&quot;youtube&quot;,&quot;theory_video_uid&quot;:&quot;7J545CYg8W4&quot;,&quot;theory&quot;:&quot;## Video script\n\nWe have called this system of pushing buttons a &#x27;language&#x27;. The lever seems to be a separate thing, it&#x27;s like a \&quot;RUN\&quot; command. We put in the code with the buttons, and then RUN the code with the lever.\n\nYou know how linguists discuss grammar, structure of words and stuff like that? They don&#x27;t really care about novels or songs or stories, they are very much interested in the language used in those novels, songs and stories. They care about the code. Most people are the other way around: we care about the story, about the meaning. Not only in books and movies, but in everyday life: when I&#x27;m telling my girlfriend to buy me another sketchbook because I&#x27;m doing awkward drawings for teaching, I care about the result, the goal, not about the grammar and the history of the word \&quot;sketch\&quot;.\n\nWe can think of language having two... things to think about or two aspects: grammar and meaning. Programming languages are similar to this, but since programming languages are way simpler than human languages, there isn&#x27;t much grammar, there is mostly syntax — word order and spelling. And for the meaning, computer scientists use a fancy word \&quot;semantics\&quot;.\n\nLet&#x27;s compare Tota&#x27;s magic box language with some modern programming language.\n\nThis box has very hard syntax, it&#x27;s difficult to operate with X&#x27;s and O&#x27;s. On the other hand, this modern code looks... well, like English! This syntax is much easier to grasp, we can at least guess what each word means.\n\nThe set of rules that describe how symbols and words can be used is the syntax.\n\nYou will see that some programming languages have similar syntax, and some have exotic, unusual syntax.\n\nThe semantics or the meaning is harder to see because it&#x27;s not explicit. What is the meaning of this code? It&#x27;s fire flash, as we know. What&#x27;s the meaning of this code? Maybe, you guessed it: it prints a phrase backwards. The meaning, the end result of running the code is the semantics.\n\nGenerally, with modern programming languages, this relationship between code and its meaning can be used to judge the code. If you look at the code and quickly get an idea of what it means, then this code is good. If you look at the code and say \&quot;what the hell is this?!\&quot;, then it&#x27;s probably not too good. This brings us to an important point: code is for people. Computers don&#x27;t really care if code is easy to read or hard: for them all code is equally easy to understand.\n\nYou might say, well, I want to write apps and websites, so I care about the meaning — semantics, just like a writer cares about the story and not about the linguistics that much. So, why bother with syntax really? Well, programming language is the tool you use to tell your story, be it an app, a website or a robot. And the better you know your tool, the less you think about it, and more you can do. Just like a writer must be able to express ideas, with correct words and syntax for people to understand.\n\nLuckily, programming languages have very simple syntax compared to human languages. So, don&#x27;t worry, even though we must learn syntax, it&#x27;s going to be pretty easy.\n\nWell... is programming easy then? If computers are stupid and only do what we tell them to do, and programming language syntax is easy, then this whole thing must be pretty easy, right?\n\nWell... no. Programming is not too easy, honestly. I mean, yeah, writing a high school essay is easy compared to writing \&quot;War and Peace\&quot;. And writing a PhD thesis on quantum tunnelling is on a different level completely. So, we should not generalize, really. All of those activities are writing, but comparing them and making arguments about \&quot;writing\&quot; in general is pretty useless. Programming can be easy or very hard — depends on who is doing what.\n\nYou will quickly realize that syntax is easy to learn, but it doesn&#x27;t really help you alone. It is necessary but not sufficient.\n\nDuring the following lessons we will focus on the semantics, the meaning, and will explore some fascinating ideas that made it possible to create computers, internet, robots and mobile phones. We will learn syntax as we go.\n\nOne last thing we have to touch before we dive in is, well, what language to choose? There are so many, and this might seem like a critical moment. It is critical, but not because \&quot;WE MUST MAKE THE PERFECT DECISION WHICH WILL AFFECT THE REST OF OUR LIVES\&quot;, but because we must understand that choosing a programming language is like choosing a writing device, not like choosing a human language.\n\nYou can write a story with pen and paper, using a typewriter, a computer or a whiteboard. Yes, each writing device comes with different capabilities and limitations. And if you are trying to become a writer, it doesn&#x27;t relly matter if you learn to write on paper or on a typewriter. So, we want to learn programming, not just a programming language.\n\nWe have to choose a language that is good enough, simple enough, popular enough and powerful enough. As you grow professionally, you WILL switch languages, will use multiple languages and technologies at the same time, and it won&#x27;t be a big deal, just like switching from a typewriter to Microsoft Word is not a big deal.\n\nWe are choosing JavaScript as our first programming language and as the tool to learn programming. JavaScript programs are running pretty much all the time on your computer, because most of the websites, including the one you&#x27;re watching this video on, use JavaScript. It&#x27;s extremely popular, and it&#x27;s gettig more and more popular every year.\n\nSo, yeah... Let&#x27;s go ahead and start programming!\n\n\n## Synopsis\n\n### Two aspects of languages\n\n- Programming language has two aspects:\n    - syntax (coding rules of writing, spelling, word order)\n    - semantics (idea, meaning)\n- Some programming languages have similar syntax\n- Some programming languages have exotic, unusual syntax\n- Semantics is hard to see, it&#x27;s not explicit\n\n### Syntax and semantics\n\n- In modern languages *good code* means easily-understood semantics\n- If it&#x27;s hard to understand what code does, than code is not too good\n- Syntax is easy to understand\n- Syntax is necessary to know but not sufficient\n\n### Choosing a language\n\n- It is not **very** important which language to learn first\n- You will switch languages and use multiple languages and technologies at the same time. It&#x27;s not a big deal\n- We chose JavaScript, because it&#x27;s simple, very popular, and works almost everywhere\n- JavaScript is used to write websites, mobile apps, server software and much much more\n- This website uses JavaScript right now\n- JavaScript programs are running on your computer right now\n\n## Additional materials\n\n- [Turing Machines Explained - Computerphile](https://www.youtube.com/watch?v=dNRDvLACg5Q)\n- [How smart is today’s artificial intelligence? / PBS Newshour](http://www.pbs.org/newshour/bb/smart-todays-artificial-intelligence/)\n- [Why Use Binary? - Computerphile](https://www.youtube.com/watch?v=thrx3SBEpL8)\n\n&lt;!-- You&#x27;re going to write programs in a modern programming language, and most of the time you won&#x27;t see binary code — those zeroes and ones or *bits*. But you need to understand the **idea** behind binary numbers. Here is a short and simple illustrated explanation: --&gt;\n\n&lt;!-- ![binary](/rails/active_storage/blobs/proxy/eyJfcmFpbHMiOnsiZGF0YSI6NTY5NywicHVyIjoiYmxvYl9pZCJ9fQ==--9a92944ec0f81fe110d8af008dd7bcf21e9c33df/binary1.png)\n![binary](/rails/active_storage/blobs/proxy/eyJfcmFpbHMiOnsiZGF0YSI6NTY5OSwicHVyIjoiYmxvYl9pZCJ9fQ==--e72da642deebf5589d21d53ec54499a373f8a0e5/binary2.png)\n![binary](/rails/active_storage/blobs/proxy/eyJfcmFpbHMiOnsiZGF0YSI6NTcwMCwicHVyIjoiYmxvYl9pZCJ9fQ==--2987beb9da876a443984d74e3c486d5d548e38da/binary3.png) --&gt;\n\n&quot;},&quot;lessonMember&quot;:null,&quot;courseMember&quot;:null,&quot;course&quot;:{&quot;start_lesson&quot;:{&quot;exercise&quot;:null,&quot;units&quot;:[{&quot;id&quot;:1662,&quot;name&quot;:&quot;theory&quot;,&quot;url&quot;:&quot;/courses/intro_to_programming/lessons/intro/theory_unit&quot;}],&quot;links&quot;:[],&quot;ordered_units&quot;:[{&quot;id&quot;:1662,&quot;name&quot;:&quot;theory&quot;,&quot;url&quot;:&quot;/courses/intro_to_programming/lessons/intro/theory_unit&quot;}],&quot;id&quot;:813,&quot;slug&quot;:&quot;intro&quot;,&quot;state&quot;:&quot;approved&quot;,&quot;name&quot;:&quot;What is a computer anyway?&quot;,&quot;course_order&quot;:110,&quot;goal&quot;:&quot;We&#x27;ll ask and try to answer some simple but important questions: What is a computer anyway? Is it smart? Do computers speak programming languages?&quot;,&quot;self_study&quot;:null,&quot;theory_video_provider&quot;:&quot;youtube&quot;,&quot;theory_video_uid&quot;:&quot;muFql8Z4sCg&quot;,&quot;theory&quot;:&quot;Every lesson includes additional materials: illustrations, recommended articles and videos, some optional resources and the full video script.\n\nThese first lessons don&#x27;t have many links yet, but we&#x27;re gradually going deeper and deeper, so expect more stuff as you follow along.\n\n## Video script\n\nThis is Tota.\n\nHe is a caveman.\n\nOne day he was walking in the forest, and all of a sudden a large noisy sphere appeared out of nowhere, sparkling and blinking.\n\n\&quot;Just like Terminator movie\&quot;, - would&#x27;ve said Tota if he had seen Terminator.\n\nThe sphere disappeared quickly, and left a smoking black box on the grass.\n\nTota was curious, he waited for the smoke to calm down and went ahead to explore the box.\n\nIt was a heavy thing with two buttons on the side, one with an X and one with an O on its face, a long hole and a lever.\n\nBeing a caveman, Tota tried to touch it, kick it, smell it and roll it around. The box was obviously not alive, but the buttons intrigued him.\n\nTota discovered an interesting thing: if he pushed X once and O once, then pulled the lever, then O would glow for a momemnt, then X would glow for a moment.\n\nDid I tell you that Tota was remarkably smart? Top of his cave.\n\nHe then decided to push the buttons in the same way as they glow: O, then X, then pulled the lever. The box answered again.\n\nTota repeated the new pattern. There was another answer. When Tota pushed the last pattern, the box beeped and a produced a ball of lightning, scaring Tota immensely and putting the tree in front of him on fire.\n\nSo, now Tota had this weapon of sorts. He killed many animals with it, and enjoyed many meals near a fire.\n\nSoon he discovered more patterns: one would create some noise he really hated, another would spit a long leaf with markings, and others would do nothing at all.\n\nOnce Tota found an even more advanced feature of this device. He wanted to make fire again, but instead of just pushing the lever once, he pushed and held it. When he released it moments later, no fire came out, but both X and O started blinking. He desperately pressed O and they stopped blinking. From then on, simple O and a lever push produced the fire, so much easier and faster than before!\n\nHe realized that he had trained this beast just like he trained a baby wolf one day.\n\nSo... what is this thing?\n\nOf course, Tota calls it Boomwoom, but we can clearly come up with something better. At first, one might think this is some sort of overly complicated weapon. But it does some other weird stuff, like music... and even printing. It&#x27;s not like a home appliance, although, some washing machines are more complicated to operate.\n\nLet&#x27;s start with the buttons. Seems like the machine \&quot;understands\&quot; certain combinations and doesn&#x27;t understand others. We don&#x27;t know the meaning of the buttons and combinations, so I want to call it \&quot;code\&quot;, as in \&quot;I have no idea what that is, but it probably means something\&quot;. Some codes work, some don&#x27;t, just like in our speech some sounds mean something, and others don&#x27;t. &#x27;Language&#x27; seems like a good word for it. This machine understands certain language of codes.\n\nOkay, how do we call this machine then? Code-language-understander?  \&quot;Understand\&quot; sounds important to us, but the key thing about the machine is  not that it just understands, but does something as a result. It understands the code for \&quot;fire flash\&quot;, and immediately produces the fire flash. So, it&#x27;s more like... code-language-performer? It performs some actions.\n\nThe guy from the future who sent this thing to the stone age might call it differently, but we today would definitely call this machine a \&quot;computer\&quot;. That&#x27;s how we call machines that accept code and perform some actions.\n\nYou might think this is a terrible computer with some terrible code. Today we have these magical devices with awesome features and programming languages with easy to read codes like this:\n\nBy the way, you will be able to write and understand this easily by the end of the course.\n\nAnd yes, nowadays computers are different. But... not too different. We haven&#x27;t yet explored this machine thoroughly enough, but trust me: fundamentally, they are the same. Just like this... is very different to this... both use the same principles and capable of the same thing, to different extent.\n\nSo, we can keep looking at that weird machine and understand something important about computer programming in general:\n\nFirst: Computer understands a particular, strict language. Random pushes don&#x27;t do much, only certain combinations work. And one tiny mistake in a pattern breaks everything. And second: Computers are really stupid\n\nYou might think this last part is due to this particular computer being weird and underpowered, but I am really talking about computers in general. They are very powerful but very stupid. Make no mistake, all they do is perform whatever we tell them. No magic. But, of course, for Tota it&#x27;s magic indeed, just like some modern devices are magic to us, unless we learn computer  programming. Fortunately, this is exactly what we are going to do in this course.\n\n## Synopsis\n\n- Computer accepts code and performs actions\n- Computer understands certain language of codes:\n    - Some codes work\n    - Some codes don&#x27;t work\n    - There are strict rules about code\n- Unlike people computers are fundamentally not smart, they only do what we tell them to do. And we tell them to do stuff using code\n- All computers are fundamentally the same. Primitive, old, underpowered computer and modern laptop use the same principles and capable of the same thing, to different extent\n\n## Additional materials\n\n- [Inside your computer - Bettina Bair](https://www.youtube.com/watch?v=AkFi90lZmXA)\n- [Punch Card Programming - Computerphile](https://www.youtube.com/watch?v=KG2M4ttzBnY)\n- [The Future of Computer Intelligence Is Everything but Artificial](https://www.wired.com/2014/06/the-future-of-computer-intelligence-is-everything-but-artificial/)\n\n\n&quot;},&quot;id&quot;:135,&quot;slug&quot;:&quot;intro_to_programming&quot;,&quot;challenges_count&quot;:4,&quot;name&quot;:&quot;Programming fundamentals&quot;,&quot;allow_indexing&quot;:true,&quot;state&quot;:&quot;approved&quot;,&quot;course_state&quot;:&quot;finished&quot;,&quot;pricing_type&quot;:&quot;free&quot;,&quot;description&quot;:&quot;What actually are computers? Do they speak programming languages? Is it hard to write your own programs? The answer to these, and many other questions, can be found in this course. We&#x27;ll explore the nature of computers and code, and some fascinating ideas that allowed us to create modern computers, mobile phones, the internet and, you know, pretty much everything we rely on every day.&quot;,&quot;kind&quot;:&quot;basic&quot;,&quot;updated_at&quot;:&quot;2026-01-20T11:37:42.764Z&quot;,&quot;language&quot;:&quot;javascript&quot;,&quot;duration_cache&quot;:67920,&quot;skills&quot;:[&quot;Use basic language constructs: conditions, loops, functions, and others&quot;,&quot;Divide code into modules for reuse and no name conflicts&quot;,&quot;Understand key concepts for writing good code, such as code cleanliness and determinism&quot;],&quot;keywords&quot;:[],&quot;lessons_count&quot;:16,&quot;cover&quot;:&quot;https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6NTY3OSwicHVyIjoiYmxvYl9pZCJ9fQ==--2aca53c34d52f86032c605caceb0ccdd4a9b2fa8/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6WzYwMCw0MDBdfSwicHVyIjoidmFyaWF0aW9uIn19--6067466c2912ca31a17eddee04b8cf2a38c6ad17/image.png&quot;},&quot;recommendedLandings&quot;:[],&quot;lessonMemberUnit&quot;:null,&quot;accessToLearnUnitExists&quot;:true,&quot;accessToCourseExists&quot;:true},&quot;url&quot;:&quot;/courses/intro_to_programming/lessons/language/theory_unit&quot;,&quot;version&quot;:&quot;1656487db0d1dd5f33634fe1070e57e55135cbeb&quot;,&quot;encryptHistory&quot;:false,&quot;clearHistory&quot;:false}"><style data-mantine-styles="true">:root, :host{--mantine-font-family: Arial, sans-serif;--mantine-font-family-headings: Arial, sans-serif;--mantine-heading-font-weight: normal;--mantine-radius-default: 0rem;--mantine-primary-color-filled: var(--mantine-color-indigo-filled);--mantine-primary-color-filled-hover: var(--mantine-color-indigo-filled-hover);--mantine-primary-color-light: var(--mantine-color-indigo-light);--mantine-primary-color-light-hover: var(--mantine-color-indigo-light-hover);--mantine-primary-color-light-color: var(--mantine-color-indigo-light-color);--mantine-spacing-xxl: calc(4rem * var(--mantine-scale));--mantine-font-size-xs: 12px;--mantine-font-size-sm: 14px;--mantine-font-size-md: 16px;--mantine-font-size-lg: clamp(16.0000px, calc(15.2727px + 0.2273vw), 18.0000px);--mantine-font-size-xl: clamp(16.0000px, calc(14.5455px + 0.4545vw), 20.0000px);--mantine-font-size-display-3: clamp(32.0000px, calc(26.1818px + 1.8182vw), 48.0000px);--mantine-font-size-display-2: clamp(36.0000px, calc(25.8182px + 3.1818vw), 64.0000px);--mantine-font-size-display-1: clamp(40.0000px, calc(25.4545px + 4.5455vw), 80.0000px);--mantine-font-size-h1: clamp(28.0000px, calc(23.6364px + 1.3636vw), 40.0000px);--mantine-font-size-h2: clamp(24.0000px, calc(21.0909px + 0.9091vw), 32.0000px);--mantine-font-size-h3: clamp(20.0000px, calc(17.0909px + 0.9091vw), 28.0000px);--mantine-font-size-h4: clamp(16.0000px, calc(13.0909px + 0.9091vw), 24.0000px);--mantine-font-size-h5: clamp(16.0000px, calc(14.5455px + 0.4545vw), 20.0000px);--mantine-font-size-h6: 1rem;--mantine-primary-color-0: var(--mantine-color-indigo-0);--mantine-primary-color-1: var(--mantine-color-indigo-1);--mantine-primary-color-2: var(--mantine-color-indigo-2);--mantine-primary-color-3: var(--mantine-color-indigo-3);--mantine-primary-color-4: var(--mantine-color-indigo-4);--mantine-primary-color-5: var(--mantine-color-indigo-5);--mantine-primary-color-6: var(--mantine-color-indigo-6);--mantine-primary-color-7: var(--mantine-color-indigo-7);--mantine-primary-color-8: var(--mantine-color-indigo-8);--mantine-primary-color-9: var(--mantine-color-indigo-9);--mantine-color-red-0: #ffeaea;--mantine-color-red-1: #fed4d4;--mantine-color-red-2: #f4a7a8;--mantine-color-red-3: #ec7878;--mantine-color-red-4: #e55050;--mantine-color-red-5: #e03131;--mantine-color-red-6: #e02829;--mantine-color-red-7: #c71a1c;--mantine-color-red-8: #b21218;--mantine-color-red-9: #9c0411;--mantine-color-violet-0: #fce9ff;--mantine-color-violet-1: #f1cfff;--mantine-color-violet-2: #e09bff;--mantine-color-violet-3: #d16fff;--mantine-color-violet-4: #be37fe;--mantine-color-violet-5: #b51afe;--mantine-color-violet-6: #b009ff;--mantine-color-violet-7: #9b00e4;--mantine-color-violet-8: #8a00cc;--mantine-color-violet-9: #7800b3;--mantine-color-indigo-0: #edecff;--mantine-color-indigo-1: #d6d5fe;--mantine-color-indigo-2: #aaa9f4;--mantine-color-indigo-3: #7b79eb;--mantine-color-indigo-4: #5451e4;--mantine-color-indigo-5: #3b37e0;--mantine-color-indigo-6: #2d2adf;--mantine-color-indigo-7: #1f1ec7;--mantine-color-indigo-8: #1819b2;--mantine-color-indigo-9: #0c149e;--mantine-color-cyan-0: #dffdff;--mantine-color-cyan-1: #caf5ff;--mantine-color-cyan-2: #99e8ff;--mantine-color-cyan-3: #64daff;--mantine-color-cyan-4: #3ccffe;--mantine-color-cyan-5: #24c8fe;--mantine-color-cyan-6: #00c2ff;--mantine-color-cyan-7: #00ade4;--mantine-color-cyan-8: #009acd;--mantine-color-cyan-9: #0085b5;--mantine-color-green-0: #e9fdec;--mantine-color-green-1: #d7f6dc;--mantine-color-green-2: #b0eab9;--mantine-color-green-3: #86df94;--mantine-color-green-4: #62d574;--mantine-color-green-5: #4ccf5f;--mantine-color-green-6: #3fcc54;--mantine-color-green-7: #2fb344;--mantine-color-green-8: #25a03b;--mantine-color-green-9: #138a2e;--mantine-color-yellow-0: #fff7e2;--mantine-color-yellow-1: #ffeecd;--mantine-color-yellow-2: #ffdc9c;--mantine-color-yellow-3: #ffc966;--mantine-color-yellow-4: #feb93a;--mantine-color-yellow-5: #feae1e;--mantine-color-yellow-6: #ffa90f;--mantine-color-yellow-8: #ca8200;--mantine-color-yellow-9: #af7000;--mantine-h1-font-size: clamp(28.0000px, calc(23.6364px + 1.3636vw), 40.0000px);--mantine-h1-font-weight: normal;--mantine-h2-font-size: clamp(24.0000px, calc(21.0909px + 0.9091vw), 32.0000px);--mantine-h2-font-weight: normal;--mantine-h3-font-size: clamp(20.0000px, calc(17.0909px + 0.9091vw), 28.0000px);--mantine-h3-font-weight: normal;--mantine-h4-font-size: clamp(16.0000px, calc(13.0909px + 0.9091vw), 24.0000px);--mantine-h4-font-weight: normal;--mantine-h5-font-size: clamp(16.0000px, calc(14.5455px + 0.4545vw), 20.0000px);--mantine-h5-font-weight: normal;--mantine-h6-font-size: 1rem;--mantine-h6-font-weight: normal;}

:root[data-mantine-color-scheme="dark"], :host([data-mantine-color-scheme="dark"]){--mantine-color-anchor: var(--mantine-color-text);--mantine-color-dimmed: #495057;--mantine-color-dark-filled: var(--mantine-color-dark-5);--mantine-color-dark-filled-hover: var(--mantine-color-dark-6);--mantine-color-dark-light: rgba(105, 105, 105, 0.15);--mantine-color-dark-light-hover: rgba(105, 105, 105, 0.2);--mantine-color-dark-light-color: var(--mantine-color-dark-0);--mantine-color-dark-outline: var(--mantine-color-dark-1);--mantine-color-dark-outline-hover: rgba(184, 184, 184, 0.05);--mantine-color-gray-filled: var(--mantine-color-gray-5);--mantine-color-gray-filled-hover: var(--mantine-color-gray-6);--mantine-color-gray-light: rgba(222, 226, 230, 0.15);--mantine-color-gray-light-hover: rgba(222, 226, 230, 0.2);--mantine-color-gray-light-color: var(--mantine-color-gray-0);--mantine-color-gray-outline: var(--mantine-color-gray-1);--mantine-color-gray-outline-hover: rgba(241, 243, 245, 0.05);--mantine-color-red-filled: var(--mantine-color-red-5);--mantine-color-red-filled-hover: var(--mantine-color-red-6);--mantine-color-red-light: rgba(236, 120, 120, 0.15);--mantine-color-red-light-hover: rgba(236, 120, 120, 0.2);--mantine-color-red-light-color: var(--mantine-color-red-0);--mantine-color-red-outline: var(--mantine-color-red-1);--mantine-color-red-outline-hover: rgba(254, 212, 212, 0.05);--mantine-color-pink-filled: var(--mantine-color-pink-5);--mantine-color-pink-filled-hover: var(--mantine-color-pink-6);--mantine-color-pink-light: rgba(250, 162, 193, 0.15);--mantine-color-pink-light-hover: rgba(250, 162, 193, 0.2);--mantine-color-pink-light-color: var(--mantine-color-pink-0);--mantine-color-pink-outline: var(--mantine-color-pink-1);--mantine-color-pink-outline-hover: rgba(255, 222, 235, 0.05);--mantine-color-grape-filled: var(--mantine-color-grape-5);--mantine-color-grape-filled-hover: var(--mantine-color-grape-6);--mantine-color-grape-light: rgba(229, 153, 247, 0.15);--mantine-color-grape-light-hover: rgba(229, 153, 247, 0.2);--mantine-color-grape-light-color: var(--mantine-color-grape-0);--mantine-color-grape-outline: var(--mantine-color-grape-1);--mantine-color-grape-outline-hover: rgba(243, 217, 250, 0.05);--mantine-color-violet-filled: var(--mantine-color-violet-5);--mantine-color-violet-filled-hover: var(--mantine-color-violet-6);--mantine-color-violet-light: rgba(209, 111, 255, 0.15);--mantine-color-violet-light-hover: rgba(209, 111, 255, 0.2);--mantine-color-violet-light-color: var(--mantine-color-violet-0);--mantine-color-violet-outline: var(--mantine-color-violet-1);--mantine-color-violet-outline-hover: rgba(241, 207, 255, 0.05);--mantine-color-indigo-filled: var(--mantine-color-indigo-5);--mantine-color-indigo-filled-hover: var(--mantine-color-indigo-6);--mantine-color-indigo-light: rgba(123, 121, 235, 0.15);--mantine-color-indigo-light-hover: rgba(123, 121, 235, 0.2);--mantine-color-indigo-light-color: var(--mantine-color-indigo-0);--mantine-color-indigo-outline: var(--mantine-color-indigo-1);--mantine-color-indigo-outline-hover: rgba(214, 213, 254, 0.05);--mantine-color-blue-filled: var(--mantine-color-blue-5);--mantine-color-blue-filled-hover: var(--mantine-color-blue-6);--mantine-color-blue-light: rgba(116, 192, 252, 0.15);--mantine-color-blue-light-hover: rgba(116, 192, 252, 0.2);--mantine-color-blue-light-color: var(--mantine-color-blue-0);--mantine-color-blue-outline: var(--mantine-color-blue-1);--mantine-color-blue-outline-hover: rgba(208, 235, 255, 0.05);--mantine-color-cyan-filled: var(--mantine-color-cyan-5);--mantine-color-cyan-filled-hover: var(--mantine-color-cyan-6);--mantine-color-cyan-light: rgba(100, 218, 255, 0.15);--mantine-color-cyan-light-hover: rgba(100, 218, 255, 0.2);--mantine-color-cyan-light-color: var(--mantine-color-cyan-0);--mantine-color-cyan-outline: var(--mantine-color-cyan-1);--mantine-color-cyan-outline-hover: rgba(202, 245, 255, 0.05);--mantine-color-teal-filled: var(--mantine-color-teal-5);--mantine-color-teal-filled-hover: var(--mantine-color-teal-6);--mantine-color-teal-light: rgba(99, 230, 190, 0.15);--mantine-color-teal-light-hover: rgba(99, 230, 190, 0.2);--mantine-color-teal-light-color: var(--mantine-color-teal-0);--mantine-color-teal-outline: var(--mantine-color-teal-1);--mantine-color-teal-outline-hover: rgba(195, 250, 232, 0.05);--mantine-color-green-filled: var(--mantine-color-green-5);--mantine-color-green-filled-hover: var(--mantine-color-green-6);--mantine-color-green-light: rgba(134, 223, 148, 0.15);--mantine-color-green-light-hover: rgba(134, 223, 148, 0.2);--mantine-color-green-light-color: var(--mantine-color-green-0);--mantine-color-green-outline: var(--mantine-color-green-1);--mantine-color-green-outline-hover: rgba(215, 246, 220, 0.05);--mantine-color-lime-filled: var(--mantine-color-lime-5);--mantine-color-lime-filled-hover: var(--mantine-color-lime-6);--mantine-color-lime-light: rgba(192, 235, 117, 0.15);--mantine-color-lime-light-hover: rgba(192, 235, 117, 0.2);--mantine-color-lime-light-color: var(--mantine-color-lime-0);--mantine-color-lime-outline: var(--mantine-color-lime-1);--mantine-color-lime-outline-hover: rgba(233, 250, 200, 0.05);--mantine-color-yellow-filled: var(--mantine-color-yellow-5);--mantine-color-yellow-filled-hover: var(--mantine-color-yellow-6);--mantine-color-yellow-light: rgba(255, 201, 102, 0.15);--mantine-color-yellow-light-hover: rgba(255, 201, 102, 0.2);--mantine-color-yellow-light-color: var(--mantine-color-yellow-0);--mantine-color-yellow-outline: var(--mantine-color-yellow-1);--mantine-color-yellow-outline-hover: rgba(255, 238, 205, 0.05);--mantine-color-orange-filled: var(--mantine-color-orange-5);--mantine-color-orange-filled-hover: var(--mantine-color-orange-6);--mantine-color-orange-light: rgba(255, 192, 120, 0.15);--mantine-color-orange-light-hover: rgba(255, 192, 120, 0.2);--mantine-color-orange-light-color: var(--mantine-color-orange-0);--mantine-color-orange-outline: var(--mantine-color-orange-1);--mantine-color-orange-outline-hover: rgba(255, 232, 204, 0.05);--app-cta-gradient: linear-gradient(90deg, var(--mantine-color-blue-9) 0%, var(--mantine-color-cyan-7) 100%);--app-color-surface: #2e2e2e;}

:root[data-mantine-color-scheme="light"], :host([data-mantine-color-scheme="light"]){--mantine-color-anchor: var(--mantine-color-text);--mantine-color-dimmed: #495057;--mantine-color-red-light: rgba(224, 40, 41, 0.1);--mantine-color-red-light-hover: rgba(224, 40, 41, 0.12);--mantine-color-red-outline-hover: rgba(224, 40, 41, 0.05);--mantine-color-violet-light: rgba(176, 9, 255, 0.1);--mantine-color-violet-light-hover: rgba(176, 9, 255, 0.12);--mantine-color-violet-outline-hover: rgba(176, 9, 255, 0.05);--mantine-color-indigo-light: rgba(45, 42, 223, 0.1);--mantine-color-indigo-light-hover: rgba(45, 42, 223, 0.12);--mantine-color-indigo-outline-hover: rgba(45, 42, 223, 0.05);--mantine-color-cyan-light: rgba(0, 194, 255, 0.1);--mantine-color-cyan-light-hover: rgba(0, 194, 255, 0.12);--mantine-color-cyan-outline-hover: rgba(0, 194, 255, 0.05);--mantine-color-green-light: rgba(63, 204, 84, 0.1);--mantine-color-green-light-hover: rgba(63, 204, 84, 0.12);--mantine-color-green-outline-hover: rgba(63, 204, 84, 0.05);--mantine-color-yellow-light: rgba(255, 169, 15, 0.1);--mantine-color-yellow-light-hover: rgba(255, 169, 15, 0.12);--mantine-color-yellow-outline-hover: rgba(255, 169, 15, 0.05);--app-color-surface: #f1f3f5;--app-cta-gradient: linear-gradient(90deg, var(--mantine-color-blue-filled) 0%, var(--mantine-color-cyan-5) 100%);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><div style="position:absolute;top:0rem" class=""></div><div style="max-width:var(--container-size-xl);height:100%;min-height:0rem" class=""><style data-mantine-styles="inline">.__m__-_R_5ub_{--grid-gutter:0rem;}</style><div style="height:100%;min-height:0rem" class="m_410352e9 mantine-Grid-root __m__-_R_5ub_"><div class="m_dee7bd2f mantine-Grid-inner" style="height:100%"><style data-mantine-styles="inline">.__m__-_R_rdub_{--col-flex-grow:auto;--col-flex-basis:91.66666666666667%;--col-max-width:91.66666666666667%;}@media(min-width: 48em){.__m__-_R_rdub_{--col-flex-grow:auto;--col-flex-basis:83.33333333333334%;--col-max-width:83.33333333333334%;}}</style><div style="min-width:0rem;height:100%;min-height:0rem;display:flex" class="m_96bdd299 mantine-Grid-col __m__-_R_rdub_"><style data-mantine-styles="inline">.__m__-_R_6qrdub_{margin-top:0rem;padding-inline:var(--mantine-spacing-xs);width:100%;}@media(min-width: 48em){.__m__-_R_6qrdub_{margin-top:var(--mantine-spacing-xl);width:80%;}}@media(min-width: 62em){.__m__-_R_6qrdub_{padding-inline:var(--mantine-spacing-xl);}}</style><div style="margin-inline:auto;max-width:var(--mantine-breakpoint-xl)" class="__m__-_R_6qrdub_"><div style="color:var(--mantine-color-dimmed)" class="m_4451eb3a mantine-Center-root" data-inline="true"><div style="--ti-size:var(--ti-size-xs);--ti-bg:transparent;--ti-color:var(--mantine-color-indigo-light-color);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;margin-inline-end:calc(0.125rem * var(--mantine-scale));color:inherit" class="m_7341320d mantine-ThemeIcon-root" data-variant="transparent" data-size="xs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-lock "><path d="M5 13a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-6"></path><path d="M11 16a1 1 0 1 0 2 0a1 1 0 0 0 -2 0"></path><path d="M8 11v-4a4 4 0 1 1 8 0v4"></path></svg></div><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Programming fundamentals</p></div><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size);margin-bottom:var(--mantine-spacing-xl)" class="m_8a5d1357 mantine-Title-root" data-order="1">Theory: Human and computer languages</h1><script type="application/ld+json">{"@context":"https://schema.org","@type":"LearningResource","name":"Human and computer languages","inLanguage":"en","isPartOf":{"@type":"LearningResource","name":"Programming fundamentals"},"isAccessibleForFree":"False","hasPart":{"@type":"WebPageElement","isAccessibleForFree":"False","cssSelector":".paywalled"}}</script><div class=""><div style="--alert-color:var(--mantine-color-indigo-light-color);margin-bottom:var(--mantine-spacing-lg);font-size:var(--mantine-font-size-lg)" class="m_66836ed3 mantine-Alert-root" id="mantine-_R_remqrdub_" role="alert" aria-describedby="mantine-_R_remqrdub_-body" aria-labelledby="mantine-_R_remqrdub_-title"><div class="m_a5d60502 mantine-Alert-wrapper"><div class="m_667f2a6a mantine-Alert-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-rocket "><path d="M4 13a8 8 0 0 1 7 7a6 6 0 0 0 3 -5a9 9 0 0 0 6 -8a3 3 0 0 0 -3 -3a9 9 0 0 0 -8 6a6 6 0 0 0 -5 3"></path><path d="M7 14a6 6 0 0 0 -3 6a6 6 0 0 0 6 -3"></path><path d="M14 9a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></div><div class="m_667c2793 mantine-Alert-body"><div class="m_6a03f287 mantine-Alert-title"><span id="mantine-_R_remqrdub_-title" class="m_698f4f23 mantine-Alert-label">Full access to materials</span></div><div id="mantine-_R_remqrdub_-body" class="m_7fa78076 mantine-Alert-message"><div style="--group-gap:var(--mantine-spacing-md);--group-align:center;--group-justify:space-between;--group-wrap:wrap" class="m_4081bf90 mantine-Group-root"><p class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Sign up and get access to this and dozens of other courses</p><a style="--button-height:var(--button-height-xs);--button-padding-x:var(--button-padding-x-xs);--button-fz:var(--mantine-font-size-xs);--button-bg:linear-gradient(45deg, var(--mantine-color-blue-filled) 0%, var(--mantine-color-cyan-filled) 100%);--button-hover:linear-gradient(45deg, var(--mantine-color-blue-filled) 0%, var(--mantine-color-cyan-filled) 100%);--button-color:var(--mantine-color-white);--button-bd:none" class="mantine-focus-auto mantine-active m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root" data-variant="gradient" data-size="xs" href="/u/new"><span class="m_80f1301b mantine-Button-inner"><span class="m_811560b9 mantine-Button-label">Sign up</span></span></a></div></div></div></div></div><div style="margin-bottom:var(--mantine-spacing-xl)" class=""><div class="ratio ratio-16x9"><iframe width="100%" height="auto" src="//www.youtube.com/embed/7J545CYg8W4" loading="lazy" allowFullScreen="" title="video"></iframe></div></div><div class="paywalled m_d08caa0 mantine-Typography-root"><h2 id="heading-2-1">Video script</h2>
<p>We have called this system of pushing buttons a &#x27;language&#x27;. The lever seems to be a separate thing, it&#x27;s like a &quot;RUN&quot; command. We put in the code with the buttons, and then RUN the code with the lever.</p>
<p>You know how linguists discuss grammar, structure of words and stuff like that? They don&#x27;t really care about novels or songs or stories, they are very much interested in the language used in those novels, songs and stories. They care about the code. Most people are the other way around: we care about the story, about the meaning. Not only in books and movies, but in everyday life: when I&#x27;m telling my girlfriend to buy me another sketchbook because I&#x27;m doing awkward drawings for teaching, I care about the result, the goal, not about the grammar and the history of the word &quot;sketch&quot;.</p>
<p>We can think of language having two... things to think about or two aspects: grammar and meaning. Programming languages are similar to this, but since programming languages are way simpler than human languages, there isn&#x27;t much grammar, there is mostly syntax — word order and spelling. And for the meaning, computer scientists use a fancy word &quot;semantics&quot;.</p>
<p>Let&#x27;s compare Tota&#x27;s magic box language with some modern programming language.</p>
<p>This box has very hard syntax, it&#x27;s difficult to operate with X&#x27;s and O&#x27;s. On the other hand, this modern code looks... well, like English! This syntax is much easier to grasp, we can at least guess what each word means.</p>
<p>The set of rules that describe how symbols and words can be used is the syntax.</p>
<p>You will see that some programming languages have similar syntax, and some have exotic, unusual syntax.</p>
<p>The semantics or the meaning is harder to see because it&#x27;s not explicit. What is the meaning of this code? It&#x27;s fire flash, as we know. What&#x27;s the meaning of this code? Maybe, you guessed it: it prints a phrase backwards. The meaning, the end result of running the code is the semantics.</p>
<p>Generally, with modern programming languages, this relationship between code and its meaning can be used to judge the code. If you look at the code and quickly get an idea of what it means, then this code is good. If you look at the code and say &quot;what the hell is this?!&quot;, then it&#x27;s probably not too good. This brings us to an important point: code is for people. Computers don&#x27;t really care if code is easy to read or hard: for them all code is equally easy to understand.</p>
<p>You might say, well, I want to write apps and websites, so I care about the meaning — semantics, just like a writer cares about the story and not about the linguistics that much. So, why bother with syntax really? Well, programming language is the tool you use to tell your story, be it an app, a website or a robot. And the better you know your tool, the less you think about it, and more you can do. Just like a writer must be able to express ideas, with correct words and syntax for people to understand.</p>
<p>Luckily, programming languages have very simple syntax compared to human languages. So, don&#x27;t worry, even though we must learn syntax, it&#x27;s going to be pretty easy.</p>
<p>Well... is programming easy then? If computers are stupid and only do what we tell them to do, and programming language syntax is easy, then this whole thing must be pretty easy, right?</p>
<p>Well... no. Programming is not too easy, honestly. I mean, yeah, writing a high school essay is easy compared to writing &quot;War and Peace&quot;. And writing a PhD thesis on quantum tunnelling is on a different level completely. So, we should not generalize, really. All of those activities are writing, but comparing them and making arguments about &quot;writing&quot; in general is pretty useless. Programming can be easy or very hard — depends on who is doing what.</p>
<p>You will quickly realize that syntax is easy to learn, but it doesn&#x27;t really help you alone. It is necessary but not sufficient.</p>
<p>During the following lessons we will focus on the semantics, the meaning, and will explore some fascinating ideas that made it possible to create computers, internet, robots and mobile phones. We will learn syntax as we go.</p>
<p>One last thing we have to touch before we dive in is, well, what language to choose? There are so many, and this might seem like a critical moment. It is critical, but not because &quot;WE MUST MAKE THE PERFECT DECISION WHICH WILL AFFECT THE REST OF OUR LIVES&quot;, but because we must understand that choosing a programming language is like choosing a writing device, not like choosing a human language.</p>
<p>You can write a story with pen and paper, using a typewriter, a computer or a whiteboard. Yes, each writing device comes with different capabilities and limitations. And if you are trying to become a writer, it doesn&#x27;t relly matter if you learn to write on paper or on a typewriter. So, we want to learn programming, not just a programming language.</p>
<p>We have to choose a language that is good enough, simple enough, popular enough and powerful enough. As you grow professionally, you WILL switch languages, will use multiple languages and technologies at the same time, and it won&#x27;t be a big deal, just like switching from a typewriter to Microsoft Word is not a big deal.</p>
<p>We are choosing JavaScript as our first programming language and as the tool to learn programming. JavaScript programs are running pretty much all the time on your computer, because most of the websites, including the one you&#x27;re watching this video on, use JavaScript. It&#x27;s extremely popular, and it&#x27;s gettig more and more popular every year.</p>
<p>So, yeah... Let&#x27;s go ahead and start programming!</p>
<h2 id="heading-2-2">Synopsis</h2>
<h3 id="heading-3-3">Two aspects of languages</h3>
<ul>
<li>Programming language has two aspects:
<ul>
<li>syntax (coding rules of writing, spelling, word order)</li>
<li>semantics (idea, meaning)</li>
</ul>
</li>
<li>Some programming languages have similar syntax</li>
<li>Some programming languages have exotic, unusual syntax</li>
<li>Semantics is hard to see, it&#x27;s not explicit</li>
</ul>
<h3 id="heading-3-4">Syntax and semantics</h3>
<ul>
<li>In modern languages <em>good code</em> means easily-understood semantics</li>
<li>If it&#x27;s hard to understand what code does, than code is not too good</li>
<li>Syntax is easy to understand</li>
<li>Syntax is necessary to know but not sufficient</li>
</ul>
<h3 id="heading-3-5">Choosing a language</h3>
<ul>
<li>It is not <strong>very</strong> important which language to learn first</li>
<li>You will switch languages and use multiple languages and technologies at the same time. It&#x27;s not a big deal</li>
<li>We chose JavaScript, because it&#x27;s simple, very popular, and works almost everywhere</li>
<li>JavaScript is used to write websites, mobile apps, server software and much much more</li>
<li>This website uses JavaScript right now</li>
<li>JavaScript programs are running on your computer right now</li>
</ul>
<h2 id="heading-2-6">Additional materials</h2>
<ul>
<li><a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.youtube.com/watch?v=dNRDvLACg5Q" rel="noopener noreferrer" target="_blank">Turing Machines Explained - Computerphile</a></li>
<li><a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="http://www.pbs.org/newshour/bb/smart-todays-artificial-intelligence/" rel="noopener noreferrer" target="_blank">How smart is today’s artificial intelligence? / PBS Newshour</a></li>
<li><a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.youtube.com/watch?v=thrx3SBEpL8" rel="noopener noreferrer" target="_blank">Why Use Binary? - Computerphile</a></li>
</ul>
<!-- -->
</div></div></div></div><style data-mantine-styles="inline">.__m__-_R_1bdub_{--col-flex-grow:auto;--col-flex-basis:8.333333333333334%;--col-max-width:8.333333333333334%;}@media(min-width: 48em){.__m__-_R_1bdub_{--col-flex-grow:auto;--col-flex-basis:16.666666666666668%;--col-max-width:16.666666666666668%;}}</style><div style="min-width:0rem;height:100%;min-height:0rem" class="m_96bdd299 mantine-Grid-col __m__-_R_1bdub_"><div style="margin-inline:var(--mantine-spacing-xs)" class="mantine-visible-from-sm"><button style="--button-color:var(--mantine-color-white);margin-bottom:var(--mantine-spacing-lg);text-decoration:none" class="mantine-focus-auto m_849cf0da mantine-focus-auto m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" data-disabled="true" data-block="true" disabled="" type="button"><span class="m_80f1301b mantine-Button-inner"><span class="m_811560b9 mantine-Button-label"><span style="margin-inline-end:var(--mantine-spacing-xs)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Next</span>→</span></span></button><a style="padding-inline:0rem" class="mantine-focus-auto m_f0824112 mantine-NavLink-root m_87cf2631 mantine-UnstyledButton-root"><span class="m_690090b5 mantine-NavLink-section" data-position="left"><div style="--ti-size:var(--ti-size-sm);--ti-bg:transparent;--ti-color:var(--mantine-color-indigo-light-color);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;color:inherit" class="m_7341320d mantine-ThemeIcon-root" data-variant="transparent" data-size="sm"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-list-numbers "><path d="M11 6h9"></path><path d="M11 12h9"></path><path d="M12 18h8"></path><path d="M4 16a2 2 0 1 1 4 0c0 .591 -.5 1 -1 1.5l-3 2.5h4"></path><path d="M6 10v-6l-2 2"></path></svg></div></span><div class="m_f07af9d2 mantine-NavLink-body"><span class="m_1f6ac4c4 mantine-NavLink-label">Navigation</span><span class="m_57492dcc mantine-NavLink-description">Theory</span></div><span class="m_690090b5 mantine-NavLink-section" data-position="right"></span></a><div style="margin-block:var(--mantine-spacing-lg)" class="m_3eebeb36 mantine-Divider-root" data-orientation="horizontal" role="separator"></div><div style="margin-block:var(--mantine-spacing-lg)" class=""><div style="justify-content:space-between;margin-bottom:calc(0.1875rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-xs)" class="m_8bffd616 mantine-Flex-root __m__-_R_qimrbdub_"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Completed</p><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">0 / 16</p></div><div style="--progress-size:var(--progress-size-sm)" class="m_db6d6462 mantine-Progress-root" data-size="sm"><div style="--progress-section-size:0%;--progress-section-color:var(--mantine-color-gray-filled)" class="m_2242eb65 mantine-Progress-section" role="progressbar" aria-valuemax="100" aria-valuemin="0" aria-valuenow="0" aria-valuetext="0%"></div></div></div><button style="padding-inline:0rem" class="mantine-focus-auto m_f0824112 mantine-NavLink-root m_87cf2631 mantine-UnstyledButton-root" type="button"><span class="m_690090b5 mantine-NavLink-section" data-position="left"><div style="--ti-size:var(--ti-size-sm);--ti-bg:transparent;--ti-color:var(--mantine-color-indigo-light-color);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;color:inherit" class="m_7341320d mantine-ThemeIcon-root" data-variant="transparent" data-size="sm"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-message "><path d="M8 9h8"></path><path d="M8 13h6"></path><path d="M18 4a3 3 0 0 1 3 3v8a3 3 0 0 1 -3 3h-5l-5 3v-3h-2a3 3 0 0 1 -3 -3v-8a3 3 0 0 1 3 -3h12"></path></svg></div></span><div class="m_f07af9d2 mantine-NavLink-body"><span class="m_1f6ac4c4 mantine-NavLink-label">Discussions (archive)</span><span class="m_57492dcc mantine-NavLink-description"></span></div></button><div style="--toc-bg:var(--mantine-color-blue-light);--toc-color:var(--mantine-color-blue-light-color);--toc-size:var(--mantine-font-size-sm);--toc-radius:var(--mantine-radius-sm);margin-top:var(--mantine-spacing-xl)" class="m_bcaa9990 mantine-TableOfContents-root" data-variant="light" data-size="sm"></div></div><div class="mantine-hidden-from-sm"><div style="--stack-gap:0rem;--stack-align:stretch;--stack-justify:flex-start" class="m_6d731127 mantine-Stack-root"><button style="--button-color:var(--mantine-color-white);margin-bottom:var(--mantine-spacing-xs);padding:0rem;text-decoration:none" class="mantine-focus-auto m_849cf0da mantine-focus-auto m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" data-disabled="true" data-block="true" disabled="" type="button"><span class="m_80f1301b mantine-Button-inner"><span class="m_811560b9 mantine-Button-label">→</span></span></button><button style="--ai-size:var(--ai-size-sm);--ai-bg:transparent;--ai-hover:var(--mantine-color-indigo-light-hover);--ai-color:var(--mantine-color-indigo-light-color);--ai-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;padding-block:var(--mantine-spacing-lg);color:inherit;width:100%" class="mantine-focus-auto m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root" data-variant="subtle" data-size="sm" data-disabled="true" type="button" disabled=""><span class="m_8d3afb97 mantine-ActionIcon-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-list-numbers "><path d="M11 6h9"></path><path d="M11 12h9"></path><path d="M12 18h8"></path><path d="M4 16a2 2 0 1 1 4 0c0 .591 -.5 1 -1 1.5l-3 2.5h4"></path><path d="M6 10v-6l-2 2"></path></svg></span></button><button style="--ai-size:var(--ai-size-sm);--ai-bg:transparent;--ai-hover:var(--mantine-color-indigo-light-hover);--ai-color:var(--mantine-color-indigo-light-color);--ai-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;padding-block:var(--mantine-spacing-lg);color:inherit;width:100%" class="mantine-focus-auto mantine-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root" data-variant="subtle" data-size="sm" type="button"><span class="m_8d3afb97 mantine-ActionIcon-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-message "><path d="M8 9h8"></path><path d="M8 13h6"></path><path d="M18 4a3 3 0 0 1 3 3v8a3 3 0 0 1 -3 3h-5l-5 3v-3h-2a3 3 0 0 1 -3 -3v-8a3 3 0 0 1 3 -3h12"></path></svg></span></button></div></div></div></div></div></div></div>
</main>
<footer class="bg-dark fw-light text-light px-3 py-5">
<div class="row small">
<div class="col-12 col-sm-6 col-md-3">
<div class="h5 mb-3">About Hexlet</div>
<ul class="list-unstyled">
<li>
<a class="nav-link link-light py-1 ps-0" href="/pages/about">About us</a>
</li>
<li>
<span class="nav-link link-light py-1 ps-0 external-link" data-href="https://help.hexlet.io/category/4316" data-target="_blank" role="button">Help</span>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" target="_blank" rel="noopener noreferrer" href="/map">Site Map</a>
</li>
</ul>
</div>
<div class="col-12 col-sm-6 col-md-3">
<div class="h5 fw-normal mb-3">Learn</div>
<ul class="list-unstyled">
<li>
<a class="nav-link link-light py-1 ps-0" href="/courses_backend-development">Backend
</a></li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/courses_devops">DevOps
</a></li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/courses_frontend-development">Frontend
</a></li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/courses_python">Python
</a></li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/courses_testing">Testing
</a></li>
</ul>
</div>
<div class="col-12 col-sm-6 col-md-3">
<div class="h5"><span class="translation_missing" title="translation missing: en.layouts.footer_content.popular_courses_for_beginners">Popular Courses For Beginners</span></div>
<ul class="list-unstyled">
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/frontend">Frontend Developer</a>
</li>
</ul>
</div>
<div class="col-12 col-sm-6 col-md-3">
<div class="h5"><span class="translation_missing" title="translation missing: en.layouts.footer_content.popular_courses_for_advanced">Popular Courses For Advanced</span></div>
<ul class="list-unstyled">
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/web-development-free">Fundamentals of Web Development</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/js-react-development">React</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/css-animation">CSS Animation</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/http-api">HTTP API</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/layout-designer-positioning">Position CSS</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/cli-basics">Command line basics</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/git-basics-free">Git fundamentals</a>
</li>
</ul>
</div>
</div>
<hr>
<div class="row">
<div class="col-12 col-sm-4 col-md-2">
<div class="fs-4">
<ul class="list-unstyled d-flex">
<li class="me-3">
<a aria-label="Facebook" target="_blank" class="link-light" rel="noopener noreferrer nofollow" href="https://www.facebook.com/hexlethq"><span class="bi bi-facebook"></span>
</a></li>
<li class="me-3">
<a aria-label="Instagram" target="_blank" class="link-light" rel="noopener noreferrer nofollow" href="https://www.instagram.com/hello_hexlet/"><span class="bi bi-instagram"></span>
</a></li>
<li>
<a aria-label="Twitter" target="_blank" class="link-light" rel="noopener noreferrer nofollow" href="https://twitter.com/Hexlet_IO"><span class="bi bi-twitter-x"></span>
</a></li>
</ul>
</div>
<div class="mb-2 d-flex flex-column">
<a class="link-light text-decoration-none" rel="nofollow" href="mailto:support@hexlet.io">support@hexlet.io</a>
<a class="link-light text-decoration-none py-2" target="_blank" href="https://t.me/hexlet_help_bot">t.me/hexlet_help_bot</a>
</div>
<ul class="list-unstyled d-flex">
<li class="me-3">
<span class="link-light text-decoration-none opacity-50 x-font-size-18 opacity-100 external-link" rel="nofollow" data-href="https://hexlet.io/locale/switch?new_locale=en" data-target="_self" role="button"><span class="my-auto">EN</span>
</span></li>
<li class="me-3">
<span class="link-light text-decoration-none opacity-50 x-font-size-18 external-link" rel="nofollow" data-href="https://ru.hexlet.io/locale/switch?new_locale=ru" data-target="_self" role="button"><span class="my-auto">RU</span>
</span></li>
<li class="me-3">
<span class="link-light text-decoration-none opacity-50 x-font-size-18 external-link" rel="nofollow" data-href="https://kz.hexlet.io/locale/switch?new_locale=kz" data-target="_self" role="button"><span class="my-auto">KZ</span>
</span></li>
</ul>
</div>
<div class="col-12 col-sm-4 col-md-3">
<ul class="list-unstyled fs-4">
<li class="mb-3">
<a class="link-light text-decoration-none" href="tel:%2B7%20717%20272%2076%2070">+7 717 272 76 70</a>
<span class="d-block opacity-50 small">free call</span>
</li>
</ul>
</div>
<div class="col-12 col-sm-4 col-md-3">
<ul class="list-unstyled small">
<li>
<a class="nav-link link-light py-1 ps-0" href="/pages/legal">Legal</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/pages/offer"><span class="translation_missing" title="translation missing: en.layouts.footer_content.offer">Offer</span></a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/pages/contacts"><span class="translation_missing" title="translation missing: en.layouts.footer_content.contacts">Contacts</span></a>
</li>
</ul>
</div>
<div class="col-12 col-sm-12 col-md-4 small">
<div class="mb-2">
<div>TOO "Hexlet"</div>
<div>The Republic of Kazakhstan, Almaty</div>
<div>Auezova St., 14A</div>
<div>BIN 230340043714
</div>
</div>
</div>
</div>
</footer>


<div id="root-assistant-offcanvas"></div>
<script src="/vite/assets/assistant-CIOaBlj-.js" crossorigin="anonymous" type="module"></script><link rel="modulepreload" href="/vite/assets/chunk-DsPFFUou.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/init-0bhwJkNI.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/ErrorFallbackBlock-V3hfk_CP.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/MarkdownBlock-DejNWqwz.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/gon-B-jV56Ol.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/mantine-DOJkeu70.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/shiki-DZwEN4Zo.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/utils-ClTF9s_T.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/routes-mvvEXZQ8.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/lib-CJocDKTE.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/Box-DH3_MBnL.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/notifications.store-Cj65YiRw.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/useIsomorphicEffect-Csl7vw8x.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/lib-DeAQqnBE.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/axios-CN66HKVH.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/classnames-DQgTDFJJ.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/dayjs.min-Bfba02I7.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/debounce-BcxwEZ7X.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/prop-types-DGBR76ns.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/client-CYyKzrjQ.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/react-dom-SJZekO2j.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/useTranslation-bo78L81P.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/compiler-runtime-BhqaZ6vG.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/jsx-runtime-DlXMvSuQ.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/react-CFtMU8gd.js" as="script" crossorigin="anonymous">



<script defer src="https://static.cloudflareinsights.com/beacon.min.js/vcd15cbe7772f49c399c6a5babf22c1241717689176015" integrity="sha512-ZpsOmlRQV6y907TI0dKBHq9Md29nnaEIPlkf84rnaERnq6zvWvPUqr2ft8M1aS28oN72PdrCzSjY4U6VaAw1EQ==" data-cf-beacon='{"version":"2024.11.0","token":"d11015b65d11429ea6b4a2ef37dd7e0b","server_timing":{"name":{"cfCacheStatus":true,"cfEdge":true,"cfExtPri":true,"cfL4":true,"cfOrigin":true,"cfSpeedBrain":true},"location_startswith":null}}' crossorigin="anonymous"></script>
</body>
</html>