Три метода, которые я использую, чтобы улучшить свои навыки работы с CSS
Первый взгляд на список всех свойств CSS может показаться ошеломляющим. Поверьте, многие из нас бывали там раньше. Черт, я все еще там. Никто не ожидает, что вы запомните каждую часть документации CSS. Однако это не означает, что вы должны воздерживаться от практики различных способов использования CSS в своей работе. Сегодня я расскажу вам о трех способах, которыми я сделал изучение CSS продуктивным и эффективным.
Искусство CSS
На мой взгляд, искусство CSS можно описать рисунками или изображениями, сделанными исключительно из кода HTML и CSS. Формирование, раскраска и анимация элементов для формирования узнаваемого изображения может помочь новым разработчикам открыть свой разум нестандартному миру. Я считаю, что это самая интересная из техник, которыми я поделюсь с вами сегодня. Я рекомендую вам поискать несколько примеров искусства CSS, чтобы увидеть, что можно сделать, используя только ваши каскадные таблицы стилей. Ознакомьтесь с этой статьей от Элисон Спиттель. Там есть несколько отличных советов и проектов по чистому CSS.
Когда я подхожу к созданию картины, я пытаюсь представить себе предмет и формы, из которых он состоит. Мне нравятся гладкие и простые дизайны, поэтому я стараюсь взять этот объект и упростить его до простых линий, а именно прямоугольников. Отсюда я добавлю кривые и углы, чтобы сделать объект более узнаваемым. Если вы хотите попробовать это сейчас, откройте свой редактор и попробуйте создать смайлик, используя только элементы div и CSS. Это будет отличным началом для ваших арт-проектов CSS.
Эта техника позволяет мне попрактиковаться в том, чтобы смотреть на что-то и видеть, какие настройки нужно внести, чтобы перемещать элементы. Чем больше вы пытаетесь перемещать фигуры, тем лучше вы подготовлены к перемещению, размещению и изменению размеров элементов на веб-странице. Я могу приписать свои более надежные знания Flexbox созданию «смартфонов» с использованием чистого CSS.
Варианты стиля компонентов пользовательского интерфейса
Некоторые компоненты пользовательского интерфейса используются на большинстве веб-сайтов в Интернете. Части этих веб-сайтов, такие как навигация, меню, кнопки, формы и т. Д., Необходимы для функциональности сайта. Хотя эти компоненты почти универсальны, создание их уникального стиля для страницы может быть полезным.
Этот метод может быть немного проще, чем создание CSS-арта, потому что основная идея работы уже сформирована. Проще говоря, сделайте красивый пустой функциональный компонент вашего сайта. Затем повторите, только на этот раз по-другому. Повторить. Повторить. Повторить. Этот метод в конечном итоге заставит вас задать себе жизненно важные вопросы:
«Я использую слишком много цветов?»
«Это становится слишком сложно?»
«Есть ли какие-то изменения в размере, которые могут работать лучше?»
«Что послужило причиной моего выбора?»
«Подходит ли этот компонент к остальному сайту?»
Это некоторые из реальных вопросов, которые я начал себе задавать. Я думаю, что хороший программист умеет конструктивно критиковать и ставить под сомнение свою собственную работу. Это основная причина создания многих моделей. Создав меню десятком разных способов, вы можете начать замечать частичное совпадение между каждым из ваших творений. Не волнуйтесь, вы не прогадали. Спросите себя, почему это повторяется. Это хорошая дизайнерская особенность? Вам неудобно расставаться с этой функцией? Это оправдано? Ответы на эти вопросы помогут вам решить, стоит ли вам попробовать что-то новое или то, что у вас уже есть, работает хорошо.
Случайный выбор и практика
Последний метод, который я пробовал и который преуспел, - это случайная практика. Я приобрел небольшую привычку читать документацию по CSS и просто случайным образом выбирать новое свойство или метод для работы. Практика ведет к совершенству. Проведите небольшое исследование этого неизвестного свойства. Вы должны выяснить, для чего он используется и как вы можете включить его в мини-проект. Тогда зайдите на CodePen или любую другую площадку для разработчиков и взломайте его! Как только вы заставите его работать, начните настраивать его. Узнай, как он ломается. Используйте его более одного раза.
Как только я чувствую себя хоть немного комфортнее, используя новое свойство, я пытаюсь внедрить его в более крупный проект. Попробуйте добавить на один из ваших веб-сайтов или приложений. Докажите себе, что вы знаете, что он делает и как это повлияет на вашу страницу. Эта техника случайного выбора помогла мне научиться исследовать неизведанную территорию, раздвигать границы и учиться на практике. Я рекомендую вам использовать фрагмент CSS, с которым вы не знакомы. Вы можете не использовать его снова в течение долгого времени, а может, и никогда больше. Важной частью этого упражнения является то, что вы попробовали что-то новое и в процессе освоили CSS.
Последние мысли
Я все еще новичок. Я все еще борюсь с CSS почти каждый раз, когда открываю файл .css. Для меня самая важная часть обучения - это придерживаться своей цели. Эти методы практики подтолкнули меня к достижению моих целей, и я надеюсь, что они могут вдохновить вас на успех в достижении ваших целей. Есть сотни способов учиться. Найдите способ, который работает для вас, и воплотите его в жизнь. Не забывайте, что CSS может и должен доставлять удовольствие! Так что я надеюсь, что вы отлично проводите время, создавая стиль для своей работы.
