Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS AWS Certified Developer - Associate CompTIA Security+
Photoshop Graphic Design Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Mindfulness Personal Development Personal Transformation Meditation Life Purpose Coaching Neuroscience
Web Development JavaScript React CSS Angular PHP WordPress Node.Js Python
Google Flutter Android Development iOS Development Swift React Native Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Analysis Data Modeling Big Data
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Freelancing Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee

This course includes:

  • 33.5 hours on-demand video
  • 4 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
Development Web Development Bootstrap

WEB-разработчик 2020

Освой все, что необходимо для создания web-сайтов и начни зарабатывать на этом!
Rating: 4.8 out of 54.8 (4,196 ratings)
11,138 students
Created by Иван Петриченко, Иван Петриченко
Last updated 12/2020
Russian
30-Day Money-Back Guarantee

What you'll learn

  • Узнаешь основы web-разработки: что такое web-сайт, зачем он нужен, циклы создания и многое другое
  • Научишься работать с графическими редакторами в контексте верстки: Photoshop, Zeplin, Figma, Avocode...
  • Научишься работать с графикой для web'a, в том числе с SVG
  • Узнаешь и поймешь как использовать HTML и CSS в реальных проектах (теория + настоящая практика)
  • Узнаешь основы JS и Jquery, научишься применять их в своих проектах
  • Научишься работать с Git и GitHub
  • Научишься работать с Bootstrap 4 и с технологией FlexBox
  • Научишься использовать препроцессоры Sass/Scss/Less в своих проектах
  • Научишься создавать мобильную адаптацию сайтов и приложений
  • Научишься использовать методологию БЭМ
  • Поймешь, как создавать многостраничные сайты и принципы посадки под CMS(системы управления сайтами)
  • Научишься автоматизировать процессы при помощи планировщика задач Gulp
  • Научишься оптимизировать скорость работы сайтов и проводить валидацию верстки по стандартам w3c
  • Научишься работать с множеством готовых плагинов, устанавливать гео-карты на сайте, работать со шрифтами и многое другое...
  • Все полученные знания даются в современном формате и сразу закрепляются на практике
  • Бонус: получишь несколько реальных макетов для практики

Course content

