Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

Frontend Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ Π½Π° HTML, CSS ΠΈ JavaScript β€” Stepik

ΠžΡΠ²ΠΎΠΉΡ‚Π΅ самоС Π²Π°ΠΆΠ½ΠΎΠ΅ для Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ° ΠΈ Π½Π°Ρ‡Π½ΠΈΡ‚Π΅ Π·Π°Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ Π½Π° этом дСньги! HTML, CSS, JavaScript, Figma, Photoshop, VS Code, Emmet, BEM, Bootstrap, Vue, Git, GitHub, Gulp.

What you will learn

  • Π£ΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°Ρ‚ΡŒ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ для написания ΠΊΠΎΠ΄Π° VS Code, Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ, ΡƒΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°Ρ‚ΡŒ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡ ΠΈ Ρ‚Π΅ΠΌΡ‹, Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠΌ Emmet, Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π² Ρ‚Π΅Ρ€ΠΌΠΈΠ½Π°Π»Π΅Β (ΠΊΠΎΠΌΠ°Π½Π΄Π½ΠΎΠΉ строкС)
  • Π Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с HTML5 ΠΈ CSS3 — это Π΄Π²Π° языка, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹ для создания любого сайта
  • Π Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с Flexbox, Grid ΠΈ BEM, ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒΒ ΡΠ²ΠΎΡŽ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΡƒΡŽ сСтку Π½Π° CSS ΠΈ ΠΌΡ‹ свСрстаСм ΠΌΠ½ΠΎΠ³ΠΎ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ΠΎΠ² соврСмСнных сайтов
  • Π‘ΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ соврСмСнныС Π²Π΅Π±-сайты и ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠ΅ΠΉ
  • Π Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с Photoshop ΠΈ Figma Π² контСкстС вСрстки, ΠΈΠ·Π²Π»Π΅ΠΊΠ°Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ ΠΈ тСкст ΠΈΠ· ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ²
  • ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π½Π° языкС JavaScript. Π Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с DOM, с событиями ΠΈ с соврСмСнными JavaScript Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ°ΠΌΠΈ для создания слайдСров, Π³Π°Π»Π΅Ρ€Π΅ΠΉ, мСню ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Ρ… элСмСнтов
  • Π Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠΌ Bootstrap 5 ΠΈ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½ΡƒΡŽ Π°Π΄Π°ΠΏΡ‚Π°Ρ†ΠΈΡŽ сайтов ΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ
  • Π Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с систСмой контроля вСрсий Git ΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ свой ΠΊΠΎΠ΄ Π² ΡƒΠ΄Π°Π»Π΅Π½Π½Ρ‹Π΅ Ρ€Π΅ΠΏΠΎΠ·ΠΈΡ‚ΠΎΡ€ΠΈΠΈ Π½Π° GitHub, Π΄Π΅Π»Π°Ρ‚ΡŒ Fork, Pull-request ΠΈ слияниС Π²Π΅Ρ‚ΠΎΠΊ
  • Π Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠΌ Vue. js ΠΈ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ свою ΠΈΠ³Ρ€Ρƒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΈΠ·ΡƒΡ‡Π΅Π½Π½Ρ‹Π΅ Ρ€Π°Π½Π΅Π΅ языки ΠΈ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ, Π·Π°Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒ Π΅Ρ‘ Π² VK
  • ΠΠ²Ρ‚ΠΎΠΌΠ°Ρ‚ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ процСссы ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ ΠΏΠ»Π°Π½ΠΈΡ€ΠΎΠ²Ρ‰ΠΈΠΊΠ° Π·Π°Π΄Π°Ρ‡ Gulp,Β Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с NPM ΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ Node.js
  • БвСрстаСм 8 сайтов ΠΏΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Ρƒ ΠΈΠ· Figma ΠΈ Π²Ρ‹ смоТСтС Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΈΡ… сСбС Π² ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ
  • РасскаТу ΠΊΠ°ΠΊ ΡΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Ρ€Π΅Π·ΡŽΠΌΠ΅, ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ ΠΈ Π²Π·ΡΡ‚ΡŒ ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ Π·Π°ΠΊΠ°Π· Π½Π° фрилансС

About this course

Π­Ρ‚ΠΎΡ‚ курс Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ Π½Π° ΠΎΠ±ΡƒΡ‡Π΅Π½ΠΈΠ΅ созданию сайтов ΠΈ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡŽ Π½Π° языкС JavaScript, вСсь ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π» подносится простым языком. Π’Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚Π΅ ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹Ρ… ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»ΠΎΠ² ΠΈ ΠΌΡ‹ вмСстС Π±ΡƒΠ΄Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΈΠ·ΡƒΡ‡Π΅Π½Π½ΠΎΠ΅ Π½Π° ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ΅ создавая интСрСсныС ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹ шаг Π·Π° шагом.

Π§Ρ‚ΠΎ Π² этом курсС?

ΠœΡ‹ с Π²Π°ΠΌΠΈ ΠΏΡ€ΠΎΠΉΠ΄Π΅ΠΌ ΠΏΡƒΡ‚ΡŒ ΠΎΡ‚ установки своСго ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π° ΠΊΠΎΠ΄Π° Π΄ΠΎ создания сайтов. ΠœΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΠΈΠ·ΡƒΡ‡Π°Ρ‚ΡŒ Ρ‚Π΅ΠΎΡ€Π΅Ρ‚ΠΈΡ‡Π΅ΡΠΊΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ ΠΈ сразу ΠΆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ Π΅Ρ‘ Π½Π° ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ΅. ВсС ссылки Π½Π° рСсурсы, Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Ρ‹, ΡˆΠΏΠ°Ρ€Π³Π°Π»ΠΊΠΈ ΠΈ Π³ΠΎΡ‚ΠΎΠ²Ρ‹Π΅ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Ρ‹ ΠΊΠΎΠ΄Π° Π±ΡƒΠ΄ΡƒΡ‚ прСдоставлСны Π²Π½ΡƒΡ‚Ρ€ΠΈ курса.

На всС вопросы Π²Π½ΡƒΡ‚Ρ€ΠΈ курса ΠΎΡ‚Π²Π΅Ρ‡Π°ΡŽ Π»ΠΈΡ‡Π½ΠΎ Π² Ρ€Π°Π·Π΄Π΅Π»Π΅ «ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ» (этот Ρ€Π°Π·Π΄Π΅Π» Π΅ΡΡ‚ΡŒ ΠΏΠΎΠ΄ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΌ шагом). Π’Π°ΠΊ ΠΆΠ΅ Π΅ΡΡ‚ΡŒ Ρ‚Π΅Π»Π΅Π³Ρ€Π°ΠΌ ΠΊΠ°Π½Π°Π» для вопросов ΠΈ обсуТдСний Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠΎ Π΄Π°Π½Π½ΠΎΠΌΡƒ курсу. Π’Π°ΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠ±Ρ‰Π°Ρ‚ΡŒΡΡ с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ участниками ΠΌΠΎΠ΅Π³ΠΎ сообщСства ΠΈ Π»ΠΈΡ‡Π½ΠΎ со ΠΌΠ½ΠΎΠΉ Π½Π° Π»ΡŽΠ±Ρ‹Π΅ Ρ‚Π΅ΠΌΡ‹ ΠΊΠ°ΡΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ΠΈ программирования.

ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ ΡƒΡ€ΠΎΠΊ состоит ΠΈΠ· ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… шагов (Π΄ΠΎ 16 шагов) — это ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ, тСория Π² Π²ΠΈΠ΄Π΅ тСкста, Π²ΠΈΠ΄Π΅ΠΎ, тСстовоС Π·Π°Π΄Π°Π½ΠΈΠ΅.

ΠŸΠΎΡ‡Π΅ΠΌΡƒ стоит Π½Π°Ρ‡Π°Ρ‚ΡŒ ΠΎΠ±ΡƒΡ‡Π΅Π½ΠΈΠ΅ сСйчас? Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ сайтов (вСрстка) — ΠΎΡ‡Π΅Π½ΡŒ вострСбованный Π½Π°Π²Ρ‹ΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ…ΠΎΡ€ΠΎΡˆΠΎ оплачиваСтся. Мало Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ ΠΈΠ·ΡƒΡ‡ΠΈΠ² всю Π΄Π°Π½Π½ΡƒΡŽ Π²Π°ΠΌ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ Π²Ρ‹ ΡƒΠΆΠ΅ смоТСтС ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ свои ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Ρ‹ ΠΈ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ ΠΊΠ°ΠΊ Π½Π° фрилансС, Ρ‚Π°ΠΊ ΠΈ Π² web-студии, Π½ΠΎ ΠΈ Π²Ρ‹ Π·Π°Π»ΠΎΠΆΠΈΡ‚Π΅ Π±Π°Π·Ρƒ для дальнСйшСго обучСния. ВладСя этими Π½Π°Π²Ρ‹ΠΊΠ°ΠΌΠΈ Π²Ρ‹ смоТСтС ΠΎΡΠ²ΠΎΠΈΡ‚ΡŒ Π»ΡŽΠ±ΡƒΡŽ CMS, смоТСтС ΠΏΠΎΠ½ΡΡ‚ΡŒ ΠΈ ΠΈΠ·ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ backend Ρ‡Π°ΡΡ‚ΡŒ, ΠΈ смоТСтС ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, написанных Π½Π° JavaScript Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ°Ρ… ΠΈ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ°Ρ….

Π’Π½ΠΈΠΌΠ°Π½ΠΈΠ΅!

ΠšΡƒΡ€Ρ «Frontend Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ Π½Π° HTML, CSS ΠΈ JavaScript» содСрТит Π² сСбС всС ΡƒΡ€ΠΎΠΊΠΈ ΠΈ задания ΠΈΠ· сСми ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… курсов:

  1. Вёрстка Π½Π° HTML & CSS для Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ…
  2. Π‘ΡƒΠΏΠ΅Ρ€ курс ΠΏΠΎ языку JavaScript
  3. Bootstrap 5 для Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ…
  4. Git ΠΈ GitHub для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°
  5. Π˜Π³Ρ€Π° Π½Π° Vue. js
  6. ΠŸΠ»Π°Π½ΠΈΡ€ΠΎΠ²Ρ‰ΠΈΠΊ Π·Π°Π΄Π°Ρ‡ Gulp 4
  7. ВСрстаСм 8 сайтов ΠΏΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Ρƒ ΠΈΠ· Figma Π² ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ

Π­Ρ‚ΠΎ Π·Π½Π°Ρ‡ΠΈΡ‚, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½Π΅ Π½Π°Π΄ΠΎ ΠΏΠΎΠΊΡƒΠΏΠ°Ρ‚ΡŒ ΠΈΡ… ΠΏΠΎ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ ΠΈ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΡΠΊΠΎΠ½ΠΎΠΌΠΈΡ‚ΡŒ приобрСтая Π΄Π°Π½Π½Ρ‹ΠΉ курс. Или ΠΆΠ΅ приобрСсти ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ курс Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠΎ ΠΈΠ½Ρ‚Π΅Ρ€Π΅ΡΡƒΡŽΡ‰Π΅ΠΉ вас Ρ‚Π΅ΠΌΠ΅.

Whom this course is for

Для Ρ‚Π΅Ρ…, ΠΊΡ‚ΠΎ Π½Π΅ Π·Π½Π°ΠΊΠΎΠΌ с Ρ‚Π΅ΠΌΠΎΠΉ создания сайтов; Для Ρ‚Π΅Ρ…, ΠΊΡ‚ΠΎ ΡƒΠΆΠ΅ Π΄Π΅Π»Π°Π» свои ΠΏΠ΅Ρ€Π²Ρ‹Π΅ ΠΏΠΎΠΏΡ‹Ρ‚ΠΊΠΈ создания сайтов; Для Ρ‚Π΅Ρ…, ΠΊΡ‚ΠΎ Ρ…ΠΎΡ‡Π΅Ρ‚ ΠΎΡΠ²ΠΎΠΈΡ‚ΡŒ html, css, javascript, bootstrap, vue, git, github, gulp, ΠΈ Π½Π°Ρ‡Π°Ρ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ эти Π½Π°Π²Ρ‹ΠΊΠΈ Π² Ρ€Π°Π±ΠΎΡ‚Π΅; Для Ρ‚Π΅Ρ…, ΠΊΡ‚ΠΎ Ρ…ΠΎΡ‡Π΅Ρ‚ ΡΡ‚Π°Ρ‚ΡŒ ΠΊΡ€ΡƒΡ‚Ρ‹ΠΌ Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠΌ ΠΈ Π·Π°Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ дСньги.

