Хочеш за пару тижнів навчитися верстати сайти або отримати посаду HTML верстальника, з високою заробітною платою? Зарплата HTML верстальника зараз в середньому становить 30 000-60 000 руб. А заробіток на Freelance біржах обмежується лише вашим бажанням і наявністю вільного часу. Але як початківцю конкурувати в кризу з тими, хто вже на цьому заробляє? Хочеш дізнатися?
Тобі не потрібно володіти над-навичками, щоб освоїти HTML5 та CSS3 верстку, щоб вже через пару тижнів розпочати на цьому заробляти.
Для кого призначений даний курс?
Цей курс відмінно підійде для тих, хто зіткнувся з однією з перерахованих проблем:
Ви не знаєте, що таке HTML і CSS, вам нічого не говорять цифри в закінченнях цих абревіатур, та й сайти ви ніколи не робили, але дуже хочеться навчитися.
Ви вже познайомилися з технологіями HTML і CSS і навіть мали досвід верстки простеньких сайтів, але при вигляді шаблонів зі злегка ускладненим дизайном ви впадаєте в ступор, і це не дає вам можливості почати заробляти на своїх навичках.
Я теж стикався з даними проблемами свого часу. Мені знадобилося близько року, щоб освоїти ці технології, і ще півроку я «набивав шишки», перш ніж почав заробляти на цьому. Але це було давно, а зараз я з посмішкою згадую про ті часи, хоча в той момент мені було зовсім не до сміху. Я збирав інформацію по крихтах і брався за будь-які завдання, щоб отримати безцінний досвід.
Існує кілька способів навчитися верстати сайти
Спосіб 1 - Вивчити HTML і CSS самостійно (як я свого часу), - але це все одно що шукати голку в стозі сіна.
Спосіб 2 - Перейняти досвід у того, хто вже стикався з проблемою вивчення HTML і CSS і хто готовий поділитися з вами своїми навичками і напрацюваннями по даній темі. Це істотно прискорить процес вашого навчання і скоротить час з початку навчання до першого заробітку на створенні сайтів.
Для тих, хто вибрав Спосіб 2, я пропоную курс HTML5 та CSS3. «Сайт з нуля»
Що вас чекає в цьому курсі?
Основні частини курсу виглядають наступним чином
HTML5
Вивчення мови розмітки HTML5
34 уроку
опис розділу
У цій частині курсу ми розглянемо більшість використовуваних тегів (елементів сторінки) і навчимося користуватися ними в своїх проектах.
Про які саме тегах ви дізнаєтеся з цього розділу курсу?
Теги форматування тексту - ті теги, за допомогою яких, ви можете оформляти текстову складову контенту сторінки.
Різного виду HTML спіскі- розглянемо, які вони бувають, як ними можна маніпулювати і в яких випадках застосовується той чи інший список.
Блокові і рядкові елементи - структуру будь-якого сайту можна розбити на блоки, в HTML існують два типи елементів - це малі і блокові елементи.
Посилання - Ви навчитеся зв'язувати сторінки свого сайту з іншими сторінками в мережі, за рахунок різноманітних типів гіперпосилань.
Таблиці - часто буває необхідно представити інформацію у вигляді таблиць, тут ви дізнаєтеся, що HTML таблиці, мають своєрідну технологію побудови.
Форми - більшість маніпуляцій з даними, між кінцевим користувачем і сервером, відбуваються за коштами HTML форм, тут ви дізнаєтеся, як створювати такі форми якими вони бувають, а головним чином, як відбувається передача даних через ці самі форми.
Мета-теги - як бонус, для вас в цьому розділі будуть розібрані основні групи мета-тегів, які не видно користувачеві, але сильно впливають, як на відображення контенту, так і на індексування сторінок сайту пошуковими роботами
приклади уроків
Заголовки і абзаци
Використання заголовків різних рівнів
4:06
Предформатірованний текст
Відображення тексту з вихідним форматуванням
1:55
цитати
Використання цитат в HTML розмітці
2:55
форматує теги
Розбір малих тегів, для форматування тексту
9:23
спецсимволи
Що це таке і де їх взяти
3:03
маркований список
Створення маркованих списків
6:54
нумерований список
Використання цифрових списків
3:02
Список ключ-значення
Створення списків ключ-значення
2:59
Div і Span
Створення власних блокових і малих елементів
5:45
Id і class
Ідентифікація елементів на сторінці за допомогою атрибутів id і class
3:16
зовнішні посилання
Створення посилань на зовнішні джерела
4:13
внутрішні посилання
Створення посилань на локальні ресурси
3:02
якірні посилання
Створення посилань на певну частину сторінки
2:47
Завантаження фалів
Додавання посилання «Завантажити»
1:33
Нова вкладка
Відкриття посилань в новій вкладці браузера
1:47
вставка зображень
Вставка зображень в HTML сторінку
6:07
вставка аудіо
Вставка аудіо контенту на сторінку
2:40
Iframe
Додавання стороннього контента на сайт
7:13
таблиці
Створення простої таблиці
2:22
заголовки таблиці
Визначення заголовків таблиці
4:15
Об'єднання елементів таб
Об'єднання рядків і стовпців таблиці
4:45
елемент Form
HTML форми на сторінці
3:57
Створення простої форми
Створення простої HTML форми
3:15
доопрацювання форми
Доопрацювання HTML форми
6:39
Textarea
Особливості елемента Textarea
2:02
Content-editable
Атрибут Content-editable - HTML форма з будь-якого текстового елемента
1:27
Скидання даних форми
Скидання даних форми за допомогою reset
1:18
Range
Використання input Range
3:27
Data-list
Застосування інструменту data-list
2:35
Select
Робота з формою Select
1:52
Radio
Використання елемента Radio
4:18
Meta
Meta теги
7:29
Robots
Завдання параметрів індексування сторінок сайту за допомогою Robots
5:42
CSS3
Вивчення каскадних таблиць стилів CSS3
42 уроку
опис розділу
На даному етапі ми дізнаємося більше про інструменти, які використовуються верстальниками для створення красивих і складних макетів сторінок.
Звичайно ж, мова в цьому розділі курсу піде про каскадні таблиці стилів CSS. Тут будуть розібрані такі речі, як:
Селектори - синтаксичні конструкції, що дозволяють вибрати той чи інший елемент, або групу елементів на сторінці, для того щоб застосувати до нього стилі, відмінні від стандартних.
Маніпулювання стилями тексту - все, починаючи від вибору шрифту або імпорту нестандартних шрифтів, до його розміру, накреслення, нахилу, тіні і т.д.
Розміри блоків - після цих уроків, ви зможете з легкістю маніпулювати розмірами будь-яких блоків, а також встановлювати значення внутрішніх і зовнішніх відступів.
Позиціонування блоків - різні види і методи позиціонування елементів html сторінки, обтікання блоків, відносне, абсолютне і фіксоване позиціонування для блоків, а також нюанси при тому чи іншому методі позиціонування
Установка кольору і зображення елементів - і це не обмежується простою зміною фонового кольору елемента, про все про це зроблений цілий ряд уроків, в ньому розбираються навіть такі поняття як лінійний і радіальний градієнт, який можна використовувати для створення специфічного дизайну.
Введення в CSS3
Загальні відомості про CSS3
4:13
селектори елементів
Селектори елементів CSS3
5:19
Селектори елементів 2
Селектори елементів CSS3 2
3:35
Псевдо-селектори
Вибір елементів з псевдо-селекторами
5:25
селектори атрибутів
Вибірка елементів з певними значеннями атрибутів
8:11
завдання шрифту
Завдання певного шрифту для тексту
2:31
Fontface
Підключення не стандартних шрифтів
2:23
Import
Імпорт шрифтів зі сторонніх ресурсів
2:09
Розмір шрифту
Завдання розміру шрифту
2:09
насиченість шрифту
Завдання насиченості шрифту
1:45
колір тексту
Завдання кольору тексту
2:13
Регістр і інтервали
Завдання регістра і інтервалів тексту
2:43
вирівнювання тексту
вирівнювання тексту
2:08
Відступи в тексті
Відступи між словами і символами
3:08
тіні тексту
Завдання тіні тексту
2:19
форматування списків
Форматування стилів списків
3:58
іконочние шрифти
Використання іконочние шрифтів в проекті
3:47
завдання кольору
Завдання кольору різними способами
2:54
фонове зображення
Додавання фонового зображення
7:04
лінійний градієнт
Завдання фонового кольору через лінійний градієнт
2:20
радіальний градієнт
Завдання фонового кольору через радіальний градієнт
2:55
розміри блоку
Завдання розмірів блоку
7:15
Box-sizing
CSS властивість box-sizing
3:38
Overflow
Вихід вкладеного контенту за розміри батьківського блоку
5:52
відступи
Встановлення відступів для елементів сторінки
6:07
рамка
Завдання рамки для елементів сторінки
1:45
тіні блоку
Завдання тіні блокам
6:11
обтікання
Установка режимів обтікання елементів
5:09
вимкнення обтікання
Вимкнення обтікання для елементів сторінки
5:51
відносне позиціонує
Відносне позиціонування елементів сторінки
5:51
абсолютна позиціонується
Абсолютне позиціонування елементів сторінки
5:12
фіксована позиціонує
Фіксоване позиціювання елементів сторінки
1:45
Z-index
Порядок відображення шарів
1:35
переходи
Плавні переходи CSS властивостей з одного стану в інший
6:33
переходи 2
Плавні переходи всіх доступних CSS властивостей
2:31
переміщення
Перетворення - переміщення елемента
5:08
масштабування
Зміна розмірів елемента
1:20
нахил
Нахил елемента за допомогою CSS3
1:15
обертання
Ефект обертання елемента за рахунок CSS3
3:53
множинне Перетворюва
Застосування множинних CSS перетворень елементу
1:58
анімації
Створення простої анімації
5:15
Властивості CSS3 анімації
Розширені властивості CSS3 анімації
8:35
Практика
Практика (верстка вашого першого сайту)
8 уроків
опис розділу
Сама, мабуть, найцікавіша частина курсу, в якій ми будемо вчитися створювати верстку свого власного сайту з абсолютного нуля і до самого кінця, користуючись тими знаннями, які ми придбали з попередніх розділів
Нові семантичні теги
Початок практичної частини курсу
4:32
Додавання контенту
Додавання контенту сайту
4:50
створення структури
Створення структури сайту
6:55
підготовка CSS
Підготовка та підключення CSS
2:18
Оформлення шапки сайту
Оформлення стилів шапки сайту
6:38
оформлення навігації
Оформлення стилів навігації сайту
5:46
оформлення sidebar
Оформлення sidebar сайту
6:13
оформлення контенту
Доопрацювання контенту сайту
10:45
адаптивна верстка
Адаптивна верстка під різні типи екранів і мобільних пристроїв
9 уроків
опис розділу
Останнім часом користувачі все частіше стали заходити на сайти з мобільних пристроїв і планшетів. Цей розділ курсу присвячений доопрацюванні нашого шаблону для різних типів пристроїв. Дуже затребуваний навик верстальника - вміти представляти свій сайт не тільки на персональних комп'ютерах зі стандартними розмірами екранів, але і під інші типи екранів і пристроїв
приклад уроку
адаптивна верстка
Принцип адаптивної верстки
1:51
медіа запити
Створення медіа-запитів
4:34
адаптивна навігація
Створення адаптивної навігації
11:11
Навігація з пошуком
Адаптивна навігація з пошуком
8:27
фіксована навігація
фіксування навігації
3:12
адаптивний Sidebar
Підготовка адаптивного Sidebar
4:06
з'являється sidebar
Реалізація приховування sidebar
6:15
доопрацювання сайту
Приведення верстки сайту в «Бойове стан»
6:29
Це дійсно дуже цінне придбання.
Багато людей витрачають десятки тисяч на вивчення цих технологій, а витрати компаній на навчання персоналу ще в кілька разів більше. Погодьтеся, що ви можете стати цінним співробітником, якщо при прийомі на роботу ви вже будете знати все, що необхідно, і вас не потрібно буде переучувати. Ну а якщо ви ще й підкріпите свої знання практикою, - будьте впевнені - роботодавець запропонує зайняти вакантне місце саме Вам.
Інші ж, навпаки, вважають за краще «ритися в стозі сіна», в процесі пошуку дійсно потрібної і корисної інформації в безкоштовному доступі. Так, з усього масиву інформації в Інтернеті вони отримують лише розрізнену інформацію, частина якої була взята з одного джерела, частина - з іншого, причому обидва вони ніяк не "в'яжуться» один з одним. В результаті ж такі користувачі просто «тонуть» в цій інформації.
Тому немає і не може бути сумнівів у тому, що курс HTML5 та CSS3. «Сайт з нуля» - це те, що вам потрібно в даний момент.
Читайте також:
Навігація по публікаціям
Сучасна верстка сайту - приємний процес формування сторінок. Досвідчені розробники сайтів здатні написати унікальну структуру з нуля, однак більшість вважає за краще користуватися CMS - заради швидкості і зручності.