4 sections • 96 lectures • 33h 30m total length

  • Preview02:35
  • Preview21:52
  • Preview07:53
  • Работа с Adobe Photoshop в вебе
    21:13
  • Работа с современными редакторами: Avocode, Zeplin, Figma...
    22:38
  • Бонус. Что такое "сетки" и преобразование иконок в SVG формат
    08:12
  • Создаем свой первый проект. Основы HTML
    19:33
  • Основные теги HTML на практике
    39:48
  • Семантические теги HTML5
    10:49
  • Основы CSS на практике
    30:47
  • Блочная модель CSS
    12:53
  • Developer Tool. Что это и как с ним работать?
    13:37
  • Блочная модель CSS. Часть 2
    18:51
  • Позиционирование элементов в CSS. Принцип карточной колоды
    21:14
  • Выравнивание элементов по вертикали. Верстка таблицами и float'ами
    08:35
  • Бонус. Единицы измерения CSS
    10:28
  • Специфичность CSS селекторов
    11:38
  • Практика. Создаем сайт на чистом HTML и CSS
    01:08:11
  • Технология Flexbox и применение её на макете
    13:53
  • Практика. Заканчиваем сайт на чистом HTML и CSS + домашнее задание
    33:49
  • Сброс стилей reset.css/normalize.css
    09:04
  • Подключение шрифтов на сайт
    30:55

  • Зачем нам этот модуль
    01:03
  • Библиотека Bootstrap 4
    34:28
  • Про обновление Bootstrap до пятой версии
    07:38
  • Практика. Новый проект с использованием сетки Bootstrap 4
    01:03:11
  • Как правильно формировать пути к файлам
    05:28
  • Препроцессоры. SASS/SCSS/LESS
    30:43
  • Если у вас ошибка при компиляции SASS кода
    02:55
  • Вендорные префиксы в CSS
    04:06
  • Практика. Продолжаем работу и используем препроцессор SASS
    31:40
  • Псевдоклассы и псевдоэлементы в CSS
    17:11
  • Практика. Используем псевдоэлементы и псевдоклассы в проекте
    42:32
  • Как работать с иконками. Иконочные шрифты
    20:18
  • Адаптация проектов под различные устройства
    17:31
  • Pixel Perfect верстка
    03:44
  • Адаптация при помощи Bootstrap
    11:21
  • Практика. Адаптация проекта. Часть 1
    42:15
  • Практика. Адаптация проекта. Часть 2
    44:45
  • Локальные ссылки и favicon
    05:46
  • UX. Дорабатываем мелочи
    06:36
  • Публикуем сайт в интернете. Домен. Хостинг. GitHub Pages и сброс "кеша"
    12:19

  • Зачем нам этот модуль
    01:09
  • Система контроля версий Git и сервис GitHub
    25:06
  • Как работать с GitHub с разных компьютеров, gitignore и Git Kraken
    15:52
  • Планировщик задач Gulp
    38:29
  • Методология БЭМ
    13:36
  • Практика. Создаем новый проект, используя Gulp, БЭМ...
    37:11
  • Если у вас не работают картинки
    02:10
  • Формы на сайтах
    32:03
  • Знакомимся с языком программирования JavaScript
    31:10
  • Как можно освоить JavaScript?
    01:20
  • Практика. Создаем слайдер на сайте. Slick-слайдер
    34:50
  • Если у вас не работают скрипты
    03:14
  • Практика. Альтернативные варианты слайдеров
    30:09
  • Практика. Создаем табы на сайте. Часть 1
    31:59
  • Практика. Создаем табы на сайте. Часть 2
    37:16
  • Создаем интерактивные карты на сайте
    20:13
  • Практика. Создаем модальные окна на сайте
    37:56
  • Валидация форм
    22:43
  • Маска ввода номера на сайте
    05:29
  • Локальные сервера
    08:07
  • Практика. Отправка писем с сайта
    18:45
  • Если у вас ошибка при отправке формы
    11:55
  • Плавный скролл по ссылкам и элемент "вверх"
    11:22
  • Анимации на сайтах при помощи CSS3
    12:05
  • Библиотеки для работы с анимациями
    11:09
  • Про обновления и animate.css
    10:12
  • Валидация сайта
    07:34
  • Загружаем сайт на реальный хостинг. Настройка домена, что такое FTP и SSL
    14:49
  • Оптимизация скорости загрузки сайта, доработка gulpfile
    38:10

  • Preview01:40
  • Снова про сетки и CSS Grid
    17:16
  • Единица гибкости (fr) и repeat()
    08:29
  • Явные и неявные гриды
    20:27
  • Функция minmax() и масштабирование треков
    18:31
  • Позиционирование треков
    23:54
  • Выравнивание треков
    13:31
  • Grid Area и подсетки. Адаптация гридов
    19:15
  • Еще раз про meta-тэги и фавикон. OG tags
    09:33
  • Подготовка к созданию портфолио
    22:36
  • Создаем первый экран, часть 1
    57:37
  • Создаем первый экран, часть 2 (анимация меню)
    47:59
  • Используем CSS Grid для создания второго экрана
    41:50
  • Создаем третий экран портфолио
    47:28
  • Реализуем скрипт автоматического пересчета процентов
    13:51
  • Создаем блок-портфолио работ
    25:21
  • Создаем блок с контактами
    37:47
  • Политика конфиденциальности. Что это, зачем и как использовать.
    15:14
  • Свойство object-fit
    14:54
  • Адаптация портфолио, часть 1
    57:15
  • Адаптивные изображения
    31:34
  • Заканчиваем портфолио и адаптируем последние экраны
    24:18
  • CSS Variables (CSS переменные)
    16:40
  • Что такое Mobile first
    11:25
  • Что делать дальше?
    01:59

Requirements

  • Желание освоить создание сайтов и начать зарабатывать на этом
  • Никакой другой предварительной подготовки: все что нужно мы настроим и выучим

Description

***КУРС ОБНОВЛЕН 12.08.2020***

Этот курс направлен на подробное обучение созданию сайтов, без воды, но главное, что здесь мы немедленно применяем все знания на практике.