Initial requirements

  • Π–Π΅Π»Π°Π½ΠΈΠ΅ ΠΎΡΠ²ΠΎΠΈΡ‚ΡŒ созданиС сайтов ΠΈ Π½Π°Ρ‡Π°Ρ‚ΡŒ Π·Π°Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ Π½Π° этом
  • Π‘Π°Π·ΠΎΠ²Ρ‹Π΅ Π½Π°Π²Ρ‹ΠΊΠΈ Ρ€Π°Π±ΠΎΡ‚Ρ‹ с ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€ΠΎΠΌ
  • Никакой Π΄Ρ€ΡƒΠ³ΠΎΠΉ ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ ΠΏΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²ΠΊΠΈ

Meet the Instructors

How you will learn

ΠžΠ±ΡƒΡ‡Π΅Π½ΠΈΠ΅ построСно Π½Π° Π²ΠΈΠ΄Π΅ΠΎ ΡƒΡ€ΠΎΠΊΠ°Ρ…. Для Π»ΡƒΡ‡ΡˆΠ΅Π³ΠΎ усвоСния ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Π° рСкомСндуСтся ΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΡƒΡ€ΠΎΠΊ ΠΈ ΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΠΈΡ‚ΡŒ всС ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ. ΠŸΠΎΡ‡Ρ‚ΠΈ Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΡƒΡ€ΠΎΠΊΠ΅ доступно ΠΎΠ΄Π½ΠΎ ΠΈΠ»ΠΈ Π±ΠΎΠ»Π΅Π΅ Π·Π°Π΄Π°Π½ΠΈΠΉ Π² Π²ΠΈΠ΄Π΅ тСста, Π·Π°Π΄Π°Ρ‡ΠΈ Π½Π° сопоставлСниС, Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ пропусков, сортировки ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅. Π’ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΡƒΡ€ΠΎΠΊΠ°Ρ… Π΅ΡΡ‚ΡŒ шаги с Π·Π°Π΄Π°Π½ΠΈΠ΅ΠΌ Π² Π²ΠΈΠ΄Π΅ΠΎ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅, Π³Π΄Π΅ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎ ΠΈΠ·Π»ΠΎΠΆΠ΅Π½Ρ‹ условия ΠΈ Ρ†Π΅Π»ΡŒ Π·Π°Π΄Π°Ρ‡ΠΈ. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Ρ‡ΠΈΡ‚Π°ΠΉΡ‚Π΅ всю Ρ‚Π΅ΠΊΡΡ‚ΠΎΠ²ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΊ ΡƒΡ€ΠΎΠΊΡƒ Ρ‚Π°ΠΌ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹Π΅ ссылки Π½Π° сторонниС рСсурсы ΠΈΠ»ΠΈ Π½Π° ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½ΡƒΠΆΠ½Ρ‹ для ΡƒΡ€ΠΎΠΊΠ°. По ТСланию ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΊΠΎΠ½ΡΠΏΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ·ΡƒΡ‡Π°Π΅ΠΌΡ‹ΠΉ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π» Π² любом ΡƒΠ΄ΠΎΠ±Π½ΠΎΠΌ для вас Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ (Π±ΡƒΠΌΠ°Π³Π°, Ρ†ΠΈΡ„Ρ€Π°). ЗадСйствовав Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ Π²ΠΈΠ΄ памяти Π²Ρ‹ ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚Π΅ усвоСниС ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Π°.

Course content

Certificate

Stepik

What you will get

Price

FAQ

How to purchase the course in installments?

How to pay from the company?

Share this course

https://stepik.org/course/113402/promo

Direct link:
https://stepik.org/113402

Π˜Π·ΡƒΡ‡Π΅Π½ΠΈΠ΅ HTML CSS ΠΈ JavaScript, ΠΈ Ρ‡Ρ‚ΠΎ это Π·Π° Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ

Автор ΡΡ‚Π°Ρ‚ΡŒΠΈ: admin

ΠœΠ΅Ρ‚ΠΊΠΈ: CSS / HTML / JavaScript / Новичку

Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ Π²Ρ‹ ΠΏΡ€ΠΎΡ‡ΠΈΡ‚Π°Π΅Ρ‚Π΅ ΠΏΡ€ΠΎ ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΠ΅ HTML CSS ΠΈ JavaScript, ΠΈ Π² Ρ†Π΅Π»ΠΎΠΌ ΡƒΠ·Π½Π°Π΅Ρ‚Π΅ ΠΌΠ½ΠΎΠ³ΠΎ интСрСсного ΠΏΡ€ΠΎ эти Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ, Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ.

Π’Π°ΠΊΠΆΠ΅ ΠΏΡ€ΠΎΡ‡ΠΈΡ‚Π°ΠΉΡ‚Π΅ ΡΡ‚Π°Ρ‚ΡŒΡŽ Β«Π‘ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Π΅ способы Π³Π΅Π½Π΅Ρ€Π°Ρ†ΠΈΠΈ Π²Π΅Π±-сайтов», Ρ‚ΠΎΠΆΠ΅ ΡƒΠ·Π½Π°Π΅Ρ‚Π΅ Ρ‚Π°ΠΌ ΠΌΠ½ΠΎΠ³ΠΎ Π½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈ интСрСсного, особСнно Ссли Π²Ρ‹ Π½ΠΎΠ²ΠΈΡ‡ΠΎΠΊ.

Π˜Π·ΡƒΡ‡Π΅Π½ΠΈΠ΅ HTML CSS ΠΈ JavaScript:

Если Π²Ρ‹ ΠΊΠΎΠ³Π΄Π°-Π»ΠΈΠ±ΠΎ Π±Ρ‹Π»ΠΈ Π² Π³ΠΎΡ€ΠΎΠ΄Π΅, Π³Π΄Π΅ ΠΌΠΎΠΆΠ½ΠΎ Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ пСшком, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π² Нью-Π™ΠΎΡ€ΠΊΠ΅, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ½ΡΡ‚ΡŒ, ΠΊΠ°ΠΊ HTML, CSS ΠΈ JavaScript Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ вмСстС.

Когда Π²Ρ‹ Π½Π°Ρ‡ΠΈΠ½Π°Π΅Ρ‚Π΅ ΠΈΠ·ΡƒΡ‡Π°Ρ‚ΡŒ Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΡƒ, Π²Ρ‹ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ ряд Π±Π°Π·ΠΎΠ²Ρ‹Ρ… Π·Π°Π΄Π°Ρ‡ Π½Π° ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠ°Ρ… HTML, CSS ΠΈ JavaScript. Однако каТдая Π·Π°Π΄Π°Ρ‡Π° происходит Π² срСдС пСсочницы ΠΈ Π½Π΅ провСряСт вас Π½Π° Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… языках ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ.

НапримСр, ΡƒΡ‡Π΅Π±Π½ΠΈΠΊ Β«Π’Π²Π΅Π΄Π΅Π½ΠΈΠ΅ Π² JavaScriptΒ» ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ фокусируСтся Π½Π° Ρ‚Π°ΠΊΠΈΡ… основах, ΠΊΠ°ΠΊ Ρ†ΠΈΠΊΠ»Ρ‹ ΠΈ ΠΎΠΏΠ΅Ρ€Π°Ρ‚ΠΎΡ€Ρ‹ Β«ifΒ», Π° Π½Π΅ Π½Π° использовании JavaScript вмСстС с HTML.

Π’Ρ‹ΠΏΠΎΠ»Π½ΠΈΠ² эти ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ упраТнСния, Π²Ρ‹ достигнСтС ΠΌΠΎΠΌΠ΅Π½Ρ‚Π°, ΠΊΠΎΠ³Π΄Π° Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ свой ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ ΠΏΠΎΠ»Π½ΠΎΡ†Π΅Π½Π½Ρ‹ΠΉ Π²Π΅Π±-сайт. Π”Π°ΠΆΠ΅ Ссли это одностраничный Π»ΠΈΡ‡Π½Ρ‹ΠΉ сайт, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ ΡΠΎΠ±ΠΈΡ€Π°Π΅Ρ‚Π΅ΡΡŒ Π²Ρ‹ΠΏΡƒΡΠΊΠ°Ρ‚ΡŒ, Π²Ρ‹ всС Ρ€Π°Π²Π½ΠΎ ΡΡ‚ΠΎΠ»ΠΊΠ½Π΅Ρ‚Π΅ΡΡŒ с рядом Π½ΠΎΠ²Ρ‹Ρ… ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ:

  • Как ΠΌΠ½Π΅ ΡΠΎΠ΅Π΄ΠΈΠ½ΠΈΡ‚ΡŒ Ρ‚Ρ€ΠΈ Ρ€Π°Π·Π½Ρ‹Ρ… Ρ‚ΠΈΠΏΠ° Ρ„Π°ΠΉΠ»ΠΎΠ²?
  • ПослС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ я ΠΈΡ… ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Ρƒ, ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ Π±ΡƒΠ΄ΡƒΡ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ вмСстС?
  • Как ΠΌΠ½Π΅ ΠΏΡ€ΠΎΡ‚Π΅ΡΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ всС это Π½Π° ΠΌΠΎΠ΅ΠΌ собствСнном ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π΅?

Различия ΠΌΠ΅ΠΆΠ΄Ρƒ HTML, CSS ΠΈ JavaScript:

ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²ΠΈΠΌ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΎΡ‚Π²Π΅Ρ‡Π°Π΅Ρ‚Π΅ Π·Π° ΠΏΠ»Π°Π½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π½ΠΎΠ²ΠΎΠ³ΠΎ ΠΊΠ²Π°Ρ€Ρ‚Π°Π»Π° Π² Π³ΠΎΡ€ΠΎΠ΄Π΅. Π’ этом Ρ€Π°ΠΉΠΎΠ½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ нСсколько ΠΆΠΈΠ»Ρ‹Ρ… Π΄ΠΎΠΌΠΎΠ², нСсколько закусочных, ΠΎΡ‚Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Π±Π°Π½ΠΊΠ° ΠΈ Ρ‚ΠΎΡ€Π³ΠΎΠ²Ρ‹ΠΉ Ρ†Π΅Π½Ρ‚Ρ€.

Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ ΠΎΠ΄Π½ΠΎΠΌΠ΅Ρ€Π½Ρ‹ΠΌ. Π”Ρ€ΡƒΠ³ΠΈΠΌΠΈ словами, ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ Π·Π΄Π°Π½ΠΈΠ΅ β€” это просто Ρ‚ΠΎΡ‡ΠΊΠ° Π½Π° ΠΊΠ°Ρ€Ρ‚Π΅ Π±Π΅Π· ΠΊΠ°ΠΊΠΈΡ…-Π»ΠΈΠ±ΠΎ нюансов. Но Ссли ΠΊΠΎΠΏΠ½ΡƒΡ‚ΡŒ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π³Π»ΡƒΠ±ΠΆΠ΅, ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ Π·Π΄Π°Π½ΠΈΠ΅ состоит ΠΈΠ· Ρ‚Ρ€Π΅Ρ… частСй, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ:

Π‘Ρ‚Ρ€ΡƒΠΊΡ‚ΡƒΡ€Π° самого здания:

ВнутрСнняя ΠΈ внСшняя ΠΎΡ‚Π΄Π΅Π»ΠΊΠ° здания:
ЀактичСскиС Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ посСтитСли ΠΌΠΎΠ³ΡƒΡ‚ Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΌ Π·Π΄Π°Π½ΠΈΠΈ
Π­Ρ‚ΠΎ соотвСтствуСт Ρ‚Ρ€Π΅ΠΌ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌ Ρ‚ΠΈΠΏΠ°ΠΌ Ρ„Π°ΠΉΠ»ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π½Π° своСм ΠΏΠ΅Ρ€Π²ΠΎΠΌ Π²Π΅Π±-сайтС.

HTML-Ρ„Π°ΠΉΠ» содСрТит структуру самой страницы. Π­Ρ‚ΠΎ Π²Ρ€ΠΎΠ΄Π΅ ΠΊΠ°ΠΊ структура здания.

Π€Π°ΠΉΠ» CSS содСрТит стили страницы. Он позволяСт ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ†Π²Π΅Ρ‚Π°, ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄Ρ€ΡƒΠ³ΠΎΠ΅. Π­Ρ‚ΠΎ Π²Ρ€ΠΎΠ΄Π΅ ΠΊΠ°ΠΊ Π΄ΠΈΠ·Π°ΠΉΠ½ самого здания.

Π€Π°ΠΉΠ» JavaScript опрСдСляСт динамичСскиС ΠΈ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ элСмСнты Π½Π° страницС. Он опрСдСляСт, Ρ‡Ρ‚ΠΎ происходит, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ Π½Π°ΠΆΠΈΠΌΠ°ΡŽΡ‚, наводят ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ ΠΌΡ‹ΡˆΠΈ ΠΈΠ»ΠΈ вводят тСкст Π² ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… элСмСнтах. Π­Ρ‚ΠΎ Π²Ρ€ΠΎΠ΄Π΅ ΠΊΠ°ΠΊ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ здания.

