Верстальщик от бога
9.22K subscribers
1.38K photos
18 videos
1 file
1.64K links
Регистрация в перечне РКН:
https://knd.gov.ru/license?id=6757e1989d804a279b283165&registryType=bloggersPermission

Самый большой канал по верстке в телеграм.

Чат верстальщиков: @godinhtmlchat

По всем вопросам: @anothertechrock
Download Telegram
Кнопка «Показать ещё» на чистом JavaScript - для подгрузки товаров через AJAX

#почитать #junior #middle

▫️Как работает кнопка «Показать ещё»
▫️Написание backend-кода на PHP
▫️Создание HTML-кода
▫️Стилизация карточек и кнопки
▫️Добавление функциональности к кнопке с помощью JavaScript

Читать статью
👍10🔥8👏4
Как практически без вложений улучшить пользовательский опыт с растром

#почитать #junior #middle

Простые правила при работе с растровыми изображениями на каждый день:
▫️Исходные данные и выбор основного формата
▫️Изменение размеров
▫️Оптимизация
▫️WebP
▫️Тег picture и srcset
▫️Предзагрузка
▫️Ленивая загрузка
▫️Сдвиг макета
▫️Object-fit

Читать статью
🔥11❤4👍4
Можно искать бесплатные видео в интернете, читать статьи и книги, но очень медленно продвигаться к должности Frontend-разработчика.
А можно пройти один курс «Профессия Frontend-разработчик PRO» и уже через 7 месяцев устроиться на работу.

Вы пошагово научитесь:

— верстать сайты на языках HTML и CSS;
— программировать на JavaScript и TypeScript;
— разрабатывать серверные приложения на Node.js;
— работать с фреймворками.

Помимо экономии времени, вы получите гарантированное трудоустройство
после прохождения курса, поддержку опытного наставника и до 10 проектов в портфолио.

Обучаясь на курсе «Профессия Frontend-разработчик PRO» вы будете на 10 шагов ближе к востребованной профессии, чем большинство изучающих frontend самостоятельно.

Переходите по ссылке и узнайте больше о курсе: https://epic.st/ePe-aH

Реклама. ЧОУ ДПО «Образовательные технологии «Скилбокс (Коробка навыков)», ИНН: 9704088880
👍7🔥4👎3👏1
This media is not supported in your browser
VIEW IN TELEGRAM
Фронтендер от бога — топ-канал о фронтенд-разработке. Если вы учите JS — подписывайтесь!

Что вас ждет:
— обучающие материалы (в том числе и уникальные) с удобной категоризацией;
— еженедельные дайджесты информации из мира фронтенд-разработки;
— профессиональный юмор;

Подписывайтесь на фронтендера от бога
👍9❤4🔥4
Практикум по верстке сайтов - с нуля до завершения html/css/js

#посмотреть

"Обалденный макет - обалденная верстка. Это верстка сайта, с самого нуля, с адаптивом, используем html и css, в конце это все полернем js, чтобы было интереснее и более практически."

Смотреть видео на YouTube (1 час 15 минут)
👍9❤6🔥4
Что делать, если дизайнеры принесли кучу кривых вместо макета

#почитать #junior #middle

▫️Нет базовых состояний
▫️Нет специфичных состояний
▫️Обратная связь
▫️Нет индикаторов загрузки
▫️Нет сообщений об ошибке загрузки или отправки
▫️Недостаточно оформления для валидации
▫️Технические страницы
▫️Разные отступы идентичных элементов
▫️Слишком много размеров похожих элементов

Читать статью
👍7🔥5😁4
Как правильно вставлять svg

#почитать

Правильного способа нет. Есть подходящие.

Читать статью
👍11🔥6👏4
Гайд по верстке логотипов

#почитать

▫️Логотип фоном
▫️Логотип картинкой
▫️Инлайновый SVG
▫️Что лучше выбрать?
▫️Доступность для поисковиков
▫️Комментарии по работе с читалками

Читать статью
❤8👍7🔥4
Изучить основы HTML и CSS за 5 занятий: бесплатный курс Нетологии

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

На бесплатном курсе Нетологии «Основы вёрстки сайта: HTML и CSS» вы на практике познакомитесь с базовыми технологиями веб-разработки:

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

Программа включает в себя короткие видео и практические задания с самопроверкой и итоговым тестом. Начать обучение можно в любой момент — доступ ко всем занятиям откроется сразу после регистрации.

Начать обучение → https://netolo.gy/cafW

Реклама. ООО «Нетология» erid: LatgC1U1d
👍7❤4🔥4
🌐 Как учить верстку правильно и эффективно

#посмотреть #junior

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

