Практика CSS онлайн?

Question

[Монти Пайтон]

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

p.s. как html academy и w3schools

Comments

[Pavel Karinin]

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

[Монти Пайтон]

Pavel Karinin, т.е. вы предлагаете готовый скачать шаблон и не глядя в код верстать его, и смотреть в код если чтото не получается?

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

[Pavel Karinin]

Ostin1, Да, все верно. Ну, а если захочется "подсмотреть", то сами понимает, что тем самым вы будете обманывать лишь самого себя. Кстати, не обязательно именно сверстанный макет брать, можно просто картинки в том же Pinterest их куча, тогда и заглядывать некуда будет)) вот посмотрите тут (одни картинки, берите и верстайте)

[Pavel Karinin]

а не реальные рабочие условия, которые сложнее, во много раз сложнее

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

[Монти Пайтон]

Pavel Karinin, я имел ввиду такого плана упражнения https://www.w3schools.com/css/exercise.asp?filenam... с подсказками, где не сразу надо работать, а учиться работать

[Pavel Karinin]

Ostin1, Я понял что вы имеете ввиду, просто предложил вам более "надежный" способ обрести умения. Выбор за вами.

[Монти Пайтон]

Pavel Karinin,

чем ближе к реальности, тем больше "закалка" и быстрее научитесь

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

[Pavel Karinin]

Ostin1, А, так у вас вообще нет навыков никаких?... т.е. вы с нуля хотите изучать?

[Монти Пайтон]

Pavel Karinin, "какието" навыки есть, но они все откуда попало взятые и нет общего видения картины

[Владимир Проскурин]

Ostin1, прочитайте что-то по теме, мне кажется, у вас не хватает знаний. Почитайте например HTML & CSS: Design and Build Web Sites После нее уже будете представлять, что, где и как отображается, и сможете уже верстать простые макеты. Дальше только практика. Не стоит возлагать надежды на такие интерактивы, они не дадут полных знаний, а если дадут, то очень медленно.

[Pavel Karinin]

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

[Монти Пайтон]

Pavel Karinin,

ведь технологии на месте не стоят

Вы наверное про CSS4, что там нового будет? )

[Pavel Karinin]

Ostin1, нет я не только про CSS4, ведь кроме типичных css и html (если мы про front) многое чего используется, а в back и подавно.

что там нового будет?

в сети почитайте

[Монти Пайтон]

Pavel Karinin, понятно что надо научиться пользоваться SASS, Gulp etc. но в каком порядке это делать?

[Pavel Karinin]

Ostin1, для начала, как выше сказал @Vlad_IT

Почитайте например HTML & CSS: Design and Build Web Sites

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

[Pavel Karinin]

Ostin1, А вообще вам безумно повезло учиться этому в наше время, а не как я учился - в блокноте теги прописывать...))

[Монти Пайтон]

Pavel Karinin, было время также так и учился в обычном notepad даже без подсветки кода, но потом пошёл на работу в оффлайн забросив дизайн и вёрстку. Тогда одно время даже удавалось продавать свои шаблоны для Joomla и после WordPress, но в действительности они небыли построенными с нуля, а полностью или частично переработаны (что не давало "покоя" и "свободы действий" и удовлетворения от своей работы) - получалось всё очень красиво и вызывало вау-эффект у "клиентов", но уходило на это очень много времени, потому что чужое переделывать намного сложнее чем работать с тем что знаешь. Теперь снова захотелось этим заниматься, появился саблайм, вебсторм, browsersync и прочие действительно удобные вещи, например стали более развиты системы контроля версий, которые помогают без того сложные задачи выполнять, пусть немного, но всё то (что появилось новое) в сумме действительно хоть не много но облегчает ситуацию. Из всех способов что доступны больше всего помогают интерактивные обучающие сайты, в которых рассказывается теория, есть задания с встроенным редактором кода что немаловажно. У каждого разный уровень восприятия, комуто подходят видео, комуто книги, комуто интерактивные сайты в поиске которых сейчас. Флексбоксфрогги и цссгарден проходил, но они примеры отображают не на реальных примерах, а на "водичке с морковкой" развивая больше комбинаторику, меня это привело к тому, что выполнив все задания и ничего в итоге не понял, зато красиво и красочно, такое не принесло никакой пользы, решил поискать ещё на тостере

[Pavel Karinin]

Ostin1, Ниже вам xmoonlight дал задачу... решайте))

[Монти Пайтон]

Pavel Karinin, а да он всем её ходит даёт, что на тостере, что на хабре, на собеседованиях тоже наверное задаёт)

[Pavel Karinin]

Ostin1, меня миновала участь проходить собеседования))

[Монти Пайтон]

Pavel Karinin, по резюме?

[Pavel Karinin]

Ostin1 нет, я с 1993 года на этом поприще... а тут как футболе: в 40 лет - ты старик, т.е. либо чего-то достигнешь, либо уже никак, молодых и сильных много. я успел, скажем так))

[Pavel Karinin]

Ostin1, Я чувствую нас модераторы тут скоро обрубят за "форум", лучше пишите в skype, он указан в моем профиле.

[Владимир Проскурин]

о есть, вы считаете, что прочитать книгу 2011 года по HTML&CSS, в которой используется устаревший уже в HTML4.01 атрибут align="...", в которой за всю книгу перечислено 68 CSS свойств