Π’ΠΎΠ·ΡŒΠΌΠ΅ΠΌ, ΠΊ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρƒ, ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π΄ΠΎΠΌΠΎΠ². Π’ Π΄ΠΎΠΌΠ΅ 2 спальни, 2 Π²Π°Π½Π½Ρ‹Π΅ ΠΊΠΎΠΌΠ½Π°Ρ‚Ρ‹ ΠΈ 2 этаТа. Π­Ρ‚ΠΎ HTML-ΠΊΠΎΠ΄ здания.

Он построСн ΠΈΠ· ΠΊΠΈΡ€ΠΏΠΈΡ‡Π° ΠΈ ΠΈΠΌΠ΅Π΅Ρ‚ Π΄Π²Π΅Ρ€ΡŒ ΠΈΠ· массива Π΄Π΅Ρ€Π΅Π²Π°. Π­Ρ‚ΠΎ соотвСтствуСт CSS здания.

Π’Ρ‹Π²ΠΎΠ΄:

Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ Π²Ρ‹ ΠΏΡ€ΠΎΡ‡ΠΈΡ‚Π°Π»ΠΈ ΠΏΡ€ΠΎ ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΠ΅ HTML CSS ΠΈ JavaScript, Π΄Π° ΠΈ Π² Ρ†Π΅Π»ΠΎΠΌ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ ΡƒΠ·Π½Π°Π»ΠΈ ΠΏΡ€ΠΎ эти Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ.

ΠŸΠΎΠ΄ΠΏΠΈΡΡ‹Π²Π°Π΅Ρ‚Π΅ΡΡŒ Π½Π° соц-сСти:

ΠžΡ†Π΅Π½ΠΊΠ°:

(Пока ΠΎΡ†Π΅Π½ΠΎΠΊ Π½Π΅Ρ‚)

Π—Π°Π³Ρ€ΡƒΠ·ΠΊΠ°…

ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡΡ:

Пока ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΏΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ Π½Π΅Ρ‚

Π’Π°ΠΊΠΆΠ΅ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΡŽ:

JavaScript ΠΏΡ€ΠΎΡ‚ΠΈΠ² CSS: Π² Ρ‡Π΅ΠΌ Ρ€Π°Π·Π½ΠΈΡ†Π° ΠΈ Ρ‡Ρ‚ΠΎ Π»ΡƒΡ‡ΡˆΠ΅?

Β© Bigc Studio / Shutterstock.com

JavaScript ΠΈ CSS β€” Π΄Π²Π° ΠΆΠΈΠ·Π½Π΅Π½Π½ΠΎ Π²Π°ΠΆΠ½Ρ‹Ρ… инструмСнта, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ ΠΏΡ€ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ Π²Π΅Π±-сайтов. Какой ΠΈΠ· Π΄Π²ΡƒΡ… языков Π»ΡƒΡ‡ΡˆΠ΅? Как Π±Ρ‹ ΠΌΡ‹ Π½ΠΈ сравнивали JavaScript с CSS, ΠΎΠ½ΠΈ Π½Π΅ ΠΊΠΎΠ½ΠΊΡƒΡ€ΠΈΡ€ΡƒΡŽΡ‚, Π° скорСС Π΄ΠΎΠΏΠΎΠ»Π½ΡΡŽΡ‚ Π΄Ρ€ΡƒΠ³ Π΄Ρ€ΡƒΠ³Π° Π² Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅. Оба ΠΎΠ½ΠΈ ΠΏΠΎΠΌΠΎΠ³Π°ΡŽΡ‚ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ HTML-страницы: JavaScript измСняСт ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… элСмСнтов Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅, Π° CSS фокусируСтся Π½Π° внСшнСм Π²ΠΈΠ΄Π΅, ΠΌΠ°ΠΊΠ΅Ρ‚Π΅ ΠΈ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ.

Π”Π°Π²Π°ΠΉΡ‚Π΅ посмотрим Π½Π° сущСствСнныС различия ΠΌΠ΅ΠΆΠ΄Ρƒ двумя языками ΠΈ, надСюсь, ΡƒΠ±Π΅Ρ€Π΅ΠΌ вас с пСрСкрСстка JavaScript ΠΈ CSS.

JavaScript ΠΈ CSS: ΠΏΠ°Ρ€Π°Π»Π»Π΅Π»ΡŒΠ½ΠΎΠ΅ сравнСниС

НазначСниС ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… инструмСнтов элСмСнтам Π²Π΅Π±-страницы, Ρ‡Ρ‚ΠΎ опрСдСляСт ΠΈΡ… ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅. ИзмСнСниС ΠΌΠ°ΠΊΠ΅Ρ‚Π°, Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π° ΠΈ ΠΎΠΊΠΎΠ½Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ Π²ΠΈΠ΄Π° Π²Π΅Π±-страницы. 9 Π£ΠΌΠ΅Ρ€Π΅Π½Π½ΠΎ слоТный для изучСния 0022 Java, PHP XHTML, XUL, SVG, ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹ΠΉ XML Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€ Π‘ΠΎΠ²ΠΌΠ΅ΡΡ‚ΠΈΠΌΠΎΡΡ‚ΡŒ ΠžΡΠ½ΠΎΠ²Π½Ρ‹Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ ВсС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅ΠΌΡ‹Π΅ надстройки ΠΈ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ jQuery, React.js, D3.js, Algolia Places, Anime.js , Underscore.js, Π›ΠΎΠ΄Π°Ρˆ Tailwind, Foundation, CSS Wand, Bootstrap Π Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡ ΠΈΠΌΠ΅Π½ Ρ„Π°ΠΉΠ»ΠΎΠ² .js ΠΈ .mjs .css 9 0022 ΠšΠ»ΠΈΠ΅Π½Ρ‚ΡΠΊΠΈΠ΅ ΠΈ сСрвСрныС прилоТСния Оба ΠΊΠ»ΠΈΠ΅Π½Ρ‚- сторонС ΠΈ сторонС сСрвСра Волько Π½Π° сторонС ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π° Π£ΡΡ‚ΠΎΠΉΡ‡ΠΈΠ²ΠΎΡΡ‚ΡŒ ΠΊ ΠΊΠΎΠ΄Π°ΠΌ ошибок Низкая Высокая

JavaScript ΠΈ CSS: Π² Ρ‡Π΅ΠΌ Ρ€Π°Π·Π½ΠΈΡ†Π°?

JavaScript ΠΈ CSS, Π±ΡƒΠ΄ΡƒΡ‡ΠΈ языками программирования, Π²ΠΎ ΠΌΠ½ΠΎΠ³ΠΎΠΌ Ρ€Π°Π·Π»ΠΈΡ‡Π°ΡŽΡ‚ΡΡ. НиТС ΠΌΡ‹ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎ рассмотрим ΠΈΡ… ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ отличия.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ JavaScript?

JavaScript β€” это Π»Π΅Π³ΠΊΠΈΠΉ ΠΌΠ½ΠΎΠ³ΠΎΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ΅Π½Π½Ρ‹ΠΉ язык программирования, Π² основном извСстный для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ Π²Π΅Π±-сайтов. Помимо Π²Π΅Π±-страниц, JavaScript ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ для Π΄Ρ€ΡƒΠ³ΠΈΡ… Π½Π΅Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π½Ρ‹Ρ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Π―Π·Ρ‹ΠΊΠΈ сцСнариСв ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ Π²Π°ΠΌ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ ΠΊΠ°ΠΊ Π½Π° клиСнтской, Ρ‚Π°ΠΊ ΠΈ Π½Π° сСрвСрной сторонС вашСй Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ, прСдоставляя Π²Π°ΠΌ ΡΡ‚Π°Π½Π΄Π°Ρ€Ρ‚Π½ΡƒΡŽ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ².

Π˜Π·ΠΌΠ΅Π½ΡΠ΅Ρ‚ ΠΊΠ»ΠΈΠ΅Π½Ρ‚ΡΠΊΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ для ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² ΠΈ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π½Π° сторонС сСрвСра Π² Π±Π°Π·Π°Ρ… Π΄Π°Π½Π½Ρ‹Ρ…, сСрвСрах ΠΈ Π½Π΅Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π½Ρ‹Ρ… прилоТСниях. JavaScript ΠΈΠΌΠ΅Π΅Ρ‚ API, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ измСняСт нСсколько элСмСнтов ΠΈΠ· ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ² Π΄Π°Ρ‚Ρ‹, ΠΌΠ°Ρ‚Π΅ΠΌΠ°Ρ‚ΠΈΠΊΠΈ ΠΈ массива вмСстС с Π²Π°ΠΆΠ½Ρ‹ΠΌΠΈ элСмСнтами программирования, Ρ‚Π°ΠΊΠΈΠΌΠΈ ΠΊΠ°ΠΊ ΠΎΠΏΠ΅Ρ€Π°Ρ‚ΠΎΡ€Ρ‹, ΠΎΠΏΠ΅Ρ€Π°Ρ‚ΠΎΡ€Ρ‹ ΠΈ ΡƒΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ структуры.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ CSS?

Каскадная Ρ‚Π°Π±Π»ΠΈΡ†Π° стилСй (CSS) β€” это язык, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΎΠΊΠΎΠ½Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ внСшний Π²ΠΈΠ΄, Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ ΠΌΠ°ΠΊΠ΅Ρ‚ Π²Π΅Π±-сайта, созданного с использованиСм HTML. CSS ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π²Π΅Π±-страницу Π»ΡƒΡ‡ΡˆΠ΅ ΠΈ Π² ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠΌ ΠΈΡ‚ΠΎΠ³Π΅ произвСсти Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»Π΅Π½ΠΈΠ΅ Π½Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ. Π’ Ρ‚ΠΎ врСмя ΠΊΠ°ΠΊ HTML ΠΈΠΌΠ΅Π΅Ρ‚ Π΄Π΅Π»ΠΎ со структурными элСмСнтами Π²Π΅Π±-страницы, CSS ΠΈΠΌΠ΅Π΅Ρ‚ Π΄Π΅Π»ΠΎ с ΠΎΠΊΠΎΠ½Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ ΠΎΡ‚Ρ‚Π΅Π½ΠΊΠ°ΠΌΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ тСкстовыми стилями, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ.

CSS Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ измСняСт HTML, Π½ΠΎ ΠΈ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ языками программирования. НСкоторыС Π΄ΠΈΠ°Π»Π΅ΠΊΡ‚Ρ‹ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‰ΠΈΠ΅ CSS, Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ XHTML, XUL, SVG ΠΈ ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹ΠΉ XML. Π­Ρ‚ΠΎ ΡˆΠΈΡ€ΠΎΠΊΠΎΠ΅ использованиС ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, насколько ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΌ являСтся CSS, благодаря ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎΠΉ совмСстимости устройств, простотС обслуТивания, прСвосходным возмоТностям стилизации с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ HTML ΠΈ быстрой ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠ΅ страниц.

CSS ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΎΠΊΠΎΠ½Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ Π²ΠΈΠ΄, Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ ΠΌΠ°ΠΊΠ΅Ρ‚ сайтов, созданных с использованиСм HTML.

Β©photovibes/Shutterstock.com

Π’Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ использования

JavaScript ΠΈ CSS ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ ΠΏΠΎ-Ρ€Π°Π·Π½ΠΎΠΌΡƒ. CSS Π² ΠΏΠ΅Ρ€Π²ΡƒΡŽ ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ фокусируСтся Π½Π° Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠΉ сторонС Π²Π΅Π±-страницы. Π―Π·Ρ‹ΠΊ ΠΈΠΌΠ΅Π΅Ρ‚ Π΄Π΅Π»ΠΎ с эстСтикой ΠΈ ΠΏΡ€Π΅Π·Π΅Π½Ρ‚Π°Ρ†ΠΈΠ΅ΠΉ, Ρ‡Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ страницу Π±ΠΎΠ»Π΅Π΅ Ρ‡ΠΈΡ‚Π°Π±Π΅Π»ΡŒΠ½ΠΎΠΉ ΠΈ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠΉ для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ.

CSS позволяСт ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ†Π²Π΅Ρ‚Π° тСкста Π½Π° Π²Π΅Π±-страницС, просто добавляя ΠΊΠΎΠ΄ «стиля» Π² HTML-ΠΊΠΎΠ΄ вашСй страницы. Π―Π·Ρ‹ΠΊ Ρ‚Π°ΠΊΠΆΠ΅ позволяСт Π²Π°ΠΌ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΈ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ вашСй страницы, ΠΎΡ‚ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² Π΄ΠΎ ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π»ΠΎΠ² ΠΈ Ρ‚Π΅Π½Π΅ΠΉ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ.

