Развёрнутое руководство по Sass/SCSS

https://tprg.ru/kJ7F

Современный CSS — мощь, а в комбинации с препроцессорами — вообще боевая машина для оформления контента на страницах.

Подготовили для вас развёрнутое руководство по Sass/SCSS с множеством примеров, в котором расскажем и покажем:
— зачем нужны препроцессоры,
— что такое директивы и миксины в контексте SCSS,
— примеры эффективного использования Sass/SCSS.

#css #html

Pug

Pug — шаблонизатор HTML, с помощью которого можно избавиться от излишнего дублирования кода при вёрстке сайтов.

Автор видео устроил подробное знакомство с этим инструментом: https://www.youtube.com/watch?v=XemDmsmnYII

#html

Сегодня отмечается Всемирный день окружающей среды. Что может сделать в честь этого программист?

Например, писать экологически чистый код и делать вот такие экоанимации: https://codepen.io/yorkfx/pen/LoRKgP

#html #css

Подсказки на HTML и CSS

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

#фронтенд #html #css

​Как понять, что такое шаблонизация для DOM, какие вопросы стоит задавать при его создании и как на них отвечать?

Пожалуй, лучший способ разобраться в этом — собрать «на коленке» свою реализацию шаблонизатора для DOM. А как это сделать, рассказал Владимир Санников фронтенд-разработчик в Miro:

https://tprg.ru/vLl0

#html #javascript

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

Парень начал бизнес на простой и слегка абсурдной идее: создавать веб-сайты, используя только ручку и блокнот. То есть в прямом смысле слова — вы просто пишете текст в блокноте, а нейросеть GPT-3 превращает всё написанное в готовую HTML-страницу.

Задумка могла бы показаться глупостью, да и сам разработчик не особо в неё верил, но история быстро завирусилась в Твиттере и он заработал первую $1000 долларов буквально за 2 дня. А спустя ещё немного времени, проект занял 4-е место на Product Hunt.

О том, как так вышло, парень рассказал в своём блоге, который тоже, кстати, создан по «бумажной» технологии: https://daily.tinyprojects.dev/paper_website

А как это работает, можно посмотреть на видео.

#html #веб #нейросети #мотивация

Это самый милый codepen-проект, который вы сегодня увидите

Этот чихающий дракончик создан, чтобы продемонстрировать возможности библиотеки Three.js. А суть проекта заключается в том, чтобы заставить дракона чихнуть с помощью кликов — чем их больше, тем сильнее чих:

https://codepen.io/Yakudoo/pen/yNjRRL

#css #javascript #html

​​5 распространённых ошибок HTML, которых легко избежать

HTML крайне неприхотлив и «съест» всё, что вы ему предложите независимо от семантичности. Но это не означает, что можно забить на все правила и писать как угодно.

<div> вместо семантических тегов, <b> и <i> вместо <strong> и <em> — в статье рассказали про эти и другие ошибки, которые мешают вёрстке быть качественной и полезной:

https://devdojo.com/abhiraj/5-common-html-mistakes-you-should-avoid

#html

​Web Code Tools — ещё один годный сервис в копилку веб-разработчиков

Там есть генератор CSS, HTML, JSON-LD и т.д. Особенно удобно, что можно увидеть, какие браузеры поддерживают тот или иной элемент: https://webcode.tools/

#веб #html #css #инструменты

Годнота для фронтенд-разработчиков: большая база советов, трюков и лучших практик для веб-разработчика

Если вам нужно быстро реализовать какую-нибудь несложную фичу, типа добавления иконки к ссылкам, обработки поведения страницы при «битом» изображении или даже центрирования div, Front-End Tips вам в помощь: https://getfrontend.tips

Фичи можно искать по текстовому запросу, у каждой есть доступное объяснение и пример кода. Но что самое приятное, инструмент полностью бесплатный и пополняется сообществом.

#веб #javascript #css #html

Верстаем сайт-портфолио для Frontend-разработчика

Хороший сайт-визитка во-первых помогает наглядно показать навыки веб-разработчика, а во-вторых — это просто красиво. И вот отличный урок, в котором рассматривается, как создать минималистичное портфолио на HTML, CSS и JavaScript.

Если давно хотели освежить резюме, но всё время откладывали, считайте, что это знак: https://youtu.be/27JtRAI3QO8

#html #javascript #фронтенд

​​Как подготовиться к собеседованию: вопросы по HTML

Делимся отличным сборником популярных вопросов по HTML и смежным темам с ответами. Проверьте, сможете ли ответить на все из них.

Оигинальный репозиторий на гитхабе с 35k+ звёзд: https://github.com/yangshun/front-end-interview-handbook

Перевод на русский: https://www.frontendinterviewhandbook.com/ru/html-questions

#собеседование #html

​Делимся годным бесплатным курсом по веб-разработке для начинающих

Курс поможет понять, как работает интернет. И научиться создавать веб-страницы с помощью HTML и CSS и деплоить их в интернет. Из плюсов курса — домашние задания с мини-проектами для самостоятельной проверки. Курс прошли почти 210 тыс. раз и оценили на 4.7 из 5.

Страница курса: https://stepik.org/course/38218/promo

#курсы #html #css #фронтенд

«Мужик, а у тебя есть шпаргалка по CSS, HTML и JS? Держи, мужик, шпаргалку по CSS, HTML и JS»

Очень удобная интерактивная шпаргалка, в которой собрана не только полезная информация по работе с CSS, HTML и JS но и различные генераторы, символы, эмодзи и полезные ссылки.

Сохраните, чтобы не потерять: https://htmlcheatsheet.com/css/

#шпаргалки #css #html #javascript

Как парсить сайты в обход защиты от парсинга?

На некоторых сайтах работает защита от парсинга и работы ботов с ним. Но есть способы, которые позволяют обойти её и всё-таки добраться до содержимного веб-страниц.

На Хабре вышел неплохой гайд. Делимся с вами: https://habr.com/ru/post/710982/

#linux #html #javascript #сsharp