Шпаргалка по CSS, ещё и интерактивная

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

Кидайте в закладки эту шпаргалку

@prog_point #web #frontend #css

Что такое микрофронтенд простым языком

Микрофронтенд, на удивление, это не фронтенд, написанный микроразработчиком, а подход, при котором веб-приложение разбивается на маленькие и независимые части интерфейса, обеспечивая удобство в разработке и поддержке. Он позволяет изменять и модифицировать отдельные компоненты без вмешательства в остальную часть приложения.

Микрофронтенд обеспечивает гибкость и масштабируемость разработки веб-приложений за счёт изоляции компонентов. Однако такой подход может привести к увеличению сложности управления множеством независимых частей интерфейса.

В этом видео на пальцах объясняют, когда и как использовать микрофронтенд и как на него перейти.

@prog_point #web #frontend

Интерактивная дорожная карта веб-разработки

Всё просто и понятно. В ней удобно сгруппированы все необходимые знания и навыки для веб-стека. К каждому элементу прикреплены ссылки на полезные ресурсы. Тем много, каждый найдёт интересное под себя: общая базовая теория, веб-компоненты, PWA, полезные инструменты, тестирование, UI/UX и многое другое.

Забрать это чудо тут

@prog_point #web

Наконец понятное объяснение HTTP-кодов

На этом ресурсе можно изучить все состояния HTTP на мемах с котиками. В каждом даётся простое описание статуса и объясняющий демотиватор.

Разумеется, вы можете забрать эти мемы к себе на сайт и показывать их пользователям вместо скучных 404 и 301.

Мяу-мяу прямо тут: http.cat

@prog_point #web #meta

NPM для новичков — что такое и зачем это знать?

NPM (Node Package Manager) — это инструмент для управления пакетами в JavaScript. Он помогает разработчикам легко находить, устанавливать и обновлять библиотеки и инструменты, необходимые для создания приложений.

Представьте себе большой магазин, где есть много полезных модулей, которые можно добавить в ваш проект, чтобы не писать весь код с нуля — это и есть NPM. Он нужен всем, кто работает с JavaScript, особенно если используется платформа Node.js.

В этом ролике автор познакомит вас с NPM, расскажет про его установку, базовые команды и структуру. Этого уже хватит, чтобы начать пользоваться инструментом.

@prog_point #web #javascript

Быстрый курс по Node.js для начинающих

Первая отрасль, приходящая на ум, когда говорим о JavaScript — это фронтенд. Но с таким же успехом его можно использовать и на бэкенде, т.е. писать серверную часть. Для этого понадобится специальный инструмент, о котором уже могли слышать — Node.js.

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

Держите ролик, в котором автор за час рассказывают всю базу по node.js. После неё вы сможете создавать свои первые сервера и переходить к более сложным темам:

https://youtu.be/3aGSqasVPsI?si=qBs0ERgcGd_YWy8O

@prog_point #web #backend #nodejs #javascript

​​Большая подборка бесплатных учебных материалов для фулстека

Вам больше не нужно ходить по сети в поисках подходящих материалов — всё, что нужно для обучения веб-разработки, собрано в одном месте. Само собой, эта подборка будет полезна не только фулстекам, но и отдельно фронтенд и бэкенд-разработчикам.

В этой подборке вы найдёте бесплатные курсы по вёрстке, JavaScript, JS-фреймворкам, Node.js, PHP, базам данных, Docker и другим важным технологиям.

@prog_point #web #frontend #backend

Бесплатный курс по TypeScript для начинающих

В современной разработке TypeScript не просто занял прочное место, но и во многих местах заменил собой JavaScript. Знание TypeScript стало необходимым знанием любого разработчика, который работает либо с Node.js, либо с браузером. Этот язык используется для создания интерактивных веб-страниц, мобильных приложений, в серверной разработке. 

Ловите бесплатный курс по TS, который с самых азов познакомит вас с программированием, общими концепциями и особенностями языка. А в комплекте вы получите возможность попрактиковаться прямо в браузере.

@prog_point #web #typescript

​​Создаём собственное расширение для Chrome

Расширения и плагины — полезные дополнения к уже существующим функциям на сайте и в браузере. С их помощью можно записывать аудио и видео с экрана, автоматизировать заполнение форм, парсить нужную информацию, а также многое другое.

Ловите гайд для начинающих, в котором подробно разбирают процесс создания самого простого расширения — запускатора избранных сайтов. Хотя приложение и будет примитивным, оно всё-таки раскроет процесс создания и загрузки расширения для Google Chrome на всех этапах.

Желательно знать HTML, CSS и JS на самом базовом уровне, чтобы понимать материал лучше. Но, в любом случае, объяснения кода тоже есть.

@prog_point #web

Всё о CSS Grid за 13 минут

