├── README.md ├── css ├── main.css └── main.css.map ├── favicon.ico ├── img ├── facebook.svg ├── github-logo.svg ├── instagram.svg ├── preview.jpg ├── vk.svg └── youtube.svg ├── index.html └── sass ├── _media.sass └── main.sass /README.md: -------------------------------------------------------------------------------- 1 | # Полезные ссылки для веб-разработчика 2 | Набор самых необходимых программ, сервисов и ссылок для работы. Вы можете дополнять репозиторий полезными ссылками через Pull Requests 3 | Посмотреть полную версию можно по ссылке: https://aislam23.github.io/links 4 | -------------------------------------------------------------------------------- /css/main.css: -------------------------------------------------------------------------------- 1 | .header { 2 | padding-top: 30px; 3 | padding-bottom: 60px; 4 | background-color: #b8c9f1; 5 | } 6 | 7 | .header__title { 8 | font-size: 42px; 9 | font-weight: 900; 10 | margin-top: 60px; 11 | } 12 | 13 | .header__img { 14 | max-width: 150px; 15 | width: 70%; 16 | margin-top: 20px; 17 | opacity: 0.4; 18 | } 19 | 20 | .button-text { 21 | padding-right: 10px; 22 | border-right: 1px solid #fff; 23 | vertical-align: top; 24 | } 25 | 26 | .button-img { 27 | vertical-align: sub; 28 | width: 20px; 29 | margin-left: 5px; 30 | } 31 | 32 | .section { 33 | padding: 40px 0; 34 | } 35 | 36 | .section-title { 37 | font-weight: 900; 38 | margin-bottom: 15px; 39 | margin-top: 30px; 40 | } 41 | 42 | .section-subtitle { 43 | font-weight: 700; 44 | margin-bottom: 10px; 45 | margin-top: 20px; 46 | } 47 | 48 | .socials { 49 | text-align: right; 50 | } 51 | 52 | .social img { 53 | max-width: 25px; 54 | margin-right: 10px; 55 | } 56 | 57 | .unstyled-list { 58 | padding-left: 15px; 59 | } 60 | 61 | footer { 62 | padding: 40px 0; 63 | background-color: #f1f2f6; 64 | } 65 | 66 | .legal { 67 | font-size: 12px; 68 | } 69 | 70 | @media (max-width: 992px) { 71 | .header__title { 72 | font-size: 26px; 73 | } 74 | .socials { 75 | text-align: left; 76 | } 77 | .section-title { 78 | font-size: 22px; 79 | } 80 | .section-subtitle { 81 | font-size: 18px; 82 | } 83 | } 84 | /*# sourceMappingURL=main.css.map */ -------------------------------------------------------------------------------- /css/main.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "AAAA,AAAA,OAAO,CAAC;EACJ,WAAW,EAAE,IAAI;EACjB,cAAc,EAAE,IAAI;EACpB,gBAAgB,EAAE,OAAO;CASJ;;AARpB,AAAD,cAAQ,CAAC;EACL,SAAS,EAAE,IAAI;EACf,WAAW,EAAE,GAAG;EAChB,UAAU,EAAE,IAAI;CAAG;;AACtB,AAAD,YAAM,CAAC;EACH,SAAS,EAAE,KAAK;EAChB,KAAK,EAAE,GAAG;EACV,UAAU,EAAE,IAAI;EAChB,OAAO,EAAE,GAAG;CAAG;;AAElB,AAAD,YAAM,CAAC;EACH,aAAa,EAAE,IAAI;EACnB,YAAY,EAAE,cAAc;EAC5B,cAAc,EAAE,GAAG;CAAG;;AACzB,AAAD,WAAK,CAAC;EACF,cAAc,EAAE,GAAG;EACnB,KAAK,EAAE,IAAI;EACX,WAAW,EAAE,GAAG;CAAG;;AAC3B,AAAA,QAAQ,CAAC;EACL,OAAO,EAAE,MAAM;CAQU;;AAPxB,AAAD,cAAO,CAAC;EACJ,WAAW,EAAE,GAAG;EAChB,aAAa,EAAE,IAAI;EACnB,UAAU,EAAE,IAAI;CAAG;;AACtB,AAAD,iBAAU,CAAC;EACP,WAAW,EAAE,GAAG;EAChB,aAAa,EAAE,IAAI;EACnB,UAAU,EAAE,IAAI;CAAG;;AAEtB,AAAD,QAAE,CAAC;EACC,UAAU,EAAE,KAAK;CAAG;;AAF5B,AAGI,OAHG,CAGH,GAAG,CAAC;EACA,SAAS,EAAE,IAAI;EACf,YAAY,EAAE,IAAI;CAAG;;AAC7B,AAAA,cAAc,CAAC;EACX,YAAY,EAAE,IAAI;CAAG;;AACzB,AAAA,MAAM,CAAC;EACH,OAAO,EAAE,MAAM;EACf,gBAAgB,EAAE,OAAO;CAAG;;AAChC,AAAA,MAAM,CAAC;EACH,SAAS,EAAE,IAAI;CAAG;;AC5CtB,MAAM,EAAE,SAAS,EAAE,KAAK;EAEf,AAAD,cAAQ,CAAC;IACL,SAAS,EAAE,IAAI;GAAG;EAErB,AAAD,QAAE,CAAC;IACC,UAAU,EAAE,IAAI;GAAG;EAEtB,AAAD,cAAO,CAAC;IACJ,SAAS,EAAE,IAAI;GAAG;EACrB,AAAD,iBAAU,CAAC;IACP,SAAS,EAAE,IAAI;GAAG", 4 | "sources": [ 5 | "../sass/main.sass", 6 | "../sass/_media.sass" 7 | ], 8 | "names": [], 9 | "file": "main.css" 10 | } -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aislam23/links/538ab8b3afa315bbb957d0fdfc3f8165a39fa6ef/favicon.ico -------------------------------------------------------------------------------- /img/facebook.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /img/github-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /img/instagram.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 11 | 13 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /img/preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aislam23/links/538ab8b3afa315bbb957d0fdfc3f8165a39fa6ef/img/preview.jpg -------------------------------------------------------------------------------- /img/vk.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | 10 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /img/youtube.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 8 | 12 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Полезные ссылки 👨‍💻 для веб-разработчика 13 | 14 | 15 | 16 | 28 | 29 | 30 | 31 | 32 |
33 |
34 |
35 |
36 | 39 |
40 |
41 |
42 | 43 | 44 | 45 | 46 |
47 |
48 |
49 |
50 |
51 |

