От нуля до синхронизации героя (часть 1)

Автор оригинала: Jonathan Z White.

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

Это руководство поможет вам навигаться по изучению внешнего разработки. Это обеспечивает учебные ресурсы, которые я нашел эффективным в прошлом вместе с дополнительными объяснениями.

Чтобы сохранить этот руководящий усваиваемый, я сломал его на две части. Часть один проходит через разрабатывание интерфейсов с HTML и CSS. Часть вторая переходит на JavaScript, Frameworks и Design. Если вы знакомы с HTML и CSS, вы можете пропустить до части двух, которые охватывают все JavaScript.

От нуля до переднего героя (часть 2) Полное руководство по изучению фронтального развития medium.com

Основы HTML и CSS

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

Чтобы начать, прочитайте HTML и CSS Учебники Mozilla Developer Network (MDN). MDN предоставляет главу в главе объяснения важных концепций HTML и CSS. Кроме того, каждая глава длина страницы длиной, с интерактивными демонстрациями, связанными с CodePen и JSFiddle.

После завершения этих учебников посмотрите на Сделать сайт Курс по кодекадемии. Этот учебник займет всего несколько часов, и является хорошим праймером для строительных сайтов с HTML и CSS. Если вы хотите больше, Строительные веб-формы Есть еще один учебник CodeaCademy, который берет вас через строительство и стиль веб-формы.

Для практики с CSS попробуйте CSS Diner . Это веселая игра CSS Challenge. Еще одним важным аспектом HTML и CSS являются макетами. Учиться Это интерактивный учебник, который показывает, как создавать макеты с HTML и CSS.

Кроме того, узнайте, как использовать Google шрифты с Основы API Google шрифта API CSstricks. Типография является фундаментальным строительным блоком интерфейсов. Когда у вас есть время, я бы очень рекомендую вам прочитать эту бесплатную онлайн-книгу, Профессиональная типография Донни Труонг. Он учит вас всему, что вам нужно знать о типографии как передний разработчик.

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

Практикующие основы HTML и CSS

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

Эксперимент 1.

В нашем первом эксперименте мы собираемся использовать Кодепен Отказ CodePen – это интерфейсная игровая площадка, в которой вы можете кодировать HTML и CSS без использования файлов локально. Он также имеет превью Live, который обновляет, как только вы сохраните код.

Используя CodePen, вы убиваете двух птиц одним камнем. С одной стороны, вы практикуете HTML и CSS. С другой стороны, вы создаете базовый портфель прогресса. Мы также собираемся использовать Дрибблбл , который является сайтом, полным дизайна вдохновения.

Перейдите к Drabbble и найдите дизайн, который достаточно прост, чтобы код в течение нескольких часов. Я выбрал несколько дизайнов, чтобы начать: 1 , 2 , 3 , 4 и 5 Отказ Я выбрал мобильную первую веб-дизайна, потому что они менее сложны, чем их настольные аналоги. Однако не стесняйтесь выбирать дизайн настольных компьютеров.

После того, как вы определились с дизайном, идите вперед и попробуйте кодировать его в кодепене. Если вы застряли, помните, что Stackoverflow твой друг. Еще одна полезная практика – пойти на сайты, такие как Средний , Airbnb. и Dropbox и используя I Nspector Tool Чтобы увидеть, как они достигают разных макетов и стилей. Также посмотрите на некоторые из Ручки на кодепене Отказ Я выбрал несколько хороших ссылок:

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

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

Эксперимент 2.

Надеюсь, первый эксперимент дал вам некоторую уверенность в написании HTML и CSS. Для эксперимента 2 мы собираемся взглянуть на некоторые сайты, а затем код нескольких компонентов.

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

Dropbox для бизнеса : Попробуйте реплицировать их Герой раздел
Airbnb. : Попробуйте реплицировать свой нижний колонтитул
PayPal : Попробуйте реплицировать их навигационный бар
Прививка : Попробуйте воспроизвести раздел их регистрации внизу страницы
Полоса : Попробуйте повторить их раздел платежей

Еще раз в центре внимания эксперимента 2 не воссоздать всю страницу. Хотя это наверняка не повредит! Выберите пару ключевых компонентов, таких как панель навигации или секции героя к коду. Затем я предоставил предложения рядом со списком сайтов, но не стесняйтесь выбирать другие компоненты.

