Вопрос: Опишите себя в начале пути?
Ответ: В начале пути у меня было огромное желание сменить основную профессию на более интересный и денежный род занятий .
Вопрос: Опишите себя сейчас?
Ответ: Сейчас у меня этой решимости только прибавились. Имея за плечами больше 20 лет педагогического стажа, поняла, что это совсем не то, чем мне хочется заниматься сейчас и в дальнейшем. Совсем уходить из преподавания мне бы не хотелось. Идеальный вариант: остаться работать на 0,25 ставки, а остальное время заниматься разработкой сайтов на заказ. Тем более сейчас, когда уровень знаний значительно вырос по сравнению с началом пути.
Вопрос: Какие мысли у Вас возникли?
Ответ: Очень крутой проект. Нужно познакомиться с ним поближе. Обязательно воспользоваться материалами вашего проекта.
Вопрос: Что Вам понравилось?
Ответ: Понравилось качество курсов, их оформление, профессионализм авторов не вызывает сомнений .
Вопрос: Какие у Вас были ощущения?
Ответ: Полный восторг от процесса изучения.
Вопрос:
Ответ: Курсы помогли систематизировать разрозненные знания, и появилась уверенность, что у меня все получится .
Мне вас посоветовал мой хороший знакомый, который уже был на тот момент вашим клиентом
Вопрос: Жизненный опыт?
Ответ: Так уж получилось, что я пошёл учиться по специальности программиста практически случайно (это была вторая специальность по приоритетам). После обучения посчастливилось сразу устроиться программистом 1С, в итоге я задержался в этой сфере на целых 5 лет.
В итоге, когда в этом стало совсем скучно ковыряться, решил кардинально сменить профиль деятельности и стал ассистентом режиссера на региональном ТВ.
В перерывах между монтажом ТВ-программ решил начать самостоятельно изучать PHP, к тому же, в этот момент у меня появился курс по PHP от Webformyself - собственно, это и дало толчок к возвращению в профессию программиста, но уже с уклоном только на веб.
Первым коммерческим опытом веб-разработки был проект, который я разрабатывал на Joomla, это было долгое, трудное, малоденежное занятие, но я выдержал этот период, набрался опыта и начал понимать, как работать на результат, и как общаться непосредственно с заказчиком. Далее был самостоятельный опыт разработки пары магазинов на Joomla+Virtuemart, знания и решения черпались непосредственно с курса «Интернет-магазин на Joomla» (https://сайт/jshop/).
Затем в жизни случился крутой поворот, я заключил первый полноценный контракт с IT-компанией. После налаживания всех внутренних процессов и понимания стратегии компании, у меня появилось время для дальнейшего саморазвития в области веб-разработчика..
Вопрос:
Ответ: В этом плане сомнения были минимальными, и только в одном - насколько быстро окупятся потраченные средства. А в том, что они окупятся, была полная уверенность.
Вопрос: Назовите самые значимые для Вас убеждения и ценности в жизни в целом и веб-разработке в частности?
Ответ: Главное в жизни - это любовь. Что касается веб-разработки - постоянное развитие и принятие новых вызовов.
Вопрос:
Ответ: Была основная проблема: так как я был полным новичком в мире веб-разработки - у меня не было четкого структурированного плана о том, с чего начать, и в каком направлении действовать. После приобретения курса по PHP я узнал все основы этого языка, как строить приложения, и от этого уже появилось понимание и видение, как и куда это все развивать.
Вопрос: Каких успехов Вы достигли?
Ответ: Моя разработка стала более быстрой и качественной, я овладел несколькими технологиями, избавился от походов в офис, да и вообще профессия веб-разработчика позволяет мне зарабатывать в комфортных для меня условиях и в удобное время.
Вопрос: Какие перемены к лучшему произошли в жизни?
Ответ: Семья, дети, путешествия и мое хобби перешло в основную деятельность, которым я зарабатываю (это я про веб-разработку).
Унгер Олег
Я востребован на рынке труда, несмотря на возраст, у меня появилось четкое понимание, в каком направлении мне дальше двигаться
Вопрос: Жизненный опыт?
Ответ: После школы поступал на программиста, но баллов не хватило. Учился на инженера-электронщика. Работал в разных сферах, в основном - на производстве. Та сфера, которая раньше приносила неплохой доход - перекочевала в Китай, работу стало сложно найти, да и надоело уже.
Вопрос: Опишите себя в начале пути?
Ответ: В начале пути я очень сомневался, стоит ли начинать. Меня очень мотивировал пример моего друга, который также начал с нуля и менее чем через год устроился на нормально оплачиваемую работу.
Вопрос: Опишите себя сейчас?
Ответ: Прошло почти три года, я уже обладаю определенными знаниями и постоянно получаю новые благодаря курсам от WebForMySelf.
Вопрос: Как Вы узнали о наших курсах?
Ответ: Стал искать, что же это за школа или курсы какие, где так хорошо и подробно все объясняют. Нашел на YouTube, и далее поиски привели на сайт Webformyself.
Вопрос: Что впервые подумали, когда узнали о нашем проекте?
Ответ: Подумал, как хорошо, что столько информации есть в одном месте.
Вопрос: Вы испытывали какие-то сомнения?
Ответ: Честно говоря, сомнения были. Но я подписался на Премиум клуб. И я многому научился по видео: PHP, JavaScript, регулярные выражения, курс по объектно-ориентированному программированию (ООП PHP) и пр.
Вопрос: Что Вам понравилось?
Ответ: Мне очень понравилось, что бонусом к курсу шли другие курсы и видео из премиум доступа . И так удачно было, что мне не пришлось выбирать между Yii2 и Laravel, потому что они шли в комплекте.
Вопрос:
Ответ: Мне пришлось бы потратить много времени на поиски более-менее структурированной информации по нужным темам.
Вопрос: Каких успехов Вы достигли?
Ответ: Как-то незаметно для себя, стал разбираться в том, что раньше казалось недоступным для понимания. На данный момент почти год работаю программистом (Yii, MS SQL Server, JavaScript), участвую в разработке нового функционала и сопровождении проекта CRM в организации, занимающейся системами безопасности, автоматики и связи.
Вопрос:
Ответ: Чувствую себя уверенно, оптимистично. Планирую и дальше повышать свой профессиональный уровень.
Вопрос: Какие перемены к лучшему произошли в жизни?
Ответ: Перемены к лучшему: я востребован на рынке труда, несмотря на возраст, у меня появилось четкое понимание, в каком направлении мне дальше двигаться. Будущее уже не такое туманное и пугающее, как раньше.
Я никогда не жалел денег на самообразование, а отговорки типа «поздно начинать» или «я не смогу», для меня не приемлемы
Вопрос: Опишите себя в начале пути?
Ответ: В начале пути для меня веб-программирование было «темным лесом», где было страшно и неуютно, но жажда знаний заставила двигаться вперед , да, на Делфи мне приходилось писать парсеры, были написаны Ebay снайпер, программа для участия на тендерах. На данный момент я понимаю, что написать подобное лучше на PHP (не нужно «придумывать велосипед» с библиотекой Synapse).
Вопрос: Что Вы скажете по поводу возражений, с которыми Вы, возможно, сталкивались перед покупкой информационных продуктов, как преодолевали данные возражения (нет денег; у меня не получится; слишком поздно начинать; слишком рано начинать; родственники против; слишком сложно; возможно, какие-либо Ваши возражения)?
Ответ: Я никогда не жалел денег на самообразование, а отговорки типа «поздно начинать» или «я не смогу», для меня не приемлемы - дорогу осилит идущий.
Вопрос: Какую проблему Вы пытались решить, какие проблемы испытывали до приобретения курса?
Ответ: Главной проблемой до приобретения курсов был мой нулевой уровень знаний. Да, конечно, можно на ютубе смотреть кучу бесплатных роликов, тут ты не потратишь денег, но зато потратишь самое ценное - время. На ютуб большинство роликов содержат кучу воды, так как авторы стараются сделать видео максимально длинным, чтобы заработать на рекламе.
Вопрос: О чем Вы думали в начале пути?
Ответ: Нашел через интернет, на тот момент нужно было срочно сделать сайт-галерею, и я приобрел первый курс по верстке. Тот проект я благополучно завалил - не хватало знаний. Сверстать макет я смог, прикрутил даже JQuery, а дальше мои знания закончились, нужна была админка, нужно было хранить где-то данные. Тут произошло мое знакомство с паттерном MVC и желание освоить PHP (с MySQL проблем не было, так как по роду своей деятельности я хорошо знаком с SQL, часто приходится вытаскивать данные из БД в разрезе складов, контрагентов и т.д.).
Вопрос: Какие изменения стали происходить, когда Вы узнали о курсах?
Ответ: Когда я узнал о курсах, изменений никаких не происходило, я просто приобрел сначала один курс и начал изучать, потом второй…. изменения стали происходить во время изучения материала, и эти изменения однозначно в лучшую сторону.
Вопрос: Что могло бы случиться, если бы Вы не смогли решить свои проблемы, если бы Вы не воспользовались нашими продуктами?
Ответ: Вряд ли бы что-то серьезное случилось, веб-разработка - это мое хобби, я не беру денег за это, и берусь лишь за то, что мне действительно интересно. Ну, а что касается именно Ваших продуктов, именно они направляли меня в мире веб-разработки, так как в начале пути я был подобен слепому котенку, мои знания были нулевыми, и я не знал, куда идти, и что делать. Я считаю, в начале пути просто необходим наставник, указывающий тебе путь, и этим наставником для меня как раз и стали Ваши курсы. Да, не все сразу получилось, но главное - не сдаваться.
Вопрос: Каких успехов Вы достигли?
Ответ: Каких успехов добился? Буквально за 2 недели написал сайт для сервисных центров Huawei в Казахстане , сейчас этот сайт уже не действует, так как Huawei интегрировали внесение заявок в свою систему. Писал сайт для транспортной компании с возможностью отследить расположение груза онлайн , сайт интернет-магазина, сайт для сестры - она практикующий психолог. Особо-то и хвастаться нечем, это для меня прежде всего хобби.
Вопрос: Как Вы себя чувствуете? О чем думаете? Какие планы?
Ответ: Планы на будущие, наверное, не останавливаться на достигнутом и продолжить изучение новых технологий в веб-разработке. Возможно, попробую себя в мобильных приложениях, если будет хватать времени.
Мне очень нравятся курсы и уроки Андрея Кудлая. Как по мне, так он просто волшебник в вебе
Вопрос: Жизненный опыт?
Ответ: Начиналось все с верстки, постигал все азы с нуля, начинал брать несложные заказы на фрилансе. Далее познакомился с Joomla, но как-то не срослось с ней, не знаю, почему. Наткнулся на Wordpress - и тут мы нашли друг друга. Начал тщательно изучать эту CMS и плотно с ней работать. Изучил бесплатный курс от WFM по созданию темы с нуля, решил купить сразу курс WordPress-Профессионал - так как там был бонусом еще и курс по PHP, который мне очень нужен был тогда. В процессе изучения пришло понимание, что не все так сложно, как кажется, понемногу начал брать заказы и на создание тем для WordPress. Сейчас на фриланс биржи не заглядываю даже, есть свои постоянные заказчики. Основной профиль - создание тем для Wordpress с нуля.
Вопрос: Опишите себя в начале пути?
Ответ: В начале пути были сомнения - а есть ли деньги в интернете, на фрилансе. Честно говоря, стартовать было непросто - с небольшим опытом и «не толстым» портфолио долго приходилось искать заказчиков. Вообще для себя вывел некую формулу - сначала все всегда кажется страшным, непонятным, невыполнимым, но достаточно разбить большую задачу на этапы и начать делать - как все начинает получаться, складываться. Нужно только не бояться и делать - решение найдется всегда.
Вопрос: Опишите себя сейчас?
Ответ: Сейчас мой основной профиль - это создание тем для WordPress с нуля. На фриланс биржи не заглядываю, есть заказчики и поток постоянной интересной работы. Точно знаю, что заработать в вебе можно. Есть желание расширить свои знания в области PHP, поэтому купил курс PHP мастер от команды WFM от Андрея Кудлая. Его курсы и уроки мне очень нравятся - у него получается прекрасно объяснять материал. Помимо этого, его курсы/уроки мне очень интересно смотреть, они для меня не скучные, что ли. Не знаю, как это объяснить корректно, но на своем пути я встречал много уроков, при просмотре которых хотелось засыпать).
Вопрос: В какой момент Вы решили купить курсы?
Ответ: Понимал, что для дальнейшего роста мне необходим новый набор структурированных знаний. Искал курсы/уроки для себя. На тот момент, в рунете я не видел конкурентов WFM в курсах по WordPress. Вообще я всегда нахожусь в поиске нужных мне качественных материалов для развития.
Вопрос : Что Вам понравилось?
Ответ: Мне очень нравятся курсы и уроки Андрея Кудлая. Как по мне, так он просто волшебник в вебе). Стоит отметить его прекрасный навык в объяснении сложной информации.
Вопрос: Каких успехов Вы достигли?
Ответ: Нашел работу, которая мне очень нравится. Нашел много интересных людей вокруг себя. Получил знания и навыки, которые я могу сейчас свободно продавать. Есть уверенность в завтрашнем дне. Фриланс для меня - это свобода и возможность развиваться, строить себя.
Раньше эти технологии мне казались заоблачными
Начинал я с того, что для начала просто слушал. А затем пытался создать даже не сайт. А простенькую страничку. Изменяя её при помощи медиа запросов. Это мне удалось.
Абсолютно не знал, что такое адаптивная вёрстка, всё это мне казалось тёмным лесом. За сайты для мобильных устройств сейчас хорошо платят. В среднем адаптивный сайт стоит у нас в городе 15 000 - 20 000 рублей. Желание научиться делать такие сайты и способствовало приобретению курса.
Я твёрдо понял принципы адаптивной вёрстки. Суть её состоит в медиа запросах. При помощи медиа запросов можно задавать например максимальную или минимальную ширину страницы. И для этого размера прописывать свойства. Цвет текста, его размер, расположение блоков на ней, различные футеры и хедеры для различных размеров страниц если это рисунок.
Что мне запомнилось больше всего из курса? Дотошность, я бы сказал занудливость Андрея:-) Сначала это раздражало, а затем наоборот понравилось. И сам принцип подачи материала. Сначала мы верстаем сайт. Его идеология вёрстки через блоки. А затем начинаем его адаптировать при помощи медиа запросов.
Хочу зарабатывать на вёрстке адаптивных сайтов до 50 000 рублей в месяц:-)
Ещё мне понравилось бесплатный бонус к этому курсу в виде уроков по CSS3. Раньше эти технологии мне казались заоблачными. Теперь же после прохождения этих уроков. Я запросто могу заставить картинку или вращаться или сделать так, чтобы при наведении мышки она перемещалась. Всё это мне стало доступно после прохождения уроков по CSS3.
...И перед тем как сдаться я увидела в ютюбе ролик от Автора команды WebForMyself. Посмотрела один, второй и не смогла оторваться
Привет, меня зовут Юлия Ритфелд, я фронт энд разработчик в Министерстве Юстиции в Нидерландах.
Я очень сомневалась купить ли мне курс о Ларавел. Я уже 5 лет работаю верстальщицей и графическим дизайнером и мне всегда казалось, что php (и другие языки бэкенд) - это удел супер умных программистов. Но в какой-то момент мой начальник сказал, что мне надо тоже выучить пхп, а именно Ларавел, чтобы помочь в разработке аппликаций. Я очень долго сомневалась потяну ли такую сложную теорию. Как я как креативный человек смогу ли строить сложные вещи, да еще и в пхп?
Стоит ли инвестировать столько времени и средств?
Я посмотрела курс о Ларавел на lynda.com. Потом купила несколько курсов об этом фреймворке на Udemy.com. Потом были курсы на pluralsight.com. Все было сложно. И даже не в языке дело, на английском я учусь и работаю уже 2 десятка лет. И перед тем как сдаться я увидела в ютюбе ролик Виктора. Посмотрела один, второй и не смогла оторваться.
Но пойдя на данный момент уже 19 из 39 уроков (50%) теоретической части курса о Ларавел хочу сказать с полной уверенностью, что все мои страхи были напрасны. Виктор просто предугадывает мои вопросы и мысли типа ‘а что если..’. Видео записаны в отличном качестве и картинки на которых он объясняет о том, что такое, например, Middleware для меня как визуального человека просто спасение.
С уважением и признанием,
Юлия Рифтелд
Я узнала что такое вёрстка, виртуальный сервер, база данных, язык PHP и т.д. и я знаю как с этим работать
Я узнала что такое вёрстка, виртуальный сервер, база данных, язык PHP и т.д. и я знаю как с этим работать. Я знаю, как находить свои ошибки или опечатки, как написать движок под свои нужды, как его можно изменить, модернизировать.
Больше всего, помимо качественной подачи материала, мне нравится стиль подачи. Т.к. всё же мы изучаем материалы самостоятельно, то многие моменты приходится пересматривать несколько раз. Мне нравится что в курсе чёткая структура уроков, я сразу знаю какой урок мне необходимо повторить, чтобы уточнить какой-либо вопрос. Я изучаю записи по нескольку часов и не устаю от прослушивания: голос у авторов курса приятный, спокойный, не торопливый. Это очень важно для меня.
Очень хочу, чтобы мой отзыв помог многим людям, которые находятся в поиске себя, выбирают новое направление деятельности или просто выбирают курс для повышения квалификации.
От автора: привет, друзья! Как и люди, сайты имеют свой скелет, который можно увидеть в их коде. Обычный пользователь, «гуляя» по просторам Интернета, вряд ли будет заглядывать в HTML-код. Но только не верстальщики - им всегда интересно посмотреть на чужую работу. Создание аккуратного, сбалансированного и работающего во всех браузерах кода - это своего рода искусство. Сегодня мы поговорим с вами о том, как его постигнуть, или, иными словами, как быстро и эффективно научиться верстке веб-страниц.
С чего начинается верстка?
Верстка сайта - это описание программным кодом его визуальной составляющей. При этом сайт должен выглядеть и работать корректно на любом браузере (быть кросс-браузерным). Обучение верстке сайтов с нуля должно начинаться с самостоятельного создания PSD-макета, несмотря на то, что его, по идее, должен создавать веб-дизайнер.
Основная задача верстальщика - это обработка материала, который поступает к нему в виде текстов, изображений, каталогов и т. д., и превращение его в веб-страницы на основании утвержденного веб-дизайна.
Однако, представьте, что вы этакий верстальщик «2-в-одном», и вам по какой-то причине пришлось верстать макет вместо дизайнера, которому глубоко плевать на ваши проблемы.
Для того чтобы быстро научиться рисовать макеты, как бы банально это ни звучало, вам нужно просто много их рисовать. Вам также сильно поможет бесконечный просмотр чужих работ. При этом обращайте внимание на все мелкие детали, на то, какие используются цвета, градиенты, шрифты, отступы и т. д.
Со временем вы сами начнете чувствовать, что выглядит красиво, а что нет. В самом начале же вы можете просто брать и срисовывать, например, чужие элементы интерфейсов. Это заставит вас задуматься о том, как строятся эти самые элементы и из чего они состоят. И тогда красивые дизайны перестанут быть для вас чем-то мифическим, потому что вы будете знать, как создать что-то похожее.
Инструменты для создания макета сайта
Что касается инструментов, то многие веб-дизайнеры для создания интерфейсов используют Adobe Photoshop. С помощью этой программы можно сделать все, что угодно.
Есть люди, которые работают только с векторной графикой и используют для создания макетов Adobe Illustrator.
И еще один редактор, который я не пробовал, но который, по слухам, представляет вполне достойную альтернативу вышеперечисленным, - это Sketch, но он работает только под Mac OS.
Знакомимся - HTML
Следующим шагом после отрисовки макета является его верстка и создание HTML-шаблона. HTML - это язык, который используется для разметки документов в Интернете и интерпретируется браузерами для удобного отображения в виде документа.
С помощью HTML-разметки мы отмечаем, где на веб-странице будет показан текст, изображения, кнопки, и в каком порядке они будут следовать друг за другом. Основными понятиями в этом языке являются тэги, атрибуты, элементы и сущности.
Самый элементарный веб-ресурс - это не более чем набор HTML-страничек. Если сайт статический, то после верстки вы фактически получите его окончательную версию, а не просто шаблон. Сейчас такие сайты, естественно, являются большой редкостью. Все современные веб-странички генерируются динамически, при помощи некой серверной логики, которую вы либо напишете сами, либо будете использовать готовую с помощью какой-либо CMS (системы управления содержимым).
Без этой серверной логики были бы невозможны большинство онлайн-сервисов, которые мы используем каждый день и к которым так привыкли. Что касается HTML, то это совершенно несложный язык.
В Рунете существует огромное количество и платных уроков по верстке сайтов, и других материалов с достойной базой обучения. По моему мнению, выучить этот язык самостоятельно вообще не является проблемой.
Совершенствуемся - CSS
Как только вы освоите основы HTML, можете сразу приступать к изучению CSS (каскадных таблиц стилей), которые позволяют задавать шрифты, цвета, расположение отдельных блоков сайта.
По CSS я могу посоветовать неплохой , который поможет вам построить карьеру верстальщика даже в том случае, если вы вообще не обладаете базовыми знаниями по вопросам веб-дизайна и верстки.
Однако, хочу вас предупредить, что обучение на верстальщика сайтов - это не такая уж простая задача. В верстке есть множество тонкостей и нюансов. Вообще, для того чтобы вы могли взглянуть на макет и сразу представить себе иерархию его элементов, как именно их можно сверстать и при помощи каких свойств, - для всего этого нужно много практического опыта.
Обязательно ли учить все тэги, атрибуты и свойства HTML/CSS?
В HTML много разных тэгов и атрибутов, а в CSS - свойств, которые могут иметь различные значения. Поэтому многих новичков волнует вопрос: с чего начать верстку сайта и нужно ли заучивать наизусть все эти значения, тэги и свойства?
Конечно, если вы обладаете уникальной фотографической памятью, то вам не составит труда выучить все это, а заодно, и три тома «Войны и мира», наизусть. В противном случае заучивать все эти слова не нужно.
Вначале, когда вы только будете знакомиться с CSS, то все равно будете смотреть, что делает каждое свойство и каждое значение этого свойства. Со временем к вам придет понимание, что можно творить с помощью каскадных таблиц стилей, и что-то из этих свойств/значений и так отложится у вас в голове. Ну если вы, конечно, не страдаете амнезией
То же самое касается любых языков, включая JavaScript, PHP и т. д. Все, что вы часто используете, запомнится само по себе. Все, что вы редко используете, вы сможете подсмотреть в справочнике, коих в сети великое множество. В этом нет ничего постыдного и, скажу вам по секрету, все веб-мастера это делают.
Упрощаем процесс верстки
Для тех случаев, когда вам нужно быстро создать какой-то интерфейс или прототип какого-либо сайта, существуют CSS-фреймворки, такие как Bootstrap. Он позволяет стать веб-мастером, веб-программистом и верстальщиком в одном лице без знания таблиц стилей, языков программирования и гипертекстовой разметки.
Когда вы хорошо освоите CSS и начнете верстать что-то свое, уникальное, вам может перестать хватать гибкости этого языка, и вы захотите использовать какой-нибудь CSS-препроцессор. Препроцессоры убирают из кода CSS весь мусор, делают его более чистым и логичным, увеличивают степень абстракции при помощи переменных и прочих «фишек». Наиболее популярными препроцессорами считаются LESS, Sass и Stylus.
Высший пилотаж - JavaScript
Изучая более серьезные уроки верстки сайтов, вы встретите включенные в HTML элементы JavaScript, которые делают веб-страницы интерактивными. Если вы планируете заниматься не только Back-end, но и Front-end разработкой, то JavaScript нужно знать на очень хорошем уровне.
Помимо самого языка, вам нужно знать всю инфраструктуру, которая существует вокруг него (библиотеки, фреймворки, браузерные интерфейсы и т. д). На освоение всех этих элементов у вас может уйти от одного года и до бесконечности (в зависимости от того, есть ли у вас личная жизнь ).
Подведем итоги
Итак, как вы уже, надеюсь, поняли, верстальщик - это очень важная и древняя Интернет-профессия, от которой зависит:
скорость загрузки сайта;
адекватность его отображения в различных браузерах;
адаптивность под различные пользовательские экраны;
соответствие HTML-стандартам и требованиям поисковиков.
Пока что все. Не забудьте подписаться на новости нашего блога, дабы не пропустить все самое интересное по обучению верстке сайтов с нуля.
До новых встреч, уважаемые коллеги и те, кто только вступает на эту нелегкую, но очень увлекательную тропу веб-разработки!
Приветствую всех, кому еще интересны эти статьи, и вообще этот блог в целом:) Так получилось, что я очень долго не писал. Оправдываться сейчас не буду, для этого я чуть позже выделю отдельную статью. А сейчас по многочисленным просьбам «CSS с нуля: первая лекция».Давайте для начала расскажу, что предстоит Вам узнать из этой лекции: «что такое CSS?», «для чего он нужен?», «как его использовать?».
Что такое CSS?
CSS — это язык стилей, отвечающий за отображение элементов, причем не только в html-документе (например, CSS используется при определении свойств элементов в Qt). Помните лекции ? Так вот, если Вы выучите CSS на должном уровне, у Вас полностью пропадет надобность в использовании дополнительных атрибутов для элементов. Кстати, раз уж Вы решили учить CSS, неплохо бы знать, что это аббревиатура, и расшифровывается она как Cascading Style Sheets . CSS является неотъемлемой частью блочной верстки, о которой я упоминал в последней лекции HTML с нуля.
Для чего служит CSS?
Служит CSS для придания индивидуальности странице, ну, или если говорить глобально, то сайту. CSS помогает оптимизировать структуру сайта, уменьшить вес страниц, а также облегчит изменение внешнего вида сайта (все доводы и факты этого приведу в следующей лекции).
Как использовать CSS?
В топе странные запросы: «Как установить CSS?» , «Как создать CSS?» , расслабьтесь, CSS создали и без нас, а устанавливать ничего не придется 🙂 Все проще чем может показаться. Берем простую HTML страницу:
Все проще, чем могло показаться, правда? А все потому, что CSS интегрирован во все современные браузеры. CSS очень простой и наглядный, что позволяет быстро привыкнуть к нему и влюбиться 🙂
Песочница
Леонид Якубович 26 мая 2015 в 11:18Обучение HTML/CSS/JS
- CSS ,
- HTML ,
- JavaScript
Youtube
- www.youtube.com/user/agragregra - очень интересный канал, который поможет вам набить руку по созданию сайтов различной сложности с нуля;
- www.youtube.com/user/ArtSorax - много полезного материала для начинающих.Упор делается на CSS и JS;
- www.youtube.com/user/WebMagistersRu - с этого канала лично я начала знакомство со средой веб-разработки. Все рассказано доступным и понятным языком, основа основ, так сказать.
- www.youtube.com/user/loftblog - команда LoftBlog берет интервью у начинающих и состоявшихся IT-специалистов и разработчиков, а так же проводят видео обучение;
- www.youtube.com/user/TheSWAT727 - видеоканал содержит в себе информацию и обучающие материалы по Web-разработке в целом, охватываю Front-end, Back-end, обзоры текстовых редакторов и прочую полезную информацию для начинающих разработчиков и дизайнеров.
Интернет-ресурсы
- htmlbook.ru - святыня для начинающих специалистов. Данный ресурс содержит огромное количество информации в доступной и понятной форме + форум. Именно с этого я советую начинать знакомство с HTML/CSS;
- webdesign-master.ru - познавательный сайт для более глубокого ознакомления с web-дизайном и версткой;
- learn.javascript.ru - название сайта говорит само за себя. Советую начать обучение после ознакомления с основами HTML5/CSS3.
Сервисы
- www.codecademy.com - англоязычный сервис, где можно проверить свои знания на практике. Все интуитивно понятно, глубокие познания английского языка не потребуются;
- htmlacademy.ru - русскоязычный сервис, где упор идет на практику + немного теории. Очень интересный ресурс, курсы и задания;
- jsfiddle.net - так сказать «песочница» для web-разработчиков. Здесь в режиме онлайн можно код и тут же смотреть результат. Сервис будет вам помощником по указанию ошибок;
- validator.w3.org - здесь можно проверить свой кода на валидность, что бы исправить свои ошибки или недочеты кода HTML;
- jigsaw.w3.org/css-validator - аналогичный сервис, предназначенный для проверки на валидность CSS кода.
Итог
В интернете очень много полезной, правильной и нужной информации, но бесполезной больше. Учитесь, практикуйтесь, пишите код.
Теги: Обучение, материал, сайты, разработка сайтов
Вполне стабилен, поэтому не удивительно, что растет и количество желающих освоить данное ремесло. К тому же, как по мне, это один из самых простых «путей попадания в ИТ». Хотя важно понимать, что для хорошей отдачи вы должны стать профи — кроме наличия знаний надо постоянно систематизировать и модернизировать свои навыки, всегда быть «на волне» и использовать только актуальные современные методы.
Как и в любой другой профессии, начинается обучение верстке сайтов с нуля — с базовых понятий и теории. Об них сегодня и поговорим. В частности рассмотрю супер полезный сервис Interneting is Hard , который на 100% советую всем новичками.
Не знаю есть ли подобные направления в современных вузах, но думаю, прерогативой в данной сфере пользуются специализированные онлайн курсы или самостоятельное изучение верстки. Первый метод предлагает более комплексный и серьезный подход, зато второй — полностью бесплатный. Учитывая развитие тематических блогов и видео каналов, проблем с поиском информации сейчас нет.
Лично я начинал свой с простеньких (и еще бумажных) книг по HTML/CSS, потом были годы тренировок и со временем решил закрепить / систематизировать знания с помощью каких-то курсов. Выбирать на самом деле есть из чего, хотя не все варианты в итоге оказываются стоящими. Я проходил онлайн обучение верстке в компании Нетология . Там как раз сейчас идет набор в следующую группу.
Преимущество курсов в том, что они могут обеспечить поэтапное и эффективное усвоение знаний посредством:
- информативных лекций, составленных ведущими специалистами и практикующими верстальщиками;
- понятных и хорошо иллюстрированных примеров;
- практических заданий для закрепления материала.
В частности в Нетологии все проходит в формате вебинаров с возможностью задавать вопросы. Есть домашние работы, дипломная и сертификат про завершение обучения. Короче, все серьезно. Подобные дополнительные фишки делают онлайн курсы более «выгодными», а затраты при этом — просто инвестиция в себя.
Если сомневаетесь, поищите бесплатные материалы в тех или иных сайтах — как правило, парочка занятий или обучающие статьи для ознакомления можно получить просто так. Ну, и конечно, существуют десятки других образовательных веб-ресурсов, за доступ к которым платить не нужно.
Interneting is Hard — сервис изучения верстки
Наконец то перейдем к проекту Interneting is Hard — штука на самом деле очень крутая! Это полноценный комплексный курс для освоения HTML и CSS новичками, которые ни разу не пытались детально разбираться с устройством веб-страниц и их разработкой. Если вы не знаете с чего начать изучение верстки — 100% заходите сюда.
Все, что нужно для старта — мотивация и знание английского языка. С организационными вопросами не будет никаких проблем – разработчики составили что-то вроде «учебного плана», который включает:
- 14 глав с постепенным углублением материала;
- 284 понятных примеров кода;
- диаграммы и графики;
- почти 43 тысячи слов;
- современные техники (да-да Flexbox тоже есть).
Особенности и фишки сервиса
Процесс обучения HTML верстке в Interneting is Hard обладает несколькими преимуществами по сравнению с другими похожими проектами:
1. Красивые диаграммы иллюстрируют тяжелые аспекты предмета, делая сложные для понимания структуры наглядными и простыми. Вместо того, чтобы нагромождать массу незнакомых понятий у себя в голове, достаточно визуализировать их самым элементарным способом, как это делают авторы курса.
2. В процессе обучения задействованы все современные техники верстки: веб-типографика, семантический HTML, создание отзывчивого дизайна и иллюстраций, а также Flexbox. Они помогут новичку стать востребованным специалистом, а профессионалу освежить свои знания;
3. Наглядные примеры демонстрируют основные концепции подаваемого материала с помощью конкретных сценариев. Это означает, что пользователю не придется читать бесконечные «полотна» текста. Такой подход неизменно приводит к скуке, которая в конечном итоге побуждает оставить изучение.
Каждые 2-3 абзаца сопровождаются написанием кода и представлением того, как он работает. Так будущий специалист получает свою первую практику в текстовых редакторах и проверки результатов в браузере;
4. Данный вариант обучения верстке сайтов полностью бесплатный. Начиная освоение HTML, многие еще колеблются, действительно ли это то, чем они хотят заниматься. И если платные курсы, возможно, заставят жалеть о потерянных деньгах, то Interneting is Hard даст максимум знаний, не запросив взамен ни доллара.
Разделы для поэтапного изучения верстки
Как я уже сказал выше, «учебный план» состоит из 14 тематических блоков. Давайте вкратце рассмотрим их:
- Introduction . Ознакомительная часть, в которой рассказывается, для чего нужны HTML, CSS и . Там же объясняются различия между фрэймворками и языками, а также показывается принцип работы с текстовым редактором АТОМ.
- Basic Web Pages . Вторая глава иллюстрирует строение элементарной веб-страницы. Здесь демонстрируется HTML-структура – «скелет» сайта. Посетитель узнает, зачем нужны теги, какие они бывают и для чего предназначен каждый из них.
- Links and Images . Зная основы проектирования, в третьем разделе пользователь ознакомится с размещением изображений и соединением веб-страниц друг с другом.
- Hello, CSS . Далее начинается – так называемых таблиц стилей. В данное понятие входит все, что касается оформления: шрифт, цвет, расположение, форма и размер текста.
- The Box Model . Продолжает тему дизайна пятая глава учебного плана, рассказывая о «блочной» модели содержимого. Будущие верстальщики знакомятся с такими вещами, как внешние отступы, рамки, внутренние поля и контентное наполнение.
- CSS Selectors . За боксами следуют селекторы – основа CSS. С помощью примеров кода в редакторе создатели курса обучают правильному использованию стилей.
- Floats . Седьмая часть расширяет полученные знания об управлении размерами блоков и областями вокруг них. Она посвящена понятию потока на веб-странице (Float) и описывает нюансы работы с сеткой сайта.
- Flexbox . По достижении экватора учебного плана, вам предлагается ознакомиться с Flexbox-ом. Это современный инструмент верстки, который дает полный контроль над выравниванием, направлением, порядком и размером блоков. Недавно, кстати, рассказывал про — еще более крутую штуку.
- Advanced Positioning . Далее начинается более сложный материал – продвинутое позиционирование и его основные типы: относительное, абсолютное и фиксированное. Хотя, помнится, на курсах данную фишку мы проходили совместно с Float и явно до Flexbox.
- Responsive Design . В десятом разделе рассказываются основы и роль адаптивного дизайна на сайте. Сейчас без него никуда.
- Responsive Images . Урок посвящен адаптивным изображениям, их масштабированию, режиссированию и созданию альтернативных форматов с помощью специальных функций.
- Semantic HTML . Двенадцатая глава снова возвращает к базовым понятиям HTML, раскрывая его с семантической точки зрения. Здесь читатель знакомится с «секционными» элементами, новыми тегами и их применением.
- Forms . В предпоследнем пункте посетителю дается возможность изучить построение форм и ее элементов: выпадающие списки, меню, текстовые поля их оформление и отправка информации, например, через .
- Web Typography . Последний туториал рассказывает о современной веб-типографии на сайтах — о внешнем виде текстов, заголовков, о шрифтах и т.п. В другом моем блоге есть раздел про веб-типографику где найдете массу полезных заметок по теме.
Структура уроков для обучения верстке
Чтобы по достоинству оценить функционал и удобство сервиса Interneting is Hard предлагаю рассмотреть реализацию одного из его подразделов. Возьмем второй урок по созданию элементарных веб-страниц.
Что мне лично нравится:
- Весь материал упорядочен подзаголовками. Текст при этом изложен доступным языком и не требует глубоких познаний сложной терминологии. Все кратко и по существу — в лучших традициях .
- Важные и сложные моменты прекрасно иллюстрируются диаграммами.
- Для простоты понимания и практических навыков даются примеры написания кода.
- Все максимально удобно: в правом верхнем углу есть кнопка возвращения в меню, возможен мгновенный переход к желаемому подзаголовку урока (навигация справа) и после лекции доступно открытие следующей главы. Отличное юзабилити.
Выводы
Как мо мне Interneting is Hard — на данный момент один из лучших сайтов по обучению верстке с нуля. Авторы курса позаботились о том, чтобы новички, которые никогда не имели дело с HTML и CSS, могли в простой и доступной форме понять азы создания веб-страниц. Информация очень хорошо структурирована — постепенно за 14 разделов вы преодолеете путь от начинающего пользователя до опытного верстальщика. Конечно, без практики и применения знаний никак нельзя, но что касается теоретической базы — это самое полное собрание инфы, что я встречал. Если хотите заниматься с преподавателями — посмотрите вариант от Нетологии тоже весьма неплохой, хотя и платный.
Если знаете еще какие-то интересные сервисы по изучению верстки сайтов, присылайте линки в комментариях.