Смотреть видео на YouTube (50 минут)
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥11👍5❤4
Друзья, сегодня рекомендуем отличный канал с материалами по бизнес- и системному анализу!

😇 аналитик от бога — лучший канал для аналитиков от создателей сайта testengineer.ru

Что отличает нас от других каналов по системному анализу:

▪️мы — создатели testengineer.ru и канала Тестировщик от бога — одного из самых крупных телеграм-каналов по тестированию;
▪️мы пишем свои материалы: составили дорожную карту развития бизнес- и системных аналитиков, в которой собрали все, что надо знать для успешной работы;
▪️мы не постим ленту из хабра — все материалы, которые мы пишем или отбираем, мега-полезные. Перейдите в канал и убедитесь в этом сами.
▪️и многое-многое другое

Подписывайся на аналитика от бога и узнай уже наконец разницу между product roadmap-ом и спецификацией требований 😇
👍6🔥3
Web Accessibility в рассказе «A11Y от 0 до NaN»

#почитать #junior

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

Читать статью
👍7🔥4👏4
Dev Mode в Figma. Быстрый обзор бета-версии

#почитать #middle

Возможности:
▫️Интеграция с GitHub, Anima, Storybook, Jira
▫️Работа с дизайн-системами
▫️Отметка «Готово для разработки» (Ready for dev)
▫️Сравнение изменений
▫️Экспорт — любой элемент можно выгрузить, положить в папочку и работать с ним локально

Читать статью
👍7🔥5👏3
Центрирование в CSS: полное руководство

#почитать #junior

Центрирование элементов — самая популярная причина для жалоб на CSS. «Ну почему нельзя было сделать всё попроще?» — возмущаются все кому не лень. Думаю, проблема не в том, что это сложно сделать, а в том, что способов центрирования элементов такое множество, что бывает трудно выбрать подходящий.

Читать статью
🔥8💘6❤4
Шаблонизаторы для HTML

#почитать #junior

Есть много способов сэкономить время и упростить жизнь разработчика. Но они кажутся такими сложными и непонятными, что знакомство с ними постоянно откладывается. И зря: сегодня мы расскажем, как автоматизировать работу, используя вспомогательные инструменты. Шаблонизаторы для HTML — один из таких способов.

Читать статью
👍8🔥4👏4
Частые ошибки в HTML-коде

#почитать #junior

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

▫️Вложенный тег закрывается позже родительского
▫️Нет закрывающего тега
▫️Повторяются идентификаторы
▫️Неправильное использование семантических тегов
▫️Отсутствие атрибута alt для изображений img
▫️Определение уровня заголовка по размеру текста на макете
▫️Включать в main то, что повторяется на других страницах
▫️Неверное обозначение комментариев
▫️Не использовать <li> для элементов списка

Читать статью
🔥12👍7❤5👎3
КОГДА УМЕСТЕН CAPS LOCK, как расставить акценты и другие заметки о типографике

#почитать #junior

Всё повторяющееся в проблемы в одной статье:

▫️Про шрифт DIN
▫️Про длину строки
▫️Про межстрочное расстояние
▫️Про близость
▫️Про точки в заголовках
▫️Про кернинг и лигатуры
▫️Про разрядку строчных и кражу овец
▫️Про всякие типографские мелочи для тех, кто молодец
▫️Про бесплатные шрифты
▫️Про ЗАГЛАВНЫЕ (капс)
▫️Про разговор
▫️Про акценты
▫️Про Дэвида Карсона

Читать статью
👍7❤6😁4
🔥Видеокурс по Figma с нуля

#посмотреть #junior

От создания документа до его гибкой настройки и полноценных веб-дизайнов.

🌐 Аккаунт, интерфейс и настройки
🌐 Инструменты / Примитивы / Масштаб и Свойства
🌐 Группы / Выравнивание / Эффекты
🌐 Слои / Маски / Булевы операции
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥8👍4❤3👏1
Как оформить текст: 11 главных css-свойств

#почитать #junior

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

Читать статью
👍7🔥5👏4
Научитесь программировать на языке JavaScript и создавать пользовательские интерфейсы сайтов и приложений.

На профессии «Фронтенд-разработчик» вы за 10 месяцев:

✔️Изучите JavaScript в связке с HTML и CSS и освоите React для создания сложных компонентов, которые легко поддерживать и использовать повторно.
 ✔️Решите более 420 задач в браузере и создадите 4 проекта для портфолио на GitHub и выполните 150 тестовых заданий от наших партнёров.

🎁 Оцените формат и решите, стоит ли продолжать! Вводные ознакомительные курсы профессии доступны бесплатно сразу после регистрации!

Реклама. ООО "ХЕКСЛЕТ РУС". ИНН 7325174845. erid: LjN8KNrYi
❤7👍4🔥4