Полезные ссылки 👨‍💻 для веб-разработчика

52 |

Программы, сервисы и сайты, которые помогут в работе.

53 | Добавить свою ссылку 54 |
55 |
56 |
57 |
58 | 59 |
60 |
61 |
62 |
63 |

Редакторы кода

64 |
    65 |
  1. VS Code – мощный редактор (IDE)
    2. 66 |
  2. Sublime text 3 – удобный и быстрый редактор кода
    3. 67 |
  3. Atom – крутой редактор от GitHub
    4. 68 |
  4. Brackets – подходит для начинающих
    5. 69 |
  5. Notepad ++ – легендарный редактор
    6. 70 |
71 |

Песочницы для кода

72 |
    73 |
  1. JS fiddle – Песочница для JavaScript
    2. 74 |
  2. CodePen – Песочница для HTML, CSS о JS
    3. 75 |
  3. JS Bin – Песочница с выводом в консолью
    4. 76 |
77 |

Работа с изображениями

78 |
    79 |
  1. Сompressor – Сжимает JPG и PNG
    2. 80 |
  2. Tiny png – Сжимает изображения. Есть API.
    3. 81 |
  3. Vectorizer – Из растрового в векторное изображение
    4. 82 |
  4. Online-Convert – Бесплатный конвертер из растрового в векторное изображение
    5. 83 |
84 |

Шпаргалки