Вы можете записать этот эксперимент в Кодепен или храните его локально. Если вы решите хранить его на месте, вы можете либо загрузить это Пример проекта как котельная или создавайте файлы с нуля. Я предлагаю использовать редактор, как Атом или Возвышенный Отказ

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

HTML и CSS лучшие практики

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

Семантическая разметка

Одной из лучших практик HTML и CSS является написание семантической разметки. Хорошая веб-семантика означает использование соответствующих тегов HTML и значимые названия классов CSS для передачи структурного значения.

Например, H1 Тег говорит нам, что текст, который он оборачивается, является важным заголовком. Другой пример будет нижний колонтитул Тег, который говорит нам, что элемент принадлежит внизу страницы. Для дальнейшего чтения читать Посмотрите на соответствующую семантику HTML5 и Что делает для семантического имени класса CSstricks.

Конвенции CSS именования

Следующая важная лучшая практика для CSS является правильные соглашения о именования. Хорошие соглашения о именовании, такие как семантическая разметка, передают смысл и помогают сделать наш код предсказуемым, читабельным и ремонтом. Вы можете прочитать о различных соглашениях об именах в статье OOCSS, ACSS, BEM, SMACS: что они? Что я должен использовать?

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

CSS сброс

Браузеры имеют небольшие несоответствия стилей от краев до высоты линейки. По этой причине всегда сбросьте свои CSS. Meyerweb это популярный сброс. Если вы хотите копать глубже, вы можете прочитать Создайте свой собственный файл Simple Reset.css Отказ

Поддержка перекрестных браузеров

Поддержка перекрестных браузеров означает, что ваш код поддерживает большинство современных браузеров. Некоторые свойства CSS, как Переход нужно префиксы поставщиков работать должным образом в разных браузерах. Вы можете узнать больше о префиксе поставщиков в этой статье, Префикс поставщиков CSS Отказ Основное убрание в том, что вы должны проверить свой веб-сайт в нескольких браузерах, включая Chrome, Firefox и Safari.

CSS Preprocessors и постпроцессоры

С момента введения CSS в 1990-х годах CSS прошел долгий путь. Поскольку системы пользовательских интерфейсов стали все более сложными, люди придумали инструменты, известные как препроцессоры и постпроцессоры для управления сложностью.

CSS Preprocessors – это наращивание языка CSS, которые добавляют колокольчики и свистки, такие как переменные, смешины и наследование. Две основные препроцессоры CSS являются Sass и Меньше Отказ В 2016 году SASS, как правило, более широко используется. Bootstrap, популярные адаптивные CSS Framework, также переключается меньше на SASS. Кроме того, когда большинство людей говорят о SASS, они на самом деле говорят о SCSS Отказ

PostProcessors CSS применяют изменения в CSS после того, как она либо была написана или скомпилирована препроцессором. Например, некоторые постпроцессоры, такие как Postcsss есть плагины, которые добавляют префикс поставщиков браузера.

Когда вы сначала открываете CSS Preprocessors и постпроцессоры, заманчиво использовать их везде. Однако начните простые и добавлять расширения, такие как переменные и смешины только при необходимости. Статья, которую я предложил ранее, Средние CSS на самом деле довольно чертовски хорошими , также охватывает, сколько слишком много, когда дело доходит до препроцессоров.

Сетчатые системы и отзывчивость

Сетки являются структурами CSS, которые позволяют вам стекать элементы горизонтально и вертикально.

Рамки сетки, такие как Bootstrap , Скелет и Фонд Укажите таблицы стилей, которые управляют строками и колоннами в макетах. В то время как рамоты сетки полезны, также важно понимать, как работает сетки. Понимание сетевых систем CSS и Не волнуюсь сетки хорошие обзоры.

Одним из главных целей сетевых систем является добавление отзывчивость на ваш сайт. Отзывчивость означает, что ваш сайт размещает размеры на основе ширины окна. Много раз отзывчивость достигается с помощью CSS Media Queries , Правила CSS, которые только применимы только к определенным ширина экрана.

