     
 


   ,        .

   ?

?

 ?

  !

  .

   .  :    ,   ,          .

     .

       .

      .

!





 

     



     



, !

    ,     ?   .   .

          .   .      ,         .

     .       .      ,   :         .

    :

10           .        .

3-4         ,     .

 0  100      .      ,      ,    .

     ?



    ,    .   .       ,  ,    ,           .

      . !




1.1.       


      ,  ,          .    .

     

      .         .    ,    ,   .     ,     .   ,        :          .

-  (  )

     .

   , .    .     (),   .

    .   ,     (, , )   .

   .   ,   (  ).     (   ),    (  )     ,   (   ).

 ,    ,       :     .    ,      ,   .

   

    .      HTML, CSS  JavaScript.

HTML   .   :   ,  ,   .

CSS    .  :   ,     .

JavaScript   .  ,   .  :      ,    .

    

    .       ,    :      (HTML),    (CSS),     (JS).            ,   .




1.2.  HTML:    


 HTML    ,    ,     .  ,     .      ,    .

  

HTML   .       .     :   .    .

,   ,    h1.   :












    : ,      . ,       ,    .

  ()

  HTML-   .  :    ,    .    .

  ,     :












  :












   (   )

       div (  division  ).   .        div.

   .     ,     .      (    ),    ,  ( !)   .












   ?       ,   :    .  ,     ,     div.    ,      .

    

    .  :












  

       .     :    ,         .       ,    :     ,      ,     .     HTML-.




