Веб-разработка. Фронтенд. Вёрстка.

Бесплатные интерактивные курсы на HTML-Academy.

1. Знакомство

2. Структура HTML-документа

3. Разметка текста

4. Ссылки и изображения

5. Знакомство с таблицами

6. Знакомство с формами

7. Знакомство с CSS

8. Селекторы, часть 1

9. Наследование и каскадирование

10. Оформление текста, часть 1

11. Фоны, часть 1

12. Блочная модель документа

13. Сетки

14. Позиционирование

15. Мастерская: создаём меню

16. Мастерская: декоративные элементы

17. Знакомство с LESS

18. Знакомство с SVG

19. Оформление SVG-фигур

20. Подведение итогов

HTML Academy - интенсив по HTML/CSS базовый.

1. Введение.

2. Разметка.

3. Фотошоп для верстальщика.

4. Сетки.

5. Декоративные элементы

6. Оформление контента.

7. Введение в JavaScript.

8. Прогрессивное улучшение.

9. Блог Наставника HTML-Academy — https://www.youtube.com/playlist?list=PLQPQDQeOswiX4D7VpMt_C9Cz2Bzdi4Fn3

10. Дополнительные материалы — https://github.com/lena-green/htmlacademy-basic-additional-material

HTML Academy - интенсив по HTML/CSS продвинутый.

Гайдлайны и Лучшие практики.

1. HTML руководство разработчика от MDN - https://developer.mozilla.org/ru/docs/Web/Guide/HTML

2. CSS руководство разработчика от MDN - https://developer.mozilla.org/ru/docs/Web/Guide/CSS

3. Хорошие и плохие CSS-практики для начинающих - https://medium.com/@ABatickaya/хорошие-и-плохие-css-практики-для-начинающих-619289ce8bae

4. Живой стандарт HTML WHATWG - https://html.spec.whatwg.org/multipage/

5. HTML5 от W3C - https://www.w3.org/TR/html5/

6. CSS спецификации - https://www.w3.org/Style/CSS/current-work

7. Размышления о стандартах CSS - http://css-live.ru/articles/macssaraksh-razmyshleniya-o-standartax-css.html

8. http://spec.piraruco.com/html5/index.htm

9. HTML5 от W3C (RU) - http://spec.piraruco.com/html5/index.htm

10. HTML-Academy - Стиль кода - http://html-academy.ru/codeguide/

Практика HTML/CSS.

1. Сверстать макет сайта 1

2. Сверстать макет сайта 2

3. Сверстать макет сайта 3

WebReference.

1. WebReference —Позиционирование в CSS (Jeremy Thomas)

2. WebReference — Открываем блочную модель (Shay Howe) https://webref.ru/layout/learn-html-css/box-model

3. WebReference — Блочная модель в CSS (Jeremy Thomas)

4. WebReference —Позиционирование содержимого (Shay Howe) https://webref.ru/layout/learn-html-css/positioning-content

Landing Page. Посадочная страница.

1. Видеркурс. Создание Landing Page на Wordpress (Автор: WebDesign Master) — https://www.youtube.com/playlist?list=PLyf8LgkO_8q8UkipPnB-23hXBf

2. Курс по SEO лендингов

3. Курс. «Пошаговый курс по созданию продающего Landing Page c нуля» — https://bloxy.ru/learning/lp/

4. Статья. «Каждому по Landing Page. Наболевшее» — https://habrahabr.ru/post/226969/

5. Статья. «7 типов лэндингов, чтобы поймать на крючок посетителей вашего сайта» — https://habrahabr.ru/post/283950/

6. Веб-дизайн: практический курс создания лендинга — https://www.youtube.com/playlist?list=PLD-piGJ3Dtl1ZJd2NgoRr9ZD70EVjYemI

SoloLearn. Мобильное приложение.

1. HTML Fundamentals

2. CSS Fundamentals

Другое

1. Блочная вёрстка.

2. Фреймы. < frame >.

Статьи.

Книги.

