Как изучить CSS?

Алексей Скуратов
  · 9,1 K
Frontend-разработчик, создатель учебного портала Frontend Blok и сервиса Frontend Help и...  · tele.click/tpverstak

Лучше всего CSS изучать в связке с HTML.

Мне помогла книга Робсона и Фримена. "Изучаем HTML, XHTML и CSS", где наглядно рассказывалось о том, как с самого нуля начать работать с CSS. Больше всего понравилось, что там использовались иллюстрации и язык, который будет понятен каждому, а не только техническому специалисту. Мне как новичку, на тот момент, это было важно.

После уже можно подключить справочники по свойствам, например, на сайте http://htmlbook.ru/ и пытать верстать макеты из интернета. Например макеты можно подобрать тут http://tpverstak.ru/category/templates/

Верстая макет на практике вы будете задаваться множеством простых вопросов, которые уже, наверняка, есть в интернете. Например, "как установить изображение для ссылки" и прочее.

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

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

9 октября 2019  · 1,3 K
Анна, как много утекло времени с того момента, когда вы были новичком? Интересует за какое время я могу освоить про... Читать дальше
Комментировать ответ…
Ещё 7 ответов
В идеале записаться на курсы с живым преподавателем, потому что при самостоятельном изученни бывает, что падает мотивациия и учебу забрасывают. Можно найти онлайн курсы, но с домашним заданием, чтобы начать практиковаться как можно скорее. Если вы очень мотивированный человек, что можно попробовать по учебнику или самоучителю, но все возникающие... Читать далее
Комментировать ответ…
Теорию можно подтянуть на http://htmlbook.ru/samcss - это лучший русскоязычный учебник по HTML/CSS (на мой взляд). После изучения теории, переходите к практике и верстайте PSD-макеты, чтобы набить руку. Очень много видеоуроков можно найти на YouTube. Много актуальных материалов для поддержания уровня можно найти тут: Подкасты: - http://feeds.feedbu... Читать далее
28 марта  · 329
Комментировать ответ…
Сервис подбора онлайн-курсов по программированию, дизайну, маркетингу, аналитике и...  · kursfinder.ru
Отвечает
Елена Онопко
На мой взгляд, 3 оптимальных пути изучения CSS: 1. Самостоятельное изучение. Читайте соответствующую литературу, статьи, в том числе зарубежные, смотрите видеолекции, проходите вебинары и так далее. Но вам нужна цель, и вы должны знать, чего точно хотите. Следует структурировать свое время, чтобы уделять не час в неделю этому делу, а... Читать далее
19 мая  · 143
Комментировать ответ…

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

Комментировать ответ…
Дизайнер интерфейсов из Ozon отвечает на вопросы об интерактивном дизайне, UX, анимации и...  · slashdesigner.ru

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

Комментировать ответ…
Вы знаете ответ на этот вопрос?
Поделитесь своим опытом и знаниями
Войти и ответить на вопрос
Ответы на похожие вопросы
Как изучить CSS? — 2 ответа, задан

Добрый день!

Стоит понимать, что css служит для описания стилей, то есть для придания визуальной красоты тому, что вы "сконструировали" с помощью html, поэтому вам нужно изучать не просто css, а сразу связку html+css.

Что касается методики изучения, то хороший способ - это видео-уроки на том же youtube. Они бывают разного уровня, от совсем базовых типа "css за 1 час" до курсов на несколько десятков часов. Я советую вам сначала выбрать небольшой курс или видео об азах верстки, а после просмотра уже на практике решить простенькую задачу на основе полученных знаний. Шедевра у вас не получится, но основы синтаксиса и принцип работы усвоите.

После этого удилите внимание выбору инструментов, например, в VS Code после установки основных плагинов очень удобно верстать. Про инструменты можно почитать на Хабре. Как только настроите свою среду, то переходите к более серьезным видео-курсам на youtube или на том же stepik.

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

Комментировать ответ…
Читайте также

Как вставить фон в HTML?

Seo-оптимизатор  · rotgar.ru

Чтобы добавить фоновую картинку на веб-страницу, задайте путь к изображению внутри значения url стилевого свойства background, которое в свою очередь добавляется к селектору body.
Общий синтаксис добавления фона следующий.

<style>
body { background: url(путь к файлу); }
</style>

Путь к графическому файлу будет различаться, в зависимости от того, где он располагается относительно текущего документа. Например, если HTML-документ и рисунок с именем bg.gif хранятся в одной папке, то достаточно задать url(bg.gif).
При добавлении фоновой картинки учтите, что изображение загружается не сразу, поэтому цвет фона должен быть таким, чтобы сохранить достаточный контраст между цветом текста и фона. Лучше всего устанавливать цвет фона близким к цвету фонового рисунка, здесь опять же поможет универсальное свойство background, как показано в примере 1.

Пример 1. Добавление фона
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Фон</title>
<style>
body {
background: #c7b39b url(images/bg.jpg); /* Цвет фона и путь к файлу */
color: #fff; /* Цвет текста */
}
</style>
</head>
<body>
<p>...</p>
</body>
</html>
В данном примере фон веб-страницы задан цветом хаки, а текст — белым. Также добавлено фоновое изображение, которое при загрузке закрывает собой фоновый цвет.

Прочитать ещё 4 ответа

Подскажите наиболее эффективный способ стать JavaScript программистом? С чего начать обучение? Какие базовые знания должны быть?