Π‘ Π΄Ρ€ΡƒΠ³ΠΎΠΉ стороны, JavaScript позволяСт Π²Π°ΠΌ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… элСмСнтов вашСй Π²Π΅Π±-страницы, добавляя Π½Π° страницу Ρ†Π΅Π½Π½Ρ‹Π΅ инструмСнты. Π­Ρ‚ΠΎΡ‚ язык программирования ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ элСмСнт HTML ΠΈΠ»ΠΈ CSS Π±ΠΎΠ»Π΅Π΅ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΌ, прСдоставляя Π΅ΠΌΡƒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ.

Π’ JavaScript Π΅ΡΡ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ инструмСнтов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Π² зависимости ΠΎΡ‚ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹Ρ… потрСбностСй вашСй Π²Π΅Π±-страницы. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ этот язык программирования, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π»Π΅Π³ΠΊΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠ°Π»ΡŒΠΊΡƒΠ»ΡΡ‚ΠΎΡ€ ΠΈ сочСтания клавиш ΠΈΠ»ΠΈ Π΄Π°ΠΆΠ΅ воспроизвСсти Π·Π°Ρ…Π²Π°Ρ‚Ρ‹Π²Π°ΡŽΡ‰ΡƒΡŽ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ Π½Π° своСй страницС Π²ΠΎ врСмя ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ. JavaScript ΠΎΡ‡Π΅Π½ΡŒ ΠΏΠΎΠ»Π΅Π·Π΅Π½, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΎΠ½ ΠΎΡ‡Π΅Π½ΡŒ Π³ΠΈΠ±ΠΊΠΈΠΉ.

ΠŸΡ€ΠΎΡΡ‚ΠΎΡ‚Π° обучСния

Если Π²Ρ‹ Π½ΠΎΠ²ΠΈΡ‡ΠΎΠΊ Π² ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ, ΠΊΠ°ΠΊΠΎΠΉ ΠΈΠ· Π΄Π²ΡƒΡ… языков Π»Π΅Π³Ρ‡Π΅ Π²Ρ‹ΡƒΡ‡ΠΈΡ‚ΡŒ? JavaScript ΠΈ CSS β€” слоТныС языки программирования; Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, ΠΌΡ‹ Π½Π΅ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠΊΠ°Π·Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ это Π»Π΅Π³ΠΊΠΎ. Если Π²Ρ‹ Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ, Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ Π·Π½Π°ΠΊΠΎΠΌΡ‹ с HTML, CSS, JavaScript ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ языками.

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΡƒΡ‡ΠΈΡ‚ΡŒ CSS, Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ сначала ΠΈΠΌΠ΅Ρ‚ΡŒ Π±Π°Π·ΠΎΠ²Ρ‹Π΅ знания HTML, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ эти Π΄Π²Π° языка Π½ΡƒΠΆΠ½Ρ‹ Π΄Ρ€ΡƒΠ³ Π΄Ρ€ΡƒΠ³Ρƒ. CSS ΠΎΡ‚Π²Π΅Ρ‡Π°Π΅Ρ‚ Π·Π° внСшний Π²ΠΈΠ΄ HTML, Π° Π±Π΅Π· HTML Π²Ρ‹ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ CSS. HTML, с Π΄Ρ€ΡƒΠ³ΠΎΠΉ стороны, нуТдаСтся Π² CSS для эстСтики. Π˜Π·ΡƒΡ‡Π΅Π½ΠΈΠ΅ CSS ΠΌΠΎΠΆΠ΅Ρ‚ Π·Π°Π½ΡΡ‚ΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ врСмя, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ язык слоТный ΠΈ Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ использования мноТСства ΠΎΠΏΡ†ΠΈΠΉ ΠΈ Ρ„Π°ΠΊΡ‚ΠΎΡ€ΠΎΠ². Π£ CSS ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, ΠΈ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΈΡ… всСх Π·Π°ΠΉΠΌΠ΅Ρ‚ Ρƒ вас мСсяцы.

JavaScript, ΠΏΠΎΠ»Π½ΠΎΡ†Π΅Π½Π½Ρ‹ΠΉ язык программирования, слСдуСт всСй Π»ΠΎΠ³ΠΈΠΊΠ΅ программирования, Π² ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ CSS, ΠΈ поэтому Π±ΠΎΠ»Π΅Π΅ слоТСн Π² ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΠΈ. Π’ Ρ‚ΠΎ врСмя ΠΊΠ°ΠΊ с ошибками CSS ΠΌΠΎΠΆΠ½ΠΎ ΡΠΏΡ€Π°Π²ΠΈΡ‚ΡŒΡΡ, ошибки JavaScript ΡΠΎΠ·Π΄Π°ΡŽΡ‚ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹, ΠΈ потрСбуСтся ΠΌΠ½ΠΎΠ³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ…ΠΎΡ€ΠΎΡˆΠΎ ΠΏΠΎΠ½ΡΡ‚ΡŒ язык ΠΈ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π±Π΅Π· ошибок. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, CSS Π±ΠΎΠ»Π΅Π΅ прост Π² ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΠΈ, Ρ‡Π΅ΠΌ JavaScript, Π΄Π°ΠΆΠ΅ Ссли ΠΎΠ±Π° языка слоТны.

На ΠΊΠ°ΠΊΠΈΡ… языках программирования ΠΎΠ½ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ?

JavaScript ΠΈ CSS ΠΌΠΎΠ³ΡƒΡ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Ρ€ΡƒΠΊΠ° ΠΎΠ± Ρ€ΡƒΠΊΡƒ с нСсколькими языками программирования. ΠœΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ JavaScript для измСнСния дСйствий Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… элСмСнтов Π²Π΅Π±-страниц. Π­Ρ‚ΠΎΡ‚ язык Π² ΠΏΠ΅Ρ€Π²ΡƒΡŽ ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ измСняСт HTML, Π½ΠΎ ΠΎΠ½ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ языками, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ Java, PHP ΠΈ Perl.

CSS β€” ΠΊΠΎΡ€ΠΎΠ»ΡŒ ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΌΠΎΠ΄ΠΈΡ„ΠΈΡ†ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ нСсколько языков. ΠŸΡ€ΠΈ простом ΡƒΠΏΠΎΠΌΠΈΠ½Π°Π½ΠΈΠΈ CSS Π½Π° ΡƒΠΌ ΠΏΡ€ΠΈΡ…ΠΎΠ΄ΠΈΡ‚ HTML. Однако CSS ΠΌΠΎΠΆΠ΅Ρ‚ ΠΌΠΎΠ΄ΠΈΡ„ΠΈΡ†ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ языки, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ XHTML, XUL, SVG ΠΈ простой XML. ВСликолСпная ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ CSS Π΄Π΅Π»Π°Π΅Ρ‚ этот язык ΠΎΡ‡Π΅Π½ΡŒ Π»ΡŽΠ±ΠΈΠΌΡ‹ΠΌ срСди спСциалистов ΠΏΠΎ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡŽ.

Π‘ΠΎΠ²ΠΌΠ΅ΡΡ‚ΠΈΠΌΠΎΡΡ‚ΡŒ с Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠΌ

Π§Ρ‚ΠΎ касаСтся совмСстимости с Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠΌ, CSS Π»ΡƒΡ‡ΡˆΠ΅, Ρ‡Π΅ΠΌ JavaScript. Π£ вас большС шансов ΡΡ‚ΠΎΠ»ΠΊΠ½ΡƒΡ‚ΡŒΡΡ с ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°ΠΌΠΈ совмСстимости с JavaScript, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ Ρ€Π°Π·Π½Ρ‹Π΅ вСрсии, ΠΈ каТдая вСрсия поддСрТиваСтся своим Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠΌ. Π―Π·Ρ‹ΠΊ Π² основном Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π²ΠΎ всСх соврСмСнных основных Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…. Однако Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ ΠΈΠ»ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ JavaScript, Ρ‡Ρ‚ΠΎ Π² ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠΌ ΠΈΡ‚ΠΎΠ³Π΅ Π΄Π΅Π»Π°Π΅Ρ‚ язык Π½Π΅ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅ΠΌΡ‹ΠΌ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅.

Π‘ Π΄Ρ€ΡƒΠ³ΠΎΠΉ стороны, CSS совмСстим со всСми Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ, ΠΎΡ‚ Chrome, Edge, Opera, Safari ΠΈ Firefox, Ρ‡Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ свободно ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ CSS нСзависимо ΠΎΡ‚ вашСго Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, CSS ΠΏΠΎΠ±Π΅ΠΆΠ΄Π°Π΅Ρ‚ Π² этом тСстС Π½Π° ΡΠΎΠ²ΠΌΠ΅ΡΡ‚ΠΈΠΌΠΎΡΡ‚ΡŒ с Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ.

ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅ΠΌΡ‹Π΅ надстройки ΠΈ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ

JavaScript ΠΈ CSS ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ надстройки ΠΈ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ. Надстройки β€” это ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‚ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ ΠΈ возмоТности для ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰Π΅Π³ΠΎ языка программирования.

JavaScript содСрТит мноТСство ΠΏΠΎΠ»Π΅Π·Π½Ρ‹Ρ… Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ. Π‘ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Ρ‹ для Ρ€Π°Π·Π½Ρ‹Ρ… ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΎΠ½ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ ΠΏΠΎ-Ρ€Π°Π·Π½ΠΎΠΌΡƒ. Π­Ρ‚ΠΈ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚;

  • jQuery
  • React.js
  • D3.js
  • Underscore.js
  • Lodash
  • Algolia Places
  • Anime.js

Π£ CSS Ρ‚Π°ΠΊΠΆΠ΅ Π΅ΡΡ‚ΡŒ отличная Π»ΠΈΠ½Π΅ΠΉΠΊΠ° надстроСк, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡΠ΄Π΅Π»Π°ΡŽΡ‚ ваши ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹ Π»ΡƒΡ‡ΡˆΠ΅ ΠΈ приятнСС. Π­Ρ‚ΠΈ надстройки Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ Tailwind, Foundation, CSS Wand ΠΈ Bootstrap.

ΠšΠ»ΠΈΠ΅Π½Ρ‚ΡΠΊΠΈΠ΅ ΠΈ сСрвСрныС прилоТСния

CSS, Π±ΡƒΠ΄ΡƒΡ‡ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΎΠΉ стиля, Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ΠΈΡΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π½Π° сторонС ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π°. Π―Π·Ρ‹ΠΊ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΎΠΊΠΎΠ½Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ Π²ΠΈΠ΄ Π²Π΅Π±-страницы. ПослС Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ вашСй Π²Π΅Π±-страницы с использованиСм HTML Π²Ρ‹ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ структуру, ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹, Ρ†Π²Π΅Ρ‚Π° ΠΈ ΠΎΠ±Ρ‰ΠΈΠΉ внСшний Π²ΠΈΠ΄ вашСй страницы с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ этого языка.

JavaScript ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ°ΠΊ для клиСнтских, Ρ‚Π°ΠΊ ΠΈ для сСрвСрных ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. На Π²Π΅Π±-сайтах Javascript являСтся языком клиСнтской стороны, ΠΈ послС Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½Π΅ΠΉ компиляции язык считываСт сцСнарии ΠΏΠ΅Ρ€Π΅Π΄ Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ΠΌ инструкций Π½Π° сторонС ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π°. Однако JavaScript нСбСзопасСн ΠΏΡ€ΠΈ запускС Π½Π° ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ, ΠΈ Π²Π°ΠΌ всСгда слСдуСт ΠΈΠ·Π±Π΅Π³Π°Ρ‚ΡŒ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ΠΏΠ°Ρ€ΠΎΠ»Π΅ΠΉ ΠΈ ΠΊΠΎΠ½Ρ„ΠΈΠ΄Π΅Π½Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ с использованиСм языка.

JavaScript Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π½Π° сторонС сСрвСра Π² случаС Π±Π°Π· Π΄Π°Π½Π½Ρ‹Ρ…, Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² ΠΈ нСсСрвСрных ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Π­Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ JavaScript ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ ΠΎΠ±Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Π² зависимости ΠΎΡ‚ Π²Π°ΡˆΠΈΡ… потрСбностСй Π² ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ, Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ выигрывая Π² этом сравнСнии ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ Π½Π° сторонС ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π° ΠΈ Π½Π° сторонС сСрвСра.

Π Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡ ΠΈΠΌΠ΅Π½ Ρ„Π°ΠΉΠ»ΠΎΠ²