Да, я согласен, она старая. Но она настолько простая, что ее за один присест можно прочитать, и в голове что-то отложится. Хотя там очень много вредного для новичков, я просто постарел видимо. Пусть тогда читает "Девид Макфарланд - Новая большая книга CSS - 2016". Книги лучше, в книгах объясняются все моменты, которые на тостере по 100 раз спрашиваются, и если бы люди читали умные книжки, а не только проходили всякие интерактивы, они бы такое не спрашивали.

[Владимир Проскурин]

Вёрстка это не про чтение, это про практику. Прочитали раздел по таблицам, нашли в гугле картинку со сложной таблицей и сидите верстаете ее 3 часа. Прошли раздел по списками, нашли в гугле картинку с десятиуровневым списком и сидите верстаете его 3 часа. Прошли главу по формам, нашли в гугле картинку с формой-опросником и сидите верстаете ее 3 часа. Вот при такой практике у вас будет откладываться в голове все что нужно. При простом чтении - нет.

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

spoiler

Ни одна книга вам не даст актуальные знания и полные знания по CSS

Ничего подобного. Веб развивается очень быстро, это факт, но базовые знания не меняются. Вы можете спокойно читать большую книгу css за 2014 год, и там все css свойства будут актуальны (разве что некоторые вендорные префиксы уже необязательны). Да, там не рассказывают про гриды, но новичку их использовать не нужно, т.к. нужно четко понимать, в какой момент можно их использовать, а не кидать на каждый лендинг. flexbox же объясняется хорошо, а большое количество верстальщиков его толком не знают. Кстати я сделал ошибку, "Новая большая книга css" это 2017 год, знания актуальны.

[Pavel Karinin]

Incry, Давайте пример из жизни... Вы знаете о том, что сейчас еще есть спрос на поддержку например IE7?, не верите?, - поверьте, он еще есть. И вот я возьму (условно говоря) себе в подмастерье джуна, который хорошо знает про flex, но ничего не знает про упомянутые вами inline-block; float и т.д., ведь это "устаревшие" способы представления блоков...

Знать о них нужно на случай если придется работать с проектом где они есть, но не более.

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

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

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

У новичков на тостере, чаще всего возникают проблемы с фильтрами и с тем как сделать блок не прямоугольной формы а с каким-нибудь вырезом или под углом

никого не хочу обидеть, но в 60% случаев новички используют ctrl+c и ctrl+v и даже не вникают в показанные им ответы, проходит время они забывают о том, как сделать этот скошенный угол в CSS и все повторяется... знаете почему? - потому что все ищут легкой жизни (наверное это правильно искать такую жизнь), но я о другом, я о том, что полное отсутствие фундаментальных навыков зачастую приводит новичков сюда с такими вопросами, в том числе тех навыков, которые на ваш взгляд кажутся устаревшими. Но доля истины в ваших словах, безусловно, есть.

UPD: Свежий пример и еще один, если не удалят с формулировкой "Ответ легко ищется в интернете"

Answer 1

[Владимир Проскурин]

Что может лучше практиковать навыки чем реальные задачи? Берите макеты и верстайте.

Ну на CSS селекторы есть вот такая штука https://flukeout.github.io/
Есть вот такая крутая штука для флексов www.flexboxdefense.com https://flexboxfroggy.com/#ru https://cssgridgarden.com/#ru

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

Answer 2

[xmoonlight]

Вот задачка как раз для CSS с проверкой:
Сделать без JS, без таблиц, без flexbox, без grid, без канваса, без SVG, "резиновый" квадрат на всю ширину/высоту окна браузера, расположенный в центре с цифрами в ячейках. При изменении размеров окна браузера он равномерно растягивается, оставаясь всегда квадратом:

Растянули:

Comments

[Одиночка Айс]

Вы ж понимаете, что окно браузера нихрена не квадрат и будет прокрутка?

[Stalker_RED]

Одиночка Айс, резиновый же

[Одиночка Айс]

Пока как-то так - https://jsfiddle.net/p2d8tzya/

[FabiBoom]

Одиночка Айс, https://codepen.io/anon/pen/rvmYEQ?editors=1100

[Владимир Проскурин]

Мне кажется, вот так будет интереснее https://codepen.io/VladIT4/pen/rvmKVO?editors=1100. Так он всегда будет влезать в окно браузера, не оставляя скролл.

[Одиночка Айс]

FabiBoom, codepen с ума сходит, бесконечно перегружается, можете на другом сервисе показать? Не отрицаю, что мое решение излишнее в плане вложенности.

[FabiBoom]

Одиночка Айс, https://jsfiddle.net/vk89oh7z/ лови

[FabiBoom]

Владимир Проскурин, о спс) никогда не юзал vmin))

[xmoonlight]

Вот сразу всё стало и понятно: кто верстает, а кто ещё только учится)
Владимир Проскурин - сделал максимально правильно!
https://jsfiddle.net/vk89oh7z/
Бонус всем, кто старался: https://html5book.ru/

[Владимир Проскурин]

xmoonlight, 100vmin я добавил, так что :D

[xmoonlight]

Владимир Проскурин, да. ошибся. меняю!

[FabiBoom]

xmoonlight, типо меня похвалили?))) Ну я 100vmin не ставил))) А можно еще задание? Если есть конечно! :)

[xmoonlight]

FabiBoom, ага))) ну в текущий пример - добавьте иллюзию углублённых ячеек, чтобы каждая ячейка (из 25-ти) - казалась открытым кубом, а от цифр - падала тень.