Как практиковать CSS (с примерами)

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

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

Когда я только начинал кодить, мне нравилось играть с темами Tumblr, используя HTML и CSS. Подробнее об этом позже… Сначала давайте рассмотрим основы.

Что такое CSS?

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

HTML — это скелет веб-сайта. Он указывает веб-браузеру, какой *контент* отображать, например, текст, гиперссылки, изображения, видео и т.д. CSS используется для добавления стиля к HTML. CSS можно рассматривать как одежду для сайта. Он добавляет цвет, макет, простую анимацию и типографику. CSS также может быть использован для того, чтобы сделать сайт отзывчивым, что позволяет ему корректно отображаться на мобильных устройствах и настольных компьютерах.

Примеры CSS

Что можно сделать с помощью CSS? Лучше спросить, что можно создать с помощью CSS? В сочетании с HTML с помощью CSS можно создавать электронные письма, веб-сайты и различные анимации.

Хотите увидеть реальные примеры использования CSS? Посмотрите на кнопки, меню, типографику и макеты любого веб-сайта, который вы используете. Вот несколько примеров того, где вы можете увидеть CSS в реальной жизни:

  • Стилизация с помощью типографики
  • Формирование кнопок
  • Разметка веб-сайта с помощью Flexbox и Grid
  • Создание красивых меню
  • Доступность
  • Применение эффектов и анимации

Хотите больше? На сайте Creative Bloq есть целый список красивых примеров использования CSS.

Как изучить CSS

В интернете можно найти множество бесплатных вариантов изучения CSS. Некоторые курсы дают общее представление о CSS, в то время как другие погружаются в специфику, например, Flexbox, Grid или Tailwind.

Хотя бесплатные ресурсы могут быть полезны, и мы перечислили здесь несколько из них, прохождение платного курса позволит вам действительно улучшить свои навыки CSS. Наш курс «Карьерный путь Frontend Developer» охватывает HTML, CSS, JavaScript и многое другое, чтобы полностью подготовить вас к карьере Frontend Developer.

Вот еще пять полезных курсов по CSS от Scrimba:

  • Бесплатно изучите переменные CSS
  • Бесплатно изучите CSS Grid
  • Бесплатно изучите Bulma CSS
  • Изучите Tailwind CSS
  • Изучите анимацию CSS

Как практиковать CSS

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

Попробуйте одну из этих 17 игр для практики CSS

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

  1. Code Pip — создатели Flexbox Froggy и Grid Garden.
  2. Coding Fantasy — создатели Flexbox Adventure и Grid Attack.
  3. Roadmap
  4. Flexbox Zombies
  5. Flexbox Defense
  6. CSS Battle
  7. CSS Diner
  8. Карнавал CSS
  9. Сервисные рабочие
  10. Развернуть
  11. Рыцари таблицы Flexbox
  12. Угадай CSS
  13. CSS Speed Run

Воспроизведите CSS вашего любимого сайта

Используйте Inspect (Chrome) или DevTool (Firefox), чтобы заглянуть за кулисы сайта. Затем попробуйте изменить или добавить правила стиля, чтобы увидеть, как меняются элементы на вашей странице в режиме реального времени. Воссоздайте сайт по частям. По мере того, как вы будете это делать, вы начнете видеть шаблоны, которые можно использовать повторно или изменить для создания своего собственного.

Изменение шаблона с помощью CSS

После того как вы заглянули за кулисы, вам может помочь работа с шаблоном. Вы можете заглянуть в голову профессионального разработчика Frontend Developer через его шаблон. Найдите шаблон, который вам нравится, и сделайте на его основе несколько сайтов. В интернете есть как бесплатные, так и платные CSS-шаблоны.

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

Попробуйте онлайн-редактор кода

С помощью этих приложений вы сможете видеть свои правки кода на экране в режиме реального времени. Вы можете вставить код из Inspect, DevTool или шаблона. Если вы готовы, вы можете просто начать с нуля в этих инструментах.

Лучшие онлайн-редакторы кода:

  • Scrimba
  • Codepen
  • Brackets
  • JSFiddle
  • Codesandbox

Практикуйте CSS, создавая проекты с нуля

Вы окунулись в игру, пробрались за занавес волшебника, чтобы посмотреть, как это работает, и прокатились на велосипеде с тренировочными колесами, изменяя шаблоны. Теперь настало время для самостоятельного полета!

Снимите учебные колеса и попробуйте создать проект с нуля! Не знаете, что создать с помощью CSS для практики? Прокрутите вниз эту статью, чтобы найти идеи проектов CSS для начинающих. Всемирная паутина — ваша устрица!

Прежде чем вы начнете рассказывать о своих новых удивительных навыках CSS, вот краткий список того, что вам следует освоить в CSS. Эти навыки необходимы для использования CSS на работе или в качестве хобби, поэтому не упускайте их из виду!

  • Модель коробки
  • Типы отображаемых значений (блок, inline-block, inline, flex, grid)
  • Позиционирование (статическое, абсолютное, фиксированное, относительное)
  • Селекторы (a, .component, .component > a)
  • Псевдоклассы (:hover, :active)
  • Специфика, !important
  • Отзывчивый веб-дизайн (@media-запросы, относительные единицы, mobile-first дизайн)
  • Таблица стилей по умолчанию и reset.css
  • Основы анимации (@keyframes)
  • Фреймворки
  • Sass (миксины, циклы, условия, функции)
  • методология BEM