1.3.  CSS: Flexbox, Grid  


 HTML   ,  CSS     .   ,    ,         .  CSS   :  -       .

  CSS

 CSS    ( )     ( ).   :












     :    h1  ,     (blue),     24  (24px).

   .     (p),       (,










   .  CSS   :












   : Flexbox  Grid

  CSS          (,     ).   .      ,      .

Flexbox ()



  .          (    )    .



,      ,   ,    ,    . Flexbox      .



  ,  ()  :












 justify-content    .  space-between     .

Grid ()



  .       (    ).   ,   .      CSS  :       .

 (     )

      , ,     .         .

 CSS     .   :      ,    .












  :     600  (  ,  , ),       ,       .

   

      CSS.  .    ,  CSS    ,     Flexbox  Grid.

   :          ,       ,         Grid  .




1.4.  JavaScript: , ,   


 HTML   ,  CSS  ,  JavaScript ( JS)     .   ,   .     , ,     ,   .

    ,       JS     .     ,       .

 (  )

      ,     .    ,       .



,     .    name     .










 let ( const,     )     .   name    .        ,   .

 (  )

    ,    .      :     (),        .



, ,    :












    add ().     ( a  b).  return   .    add(2, 3),    5.

 ()

      .      .          .












  shoppingList   .      ,      ().  :      .  shoppingList[0]   ,  shoppingList[1]  .

 (  )

     ,     ,        ().      .












  user   .     (),  ()    (  true/false).       user.age.

   

        JavaScript.     :

 ,  - .

 ,  - .

   ,      .

      ,       :     .  ,         .       .       JS.




1.5.   DOM     


  1.2  ,  HTML    .    HTML,      .    DOM (Document Object Model    ).

 -: DOM   ,      .   : JavaScript      ,   .

  DOM

 DOM     .       (document).    html,  html  head  body.  body  , ,   .        (node).

        .  JavaScript  ,       (). ,  ,    ,  ,      ,       .

 JS  

 -   , JavaScript     .        .       id   .

,   HTML       myButton:












  JavaScript        document.getElementById:












  button       DOM.       .

  

  ,       .     :

 .  textContent       .












 .  style    CSS-   .   , ,     .












 .    : ,      ,    .     addEventListener.












        .      ,  ,    .

  

DOM        ,   .      ,       DOM.      ,              JavaScript  DOM   .

      .      .     :  ,       ,         DOM      JavaScript.




1.6.    :   


     ,    .      ,        .     .

   

  ( )      .     ,    ,    .     .

 Windows    ,  Mac  Finder,     .   .           .

   ( )

   ,         .     ,      Enter.

    ,         .              .

 Windows   PowerShell    (cmd).  Mac  Terminal ().   VS Code (      )     .

  ( )

     .      :

  ?



      -  .  ,   ,  : pwd



( Windows    Print Working Directory    ).      ,     .

  ?



        , : ls

( Windows    dir).    ,     .

    ?



     ,   cd (Change Directory   ): cd _



, cd Documents      .   cd .. ( )     ,    .

   

,   ,   .       -   ,    .

   ,  ,     (GitHub)            .      ,      .    ,       ,     ,  ,     .




2.1.  IDE (VS Code)  -:   


      :   ,        .    .   ,       .

  VS Code    

      .       :  ,  .   (IDE, Integrated Development Environment)   Word  .

        Visual Studio Code (  VS Code).    Windows, Mac  Linux.



  :

    HTML, CSS  JavaScript,     .

 ,    .

    (      1.6).

         .

   ( )

   ,        .  VS Code    ,     .



 ,    ,  index.html.   .

      ,    .  :

  VS Code  index.html.

         .

 (Ctrl+S)      ,   .

      :     (style.css),    (script.js),    .    :   ,     .

-:   

    .        .

 1:  (ChatGPT, Claude, DeepSeek)



        ,  VS Code   .   ,     ,       .



:    .    .



:         -.

 2:   (Cursor, GitHub Copilot,   VS Code)



     ( Cursor),      .     ,         ,   .



:   .       :  ,   ,      .



:      ( ).

  

   ,    1.  VS Code,  ChatGPT  DeepSeek,      .      ,     .

 ,     ,  ,       ,   Cursor   Copilot.

  

VS Code     .       .     :  ,   ,  ,          .   :  VS Code   ,        .




2.2.   Git  GitHub:     


,       Word.     _,  __2,  ___. ?     :    ,      .      .

  Git

Git   ,         .      (  ).   - ,       ,   .

,  Git       .  ,   ,         .

  GitHub

GitHub    ,     .     ,       .    ,    ,      GitHub.

  :     , Git  ,        GitHub ( ).

  

      .      ,   .  Git   ,     ,      .  Git   :      ,   .

 , GitHub    .      ,      GitHub.

    VS Code ( )

       .  VS Code       Git.       ,   (  ).

   :

      .

  Git  VS Code.     .

   (,   ).

  (Commit).  !

   GitHub,   Sync Changes ( Publish Branch),     .

  

      .  Git  GitHub      .        ( ,  )     VS Code.       ,        .




2.3.       (TDD-)


   .  ,   :          .     .     ,    .      ,   -  .

   ,   ,    TDD (Test-Driven Development    ).  ,        :  ,   ,       .

    

,       :    .  ,   - ,        .



    .   :     ,   .      ,    ,    .      .

    ()

        .

1. 



 ,    .      .



:    -     .

2.   



,      .



:   -  .    ,     .       .

3.   ()



,    ,   .



:

      .

      .

   6    (3 ).

       .

4.   ( )



,       .



:    HTML  CSS,  .  Flexbox  Grid  .   ,        .

 :    

          .       -  ,    ,      ,    .   ,   .

  ( ).

     .

,    .

     .

   .

       ,  -   .

  

   .        ( ,   ,  ,       ),       .     ,    .   :      ,           .    .




2.4.  :     


    ,        ().       ,      .              .

    

,    :      -  ,    .

 ?      (,  ).  ,   ,    ,     .   , ,      .    ,   :  ,      .

   :   ,    .

   ( )

      .     ,  ,      .

   -,     :

 1:         .

 2:        (  ).

 3:    (  ).

 4:  ,         .

  .       ,       :  , .           .




  .


   .

   ,     (https://www.litres.ru/book/maksim-makliuk-34133559/vaibkodik-dlia-gumanitariev-i-ne-tol-ko-74743487/)  .

      Visa, MasterCard, Maestro,    ,   ,     ,  PayPal, WebMoney, ., QIWI ,       .