Илья Трушков
Эксперт
299
Web-разработчик, репетитор по информатике  · repetitor-informatika.ru
  1. https://learn.javascript.ru/ - самый лучший из бесплатных онлайн-самоучителей. Прямо по всем пунктам можете пройти, которые по ссылке представлены, наберетесь достаточно знаний для мини-проектов.

1.5. Параллельно с изучением самого Javascript, изучите сразу, как работать с Git'ом. Заведите репозиторий на https://github.com/

  1. Вооружившись сайтом из п.1, ютубом и гуглом, делаете свой внятно работающий ToDo-list. Как полагается, с drag'n'drop'ом, popup'ами в случае необходимости, сохранением в local storage или cookies, удобный и красивый. Естественно, с нормально оформленным кодом. Другой программист, взглянув на Ваш код, должен без проблем понять, какой метод за что отвечает и главное - как этот метод работает. Не должно быть никакой подкапотной магии или кода, тупо стыренного с просторов инета без какого-либо осознания и комментов. И да, этот пункт сначала сделайте, отвлекитесь на недельку и снова посмотрите на свой код. Скорее всего, его захочется переписать "получше".
  2. Разместив параллельно свое резюме на moikrug.ru, hh.ru и иже с ними (естественно дав ссылку на свой гит-репозиторий), пишете еще пару-тройку-десяток банальных, но общепринятых приложений. Если сделаете их небанально, то это лишь улучшит впечатление работодателя о Вас.
  3. Реализовав 3-4 полноценно работающих приложения, читаете про имеющиеся на данный момент фреймворки на глобальном рынке. Не раньше этого пункта, это важно. JS - язык с нереально быстро развивающейся и меняющейся эко-системой. Пока Вы пройдете пункты 1-3, пройдет пара-тройка месяцев, если впахивать круглыми днями. И за это время ситуация вполне может измениться, а информация - стать неактуальной. Так что только теперь изучаете текущие фреймворки (для понимания, что это - например сейчас рынок делят react.js, vue.js, angular.js). Выбираете тот, идеология которого Вам ближе, и изучаете его более тщательно.
  4. Если к этому моменту оффер на работу еще не получен, то переписываете свои деяния из п. 2 и 3 на выбранном фреймворке, так же выставляете на всеобщее обозрение в гит.
  5. Если и на этот момент работой даже не пахнет, что-то тут не так. Просите знакомых программистов или левых за денежку или еду провести Вам CodeReview (скажу честно, за еду не согласятся те, ревью которых Вам действительно поможет :) ). Снижайте свои требования к работодателю и т.д. :) На данном этапе (по сути - новичок) нормой является зп в 25-50к в зависимости от региона, в офисе.
30 августа 2019  · 20,6 K
Прочитать ещё 6 ответов

Как установить гиперссылку в HTML?

Frontend-разработчик, создатель учебного портала Frontend Blok и сервиса Frontend Help и...  · tele.click/tpverstak

Для гиперссылок необходимо использовать тег <a>

Обычно ссылка выглядит следующим образом:

<a href="https://example.com">Ссылка</a>

Вместо https://example.com необходимо записать ссылку, на которую хотите установить переадресацию.

Если необходимо открыть ссылку в следующей вкладке, то необходимо дописать аттрибут target="_blank".

В итоге будет следующая запись:

<a href="https://example.com" target="_blank">Ссылка</a>

5 июля 2018  · 49,7 K
Прочитать ещё 2 ответа

Как изменить шрифт в html?

Артур Санамян
Эксперт
282
Руководитель веб-студии Artworkshop. Разрабатываем сайты и помогаем компаниям получать...  · aws.su

Неважно какой тег, но для примера возьмем <p>

пишете атрибут style=""

Пример:

<p style='font-size:10px ; font-weight:100; font-family: Geneva, Arial, Helvetica, sans-serif;'>Текст</p>

Font-size - размер шрифта

Font-weight - толщина

Font-family - Семейство шрифтов. Также помимо стандартных можно подключить другие шрифты например из каталога Google Fonts

Но содержимое атрибута Style лучше размещать через класс в CSS-файле или на крайний случай в теге <style>

3 декабря 2018  · 28,3 K
Прочитать ещё 1 ответ

Как делать отступы в HTML?

Магистр Йода медицинской физики. 17 лет люблю горы 🏔 и собак 🐕

Для внутренних отступов есть свойства padding, для внешних margin.

Можно задать с какой-либо одной стороны padding-left, padding-right, padding-top, padding-bottom, для margin аналогично.

Например:

/* внешний отступ слева 15px */

margin-left: 15px;

/* внутренний отступ снизу 45px */

padding-bottom: 45px;

Можно использовать сокращенные записи, например:

/* внутренний отступ со всех сторон 20px */

padding: 20px;

/* внешний отступ сверху и снизу 10px, справа и слева 20px */

margin: 10px 20px;

/* внутренний отступ сверху 10px, справа и слева 20px, снизу 30px */

padding: 10px 20px 30px;

/* внешние отступы сверху 10px, справа 20px, снизу 30px, слева 40px */

margin: 10px 20px 30px 40px;

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

Еще есть интересный эффект как схлопывание отступов. Подробнее можно разобраться пройдя курс https://htmlacademy.ru/courses/44 Блочная модель документа от HTML Academy

19 июля 2018  · 23,1 K
Прочитать ещё 5 ответов