85 |
    86 |
  1. FlexBox – шпаргалка по Flexbox
    2. 87 |
  2. Html5book – шпаргалка по HTML, CSS, JavaScript и jQuery
    3. 88 |
  3. HTML Book – шпаргалка по HTML и CSS
    4. 89 |
  4. CSS Cheat Sheet – шпаргалка по CSS
    5. 90 |
  5. jQuery page2page – шпаргалка по jQuery
    6. 91 |
  6. Emmet Cheat Sheet – шпаргалка по Emmet
    7. 92 |
  7. WebReference – ещё одна шпаргалка по HTML5 и CSS3. Также данный сайт опубликовал свои шпаргалки в виде приложений на Google Play.
    8. 93 |
  8. Easings – Шпаргалка функций плавности
    9. 94 |
  9. FreeCodeCamp – Шпаргалка по FlexBox
    10. 95 |
  10. Habr – Шпаргалка по LESS и SASS
    11. 96 |
97 |

Генераторы CSS

98 |
    99 |
  1. CSS3gen – CSS генератор кнопок, градиентов, бордеров,теней трансформации, фона, анимаций
    2. 100 |
  2. Hailpixel – простой способ подобрать цвет в CSS
    3. 101 |
  3. CSSgradient – градиент генератор
    4. 102 |
  4. CSS3patterns – CSS паттерны
    5. 103 |
  5. FreeFrontend – CSS паттерны
    6. 104 |
  6. ColorScheme – конвертер цветов
    7. 105 |
  7. CSSworld – Генератор flexbox контейнеров
    8. 106 |
107 |
108 | 109 |
110 |

Шрифты

111 |
    112 |
  1. Google Fonts – Веб-шрифты от Google
    2. 113 |
  2. Transfonter – Конвертер веб-шрифтов
    3. 114 |
  3. Фонтов.нет – Подбор шрифта по фразе
    4. 115 |
  4. Fonts4web – Шрифты для сайтов
    5. 116 |
  5. Type Anything – Калькулятор параметров текста + генератор CSS-кода
    6. 117 |
  6. FontStorage – Плагин, простой способ подключить шрифт
    7. 118 |
119 |

Проверка кода

120 |
    121 |
  1. Can I Use – Кроссбраузерность кода
    2. 122 |
  2. Validator W3 – Валидность HTML-кода
    3. 123 |
  3. PageSpeed Insights – Проверка оптимизации страницы
    4. 124 |
  4. Mobile Friendly – Оптимизирована ли ваша страница для мобильных устройств
    5. 125 |
  5. Find Dublicate Content on your site – Проверка уникальности текста на сайте
    6. 126 |
  6. Piliapp – Валидность JS-кода
    7. 127 |
128 |

Лайфхаки для верстальщика

129 |
    130 |
  1. How To Center in CSS – центрируйте всё
    2. 131 |
  2. CodeHouse – крутые подборки готовых решений на CSS и jQuery без плагинов
    3. 132 |
  3. Learn Git Branching – интерактивный учебник по Git
    4. 133 |
  4. Генератор Flexbox верстки – Конструктор Flexbox
    5. 134 |
  5. Генератор Grid верстки – Конструктор Grid
    6. 135 |
  6. Flexbox Defense – игра для изучения Flexbox
    7. 136 |
  7. GRID GARDEN – игра для изучения Grid
    8. 137 |
138 |

Полезные jQuery плагины

139 |
    140 |
  1. Slick – Адаптивный слайдер
    2. 141 |
  2. Swiper – Современный адаптивный слайдер
    3. 142 |
  3. Owl Carousel – Адаптивный слайдер-карусель
    4. 143 |
  4. Tooltipster – Создание всплывающих подсказок
    5. 144 |
  5. Flatpickr – Всплывающие окна с выбором даты
    6. 145 |
  6. Vide – Видеофон для сайта
    7. 146 |
  7. Masked Input – Плагин маски ввода для input
    8. 147 |
  8. One Page Scroll – Плагин скролла страницы по секциям в виде слайдера. 148 | Демо.
    9. 149 |
150 |
151 | 152 |
153 |

Иконки и графика