Π’ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡ ΠΈΠΌΠ΅Π½ Ρ„Π°ΠΉΠ»ΠΎΠ² β€” это ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Ρ‹, находящиСся Π² ΠΊΠΎΠ½Ρ†Π΅ ΠΈΠΌΠ΅Π½ Ρ„Π°ΠΉΠ»ΠΎΠ². Π­Ρ‚ΠΈ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Ρ‹ ΠΈΠ΄ΡƒΡ‚ послС Ρ‚ΠΎΡ‡ΠΊΠΈ; ΠΎΠ½ΠΈ ΡΠΎΠΎΠ±Ρ‰Π°ΡŽΡ‚ ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Ρƒ, с ΠΊΠ°ΠΊΠΈΠΌ Ρ‚ΠΈΠΏΠΎΠΌ Ρ„Π°ΠΉΠ»Π° ΠΎΠ½ ΠΈΠΌΠ΅Π΅Ρ‚ Π΄Π΅Π»ΠΎ, Π΅Π³ΠΎ характСристики ΠΈ способ использования. CSS ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Β«.cssΒ» Π² качСствС Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡ ΠΈΠΌΠ΅Π½ΠΈ Ρ„Π°ΠΉΠ»Π°, Ρ‚ΠΎΠ³Π΄Π° ΠΊΠ°ΠΊ JavaScript ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΠΊΠ°ΠΊ Β«.jsΒ», Ρ‚Π°ΠΊ ΠΈ Β«.mjsΒ».

Π£ΡΡ‚ΠΎΠΉΡ‡ΠΈΠ²ΠΎΡΡ‚ΡŒ

CSS ΠΈ JavaScript ΠΏΠΎ-Ρ€Π°Π·Π½ΠΎΠΌΡƒ Ρ€Π΅Π°Π³ΠΈΡ€ΡƒΡŽΡ‚ Π½Π° ошибки. Π”Π°ΠΆΠ΅ Ссли Π²Ρ‹ Π½Π°Ρ€ΡƒΡˆΠΈΡ‚Π΅ ΠΎΠ΄Π½ΠΎ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ CSS, использованиС CSS Π½Π΅ ΠΎΠΊΠ°ΠΆΠ΅Ρ‚ сущСствСнного влияния Π½Π° всю Π²Π°ΡˆΡƒ Π²Π΅Π±-страницу. Однако Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΡ€Ρ‚ΠΈΡ‚ΡŒ свой ΠΌΠ°ΠΊΠ΅Ρ‚, Ссли пропуститС Ρ‚Π΅Π³. НСсмотря Π½Π° Ρ…Π°Ρ€Π°ΠΊΡ‚Π΅Ρ€ ошибок, ваша страница всС Ρ€Π°Π²Π½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒΡΡ, Ссли Ρ‚ΠΎΠ»ΡŒΠΊΠΎ это Π½Π΅ ΠΊΡ€Π°ΠΉΠ½ΠΈΠΉ случай.

Π‘ Π΄Ρ€ΡƒΠ³ΠΎΠΉ стороны, ΠΎΠ΄Π½Π° синтаксичСская ошибка JavaScript Ρ€Π°Π·Ρ€ΡƒΡˆΠΈΡ‚ всю Π²Π°ΡˆΡƒ страницу. НСзависимо ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, насколько ΠΌΠ°Π»Π° ошибка, Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π½Π°ΠΉΡ‚ΠΈ ΠΈ ΠΈΡΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ Π΅Π΅, ΠΏΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ ваша страница смоТСт Π²ΠΎΠ·ΠΎΠ±Π½ΠΎΠ²ΠΈΡ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ. Π’ этом процСссС Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΡ‚Π΅Ρ€ΡΡ‚ΡŒ Ρ‡Π°ΡΡ‚ΡŒ своСй Ρ€Π°Π±ΠΎΡ‚Ρ‹ ΠΈ Π² ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠΌ ΠΈΡ‚ΠΎΠ³Π΅ ΠΏΠ΅Ρ€Π΅Π΄Π΅Π»Π°Ρ‚ΡŒ ΡƒΠΆΠ΅ Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½Π½ΡƒΡŽ Ρ€Π°Π±ΠΎΡ‚Ρƒ. Π‘Π°ΠΌΠΎ собой разумССтся, Ρ‡Ρ‚ΠΎ CSS Π±ΠΎΠ»Π΅Π΅ устойчив, Ρ‡Π΅ΠΌ JavaScript. ИмСя Π΄Π΅Π»ΠΎ с JavaScript, Π²Ρ‹ всСгда Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡΠ»Π΅Π΄ΠΈΡ‚ΡŒ Π·Π° Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π² вашСй Ρ€Π°Π±ΠΎΡ‚Π΅ Π½Π΅ Π±Ρ‹Π»ΠΎ ошибок, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·Π±Π΅ΠΆΠ°Ρ‚ΡŒ нСудобств.

ΠžΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΡ

ΠžΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΡ β€” ΠΆΠΈΠ·Π½Π΅Π½Π½ΠΎ ваТная стратСгия Π² ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΎΠ½Π° позволяСт Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΡƒ ΠΌΠΎΠ΄ΠΈΡ„ΠΈΡ†ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠ΄ ΠΈΠ»ΠΈ язык для ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… аспСктов, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ, использованиС памяти ΠΈ процСссорноС врСмя. JavaScript Ρ‚Π΅Ρ€ΠΏΠΈΡ‚ Π½Π΅ΡƒΠ΄Π°Ρ‡Ρƒ Π² этом сСкторС, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Ρƒ Π½Π΅Π³ΠΎ Π½Π΅Ρ‚ доступа ΠΊ API ΠΈΠ· ΠΊΠΎΡ€ΠΎΠ±ΠΊΠΈ.

Π’ ΠΏΡ€ΠΎΡ‚ΠΈΠ²ΠΎΠΏΠΎΠ»ΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ этому CSS ΠΈΠΌΠ΅Π΅Ρ‚ Π±ΠΎΠ»Π΅Π΅ ΡˆΠΈΡ€ΠΎΠΊΠΈΠΉ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠΈ. Π”Π΅ΠΊΠ»Π°Ρ€Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ язык позволяСт Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ ΡƒΡΠΊΠΎΡ€ΠΈΡ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ своСго оборудования, Ρ‚Π΅ΠΌ самым ускоряя Ρ€Π°Π±ΠΎΡ‚Ρƒ CSS. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ свой CSS Ρ€Π°Π·Π½Ρ‹ΠΌΠΈ способами; ΡƒΠ΄Π°Π»ΠΈΡ‚Π΅ Π½Π΅Π½ΡƒΠΆΠ½Ρ‹Π΅ стили, ΠΌΠΈΠ½ΠΈΠΌΠΈΠ·ΠΈΡ€ΡƒΠΉΡ‚Π΅, ΠΊΡΡˆΠΈΡ€ΡƒΠΉΡ‚Π΅ ΠΈΠ»ΠΈ сТимайтС CSS. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚ΡŒ Π½Π΅Π½ΡƒΠΆΠ½Ρ‹ΠΉ CSS Π½Π° нСсколько Ρ„Π°ΠΉΠ»ΠΎΠ² ΠΈ эффСктивно ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚ΡŒ Π±Π»ΠΎΠΊΠΈΡ€ΠΎΠ²ΠΊΡƒ Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Π° CSS.

ΠžΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΡ CSS Π»ΡƒΡ‡ΡˆΠ΅, Ρ‡Π΅ΠΌ JavaScript. ΠŸΡ€ΠΈ Ρ…ΠΎΡ€ΠΎΡˆΠ΅ΠΉ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠΈ язык ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠΈΡ‚ΡŒ своим ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ Π±Π΅Π·ΡƒΠΏΡ€Π΅Ρ‡Π½ΡƒΡŽ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ.

Π―Π·Ρ‹ΠΊ программирования Javascript Π΄Π΅Π»Π°Π΅Ρ‚ элСмСнты HTML ΠΈ CSS Π±ΠΎΠ»Π΅Π΅ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΌΠΈ, прСдоставляя ΠΈΠΌ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ возмоТности.

Β© Good Photo Gallery/Shutterstock.com

JavaScript ΠΈ CSS: Π·Π° ΠΈ ΠΏΡ€ΠΎΡ‚ΠΈΠ²

9 0022 Π£Π½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½Ρ‹ΠΉ язык программирования
ΠŸΠ»ΡŽΡΡ‹ JavaScript ΠœΠΈΠ½ΡƒΡΡ‹ JavaScript
ΠœΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ уязвим для ΡƒΠ³Ρ€ΠΎΠ· бСзопасности, Ссли Π½Π΅Ρ‚ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ Π·Π°ΠΊΠΎΠ΄ΠΈΡ€ΠΎΠ²Π°Π½
ΠžΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΠ²Π°Π΅Ρ‚ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ ΠΈ динамичСскиС ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ интСрфСйсы ΠœΠΎΠΆΠ΅Ρ‚ Π·Π°ΠΌΠ΅Π΄Π»ΠΈΡ‚ΡŒ врСмя Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ страницы, Ссли Π½Π΅ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ
Π Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ нСпосрСдствСнно Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅, ΠΏΠΎΠ²Ρ‹ΡˆΠ°Ρ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ прилоТСния ΠœΠΎΠ³ΡƒΡ‚ Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΡƒΡ‚ΡŒ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ совмСстимости с Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠΌ
Π‘ΠΎΠ»ΡŒΡˆΠΎΠ΅ ΠΈ Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ΅ сообщСство Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² ΠΌΠΎΠΆΠ΅Ρ‚ привСсти ΠΊ ошибки Π² ΠΊΠΎΠ΄Π΅
Π‘ΠΎΠ²ΠΌΠ΅ΡΡ‚ΠΈΠΌΠΎΡΡ‚ΡŒ с ΡˆΠΈΡ€ΠΎΠΊΠΈΠΌ спСктром Π²Π΅Π±-Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² ΠΈ ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌ ΠžΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½Ρ‹ΠΉ доступ ΠΊ систСмным рСсурсам Π²Π½Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°
ΠŸΠ»ΡŽΡΡ‹ CSS ΠœΠΈΠ½ΡƒΡΡ‹ CSS
ΠœΠΎΠΆΠ΅Ρ‚ Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ внСшний Π²ΠΈΠ΄ Π²Π΅Π±-страниц ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… интСрфСйсов ΠœΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ слоТным ΠΈ слоТны Π² освоСнии для Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ…
ΠŸΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ‚ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹Ρ… ΠΈ Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΡƒΠ΅ΠΌΡ‹Ρ… Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΊ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌ устройствам ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°ΠΌ экрана ΠœΠΎΠ³ΡƒΡ‚ Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΡƒΡ‚ΡŒ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ с ΡΠΎΠ²ΠΌΠ΅ΡΡ‚ΠΈΠΌΠΎΡΡ‚ΡŒΡŽ ΠΌΠ΅ΠΆΠ΄Ρƒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ
ΠžΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΠ²Π°Π΅Ρ‚ эффСктивноС ΠΈ ΠΎΡ€Π³Π°Π½ΠΈΠ·ΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΡƒΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ стилями для ΠΊΡ€ΡƒΠΏΠ½Ρ‹Ρ… Π²Π΅Π±-ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ² Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΈ Π²Π½Π΅Π΄Ρ€Π΅Π½ΠΈΠ΅ слоТных ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ² ΠΌΠΎΠΆΠ΅Ρ‚ Π·Π°Π½ΡΡ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ
Π£ΠΏΡ€ΠΎΡ‰Π°Π΅Ρ‚ обслуТиваниС ΠΈ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠžΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½Π°Ρ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° динамичСских ΠΈ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Ρ… элСмСнтов Π±Π΅Π· JavaScript
Π‘ΠΎΠ»ΡŒΡˆΠΎΠ΅ сообщСство Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² ΠΈ рСсурсы, доступныС для ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° ΠΈ ΠΎΠ±ΡƒΡ‡Π΅Π½ΠΈΠ΅ ΠœΠΎΠΆΠ΅Ρ‚ Π½Π΅ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ для всСх случаСв использования Π² Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π½Π° сторонС сСрвСра

JavaScript ΠΈ CSS: 7 Ρ„Π°ΠΊΡ‚ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π·Π½Π°Ρ‚ΡŒ

