​​Шпаргалка по CSS Grid в картинках, ещё и с единорогами

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

Приглашаем к прочтению

@prog_point #web #frontend #css

​​Где взять иллюстрации для своего проекта

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

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

@prog_point #frontend #web

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

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

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

@prog_point #web #frontend #css

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

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

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

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

@prog_point #web #frontend

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

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

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

@prog_point #web #frontend #backend

Всё о 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

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

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

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

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

@prog_point #web #frontend #vue #javascript

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

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

@prog_point #web #frontend