Вот несколько лучших бесплатных курсов по веб-разработке, а также примеры кода, которые вы можете изучить:

1. FreeCodeCamp ( https://www.freecodecamp.org/ )

   • Одна из самых популярных платформ для бесплатного обучения веб-разработке.
   • Они предлагают комплексную учебную программу, охватывающую HTML, CSS, JavaScript и многое другое.
   • Пример кода: проверка формы HTML5 с использованием JavaScript:

     <form onsubmit="return validateForm()">
     <input type="text" id="name" required>
     <input type="email" id="email" required>
     <input type="submit" value="Submit">
     </form>
     <script>
     function validateForm() {
      var name = document.getElementById("name").value;
      var email = document.getElementById("email").value;
      if (name === "" || email === "") {
        alert("Please fill in all fields");
        return false;
      }
     // Additional validation logic
     }
     </script>

2. Веб-документы MDN ( https://developer.mozilla.org/ )

   • Сеть разработчиков Mozilla предлагает обширную документацию по веб-технологиям.
   • У них есть учебные пособия и руководства для начинающих по HTML, CSS, JavaScript и многому другому.
   • Пример кода: макет CSS Flexbox:

     <div class="container">
     <div class="box">Box 1</div>
     <div class="box">Box 2</div>
     <div class="box">Box 3</div>
     </div>
     <style>
     .container {
      display: flex;
     }
     .box {
      flex: 1;
      padding: 20px;
      background-color: lightgray;
      border: 1px solid gray;
     }
     </style>

3. Codecademy ( https://www.codecademy.com/ )

   • Codecademy предлагает интерактивные уроки и проекты по программированию для различных языков веб-разработки.
   • Они проводят курсы по HTML, CSS, JavaScript, Python и т. д.
   • Пример кода: функция JavaScript для проверки того, является ли число простым:

     function isPrime(number) {
     if (number < 2) {
      return false;
     }
     for (let i = 2; i <= Math.sqrt(number); i++) {
      if (number % i === 0) {
        return false;
      }
     }
     return true;
     }
     console.log(isPrime(17)); // Output: true

4. Проект Один ( https://www.theodinproject.com/ )

   • Проект Odin – это бесплатная учебная программа с открытым исходным кодом для изучения веб-разработки.
   • Они охватывают такие темы, как HTML, CSS, JavaScript и такие платформы, как Ruby on Rails.
   • Пример кода: определение маршрута Ruby on Rails:

     Rails.application.routes.draw do
     root 'pages#home'
     get '/about', to: 'pages#about'
     resources :articles
     end

5. Уроки YouTube:

   • На YouTube собрана обширная коллекция руководств по веб-разработке от разных авторов.
   • Такие каналы, как Traversy Media, The Net Ninja и freeCodeCamp, предоставляют отличный контент для веб-разработки.
   • Пример кода: адаптивный веб-дизайн с использованием медиазапросов CSS:

     @media (max-width: 600px) {
     /* CSS rules for mobile devices */
     }
     @media (min-width: 601px) and (max-width: 1200px) {
     /* CSS rules for tablets */
     }
     @media (min-width: 1201px) {
     /* CSS rules for desktops */
     }