34421
FullStack-материалы от Senior-разработчика для WEB-специалистов Сотрудничество: @CodingLead Разработка сайтов любой сложности 👨🏻💻
🖥 Google Material You UI Kit – дизайн мобильного интерфейса в нежно-зеленых тонах. Его можно использовать для создания различных мобильных приложений.
Сайтодел | #макет #figma
✍️ Inter – это семейство шрифтов, разработанное специально для компьютеров. Его особенность - слегка удлиненные по вертикали буквы и настройка знаков препинания в зависимости от формы окружающих глифов. Пример есть тут: "Checkbox Group"
Сайтодел | #шрифт
🎨 Цветовая палитра макета "Travalizer": HEX | RGB #F5DBC4 | rgb(245,219,196) #FDC858 | rgb(253,200,88) #345B3E | rgb(52,91,62)⚠️ Цвет копируется одним кликом!
Сайтодел | #палитра
🐙 Adrenaline – это отладчик, который работает на базе OpenAI Codex. Он не только помогает найти ошибки в коде, но и дает ценные подсказки.
Сайтодел | #репозиторий #github
🐙 Odoo – это набор бизнес-приложений с открытым исходным кодом. Odoo можно использовать автономно, но эти приложения также легко интегрируются в уже готовые проекты.
Сайтодел | #репозиторий #github
💾 Text Mask – эффект, позволяющий поместить в текст любое видео. Он будет отлично смотреться на главном заголовке сайта.
Сайтодел | #сниппет #css
✍️ Barlow – семейство закругленных гротескных шрифтов, которое было вдохновлено стилем дорожных знаков, автомобильных номеров и табличек поездов штата Калифорния. Пример использования - в сниппете "Gallery"
Сайтодел | #шрифт
🖥 Travalizer – макет приложения с советами для путешественников. Теплые оттенки зеленого и кремового ассоциируются с природой и отпуском.
Сайтодел | #макет #figma
💾 Psychedelic Waves – разноцветный анимированный фон, который подойдет для страниц творческих проектов и мероприятий. Скорость, оттенок и расположение волн можно регулировать вручную.
Сайтодел | #сниппет #css
💾 Glowing Ring – светящееся неоновое кольцо, которое можно использовать как лоадер для сайта с темной темой. Выглядит очень стильно и не даст пользователю заскучать.
Сайтодел | #сниппет #css
🌐 Relative Path – расширение, которое находит путь к файлу
Расширение помогает получить доступ и путь к файлу на вашем устройстве. Для того, чтобы найти местоположение файла, вам потребуется название файла.
Расширение произведет поиск по ярлыкам и найдет путь от вашего местоположения к указанному документу. Ему не нужны никакие данные, кроме имени файла.
Просто нажмите Ctrl+Shift+H (MAC: Cmd+Shift+H) и выберите файл. Если в вашей рабочей области более 1000 файлов, вам будет предложено сначала отфильтровать этот список. Кроме того, вы можете открыть панель команд с помощью кнопки F1 и выполнить поиск относительного пути.
Сайтодел | #расширение #vscode
👨💻 [УРОК 74] Figma – инструмент для прототипирования сайтов и приложений
В этом уроке вы узнаете, как работать с Figma - одним из самых популярных сервисов для веб-дизайнеров и разработчиков. Вы освоите основные инструменты программы и сможете создать свой первый макет, а также узнаете, как поделиться проектом с коллегами.
📘 ИЗУЧИТЬ УРОК 📚 ВСЕ УРОКИ | #статья
⌨ Тернарный оператор
Иногда в коде вместо if…else можно использовать тернарный оператор. Такая форма записи более компактная и наглядная.
Пример: мы хотим проверить год на високосность. Введем:let year =+prompt(“Введите год”);
alert (year % 4 == 0? “Високосный год”: “Невисокосный год”);
Если условие истинно, то выполняется действие после знака вопроса. Если же оно не истинно, выполняется то, что записано после двоеточия.
Сайтодел | #код #javascript
⌨ Многомерные массивы в JavaScript
Мы привыкли, что элементами массива обычно являются числа или строки, но массив может состоять и из массивов! В этом случае речь идет о так называемых многомерных массивах.
В примере ниже вы можете видеть вложенность массивов:let array = [['a', 'b', 'c'], ['d', 'e', 'f'], ['g', 'h', 'i']];
В зависимости от уровня вложенности можно выделить двухмерные - массив с массивами внутри, и трехмерные – массив, в котором есть массивы, которые тоже содержат массивы.
Гораздо удобнее записывать многомерные массивы в столбик:let array = [
['a', 'b', 'c'],
['d', 'e', 'f'],
['g', 'h', 'i'],
];
Такое расположение данных бывает очень удобным при решении определенных задач.
Сайтодел | #код #javascript
👨💻 [УРОК 73] HTML5Boilerplate – фронтенд-шаблон для создания веб-приложений
В этом уроке вы узнаете, как работать с HTML5Boilerplate - шаблоном для создания сайтов на основе HTML5, CSS и JavaScript. Вы узнаете о преимуществах сервиса и о том, как начать разработку с его помощью.
📘 ИЗУЧИТЬ УРОК 📚 ВСЕ УРОКИ | #статья
Сколько нужно времени, чтобы освоить востребованную профессию фронтенд-разработчика?
Всего 10 месяцев! Вы можете совмещать обучение с любым своим занятием. Главное условие - желание. В Xeкслете вы можете пройти онлайн-курс по профессии «Фронтенд-разработчик».
Во время программы вы:
✔️ Изучите JavaScript в связке с HTML и CSS.
✔️ Освоите React для создания сложных компонентов, которые легко поддерживать и использовать повторно.
✔️ Решите более 310 задач в браузере.
✔️ Создадите 4 проекта для портфолио на GitHub и выполните 150 тестовых заданий от наших партнёров.
✔️ Научитесь работать с чужим кодом и оформлять пул-реквесты в Open Source проектах.
Обучение построено так, что его невозможно «отсидеть» или «прослушать». Мы не сторонники подхода «повтори за учителем»: вы будете не просто писать код, а научитесь самостоятельно находить лучшие решения.
🎁 Пройдите первые 10 бесплатных уроков из профессии и получите дополнительно скидку 10% !
💾 Vertical Timeline – инструмент для создания анимированной хронологии событий. Карточки с информацией появляются при прокручивании страницы вниз.
Сайтодел | #макет #figma
💾 Reactive CSS Transitions – сетка из CSS-элементов, которые меняют цвет при нажатии. Этот эффект подойдет для функционала приложения, а также для игр.
Сайтодел | #макет #figma
Aimylogic — сервис для создания чат-ботов на сайте, в соцсетях или в мессенджерах
Основа платформы — визуальный no-code конструктор, для работы не требуются знания программирования. В сервисе можно создавать чат-ботов, которые умеют понимать естественную речь пользователя и реагировать на нее согласно сценарию.
Доступен ежемесячный бесплатный тариф.
Попробовать!
💾 Scroll List Animation – дизайн элемента для просмотра карточек. Тексты, заголовки и иконки будут красиво смотреться на фоне яркого градиента.
Сайтодел | #макет #figma
🎨 Цветовая палитра макета "Dribbble Presantation Shots": HEX | RGB #F9DFA6 | rgb(249,223,166) #FEAB9E | rgb(254,171,158) #926BFF | rgb(146,107,255)⚠️ Цвет копируется одним кликом!
Сайтодел | #палитра
💾 Digital Clock – часы с футуристичным дизайном на чистом JavaScript. Подойдет для сайтов, посвященных технологиям или компьютерным играм.
Сайтодел | #сниппет #css
Для начинающих дизайнеров и с опытом до 1 года
9 января пройдёт бесплатный, поддерживающий марафон по веб-дизайну. На котором узнаешь:
– С чего начать карьеру в 2023 в текущих реалиях
– Что должен уметь начинающий веб-дизайнер
– Какие этапы нужно пройти, чтобы трудоустроиться
– Как безопасно перейти на фриланс
– Каким должно быть твоё портфолио
🎁 По результату марафона у тебя есть:
+ Новая работа в портфолио
+ Шаблон для презентации любой работы в портфолио
+ Пособие на 44 страницы по источникам
+ Пособие по книгам
+ Пособие по референсам
+ Розыгрыш обучения на 60 000 ₽
Забирай бесплатный билет ➡️ https://design-figma.ru/25_11_1
✍️ Noto Sans – стильный и современный шрифт без засечек, который поддерживает разные алфавиты: латиницу, кириллицу, греческий и иероглифические системы письма Азии. Пример шрифта есть тут: "Simple CSS Loaders"
Сайтодел | #шрифт
🎨 Цветовая палитра макета "E-Learning Homepage": HEX | RGB #FDF3B6 | rgb(253,243,182) #FBB8C1 | rgb(251,184,193) #2F80EC | rgb(47,128,236)⚠️ Цвет копируется одним кликом!
Сайтодел | #палитра
🌐 VSCode Simpler Icons with Angular – иконки для файлов
VSCode Simpler Icons – это коллекция иконок, которые облегчают работу с файлами различных расширений. На выбор представлены изображения, которые показывают папки, документы, а также логотипы приложений. Настроить иконки можно самостоятельно.
Благодаря VSCode Simpler Icons вы не перепутаете открытую папку с закрытой, а также файл с папкой. Разнообразие цветов и форм иконок делают работу более наглядной.
Для того, чтобы расширение заработало, зайдите в настройки (File → Preferences на Windows или Code → Preferences на OSX), выберите тему файловых иконок, затем нажмите VSCode Great Icons.
Сайтодел | #расширение #vscode
🌐 Elevator Saga – игра для изучения JavaScript
Эта игра – отличный вариант для изучающих язык JavaScript, своего рода «песочница» для получения необходимых навыков написания кода. В игре есть здание с лифтами, которые перевозят людей. Задача – перевезти пассажиров за указанное время.
Пользователь должен программировать движение лифтов так, чтобы успеть перевезти всех пассажиров туда, куда им требуется. Чем выше уровень, тем больше этажей в здании и строже условия игры.
Elevator Saga рассчитана на умение строить алгоритмы и работать с информацией. Синтаксис тут простой, поэтому игра подойдет даже для новичков.
Сайтодел | #игра #javascript
🌐 Luna Paint – редактор для изображений в VS Code
Это расширение позволяет редактировать растровые изображения в редакторе VS Code. Для этого просто откройте изображение и редактируйте его как отдельный файл.
Luna Paint имеет большой спектр опций и инструментов, в том числе карандаш, заливка, пипетка, обрезка, геометрические фигуры, линии и палитра цветов.
Приложение может работать с несколькими слоями изображения, а также смешивать их. Расширение поддерживает форматы .bmp, .ico, .jpg, .png, и .webp.
Сайтодел | #расширение #vscode
🌐 Bracket Pair Colorizer 2 – расширение VS Code, которое работает со скобками
Бывало ли у вас так, что маленькая ошибка в коде сводит на нет часы стараний? Если вы забыли закрыть парные скобки, то код не будет правильно работать, а на поиск ошибки уйдет очень много времени.
С этой проблемой справляется "Bracket Pair Colorizer 2". Расширение присваивает парным скобкам разные цвета, которые может выбрать сам пользователь. По сравнению с первой версией, вторая более быстрая и точная.
С "Bracket Pair Colorizer 2" код будет выглядеть более понятно и прозрачно.
Сайтодел | #расширение #vscode
🌐 Code Runner – расширение для запуска кода
Это расширение поддерживает множество языков программирования. Оно может как запускать код, так и подсвечивать фрагменты синтаксиса.
Code Runner позволяет работать с отладчиком, что очень удобно для процесса разработки. Также в расширении есть консоль, куда выводятся результаты работы кода.
Отличительная черта Code Runner – это его простота и удобство. Расширение запускается быстро, экономит ресурсы вашего компьютера и даже может работать через консоль с языками программирования, которые не поддерживаются программой.
Сайтодел | #расширение #vscode