Senior Frontend - javascript, html, css

2021-02-20 19:09:00 Пиксельный рисунок

Каждый пиксель - это HTML элемент. Большое количество элементов автор создаёт с помощью препроцессора Pug. Также, можно менять цвет пикселей и создавать свои рисунки. Открыть/Комментировать

2021-02-20 12:02:00 Безумие на чистом HTML + CSS

Играми на «чистом CSS» (т.е. без JS) нас уже давно трудно удивить. Но британскому дизайнеру Джейми Коултеру, пожалуй, удалось. Его недавняя работа в Codepen — полноценный квест с сюжетом, в котором игроку нужно выбраться из мрачного подвала то ли больницы, то ли лаборатории, где накануне произошло что-то ужасное. И заодно узнать шокирующую разгадку…

Игрок может перемещаться между локациями и взаимодействовать с окружающими предметами. В некоторых предметах бывает спрятано что-то нужное для дальнейшего прохождения (например, ключ), некоторые — скажем, записки на стенах — содержат полезные подсказки, а ещё есть просто приятные «пасхалки» (например, логотип Codepen и аватарки многих «звезд» фронтенда:). Некоторые предметы совмещают всё вышеперечисленное. И такая проработка мелочей, да и вся атмосфера игры, весьма впечатляет.

Разбор того, как сделана игра можно посмотреть в статье. Открыть/Комментировать

2021-02-19 19:04:00 Открыть/Комментировать

2021-02-19 12:00:29 Мы создали специальный курс для фронтенд-разработчиков с опытом. Подойдёт для всех, кто уверенно чувствует себя с HTML, CSS, JavaScript. Знает про работу браузера и Git.

За 5 месяцев вы детально разберётесь в устройстве современных фреймворков, познакомитесь с алгоритмами и структурами данных, отточите навыки JS.

Вас ждёт:

- Собственная среда для обучения. Специальный полноценный тренажёр от Яндекс.Практикума.
- Проекты. Самостоятельный и командный.
- Практика. Все знания отрабатываются в онлайн-тренажёре.
- Поддержка наставников.
- Программа профессиональной акселерации и помощь с трудоустройством. 

Пройдите бесплатное тестирование в онлайн-тренажёре.
Решите задачи, изучите программу и подготовьтесь к продолжению. Открыть/Комментировать

2021-02-19 10:03:03 Автоматическая карусель

Сделана на HTML и CSS. К каждой карточке автор прописал свою анимацию Открыть/Комментировать

2021-02-18 19:03:00 Reaction

Просто красивый анимированный логотип. Открыть/Комментировать

2021-02-18 12:07:00 ​Ссылки против кнопок в современных веб-приложениях

Одна из вечных тем во фронтенд-доступности — неразбериха между ссылками и кнопками.

Кнопки
Могучая кнопка и правда крутая. Вот что она может:

1. Получать фокус с клавиатуры по умолчанию
2. Отправлять данные формы на сервер
3. Очищать форму
4. Блокироваться с помощью атрибута disabled
5. Давать подсказку скринридеру с помощью неявного атрибута role="button"
6. Показывать состояния ∶focus, ∶hover, ∶active, ∶disabled

Если добавить скрипта,кнопка идеальный элемент для:
1. Открывания модального окна
2. Вызова всплывающего меню
3. Переключения интерфейса

Ссылки
Вот несколько базовых возможностей ссылок, или якорей

1. Создавать гипертекст, сеть онлайн-ресурсов
2. Перевести пользователя на новую страницу или окно
3. Изменять URL
4. Вызвать браузерные перерисовку/перезагрузку
5. Переходить по якорям внутри страницы
6. Способны принимать фокус по умолчанию с помощью атрибута href
7. Регистрируют клик с помощью клавиши Enter
8. Не блокируются как кнопки (но их можно сделать неактивными с помощью tabindex="-1" и aria-hidden="true")

Лично для меня главное различие между ссылкой и кнопкой — то, что ссылки перемещают пользователя на новый ресурс, унося его из текущего контекста (внутренние ссылки — единственное исключение). Кнопка же переключает что-то в интерфейсе или вызывает новый контент в том же самом контексте. Открыть/Комментировать

2021-02-17 12:31:00 Шаблоны для верстальщика — канал на котором Вы найдете шаблоны, которые помогут прокачать Ваш навык вёрстки и пополнить Ваше портфолио реальными примерами.

Подписывайтесь Открыть/Комментировать