Обновление 14/05/2021: Нажмите на новые ресурсы, не в этом списке.
Веб -разработка не является легкой задачей для начинающих, чтобы создать веб -проект, который выдает много усилий, времени и обширных знаний в различных элементах HTML, свойствах CSS и JavaScript. Я перечисляю более 200 ресурсов, которые помогут младшим веб -разработчикам заполнить пробелы в знаниях, которых им не хватает в HTML и CSS. Они определенно помогут разработчикам создавать удивительные веб -проекты с меньшими усилиями и быстро. Все ресурсы, перечисленные здесь, бесплатны. Эти ресурсы можно использовать для понимания того, как работает CSS, которые помогают быстро изучить CSS. Надеюсь, это поможет вам, счастливое кодирование.
Ресурсы перечислены в этом посте:-
1.CSS Фильтры
2.Media Query Generators
3.css Spinners
4.Font Mixers
5.Box Теневые генераторы
6.meta Tag Generators
7. Фавикон производителей
8. Профильные производители картин
9. Нейморфные генераторы
10. Генераторы издаленных тона
11. Генераторы формы
12. Генераторы Бриббона/Баннера
13.NONDLINERINE ANITARITY Generators
14. Генераторы меню Hamburger
15.html таблицы генераторы
16.css Generators – еще один связанный пост
17. ПРОЕКТИРОВАНИЕ ГЕНЕРТОРЫ Кнопки
18.Checkbox И радионогногнозы генераторов
19. Ресурсы анимации -еще один связанный с этим пост
20.icon Resources
21.color Gradient Generators -еще один сопутствующий пост
22. Колорные генераторы палитры -еще один сопутствующий пост
23. Генераторы формы SVG -еще один связанный с этим пост
24. Справочные генераторы SVG -еще один сопутствующий пост
25. Ресурсы иллюстрации SVG -еще один связанный с этим пост
CSS фильтры
Приведенный ниже сайт поможет вам генерировать эффект наложения для ваших изображений, используя код фильтра CSS. Вы можете создать наложение, настраивая различные параметры, такие как яркости, контрастность, серого, оттенка, непрозрачность, насыщение, размытие и т. Д. Наложение также может содержать градиентные цвета. Код CSS для наложения также будет содержать префиксы браузера, так что наложение будет поддерживаться в широком диапазоне браузеров.
1 CSS Filters
2 CSS -фильтровая генератор
СМИ Генераторы запросов
В текущей ситуации количество различных типов устройств, имеющих доступ к Интернету, большое, и у них также есть разные макеты экрана. Таким образом, мы не можем использовать единый макет для всех устройств, это приводит к разработке отзывчивости для веб -проекта сложной. Мы используем медиа -запросы для достижения отзывчивости. Запросы в медиа, необходимые для жидкости, адаптивной проектирования, могут быть сложными и трудоемкими, поскольку количество устройств, на которые мы нацеливаемся, становится больше. Приведенные ниже перечисленные ресурсы помогут вам с легкостью генерировать код запроса CSS Media. Они помогают вам быстро создавать конкретные или общие медиа -запросы, которые могут быть вставлены непосредственно в ваши проекты.
1 Простой CSS
2 Гиона
3 Инструменты51
CSS Spinner
Бесплатные прядильщики CSS, которые можно использовать в ваших веб -проектах, их также можно использовать в качестве предварительных погрузчиков.
1. загрузка.io
2. Tobiashlin
3.icons8.com
Генераторы шрифтов/смесители шрифтов
Использование различных шрифтов в вашем веб -дизайне может улучшить внешний вид вашего веб -сайта, но если используемые вами шрифты не дополняют друг друга, это сделает дизайн ужасным. Так что лучше попробовать различные комбинации перед выбором. Эти ссылки помогут вам играть с различными шрифтами, смешивая их, чтобы создать красивые паттерны, которые могут сделать ваш веб -проект потрясающим.
1 Бренд Марк
2 Смешайте шрифт
3. DJR
4 Трибу
5 Радость шрифта
Коробка тень
Box Shadow поможет создать 3D -эффект для ваших веб -компонентов и текстов в вашем веб -проекте, чтобы спроектировать тот, который хорош для веб -проекта, – это время, приведенный ниже, приведенные ниже ресурсы помогут быстро и легко генерировать тени коробки, Сгенерированный код может быть использован непосредственно в лист стиля.
1 GetCSSSCAN
2 CSS3 Studio
3 Наслаждайтесь CSS
4. Cssbud
5 Shadows.brumm
Метаги генератор
Метаги важны для SEO, это большое количество метатеток, доступных, мы можем не знать, как их настроить. Ссылки ниже помогут вам генерировать общие, важные метатеги на основе ваших входов.
1 Meta Tag Generator
2 Seoptimer
3 Анализ зала
Бесплатный производитель Favicon
Фавиконы – это небольшие файлы значков 16×16, которые отображаются рядом с URL -адресом вашего сайта в адресной панели браузера, приведенные ниже сайты помогают вам создать любимые.
1 Формито
2 Только бесплатный текст производителя логотипа
3 Favicon.io
4 Фавикон-генератор
5 Favicon.cc
Профиль производитель изображений
Веб -сайты, которые помогают создавать изображения профиля.
1 Pfpmaker
Нейморфизм
Нейморфизм-это тенденция дизайна, которая отмечена минимальным и реалистичным пользовательским интерфейсом. Несколько сайтов, которые помогают генерировать код CSS для дизайна Neumorphism, указаны ниже.
1 Нейморфизм
2 НЕОМОРФИЧЕСКИЙ
Создатель двойного тона
Ссылки ниже помогают создавать эффект двойного тона с использованием CSS.
1 Css duotones.com
2 Medialoot
3 Duotone: ShapeFactory
Генератор треугольника
Эти ссылки помогают генерировать формы треугольника с помощью HTML и CSS, вы можете использовать форму, просто скопив код в свой проект.
1 Омацури
2.css Треугольник Генератор
Генератор ленты/баннера
Ссылки помогают генерировать ленты и баннеры.
1 Генератор значков
2 Doodle Nerd
3 CSS Portal: лента
4 CSS Portal: ленточный баннер
Подчеркивают генераторы
Эти ссылки помогают генерировать подчеркивание и анимации, которые можно применять подчеркивается в CSS.
1. Подчеркнуть генератор
2 CSS Bud
Значки меню гамбургера
Ссылки ниже помогают генерировать красивые гамбургерные меню.
Нажмите, чтобы расширить список значков меню гамбургера 1 2. Бургер-генератор
Табличный генератор
Ссылки помогают создавать красивые HTML -таблицы. Ссылки помогают генерировать как HTML -код для таблицы, так и CSS -код, чтобы укрепить таблицы на основе ваших предпочтений.
Нажмите, чтобы расширить список генераторов таблиц 1. Div Table 2. CSS Portal 3. HTML.am
Случайный генератор
Нажмите, чтобы развернуть список случайных генераторов #### 1. Трехмерная обложка 2. Водопроводная труба 3. Карточка перевернут
Генераторы кнопок
Ссылки ниже помогут разработать различные кнопки на основе ваших предпочтений, эти ссылки генерируют код CSS ваших проектов, который можно скопировать в ваши проекты. Различный эффект падения также может быть сгенерирован с использованием ссылок.
Нажмите, чтобы расширить список ресурсов CSS 1. GradientButton 2. CSS3ButTongenerator.com 3. bestcssbuttongenerator.com 4. cssbuttoncreator.com 5. cssportal.com 6. Загрузка.io 7. fromdev.com 8. html-code-generator.com 9. cssgenerators.net 10. buttonoptimizer.com 11. dextronet.com 12. sciweavers.org ——————————————- Переключатель 1. cssportal.com 2. Proto.io 3. html-code-generator.com 4. Булочка ——————————————- Генератор флажков 1. Doodle Nerd 2. Булочка ——————————————- Радиобатт -генератор 1. Doodle Nerd 2. Булочка
CSS анимационные ресурсы
Приведенные ниже ресурсы помогают вам получить код CSS для оживления различных компонентов ваших веб -проектов.
Нажмите, чтобы расширить список ресурсов анимации 1. Приложение Гуруз 2. CSS оживляет 3. Аниматело 4. Все анимация CSS3 5.csshake 6.cssanimation 7. Hover. CSS 8.infinite 9. Это вторник 10.magic 11. Микрон 12.Motion UI 13.Bnoxious 14. REBOUNDGEN 15. -Rocket 16. Придуманные CSS 17. Анимиста 18. Анимат. CSS 19. КЛЮЧЕСКИЕ ФРИМА
Иконки 💥
Приведенные ниже ссылки предоставляются в основном с бесплатными ресурсами значков, которые можно использовать в веб -проектах.
Нажмите, чтобы расширить список ресурсов значков 1. Иконы перьев 2. CSS.gg 3. Иконки джема 4. Линейные значки 5. Материальные значки 6.iconmonster 7. Pixsellz 8. Иконшок 9. Icons8 10. Flaticon 11. Фрипик 12. Икона ниндзя 13. Svgrepo 14. Капитан Icon Web 15. Шрифт потрясающий 16. Smplkit
Цветовые градиентные ресурсы
Эти ссылки помогают генерировать цветовые градиенты, градиенты могут быть созданы на основе настройки элементов управления, предоставляемых соответствующими сайтами. Вы можете создать 2 градиента на основе цветов или несколько цветов, используя различные веб -сайты, представленные в списке. Некоторые веб -сайты также предоставляют широкий спектр предварительно созданных цветовых градиентов, которые можно копировать в ваши веб -проекты. Нажмите раздел кнопки стрелки, чтобы расширить список ресурсов.
Нажмите, чтобы расширить список ресурсов цветовых градиентов 1. Эгградиенты 2. Colorzilla 3. Вебградриенты 4. MyColor.space 5. Coolhue 6. GradientHunt 7. Uigradient 8. Захват 9. Мдиги 10. Coolors
Цветовая палитра Генератор
Ссылки ниже помогут генерировать цветовую палитру, которая может сделать ваш веб -проект потрясающим.
1 Colorsontheweb
2 ColorPalettes
3 Colorhunt
4. 0 До 255
5 Hailpixel
6 Clrs.cc
7. htmlcolorcodes
8 Coolors
9 Colromind
10 Музил
11 Canva
12 Mycolor.space
13. AdobecolorWheel
14 HUESNAP
15 Материалпалетт
16 Colorexplorer
17 Палеттон
18 Brandcolor
19 Colorpoint.io
20 Цветовой миксер
Генератор форм SVG
Ссылки ниже помогут генерировать различные формы SVG, сайты будут генерировать код SVG для формирования, которые вы генерируете, некоторые сайты также позволят загрузить дизайн в формате изображения. Нажмите раздел кнопки стрелки, чтобы расширить список ресурсов.
Нажмите, чтобы развернуть список ресурсов SVG #### 1. Blobmaker 2. Squircley 3. Softr.io: генератор форм SVG 4. Капли 5. Чарт 6. Аконтанция: Генератор градиентного волны 7. Уэйверли 8. Softr.io: генератор волн SVG 9. GetWaves.io: генератор волн 10. Svgwave.in: генератор волн 11. Haikei: генератор нескольких форм 12. SVGwaves.io 13. Разделитель формы 14. Омацури
SVG -фоновые генераторы
Ссылки ниже помогут вам генерировать красивые фоны в формате SVG. У большинства сайтов есть элементы управления, которые позволяют вам разрабатывать фон, сгенерированные изображения могут быть загружены в нескольких форматах.
Нажмите, чтобы расширить список фоночных ресурсов SVG 1. SVG фон 2. Герой шаблоны 3. Philiprogers: Svgpatterns 4. Библиотека шаблонов 5. Простой рисунок 6. Patternico 7. Пааттернс 8. Классный фон 9. Btmills: GeoPattern 10. Бгджар 11. Svgeez 12. PatternPad 13. Tartanify 14. BG Siteorigin 15. Табби 16. Шаблон монстр 17. Visiwig 18. Шаблон ниндзя 19. CSS -фоновые узоры 20. Шаблон 21. Анимированный фон CSS 22. CSS Stripes Generator 23. Шаблон 24. Doodad: генератор рисунков
Иллюстрационные ресурсы
Здесь я перечисляю более 30+ ресурсов, которые помогут вам получить бесплатные иллюстрации для ваших веб -проектов. Большинство из этих ресурсов предоставляют бесплатное содержание. Большинство иллюстраций могут загрузить меня в виде формата SVG или формата PNG, который лучше, чем формат JPG, используя Format SVG/PNG, чтобы повысить производительность веб -сайта при сравнении с использованием изображений JPG. Также SVG Scale Well No To Topply для разделения файлов для создания отзывчивости. Пожалуйста, нажмите на стрелку ниже, чтобы расширить список ресурсов
Нажмите, чтобы расширить список ресурсов иллюстрации 1. UndRaw 2. Нарисовать комплект 3. Индийский каракуль 4. Пронзительно 5. Открытые каракули 6. Лукашадам 7. IRA Design 8. Миккит 9. Шкала 10. Пульс 11. СДЕЛАЙ МЕНЯ 12. Абсурд 13. Существительный проект 4. Свежий фолк 15. Rawpixel 16. WebPixels: Eye Pop 17. DeleSign 18. Многопиксели 19. Icons8 20. Хуманы 21. Оптимизировать 22. Ясно 23. UI8 24. Контроль. Горные породы 25. Niceillustrations 26. Pixel True 27. Изометрический 28. Набор рассказов 29. Открытые модели 30. Черные иллюстрации 31. Бесплатные иллюстрации 32. Иллюстрации 33. Getillustrations
Office Resource для ваших веб -проектов: 75+ фоновых ресурсов🔥
Kiran Raj R ・ 19 мая ・ 8 мин прочитал
Все, что вам нужно знать об объекте даты в JavaScript
Kiran Raj R ・ 17 мая ・ 6 минут прочитал
25 потрясающих шрифтов от Google Fonts
Kiran Raj R ・ 14 апреля ・ 1 мин прочитал
24 HTML -тегов, которые вы, возможно, не знаете.
Kiran Raj R ・ 4 мая ・ 6 минут прочитал
12 Простая анимация пуговица кнопки с использованием CSS
Kiran Raj R ・ 5 мая ・ 1 мин прочитал
Оригинал: “https://dev.to/kiranrajvjd/the-ultimate-web-developer-resources-list-200-resources-2gf5”