TGViewer
Channel Public Channel
Доктайп

Доктайп

@html_blog

Это канал о фронтенде.
Subscribers
3.19K
Photos
177
Videos
31
Links
173

Showing posts older than #482 · Back to latest

Older Posts 19 shown
Post #481 1.38K
  • 😢 1
Post #480 1.39K
И ещё вопрос
Post #479 1.42K
  • ⚡ 1
Post #478 1.35K
Есть вопрос
  • 😁 14
Post #476 1.89K
Ой, у меня тут совершенно случайно как раз завалялся один такой курс, «Знакомство с фронтендом» от HTML Academy

Там вы на практике изучите HTML, CSS и JavaScript, даже если до этого думали, что это что-то из сербской кухни.
  • 😁 29
  • ⚡ 1
Post #475 1.89K
23 января отмечается только что придуманный мной международный день прохождения бесплатных онлайн-тренажёров по веб-разработке
  • 😁 42
Post #474 1.85K
  • 😁 28
  • 😢 6
  • ❤ 1
  • ⚡ 1
Post #473 1.69K
У вас 30 секунд
  • ⚡ 33
  • ❤ 3
Post #472 1.56K
Внимание, вопрос задаёт одна там зелёная сова. Засеките 30 секунд и попробуйте найти ответ
  • 😁 10
  • 🔥 4
  • ⚡ 2
Post #471 1.58K
  • 😁 30
  • 🔥 9
Post #470 2.07K
Как сделать CSS — правильно и неправильно

Неправильный способ

Если вы решили научиться верстке и думаете, что CSS — это просто набор правил, которые можно добавить позже, то у меня для вас плохие новости. Многие новички представляют себе процесс так:

1. Сначала создаем HTML.
2. Потом, когда всё работает, начинаем добавлять стили.
3. Исправляем хаос.

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

Если вы слышали фразу:

Сначала пишем HTML, потом добавляем стили.


На самом деле это означает:

Мы сделаем некрасивую и неудобную страницу, а потом будем пытаться ее исправить


Такая стратегия редко приводит к хорошему результату.

Правильный способ

Совет прост: думайте о стилях сразу. Ваш HTML и CSS должны развиваться вместе. Чем раньше вы начнете продумывать внешний вид и поведение элементов, тем проще будет избежать множества проблем.

Вот несколько ключевых принципов, которые помогут вам.

Планируйте заранее

Перед тем как писать код, нарисуйте макет или представьте его мысленно. Или разделите страницу на логические блоки и продумайте их стили.

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

Используйте методологию

Методологии вроде BEM помогут сделать код чистым и понятным. Например, вместо хаотичных классов вроде .content, используйте что-то вроде .page__content.

Не забывайте: хороший CSS — это тот, который можно объяснить бабушке.

Минимальный рабочий стиль

Начните с базового стиля, который будет работать на всех устройствах. Добавляйте сложные эффекты постепенно. Если что-то сломалось — попробуйте удалить строчку и посмотрите, станет ли лучше.

Гибкость

Используйте относительные единицы измерения (%, em, rem) вместо жёстких пикселей. Или применяйте flexbox и grid для адаптивности.

В CSS главное помнить: «чем меньше !important, тем лучше».

Практические советы

Используйте normalize.css для сброса стандартных стилей браузера.

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

Работайте с цветами и шрифтами в виде переменных, чтобы проще было их обновлять в будущем.

Учитесь пользоваться инструментами разработчика браузера, они помогут вам сэкономить массу времени.

Тестирование и улучшение

Проверяйте результат в разных браузерах.

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

CSS — это не про красоту, а про удобство, так что тестируйте на реальных пользователях.

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

Помните:

Сначала мы делаем страницу удобной, потом — красивой. Но лучше делать это одновременно.
  • 🔥 48
  • ❤ 8
  • 😢 5
  • ⚡ 1
Post #469 2.23K
Извините
  • 😁 117
  • 🔥 8
  • ❤ 6
Post #466 2.85K
— Ну всё, спустя 32 года после выхода Doom теперь точно запустили уже вез...
— ААААААА!!! DOOM В PDF В БРАУЗЕРЕ!!!!

https://doompdf.pages.dev/doom.pdf
  • 🔥 25
Post #465 3.26K
так и запишем, w это вэ
  • 😁 62
  • ⚡ 5
  • ❤ 4
Post #464 2.8K
  • 🔥 13
  • 😁 9
  • 😢 5
Post #463 2.61K
очень важный опрос о том, что окружает нас в городах
  • 😁 17
  • ⚡ 1
Post #462 2.92K
Давайте чтобы у вас там всё было в порядке. Без условий, просто всем и даром, как у Стругацких

Спасибо, что вы здесь, и что продолжаете не отписываться так долго, как сможете

И каким бы очередной год ни был тяжёлым, Доктайп всегда останется с вами на волне безумных опросов, немногости фронтенда и смешнявок над тем, на чем никто больше не смеётся

А там разберёмся

🧡
  • ❤ 98
  • 🔥 15
  • ⚡ 3
  • 😁 3
Post #461 2.46K
Слушайте,
  • ⚡ 10
  • ❤ 3
  • 😁 1
Post #457 2.92K

Forwarded from HTML Academy

👍 Чувствуете? Это запах мандаринов и тренажёров. Новый год близко, а значит пора засучить рукава и готовиться к ежегодному безумию вместе с HTML Academy. Совместно с Лига А. и Слетать.ру мы дарим бесплатный доступ к тренажёрам с 1 по 8 января.

Что вас ждёт?
1️⃣ Полный доступ к тренажёрам HTML, CSS и JavaScript,
2️⃣ Ежедневные викторины, задания и испытания,
3️⃣ Возможность заработать баллы и выиграть призы.

Приглашайте друзей, чтобы ваше участие стало ещё веселее и продуктивнее! Чем активнее будут участники новогодней недели, тем больше призов разыграем в конце. Подробнее читайте на лендинге.

🤘 Начинаем 1 января!

Подробнее об акции | Telegram-бот
  • ❤ 24
  • 🔥 4
Older posts →
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →