Как максимально быстро разобраться с HTML, CSS, JS?
Решил научиться работать с web FrontEnd’ом. Хочу максимально быстро разобраться в этой теме. Есть какие-нибудь книги или видео уроки или статьи на этот счет? (мне не хочется читать 20 страниц по поводу того, что такое тег, или слушать пол дня в видео уроке о том, что такое переменная в JS). У меня есть опыт программирования. (С#, ASP.NET MVC).
Хочу сразу работать с нужными HTML JS CSS фреймворками (Bootstrap, jQuery). Подскажите что-нибудь в этом роде, чтобы не изучение нулевых азов, а сразу эффективные вещи. Спасибо.
Я всегда восхищался сайтом w3schools.com. Много лет назад (когда HTML4 ещё только набирал популярность) изучил по нему HTML, CSS, JS, XML, RDF, OWL, XSLT, позже этот же сайт помог мне быстро въехаться в ASP.Net. Там одновременно и не втирают элементарные вещи подолгу и не обделяют их вниманием (вдруг кто-то таки не знает). Что знаешь можно пропустить в один клик — там подача материала в формате визарда (как при инсталляции программ), кратенько и понятно по каждой атомарной теме, без принудительного прохождения каждой. В последнее время он стал чуть посложнее в плане собственной юзабилити, но и материалов добавилось. В Сети можно найти несколько сайтов-клонов w3schools с темами, которых нет на оригинале.
Профессионалом там, конечно, не станешь, но чтобы быстро въехать в тему, понять что есть что, к чему, как и где, заложить «скелет» понимания для дальнейшего обтягивания опытом и знаниями с помощью собственной практики и изысканий — ничего лучше я не видел (те же штуки типа codeschool грешат затянутостью и негибкостью, как мне кажется).
Также настоятельно рекомендую найти хороший редактор с мощным автодополнением и подсветкой. Время, когда всё имело смысл всё держать в голове прошло, как и время справочников-руководств, по сути — гораздо удобнее когда ты начинаешь писать что-то и редактор сразу тебе подсказывает какие есть варианты (со временем оно и запоминается отсюда). В этом плане я не видел ничего лучше (да и такого же, хотя бы), чем продукция JetBrains (в Вашем случае — WebStorm) и VisualStudio (с которой Вы, как я понимаю, уже знакомы), хотя знатоки рассказывают о чудесах EMACS и VIM.
Ну а дальше — рыскать по Сети в поисках интересных статей, книг, примеров.
По части JavaScript и jQuery мне не известно ничего лучше, чем творчество Антона Шевчука.
По Bootstrap я бы сам не отказался от хорошей наводки.
MagentaWAVE
Примеры и готовые решения для оформления блога и сайта. Разработка и дизайн шаблонов Blogger.
Как врубиться в CSS
В этой статье я сделал некоторые выводы о том, что нужно для того чтобы быстро понять и выучить CSS, а если выражаться точнее: овладеть навыками составления каскадных таблиц стилей. Но данная заметка, не являет собой обучающее пособие и даже не претендует на материал в этом роде, таких и так навалом, это скорее некоторые соображения сделанные из, пусть пока и не большого, но, личного опыта в веб-дизайне.
Я конечно же не могу претендовать на звание «всезнайки» в области CSS-дизайна ведь буквально, год назад я и знать-не-знал что такое верстка, веб-дизайн и уж тем более, веб-программирование. Я просто, как и многие, захотел немного преобразить свой блог — сделать его дизайн уникальным, а от нечего делать решил заняться этим самостоятельно. И вот сейчас хочу поделится своими мыслями по этому поводу.
Знать, чтобы понять
Для того чтобы понять как работает CSS, к чему его можно применять и как добиться максимального результата в дизайне страницы, нужно знать азы HTML и прежде всего понимать язык разметки веб-страницы. Эти знания необходимы чтобы грамотно применять каскадные таблицы стилей, да и просто понимать что вы вообще делаете.
Приведу простой пример. Скажем, веб-страница — это забор, CSS — краска, для покраски этого забора, а ваши знания — кисть. А теперь представим что кисти у вас-таки и нет. Приведет это лишь к одному — ваш забор будет очень хреново плохо покрашен.
То есть, в любом случаи начинать нужно именно с HTML, а не с CSS, даже если вы не верстаете сами, а пользуетесь бесплатными платформами и уже готовыми шаблонами.
Свойства CSS. Понять, чтобы выучить.
Свойств стилей много и они все разные, мало того, со временем, появляются новые. Чтобы научится правильно и эффективно использовать возможности CSS, нужно прежде всего понять принципы действия различных его свойств. Среди них есть схожие, но каждое из них отличается друг от друга и выполняет свою определенную функцию в оформлении веб-страницы. Разные задачи — разные свойства.
Конечно же строгих правил составления CSS нет, тут, как говорится — главное результат. Есть товарищи, которые так «заплетают» и превращают ненужное в «нужное», что аж страшно становится. По-этому всегда лучше начинать изучение CSS, так сказать, с «букваря», а не с «гляди как я умею», чтобы самостоятельно понять что и как работает.
Я бы сравнил это с речью — обладая маленьким словарным запасом, вы просто не сможете правильно и красиво высказать свою мысль, кроме того, не понимая значения употребляемых слов, лучше уж и вовсе не открывать рта.
А зачем мне это знать?
Этот вопрос конечно же имеет место быть, ведь в сети полно того что можно безо всякого труда взять и использовать на сайте или в блоге. Ресурсов на которых присутствуют две очень приятные фразы: «скопируйте этот код отсюда» и «вставьте этот код сюда» — полно. Однако, в этом случаи, меня лично, смущает следующее:
1 — не обладая определенными знаниями — ограниченность в действиях и зачастую не возможность самостоятельно добиться желаемого результата;
2 — рано или поздно, в мягкой или более жесткой форме, за лень и назойливость, посыл на х.. в Google;
3 — не знаешь — плати, и в этом, собственно, ничего плохого нет, ибо на кой черт кому-то ваши «геморрои», да еще и бесплатно?;
По-этому даже если вы постите на бесплатной платформе, хотя бы минимальные знания у вас быть должны, это не только избавляет от плохого настроения, но и придает уверенности.
/*
——————————————*/
Итак, из всего выше изложенного хотелось бы сделать следующий вывод:
CSS — это уже не просто «краска для забора», сегодня с помощью каскадных таблиц можно создавать простые интерактивные элементы, делать веб-страницы более яркими и динамичными и даже добавлять по средствам CSS на них некоторый функционал. И раз уж вы взялись за такое дело как ведение личного блога или даже решили завести веб-сайт, то знания в этой области вам будут только полезны. Что касается применения, то я для себя вывел такие принципы:
Начинать нужно с универсальных свойств; не нужно писать то, что писать не нужно; если можно использовать свойство с меньшим набором букв, то его нужно использовать;
Полезные ссылки
На сегодняшний день ресурсов которые пытаются рассказывать об HTML и CSS пруд-пруди, но действительно достойными внимания, что касается азов познания, я для себя считаю всего три:
htmlbook.ru — Отличный сайт для тех кто хочет действительно самостоятельно выучить и понять HTML и CSS, ничего лишнего, все очень понятно и доступно.
w3schools.com — Прекрасный образец, правда на английском, но даже для человека, который в английском не очень силен, понимание изложенного на этом ресурсе материала страдает не сильно. Что мне в нем нравится, так это страницы «Попробуйте сами» («Try it yourself»).
Как запомнить css?
Очень хочется заняться веб-приложениями, но как только доходит до css, сразу ступор, как запомнить все это. Пытаешься запоминать все, делаешь примеры, но затем, что до этого проходил, вылетает, как все запомнить?
Простой 3 комментария
зачем запоминать все это? Просто запомните для чего это:
настройка внешнего вида блоков:
— цвет, прозрачность, фон, наклон, размер блоков;
— цвет, прозрачность, закругление углов, тип и толщина границ;
— цвет, прозрачность, размер и тип шрифтов;
— изменение всего вышеперечисленного при возникновении различных событий (наведение курсора на блок и и др.)
— и многое другое, но вышеперечисленного вам вполне хватит на начальном этапе чтобы освоиться и перестать боятся css.
а далее, при возникновении надобности в изменении чего либо из вышеперечисленного, целенаправленно гуглите что-то типа «css закругленные углы». И очень скоро все запомнится само 🙂
Советую просто не торопиться при обучении. Если мозг не справляется с таким объемом информации, то этот объем надо уменьшить. Нельзя впихнуть невпихуемое. Простите за каламбур.
Не пытайся запомнить все и сразу — плохо кончишь.
Учи то, что необходимо для решения конкретной задачи. Постоянно держи шпаргалку с нужными в конкретный момент тегами, функциями и т.д. и постоянно пиши код, а не пользуйся ctrl + c / ctrl + v. Напишешь один и то-же кусок кода 10, 100, 1000 (тут все больше индивидуально) и в какой-то момент даже задумываться не будешь об этом — просто будешь на автомате писать.
На первых этапах гораздо более важно понимание, а не знание. Выучи ты хоть все существующие функций, без понимания как и что устроено — толку ноль, зато с пониманием как и что должно работать легко сможешь сориентироваться в документации и найти нужную функцию.