за сколько можно изучить html и css
Типичный верстальщик
Сколько времени нужно, чтобы научиться верстать сайты?
Всем привет. Давайте обсудим самый часто задаваемый вопрос: «Cколько времени нужно, чтобы научиться верстать сайты?»
Я приведу список, который включает в себя минимальный набор того, что нужно знать и уметь:
Изучив все это, ты уже можешь начать монетизировать свои знания.
Photoshop
Если Вы ранее не работали с приложением, то рекомендую обратиться к сайту photoshop-master.ru. Это ни в коем случае не реклама, потому что сама использовала этот ресурс и советую его всем, кто спрашивает меня, как научиться работать с этой программой.
Тебе, как будущему верстальщику, рекомендую заходить в раздел «Графика для сайта» и выбрать любой урок по душе. Искать уроки можно также по уровню сложности. Формат обучения: текст с приложенными скринами.
В свое время я изучила несколько уроков по отрисовке макетов и вот, что у меня получилось.
Ссылки на пройденные уроки:
Если захотите повторить урок, то скидывайте в комментарии, что у вас получилось!
Вообще этот сайт дал мне понять несколько вещей:
Основные комбинации, которые я использую в любом макете:
Ctrl + «-» — уменьшить масштаб
Ctrl + «+» — увеличить масштаб
Ctrl + «1» — масштаб 100%
Ctrl + J — создать дубликат слоя
Ctrl + [ — уменьшить размер кисти
Ctrl + ] — увеличить размер кисти
Ctrl + Alt + Z — шаг назад (отмена действия)
Ctrl + Shift + Z — шаг вперед (вернуть назад отменённое действие)
Ctrl + Alt + I — диалоговое окно «Размер изображения»
На это может потребоваться примерно месяц интенсивной практики, не больше. Главное показывайте свои работы друзьям или знакомым, чтобы у Вас была мотивация, что Ваши работы оценивают. Это дает дополнительный стимул к изучению.
Далее Вам необходимо научиться не только рисовать макеты, но и работать с реальными.
PSD макеты для практики вёрстки:
Если Вы не совсем понимаете, как именно работать с макетом и какие картинки необходимо сохранить перед созданием сайта, то рекомендую пройти 3-х дневный курс «Супер старт».
На этом курсе от и до показан процесс верстки вот такого сайта. Первый урок полностью посвящен работе с Photoshop и он даст ответ на все вопросы, которые возникают у новичков. Стоит такой курс 100 рублей, что равноценно стоимости чашечки кофе. После оплаты вы получаете доступ в закрытую группу, где лежат все необходимые материалы.
Отзывы о курсе можно почитать тут.
На освоение азов работы с реальными макетом потребуется не больше недели. Главное практика и Вы сами будете заранее видеть, какой объект стоит вырезать из макета, а какой — оставить на месте.
Возможно, кто-то из вас ранее слышал что-то о тегах в школе или институте, но особой ясности о них все равно нет, то рекомендую пробежаться по статье «Знакомство с HTML».
Полезно всем, кто хочет структурировать знания по всем популярным тегам, которые Вы будуте использовать практически в любом проекте. Изложено все кратко и ясно.
Второй ресурс, который порекомендует любой веб-разработчик — htmlbook.ru
Во вкладке HTML вы можете увидеть страницу Справочник HTML, в котором находятся все теги, которые используются для разметки страниц.
На изучение HTML уйдет не больше недели при интенсивном изучении.
Когда я только изучала основы создания страниц и не понимала как работает вся эта магия со стилезацией. Почему стандартная разметка HTML в тандеме с CSS можем измениться до неузнаваемости. Разобраться в этом мне помогла книга «Изучаем HTML, XHTML и CSS» — Элизабет Фримен, Эрик Фримен. 
Здесь описано всё настолько гениально просто, что начать верстать сможет даже 6-летний ребенок. Да, книга 2014 года. Да, некоторые советы утратили актуальность. Но это не мешает ей быть и оставаться must have учебником для тех, кто СОВСЕМ не знает с чего начать, но хотел бы создать свои первые веб-странички. Я была такой и у меня не было ни каких наставников и даже знакомых, кто хоть чуть-чуть разбирался в сайтах, но мне в руки попала эта замечательная книга и я бесконечно рада этому. Скачивайте, читайте, изучайте.
На освоение азов CSS по этой книге может уйти примерно месяц.
Но как я уже сказала, некоторые технологии утратили свою актуальность, поэтому Вам обязательно потребуется изучить основы Flexbox-верстки. Сделать это можно в игровой форме на этом сайте — flexboxfroggy.com
Также рекомендую держать в закладках следующую шпаргалку: yoksel.github.io/flex-cheatsheet, чтобы не забывать про свойства.
А чтобы эта статья была максимально актуальной на момент выпуска, рекомендую также поиграть в игру, которая поможет изучить CSS Grid — cssgridgarden.com Эта технология ещё не используется так широко, как Flexbox, но будущее за Grid. Поэтому не забудьте пройти игру.
Давайте немного подытожим: Вам потребуется месяц на изучение основ CSS и примерно еще 2 месяца, чтобы научиться быстро ориентироваться во всех стилях, которые используют при верстке.
Кстати на сайте htmlbook тоже есть справочник CSS по всем свойствам — htmlbook.ru/css Не забудьте заглянуть сюда.
jQuery
Возможно, кто-то удивится, почему я не говорю о Javascript, но этому есть объяснение. Сейчас мы говорим о том, какой минимум стоит знать новичкам, чтобы монетизировать свои знания. JavaScript — это большая тема, на изучение которой может уйти несколько месяцев. Зная лишь одну библиотеку Javascript, а именно jQuery — вы уже сможете делать все то, что хотел бы заказчик. Например, сделать слайдеры, анимацию или прокрутку. Знать для этого весь Javascript и писать с нуля код для старта нет нужды.
Поэтому начните с изучения jQuery.
Лучшим учебником считается — www.w3schools.com/jquery. Статьи на английском, есть уроки и весь необходимый материал.
Если потребуется сделать слайдер, то разные вариации можно найти в плагине Slick Slider — kenwheeler.github.io/slick
Но если все-таки вам интересны основы Javacript, то обязательно посетите сайт learn.javasсript.ru
На все это может уйти от месяца до двух при интенсивном изучении.
Выводы
Итак, сколько времени нужно, чтобы научиться верстать сайты? 
Чуть больше 5-ти месяцев при интенсивном и самостоятельном изучении.
Будет плюсом, если Вы найдете себе наставника, которые будет направлять и мотивировать Вас.
Второй вариант — вы можете записаться на курсы «Верстальщик от А до Я» и этот срок сократиться до 2-х месяцев. Есть 2 курса: базовый и продвинутый, каждый из которых идет по месяцу. По окончанию у Вас будут сверстанные сайты и сертификат об окончании курса. Все это позволит сформировать ваше портфолио и найти свои первые заказы. Старт обучения 12 февраля 2018 года.
Надеюсь эта статья была полезна для Вас. Главное, найти время и уделить все свое внимание процессу обучения и тогда поверьте мне, результат не заставит себя ждать. Всем пока.
Как быстро выучить HTML и CSS с нуля?
Изучение HTML и CSS – это первый шаг, который необходимо сделать, если вы хотите научиться верстать сайты или работать контент-менеджером. Это относительно простые технологии, которые можно выучить самостоятельно, после чего начать зарабатывать в интернете.
В этой статье мы расскажем, с чего лучше начать изучение HTML и CSS, что необходимо освоить в первую очередь, на каких сайтах можно найти бесплатные самоучители и справочную информацию, практические задания и тесты для проверки знаний.
Что такое HTML и CSS и зачем нужно их знать?
HTML – это язык разметки, который указывает браузерам (Google Chrome, Яндекс.Браузер и другим подобным программам), где и какие элементы выводить на странице сайта. Например, где находится заголовок, основной текст, ссылки на другие страницы, меню, списки, таблицы и так далее.
CSS – это каскадные таблицы стилей. С их помощью задают оформление различных элементов. Например, при помощи CSS можно менять цвет шрифта у текста, задавать фон страницы или отдельных элементов, красиво оформлять списки и таблицы и даже создавать интерактивные элементы (анимацию).
С чего начать самостоятельное изучение HTML?
Язык разметки HTML состоит из тегов. Условно теги – это элементы, которые указывают браузеру, что должно выводиться на странице. Например, есть теги, которые обозначают вставку картинки или фотографии, видео, таблицы. Есть теги, которые обозначают начало и завершение абзаца.
Внутри тегов могут прописываться атрибуты, в которых указываются различные характеристики. Например, внутри тега, обозначающего ссылку, указывается атрибут с адресом страницы или сайта, куда эта ссылка ведет.
Чтобы самостоятельно выучить язык HTML, необходимо:
Разные браузеры по-разному обрабатывают некоторые теги и иные команды. Если вы решили самостоятельно изучать HTML, обязательно прочитайте, что такое кроссбраузерная верстка и как ее делать.
Как видите, выучить HTML с нуля можно и самостоятельно. Примерно за неделю вы сможете изучить азы языка разметки и научиться им пользоваться на уровне, достаточном для добавления текстов на сайты, разметки таблиц, списков, вставке изображений.
Как выучить CSS с нуля?
Осваивать CSS рекомендуется после того, как вы изучили основы языка HTML. Вот что нужно узнать о каскадных таблицах стилей:
Изучить адаптивную верстку, когда макет страницы подстраивается под размеры экрана пользователя.
Дополнительно рекомендуется выучить:
Как правильно создавать структуру кода, чтобы его можно было поддерживать.
На каких сайтах можно освоить HTML и CSS?
Ниже представлены бесплатные сайты и справочники, которыми можно пользоваться при самостоятельном изучении HTML и CSS с нуля.
На курсе изучаются основные теги. Помогает получить представление о верстке и значительно упрощает обучение HTML на старте. Проходит онлайн, можно записываться из любого города.
Позиционируется, как самый современный справочник по HTML и CSS. На сайте собрано описание всех тегов и атрибутов, свойств таблиц стилей, а также примеров кода и результатов их выполнения (что будет выводиться в браузере).
На сайте собрана теория и практика по использованию CSS, трюки, хитрости и готовые решения. Сайт можно рекомендовать как новичкам, так и верстальщикам с опытом.
На сайте находятся бесплатные уроки по HTML5 и CSS, а также справочник CSS. Уроки хорошо структурированы и сопровождаются множеством примеров.
На сайте есть справочник тегов, а также бесплатные уроки по верстке страниц. Имеется демо-редактор, в котором можно добавлять различные команды и смотреть, как браузер их воспринимает и что поменяется на странице пользователя.
Один из самых популярных справочников по HTML и CSS. На сайте есть Самоучитель, а также Практикум, которые помогают ускорить обучение и сделать его проще.
Здесь собрана коллекция статей, уроков и примеров по верстке. Также есть уроки по Bootstrap.
Простой и понятный самоучитель, который подойдет для самостоятельного изучения HTML 5 и CSS с нуля.
Бесплатный онлайн-справочник. Будет полезен новичкам, которые хотят изучить основы верстки.
Онлайн-учебник по HTML и CSS. Много примеров. Подходит новичкам.
Помогают проверить свои знания по верстке и выявить пробелы. На сайте есть руководства и справочники по HTML и CSS для самостоятельного изучения.
На сайте собрано множество материалов для сайтостроителей и верстальщиков. Можно найти интересные решения для создания разных эффектов, готовые скрипты и многое другое.
Сайт консорциума W3C, на котором можно посмотреть актуальные стандарты языка разметки, а также проверить валидность своего кода в специальном Валидаторе.
Как быстро выучить HTML и CSS с нуля?
Не переживайте, если что-то не получается. Главное – не бросать начатое, тогда все обязательно получится.
Что делать дальше, освоив HTML и CSS?
Когда вы изучите язык разметки и таблицы стилей, советую учить JavaScript. Это язык программирования, который позволяет создавать различные интерактивные элементы на странице, а также использовать технологию AJAX. С ее помощью можно обновлять части страниц без перезагрузки, что значительно ускоряет взаимодействие с сайтом. Пример реализации AJAX – бесконечная загрузка новой информации в ленте новостей.
Зная разметку и JavaScript, вы сможете стать начинающим Frontend-разработчиком и получить высокооплачиваемую работу в веб-студии или выполнять заказы на фрилансе.
Как быстро освоить JavaScript, мы постараемся рассказать в следующих статьях.
Сколько учиться до первых денег?
Получается, что сейчас вы видите перед собой огромный список технологий, которые необходимо освоить. И труда на их изучение положить придётся немало.
Так, если Вы решили заняться версткой, то первые (правда, очень легкие и простые) проекты Вы можете начать брать уже через месяц. Потому что за месяц освоить HTML и CSS вполне реально. Деньги будут небольшие, но быстрые.
А вот в штат без знания JavaScript вы вряд ли попадёте. Да и на фрилансе без него ни один более или менее сложный и дорогой сайт не сверстаете. JavaScript сложнее, чем HTML и CSS, потому что это язык программирования. Но без него никуда, если вы хотите зарабатывать приличные деньги.
HTML + CSS + основы JavaScript для верстальщика реально освоить за пару месяцев обучения. Вы уже разберетесь в технологии верстки в целом, и сможете претендовать на работу в штате и/или более серьёзные проекты на фрилансе.
Выгоду от ускорения работы в 2+ раз для фрилансера посчитать несложно. А для наёмного работника знание этих технологий гарантирует прохождение собеседований со спокойной душой и непоколебимой уверенностью.
Таков путь верстальщика.
Альтернативная реальность или на пути программирования
С программированием ситуация немного другая, здесь учиться придётся дольше. С момента начала обучения до становления профессионала обычно проходит около полугода.
Это и неудивительно: нужно освоить процедурное программирование на PHP, объектно-ориентированное программирование, изучить какую-нибудь CMS, какой-нибудь фреймворк (а лучше несколько) и разобраться с MySQL. А в идеале ещё освоить Git и основы Linux.
Нет, у нас, конечно, были примеры, когда ребята после двух месяцев изучения PHP устраивались на работу junior-ами или поднимали первые деньги на фрилансе, но это скорее исключение, чем правило. Для этого нужны здоровая наглость и самоуверенность 🙂
Именно поэтому многие программисты начинают с верстки – учиться и параллельно зарабатывать намного выгоднее. За 2-3 месяца осваиваете вёрстку, работаете, получаете деньги и параллельно изучаете программирование. На выходе, спустя год, вы становитесь уверенными fullstack разработчиками с зарплатами по меркам Москвы больше 100 тысяч.
Мы знаем, что у многих из вас, когда вы видите полугодовые обучающие курсы, возникнет вопрос, а стоит ли их оплачивать, окупятся ли они и т.п. Сомнения понятные и правильные. А теперь представьте, насколько приятнее оплачивать обучение программированию теми деньгами, которые вы заработали на вёрстке.
Поэтому мы всем рекомендуем начать с вёрстки. Темы проще, первые деньги ближе.
Стоит ли учить html, css,js в 2021?
Простой 1 комментарий
Стоит ли учить html, css,js в 2021
Просто актуальной инфы так мало по этому, а я вылез из 2015 года.
У вас странные вопросы. HTML + CSS + JS это костяк всего веба который в принципе не заменим.
Если же ваш бизнес уровня средний и выше среднего, вы не сможете насколько хорошо оптимизировать, масштабировать свой проект, что бы он покрывал все запросы. В этом случае на помощь уже приходят специалисты уровня «фронтендер + бэкэндер + тимлид + PM» и каждый решают свою задачу.
И, да, успехов с WordPress’ом с кучей плагинов на все случаи жизни!
ДААААЛЕКОООО не все существует.
Как только вам нарисуют дизайн-макет «этакий» и не будет плагинов под него, тогда то вы вспомните чего не хватает для реализации.
Интернет держится на html/css/js/php. Это база без которой вообще нихрена работать не будет))
И да, ваши плагины на них и пишутся.
Может быть для людей готовых отдавать тонны денег за сайты и держится на этом инет
Ни один уважающий себя и «взрослый» проект не допустит чтобы он висел на каком-то билдере, а будет делаться с нуля ручками. Даже на ВП. А еще мы живем при капитализме и в эру IT. Так что да, интернет держится на больших деньгах, а не жмотах. Ах да, время разработчиков тоже денег стоит. А время конструкторщиков не стоит ничего.
html/css при хорошей нагрузке обучения, учится менее чем за год.
Сотни историй когда люди при реальной учебе выходили норм верстаками через 3-4 месяца (Фотошоп дольше осваивается).
Все видоизменяется, но ничто и никогда не заменит человека. AI никогда не сможет мыслить как человек.
Есть такие хитросплетения и решения, что ты и через 10 лет не автоматизируешь их создание.
Люди с головой стоили дорого что 50 лет назад, что сейчас. И еще через 50 тоже будут.
Ну то есть вы все говорите о том, что вордпрес это плохо в принципе?
Как проще и быстрее выучить HTML и CSS
На самом деле при желании выучить и начать применять HTML и CSS можно за день-два. Стоит только грамотно подойти к процессу обучения и выбрать правильный источник информации.
В этой статье я хочу дать несколько советов тем кто решил пополнить свой багаж знаний и перейти грань визуального создания сайтов и заглянуть хоть немного под капат и узнать что и как работает.
Да WordPress нас балует и позволяет создавать простые проекты без знаний языков программирования.
Хотя языки HTML и CSS врядли можно назвать программными, это скорей всего языки гипер-текстовой разметки, но тем не менее они лежат в основе всего что мы видим в Интернете.
Я не буду Вас агитировать купить тот или иной супер-курс или тренинг. Нет я дам лишб несколько советов как лучше учить HTML и CSS и как добиться результатов.
Кроме этого я этой статьей открою новый раздел на Info-m в котором буду публиковать полезности по верстке, дизайну и другим фичам.
Итак поехали, с чего стоит начать?
1. Я думаю сначала стоит установить удобный и комфортный редактор для кода. Одним из лидеров на данный момент является VSC или Visual Studio Code от Microsoft
Я рекомендую качать редактор с оф. сайта и вот ссылка на скачивание.
Как установить нужный язык, я думаю найдете инструкции в сети их более чем достаточно. VSC гибко настраиваемы и расширяемый. Уже написаны тысячи расширений. Но я думаю Вам в начале будет и коробочной версии.
Тем кто захочет поизголяться о настроить редактор под себя вот видео, оно не мое, но мне лень снимать а Алексей (автор ролика) ну очень классно все объяснил и показал.
Начиная с этого поста я решил, что стоит публиковать чужие видео на своем сайте, тем более если это качественные ролики профессионалов.
Как изучать HTML и CSS, где брать информацию?
Просто тупо читая или наблюдая на экране Вы врядли что либо усвоите. Чтоб получить результат нужно выполнять задания и получать практику.
Ниже я приведу ряд источников и к каждому приложу краткое резюме.
Крутой ресурс для кто начинает совсем с нуля.
Бесплатно регистрируетесь и в интерактивной, игровой форме проходите сначала входящий курс, потом сложнее и так далее. Курсы в основном там все бесплатные, есть интерактивная проверка заданий. Вобщем рекомендую для старта новичкам самое то.
Одно время думал завести себе там аккаунт для того чтоб вести своих подписчиков, но как обычно времени не хватает))
2. Видеокурсы.
Сначала я хотел выложить целый список бесплатных кусов, но к сожалению почти все они устарели а авторы не утруждают себя обновлением. Да, с переходом на HTML5 многое изменилось.
Курс Михаила Русакова, довольно содержательный и что хорошо он так же с домашними заданиями.
Бесплатный курс по HTML и CSS
Больше 6-ти часов уроков + упражнения
Я даже планировал разместить все уроки этого курса на своем сайте с разбором ДЗ, если интересно пишите в комментариях.
Онлайн-тренинги!
Пожалуй один из самых подуктивных методов обучения. Отлично кода ты сначала смотришь видео, потом тебе дают задание и после еще и проверяют.
Я дам ссылки на два, один бесплатный и второй за символическую плату, но с классными наставниками.
Я не участвую в партнерках этих ресурсов просто рекомендую как хорошие источники знаний.
Есть конечно задержки с проверкой, но ведь нужно понимать что проект бесплатный и Артем не может сидеть и «пасти» каждый комментарий.
Но тем не менее курс достаточно объемный, целых 55 видео, так что есть с чем поработать.
Он платный, стоит, по моему 9 долларов. Но эти деньги вы платите за помощь наставника который проверяет Ваши ТЗ и ведет Вас.
Всего в курсе объемных 7 уроков, но уже к концу тренинга Вы сможете написать свой первы сайт на чистом HTML с CSS и даже поймете как работаю простые команды в JS.
Я даю ссылку, она не партнерская, Wayup до сих пор «жлобствует» и никак не подключит партнерскую программу.
Но курс действительно хороший и рабочий, поэтому я его смело рекомендую новичкам.
Вот пожалуй и все что хотел Вам сегодня рассказать.
В конце еще пара советов как лучше изучать и что делать дальше.