69 KiB

Raw Blame History Unescape Escape

Вступ до мов програмування та сучасних інструментів розробника

Привіт, майбутній розробнику! 👋 Можу я розповісти тобі щось, що досі викликає у мене мурашки? Ти збираєшся дізнатися, що програмування – це не просто про комп'ютери, це про справжні суперсили, які дозволяють втілювати найсміливіші ідеї в життя!

Ти знаєш той момент, коли користуєшся улюбленим додатком, і все працює ідеально? Коли натискаєш кнопку, і відбувається щось абсолютно магічне, що змушує тебе сказати: "Вау, як вони це зробили?" Ну, хтось, такий самий, як ти – ймовірно, сидячи у своєму улюбленому кафе о другій ночі з третьою чашкою еспресо – написав код, який створив цю магію. І ось що тебе вразить: до кінця цього уроку ти не тільки зрозумієш, як вони це зробили, але й захочеш спробувати сам!

Слухай, я цілком розумію, якщо програмування здається тобі зараз страшним. Коли я тільки починав, я чесно думав, що потрібно бути якимось математичним генієм або програмувати з п'яти років. Але ось що повністю змінило моє уявлення: програмування – це точно як навчитися розмовляти новою мовою. Ти починаєш з "привіт" і "дякую", потім переходиш до замовлення кави, і перш ніж ти це зрозумієш, ти ведеш глибокі філософські дискусії! Тільки в цьому випадку ти ведеш розмови з комп'ютерами, і чесно? Вони найтерплячіші співрозмовники, яких ти коли-небудь зустрічав – вони ніколи не судять твої помилки і завжди готові спробувати знову!

Сьогодні ми дослідимо неймовірні інструменти, які роблять сучасну веб-розробку не просто можливою, а дійсно захоплюючою. Я говорю про ті самі редактори, браузери та робочі процеси, які розробники Netflix, Spotify та твоєї улюбленої студії інді-додатків використовують щодня. І ось частина, яка змусить тебе танцювати від радості: більшість із цих професійних інструментів, які є стандартом у галузі, абсолютно безкоштовні!

Скетчнот від Tomomi Imura

Давайте дізнаємося, що ви вже знаєте!

Перш ніж ми перейдемо до цікавого, мені цікаво – що ви вже знаєте про цей світ програмування? І слухайте, якщо ви дивитеся на ці питання і думаєте: "Я буквально нічого не знаю про це," – це не просто нормально, це ідеально! Це означає, що ви саме там, де потрібно. Подумайте про цей тест як про розтяжку перед тренуванням – ми просто розігріваємо мозок!

Пройдіть тест перед уроком

Пригода, яку ми збираємося пережити разом

Окей, я щиро переповнений захопленням від того, що ми будемо досліджувати сьогодні! Серйозно, я хотів би побачити ваше обличчя, коли деякі з цих концепцій стануть зрозумілими. Ось неймовірна подорож, яку ми здійснимо разом:

Що таке програмування (і чому це найкрутіша річ у світі!) – Ми дізнаємося, як код буквально є невидимою магією, яка керує всім навколо вас, від будильника, який якось знає, що зараз понеділок, до алгоритму, який ідеально підбирає рекомендації на Netflix
Мови програмування та їх дивовижні особливості – Уявіть, що ви заходите на вечірку, де кожна людина має абсолютно різні суперсили та способи вирішення проблем. Ось так виглядає світ мов програмування, і вам сподобається знайомитися з ними!
Основні будівельні блоки, які створюють цифрову магію – Подумайте про них як про найкращий творчий набір LEGO. Як тільки ви зрозумієте, як ці частини взаємодіють, ви усвідомите, що можете створити буквально все, що тільки уявите
Професійні інструменти, які змушують вас відчувати себе чарівником – Я не перебільшую – ці інструменти дійсно змушують вас відчувати себе супергероєм, і найкраще? Це ті самі інструменти, які використовують професіонали!

💡 Ось що важливо: Навіть не думайте намагатися запам'ятати все сьогодні! Зараз я просто хочу, щоб ви відчули той іскристий захват від того, що можливо. Деталі запам'ятаються природно, коли ми будемо практикуватися разом – саме так відбувається справжнє навчання!

Ви можете пройти цей урок на Microsoft Learn!

То що ж таке програмування?

Гаразд, давайте розберемося з питанням на мільйон доларів: що ж таке програмування насправді?

Я розповім вам історію, яка повністю змінила моє уявлення про це. Минулого тижня я намагався пояснити мамі, як користуватися новим пультом від нашого смарт-телевізора. Я зловив себе на тому, що кажу щось на кшталт: "Натисни червону кнопку, але не велику червону кнопку, а маленьку червону кнопку зліва... ні, з іншого боку... добре, тепер тримай її дві секунди, не одну, не три..." Звучить знайомо? 😅

Це і є програмування! Це мистецтво давати надзвичайно детальні, покрокові інструкції чомусь дуже потужному, але такому, що потребує абсолютно точних вказівок. Тільки замість пояснень мамі (яка може запитати "яку червону кнопку?!"), ви пояснюєте комп'ютеру (який просто робить те, що ви сказали, навіть якщо це не зовсім те, що ви мали на увазі).

