From d44d2f074fd578c876d3c7352f4157619bdf2d1d Mon Sep 17 00:00:00 2001 From: Onelawyer Date: Sun, 2 Sep 2018 14:38:58 +0300 Subject: [PATCH 1/8] =?UTF-8?q?=D0=98=D0=B7=D0=BC=D0=B5=D0=BD=D0=B8=D0=BB?= =?UTF-8?q?=20=D1=84=D0=BE=D0=BD=20=D0=B2=20=D1=88=D0=B0=D0=BF=D0=BA=D0=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/main.css | 86 +++++++------- index.html | 307 +++++++++++++++++++++++++------------------------ sass/main.sass | 2 +- 3 files changed, 200 insertions(+), 195 deletions(-) diff --git a/css/main.css b/css/main.css index 3089fb4..c3d8780 100644 --- a/css/main.css +++ b/css/main.css @@ -1,84 +1,86 @@ .header { - padding-top: 30px; - padding-bottom: 60px; - background-color: #b8c9f1; + padding-top: 30px; + padding-bottom: 60px; + background-color: #f1f2f6; } .header__title { - font-size: 42px; - font-weight: 900; - margin-top: 60px; + font-size: 42px; + font-weight: 900; + margin-top: 60px; } .header__img { - max-width: 150px; - width: 70%; - margin-top: 20px; - opacity: 0.4; + max-width: 150px; + width: 70%; + margin-top: 20px; + opacity: 0.4; } .button-text { - padding-right: 10px; - border-right: 1px solid #fff; - vertical-align: top; + padding-right: 10px; + border-right: 1px solid #fff; + vertical-align: top; } .button-img { - vertical-align: sub; - width: 20px; - margin-left: 5px; + vertical-align: sub; + width: 20px; + margin-left: 5px; } .section { - padding: 40px 0; + padding: 40px 0; } .section-title { - font-weight: 900; - margin-bottom: 15px; - margin-top: 30px; + font-weight: 900; + margin-bottom: 15px; + margin-top: 30px; } .section-subtitle { - font-weight: 700; - margin-bottom: 10px; - margin-top: 20px; + font-weight: 700; + margin-bottom: 10px; + margin-top: 20px; } .socials { - text-align: right; + text-align: right; } .social img { - max-width: 25px; - margin-right: 10px; + max-width: 25px; + margin-right: 10px; } .unstyled-list { - padding-left: 15px; + padding-left: 15px; } footer { - padding: 40px 0; - background-color: #f1f2f6; + padding: 40px 0; + background-color: #f1f2f6; } .legal { - font-size: 12px; + font-size: 12px; } @media (max-width: 992px) { - .header__title { - font-size: 26px; - } - .socials { - text-align: left; - } - .section-title { - font-size: 22px; - } - .section-subtitle { - font-size: 18px; - } + .header__title { + font-size: 26px; + } + .socials { + text-align: left; + } + .section-title { + font-size: 22px; + } + .section-subtitle { + font-size: 18px; + } } + + /*# sourceMappingURL=main.css.map */ \ No newline at end of file diff --git a/index.html b/index.html index 5abb669..6870871 100644 --- a/index.html +++ b/index.html @@ -1,161 +1,164 @@ + - - - - - - - - - Полезные ссылки 👨‍💻 для веб-разработчика - - + + + + + + + + + Полезные ссылки 👨‍💻 для веб-разработчика + + + - + -
-
-
-
- -
-
-
- - - - -
-
-
-
-
-

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

-

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

- Добавить свою ссылку -
-
-
-
+
+
+
+
+ +
+
+
+ + + + +
+
+
+
+
+

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

+

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

+ Добавить свою ссылку +
+
+
+
-
-
-
-
-

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

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

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

-
    -
  1. JS fiddle – Песочница для JavaScript
    2. -
  2. CodePen – Песочница для HTML, CSS о JS
    3. -
  3. CSS Desk – Еще одна песочница
    4. -
-

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

-
    -
  1. Сompressor – Сжимает JPG и PNG
    2. -
  2. Tiny png – Сжимает изображения. Есть API.
    3. -
-

Шпаргалки

-
    -
  1. HTML Book – шпаргалка по HTML и CSS
    2. -
  2. CSS Cheat Sheet – шпаргалка по CSS
    3. -
  3. jQuery page2page – шпаргалка по jQuery
    4. -
  4. Emmet Cheat Sheet – шпаргалка по Emmet
    5. -
  5. WebReference - ещё одна шпаргалка по HTML5 и CSS3. Также данный сайт опубликовал свои шпаргалки в виде приложений на Google Play.
    6. -
-
- -
-

Шрифты

-
    -
  1. Google Fonts – Веб-шрифты от Google
    2. -
  2. Transfonter – Конвертер веб-шрифтов
    3. -
  3. Фонтов.нет – Подбор шрифта по фразе
    4. -
  4. Fonts4web – Шрифты для сайтов
    5. -
-

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

-
    -
  1. Can I Use – Кроссбраузерность кода
    2. -
  2. Validator W3 – Валидность HTML-кода
    3. -
  3. PageSpeed Insights – Проверка оптимизации страницы
    4. -
-

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

-
    -
  1. How To Center in CSS – центрируйте всё
    2. -
  2. CodeHouse – крутые подборки готовых решений на CSS и jQuery без плагинов
    3. -
  3. Learn Git Branching – интерактивный учебник по Git
    4. -
-

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

-
    -
  1. ​​Slick – Адаптивный слайдер
    2. -
  2. ​​Owl Carousel – Адаптивный слайдер-карусель
    3. -
  3. Tooltipster – Создание всплывающих подсказок
    4. -
  4. ​​flatpickr – Всплывающие окна с выбором даты
    5. -
-
- -
-

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

-
    -
  1. Flaticons – бесплатные векторные иконки
    2. -
  2. Seeklogo – векторные логотипы компаний
    3. -
  3. SVG Porn – векторные логотипы
    4. -
  4. TOP Logos – логотипы компаний (русские)
    5. -
  5. Font Awesome – иконочный шрифт + SVG
    6. -
  6. UTF-8 Icons – иконки на utf-8
    7. -
-

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

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

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

-
    -
  1. Animate.css – библиотека CSS анимаций
    2. -
  2. Magic – кроссбраузерные анимации
    3. -
  3. It's Tuesday. – простые и приятные CSS анимации
    4. -
-
- -
-
-
+
+
+
+
+

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

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

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

+
    +
  1. JS fiddle – Песочница для JavaScript
    2. +
  2. CodePen – Песочница для HTML, CSS о JS
    3. +
  3. CSS Desk – Еще одна песочница
    4. +
+

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

+
    +
  1. Сompressor – Сжимает JPG и PNG
    2. +
  2. Tiny png – Сжимает изображения. Есть API.
    3. +
+

Шпаргалки

+
    +
  1. HTML Book – шпаргалка по HTML и CSS
    2. +
  2. CSS Cheat Sheet – шпаргалка по CSS
    3. +
  3. jQuery page2page – шпаргалка по jQuery
    4. +
  4. Emmet Cheat Sheet – шпаргалка по Emmet
    5. +
  5. WebReference - ещё одна шпаргалка по HTML5 и CSS3. Также данный сайт опубликовал свои шпаргалки в виде приложений на Google Play.
    6. +
+
+ +
+

Шрифты

+
    +
  1. Google Fonts – Веб-шрифты от Google
    2. +
  2. Transfonter – Конвертер веб-шрифтов
    3. +
  3. Фонтов.нет – Подбор шрифта по фразе
    4. +
  4. Fonts4web – Шрифты для сайтов
    5. +
+

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

+
    +
  1. Can I Use – Кроссбраузерность кода
    2. +
  2. Validator W3 – Валидность HTML-кода
    3. +
  3. PageSpeed Insights – Проверка оптимизации страницы
    4. +
+

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

+
    +
  1. How To Center in CSS – центрируйте всё
    2. +
  2. CodeHouse – крутые подборки готовых решений на CSS и jQuery без плагинов
    3. +
  3. Learn Git Branching – интерактивный учебник по Git
    4. +
+

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

+
    +
  1. ​​Slick – Адаптивный слайдер
    2. +
  2. ​​Owl Carousel – Адаптивный слайдер-карусель
    3. +
  3. Tooltipster – Создание всплывающих подсказок
    4. +
  4. ​​flatpickr – Всплывающие окна с выбором даты
    5. +
+
+ +
+

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

+
    +
  1. Flaticons – бесплатные векторные иконки
    2. +
  2. Seeklogo – векторные логотипы компаний
    3. +
  3. SVG Porn – векторные логотипы
    4. +
  4. TOP Logos – логотипы компаний (русские)
    5. +
  5. Font Awesome – иконочный шрифт + SVG
    6. +
  6. UTF-8 Icons – иконки на utf-8
    7. +
+

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

+
    +
  1. Avocode – платформа для работы макетами для верстальщиков (PSD, Sketch и др)
    2. +
  2. Adobe Assets – работа с PSD-макетами прямо в браузере. Экспорт кода.
    3. +
  3. Zeplin – работа с дизайн-макетами в браузере. Есть экспорт кода.
    4. +
  4. PSD Tech – бесплатный аналог Avocode.
    5. +
+

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

+
    +
  1. Animate.css – библиотека CSS анимаций
    2. +
  2. Magic – кроссбраузерные анимации
    3. +
  3. It's Tuesday. – простые и приятные CSS анимации
    4. +
+
+ +
+
+
+ + - - - + + \ No newline at end of file diff --git a/sass/main.sass b/sass/main.sass index f4ae6ce..cbdf2fd 100644 --- a/sass/main.sass +++ b/sass/main.sass @@ -1,7 +1,7 @@ .header padding-top: 30px padding-bottom: 60px - background-color: #b8c9f1 + background-color: #3a3a3a &__title font-size: 42px font-weight: 900 From 8f58e761c20235cb0e6c5b17be0798e5cd9772b2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9?= <32329108+Onelawyer@users.noreply.github.com> Date: Mon, 3 Sep 2018 17:00:51 +0300 Subject: [PATCH 2/8] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB?= =?UTF-8?q?=20=D1=81=D0=B0=D0=B9=D1=82=20iloveadaptive.com?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 6870871..b720125 100644 --- a/index.html +++ b/index.html @@ -90,6 +90,7 @@

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

  1. Can I Use – Кроссбраузерность кода
  2. Validator W3 – Валидность HTML-кода
    3. +
  3. – Проверка на адаптивность
  4. PageSpeed Insights – Проверка оптимизации страницы

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

@@ -161,4 +162,4 @@

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

- \ No newline at end of file + From 8a12970125408712d6fdda5f98b0d08a4576f862 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9?= <32329108+Onelawyer@users.noreply.github.com> Date: Mon, 3 Sep 2018 17:02:45 +0300 Subject: [PATCH 3/8] =?UTF-8?q?=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2=D0=B8?= =?UTF-8?q?=D0=BB=20=D1=81=D0=B2=D0=BE=D1=8E=20=D0=BE=D1=88=D0=B8=D0=B1?= =?UTF-8?q?=D0=BA=D1=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index b720125..c585e1f 100644 --- a/index.html +++ b/index.html @@ -90,7 +90,7 @@

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

  1. Can I Use – Кроссбраузерность кода
  2. Validator W3 – Валидность HTML-кода
    3. -
  3. – Проверка на адаптивность
    4. +
  4. – Проверка на адаптивность
  5. PageSpeed Insights – Проверка оптимизации страницы

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

From 4150d31a3d25abeab289a98d17de76e12c647c78 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9?= <32329108+Onelawyer@users.noreply.github.com> Date: Mon, 3 Sep 2018 17:04:05 +0300 Subject: [PATCH 4/8] =?UTF-8?q?=D0=95=D1=89=D1=91=20=D0=BE=D0=B4=D0=BD?= =?UTF-8?q?=D1=83=20=D0=BE=D1=88=D0=B8=D0=B1=D0=BA=D1=83=20=D0=B8=D1=81?= =?UTF-8?q?=D0=BF=D1=80=D0=B0=D0=B2=D0=B8=D0=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index c585e1f..fe87908 100644 --- a/index.html +++ b/index.html @@ -90,7 +90,7 @@

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

  1. Can I Use – Кроссбраузерность кода
  2. Validator W3 – Валидность HTML-кода
    3. -
  3. – Проверка на адаптивность
    4. +
  4. iloveadaptive – Проверка на адаптивность
  5. PageSpeed Insights – Проверка оптимизации страницы

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

From 9b9c6e2989d6d0b3d262151e7b64e21000d5832c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9?= <32329108+Onelawyer@users.noreply.github.com> Date: Wed, 24 Feb 2021 15:57:09 +0300 Subject: [PATCH 5/8] =?UTF-8?q?=D0=A3=D0=B1=D1=80=D0=B0=D0=BB=20=D1=81?= =?UTF-8?q?=D1=81=D1=8B=D0=BB=D0=BA=D0=B0=20=D0=BD=D0=B0=20=D1=81=D0=BE?= =?UTF-8?q?=D1=86=D1=81=D0=B5=D1=82=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index fe87908..f4fcbb5 100644 --- a/index.html +++ b/index.html @@ -28,10 +28,10 @@
- - - - + + + +
From 74980936aaabbf51872586483e0bed23685fd1cc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9?= <32329108+Onelawyer@users.noreply.github.com> Date: Wed, 24 Feb 2021 16:12:36 +0300 Subject: [PATCH 6/8] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB?= =?UTF-8?q?=20iloveadaptive?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Онлайн сервис проверки и тестирования сайта на адаптивность --- index.html | 362 ++++++++++++++++++++++++++++++----------------------- 1 file changed, 206 insertions(+), 156 deletions(-) diff --git a/index.html b/index.html index f4fcbb5..b1d21ce 100644 --- a/index.html +++ b/index.html @@ -1,165 +1,215 @@ - - + - - - - - - - - - Полезные ссылки 👨‍💻 для веб-разработчика - - - - + + + + + + + + + Полезные ссылки 👨‍💻 для веб-разработчика + + - -
-
-
-
- -
-
-
- - - - -
-
-
-
-
-

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

-

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

- Добавить свою ссылку -
-
-
-
+
+
+
+
+ +
+
+
+ + + + +
+
+
+
+
+

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

+

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

+ Добавить свою ссылку +
+
+
+
-
-
-
-
-

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

-
    -
  1. VS Code – мощный редактор (IDE)
    2. -
  2. Sublime text 3 – удобный и быстрый редактор кода
    3. -
  3. Atom – крутой редактор от GitHub
    4. -
  4. Brackets – подходит для начинающих
    5. -
  5. Notepad ++ – крутой редактор кода
    6. -
-

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

-
    -
  1. JS fiddle – Песочница для JavaScript
    2. -
  2. CodePen – Песочница для HTML, CSS о JS
    3. -
  3. CSS Desk – Еще одна песочница
    4. -
-

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

-
    -
  1. Сompressor – Сжимает JPG и PNG
    2. -
  2. Tiny png – Сжимает изображения. Есть API.
    3. -
-

Шпаргалки

-
    -
  1. HTML Book – шпаргалка по HTML и CSS
    2. -
  2. CSS Cheat Sheet – шпаргалка по CSS
    3. -
  3. jQuery page2page – шпаргалка по jQuery
    4. -
  4. Emmet Cheat Sheet – шпаргалка по Emmet
    5. -
  5. WebReference - ещё одна шпаргалка по HTML5 и CSS3. Также данный сайт опубликовал свои шпаргалки в виде приложений на Google Play.
    6. -
-
- -
-

Шрифты

-
    -
  1. Google Fonts – Веб-шрифты от Google
    2. -
  2. Transfonter – Конвертер веб-шрифтов
    3. -
  3. Фонтов.нет – Подбор шрифта по фразе
    4. -
  4. Fonts4web – Шрифты для сайтов
    5. -
-

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

-
    -
  1. Can I Use – Кроссбраузерность кода
    2. -
  2. Validator W3 – Валидность HTML-кода
    3. -
  3. iloveadaptive – Проверка на адаптивность
    4. -
  4. PageSpeed Insights – Проверка оптимизации страницы
    5. -
-

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

-
    -
  1. How To Center in CSS – центрируйте всё
    2. -
  2. CodeHouse – крутые подборки готовых решений на CSS и jQuery без плагинов
    3. -
  3. Learn Git Branching – интерактивный учебник по Git
    4. -
-

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

-
    -
  1. ​​Slick – Адаптивный слайдер
    2. -
  2. ​​Owl Carousel – Адаптивный слайдер-карусель
    3. -
  3. Tooltipster – Создание всплывающих подсказок
    4. -
  4. ​​flatpickr – Всплывающие окна с выбором даты
    5. -
-
- -
-

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

-
    -
  1. Flaticons – бесплатные векторные иконки
    2. -
  2. Seeklogo – векторные логотипы компаний
    3. -
  3. SVG Porn – векторные логотипы
    4. -
  4. TOP Logos – логотипы компаний (русские)
    5. -
  5. Font Awesome – иконочный шрифт + SVG
    6. -
  6. UTF-8 Icons – иконки на utf-8
    7. -
-

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

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

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

-
    -
  1. Animate.css – библиотека CSS анимаций
    2. -
  2. Magic – кроссбраузерные анимации
    3. -
  3. It's Tuesday. – простые и приятные CSS анимации
    4. -
-
- -
-
-
+
+
+
+
+

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

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

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

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

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

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

Шпаргалки

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

Генераторы CSS

+
    +
  1. CSS3gen – CSS генератор кнопок, градиентов, бордеров,теней трансформации, фона, анимаций
    2. +
  2. Hailpixel – простой способ подобрать цвет в CSS
    3. +
  3. CSSgradient – градиент генератор
    4. +
  4. CSS3patterns – CSS паттерны
    5. +
  5. FreeFrontend – CSS паттерны
    6. +
  6. ColorScheme – конвертер цветов
    7. +
  7. CSSworld – Генератор flexbox контейнеров
    8. +
+
+ +
+

Шрифты

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

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

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

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

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

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

+
    +
  1. Slick – Адаптивный слайдер
    2. +
  2. Swiper – Современный адаптивный слайдер
    3. +
  3. Owl Carousel – Адаптивный слайдер-карусель
    4. +
  4. Tooltipster – Создание всплывающих подсказок
    5. +
  5. Flatpickr – Всплывающие окна с выбором даты
    6. +
  6. Vide – Видеофон для сайта
    7. +
  7. Masked Input – Плагин маски ввода для input
    8. +
  8. One Page Scroll – Плагин скролла страницы по секциям в виде слайдера. + Демо.
    9. +
+
+ +
+

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

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

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

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

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

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

Прочее

+
    +
  1. Coverr – Короткие видео для фона на сайт
    2. +
  2. Subte Patterns – Фоны для сайта
    3. +
  3. Генератор UTM-меток
    4. +
  4. Underscores – Пустая тема для Wordpress
    5. +
  5. Minify – CSS и JS минификатор
    6. +
  6. Unminify – Анминификатор для HTML, CSS, JS
    7. +
  7. CodeWars – Задачи для тренировки JavaScript кода
    8. +
  8. FreeFormatter.com – Vинификатор
    9. +
  9. Blisk – Браузер для разработчиков
    10. +
-
-
-
-
- - Онлайн-школа веб-разработки -
-
-
-
-
-
-
- - - - -
-
-
-
-
+

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

+
    +
  1. You Don't Know JS – перевод серии книг по JavaScript.
    2. +
+
+ +
+
+
+ + - From b5b58e944b8df70360c74dea00b41d031674436e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9?= <32329108+Onelawyer@users.noreply.github.com> Date: Wed, 24 Feb 2021 16:16:22 +0300 Subject: [PATCH 7/8] Update index.html --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index b1d21ce..fbecd0c 100644 --- a/index.html +++ b/index.html @@ -109,7 +109,7 @@

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

  • Mobile Friendly – Оптимизирована ли ваша страница для мобильных устройств
  • Find Dublicate Content on your site – Проверка уникальности текста на сайте
  • Piliapp – Валидность JS-кода
    • -
  • – Проверить как выглядит сайт на разных устройствах
    • +
  • I love adaptive – Проверить как выглядит сайт на разных устройствах

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

      From 2c855f24a65fdf56805b2fe2b4dc1403e302721e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9?= <32329108+Onelawyer@users.noreply.github.com> Date: Wed, 24 Feb 2021 16:17:01 +0300 Subject: [PATCH 8/8] Update index.html --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index fbecd0c..1eda46a 100644 --- a/index.html +++ b/index.html @@ -35,7 +35,7 @@

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

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

      - Добавить свою ссылку + Добавить свою ссылку