ΠœΡ‹ ΡƒΠΆΠ΅ рассказали, Ρ‡Π΅ΠΌ ΠΎΡ‚Π»ΠΈΡ‡Π°ΡŽΡ‚ΡΡ JavaScript ΠΈ CSS, ΠΈ Π²ΠΎΡ‚ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Π°ΠΆΠ½Ρ‹Π΅ Ρ„Π°ΠΊΡ‚Ρ‹ ΠΎΠ± этих Π΄Π²ΡƒΡ… языках программирования.

  • CSS ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π½Π° Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠΉ сторонС Π²Π΅Π±-страниц для ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡ внСшнСго Π²ΠΈΠ΄Π°, ΠΌΠ°ΠΊΠ΅Ρ‚Π° ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ… Π²ΠΈΠ΄ΠΈΠΌΡ‹Ρ… ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ². JavaScript фокусируСтся Π½Π° Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ Π²Π΅Π΄ΡƒΡ‚ сСбя Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ элСмСнты вашСй Π²Π΅Π±-страницы, добавляя Π½Π° страницу Ρ†Π΅Π½Π½Ρ‹Π΅ инструмСнты.
  • Π§Ρ‚ΠΎ касаСтся обучСния, Ρ‚ΠΎ ΠΎΠ±Π° языка слоТны, ΠΈ Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ½ΡΡ‚ΡŒ ΠΈΡ… ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ, потрСбуСтся ΠΌΠ½ΠΎΠ³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ. Однако Π² JavaScript ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ базовая Π»ΠΎΠ³ΠΈΠΊΠ° программирования, ΠΈ с Π΅Π³ΠΎ ошибками слоТнСС ΡΠΏΡ€Π°Π²ΠΈΡ‚ΡŒΡΡ, Ρ‡Π΅ΠΌ с CSS, ΠΈ, ΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ, Π΅Π³ΠΎ слоТнСС ΠΈΠ·ΡƒΡ‡ΠΈΡ‚ΡŒ.
  • CSS совмСстим со всСми Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ, Ρ‚ΠΎΠ³Π΄Π° ΠΊΠ°ΠΊ JavaScript сталкиваСтся с ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°ΠΌΠΈ совмСстимости ΠΈ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² основных Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…. ΠŸΡ€ΠΎΠ±Π»Π΅ΠΌΠ° совмСстимости Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ‚ ΠΈΠ·-Π·Π° Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ каТдая вСрсия JavaScript совмСстима со своим Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠΌ.
  • JavaScript ΠΈ CSS постоянно Ρ€Π°Π·Π²ΠΈΠ²Π°ΡŽΡ‚ΡΡ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ΄Ρ‚ΠΈ Π² Π½ΠΎΠ³Ρƒ с послСдними тСндСнциями ΠΈ тСхнологиями Π² Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅. НапримСр, Π½Π΅Π΄Π°Π²Π½ΠΈΠ΅ обновлСния CSS Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Ρ…, ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² сСтки ΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, Π² Ρ‚ΠΎ врСмя ΠΊΠ°ΠΊ JavaScript стал свидСтСлСм Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ Π½ΠΎΠ²Ρ‹Ρ… Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ ΠΈ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠ², Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ React ΠΈ Vue. js, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡƒΠΏΡ€ΠΎΡ‰Π°ΡŽΡ‚ созданиС слоТных Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ.
  • CSS ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Β«.cssΒ» Π² качСствС Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡ ΠΈΠΌΠ΅Π½ΠΈ Ρ„Π°ΠΉΠ»Π°, Ρ‚ΠΎΠ³Π΄Π° ΠΊΠ°ΠΊ JavaScript ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΠΊΠ°ΠΊ Β«.jsΒ», Ρ‚Π°ΠΊ ΠΈ Β«.mjsΒ».
  • CSS Π±ΠΎΠ»Π΅Π΅ устойчив, Ρ‡Π΅ΠΌ JavaScript, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΎΠ΄Π½Π° ошибка CSS Π½Π΅ сильно влияСт Π½Π° Π²Π΅Π±-страницу. Однако ΠΏΡ€ΠΈ использовании JavaScript Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΈΡΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ Π»ΡŽΠ±ΡƒΡŽ ΡΠΈΠ½Ρ‚Π°ΠΊΡΠΈΡ‡Π΅ΡΠΊΡƒΡŽ ΠΎΡˆΠΈΠ±ΠΊΡƒ, ΠΈΠ½Π°Ρ‡Π΅ страница Π½Π΅ запустится. Π­Ρ‚ΠΈ ошибки Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠ³ΡƒΡ‚ привСсти ΠΊ ΠΏΠΎΡ‚Π΅Ρ€Π΅ части Ρ€Π°Π±ΠΎΡ‚Ρ‹.
  • CSS ΠΈΠΌΠ΅Π΅Ρ‚ Π±ΠΎΠ»Π΅Π΅ ΡˆΠΈΡ€ΠΎΠΊΡƒΡŽ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠΈ, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΡƒΡŽ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ ΡƒΠ»ΡƒΡ‡ΡˆΠ°Ρ‚ΡŒ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ аспСкты ΠΊΠΎΠ΄Π° для удобства. JavaScript Π½Π΅ позволяСт ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ Ρƒ Π½Π΅Π³ΠΎ Π½Π΅Ρ‚ доступа ΠΊ API ΠΈΠ· ΠΊΠΎΡ€ΠΎΠ±ΠΊΠΈ.

JavaScript ΠΈ CSS: Ρ‡Ρ‚ΠΎ Π»ΡƒΡ‡ΡˆΠ΅? Какой ΠΈΠ· Π½ΠΈΡ… Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ?

Π§Ρ‚ΠΎ Π»ΡƒΡ‡ΡˆΠ΅ ΠΌΠ΅ΠΆΠ΄Ρƒ JavaScript ΠΈ CSS? JavaScript Π±ΠΎΠ»Π΅Π΅ ΠΏΡ€ΠΎΠ΄Π²ΠΈΠ½ΡƒΡ‚, Ρ‡Π΅ΠΌ CSS, ΠΊΠΎΠ³Π΄Π° Π΄Π΅Π»ΠΎ Π΄ΠΎΡ…ΠΎΠ΄ΠΈΡ‚ Π΄ΠΎ Π²Π΅Π±-планирования. JavaScript ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ мноТСство Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ, ΠΎΡ‚ создания Тивости Π΄ΠΎ добавлСния ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… инструмСнтов ΠΈ элСмСнтов страницы. По ΡΡ€Π°Π²Π½Π΅Π½ΠΈΡŽ с CSS, JavaScript Π»ΡƒΡ‡ΡˆΠ΅, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ CSS ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡ΠΈΠ²Π°ΡŽΡ‚ΡΡ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΎΠΉ ΠΏΠ»Π°Π½Π° Π²Π΅Π±-сайта, эстСтики, ΠΎΡ‚Ρ‚Π΅Π½ΠΊΠΎΠ², Ρ‚Π°Π±Π»ΠΈΡ† ΠΈ Π±Π»ΠΎΠΊΠΎΠ², срСди ΠΏΡ€ΠΎΡ‡Π΅Π³ΠΎ.

Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Π² этом сравнСнии JavaScript Π²Ρ‹ΠΈΠ³Ρ€Ρ‹Π²Π°Π΅Ρ‚ благодаря своСй ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ Π² Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π°Ρ… использования. Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, CSS ΠΏΠΎ-ΠΏΡ€Π΅ΠΆΠ½Π΅ΠΌΡƒ являСтся ΡΠΈΠ»ΡŒΠ½Ρ‹ΠΌ ΠΏΡ€ΠΎΡ‚ΠΈΠ²Π½ΠΈΠΊΠΎΠΌ, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ это Π²Π°ΠΆΠ½Ρ‹ΠΉ язык Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ Π²Π΅Π±-сайтов. Π•Π³ΠΎ прСимущСства Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ Π² сСбя ΠΏΡ€Π΅Π²ΠΎΡΡ…ΠΎΠ΄Π½ΡƒΡŽ ΡΠΎΠ²ΠΌΠ΅ΡΡ‚ΠΈΠΌΠΎΡΡ‚ΡŒ с Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ, Π»ΡƒΡ‡ΡˆΡƒΡŽ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΡŽ, Π·Π°ΠΌΠ΅Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½ΡƒΡŽ ΠΎΡ‚ΠΊΠ°Π·ΠΎΡƒΡΡ‚ΠΎΠΉΡ‡ΠΈΠ²ΠΎΡΡ‚ΡŒ ΠΈ простоту обучСния.

Какой ΠΈΠ· Π½ΠΈΡ… Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ? Π’Π°Ρˆ ΠΈΠ΄Π΅Π°Π»ΡŒΠ½Ρ‹ΠΉ язык зависит ΠΎΡ‚ Π²Π°ΡˆΠΈΡ… ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹Ρ… потрСбностСй. Если Π²Π°ΠΌ Π½ΡƒΠΆΠ΅Π½ язык программирования, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ ΠΎΠ±Ρ‰ΠΈΠΉ Π²ΠΈΠ΄ вашСго ΡƒΠΆΠ΅ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½Π½ΠΎΠ³ΠΎ Π²Π΅Π±-сайта, CSS ΠΏΠΎΠ΄ΠΎΠΉΠ΄Π΅Ρ‚ Π²Π°ΠΌ Π»ΡƒΡ‡ΡˆΠ΅ всСго. Однако, Ссли Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Π² элСмСнты вашСго Π²Π΅Π±-сайта, JavaScript ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Π²Π°ΠΌ.

JavaScript ΠΈ CSS: Π² Ρ‡Π΅ΠΌ Ρ€Π°Π·Π½ΠΈΡ†Π° ΠΈ Ρ‡Ρ‚ΠΎ Π»ΡƒΡ‡ΡˆΠ΅? FAQs (Часто Π·Π°Π΄Π°Π²Π°Π΅ΠΌΡ‹Π΅ вопросы)Β 

Какой язык ΠΌΠ½Π΅ слСдуСт ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ, JavaScript ΠΈΠ»ΠΈ CSS?

JavaScript ΠΈ CSS слуТат Ρ€Π°Π·Π½Ρ‹ΠΌ цСлям Π² Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅, ΠΈ ΠΎΠ±Π° ΡΠ²Π»ΡΡŽΡ‚ΡΡ Π²Π°ΠΆΠ½Ρ‹ΠΌΠΈ инструмСнтами Π² Π½Π°Π±ΠΎΡ€Π΅ инструмСнтов Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°. JavaScript β€” это язык программирования, ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΠ²Π°ΡŽΡ‰ΠΈΠΉ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ ΠΈ динамичСскиС ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ интСрфСйсы, Π° CSS β€” это язык Ρ‚Π°Π±Π»ΠΈΡ† стилСй, ΡƒΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠΉ внСшним Π²ΠΈΠ΄ΠΎΠΌ Π²Π΅Π±-страниц. Π’ зависимости ΠΎΡ‚ Ρ‚Ρ€Π΅Π±ΠΎΠ²Π°Π½ΠΈΠΉ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΡ‚Ρ€Π΅Π±ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ±Π° языка вмСстС для создания ΠΏΠΎΠ»Π½ΠΎΡ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΈ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Ρ€Π΅Ρ‡ΡŒ ΠΈΠ΄Π΅Ρ‚ Π½Π΅ ΠΎ Π²Ρ‹Π±ΠΎΡ€Π΅ ΠΌΠ΅ΠΆΠ΄Ρƒ JavaScript ΠΈ CSS, Π° ΠΎΠ± использовании ΠΈΡ… Π² сочСтании для достиТСния ΠΆΠ΅Π»Π°Π΅ΠΌΠΎΠ³ΠΎ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π°.

Π’ Ρ‡Π΅ΠΌ основноС Ρ€Π°Π·Π»ΠΈΡ‡ΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρƒ CSS ΠΈ JavaScript?

JavaScript ΠΈ CSS ΠΈΠ³Ρ€Π°ΡŽΡ‚ Ρ€Π°Π·Π½Ρ‹Π΅ Ρ€ΠΎΠ»ΠΈ Π½Π° HTML-страницах. CSS ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ Π²Π΅Π±-сайтов для создания ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½Π½Ρ‹Ρ… ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… интСрфСйсов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π·Π°ΡΡ‚Π°Π²Π»ΡΡŽΡ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ ΠΏΠΎΠ»ΡƒΡ‡Π°Ρ‚ΡŒ ΡƒΠ΄ΠΎΠ²ΠΎΠ»ΡŒΡΡ‚Π²ΠΈΠ΅ ΠΎΡ‚ использования Π²Π΅Π±-сайта. JavaScript ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ Π² построСнии чСловСчСского взаимодСйствия Π½Π° Π²Π΅Π±-страницах, назначая Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌ элСмСнтам Π²Π΅Π±-страницы.

Π§Ρ‚ΠΎ Π»Π΅Π³Ρ‡Π΅ Π²Ρ‹ΡƒΡ‡ΠΈΡ‚ΡŒ, JavaScript ΠΈΠ»ΠΈ CSS?

Π‘ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² ΡΡ‡ΠΈΡ‚Π°ΡŽΡ‚, Ρ‡Ρ‚ΠΎ CSS Π»Π΅Π³Ρ‡Π΅ ΠΈΠ·ΡƒΡ‡ΠΈΡ‚ΡŒ, Ρ‡Π΅ΠΌ JavaScript, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΎΠ½ ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ Π² ΠΏΠ΅Ρ€Π²ΡƒΡŽ ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ Π½Π° Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠ΅ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ Π²Π΅Π±-страниц, Π° Π½Π΅ Π½Π° Π»ΠΎΠ³ΠΈΠΊΡƒ программирования. CSS Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΠΌΠ΅Π΅Ρ‚ Π±ΠΎΠ»Π΅Π΅ простой синтаксис ΠΈ Π±ΠΎΠ»Π΅Π΅ ΠΏΡ€ΠΎΡΡ‚ΡƒΡŽ ΠΊΡ€ΠΈΠ²ΡƒΡŽ обучСния, Ρ‡Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ Π΅Π³ΠΎ доступным для Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ…, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π°Ρ‡Π°Ρ‚ΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ. Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, ΠΎΠ±Π° языка Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‚ ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠΈ ΠΈ самоотвСрТСнности для освоСния, ΠΈ Π² ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠΌ ΠΈΡ‚ΠΎΠ³Π΅ это зависит ΠΎΡ‚ ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡƒΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ стиля обучСния ΠΈ ΠΎΠΏΡ‹Ρ‚Π°.

