Автор оригинала: FreeCodeCamp Community Member.
Растущая тенденция в разработке передней части – это идея, которую вы можете погрузиться прямо в JavaScript и добиться успеха. Честно, к лучшему или хуже, вероятно, можете. Но вы просто строя на вершине хрупкой основы, который вернется, чтобы укусить вас.
Почему мне нужен HTML или CSS?
Рамки пользовательских интерфейсов, которые мы знаем сегодня, как Реагировать и Vue Создайте на вершине основных строительных блоков веб-страницы: HTML и CSS. Хотя эти интерфейсы пользовательского интерфейса суперзарязят эти основы через несколько прохладных инструментов и JavaScript, что вы строете в основном то же самое, что и Сайт космического урезания С 1996 года.
Но я получаю это, пишу HTML и CSS вручную устарели?
Понять, что делают ваши инструменты
Имея как минимум базовое понимание того, что происходит под капотом, поможет вам небезопасно, как вы разрабатываете и отладки ваших приложений.
Возможно, вы столкнулись с несколькими странными вещами в браузере, например, почему HTML-код преобразования там? Используя следующее в качестве примера:
My Cool Page
Some cool stuff
Is this still cool?
Когда вы загружаете это в Chrome, вы заметите некоторые изменения …
Почему все мой абзац круто и фиолетовый?
Ну, оказывается, ваш браузер полезен и автоматически исправляет ваш код. Тег абзаца ( ) не может содержать другой элемент уровня блока Таким образом, Chrome и другие браузеры отрегулируют ваш HTML на лету, чтобы сделать его действительным. HTML очень снисходительно! Но это обычная ошибка, которые пни разработчики старые и новые, которые просто не знакомы с тем, как работает HTML.
Узнайте магию CSS
CSS может сделать целый хек на сегодняшний день. Это намного больше, чем установить несколько цветов, но дает вам возможность предоставлять согласованные узоры пользовательских устройств на протяжении всего вашего приложения.
Не бойся этого! Если вы начали в JavaScript, вы можете испытать соблазн сделать все там, но вы быстро найдете управление всей реальной силой CSS в вашу JS – это боль, а откровенно, не нужно, если вы не Facebook Отказ
Что ты можешь сделать? Построить Чудовой титульный фильм Сцена с чистыми CSS. Возьми немного Наведите наличие завивки для ваших кнопок Отказ Или просто Анимировать что-нибудь !
Мой фаворит создает модную подобную Facebook, подобную Facebook, который наносят анимационный класс, который наносит анимированный градиентный фон для всего, что вы добавляете его на:
.loading {
background: linear-gradient(90deg, #eff1f1 30%, #f7f8f8 50%, #eff1f1 70%);
background-size: 400%;
animation: loading 1.2s ease-in-out infinite;
}
@keyframes loading {
0% {
background-position: 100% 50%;
}
100% {
background-position: 0 50%;
}
}Открыть кодепен И попробуйте сами!
Сделайте ваши результаты поиска актуальными
Поисковые системы делают все возможное, чтобы выяснить, какой контент, который вы пишете, имеет отношение к пользователям ищет его. Но как вы пишете свой HTML, имеет значение, помогая им определить это значение. Общая ошибка, которую я вижу, использует Заголовок элементы неправильно или просто не используют их вообще.
All
My
Content
Is
Important
Рассмотрим очередь этого блога:
- Put Down the Javascript - Learn HTML & CSS - Why do I need HTML or CSS? - Understand what Your tools are doing - Learn the magic of CSS ...
«Узнайте магию CSS» – это не ключ на вынос со страницы, поэтому я не хотел бы показать это как наиболее важное. Название поста, однако, «поставить JavaScript – изучить HTML & CSS», отражает общую историю, что делает его наиболее важным, поэтому я хотел бы сделать его № 1.
Так что с моим HTML я хотел бы заставить его выглядеть нечто большее, как:
Put Down the Javascript - Learn HTML & CSS
Why do I need HTML or CSS?
Understand what Your tools are doing
Put Down the JS - Learn HTML & CSS/h2>
Это позволяет Google, Bing, и все другие поисковые системы знают именно то, что должна быть самой важной частью страницы и помочь определить общую иерархию.
Доступность привода по инклюзивному развитию
Неправильно кодирован ответственно, мы автоматически исключаем людей от доступа к сайту, которую мы так работаем, чтобы построить. Часто эти люди заботятся о том, что становится построенным так же сильно, если не больше, чем вы, и я делаю.
Делая небольшое домашнее задание в первый раз и тратить дополнительную секунду, думая о том, что мы пишем, мы можем включить всем друзьям, посещающим наши сайты.
Сделайте простой список навигации, обычно видимый в большинстве веб-сайтов сегодня. Вы можете быть соблазн написать несколько Div с, потому что они работают правильно?
Выпуск в том, что они не так просто для читателей экрана, чтобы забрать. Чтобы исправить это, вы/технически/можете написать еще меньше HTML ( div – это 3 символа, ul и li 2?).
Принимая его на шаг дальше, если это ваше меню навигации, оберните его в HTML 5 Навигационный элемент ( ) И Пользователи теперь смогут напрямую доступ к меню Отказ
Проверьте Проект A11Y Для более хороших советов по доступности.
Упростите свой код, примите нативную функциональность
Вы будете удивлены, сколько функциональности существует в родом в современных браузерах , с большим количеством поддержки браузера, чем вы, вероятно, нуждаетесь в (извините за то, кто до сих пор поддерживает IE9).
С некоторым базовым HTML вы можете построить текстовый ввод, который имеет поиск, автозаполненный текст в раскрывающемся списке:
Воспользовавшись преимуществами из селекторов CSS Pseudo, мы можем динамически стиль элемент флажков в зависимости от того, если он проверяется:
Это ваше ремесло, обратите внимание на это
Я бы ставила большинство людей, читающих это, делают это, потому что они заботятся о своем коде и являются супер страстными о том, что они делают. Как и в любом другом ремеслении, которые пришли перед разработкой, практикующие и сосредоточены на основании основы, укрепят ваши способности в качестве разработчика. Бонус, вы получите легкую победу, помогая быть более включенным с вашей работой и получить больше людей к вашей заявке!
Первоначально опубликовано https://www.colbyfayock.com/2019/08/put-down-the-javascript-learn-html-css