1. Новая большая книга CSS (CSS. The Missing Manual). Автор: Дэвид Макфарланд.

2. Head First HTML&CSS (O'Reilly).

Сайты.

1. http://docode.ru

2. http://softwaremaniacs.org/blog/category/primer/

3. http://codenamecrud.ru/pages/curriculum

4. http://htmlbook.ru/practical

5. http://frontendbookshelf.ru

6. https://geekbrains.ru/tests/2 — Тесты на GeekBrains

7. https://webref.ru

8. https://html5book.ru/ — Хороший сайт (есть про верстку меню)

9. https://medium.com/@ABatickaya — Workafrolic (±∞). Полезный блог на Медиуме

10. http://webmasters.teamdev.com/#personal — Вёрстка — это не тупо.

11. https://www.freecodecamp.com

Видеоуроки.

1. WebDesign Master — https://www.youtube.com/user/agragregra/playlists

2. Sorax

3. Loftblog

4. Артём Исламов — https://www.youtube.com/channel/UCVswRUcKC-M35RzgPRv8qUg

5. Блог Наставника HTML-Academy -- https://www.youtube.com/playlist?list=PLQPQDQeOswiX4D7VpMt_C9Cz2Bzdi4Fn3

WordPress

1. http://wpblogs.ru/создание-темы-для-wordpress-с-нуля/

2. http://wpcreate.ru/spisok-urokov

GIT

1. Очень хороший туториал — https://githowto.com/ru

2. Кратко — http://rogerdudler.github.io/git-guide/index.ru.html

3. Pro Git book. Scott Chacon and Ben Straub — https://git-scm.com/book/ru/v1

4. Шпаргалка от Громова - https://github.com/nicothin/web-development/tree/master/git

5. GeekBrains — https://geekbrains.ru/courses/66

6. Руководство Git от wiki.specialistoff.net — http://wiki.specialistoff.net/index.php/Руководство_Git#.D0.92.D0.B2.D0.B5.D0.B4.D0.B5.D0.BD.D0

7. Видеокурс от Дмитрия Афанасьева — http://simple-training.com/category/git-vcs/ -- короткие видеоуроки + текстовое описание

8. Hexlet (пользовательский курс ) — https://ru.hexlet.io/courses/git_base

9. devcolibri.com — https://www.youtube.com/playlist?list=PLIU76b8Cjem5B3sufBJ_KFTpKkMEvaTQR

10. ITVDN — https://itvdn.com/ru/video/basics-using-git

11. Специалист.ru — http://www.specialist.ru/course/git

12. Регистрация на GitHub — https://htmlacademy.ru/blog/84-register-on-github-work-with-console

13. Работа с Git через консоль — https://htmlacademy.ru/blog/187-git-console

14. Работа через GitHub Desktop — https://htmlacademy.ru/blog/85-register-on-github-work-with-github-desktop

15. GitHub как хостинг — https://htmlacademy.ru/blog/99-github-as-hosting

16. Простое руководство по работе с Git — http://rogerdudler.github.io/git-guide/index.ru.html

Photoshop для верстальщика.

1. Статья от HTML-Academy - https://htmlacademy.ru/blog/51-photoshop-for-the-coders

2. Видео от HTML-Academy (Базовый интенсив по HTML/CSS. Урок 3). Николай Громов.

3. Установка Photoshop CC на Mac - https://www.youtube.com/watch?v=leGPKM9BgkY

4. Николай Громов (2014 год) - https://www.youtube.com/watch?v=xXv93EpWeyA&list=PLqZTjT2Z9HyJfnApkpKEOJCZdXY_EbDWD&index=1

5. Артём Исламов - https://coursehunters.net/course/web50. Урок 3.

6. CSS Hat - плагин, конвертирующий стили фотошопа в код CSS.

7. Adobe Assets.

Платные интерактивные курсы на HTML-Academy по Флексбоксам.

1. Флексбокс, часть 1 (31 урок).

2. Флексбокс, часть 2 (28 уроков).