ΠžΠ±ΠΎΠ±Ρ‰ΠΈΡ‚Π΅ свой ΠΎΡ‚Π²Π΅Ρ‚ Π² нСбольшой Π°Π±Π·Π°Ρ†

JavaScript ΠΌΠΎΠΆΠ΅Ρ‚ Π΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ HTML ΠΈ CSS Π½Π΅ ΠΌΠΎΠ³ΡƒΡ‚, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ ΠΈ динамичСскоС ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π½Π° Π²Π΅Π±-страницы. JavaScript ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для создания Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ, управляСмых событиями, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ рСакция Π½Π° Ρ‰Π΅Π»Ρ‡ΠΊΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ, наТатия клавиш ΠΈΠ»ΠΈ двиТСния ΠΌΡ‹ΡˆΠΈ, Π² Ρ‚ΠΎ врСмя ΠΊΠ°ΠΊ HTML ΠΈ CSS Π² основном ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Ρ‹ Π½Π° статичСскоС содСрТимоС страницы ΠΈ прСдставлСниС. JavaScript Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для Π±ΠΎΠ»Π΅Π΅ слоТных Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠ° Ρ„ΠΎΡ€ΠΌΡ‹, Π²Π΅Π±-ΠΈΠ³Ρ€Ρ‹ ΠΈ динамичСская анимация. Π’ Ρ‚ΠΎ врСмя ΠΊΠ°ΠΊ CSS ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ простыС Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΈ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Ρ‹, JavaScript Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌ для Π±ΠΎΠ»Π΅Π΅ слоТных ΠΈ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Ρ… Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΉ. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, JavaScript позволяСт Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ Π΄ΠΈΠ½Π°ΠΌΠΈΡ‡Π½Ρ‹Π΅ ΠΈ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Π²Π΅Π±-прилоТСния, Π° HTML ΠΈ CSS слуТат ΡΡ‚Ρ€ΠΎΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ Π±Π»ΠΎΠΊΠ°ΠΌΠΈ для структуры ΠΈ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ прСдставлСния Π²Π΅Π±-страниц.

Бколько Ρ‚ΠΈΠΏΠΎΠ² ошибок сущСствуСт Π² JavaScript?

Ошибки JavaScript ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚ΡŒ Π½Π° сСмь Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΉ, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ синтаксичСскиС ошибки, ошибки ссылок, ошибки Ρ‚ΠΈΠΏΠΎΠ², ошибки ΠΎΡ†Π΅Π½ΠΊΠΈ, ошибки Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°, ошибки URI ΠΈ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ ошибки.

HTML, CSS ΠΈ Javascript: Π² Ρ‡Π΅ΠΌ Ρ€Π°Π·Π½ΠΈΡ†Π°?

Когда Π²Ρ‹ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΡƒΠ΅Ρ‚Π΅ ΠΈΠ»ΠΈ Ρ€Π°Π·Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Π΅Ρ‚Π΅ Π²Π΅Π±-сайт, Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π·Π½Π°Ρ‚ΡŒ Ρ‚Ρ€ΠΈ Ρ€Π°Π·Π½Ρ‹Ρ… языка кодирования: HTML, CSS ΠΈ JavaScript .

HTML: содСрТаниС ΠΈ ΠΌΠ°ΠΊΠ΅Ρ‚

HTML β€” это язык, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ опрСдСляСт, ΠΊΠ°ΠΊ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Ρ‹ ΠΈ Π²Π΅Π±-страницы ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ Π² Π²Π΅Π±-Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅, язык для ΡΡ‚Ρ€ΠΎΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… Π±Π»ΠΎΠΊΠΎΠ² любого Π²Π΅Π±-сайта.

CSS: стилизация ΠΈ внСшний Π²ΠΈΠ΄

CSS (каскадныС Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй) β€” это популярный язык Ρ‚Π°Π±Π»ΠΈΡ† стилСй, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ опрСдСляСт ΡΡ‚ΠΈΠ»ΡŒ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°, созданного Π² HTML (Ρ†Π²Π΅Ρ‚Π°, стили ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ², ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΈ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ).

JavaScript: ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ элСмСнты

JavaScript позволяСт Π²Π°ΠΌ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ элСмСнты CSS ΠΈ HTML Π½Π° вашСм Π²Π΅Π±-сайтС послС Π΅Π³ΠΎ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ, Ρ‡Ρ‚ΠΎ Π΄Π°Π΅Ρ‚ Π²Π°ΠΌ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ваш сайт Π±ΠΎΠ»Π΅Π΅ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΌ ΠΈ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, встроСнных Π²ΠΈΠ΄Π΅ΠΎΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»ΠΎΠ² ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ³ΠΎ Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ.

Π­Ρ‚ΠΈ Ρ‚Ρ€ΠΈ языка программирования ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΡΠ²Π»ΡΡŽΡ‚ΡΡ основой любого Π²Π΅Π±-сайта, поэтому Π²Π°ΠΆΠ½ΠΎ Π·Π½Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊ эти языки ΠΏΠΎΠ²Π»ΠΈΡΡŽΡ‚ Π½Π° ваш Π²Π΅Π±-сайт ΠΈ для Ρ‡Π΅Π³ΠΎ ΠΎΠ½ΠΈ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ.

Π§Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π΄Π΅Π»Π°Ρ‚ΡŒ с ΠΊΠ°ΠΆΠ΄Ρ‹ΠΌ языком программирования?
  • Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ HTML Π²Ρ‹ смоТСтС ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ структуру своСго Π²Π΅Π±-сайта.
  • CSS позволяСт ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π²Π΅Π±-сайт Π±ΠΎΠ»Π΅Π΅ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ.
  • Π§Ρ‚ΠΎ касаСтся JavaScript, это Π½Π°Π΄Π΅ΠΆΠ½Ρ‹ΠΉ язык программирования, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ позволяСт Π²Π°ΠΌ эффСктивно ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ HTML ΠΈ CSS вашСго Π²Π΅Π±-сайта, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ‚ΠΎΡ‡Π½ΠΎ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ вашим спСцификациям.

Если Ρƒ вас Π΅ΡΡ‚ΡŒ Π²Π΅Π±-сайт, Π½ΠΎ Π²Ρ‹ ΠΌΠ°Π»ΠΎ Ρ‡Ρ‚ΠΎ Π·Π½Π°Π΅Ρ‚Π΅ ΠΎ ΠΊΠΎΠ΄ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ, Π·Π½Π°Π½ΠΈΠ΅ Ρ€Π°Π·Π½ΠΈΡ†Ρ‹ ΠΌΠ΅ΠΆΠ΄Ρƒ этими трСмя языками программирования Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΏΠΎΠΌΠΎΡ‡ΡŒ Π²Π°ΠΌ Π»ΡƒΡ‡ΡˆΠ΅ ΠΏΠΎΠ½ΡΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π²Ρ…ΠΎΠ΄ΠΈΡ‚ Π² Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΡƒ Π²Π΅Π±-сайта. Если ΠΊΠΎΠ³Π΄Π°-Π»ΠΈΠ±ΠΎ Π²ΠΎΠ·Π½ΠΈΠΊΠ½Π΅Ρ‚ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° с ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠΌ вашСго сайта, Ρ‡Π΅Ρ‚ΠΊΠΎΠ³ΠΎ прСдставлСния ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽΡ‚ собой эти языки программирования, ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ достаточно, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΌΠΎΡ‡ΡŒ Π²Π°ΠΌ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ Π΄ΠΈΠ°Π³Π½ΠΎΡΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€ΠΈΡ‡ΠΈΠ½Ρƒ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ ΠΈ способы Π΅Π΅ устранСния.

Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΉ ΡΡ‚Π°Ρ‚ΡŒΠ΅ прСдставлСно ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎΠ΅ сравнСниС языков программирования HTML, CSS ΠΈ JavaScript.

Π’Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° ΠΈ языки кодирования

Π’Π΅Π±-сайты ΠΌΠΎΠ³ΡƒΡ‚ Ρ€Π°Π·Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Ρ‚ΡŒΡΡ с использованиСм ΡˆΠΈΡ€ΠΎΠΊΠΎΠ³ΠΎ спСктра Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… языков кодирования ΠΈ программирования, Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΠ· ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… слоТнСС Π΄Ρ€ΡƒΠ³ΠΈΡ…. НСкоторыС ΠΈΠ· Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ распространСнных языков Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ HTML, CSS, JavaScript, PHP, Python, Ruby ΠΈ SQL. Π₯отя Ruby ΠΈ PHP Ρ‡Ρ€Π΅Π·Π²Ρ‹Ρ‡Π°ΠΉΠ½ΠΎ популярны срСди ΠΏΡ€Π΅Π΄ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Ρ‚Π΅Π»Π΅ΠΉ, стартапов ΠΈ Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ², основных языков HTML, CSS ΠΈ JavaScript Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ достаточно, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ поняли основы Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ.

ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· этих языков Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ΠΈΠΌΠ΅Π΅Ρ‚ Ρ€Π°Π·Π»ΠΈΡ‡Π½ΠΎΠ΅ Π½Π°Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ . НапримСр, Ruby β€” это ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅ΠΌΡ‹ΠΉ ΠΈ быстрый язык программирования, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠΌΠΎΡ‡ΡŒ Π²Π°ΠΌ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΎΠ±ΡˆΠΈΡ€Π½Ρ‹ΠΉ Π²Π΅Π±-сайт ΠΈΠ»ΠΈ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡƒ Π·Π° ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΈΠΉ ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΎΠΊ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ. Π’ сочСтании с Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠΌ Ruby on Rails этот язык Π΄Π°Π΅Ρ‚ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ практичСски всС Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΠ΅ для создания Π²Π΅Π±-сайта. Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ‚Π°ΠΊΠΎΠ³ΠΎ языка, ΠΊΠ°ΠΊ SQL, Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π³ΠΎΡ€Π°Π·Π΄ΠΎ ΠΏΡ€ΠΎΡ‰Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒ ΠΈ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ большиС Π±Π°Π·Ρ‹ Π΄Π°Π½Π½Ρ‹Ρ….

Π Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ Ρ‚ΠΈΠΏΡ‹ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ² ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ Ρ€Π°Π·Π½Ρ‹Π΅ языки ΠΊΠΎΠ΄Π°. Π£ ΠΌΠ½ΠΎΠ³ΠΈΡ… ΠΏΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Ρ… Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² Ρ‚Π°ΠΊΠΆΠ΅ Π΅ΡΡ‚ΡŒ свои прСдпочтСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠ½ΠΈ Π±ΡƒΠ΄ΡƒΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ, Π΄Π°ΠΆΠ΅ Ссли Π΄Ρ€ΡƒΠ³ΠΈΠ΅ языки программирования окаТутся Π±ΠΎΠ»Π΅Π΅ популярными. Π Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡ‹ построСны Π½Π° Ρ€Π°Π·Π½Ρ‹Ρ… языках. НапримСр, WordPress построСн Π² основном с использованиСм ΠΌΠΎΡ‰Π½ΠΎΠ³ΠΎ PHP-ΠΊΠΎΠ΄Π°, хотя Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ HTML ΠΈ CSS.

Основной язык, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅, зависит ΠΎΡ‚ вашСго ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠ³ΠΎ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° ΠΈ Π²Π°ΡˆΠΈΡ… бизнСс-Ρ†Π΅Π»Π΅ΠΉ. ΠžΠΏΡ€Π΅Π΄Π΅Π»ΠΈΠ² эти Ρ†Π΅Π»ΠΈ, Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π»ΡƒΡ‡ΡˆΠ΅ ΠΏΠΎΠ½ΡΡ‚ΡŒ, ΠΊΠ°ΠΊΠΈΠ΅ языки ΠΈΠ΄Π΅Π°Π»ΡŒΠ½Ρ‹ ΠΏΡ€ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ Π²Π΅Π±-сайта ΠΈΠ»ΠΈ прилоТСния.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ HTML?