Это значит, что вы получите весь материал для работы и мы вместе будем создавать реальные проекты шаг за шагом.

Для кого подойдет этот курс?

  • Если вы ничего не знаете про создание сайтов, но хотите начать

  • Если вы новичок в html/css, хотите быстро их освоить и начать применять в работе

  • Если у вас был опыт в этой сфере несколько лет назад, ведь web-технологии очень быстро меняются и совершенствуются

Что внутри курса?

Мы с вами пройдем путь от установки своего первого редактора кода до создания полноценных, полностью функционирующих и расположенных в интернете сайтов. Мы будем изучать теоретическую часть и сразу же применять её на реальных проектах. Все ссылки на ресурсы, дополнительные материалы и бонусные макеты для практики будут предоставлены внутри курса.

  • мы изучим основы web-разработки: что такое web-сайт, зачем он нужен, циклы создание и многое другое

  • мы научимся работать с графическими редакторами в контексте верстки: Photoshop, Zeplin, Figma, Avocode...

  • мы научимся  работать с графикой для web'a, в том числе с SVG

  • мы узнаем и поймем как использовать HTML5 и CSS3 в реальных проектах

  • мы узнаем основы JS и Jquery, научимся применять их в своих проектах

  • мы научимся работать с Git и GitHub

  • мы научимся работать с Bootstrap 4/5 и с технологией FlexBox

  • мы научимся работать с технологией CSS Grid

  • мы научимся использовать препроцессоры Sass/Scss/Less в своих проектах

  • мы научимся создавать мобильную адаптацию сайтов и приложений

  • мы научимся использовать методологию БЭМ

  • мы поймем, как создавать многостраничные сайты и принципы посадки под CMS(системы управления сайтами)

  • мы научимся автоматизировать процессы при помощи планировщика задач Gulp

  • мы научимся оптимизировать скорость работы сайтов и проводить валидацию верстки по стандартам w3c

  • мы научимся работать с множеством готовых плагинов, устанавливать гео-карты на сайте, работать со шрифтами и многое другое...

  • мы создадим с ваш личный сайт-портфолио

В виде бонуса будут предоставлены несколько реальных макетов для самостоятельного закрепления полученных знаний.

Почему стоит начать свое обучение уже сейчас?

Создание сайтов (верстка) - очень востребованный на рынке труда навык, который к тому же еще и хорошо оплачивается. Мало того, что изучив всю данную вам информацию вы уже сможете создавать свои продукты и работать как на фрилансе, так и в web-студии, но и вы заложите базу для дальнейшего обучения. Владея этими навыками вы сможете освоить любую CMS (WordPress, ModX...) изнутри, сможете понять и изучить как работает backend часть, и сможете создавать визуальную часть приложений, написанных на JavaScript фреймворках и библиотеках (ведь там везде используется верстка как и на обычных сайтах, в том числе и на мобильных приложениях).

Who this course is for:

  • Для тех людей, кто вообще не знаком с темой создания сайтов
  • Для тех людей, кто уже делал свои первые попытки создания сайтов

Instructors

Иван Петриченко
Front-End Development and Consulting
Иван Петриченко
  • 4.8 Instructor Rating
  • 12,903 Reviews
  • 29,820 Students
  • 7 Courses

Привет!
Меня зовут Петриченко Иван. Уже более 5 лет занимаюсь Front-End разработкой. Я создаю сайты "под ключ", обучаю этому взрослых и детей, организовываю и провожу мероприятия, занимаюсь консалтингом и аудитом.

В моей копилке уже несколько организованных и записанных авторских онлайн курсов, люблю помогать людям и делиться с ними знаниями.

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

Иван Петриченко
Front-End Development and Consulting
Иван Петриченко
  • 4.8 Instructor Rating
  • 11,935 Reviews
  • 25,728 Students
  • 5 Courses

Привет!
Меня зовут Петриченко Иван. Уже более 3х лет занимаюсь Front-End разработкой. Я создаю сайты "под ключ", обучаю этому взрослых и детей, организовываю и провожу мероприятия, занимаюсь консалтингом и аудитом.

В моей копилке уже несколько организованных и записанных авторских онлайн курсов, люблю помогать людям и делиться с ними знаниями.

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

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.