CSS Grid — это мощный инструмент для упрощения создания сложных макетов на веб-страницах. Он позволяет разработчикам легко управлять расположением элементов на странице, обеспечивая гибкость и контроль над их позиционированием.

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

Видео начинается с теории, а затем автор показывает, как настроить сетку с помощью CSS Grid, включая создание колонок и строк, зазоры между элементами, автоматические строки, а также выравнивание и позиционирование элементов. Тут также рассматривается работа с областями и настройка начала и конца строк и колонок.

https://youtu.be/MEOR2b69Pl4?si=Jk6MQxo7VHO-VP_v

@prog_point #web #frontend #css

Видеокурс по Frontend-разработке

Фронтенд — это всё, что видит пользователь на сайте: интерфейс, кнопки, формы. HTML, CSS и JavaScript помогают превращать дизайн в работающий и живой сайт.

Ловите видео-курс, где шаг за шагом разбирают основы вёрстки на HTML и стилей на CSS от самих азов до более сложных тем. Весь курс состоит из небольших видео, поэтому вы сможете подстроить под себя комфортный темп обучения:

Ссылка на курс

@prog_point #web #frontend

​​Учим React за месяц

React — это крутая JavaScript-библиотека, которую используют для создания сайтов, мобильных приложений и даже игр.

Если давно в планах есть изучение React, но растягивать процесс не хочется, то начните с 30DaysOfReact — это учебник, который подойдет как новичкам, так и опытным разработчикам. Там можно найти задачи, темы и материалы для ежедневного изучения.

@prog_point #web #frontend #react

​​Что стоит знать начинающему бэкендеру

Этот гайд — универсальный список тем, знание которых будет полезно для бэкенд-разработки. Темы не привязаны к каким-то конкретным технологиям, поэтому их можно будет подобрать под себя индивидуально. Вот некоторые из них:

— аутентификация;
— роли, разрешения и контроль доступа;
— REST;
— API;
— работа с e-mail, sms, webhooks;
— взаимодействие с платежами;

Ещё больше тем с разъяснением читаем в статье.

@prog_point #web #backend

Большой вводный курс по Vue.js

Vue.js — одна из самых популярных JS-библиотек для создания пользовательских интерфейсов.

Забирайте на вечерний просмотр отличный вводный курс, где в одном видео разберут и познакомят со всеми аспектами этой библиотеки и расскажут, как с ней работать:

https://youtu.be/6wYu4_6hcDY?si=8NtjdhNADwnzkYzL

@prog_point #web #frontend #vue #javascript

​​Микрофронтенд максимально простыми словами

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

Подробнее о том, как это работает и какие преимущества предлагает, ещё и простыми словами — в этом гайде.

@prog_point #web

Что такое SSL-сертификат, зачем он нужен и где бесплатно его взять

SSL-сертификат — это цифровая подпись вашего сайта. Без SSL-сертификата вы не сможете настроить HTTPS, защищенный протокол передачи данных от сайта к пользователю и обратно.

Без HTTPS нынче сайты кажутся уж чересчур подозрительными. Поэтому лучше уметь подключать такие сертификаты.

Как это все работает и где взять бесплатный сертификат, рассказывают в этом коротком гайде:

https://youtu.be/-G256iibFYg?si=vToZptQ2yf-OmELC

@prog_point #web

Подборка уроков по Flexbox

На этом сайте вы найдёте 20 полезных уроков, которые помогут вам освоить Flexbox и улучшить навыки владения им. Первые 13 видео охватывают базовые концепции Flexbox: строки, столбцы, оси, перенос, выравнивание, центрирование и компоновку. Последние 7 уроков представляют собой отдельные фрагменты кода, с помощью которых вы создадите всё, от навигационного меню до макета мобильного приложения, используя Flexbox.

@prog_point #web #frontend

Небольшие, но понятные уроки по Django

Django — популярный фреймворк на Python для веб-разработки. Он предлагает высокую безопасность, уменьшает время на разработку проектов, даёт хорошую производительность и сравнительно лёгок в обучении. Однако некоторые новички считают, что Django усложняет разработку.

Но всё зависит от подхода к его изучению. Если хотите, чтоб учиться было легко, то вот парочка вводных уроков для самых начинающих:

1. Понять Django. Пишем "Hello world"
2. Работа с моделями и БД
3. Подключение фронтенда

@prog_tools #python #django #web

Курс по React для начинающих

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

Тут рассказывают, что такое React и как создавать приложения, используя Create React App и Vite. Среди основных тем, разобранных в этом курсе: props, state, события, стилизацию, создание пользовательских хуков и продвинутое использование состояний и хуков, таких как useRef, useEffect и useCallback.

https://youtu.be/kz23xxukY5s?si=hViyMF55q28nDlVh

#курс #react #web #ru