12 лучших практических проектов по CSS для начинающих (с примерами)

1. Элементы пользовательского интерфейса

Отличный, легко управляемый способ погружения в CSS — это элементы пользовательского интерфейса (UI). Вместо того чтобы проектировать всю веб-страницу или сайт, попробуйте разработать только меню, кнопки, выпадающие элементы или другой элемент пользовательского интерфейса.

Убедитесь, что вы следуете рекомендациям по удобству использования. Вы можете найти вдохновение для элементов пользовательского интерфейса на сайте руководства по юзабилити или на Dribbble. Попробуйте разработать каждый элемент с нуля в HTML и CSS.

2. Статическая посадочная страница или страница продаж

Статическая посадочная страница — это тоже небольшой проект, который вполне по силам начинающим CSS-специалистам. Просто оформите одну страницу. Это может быть строящийся сайт, местоположение, всплывающее событие или страница продаж.

Нужно вдохновение? Посмотрите эту подборку целевых страниц от Hubspot.

3. Одностраничный сайт

Технически, целевая страница — это одностраничный сайт. Но не все одностраничные сайты являются целевыми страницами. Вроде того, как квадрат — это прямоугольник, но прямоугольник — это не квадрат. На сайте One Page Love вы можете увидеть множество замечательных примеров одностраничных сайтов.

Одностраничный сайт может быть мощным инструментом, который прост в создании. Попробуйте создать целый сайт на одной странице для фотографа, ресторана, группы, сайта о фотографии, ресторана, музыкального магазина, группы или запуска фальшивого продукта. А еще лучше — спросите друзей или родственников, можете ли вы создать для них веб-страницу!

4. Личный блог

Хорошо, давайте добавим более технический элемент для этого проекта: блог! Раньше блоги назывались «веблог». Это веб-журнал — онлайновый журнал или информационный сайт, который делится информацией в обратном хронологическом порядке и регулярно обновляется. В блогах последние записи отображаются первыми, в верхней части страницы.

Чтобы создать блог, вы будете использовать HTML, CSS, Grid, FlexBox и отзывчивый дизайн. Вы можете узнать, как создать блог бесплатно, или посмотреть вдохновение для дизайна блога, прежде чем приступить к работе.

5. Портфолио

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

Нужны идеи? Мы собрали для вас десять минимальных портфолио веб-разработчиков. MindInventory также поделился этим великолепным интерактивным сайтом-портфолио, если вы ищете анимированные примеры.

6. Интерактивное резюме

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

Логан разработал этот простой интерактивный шаблон резюме, который станет отличным образцом. Сабир создал супер-энтузиастский интерактивный шаблон резюме для WordPress, на который вы тоже можете взглянуть. На Dribbble есть еще больше отличных идей интерактивного резюме.

7. Тема Tumblr

Помните Tumblr? А может быть, вам не нужно помнить Tumblr, потому что вы действительно им пользуетесь… Некогда популярная платформа для блогов все еще существует, и ее посещают 288 миллионов человек в день! Кроме того, она имеет встроенную поисковую систему, благодаря которой ваш блог легко найти.

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

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

8. Шаблон электронной почты

Разработка шаблонов электронной почты — прибыльный и востребованный на рынке навык. MailChimp, Hubspot, Litmus, ActiveCampaign, SendinBlue и другие платформы email-маркетинга позволяют маркетологам использовать пользовательские шаблоны писем, написанные на HTML и CSS.

На сайте Really Good Emails вы можете найти сотни примеров электронных писем. Не забывайте создавать отзывчивый дизайн. Большинство просмотров электронных писем происходит с мобильных устройств. Если вы действительно хотите отточить свои навыки, попробуйте свои силы в темном режиме!

10. Форма

Формы в наши дни необходимы бизнесу любого размера. Вы обязательно должны знать, как создать форму, если хотите стать разработчиком Frontend. Их несложно создать с помощью HTML и CSS. Найдите красивые CSS-формы на UI Cookies, если вам нужны идеи.

11. Анимация

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

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

12. Проекты с открытым исходным кодом

Проекты с открытым исходным кодом — это самый простой способ получить реальный опыт, прежде чем вы получите свою первую работу или клиента. Если вы заинтересованы в работе над реальным проектом, попробуйте найти проект с открытым исходным кодом, в который можно внести свой вклад. Не знаете, как это сделать? Прочитайте это руководство «Как внести вклад в проект с открытым исходным кодом», прежде чем приступать к работе.

Что изучать дальше

Теперь, когда вы знаете CSS и потренировались, пришло время для следующего шага — JavaScript! JavaScript — это одна из основных технологий для фронтенд-веб-разработки. Кроме того, это самый популярный язык программирования в мире.

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

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

Оцените статью
devanswers.ru
Добавить комментарий