Ось що мене вразило, коли я вперше це зрозумів: комп'ютери насправді досить прості в основі. Вони буквально розуміють лише дві речі – 1 і 0, що, по суті, означає "так" і "ні" або "ввімкнено" і "вимкнено". І ось де це стає магічним – нам не потрібно говорити мовою 1 і 0, як у "Матриці". Тут на допомогу приходять мови програмування. Вони як найкращий перекладач у світі, який перетворює ваші звичайні людські думки на мову комп'ютера.

І ось що досі викликає у мене мурашки щоранку, коли я прокидаюся: буквально все цифрове у вашому житті почалося з когось, такого ж, як ви, ймовірно, сидячи у піжамі з чашкою кави, набираючи код на своєму ноутбуці. Той фільтр Instagram, який робить вас бездоганним? Хтось закодував це. Рекомендація, яка привела вас до вашої нової улюбленої пісні? Розробник створив цей алгоритм. Додаток, який допомагає вам розділити рахунок за вечерю з друзями? Так, хтось подумав: "Це дратує, я впевнений, що можу це виправити," і потім... вони це зробили!

Коли ви вчитеся програмувати, ви не просто освоюєте новий навик – ви стаєте частиною цієї неймовірної спільноти вирішувачів проблем, які проводять свої дні, думаючи: "А що, якщо я міг би створити щось, що зробить чийсь день трохи кращим?" Чесно, чи є щось крутіше за це?

✅ Полювання на цікавий факт: Ось щось дуже круте, що можна пошукати, коли у вас буде вільна хвилина – як ви думаєте, хто був першим програмістом у світі? Я дам вам підказку: це може бути не той, кого ви очікуєте! Історія цієї людини абсолютно захоплююча і показує, що програмування завжди було про творче вирішення проблем і нестандартне мислення.

Мови програмування – це як різні смаки магії

Окей, це може звучати дивно, але залишайтеся зі мною – мови програмування дуже схожі на різні стилі музики. Подумайте про це: у вас є джаз, який плавний і імпровізаційний, рок, який потужний і прямолінійний, класика, яка елегантна і структурована, і хіп-хоп, який творчий і виразний. Кожен стиль має свою атмосферу, свою спільноту пристрасних фанатів, і кожен ідеально підходить для різних настроїв і випадків.

Мови програмування працюють точно так само! Ви не будете використовувати ту саму мову для створення веселих мобільних ігор, яку використовуєте для обробки величезних обсягів кліматичних даних, так само як ви не будете грати дез-метал на заняттях йогою (ну, принаймні, на більшості занять йогою! 😄).

Але ось що мене абсолютно вражає кожного разу, коли я про це думаю: ці мови – це як мати найтерплячішого, найрозумнішого перекладача у світі, який сидить поруч із вами. Ви можете висловлювати свої ідеї так, як це природно для вашого людського мозку, а вони беруть на себе всю неймовірно складну роботу з перекладу цього на мову 1 і 0, яку комп'ютери дійсно розуміють. Це як мати друга, який ідеально володіє і "людською творчістю," і "комп'ютерною логікою" – і він ніколи не втомлюється, ніколи не потребує перерв на каву і ніколи не судить вас за те, що ви задаєте одне й те ж питання двічі!

Мова	Найкраще для	Чому популярна
JavaScript	Веб-розробка, користувацькі інтерфейси	Працює в браузерах і забезпечує інтерактивність веб-сайтів
Python	Наука про дані, автоматизація, штучний інтелект	Легка для читання і навчання, потужні бібліотеки
Java	Корпоративні додатки, Android-додатки	Незалежна від платформи, надійна для великих систем
C#	Додатки для Windows, розробка ігор	Сильна підтримка екосистеми Microsoft
Go	Хмарні сервіси, бекенд-системи	Швидка, проста, створена для сучасних обчислень

Мови високого рівня проти низького рівня

Окей, це була концепція, яка буквально перевернула моє уявлення, коли я тільки починав вчитися, тому я поділюся аналогією, яка нарешті допомогла мені зрозуміти це – і я дуже сподіваюся, що вона допоможе вам теж!

Уявіть, що ви відвідуєте країну, де не говорите мовою, і вам терміново потрібно знайти найближчий туалет (ми всі були там, правда? 😅):

Програмування низького рівня – це як вивчити місцевий діалект настільки добре, що ви можете спілкуватися з бабусею, яка продає фрукти на розі, використовуючи культурні посилання, місцевий сленг і внутрішні жарти, які розуміє тільки той, хто виріс там. Дуже вражаюче і неймовірно ефективно... якщо ви випадково володієте мовою! Але досить складно, коли ви просто намагаєтеся знайти туалет.
Програмування високого рівня – це як мати того дивовижного місцевого друга, який просто розуміє вас. Ви можете сказати "Мені дуже потрібно знайти туалет" звичайною англійською, і вони беруть на себе весь культурний переклад і дають вам інструкції так, щоб це мало сенс для вашого немісцевого мозку.

У термінах програмування:

Мови низького рівня (як Assembly або C) дозволяють вам вести надзвичайно детальні розмови з апаратним забезпеченням комп'ютера, але вам потрібно думати як машина, що... ну, скажімо так, це досить великий ментальний зсув!
Мови високого рівня (як JavaScript, Python або C#) дозволяють вам думати як людина, поки вони беруть на себе всю машинну мову за лаштунками. Крім того, вони мають неймовірно привітні спільноти, повні людей, які пам'ятають, як це було бути новачком, і щиро хочуть допомогти!

Вгадайте, з яких я запропоную вам почати? 😉 Мови високого рівня – це як навчальні колеса, які ви ніколи не захочете знімати, тому що вони роблять весь досвід набагато приємнішим!

Дозвольте показати, чому мови високого рівня набагато дружелюбніші

Гаразд, я збираюся показати вам щось, що ідеально демонструє, чому я закохався в мови високого рівня, але спочатку – мені потрібно, щоб ви пообіцяли мені щось. Коли ви побачите перший приклад коду, не панікуйте! Він має виглядати страшно. Це саме те, що я хочу показати!

Ми подивимося на одну й ту ж задачу, написану в двох абсолютно різних стилях. Обидва створюють те, що називається послідовністю Фібоначчі – це прекрасний математичний шаблон, де кожне число є сумою двох попередніх: 0, 1, 1, 2, 3, 5, 8, 13... (Цікавий факт: ви знайдете цей шаблон буквально всюди в природі – спіралі насіння соняшника, візерунки шишок, навіть спосіб формування галактик!)

Готові побачити різницю? Поїхали!

Мова високого рівня (JavaScript) – дружня для людини:

// Step 1: Basic Fibonacci setup
const fibonacciCount = 10;
let current = 0;
let next = 1;

console.log('Fibonacci sequence:');

Ось що робить цей код:

Оголошуємо константу для визначення кількості чисел Фібоначчі, які ми хочемо згенерувати
Ініціалізуємо дві змінні для відстеження поточного і наступного числа в послідовності
Встановлюємо початкові значення (0 і 1), які визначають шаблон Фібоначчі
Виводимо заголовок для ідентифікації нашого результату

// Step 2: Generate the sequence with a loop
for (let i = 0; i < fibonacciCount; i++) {
  console.log(`Position ${i + 1}: ${current}`);
  
  // Calculate next number in sequence
  const sum = current + next;
  current = next;
  next = sum;
}

Розбираємо, що тут відбувається:

Цикл через кожну позицію в нашій послідовності за допомогою for циклу
Виводимо кожне число з його позицією за допомогою форматування шаблонних літералів
Розраховуємо наступне число Фібоначчі, додаючи поточне і наступне значення
Оновлюємо наші змінні для переходу до наступної ітерації

// Step 3: Modern functional approach
const generateFibonacci = (count) => {
  const sequence = [0, 1];
  
  for (let i = 2; i < count; i++) {
    sequence[i] = sequence[i - 1] + sequence[i - 2];
  }
  
  return sequence;
};

// Usage example
const fibSequence = generateFibonacci(10);
console.log(fibSequence);

У наведеному вище ми:

Створили багаторазову функцію за допомогою сучасного синтаксису стрілкових функцій
Побудували масив для збереження повної послідовності, а не вив ✅ Про послідовність Фібоначчі: Цей неймовірно красивий числовий ряд (де кожне число дорівнює сумі двох попередніх: 0, 1, 1, 2, 3, 5, 8...) буквально з'являється всюди в природі! Ви знайдете його в спіралях соняшників, візерунках шишок, вигинах раковин наутилуса і навіть у тому, як ростуть гілки дерев. Це просто вражає, як математика і код можуть допомогти нам зрозуміти і відтворити візерунки, які природа використовує для створення краси!

Основи, які створюють магію

Добре, тепер, коли ви побачили, як виглядають мови програмування в дії, давайте розберемо фундаментальні частини, які складають буквально кожну програму, коли-небудь написану. Думайте про них як про основні інгредієнти вашого улюбленого рецепту – як тільки ви зрозумієте, що кожен з них робить, ви зможете читати і писати код практично будь-якою мовою!

Це трохи схоже на вивчення граматики програмування. Пам'ятаєте, як у школі ви вивчали іменники, дієслова і як складати речення? У програмуванні є своя версія граматики, і чесно кажучи, вона набагато логічніша і поблажливіша, ніж граматика англійської мови! 😄

Інструкції: Покрокові вказівки

Почнемо з інструкцій – це як окремі речення в розмові з вашим комп'ютером. Кожна інструкція говорить комп'ютеру зробити щось конкретне, як давати вказівки: "Поверни ліворуч тут", "Зупинись на червоному світлі", "Припаркуйся на тому місці".

Що мені подобається в інструкціях, так це те, наскільки вони зазвичай зрозумілі. Ось приклад:

// Basic statements that perform single actions
const userName = "Alex";                    
console.log("Hello, world!");              
const sum = 5 + 3;

Ось що робить цей код:

Оголошує константну змінну для збереження імені користувача
Відображає привітальне повідомлення в консольному виводі
Обчислює і зберігає результат математичної операції

// Statements that interact with web pages
document.title = "My Awesome Website";      
document.body.style.backgroundColor = "lightblue";

Покроково, ось що відбувається:

Змінює заголовок вебсторінки, який з'являється на вкладці браузера
Змінює колір фону всього тіла сторінки

Змінні: Система пам'яті вашої програми

Добре, змінні – це, чесно кажучи, одна з моїх улюблених концепцій для викладання, тому що вони дуже схожі на те, що ви вже використовуєте щодня!

Подумайте про список контактів у вашому телефоні. Ви не запам'ятовуєте номери всіх – замість цього ви зберігаєте "Мама", "Кращий друг" або "Піцерія, яка доставляє до 2 ночі" і дозволяєте телефону запам'ятовувати фактичні номери. Змінні працюють точно так само! Вони як мітки на контейнерах, де ваша програма може зберігати інформацію і отримувати її пізніше, використовуючи назву, яка має сенс.

Ось що дійсно круто: змінні можуть змінюватися під час виконання програми (звідси назва "змінна" – бачите, що вони зробили?). Так само, як ви можете оновити контакт піцерії, коли знайдете ще кращу, змінні можуть оновлюватися, коли ваша програма отримує нову інформацію або змінюються обставини!

Дозвольте показати вам, наскільки це просто і красиво:

// Step 1: Creating basic variables
const siteName = "Weather Dashboard";        
let currentWeather = "sunny";               
let temperature = 75;                       
let isRaining = false;

Розуміння цих концепцій:

Зберігайте незмінні значення в змінних const (наприклад, назва сайту)
Використовуйте let для значень, які можуть змінюватися протягом програми
Призначайте різні типи даних: рядки (текст), числа і булеві значення (true/false)
Вибирайте описові назви, які пояснюють, що містить кожна змінна

// Step 2: Working with objects to group related data
const weatherData = {                       
  location: "San Francisco",
  humidity: 65,
  windSpeed: 12
};

У наведеному вище прикладі ми:

Створили об'єкт для групування пов'язаної інформації про погоду
Організували кілька частин даних під одним ім'ям змінної
Використали пари ключ-значення для чіткого позначення кожного елемента інформації

// Step 3: Using and updating variables
console.log(`${siteName}: Today is ${currentWeather} and ${temperature}°F`);
console.log(`Wind speed: ${weatherData.windSpeed} mph`);

// Updating changeable variables
currentWeather = "cloudy";                  
temperature = 68;

Давайте розберемо кожну частину:

Відображаємо інформацію за допомогою шаблонних літералів із синтаксисом ${}
Доступ до властивостей об'єкта за допомогою точкової нотації (weatherData.windSpeed)
Оновлюємо змінні, оголошені за допомогою let, щоб відобразити змінні умови
Комбінуємо кілька змінних для створення змістовних повідомлень

// Step 4: Modern destructuring for cleaner code
const { location, humidity } = weatherData; 
console.log(`${location} humidity: ${humidity}%`);

Що потрібно знати:

Витягуйте конкретні властивості з об'єктів за допомогою деструктуризації
Створюйте нові змінні автоматично з тими ж іменами, що й ключі об'єкта
Спрощуйте код, уникаючи повторюваної точкової нотації

Управління потоком: Навчіть вашу програму думати

Добре, тут програмування стає абсолютно вражаючим! Управління потоком – це, по суті, навчання вашої програми приймати розумні рішення, точно так само, як ви робите це щодня, навіть не замислюючись.

Уявіть собі: сьогодні вранці ви, ймовірно, пройшли через щось на кшталт "Якщо йде дощ, я візьму парасольку. Якщо холодно, я одягну куртку. Якщо я запізнююся, я пропущу сніданок і візьму каву по дорозі." Ваш мозок природно слідує цій логіці "якщо-то" десятки разів щодня!

Це те, що робить програми розумними і живими, а не просто слідують якомусь нудному, передбачуваному сценарію. Вони можуть фактично дивитися на ситуацію, оцінювати, що відбувається, і відповідати відповідно. Це як дати вашій програмі мозок, який може адаптуватися і приймати рішення!

Хочете побачити, як це працює? Дозвольте показати вам:

// Step 1: Basic conditional logic
const userAge = 17;

if (userAge >= 18) {
  console.log("You can vote!");
} else {
  const yearsToWait = 18 - userAge;
  console.log(`You'll be able to vote in ${yearsToWait} year(s).`);
}

Ось що робить цей код:

Перевіряє, чи відповідає вік користувача вимогам для голосування
Виконує різні блоки коду залежно від результату умови
Обчислює і відображає, скільки часу залишилося до права голосу, якщо менше 18 років
Надає конкретний, корисний зворотний зв'язок для кожного сценарію

// Step 2: Multiple conditions with logical operators
const userAge = 17;
const hasPermission = true;

if (userAge >= 18 && hasPermission) {
  console.log("Access granted: You can enter the venue.");
} else if (userAge >= 16) {
  console.log("You need parent permission to enter.");
} else {
  console.log("Sorry, you must be at least 16 years old.");
}

Розбираємо, що тут відбувається:

Комбінуємо кілька умов за допомогою оператора && (і)
Створюємо ієрархію умов за допомогою else if для кількох сценаріїв
Обробляємо всі можливі випадки за допомогою остаточного оператора else
Надаємо чіткий, дієвий зворотний зв'язок для кожної різної ситуації

// Step 3: Concise conditional with ternary operator
const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet";
console.log(`Status: ${votingStatus}`);

Що потрібно пам'ятати:

Використовуйте тернарний оператор (? :) для простих умов із двома варіантами
Пишіть умову спочатку, потім ?, потім результат для true, потім :, потім результат для false
Застосовуйте цей шаблон, коли потрібно призначити значення на основі умов

// Step 4: Handling multiple specific cases
const dayOfWeek = "Tuesday";

switch (dayOfWeek) {
  case "Monday":
  case "Tuesday":
  case "Wednesday":
  case "Thursday":
  case "Friday":
    console.log("It's a weekday - time to work!");
    break;
  case "Saturday":
  case "Sunday":
    console.log("It's the weekend - time to relax!");
    break;
  default:
    console.log("Invalid day of the week");
}

Цей код виконує наступне:

Порівнює значення змінної з кількома конкретними випадками
Групує схожі випадки разом (робочі дні проти вихідних)
Виконує відповідний блок коду, коли знайдено збіг
Включає випадок default для обробки несподіваних значень
Використовує оператори break, щоб запобігти виконанню наступного випадку

💡 Аналогія з реальним світом: Думайте про управління потоком як про GPS, який дає вам найтерплячіші вказівки. Він може сказати: "Якщо на Main Street затори, скористайтеся шосе. Якщо на шосе ремонт, спробуйте мальовничий маршрут." Програми використовують точно таку ж умовну логіку, щоб розумно реагувати на різні ситуації і завжди надавати користувачам найкращий можливий досвід.

✅ Що буде далі: Ми будемо мати абсолютний вибух, заглиблюючись у ці концепції, продовжуючи цю неймовірну подорож разом! Зараз просто зосередьтеся на тому, щоб відчути захоплення від усіх дивовижних можливостей, які чекають попереду. Конкретні навички та техніки запам'ятаються природно, коли ми будемо практикуватися разом – обіцяю, це буде набагато веселіше, ніж ви могли очікувати!

Інструменти для роботи

Добре, це чесно те, що мене так захоплює, що я ледве можу стриматися! 🚀 Ми збираємося поговорити про неймовірні інструменти, які змусять вас відчути, що вам щойно дали ключі від цифрового космічного корабля.

Ви знаєте, як у шеф-кухаря є ті ідеально збалансовані ножі, які здаються продовженням його рук? Або як у музиканта є та одна гітара, яка ніби співає, щойно він торкається її? Ну, у розробників є своя версія цих магічних інструментів, і ось що вас абсолютно вразить – більшість із них абсолютно безкоштовні!

Я буквально підстрибую на своєму стільці, думаючи про те, щоб поділитися ними з вами, тому що вони повністю революціонізували те, як ми створюємо програмне забезпечення. Ми говоримо про асистентів програмування на основі штучного інтелекту, які можуть допомогти написати ваш код (я не жартую!), хмарні середовища, де ви можете створювати цілі додатки буквально з будь-якого місця з Wi-Fi, і інструменти для налагодження, настільки складні, що вони схожі на рентгенівське бачення для ваших програм.

І ось частина, яка досі викликає у мене мурашки: це не "інструменти для початківців", які ви переростете. Це ті самі професійні інструменти, які розробники в Google, Netflix і тому інді-студії додатків, яку ви любите, використовують прямо зараз. Ви будете відчувати себе справжнім професіоналом, використовуючи їх!

Редактори коду та IDE: Ваші нові цифрові найкращі друзі

Давайте поговоримо про редактори коду – вони серйозно стануть вашими новими улюбленими місцями для проведення часу! Думайте про них як про ваш особистий кодовий притулок, де ви будете проводити більшу частину часу, створюючи і вдосконалюючи свої цифрові творіння.

Але ось що абсолютно магічне в сучасних редакторах: вони не просто модні текстові редактори. Вони як найгеніальніший, найпідтримуючий наставник програмування, який сидить поруч із вами 24/7. Вони ловлять ваші помилки, перш ніж ви навіть їх помітите, пропонують покращення, які змушують вас виглядати як геній, допомагають зрозуміти, що робить кожен шматок коду, і деякі з них навіть можуть передбачити, що ви збираєтеся написати, і запропонувати завершити ваші думки!

Я пам'ятаю, коли вперше відкрив автозаповнення – я буквально відчував, що живу в майбутньому. Ви починаєте щось писати, і ваш редактор каже: "Гей, ви думали про цю функцію, яка робить саме те, що вам потрібно?" Це як мати читача думок як кодового друга!

Що робить ці редактори такими неймовірними?

Сучасні редактори коду пропонують вражаючий набір функцій, призначених для підвищення вашої продуктивності:

Функція	Що вона робить	Чому це допомагає
Підсвічування синтаксису	Розфарбовує різні частини вашого коду	Робить код легшим для читання і пошуку помилок
Автозаповнення	Пропонує код під час введення	Прискорює написання коду і зменшує помилки
Інструменти налагодження	Допомагають знайти і виправити помилки	Економлять години часу на пошук проблем
Розширення	Додають спеціалізовані функції	Налаштовують ваш редактор для будь-якої технології
AI Асистенти	Пропонують код і пояснення	Прискорюють навчання і продуктивність

🎥 Відеоресурс: Хочете побачити ці інструменти в дії? Перегляньте відео про інструменти для роботи для всебічного огляду.

Веб-браузери: Ваш секретний лабораторний інструмент для розробки

Інструменти командного рядка: ваш шлях до суперсил розробника

Добре, давайте будемо чесними щодо командного рядка, тому що я хочу, щоб ви почули це від когось, хто дійсно розуміє. Коли я вперше побачив його – просто цей страшний чорний екран з миготливим текстом – я буквально подумав: "Ні, абсолютно ні! Це виглядає як щось із хакерського фільму 1980-х, і я точно недостатньо розумний для цього!" 😅

Але ось що я хотів би, щоб хтось сказав мені тоді, і що я кажу вам зараз: командний рядок не страшний – це насправді як прямий діалог з вашим комп'ютером. Уявіть це як різницю між замовленням їжі через модний додаток із картинками та меню (що зручно і просто) і заходом у ваш улюблений місцевий ресторан, де шеф-кухар знає, що вам подобається, і може приготувати щось ідеальне, просто почувши "здивуйте мене чимось чудовим".

Командний рядок – це місце, де розробники відчувають себе справжніми чарівниками. Ви вводите кілька, здається, магічних слів (добре, це просто команди, але вони здаються магічними!), натискаєте Enter, і БАЦ – ви створили цілі структури проектів, встановили потужні інструменти з усього світу або розгорнули ваш додаток в інтернеті для мільйонів людей. Як тільки ви відчуєте цю силу, це стає досить захоплюючим!

Чому командний рядок стане вашим улюбленим інструментом:

Хоча графічні інтерфейси чудово підходять для багатьох завдань, командний рядок перевершує в автоматизації, точності та швидкості. Багато інструментів для розробки працюють переважно через інтерфейси командного рядка, і навчання їх ефективному використанню може значно підвищити вашу продуктивність.

# Step 1: Create and navigate to project directory
mkdir my-awesome-website
cd my-awesome-website

Що робить цей код:

Створює нову директорію під назвою "my-awesome-website" для вашого проекту
Переходить у новостворену директорію, щоб почати роботу

# Step 2: Initialize project with package.json
npm init -y

# Install modern development tools
npm install --save-dev vite prettier eslint
npm install --save-dev @eslint/js

Крок за кроком, що відбувається:

Ініціалізує новий проект Node.js з налаштуваннями за замовчуванням за допомогою npm init -y
Встановлює Vite як сучасний інструмент для швидкої розробки та збірки для продакшн
Додає Prettier для автоматичного форматування коду та ESLint для перевірки якості коду
Використовує прапорець --save-dev, щоб позначити ці залежності як тільки для розробки

# Step 3: Create project structure and files
mkdir src assets
echo '<!DOCTYPE html><html><head><title>My Site</title></head><body><h1>Hello World</h1></body></html>' > index.html

# Start development server
npx vite

У наведеному вище ми:

Організували наш проект, створивши окремі папки для вихідного коду та ресурсів
Згенерували базовий HTML-файл із правильною структурою документа
Запустили сервер розробки Vite для автоматичного перезавантаження та гарячої заміни модулів

Основні інструменти командного рядка для веброзробки

Інструмент	Призначення	Чому він вам потрібен
Git	Контроль версій	Відстеження змін, співпраця з іншими, резервне копіювання роботи
Node.js & npm	JavaScript runtime та управління пакетами	Запуск JavaScript поза браузерами, встановлення сучасних інструментів розробки
Vite	Інструмент збірки та сервер розробки	Надшвидка розробка з гарячою заміною модулів
ESLint	Якість коду	Автоматичне виявлення та виправлення проблем у вашому JavaScript
Prettier	Форматування коду	Підтримка коду уніфікованим і читабельним

Варіанти для різних платформ

Windows:

Windows Terminal - Сучасний, багатофункціональний термінал
PowerShell 💻 - Потужне середовище для скриптів
Command Prompt 💻 - Традиційний командний рядок Windows

macOS:

Terminal 💻 - Вбудований термінал
iTerm2 - Покращений термінал з розширеними функціями

Linux:

Bash 💻 - Стандартна оболонка Linux
KDE Konsole - Розширений емулятор терміналу

💻 = Попередньо встановлено в операційній системі

🎯 Шлях навчання: Почніть з базових команд, таких як cd (зміна директорії), ls або dir (список файлів) і mkdir (створення папки). Практикуйте сучасні команди робочого процесу, такі як npm install, git status і code . (відкриває поточну директорію у VS Code). З часом ви природно освоїте більш складні команди та техніки автоматизації.

Документація: ваш завжди доступний наставник

Добре, дозвольте мені поділитися маленьким секретом, який змусить вас почуватися набагато краще як новачка: навіть найдосвідченіші розробники витрачають величезну частину свого часу на читання документації. І це не тому, що вони не знають, що роблять – це насправді ознака мудрості!

Уявіть документацію як доступ до найтерплячіших, найзнаючих вчителів у світі, які доступні 24/7. Застрягли на проблемі о 2 годині ночі? Документація тут із теплим віртуальним обіймом і саме тією відповіддю, яка вам потрібна. Хочете дізнатися про якусь круту нову функцію, про яку всі говорять? Документація вас підтримує з покроковими прикладами. Прагнете зрозуміти, чому щось працює саме так? Ви здогадалися – документація готова пояснити це так, що нарешті стане зрозуміло!

Ось що повністю змінило мою перспективу: світ веброзробки рухається неймовірно швидко, і ніхто (я маю на увазі абсолютно ніхто!) не запам'ятовує все. Я бачив, як старші розробники з 15+ роками досвіду шукають базовий синтаксис, і знаєте що? Це не соромно – це розумно! Справа не в ідеальній пам'яті, а в тому, щоб знати, де швидко знайти надійні відповіді і як їх застосувати.

Ось де відбувається справжня магія:

Професійні розробники витрачають значну частину свого часу на читання документації – не тому, що вони не знають, що роблять, а тому, що ландшафт веброзробки розвивається так швидко, що залишатися актуальним вимагає постійного навчання. Хороша документація допомагає зрозуміти не лише як використовувати щось, але й чому та коли це використовувати.

Основні ресурси документації

Mozilla Developer Network (MDN)

Золотий стандарт документації з вебтехнологій
Комплексні посібники з HTML, CSS та JavaScript
Містить інформацію про сумісність браузерів
Пропонує практичні приклади та інтерактивні демо

Web.dev (від Google)

Найкращі практики сучасної веброзробки
Посібники з оптимізації продуктивності
Принципи доступності та інклюзивного дизайну
Кейси з реальних проектів

Microsoft Developer Documentation

Ресурси для розробки в браузері Edge
Посібники з прогресивних вебдодатків
Інсайти для кросплатформної розробки

Frontend Masters Learning Paths

Структуровані навчальні програми
Відеокурси від експертів галузі
Практичні вправи з програмування

📚 Стратегія навчання: Не намагайтеся запам'ятати документацію – натомість навчіться ефективно її використовувати. Додайте в закладки часто використовувані посилання та практикуйте пошук конкретної інформації.

✅ Їжа для роздумів: Ось щось цікаве для роздумів – як ви думаєте, чим інструменти для створення вебсайтів (розробка) можуть відрізнятися від інструментів для дизайну їхнього вигляду (дизайн)? Це як різниця між архітектором, який проектує красивий будинок, і підрядником, який його будує. Обидва важливі, але потребують різних наборів інструментів! Такий підхід допоможе вам побачити загальну картину того, як створюються вебсайти.

Виклик агента GitHub Copilot 🚀

Використовуйте режим Agent, щоб виконати наступний виклик:

Опис: Дослідіть функції сучасного редактора коду або IDE та продемонструйте, як він може покращити ваш робочий процес як веброзробника.

Завдання: Виберіть редактор коду або IDE (наприклад, Visual Studio Code, WebStorm або хмарний IDE). Перелічіть три функції або розширення, які допомагають ефективніше писати, налагоджувати або підтримувати код. Для кожної функції надайте коротке пояснення, як вона покращує ваш робочий процес.

🚀 Виклик

Ну що, детективе, готовий до першої справи?

Тепер, коли у вас є цей чудовий фундамент, я маю для вас пригоду, яка допоможе вам побачити, наскільки різноманітним і захоплюючим є світ програмування. І слухайте – це не про написання коду зараз, тому ніякого тиску! Уявіть себе детективом мов програмування на своєму першому захоплюючому завданні!

Ваша місія, якщо ви вирішите її прийняти:

Станьте дослідником мов: Виберіть три мови програмування з абсолютно різних сфер – можливо, одну для створення вебсайтів, одну для мобільних додатків і одну для аналізу даних для науковців. Знайдіть приклади виконання одного простого завдання на кожній мові. Обіцяю, ви будете вражені, наскільки вони можуть відрізнятися, виконуючи одне й те ж завдання!
Розкрийте їхні історії походження: Що робить кожну мову особливою? Ось цікавий факт – кожна мова програмування була створена тому, що хтось подумав: "Знаєте що? Має бути кращий спосіб вирішити цю конкретну проблему." Чи можете ви з'ясувати, які це були проблеми? Деякі з цих історій дійсно захоплюючі!
Познайомтеся з спільнотами: Перевірте, наскільки привітною та пристрасною є спільнота кожної мови. Деякі мають мільйони розробників, які діляться знаннями та допомагають один одному, інші – менші, але надзвичайно згуртовані та підтримуючі. Вам сподобається бачити різні "особистості" цих спільнот!
Слухайте свої відчуття: Яка мова здається вам найбільш доступною зараз? Не хвилюйтеся про "ідеальний" вибір – просто слухайте свої інстинкти! Тут немає неправильних відповідей, і ви завжди можете досліджувати інші пізніше.

Бонусне завдання детектива: Дізнайтеся, які великі вебсайти або додатки створені на кожній мові. Гарантую, ви будете шоковані, дізнавшись, що живить Instagram, Netflix або ту мобільну гру, від якої ви не можете відірватися!

💡 Пам'ятайте: Ви не намагаєтесь стати експертом у будь-якій з цих мов сьогодні. Ви просто знайомитеся з "районом", перш ніж вирішити, де хочете оселитися. Не поспішайте, отримуйте задоволення від процесу, і нехай ваша цікавість веде вас!

Давайте відсвяткуємо те, що ви відкрили!

Ого, ви засвоїли стільки неймовірної інформації сьогодні! Я щиро радий бачити, скільки з цього захоплюючого шляху залишилося з вами. І пам'ятайте – це не тест, де потрібно все зробити ідеально. Це більше як святкування всього класного, що ви дізналися про цей захоплюючий світ, у який ви збираєтеся зануритися!

Пройдіть тест після уроку

Огляд і самостійне навчання

Не поспішайте досліджувати і отримуйте задоволення від процесу!

Сьогодні ви охопили багато тем, і це те, чим можна пишатися! Тепер настає найцікавіша частина – дослідження тем, які викликали вашу цікавість. Пам'ятайте, це не домашнє завдання – це пригода!

Зануртеся глибше в те, що вас захоплює:

Практикуйтеся з мовами програмування:

Відвідайте офіційні вебсайти 2-3 мов, які вас зацікавили. Кожна має свою особливу "особистість" і історію!
Спробуйте онлайн-майданчики для кодування, такі як CodePen, JSFiddle або [Re
Перегляньте відео про програмування для початківців на YouTube. Є багато чудових авторів, які пам'ятають, як це — починати з нуля.
Розгляньте можливість приєднатися до місцевих зустрічей або онлайн-спільнот. Повірте, розробники люблять допомагати новачкам!

🎯 Слухайте, ось що я хочу, щоб ви запам'ятали: Від вас не очікують, що ви станете майстром програмування за одну ніч! Зараз ви просто знайомитеся з цим дивовижним новим світом, частиною якого ви скоро станете. Не поспішайте, насолоджуйтеся подорожжю і пам'ятайте – кожен розробник, яким ви захоплюєтеся, колись сидів точно там, де ви зараз, відчуваючи захоплення і, можливо, трохи розгубленості. Це абсолютно нормально, і це означає, що ви все робите правильно!

Завдання

Читання документації

💡 Невеликий поштовх для вашого завдання: Мені дуже хотілося б побачити, як ви досліджуєте інструменти, які ми ще не розглядали! Пропустіть редактори, браузери та інструменти командного рядка, про які ми вже говорили – існує цілий неймовірний всесвіт дивовижних інструментів для розробки, які тільки чекають, щоб їх відкрили. Шукайте ті, які активно підтримуються і мають живі, корисні спільноти (зазвичай вони мають найкращі навчальні матеріали і найбільш підтримуючих людей, коли ви неминуче застрягнете і вам знадобиться дружня допомога).

Відмова від відповідальності:
Цей документ був перекладений за допомогою сервісу автоматичного перекладу Co-op Translator. Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.

69 KiB

Raw Blame History Unescape Escape

Вступ до мов програмування та сучасних інструментів розробника

Давайте дізнаємося, що ви вже знаєте!

Пригода, яку ми збираємося пережити разом

То що ж таке програмування?

Мови програмування – це як різні смаки магії

Популярні мови програмування та їх використання

Мови високого рівня проти низького рівня

Дозвольте показати, чому мови високого рівня набагато дружелюбніші

Основи, які створюють магію

Інструкції: Покрокові вказівки

Змінні: Система пам'яті вашої програми

Управління потоком: Навчіть вашу програму думати

Інструменти для роботи

Редактори коду та IDE: Ваші нові цифрові найкращі друзі

Рекомендовані редактори для веб-розробки

Веб-браузери: Ваш секретний лабораторний інструмент для розробки

Рекомендовані браузери для розробки

Інструменти командного рядка: ваш шлях до суперсил розробника

Основні інструменти командного рядка для веброзробки

Варіанти для різних платформ

Документація: ваш завжди доступний наставник

Основні ресурси документації

Виклик агента GitHub Copilot 🚀

🚀 Виклик

Давайте відсвяткуємо те, що ви відкрили!

Огляд і самостійне навчання

Завдання

69 KiB Raw Blame History Unescape Escape

Вступ до мов програмування та сучасних інструментів розробника

Давайте дізнаємося, що ви вже знаєте!

Пригода, яку ми збираємося пережити разом

То що ж таке програмування?

Мови програмування – це як різні смаки магії

Популярні мови програмування та їх використання

Мови високого рівня проти низького рівня

Дозвольте показати, чому мови високого рівня набагато дружелюбніші

Основи, які створюють магію

Інструкції: Покрокові вказівки

Змінні: Система пам'яті вашої програми

Управління потоком: Навчіть вашу програму думати

Інструменти для роботи

Редактори коду та IDE: Ваші нові цифрові найкращі друзі

Рекомендовані редактори для веб-розробки

Веб-браузери: Ваш секретний лабораторний інструмент для розробки

Рекомендовані браузери для розробки

Інструменти командного рядка: ваш шлях до суперсил розробника

Основні інструменти командного рядка для веброзробки

Варіанти для різних платформ

Документація: ваш завжди доступний наставник

Основні ресурси документації

Виклик агента GitHub Copilot 🚀

🚀 Виклик

Давайте відсвяткуємо те, що ви відкрили!

Огляд і самостійне навчання

Завдання

69 KiB

Raw Blame History Unescape Escape