154 |
    155 |
  1. Flaticons – бесплатные векторные иконки
    2. 156 |
  2. Seeklogo – векторные логотипы компаний
    3. 157 |
  3. SVG Porn – векторные логотипы
    4. 158 |
  4. TOP Logos – логотипы компаний (русские)
    5. 159 |
  5. Font Awesome – иконочный шрифт + SVG
    6. 160 |
  6. UTF-8 Icons – иконки на utf-8
    7. 161 |
  7. Fontello – шрифтовые иконки. Шрифты генерируются на ходу из выбранных иконок, доступны иконки из 14 популярных шрифтов.
    8. 162 |
  8. IconMonster – бесплатные векторные иконки
    9. 163 |
  9. IcoMoon – векторные иконки
    10. 164 |
165 |

Работа с дизайн-макетами

166 |
    167 |
  1. Avocode – платформа для работы макетами для верстальщиков (PSD, Sketch и др)
    2. 168 |
  2. Adobe Assets – работа с PSD-макетами прямо в браузере. Экспорт кода.
    3. 169 |
  3. Zeplin – работа с дизайн-макетами в браузере. Есть экспорт кода.
    4. 170 |
  4. PSD Tech – бесплатный аналог Avocode.
    5. 171 |
  5. Markupeasy – бесплатный аналог Avocode.
    6. 172 |
173 |

Библиотеки с анимациями

174 |
    175 |
  1. Animate.css – библиотека CSS анимаций
    2. 176 |
  2. Magic – кроссбраузерные анимации
    3. 177 |
  3. It's Tuesday. – простые и приятные CSS анимации
    4. 178 |
  4. Wow.js – анимация при появлении элемента
    5. 179 |
  5. Hover.css – набор анимаций CSS
    6. 180 |
  6. CSS3-анимация – полная статья про анимацию на CSS3
    7. 181 |
182 |

Прочее

183 |
    184 |
  1. Coverr – Короткие видео для фона на сайт
    2. 185 |
  2. Subte Patterns – Фоны для сайта
    3. 186 |
  3. Генератор UTM-меток
    4. 187 |
  4. Underscores – Пустая тема для Wordpress
    5. 188 |
  5. Minify – CSS и JS минификатор
    6. 189 |
  6. Unminify – Анминификатор для HTML, CSS, JS
    7. 190 |
  7. CodeWars – Задачи для тренировки JavaScript кода
    8. 191 |
  8. FreeFormatter.com – Vинификатор
    9. 192 |
  9. Blisk – Браузер для разработчиков
    10. 193 |
194 | 195 |

Обучающая литература

196 |
    197 |
  1. You Don't Know JS – перевод серии книг по JavaScript.
    2. 198 |
199 |
200 | 201 |
202 |
203 |
204 | 205 | 227 | 228 | 229 | 230 | -------------------------------------------------------------------------------- /sass/_media.sass: -------------------------------------------------------------------------------- 1 | @media (max-width: 992px) 2 | .header 3 | &__title 4 | font-size: 26px 5 | .social 6 | &s 7 | text-align: left 8 | .section 9 | &-title 10 | font-size: 22px 11 | &-subtitle 12 | font-size: 18px 13 | -------------------------------------------------------------------------------- /sass/main.sass: -------------------------------------------------------------------------------- 1 | .header 2 | padding-top: 30px 3 | padding-bottom: 60px 4 | background-color: #b8c9f1 5 | &__title 6 | font-size: 42px 7 | font-weight: 900 8 | margin-top: 60px 9 | &__img 10 | max-width: 150px 11 | width: 70% 12 | margin-top: 20px 13 | opacity: 0.4 14 | .button 15 | &-text 16 | padding-right: 10px 17 | border-right: 1px solid #fff 18 | vertical-align: top 19 | &-img 20 | vertical-align: sub 21 | width: 20px 22 | margin-left: 5px 23 | .section 24 | padding: 40px 0 25 | &-title 26 | font-weight: 900 27 | margin-bottom: 15px 28 | margin-top: 30px 29 | &-subtitle 30 | font-weight: 700 31 | margin-bottom: 10px 32 | margin-top: 20px 33 | .social 34 | &s 35 | text-align: right 36 | img 37 | max-width: 25px 38 | margin-right: 10px 39 | .unstyled-list 40 | padding-left: 15px 41 | footer 42 | padding: 40px 0 43 | background-color: #f1f2f6 44 | .legal 45 | font-size: 12px 46 | @import "media" --------------------------------------------------------------------------------