HTML β€” это язык программирования, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ€Π°ΡΡˆΠΈΡ„Ρ€ΠΎΠ²Ρ‹Π²Π°Π΅Ρ‚ΡΡ ΠΊΠ°ΠΊ язык гипСртСкстовой Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ. Π­Ρ‚ΠΎ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ простой, Π½ΠΎ ΠΌΠΎΡ‰Π½Ρ‹ΠΉ язык программирования, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ позволяСт Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ ΠΈ Π²Π»Π°Π΄Π΅Π»ΡŒΡ†Π°ΠΌ Π²Π΅Π±-сайтов ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ структуру своих Π²Π΅Π±-сайтов. Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π² сообщСнии Π±Π»ΠΎΠ³Π° Π±Ρ‹Π»ΠΎ Π²Ρ‹Π΄Π΅Π»Π΅Π½ΠΎ ΠΏΠΎΠ»ΡƒΠΆΠΈΡ€Π½Ρ‹ΠΌ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠΌ, для этого ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ HTML. ΠŸΡ€ΠΈ использовании этой систСмы Π»ΡŽΠ±Ρ‹Π΅ тСкстовыС Ρ„Π°ΠΉΠ»Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Ρ‹ для эффСктов, Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ, ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² ΠΈΠ»ΠΈ Ρ†Π²Π΅Ρ‚ΠΎΠ². Если Π²Ρ‹ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ использовали ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ язык программирования Π² ΠΏΡ€ΠΎΡˆΠ»ΠΎΠΌ, HTML Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΌ мСстом для Π½Π°Ρ‡Π°Π»Π°. Π˜ΠΌΠ΅ΠΉΡ‚Π΅ Π² Π²ΠΈΠ΄Ρƒ, Ρ‡Ρ‚ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° HTML ΡƒΠ»ΡƒΡ‡ΡˆΠ°Π΅Ρ‚ΡΡ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS ΠΈ JavaScript, поэтому рСкомСндуСтся сначала ΠΈΠ·ΡƒΡ‡ΠΈΡ‚ΡŒ этот язык программирования.

Π§Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π΄Π΅Π»Π°Ρ‚ΡŒ с HTML?

Основная ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π°, ΠΏΠΎ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Π²Π°ΠΆΠ½ΠΎ Π·Π½Π°Ρ‚ΡŒ HTML, Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ позволяСт Π²Π°ΠΌ, ΠΊΠ°ΠΊ Π²Π»Π°Π΄Π΅Π»ΡŒΡ†Ρƒ Π²Π΅Π±-сайта, ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π±Π°Π·ΠΎΠ²ΡƒΡŽ структуру вашСго Π²Π΅Π±-сайта , ΠΈΠ· ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ любой Π΄Ρ€ΡƒΠ³ΠΎΠΉ язык кодирования для ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡ Π΄ΠΈΠ·Π°ΠΉΠ½Π°.

  • ИмСя Π±Π°Π·ΠΎΠ²Ρ‹Π΅ знания HTML, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŒ ΠΈ Π³ΠΈΠ±ΠΊΠΎΡΡ‚ΡŒ своСго Π²Π΅Π±-сайта.
  • Зная этот ΠΊΠΎΠ΄, Π²Ρ‹ смоТСтС Π²Π½ΠΎΡΠΈΡ‚ΡŒ свои собствСнныС измСнСния.
  • НСкоторыС ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡ‹ автоматичСски Ρ€Π΅Π°Π»ΠΈΠ·ΡƒΡŽΡ‚ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ ΠΈΠ· Π±ΠΎΠ»Π΅Π΅ слоТных Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π²Π΅Π±-сайта, Ρ‡Ρ‚ΠΎ Π΄Π°Π΅Ρ‚ Π²Π°ΠΌ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π²Π½ΠΎΡΠΈΡ‚ΡŒ нСбольшиС измСнСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ внСсти с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ HTML.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ CSS?

CSS β€” это язык Ρ‚Π°Π±Π»ΠΈΡ† стилСй, ΠΏΠΎΡ‡Ρ‚ΠΈ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ Π½Π° ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΠ΅ прСдставлСния HTML-элСмСнтов. Π₯отя CSS являСтся статичСским языком программирования, Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ваш Π²Π΅Π±-сайт выглядСл Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ ΠΈ соврСмСнным. Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ваш Π²Π΅Π±-сайт ΠΈΠΌΠ΅Π» Π³Π»Π°Π΄ΠΊΠΈΠΉ ΠΈ ΡΡ‚ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ язык программирования CSS. ИмСя Π±Π°Π·ΠΎΠ²ΠΎΠ΅ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅ CSS, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Π½ΠΎΡΠΈΡ‚ΡŒ измСнСния Π² ΠΎΠ±Ρ‰ΠΈΠΉ внСшний Π²ΠΈΠ΄ своСго Π²Π΅Π±-сайта, Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ внСшний Π²ΠΈΠ΄ вашСго Π²Π΅Π±-сайта соотвСтствовал эстСтикС вашСго Π±Ρ€Π΅Π½Π΄Π°.

Π§Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS?

НСсмотря Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ CSS Π² основном ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для создания статичСских Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹Ρ… эффСктов, послСдниС вСрсии языка программирования ΠΏΡ€Π΅Π΄Π»Π°Π³Π°ΡŽΡ‚ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ для создания ΠΎΡ‡Π΅Π½ΡŒ простых Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΉ.

  • Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ тСкста Π½Π° Π²Π΅Π±-страницС, Π±Π°Π·ΠΎΠ²Ρ‹ΠΉ CSS ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ Π²Π°ΠΌ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ это, Π΄ΠΎΠ±Π°Π²ΠΈΠ² ΠΊΠΎΠ΄ «стиля» Π² ΠΊΠΎΠ΄ HTML, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΡƒΠΆΠ΅ находится Π½Π° вашСй страницС.
  • Наряду с прСдставлСниСм HTML, CSS Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для измСнСния ΠΌΠ°ΠΊΠ΅Ρ‚Π° ΠΈ форматирования вашСго Π²Π΅Π±-сайта.
  • Как Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π²Ρ‹ освоитС основы CSS, Π²Ρ‹ смоТСтС ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ внСшний Π²ΠΈΠ΄ своСго Π²Π΅Π±-сайта ΠΈ всСго HTML-ΠΊΠΎΠ΄Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ ΡƒΠΆΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ Π² Π΄ΠΈΠ·Π°ΠΉΠ½.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ JavaScript?

JavaScript являСтся ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· самых Π²Π°ΠΆΠ½Ρ‹Ρ… языков программирования для Π²Π»Π°Π΄Π΅Π»ΡŒΡ†Π΅Π² Π²Π΅Π±-сайтов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ хотят ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ свой сайт Π±ΠΎΠ»Π΅Π΅ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΌ, Ρ‡Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ Π΅Π³ΠΎ самым слоТным ΠΈΠ· Ρ‚Ρ€Π΅Ρ… стандартных языков программирования, описанных Π² этой ΡΡ‚Π°Ρ‚ΡŒΠ΅. Π’ Ρ‚ΠΎ врСмя ΠΊΠ°ΠΊ HTML обСспСчиваСт структуру Π²Π΅Π±-сайта, Π° CSS позволяСт ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ прСдставлСниСм сайта, язык программирования JavaScript прСдоставляСт инструмСнты, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Π΅ для измСнСния повСдСния Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… элСмСнтов, находящихся Π½Π° страницС Π²Π΅Π±-сайта. Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ этого инструмСнта Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ интСрактивности ΠΊ элСмСнтам CSS ΠΈ HTML Π½Π° своСм Π²Π΅Π±-сайтС, Ρ‡Ρ‚ΠΎ Π½Π°ΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ рСкомСндуСтся, Ссли Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ваш Π²Π΅Π±-сайт ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Π» Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ соврСмСнного покупатСля.

Π‘ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ соврСмСнных Π²Π΅Π±-сайтов снабТСны ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ мСню, Π½Π°ΠΆΠ°Ρ‚ΠΈΠ΅ΠΌ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ Π²Ρ‹Π±ΠΎΡ€ областСй Π½Π° Π²Π΅Π±-сайтС, ΠΊ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ. Кнопка мСню ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ нСбольшоС мСню сбоку страницы, Ρ‡Ρ‚ΠΎ добавляСт интСрактивности самой страницС. ВсС это Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π½Π° JavaScript ΠΈ ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ваш сайт Π±ΠΎΠ»Π΅Π΅ соврСмСнным ΠΈ слоТным.

Обладая Π±Π°Π·ΠΎΠ²Ρ‹ΠΌΠΈ знаниями JavaScript, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΌΠ°Π½ΠΈΠΏΡƒΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌΠΈ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΌΠΈ функциями вашСго Π²Π΅Π±-сайта для выполнСния ΡˆΠΈΡ€ΠΎΠΊΠΎΠ³ΠΎ спСктра дСйствий. Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΠΌΠ΅Ρ‚ΡŒ ΠΏΠΎΠ»Π½Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŒ Π½Π°Π΄ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ ΠΈ функциями вашСго Π²Π΅Π±-сайта, Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π·Π½Π°Ρ‚ΡŒ хотя Π±Ρ‹ Ρ‡Π°ΡΡ‚ΡŒ ΠΊΠΎΠ΄Π°, связанного с JavaScript.

Π§Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π΄Π΅Π»Π°Ρ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ JavaScript?

Π’ΠΈΠΏΡ‹ Π²Π΅Ρ‰Π΅ΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄Π΅Π»Π°Ρ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ JavaScript, практичСски Π±Π΅Π·Π³Ρ€Π°Π½ΠΈΡ‡Π½Ρ‹. Π­Ρ‚ΠΎΡ‚ язык программирования ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π²Π°ΠΌ инструмСнты, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Π΅ для:

  • создания ΠΊΠ°Π»ΡŒΠΊΡƒΠ»ΡΡ‚ΠΎΡ€Π° для вашСго Π²Π΅Π±-сайта
  • создания Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… сочСтаний клавиш, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ Π»Π΅Π³ΠΊΠΎ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ Π½Π° Π΄Ρ€ΡƒΠ³ΠΈΠ΅ страницы
  • ВоспроизвСдСниС Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°ΡŽΡ‚ страницу Π²Π½ΠΈΠ·

ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ элСмСнты HTML ΠΈ CSS с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ JavaScript, ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΠ΅ этого языка ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΎΡ‡Π΅Π½ΡŒ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΌ.

Π›ΡƒΡ‡ΡˆΠΈΠ΅ рСсурсы для изучСния языков Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ

Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ свои знания ΠΈ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΌΠ½ΠΎΠ³ΠΈΡ… распространСнных языков Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ, сущСствуСт мноТСство Π·Π°ΠΌΠ΅Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… рСсурсов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ позволят Π²Π°ΠΌ ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ свои Π½Π°Π²Ρ‹ΠΊΠΈ Π² этой области. НСзависимо ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊΠΎΠΉ язык программирования Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΠ·ΡƒΡ‡Π°Ρ‚ΡŒ, Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅ Π΅ΡΡ‚ΡŒ бСсплатныС рСсурсы, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ прСдоставят Π²Π°ΠΌ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ для понимания основ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π΅Π³ΠΎ языка. Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡΠΎΡΡ€Π΅Π΄ΠΎΡ‚ΠΎΡ‡ΠΈΡ‚ΡŒΡΡ Π² ΠΏΠ΅Ρ€Π²ΡƒΡŽ ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ Π½Π° ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΠΈ интСрфСйсных элСмСнтов вашСго Π²Π΅Π±-сайта, Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ Π²Π°ΠΆΠ½Ρ‹ΠΌΠΈ языками для изучСния ΡΠ²Π»ΡΡŽΡ‚ΡΡ HTML5, CSS3, Bootstrap ΠΈ JavaScript. Π§Ρ‚ΠΎ касаСтся сСрвСрной части, Π²Π°ΠΌ слСдуСт Ρ€Π°ΡΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ изучСния Ρ‚Π°ΠΊΠΈΡ… языков, ΠΊΠ°ΠΊ Python, Ruby ΠΈ PHP.

Π£Ρ‡ΠΈΡ‚Π΅ΡΡŒ бСсплатно ΠΎΠ½Π»Π°ΠΉΠ½ с Codecademy

Π›ΡƒΡ‡ΡˆΠΈΠ΅ доступныС Π²Π°ΠΌ рСсурсы Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ бСсплатныС ΠΎΠ½Π»Π°ΠΉΠ½-курсы, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π°ΡƒΡ‡Π°Ρ‚ вас основам языка Π² ΠΎΡ€Π³Π°Π½ΠΈΠ·ΠΎΠ²Π°Π½Π½ΠΎΠΉ ΠΈ структурированной Ρ„ΠΎΡ€ΠΌΠ΅. Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡƒΠ·Π½Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊ эффСктивно ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ HTML для своСго Π²Π΅Π±-сайта, ΠΎΠ·Π½Π°ΠΊΠΎΠΌΡŒΡ‚Π΅ΡΡŒ с этим курсом Π½Π° Codecademy.