Вы можете узнать больше о Media Queries в Intro на Media quereies Отказ Кроме того, потому что мы ввели Mobile-First Эра, проверить Введение в мобильные первые медиа-запросы Отказ

Практикуя лучшие практики HTML и CSS

Теперь, когда вы вооружены лучшими практиками, давайте тестируемся им. Целью этих следующих двух экспериментов является практика письма чистого кода и соблюдение долгосрочного эффекта наилучшей практики на читаемость и ремонтопригодность.

Эксперимент 3.

Для эксперимента 3 выберите один из ваших предыдущих экспериментов и решактовите свой код, используя некоторые из лучших практик, которые вы узнали. Рефакторинг означает редактирование вашего кода, чтобы легче читать и менее комплекс.

Возможность эффективного рефакторинга кода является важным навыком передней разработчика. Создание кода качества – это итерационный процесс. CSS Arductures: Refactor Ваши CSS Хорошая отправная точка для рефакторизации вашего кода.

Вот несколько вещей, которые нужно задать себе, когда вы решаете свой код.

Ваши имена класс неоднозначны? Сейчас на 6 месяцев, вы все еще понимаете, что значит ваше классовое имя?
Ваш HTML и CSS Semantic? При взгляде на ваш код вы можете быстро различить структурное и реляционное значение?
Вы используете один и тот же HEX цветной код снова и снова в вашем коде? Это будет иметь больше смысла ревертировать его в Вариабельность sass ?
Ваш код работает так же хорошо на Safari, как это происходит на Chrome?
Можете ли вы заменить немного вашего макета с помощью системы сетки, такими как Скелет ?
Вы используете Действительно важно Флаг часто? Как вы можете это исправить?

Эксперимент 4.

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

Для последнего эксперимента постройте сам веб-сайт портфолио. В качестве внешнего интерфейса ваш сайт портфолио является одним из ваших наиболее важных цифровых активов. Портфолио – это сайт, который демонстрирует вашу работу. Что еще более важно, это постоянная запись, которая поможет вам отслеживать свой прогресс и развитие. Так что даже если у вас есть только 1 или 2 вещи, чтобы показать, положите его.

Для начала следуйте вместе с статьей Адхама Даннауэйэуэйэуэй, Мой (простой) рабочий процесс для разработки и разработки веб-сайта портфолио

Если ваша первая итерация портфолио не идеальна, это нормально . Портфолио проходят через много итераций. И что важно, чтобы вы построили его своими собственными навыками.

Оставаться током

Хотя HTML и CSS не выйдут из Vogue Anytime в ближайшее время, важно оставаться в курсе ландшафта передней части.

Ниже приведен список веб-сайтов, блогов и форумов, которые оба приятные для чтения и информатиров.

Узнайте пример

Наконец, лучший способ учиться на примере. Вот набор стилей и конвенций кода, которые научат вас, как быть более эффективным интерфейсом.

Стильгиды

Веб-стильгиды – это коллекции компонентов и шаблонов CSS, которые могут быть использованы повторно на веб-сайте. Ключевая вещь, которую следует отметить из этих стильгидов, заключается в том, насколько компонентами подходы HTML и CSS позволяют вам повторно использовать код для хранения вашего кода СУХОЙ .

Код конвенции

Код Conventions, предназначенные для того, чтобы сделать ваш код читабели и поддерживаться. Некоторые из этих ссылок, такие как Руководящие принципы CSS являются руководящими принципами для написания лучшего HTML и CSS, в то время как другие ссылки, такие как Github Internal CSS Toolkit и рекомендации являются примерами кода качества.

Заворачивать

Надеюсь, к концу этой статьи вы знакомы с HTML и CSS и имеют несколько проектов под вашим ремнем. Лучший способ изучить интерфейс – строительство проектов и экспериментов. Помните, каждый интерфейсный разработчик должен где-то начать. И лучше начать сегодня, чем завтра.

Эта статья является первой из двух частей серии. Вторая статья охватывает добавление интерактивности с помощью библиотек JavaScript и JavaScript/Frameworks. Кроме того, если вы хотите, чтобы я уточнил ничего или иметь какие-либо вопросы, не стесняйтесь оставить записку или Tweet для меня.