Отделение веб-дизайна школы программистов

Полезные материалы

Коротко о главном

Справочная информация

  1. WebReference - прекрасный справочник по HTML и CSS. В нём можно найти описание различных тегов и правила их применения.

  2. Веб-стандарты - всё о семантическом использовании тегов, расшифровка документации HTML и ещё много интересного.

  3. Learn.javascript - Современный учебник по js и не только.

  4. W3C Working Draft - рабочий проект по семантике и применению тегов HTML

Редакторы

Brackets

brackets

Brackets - бесплатный редактор с открытым кодом для веб-разработчиков. Brackets ориентирован на работу с HTML, CSS и JavaScript. Эти же технологии лежат в основе самого редактора, что обеспечивает его кроссплатформенность т.е. совместимость с операционными системами Mac, Windows и Linux. Brackets создан и развивается Adobe Systems под лицензией MIT License и поддерживается на GitHub. На сегодняшний день сообществом создано множество расширений, добавляющих большинство необходимых инструментов для работы над кодом, таких как система контроля версий Git, просмотр HTML-кода в браузере в реальном времени (Live Preview).

Также оцените статью на хабре о настройке редактора и полезных плагинах.

Plunker

plunker

Plunker - удобный и простой онлайн редактор HTML + CSS + JS с возможностью сохранения своих работ и обмена ими. Поддерживает возможность работы над одним проектом нескольких разработчиков.

Atom

atom

Atom - бесплатный, кросплатформенный текстовый редактор от GitHub. Для того, чтобы ощутить его мощь, рекомендуем воспользоваться установкой дополнительных плагинов, таких как Emmet, позволяющий печатать меньше, делать больше,HTML Preview, позволяющий видеть все вносимые изменения в соседней вкладке, Live Server, позволяющий просматривать внесённые изменения в баузере.

Sublime

sublime

Sublime Text - легенда. Единственный минус - он условно платный. Легко улучшается до полноценной IDE путём установки дополнений. Чтобы быстро и просто устанавливать дополнения, скачайте Package control

Фреймворки

Фре́ймворк - программное обеспечение, облегчающее разработку и объединение разных компонентов большого программного проекта

CSS

  1. Bootstrap

  2. Material Design Lite

  3. Skeleton

JS

  1. Angular 2

  2. React

  3. Ember

Препроцессоры

Перпроцессор - это программа, которая берёт один тип данных и преобразует его в другой тип данных. Препроцессоры предоставляют дополнительный функционал, который упрощает создание HTML и CSS файлов. В случае HTML и CSS, одни из наиболее популярных языков препроцессора — это Pug и Sass. Pug преобразуется в HTML, а Sass преобразуется в CSS.

HTML

  1. Pug

  2. Haml

CSS

  1. Sass

  2. Less

Системы сборки проектов

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

  1. Gulp

  2. Grunt

Индексирование

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

К счастью, это не сложно, так как поисковые машины Яндекса и Google предоставляют специальный инструментарий.

Для Яндекса вы можете найти этот инструментарий в Яндекс Вебмастер

Для Google вы можете найти этот инструментарий в Google для веб-матеров, также на просторах google Вы можете посмотреть, какие новости сейчас в тренеде и популярные интернет-запросы

Картинки

Статья на хабре об украшении битых ккартинок

Оптимизация картинок для Веба https://habrahabr.ru/company/io/blog/258363/ на хабре об украшении

Tinypng - Сжимаем картинки для подготовки к WEB

FLIF - Новый формат изображений для WEB

Material icons - иконки в стиле Material Design от Google

Шрифты

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

Web fonts - если хочется ещё больше шрифтов и возможности их настройки. Не забудте добавить понравившейся шрифт в локальное хранилище, чтобы ускорить загрузку страницы

Web fonts - если хочется ещё больше шрифтов и возможности их настройки. Не забудте добавить понравившейся шрифт в локальное хранилище, чтобы ускорить загрузку страницы

Остальное

GitHub - крупнейший веб-сервис для хостинга IT-проектов и их совместной разработки. Основан на системе контроля версий Git

Главный редактор - позволит устранить грамматические ошибки и корректно сформулировать мысль.

Автоисправление ошибок - позволит устранить грамматические ошибки.

Рыба - наполнит бессмысленным и интересным контентом ваш сайт. Конечно, "рыбу" лучше придумывать самому, но порой сложно.

Google pagespeed позволит узнать, насколько ваш веб-ресурс оптимизирован по скорости загрузки и по адаптивности содержимого.

Подсветка синтаксиса Prismjs

HTML Validator позволит проверить ваш html-код на наличие ошибок.У CSS тоже есть свой валидатор, поэтому вы сможете создавать ещё более качественные сайты

Git - система контроля версий. На сайте git также можно найти книгу -справочник на русском языке.

Ожирение сайтов

Canvas Mozilla developer network

The HTML5 Canvas Handbook - описание всего и вся с canvas

Borders - различные виды рамок

Can i use - поддержка CSS стилей и HTML тегов браузерами

tools.promosite.ru - Анализатор апдейтов Яндекса

WillChange - свойство, о котором не знают многие

WHATWGs

Мгновенные статические веб-страницыhttps://calendar.perfplanet.com/2016/instant-static-web-pages-with-service-worker/

HTML - текстhttp://www.freeformatter.com/html-escape.html

https://coggle.it/diagram/Vz9LvW8byvN0I38x