Акселератор для верстальщиков от HTML Academy


Содержание

Акселератор для верстальщиков от HTML Academy

Стань веб-разработчиком с нуля за 6 недель с доходом от 30 000 рублей в месяц

Для кого подойдет курс WEB START

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

61 год

самый старший ученик курса

7 лет

самый младший ученик курса

Программа курса WEB START

Погружение в тему. Изучение основ HTML и CSS.

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

Урок 1. Как работает сайт. Как работают сайты. Клиент серверная архитектура.Backend и frontend.Как выглядит и из чего состоит код веб-страницы. Простая веб-страница на HTML. Тэги и атрибуты. Установка редактора кода Sublime Text 3

Урок 2. UI/UX. Прототипирование веб-страниц. Axure.Интерфейс: задачи, цели, польза, эстетика и функциональность. Понятие юзабилити и основы эргономики для дизайнеров

-Навык работы с дизайн-макетом

-Горячие клавиши для быстрой работы с макетом

-Работа со слоями, папками, смарт-объектами

Создание сетки для макета в Adobe Photoshop

Создание макросов для работы в Adobe Photoshop

Работа с графикой в Photoshop (старый видео-урок)

Ссылка на сайты с более чем 180+ PSD макетами

Урок 3. Работа с графикой для верстальщика. Формат и требования дизайн-макетов.

-Графика для web (gif, png, jpeg, svg)

-Avocode для быстрой работы с графикой

-Как открывать проекты .sketch

Плагины для работы верстальщика в Google Chrome

Сервисы для тестирования верстки

Сервис для векторизации изображений онлайн

Урок 4. Настройка рабочего пространства. Создание папки с проектом

Настройка автообновления при помощи Browser-sync

Тонкая настройка Sublime text 3.

Emmet — инструмент, ускоряющий работу с HTML

Что такое домен и хостинг

Краткий обзор хостингов и панелей администрирования SIP/ISP

Настройка FTP через FileZilla

Урок 5. Основы HTML. Структура HTML5-документа

Элементы HTML разметки. Теги.

Виды тегов. Парные/непарные теги.

Служебные «невидимые» теги.

Видимые теги для работы.

Атрибуты специального назначения.

Атрибуты общего назначения.

Текстовые теги. Преобразование текста.

Теги картинок и ссылок.

Стандарты и валидность. W3Cкомментарии в HTML;

Где смотреть дополнительную информацию

Правило работы со справочниками

Работа с codepen и аналогами

Плейлист HTML для самых маленьких

Дополнительные сервисы и программы

Справочники по html

Ссылки на сервисы по расшариванию кода

Статья про Тег HEAD

Урок 6. Основы CSS.

Варианты подключения таблиц стилей.Селекторы CSS (id, class, вложенные элементы)Наследование и группирование свойствПриоритеты применения стилей

Работа с текстом в CSS

Блочная модель CSS

Работа с инструментом Devtools от Google Chrome

Навык отладки своего кода

Дополнительные сервисы и программы

Справочники по CSS

Урок 7. Блочная модель в CSS. (Айдар) Строчные и блочные элементы HTML

Ширина, высота, рамка и отступы объектов

Как работает Float

Зачем нужен clearfix Наследование CSS-свойствАбсолютные и относительные пути

Настроенное рабочее пространство. Подготовленный шаблон для дальнейшей работы.

Понимание базовых основ HTML и CSS.

Работа с первым проектом.

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

Урок 8. Верстка первого макета на примере реального psd. Пробуем верстку на чистом HTML И CSS

Визуальная разметка страницыОсновные теги для верстки (div и span); отступы элементов (margin и padding); обтекаемые элементы; позиционирование блоков

Завершение работы. Готовый сайт.

Стилевые помощники reset.css и normalize.css

Дополнительные сервисы и программы

Ссылки на reset.css и normalize.css

Урок 9. Ускорение верстки в разы. Подключение библиотеки bootstrap 4 для быстрой верстки

Что такое колоночная верстка?

Готовые классы bootstrap 4

Как правильно и быстро находить информацию по bootstrap

Дополнительные сервисы и программы

Ссылка на официальную документацию bootstrap

Русскоязычная документация от bootstrap

Пару слов об material design

Урок 10. Верстка макета при помощи bootstrap 4. Визуальная разметка страницы

Разметка по сетке

Завершение работы, готовый сайт

Урок 11. FlexBox CSS. Свойство display: flex

Выравнивание элементов по горизонтали justify-content

Выравнивание элементов по вертикали align-items

Направление главной оси flex-direction

Многострочность элементов flex-wrap

Многострочное выравнивание align-content

Порядок отображения элементов order

Базовая ширина элемента flex-basis

Растяжение элементов flex-grow

Сужение элементов flex-shrink

Выравнивание отдельных элементов align-self

Урок 12. Введение в CSS Grid Row.

Введение. Поддержка в браузерах.

Терминология Grid System.

Позиционирование элементов в сетке.

Урок 13. Адаптивная верстка. Что такое адаптивная верстка. Что такое Мобильная вёрстка. Mobile First.

Относительные единицы и их применение (em, rem, %, vh, vw)

Работаем с @media запросами

Meta-тег viewport — зачем он нужен?

Обзор сервиса для верстки в стиле pixel perfect

Обзор специального раздела в devtools

Дополнительные сервисы и программы

Плагин для точной верстки

Расширение для проверки адаптивности сайта devtools

Урок 14. HTML5 формы.

Добавление Аудио и Видео на страницу.

Усовершенствование традиционных форм.

Проверка форм на ошибки заполнения.

Новые типы элементов.

Работа тэгов VIDEO / AUDIO.

Урок 15. БЭМ-нейминг: продвинутые техники использования.

Введение в БЭМ. Определения. Соглашение по именованию

2 макета, сверстанных в разных стилях: на чистом HTML и CSS и с использованием библиотеки Bootstrap 4. Навык быстрой адаптивной верстки с использованием сеток. Навык работы с препроцессорами.

Еженедельная прямая трансляция. Ответы на вопросы.

Зачем: применяем все полученные знания сразу на практике. Верстаем настоящий сайт. Учимся, сразу набивая руку и получая нужные навыки еще во время обучения.


Урок 16. Подключение шрифтов.

Узнаем шрифты из макета

Подключение шрифтов через Google Fonts

Подключение нестандартных шрифтов

Параметры для шрифтов в CSS

Подключаем шрифты, верстаем шапку сайта

Обзор сервисов по конвертации шрифтов

Как скачать найденный на Google Fonts шрифт

Дополнительные сервисы и программы

Сервис шрифтов от Google

Сайты для конвертации шрифтов

Плагин для Google Chrome по определению шрифта

Дополнительный Урок. Работа с текстом.

Работа с шрифтами. Размещение текста в несколько колонок.

Рассмотрим механизмы представления текстовой информации: оформление, выравнивание, отступы.

Переключаемые вкладки для создания меню.

Рассмотрим основы Canvas.

Рассмотрим работу с границами в CSS, способы создания рамок элементов.

Создание прозрачных рамок, теней, скругленных углов, градиентов

Урок 17. Псевдоклассы и псевдоэлементы в CSS.

Псевдоклассы на примере ссылок и картинок

Псевдоэлементы, что это такое

Верстка из макета элементов с наведением

Верстка главной секции сайта

Всплывающее окно без JS (:target)

Дополнительные сервисы и программы

Ссылка на библиотеку эффектов при наведении

Урок 18. Формы на сайте HTML + CSS

Синтаксис HTML-форм на сайте

Оформление элементов форм в CSS

Правила и частые ошибки в оформлении форм

Верстаем форму из макета на главном экране

Наложение масок на поле с номером телефона

Ссылка на плагин для валидации форм validate.js

Урок 19. Адаптив. Практика. Как адаптировать сайт при помощи классов Bootstrap

Как сделать адаптив при помощи @media запросов

Оптимизация изображений под дисплеи «Ретина»

Делаем адаптив для первого блока на сайте

Проверка адаптива через Dev Tools Google Chrome

Урок 20. Знакомство с JavaScript плагинами на jQuery

Образование | Артем Рудов: Как я прошел онлайн-курс HTML Academy и устроился на работу мечты

Ната­лья Бара­но­ва

Всего материалов: 585

Артем Рудов: Как я прошел онлайн-курс HTML Academy и устроился на работу мечты

Поче­му не сто­ит ждать четы­ре года, когда закон­чишь вуз? Как начать карье­ру в it-сфе­ре пря­мо сей­час? Замре­дак­то­ра Теп­ли­цы Ната­лья Бара­но­ва пого­во­ри­ла с выпуск­ни­ком онлайн-кур­са HTML Academy по про­фес­сии «фрон­тенд-раз­ра­бот­чик» Арте­мом Рудо­вым из Став­ро­по­ля и его настав­ни­ком Поли­ной Каты­ше­вой о том, поче­му важ­но не огра­ни­чи­вать­ся навы­ка­ми, полу­чен­ны­ми в уни­вер­си­те­те, и учить­ся новым вос­тре­бо­ван­ным спе­ци­аль­но­стям в обла­сти веб-раз­ра­бот­ки.

После защи­ты дипло­ма в уни­вер­си­те­те Артем Рудов узнал, что выиг­рал кон­курс HTML Academy на бес­плат­ное обу­че­ние по про­фес­сии фрон­тенд-раз­ра­бот­чи­ка. Артем до сих пор с тру­дом верит в это везе­ние. Имен­но после кур­са он с уве­рен­но­стью сме­нил рабо­ту: попро­щал­ся с бюро­кра­ти­ей в госу­дар­ствен­ном учре­жде­нии и стал фрон­тенд-раз­ра­бот­чи­ком в пер­спек­тив­ной став­ро­поль­ской сту­дии веб-дизай­на MindSell.

Фрон­тенд-раз­ра­бот­чик зани­ма­ет­ся верст­кой шаб­ло­на сай­та и созда­ни­ем поль­зо­ва­тель­ско­го интер­фей­са. Еже­год­ное иссле­до­ва­ние StackOverflow пока­за­ло, что самая попу­ляр­ная про­фес­сия сре­ди поль­зо­ва­те­лей сер­ви­са в 2020 году – это веб-раз­ра­бот­чик (web developer). Все фрон­тенд-раз­ра­бот­чи­ки отно­сят­ся к этой кате­го­рии.

Вме­сте со всту­пи­тель­ны­ми экза­ме­на­ми в маги­стра­ту­ру в 2020 году у Арте­ма начал­ся интен­сив в ака­де­мии. «Когда я шел на курс, я думал, что справ­люсь, так как мне дово­ди­лось вер­стать, – вспо­ми­на­ет Артем. – Пони­мал общие про­цес­сы, помо­гал дру­зьям делать сай­ты. Но пер­вое, что я выяс­нил в ака­де­мии, – «моя уве­рен­ность ока­за­лась преж­де­вре­мен­ной»: я зава­лил 1‑й уро­вень HTML. Пона­де­ял­ся, что одно­вре­мен­ное поступ­ле­ние в маги­стра­ту­ру не выльет­ся в цейт­нот, ведь зна­ко­мые мне вещи рас­ска­зы­ва­ют на лек­ци­ях, и… не успел. В ака­де­мии дела­ют став­ку не толь­ко на рабо­то­спо­соб­ность про­ек­та, но и каче­ство кода, что и ока­за­лось моей зоной роста. При­шлось дого­ва­ри­вать­ся о пере­сда­че, что­бы не было хво­стов».

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

«Вто­рой и тре­тий интен­си­вы (про­фес­си­о­наль­ный HTML и CSS, 2‑й уро­вень и про­фес­си­о­наль­ный JavaScript, 1‑й уро­вень) слов­но поста­ви­ли перед собой зада­чу акти­ви­ро­вать мой мозг на 150% из 100! Во вре­мя обу­че­ния все­гда испы­ты­ва­ешь мно­го пере­жи­ва­ний, эмо­ций и адре­на­ли­на. Осо­бен­но когда насту­па­ет вре­мя защи­ты лич­ных про­ек­тов. И, сде­лав выво­ды после пер­во­го интен­си­ва, я стал более гра­мот­но рас­пре­де­лять свое вре­мя и защи­тил HTML и CSS, вто­рой уро­вень, на 100%, а JavaScript – на 97. Сей­час я не став­лю себе план­ку мень­ше 100 на дру­гих интен­си­вах», – делит­ся впе­чат­ле­ни­я­ми Артем.

От про­цес­са обу­че­ния сту­дент остал­ся в вос­тор­ге. Понра­ви­лись интер­ак­тив­ные зада­ния, рабо­та над лич­ны­ми про­ек­та­ми, доступ­ность всех допол­ни­тель­ных мате­ри­а­лов и ника­ких тех­ни­че­ских слож­но­стей. «Осо­бен­но при­ят­но, что каж­дый сту­дент ака­де­мии может выбрать сре­ди кра­соч­ных маке­тов тот, кото­рый соот­вет­ству­ет его лич­но­му вос­при­я­тию сво­их воз­мож­но­стей на дан­ный момент», – отме­тил сту­дент.

Осо­бен­но Арте­му запом­ни­лись кре­а­тив­ные домаш­ние зада­ния (напри­мер, сде­лать реди­зайн сай­та, под­клю­чить API). А еще он вспо­ми­на­ет, как его настав­ник Поли­на Каты­ше­ва все­гда помо­га­ла и одоб­ря­ла пред­ло­жен­ные идеи.

Артем с гор­до­стью назы­ва­ет себя фрон­тенд-раз­ра­бот­чи­ком. Но уче­бу в ака­де­мии не забро­сил: сей­час он закан­чи­ва­ет вто­рой уро­вень по JavaScript. И самое инте­рес­ное: Артем попро­бо­вал себя в роли настав­ни­ка. «Мой пер­вый сту­дент закон­чил интен­сив с резуль­та­том 100 из 100! Я осо­знал, насколь­ко мне нра­вит­ся делить­ся зна­ни­я­ми, часто высту­паю на мест­ном мита­пе IT-раз­ра­бот­чи­ков», – эмо­ци­о­наль­но рас­ска­зы­ва­ет Артем.

Почему не стоит ждать, когда закончишь универ

Артем учил­ся на кафед­ре инфор­ма­ти­ки и вычис­ли­тель­ной тех­ни­ки, направ­ле­ние выбрал осо­знан­но, успе­вал сов­ме­щать уче­бу с рабо­той, но прак­ти­че­ских навы­ков полу­чил мало.

«Мно­го тео­рии, уста­рев­шие мате­ри­а­лы и обу­че­ние по ста­рым спе­ци­фи­ка­ци­ям и стан­дар­там не дадут 100% гаран­тии вый­ти высо­ко­ква­ли­фи­ци­ро­ван­ным спе­ци­а­ли­стом. Сей­час я учусь одно­вре­мен­но в маги­стра­ту­ре и в ака­де­мии. Сто­и­мость обу­че­ния в обо­их учре­жде­ни­ях прак­ти­че­ски оди­на­ко­вая, но в ака­де­мии я полу­чил боль­ше прак­ти­че­ско­го опы­та, чем тео­ре­ти­че­ско­го», – раз­мыш­ля­ет Артем.

Сту­дент убеж­ден: если вы хоти­те быть вос­тре­бо­ван­ным спе­ци­а­ли­стом – без прак­ти­ки нику­да.

В чем плюсы курса

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

«Рабо­та на кур­се мак­си­маль­но при­бли­же­на к раз­ра­бот­ке на реаль­ных про­ек­тах – те зна­ния, что я полу­чи­ла, про­хо­дя сама эти интен­си­вы, я сей­час исполь­зую в повсе­днев­ной рабо­те. Поэто­му после про­хож­де­ния кур­са нет ощу­ще­ния, что ты изу­чил что-то очень инте­рес­ное и полез­ное, но поня­тия не име­ешь, куда это при­ме­нить». Поли­на Каты­ше­ва, настав­ник интен­си­ва

Более того, про­грам­ма интен­си­вов пере­смат­ри­ва­ет­ся и обнов­ля­ет­ся от пото­ка к пото­ку. «Без­услов­но, всю эту инфор­ма­цию мож­но най­ти в сво­бод­ном досту­пе в Интер­не­те, но обыч­но это ста­тьи, отно­ся­щи­е­ся к какой-то кон­крет­ной тех­но­ло­гии, кото­рые не могут дать пол­но­го пони­ма­ния, что с ней делать. А на лек­ци­ях HTML Ака­де­мии не толь­ко рас­ска­зы­ва­ют о тех­но­ло­гии, но и сра­зу пока­зы­ва­ют, как при­ме­нить ее на прак­ти­ке и где почи­тать о ней подроб­нее. И, конеч­но же, после про­хож­де­ния интен­си­ва у сту­ден­та в порт­фо­лио уже есть пол­но­цен­ный про­ект», – объ­яс­ни­ла Поли­на Каты­ше­ва.

Почему важен наставник

С ака­де­ми­ей рабо­та­ют более трех­сот настав­ни­ков. Это те люди, что смо­гут отве­тить на вопро­сы, кото­рых не было в лек­ции, или, наобо­рот, разъ­яс­нить то, что было в лек­ции, но до кон­ца оста­лось непо­нят­ным. «Настав­ник делит­ся сво­им опы­том, зна­ни­я­ми, луч­ши­ми прак­ти­ка­ми, кото­рые он при­ме­ня­ет в сво­ей рабо­те. И, кро­ме того, может под­дер­жать и при­обод­рить сту­ден­та, когда он совсем не моло­дец или, наобо­рот, боль­шой моло­дец», – гово­рит Поли­на Каты­ше­ва.

На голо­со­вое обще­ние с настав­ни­ком выде­ле­но 5–6 часов. По мне­нию Каты­ше­вой, рабо­ту с настав­ни­ком отча­сти мож­но срав­нить с команд­ной раз­ра­бот­кой, где более опыт­ный кол­ле­га делит­ся опы­том с ново­при­быв­шим.

Поли­на Каты­ше­ва учи­лась в ака­де­мии на кур­се по адап­тив­ной верст­ке. А сей­час она настав­ник уже деся­то­го пото­ка интен­си­вов по верст­ке.

Как проходит обучение

По наблю­де­ни­ям Поли­ны Каты­ше­вой, сту­дент может сов­ме­щать онлайн-курс с рабо­той или уче­бой. Лек­ции про­хо­дят два раза в неде­лю по вече­рам, с 19 до 21 по мос­ков­ско­му вре­ме­ни, а после лек­ций сле­ду­ет домаш­нее зада­ние.

«Неко­то­рые зада­ния тре­бу­ют совсем немно­го вре­ме­ни, напри­мер, настрой­ка рабо­ты c Github, с дру­ги­ми нуж­но поси­деть подоль­ше. Но в целом вре­ме­ни, отве­ден­но­го на про­хож­де­ние интен­си­ва, вполне доста­точ­но, если уде­лять выпол­не­нию зада­ний поне­мно­гу вре­ме­ни каж­дый день», – уточ­ни­ла настав­ник.

Куда идти после курса

После про­хож­де­ния базо­во­го интен­си­ва по верст­ке мож­но устро­ить­ся млад­шим вер­сталь­щи­ком в ком­па­нию. Есть мно­же­ство ком­па­ний, кото­рые гото­вы брать к себе на ста­жи­ров­ку. Мож­но попро­бо­вать себя на фри­лан­се. Выпуск­ни­ки кур­са «фрон­тенд-раз­ра­бот­чик» выпол­ня­ют три тесто­вых зада­ния для тру­до­устрой­ства.

У ака­де­мии есть про­грам­ма под­держ­ки спе­ци­аль­но для выпуск­ни­ков, кото­рая помо­га­ет устро­ить­ся в ком­па­нии-парт­не­ры и про­ект «Лига А». Он спе­ци­аль­но создан для того, что­бы выпуск­ни­ки тре­ни­ро­ва­лись на ком­мер­че­ских зака­зах.

Спрос на про­фес­сию фрон­тенд-раз­ра­бот­чи­ка крайне высо­кий. На HeadHunter доступ­но более 1600 вакан­сий. Боль­ше вакан­сий откры­то в Москве, Санкт-Петер­бур­ге, Рес­пуб­ли­ке Татар­стан и Ново­си­бир­ской обла­сти. Зар­пла­та в зави­си­мо­сти от реги­о­на варьи­ру­ет­ся от 65 тысяч руб­лей и от 260 тысяч руб­лей.

Кто учится

По сло­вам Поли­ны Каты­ше­вой, сту­ден­ты при­хо­дят на курс с раз­ным уров­нем зна­ний. «Быва­ют те, кто зани­ма­ет­ся верст­кой дав­но, но зна­ния доволь­но раз­роз­не­ны, и даже уста­рев­шие, они при­хо­дят для струк­ту­ри­ро­ва­ния име­ю­щих­ся зна­ний и полу­че­ния новых. Есть совсем начи­на­ю­щие, кото­рые реша­ют поме­нять сфе­ру дея­тель­но­сти. Быва­ют сту­ден­ты с опы­том про­грам­ми­ро­ва­ния, и даже раз­ра­бот­ки сай­тов, но не уме­ю­щие вер­стать на хоро­шем уровне», – вспо­ми­на­ет настав­ник.

Новый мир

Поли­на Каты­ше­ва рас­ска­зы­ва­ет мно­го исто­рий, когда после кур­са сту­ден­ты дей­стви­тель­но нахо­ди­ли люби­мое заня­тие, с лег­ко­стью меня­ли про­фес­сию. Напри­мер, Дарья Гла­голь из Том­ска на тре­тьем кур­се педа­го­ги­че­ско­го уни­вер­си­те­та совсем не хоте­ла рабо­тать пре­по­да­ва­те­лем. После про­хож­де­ния HTML и CSS 1‑го уров­ня прак­ти­че­ски сра­зу устро­и­лась на рабо­ту в офис млад­шим вер­сталь­щи­ком, где смог­ла набрать­ся опы­та и углу­бить полу­чен­ные зна­ния. Сей­час она рабо­та­ет уже фрон­тенд-раз­ра­бот­чи­ком в ком­па­нии SibEDGE.

Онлайн-курс HTML Academy по про­фес­сии «фрон­тенд-раз­ра­бот­чик» прой­дет с 6 авгу­ста по 26 декаб­ря 2020 года. Сто­и­мость кур­са – 59 тысяч 500 руб­лей. Что­бы запи­сать­ся на курс, перей­ди­те по ссыл­ке.

Позна­ко­мить­ся с про­фес­си­ей, пооб­щать­ся с извест­ны­ми раз­ра­бот­чи­ка­ми, заве­сти полез­ные кон­так­ты мож­но на кон­фе­рен­ции pitercss_conf, кото­рая прой­дет в Санкт-Петер­бур­ге 8 и 9 июня 2020 года. Для сту­ден­тов кол­ле­джей и вузов у нас дей­ству­ет спе­ци­аль­ная скид­ка 1000 руб­лей по про­мо­ко­ду pitercsswelcome.

Пройти месячные онлайн-курсы от HTML Academy «Базовый HTML и CSS» и «Продвинутый HTML и CSS»

Полезные ссылки в этапах цели!

Постоянно натыкаюсь на отзывы (на различных ресурсах) о курсах HTML Academy, где пишут, что у них самое лучшее обучение HTML и CSS. Стало интересно, чем же они отличаются от остальных, заинтересовал их метод. Когда-то раньше проходил пару бесплатных интерактивных мини-курсов на их сайте, но так как я знал большинство из имеющейся там информации — меня процесс изучения особо не впечатлил и не зацепил. Но отзывы на форумах веб-разработчиков все не прекращались, и вот в итоге решил пройти их курсы, закрепив тем самым знания, что-то вспомнить, что-то узнать из упущенного ранее.

В данной цели будет рассматриваться Базовый Месячный онлайн-интенсив.
На данный момент дошел до 4-го раздела.

Верстать буду следующим образом:

  • PhpStorm;
  • UPDATE 21.03.2020:AngularJS;
  • TypeScript (изучаю его сейчас как раз, пока основы);
  • Gulp с настроенными плагинами и Live Reload;
  • Jade;
  • Stylus.

Все файлы будут выложены на Github, включая файлы сборщика.
На Codepen тоже выложу, для наглядности.

Критерий завершения

Все уроки по курсу просмотрены, выполнены все задания из курса, сверстаны все макеты и выложены на github/codepen

Личные ресурсы

Сам курс, время, желание, phpstorm, photoshop

Экологичность цели

Эта цель позволит мне закрепить мои знания по HTML и CSS и, в принципе, пополнить портфолио тестовыми проектами :)

Базовый курс для верстальщиков

Курс: «Базовый курс для верстальщиков» . Материал от профессионалов веб-разработки. Если вы хотите освоить данную профессию — смело можете начинать с этого материала. Вы узнаете про основы, попрактикуетесь и сможете двигаться дальше. Отзывы хорошие. Данный материал рассчитан на новичков. Материал прислал анонимный пользователь без комментариев.

Материал может быть удален по запросу правообладателя!

Описание курса:

Кому полезен этот курс:

  • Новичкам. Хочешь научиться самой востребованной интернет профессии? Обязательно приходи к нам.
  • Бэкендерам. Давно уже работаешь с серверной частью проектов, но хочешь научиться менять визуал сайтов? Тебе к нам!
  • Веб-дизайнерам. Давно рисуешь сайты, но хотел бы сам научиться верстать? Посети курс и на практике узнаешь как создаются сайты.
  • Маркетологам. Не хватает основ веб-разработки для продвижения сайтов? Мы поможем восполнить этот пробел.
  • SMMщикам. Работа SMM, как правило, неразрывна с поддержкой сайтов. Самое время изучить основы веб-разработки.
  • Предпринимателям. Сложно представить современный бизнес без сайта. Освой азы, чтобы общаться с разработчиками на одном языке.

Во время обучения мы верстаем сайт, который так или иначе будет связан с темами курса. Будет интересно!

По окончанию курса у Вас будет две сверстанные странички, которые будут храниться в личном профиле GitHub. Первая страничка — это вёрстка по учебному макету, вторая — по самостоятельно выбранному макету для закрепления всего материала.

Программа обучения:

  • Стартовая лекция:

— Разбор основ программы Adobe Photoshop;

— Работа с изображениями;

— Подготовка проекта к верстке;

— Структура html-документа (html, head, body) ;

— Обзор популярных тегов HTML;

— Обзор семантических тегов HTML.

— Идентификаторы и классы;

— Aтрибуты для input и textarea;

— Отличия между button и a;

— Ссылки для социальных сетей;

— Работа с почтой и скайпом;

  • Подключение CSS, работа с текстом:
Илон Маск рекомендует:  Шаблон сайта организации HTML, CSS, JavaScript

— Подключение CSS к документу HTML;

— Способы подключения шрифтов на страницу;


— Форматирование текста при помощи CSS;

— Стили для работы со шрифтами;

— Разные типы записи цвета в CSS документе;

— Селекторы, которые стоит знать и применять;

— Типы позиционирования элементов;

— Установка favicon на страницу.

— Стилизация ссылок и кнопок;

— Работа со списками;

— Работа с after и before;

— Центрирование объектов в документе;

— Отступы padding и margin;

— Загрузка изображения через CSS;

— Создание градиента в CSS;

— Создание рамок CSS;

— Создание радиусов CSS;

— Создание внешних рамок CSS;

— Трансформации в CSS;

— Создание анимаций при помощи CSS3

— Проверка HTML и CSS на валидность;

— Основные правила создания адаптивного сайта;

— Отличия резиновой верстки от адаптивной.

— Сохранение SVG-изображений в Illustrator;

— Создание SVG через теги;

— Cоздание паттернов SVG.

— Правилам верстки email;

— Создание на примере;

— Сервисы, для выгрузки своего шаблона;

— Добавление библиотеки jQuery на страницу;

— Отобразить и спрятать объект с jQuery.

— Обзор плагина jQuery UI;

— События наведения и смещения указателя мыши;

— Распространенные задачи, решаемые с помощью jQuery.

— Подробный обзор SASS;

— Краткий обзор LESS;

— Краткий обзор Stylus;

— Какой препроцессор выбрать для работы?

  • Создание сайта на бесплатном хостинге Github:

— Краткое описание систем контроля версий. Для чего они нужны?

— Регистрация на сайте Github;

— Наполнение репозитория файлами.

— Что такое CSS-фреймворки?

— Какие CSS-фреймворки существуют на сегодняшний день?

— Bootstrap: какую версию выбрать?

— Обзор элементов Bootstrap.

— Как найти свой первый заказ или устроиться на работу, если ты новичок;

— Выясним, что лучше подойдет именно тебе: офис, удаленная работа или фриланс;

— Самоорганизация и работа в команде: рассмотрим популярные сайты и приложения по управлению проектами;

— Список актуальных фриланс-бирж.

Материал предоставлен исключительно для ознакомления!

Как стать начинающим верстальщиком

В этой статье я расскажу как стать начинающим верстальщиком. Т.е. после выполнения всех рекомендаций в можете претендовать на данную позицию. Статья создана специально для учеников glivera-team, но может помочь всем, кто решил освоить данную специальность.

Учим HTML/CSS

HTML и CSS — это то, что верстальщик пишет каждый день, это языки, которые понимает браузер и рисует ваш сайт. Вы можете выбрать любой источник для изучения(книги, видео, статьи), главное понять основы. Вот несколько полезных ссылок, которые помогут начать:

После прохождения уроков вы должны понимать:

  • что такое html-теги и как они работают
  • блочную модель(border, margin, padding)
  • как работает float, inline-block и flexbox
  • позиционирование(абсолютное, относительное, фиксированное, z-index)

Вы должны уметь:

  • вставить на страницу текст, картинки, ссылки, элементы форм
  • стилизовать элементы страницы(изменение размеров, цветов, теней и т.д)
  • создавать таблицы

Работаем с фотошопом

Дизайнер предоставляет верстальщику макет в формате psd(формат файлов Photoshop). Поэтому верстальщику необходимо уметь с ним работать. Все функции программы не нужны, главное уметь следующее:

  • работа со слоями(скрытие, отображение, просмотр эффектов)
  • замер размеров элементов
  • вырезание картинок(обычных и паттернов)
  • копирование текста из макета в html

Начальные инструменты

Для быстрого старта вам понадобится редактор и браузер. Вы можете выбрать любые, но я посоветую Sublime Text в качестве редактора и Chrome в качестве браузера. Из операционных систем сделайте выбор между Windows и Mac. Остальные системы будут тормозить ваше обучение.

Верстка первого сайта

На этом этапе скорее всего вы ощутите ступор. Вы вроде знаете html/css(на самом деле нет) и фотошоп. Но вы совершенно не понимаете как из макета сделать сайт. В данном случае вы можете пройти небольшой курс по верстке сайта, коих много на ютубе. На данном этапе вам нужно сверстать первый сайт. Не обращайте внимание на такие понятия как резина, адаптивность. И еще, не используйте css-фреймворки(bootstrap, foundation).

Понимание семантики, валидность

Итак, вы сверстали первый сайт, что дальше? Вам нужно понять как правильно расставлять теги в html-коде, а также научиться проводить валидацию. С валидацией все просто — машина анализирует код, говорит что не так, вы правите и понимаете. С семантикой посложнее, поскольку область довольно холиварная и во многих моментах разработчики не имеют единого мнения. Но все же общие стандарты есть. После того, как изучите — попробуйте сверстать новый макет семантично. Теперь на каждом этапе вам нужно получить обзор вашего кода от опытного специалиста/наставника.

Javascript и jQuery

На этом этапе вы должны понять, что такое Javascript и зачем он нужен. Далее познакомиться с библиотекой jQuery и попробовать сверстать сайт с интерактивными элементами(слайдеры, всплывающие окна, табы).

Изучите методологию БЭМ. Вам нужно понимать, как верстать независимыми блоками, как привнести модульность в вашу верстку. В интернете очень много информации по этому поводу. Не нужно изучать фул-стек БЕМ, просто важно понять методологию для CSS. Верстаете новый макет с применением методологий.

Для ускорения и удобства написания стилей придумали препроцессоры. Наш выбор — Sass(.scss). Вам необходимо изучить препроцессор и сверстать с ним новый макет. Понять нужно:

  • переменные
  • разница между миксинами и тихими классами(placeholder)
  • как работает ‘&’
  • как разделить стили на несколько .scss файлов

На данном этапе scss в css компилируйте с помощью prepros

Также для ускорения верстки и поддержки верстальщики используют шаблонизаторы html. Наш выбор — pug. После изучения вы должны понимать:

  • как делать миксины
  • как работает extends
  • циклы и переменные
  • работа с массивами

Верстаете сайт с применением шаблонизатора.

Адаптивность

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

IDE PHPStorm

Чем раньше вы пересядете с редактора на PHPStorm — тем лучше. Эта IDE позволяет значительно ускорить разработку. Скачать бесплатную(early access) PHPStrom можно на официальном сайте, если не хотите платить — скачиваете её раз в месяц. В остальном бесплатная версия такая же, как и платная.

Любой разработчик должен уметь работать с системами контроля версий, и верстальщик — не исключение. Мы, как и большинство выбрали Git. Вы должны уметь следующее:

  • работать с интерфейсом github
  • уметь клонировать репозитории на компьютер
  • делать commit, push, merge
  • делать pull request

Практика

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

Акселератор для верстальщиков от HTML Academy

Введение в язык, типы данных и операторы

Способы взаимодействия с пользователем

Все об условиях и циклах в JavaScript

Решаем задачи математического характера

Все о функциях в JavaScript

Объекты, массивы, псевдомассивы

Основы ООП в ES5

Доступ к элементам на странице

Обработчики событий и особенности их работы

Отмена стандартных действий браузера

Скрипты и время выполнения, setTimeout и setInterval

Пишем анимации на чистом JS. Пишем таймер на чистом JS.

Параметры документа и окна и работа с ними.

Пишем скрипт плавного скролла.
Пишем табы на чистом JS.

Контекст вызова (this)

Пишем draggable скрипт, модальное окно.

Работа с JSON, AJAX. Отправка данных на сервер.

Практика отправки данных с форм.

JQuery, как устроена $. Современные библиотеки и фрэймворки

Написание калькулятора на JQuery

Приём модуль. Зачем и как использовать.

Составление резюме и консультация HR-a

Прохождение собеседований и трудоустройство

Урок 1. Введение в язык, типы данных и операторы. Способы взаимодействия с пользователем. Основы работы с Git.

Урок 2. Все об условиях и циклах. Решаем задачи математического характера.

Урок 3. Все о функциях, callback — функции.

Урок 4. Объекты, массивы, псевдомассивы. Основы ООП в ES5.

Урок 5. Доступ к элементам на странице.


Урок 6 События в JS, обработчики событий и особенности их работы. Отмена стандартных действий браузера.

Урок 7.Скрипты и время выполнения. setTimeout и setInterval. Пишем анимации на чистом JS. Пишем таймер на чистом JS.

Урок 8. Параметры документа и окна и работа с ними.Пишем скрипт плавного скрол ла. Пишем табы на чистом JS.

Урок 9. Контекст вызова.(this) Пишем draggable скрипт, модальное окно.

Урок 10. Особенности современного стандарта. Тренды. Интерполяция.

Верстальщик — отличная стартовая профессия

Наш первый гость из прошлого — основатель HTML Academy Александр Першин. В интервью Александр рассказал о начале карьеры верстальщика, профессиональном росте и планах на будущее, которое уже стало настоящим.

Расскажи, как ты пришел в webdev и почему выбрал именно верстку и PHP?

– Сайтами я увлекался класса с 6-го. Потом, когда поступил в ИТМО, сайты начал делать динамические и сложные, и меня это затянуло. То есть верстку я не выбирал — это просто необходимый сопутствующий навык, а я всё-таки больше программист, нежели верстальщик. Простых и распространённых альтернатив PHP в то время в вебе не было. Это сейчас уже есть дешёвые хостинги с «питоном» и так далее. Но PHP в умелых руках не лучше и не хуже «питонов» и «руби».

А потом была первая студия?

– Потом мы на первом курсе курсовики по PHP на заказ продавали ;). А вот потом уже была первая студия.

Насколько давно ты сам занимаешься вёрсткой?

– С 2005 года профессионально, а так с 1998.

« Чтобы стать верстальщиком начального уровня и начать работать, нужно учиться примерно месяц, хотя можно и быстрее »

Расскажи, как появилась идея HTML Academy?

– Идея появилась на факультативе в ИТМО в 2010-2011. Я рассказывал студентам про профессиональную вёрстку, мы разбирали критерии качества и всякие тонкости. В итоге они должны были сами сверстать настоящий макет, который мне отдал один хороший дизайнер. Но была проблема – на тот момент этот макет для студентов был уже рабочим сайтом и, естественно, они его нашли и очень многое позаимствовали.

В общем, я стал задумываться, как показать студентам поведение макета, не показывая при этом код. И придумал то, что сейчас называется «испытания». В то же время в ИТМО началась мощная работа с компетентностным подходом. Собственно, компетентности и испытания потом превратились в HTML Academy.

HTML Academy учит вёрстке с нуля и до определенного уровня, дальше будущий специалист идет сам. Сколько времени должно пройти, прежде чем он станет профессиональным разработчиком, готовым работать в студии или выполнять качественные заказы на фрилансе?

– Уровень будет расти постепенно, так как базовый цикл — это только начало. Он даст компетенцию на начальном уровне, а потом мы будем её углублять. Но чтобы стать верстальщиком начального уровня и начать работать, нужно учиться примерно месяц, хотя можно и быстрее. Кстати, новый формат HTML Academy — «Онлайн-интенсив» — рассчитан тоже на месяц.

В любом случае, сначала надо сверстать 2-3 реальных макета, набить шишки и набраться опыта. Потом качество работы поползёт вверх.

Продолжим говорить о критериях качества. Есть ли сейчас у молодых какие-то единые стандарты, с которыми можно сверяться при выполнении работы?

– Критерии качества просты: свёрстанная страница должна быть похожа на макет, вёрстка должна вести себя логично и не разваливаться, корректно отображаться в нужных браузерах. Код должен быть максимально простым и валидным. А вот критерии мастерства — более сложная штука. Стандартов как таковых мало, есть стандарты W3C и гайды по написанию кода. Больше не знаю стандартов в нашей области : )

Я работал в трёх студиях и в одной компании, занимающейся интернет-бизнесом. Везде все верстали как хотели, и особых стандартов не было. Главное — валидно, не разваливается, похоже на макет, кроссбраузерно (тогда этот вопрос стоял острее).

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

Ты говорил про студии. Расскажи про свою первую студийную работу.

– Небольшая веб-студия, называлась Qubis, 10-15 человек. Мы делали сайты на самописной админке на PHP, дизайн, фирстили. Сейчас такую студию назвали бы чистым продакшеном. Сейчас уже ни студии, ни сайта, ни домена не осталось.

Расскажи, чем именно ты занимался и с какими проблемами столкнулся как начинающий специалист.

– Верстал и программировал на PHP. А проблемы были две: IE5.5 и IE6. Очень плохая поддержка стандартов и тучи багов. Можно сказать, что сейчас у верстальщиков особо и нет проблем — всё в шоколаде, особенно, если в договоре прописаны современные браузеры. Тогда, например, не работало min-width, или не поддерживались png24 с полупрозрачностью. Круглые уголки делались через 6 дивов с картинками, не было JQuery. Кстати, и ZF ещё не было, и вообще вменяемых фреймворков для PHP. Зато был форум PHPBB, который был весь в одном файле то ли на 3, то ли на 5 тысяч строк. Так что проблемы были : )

По твоим ощущениям, что изменилось в работе верстальщика за последние года 3-4?

– Умер IE, всё более-менее стало работать по стандартам, начали бурно появляться новинки, пошло развитие. Это хорошие изменения. Но появились и проблемы — это планшеты и мобильники.

По поводу IE: IE7 был не так уж страшен с точки зрения багов (по сравнению с IE6), IE8 уже почти хороший браузер, а в более поздних версиях уже и новые фичи поддерживаются. Но главное вот что — если знаешь базу, то трудно сверстать так, чтобы что-то серьёзно разваливалось уже с 8 версии IE. Да, были всякие мелочи вроде отсутствия круглых уголков, но с точки зрения доступности и общего восприятия макета они не критичны и лечатся малой кровью. Поэтому, когда примерно года 2 назад во всех договорах на разработку сайтов минимальной версией IE стала 8, жить стало легко и приятно.

« Когда человека прёт вёрстка и технологии, он следит за новинками »

Рынок зреет, набирают легитимность различные подходы, например «прогрессивное улучшение», которое позволяет не заморачиваться над красотой сайта в старых браузерах. Всё весьма прагматично и эффективно начинает работать, и даже заказчики это понимают. Что касается новых свойств, то тут тоже всё радужно, особенно если используешь прогрессивное улучшение. Просто применяй свойства аккуратно, экономь время и радуйся жизни.

А вот с мобильными и планшетами проблема. У нас пока мало кто умеет делать адаптивность хорошо, и практика еще не наработана. Тут верстальщики оказались на самом краю технологий, поэтому шишки набивать будут все.

И я снова спрошу про компетентность: за время работы в Serenity тебе приходилось проводить собеседования для разработчиков?

— В основном для верстальщиков. Программистов не искали. Заявки были и их было достаточно много. Заработная плата была средняя по рынку. А вот уровень кандидатов был слабоват. Нам нужен был человек, который хорошо разбирается в базе, может адекватно и просто сверстать макет средней сложности и который готов расти. И еще необходимо знание JavaScript на уровне «использовать JQuery для мелких задач».

Как ты оцениваешь готовность человека профессионально расти?

— Когда человека прёт вёрстка и технологии, он следит за новинками. Кандидатам мы просто задавали вопросы про что-то новенькое и слушали, что на него отвечают. Но иногда не отвечали даже на вопрос «чем div отличается от span?». Мы отбирали на уровне «ты вроде молодец, а готов учиться?», а чтобы понять, насколько он дремуч, задавали вопросы. Поэтому готовность расти — это несопротивление обучению : ).

Как ты считаешь, нужно ли верстальщику знать jQuery?

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

Скажи, какие инструменты ты сам используешь при верстке?

— Текстовый редактор, пипетка — аддон для Firefox — firebug и web developer toolbar, и еще google. Всё.

Ты занимаешься несколькими проектами одновременно. Как ты распределяешь время между ними, есть ли у тебя специальные техники повышения продуктивности?

— Последний год было не до техник. У меня было две работы: преподавание в ИТМО и работа программистом в Serenity. Иногда вставал в 7 утра, с 9.30 до 14.00 было 4 пары и с 15.00 до 20.00 работал в Serenity. А уже вечером, если силы оставались, то можно и курсы было пописать. Сейчас я постепенно перехожу на фултайм работу по HTML Academy. Наверное, задумаюсь над техниками. А пока всё просто — много работать, хорошо высыпаться и не забывать немного заниматься спортом.

« Я точно могу сказать, что спрос в качественном вебдеве будет только расти »

Расскажи о планах HTML Academy на будущее: планируешь ли ты продвинутые курсы, оффлайн обучение, PHP Academy, может быть?

— В планах сделать из Академии хорошо работающий конвейер по подготовке IT-специалистов, готовых к работе в индустрии. Начнём мы с верстальщиков. Потом будем конвейер удлинять, готовить всё более крутых верстальщиков. А потом и постепенно расширим — сначала это будет JavaScript, а потом, может быть, и серверные программисты. Оффлайн курсами вряд ли будем заниматься, но будем делать формат, который по качеству обучения будет сопоставим с офлайном. И первая ласточка — это онлайн-интенсив.

ИТМО является одним из ведущих ВУЗов Санкт-Петербурга. Насколько сильное там веб-направление? Чему можно научиться?

— В ИТМО на всех кафедрах и факультетах всё по-разному. Про свой скажу, что веб-направление там не особо сильное, так как до последнего времени у ВУЗа не было задачи ориентироваться на рынок. Надеюсь, что ситуация улучшится. Например, в этом году мы будем официально внедрять Академию в учебный процесс, и ИТМО будет первым вузом, который будет использовать наши методики.

Как ты считаешь, какие специальности в вебдеве или диджитале наиболее востребованы?

— О диджитал трудно судить, я не особо разбираюсь в маркетинге, а диджитал – это всё таки сплав маркетинга и интернета. Там появляется много новых незнакомых для меня профессий: диджитал-маркетолог, диджитал-стратег, еще какие-то специалисты. Всё-таки они больше гуманитарии.

Но я точно могу сказать, что спрос в качественном вебдеве будет только расти, потому что та самая быстрорастущая диджитал-среда будет формировать огромный спрос на продакшн. А профессии в продакшне простые: верстальщик, фронтенд-разработчик, серверные программисты. И все они примерно одинаково популярны. Но есть один нюанс с верстальщиками: обычно за 1-2 года они вырастают либо во фронтендеров, либо в программистов. То есть верстальщик – это хорошая стартовая профессия, из которой можно развиться практически в кого угодно и даже уйти в диджитал.

Последний вопрос: какие книжки ты рекомендуешь почитать начинающим по технологиям или просто для себя?

— По вёрстке я, в основном, учился на статьях, а не на книгах, но есть неплохая серия от «A Book Apart». Программистам посоветую GoF и Фаулера, особенно «Рефакторинг».

Супер! Огромное тебе спасибо и удачи!

СКАЧАТЬ HTML Academy | Интенсивный онлайн-курс «Базовый HTML и CSS» (2020)

WinRAR

Без бороды и бубна

HTML Academy — стандарт в обучении фронтендеров. Наша задача — сделать из любого новичка полноценного и востребованного специалиста, готового работать в веб-индустрии.
Интенсив «Базовый HTML и CSS» это профессиональный курс, построенный на базе платформы HTML Academy. Вести его будут практикующие преподаватели с десятилетним опытом веб-разработки.
Курс подойдёт для тех, кто делает свои первые шаги и тех, кто считает себя начинающим верстальщиком. Также, если ваши знания не систематизированы, он подойдёт и вам.

Вводная лекция про роль и место верстальщика в мире веб-технологий.

1. Что на самом деле происходит, когда вы вводите в браузере адрес сайта и нажимаете Enter?
—IP-адрес, сервер и веб-сервер, «виртуалхосты».
—Доменные имена, URL-aдреса и система DNS.
—Загрузка и «сборка» веб-страницы, TCP/IP, HTTP.
—Приёмы оптимизации веб-страниц.

2. Инструменты веб-разработчика и рабочий процесс на интенсиве.
—Системы контроля версий. Git и GitHub.
—Инструменты вёрстки: редакторы кода, инспекторы, полезные веб-сервисы.
—Немного о браузерах, браузерных движках и различиях между ними.

Создадим HTML-разметку страниц учебного и личного проектов. Попрактикуемся использовать подходящие теги, задавать имена классов, оценивать сложность разметки.

1. Введение в HTML и CSS.
—Синтаксис HTML.
—Структура простейшего HTML-документа.
—Синтаксис CSS. Базовые CSS-селекторы.
—Наследование, каскадность и приоритеты в CSS.

2. Качественная разметка и стили кодирования.
—Простая, понятная, читабельная и логичная разметка: примеры и антипримеры.
—Типовые ошибки разметки: «ссылка или кнопка», «картинка или фон» и другие.
—Модульность разметки или использование «пространств имён».
—Когда использовать , и

?
—Зачем нужен стиль кодирования? Обзор популярных стайлгайдов.

3. Создаём разметку главной страницы учебного проекта.

3. Фотошоп для верстальщика

Разберём всё необходимое для работы верстальщика в фотошопе. Подготовим графику для проектов.

1. Типовые задачи верстальщика в фотошопе.
—Настройка интерфейса фотошопа.
—Работа со слоями, типы слоёв.
—Получение параметров текста.
—Измерение размеров блоков, отступов, получение информации о цвете.
—Получение параметров сложных декоративных эффектов: тени и прочее.
—Экспорт графики, работа с повторяющимися паттернами.

2. Обзор форматов графики в вебе.
—PNG, JPEG, SVG, GIF.
—Как выбрать подходящий формат?

3. Разбор графических макетов проектов.

Разберёмся с блочной моделью документа. Создадим сетки страниц учебного и личного проектов.

1. Поток документа и блочная модель документа.
—Понятие сетки и потока документа.
—Блочные и строчные элементы и их особенности.
—Свойства блочной модели: размеры, рамки и отступы.
—Тонкости блочной модели: «схлопывание» и «выпадание» внешних отступов, width: 100% и width: auto, свойство box-sizing и другие.

2. Как управлять потоком и строить сетки?
—Свойство display. Управление типом элементов.
—Свойство float и его особенности.
—Построение сеток на «плавающих» элементах.
—Блочно-строчные элементы и их особенности, борьба с пробелами между блочно-строчными элементами.
—Построение сеток на блочно-строчных элементах.

3. Создаём сетку главной страницы учебного проекта, экспериментируем с «карточными» элементами интерфейса на блочно-строчных элементах.

5. Знакомство с флексбоксами

1. Теория: введение во флексбоксы.
2. Практика: сетка Барбершопа на флексбоксах.

6. Декоративные элементы

Познакомимся с приёмами создания декоративных элементов. Завершим вёрстку главных страниц учебного и личного проектов.

1. Позиционирование.
—Относительное позиционирование.
—Абсолютное позиционирование: координаты, изменение точки начала координат, относительные координаты и размеры, координаты по умолчанию.
—Фиксированное позиционирование.
—Управление порядком слоёв.

2. Другие важные приёмы.
—Псевдоэлементы.
—Спрайты.
—normalize.css.
—Подключение нестандартных шрифтов.

3. Завершаем вёрстку главной страницы учебного проекта.

7. Оформление контента

Завершим вёрстку внутренних страниц и подготовим проекты к публикации. Начнём готовиться к защите личного проекта.

1. Практикуемся в вёрстке элементов содержимого.
—Сверстаем текстовую страницу учебного проекта. Подготовим универсальные стили содержания, которые будут хорошо работать и при наполнении страницы из CMS.
—Сверстаем всплывающие окна с формой входа и интерактивной картой. Разберём приёмы стилизации нестандартных элементов форм.
—Подготовим свёрстанный учебный макет к публикации или передаче заказчику.

2. Разбираем типовые случаи переполнения и способы борьбы с ними.

3. Готовим проект к защите. Подробный разбор критериев защиты выпускных проектов.

8. Введение в JavaScript

Познакомимся с JavaScript, узнаем что такое Vanilla JS и оживим некоторые блоки вёрстки.

1. Язык программирования JavaScript.
—Роль программирования в жизни верстальщика.
—Что такое DOM и зачем нам объект document.
—Зачем нужен объект window.

2. Типовые случаи использования JavaScript.
—Как найти любой элемент на странице.
—Как реагировать на события, происходящие на странице.
—Как менять CSS-стили у элементов.
—Как использовать анимацию на странице.

3. Оживляем всплывающее окно и вставляем интерактивную карту на главной странице учебного проекта.

9. Прогрессивное улучшение

Узнаем, как использовать новые возможности HTML и CSS, не ломая работоспособность вёрстки.

1. Знакомство с прогрессивным улучшением и постепенной деградацией.
—«Житейские» примеры двух подходов.
—Этапы прогрессивного улучшения.
—Влияет ли прогрессивное улучшение на скорость и эффективность разработки?
—Как добавлять улучшения независимыми и цельными слоями.
—Прогрессивное улучшение и прокси-браузеры — друзья навсегда.

2. Вносим изменения в вёрстку учебного проекта с учётом прогрессивного улучшения.

3. Немного о минификации стилей и скриптов.

Верстка-Мастер

От теории до верстки популярных шаблонов

Видеокурс по современной верстке с нуля

Для кого

Абсолютные новички

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

Начинающие верстальщики

Вы уже имеете некоторые знания: можете править страницу, вносить в нее изменения, добавлять блоки контента на сайт, сверстать что-то несложное, постоянно прибегая к посторонней помощи или поисковику

Продвинутые верстальщики и фрилансеры

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

Бизнесмены, арбитражники, рекламщики

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

Действующие веб-программисты

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

Почему вам стоит пройти этот курс

Бесценная практика

В курсе показана верстка макетов двух наиболее востребованных типов сайтов: Landing Page и интернет-магазина

Современные технологии верстки

Показано, как быстро верстать сайты, применяя новейшие технологии верстки: Flex, препроцессор SasS и сборщик Gulp

Посмотрите живое видео
от автора курса

Так кто же такой верстальщик

Чтобы ответить на вопрос, кто такой веб-верстальщик, нужно понимать, что такое верстка и какое место в этапах создания сайта она занимает.

Илон Маск рекомендует:  Что такое код iis метабаза


Верстка — это создание веб-страниц с помощью специальных языков.

Это процесс перевода макета сайта, созданного дизайнером в графической программе, в HTML-страницу. При этом используются специальные языки, которые для этого предназначены: HTML, CSS, JavaScript.

Соответственно, верстальщик — это человек, который занимается кодированием HTML-страницы.

Как создаются современные сайты

Если упрощенно рассмотреть схему создания сайта, то можно выделить следующие этапы

ПЛАНИРОВАНИЕ

ДИЗАЙН

ВЕРСТКА

ПРОГРАММИРОВАНИЕ

РАЗМЕЩЕНИЕ САЙТА В ИНТЕРНЕТЕ

Современные стандарты верстки

По состоянию на конец 2020 года на верстку налагаются определенные требования, соблюдение которых де-факто является стандартом.

Верстка должна быть:

  • Кроссбраузерной — страница должна одинаково выглядеть во всех браузерах.
  • Адаптивной — также страница должна хорошо отображаться на экранах мобильных устройств: планшетов и смартфонов.
  • Оптимизированной — верстка изначально создается оптимизированной под поисковые системы.
  • Доступной – чтобы люди с ограниченными возможностями, например, инвалиды по зрению, также могли пользоваться сайтом.

Сегодня есть много технологий, которые применяются для верстки. Если раньше были HTML и CSS, то сегодня это HTML5 и CSS3, препроцессоры, технология Flex, различные фреймворки и так далее.

Путь успешного верстальщика

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

Знает основные HTML-теги и CSS-свойства, может править контент на странице, добавлять встроенное содержимое — например, видеоролик из YouTube или карту Googlе. При самостоятельной верстке макета испытывает некоторые затруднения и нуждается в наставнике и руководителе.

Junior должен знать HTML и CSS, разбираться в работе с изображениями, аудио и видео. Обязан знать, какие есть браузеры, редакторы кода, инструменты разработчика. Средний месячный заработок: 40-70 тысяч рублей.

Можно сказать, что такое деление условно. Тем не менее, такая градация дает понять, какие навыки и знания на каждом из этапов необходимы. И самое главное — понять последовательность изучения этих технологий, языков и инструментов.

Верстка — это Must Have
для любого веб-разработчика!

Верстка — это интересная, постоянно меняющаяся область деятельности в создании сайтов. Например, раньше использовали Float и ни о каком Flex не было даже слышно. Потом появился Flex, и еще недавно его использовали с опаской, совсем чуть-чуть, а сегодня уже применяют на полную мощь.

Верстальщик — это направление, в котором можно постоянно развиваться, и очень много смежных сфер в веб-разработке неразрывно связаны с версткой.

Независимо от того, чем вы предпочтете в будущем заниматься в области сайтостроения (frontend, backend или полный цикл: fullstack), с навыком верстки вам придется сталкиваться постоянно. Верстка — это Must Have для любого веб-разработчика! Она — вход в веб-разработку.

КОМАНДА WEBFORMYSELF ПРЕДСТАВЛЯЕТ ДОЛГОЖДАННЫЙ ПРОДВИНУТЫЙ ВИДЕОКУРС ОБО ВСЕХ ТОНКОСТЯХ СОВРЕМЕННОЙ ВЕБ-ВЕРСТКИ

Верстка-Мастер

От теории до верстки
популярных шаблонов

Посмотрите видео и
узнайте о курсе подробнее

Что внутри

Основная часть видеокурса состоит из двух больших практических блоков:

  • Блок 1. Верстка макета главной страницы интернет-магазина
  • Блок 2. Верстка макета Landing Page

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

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

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

Из курса вы узнаете

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

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

Как верстать сайты, применяя современные востребованные методы, подходы и технологии верстки.

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

Как верстать кроссбраузерные адаптивные сайты практически любой сложности.

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

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

Главные фишки курса

Абсолютные новички

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

Начинающие верстальщики

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

Продвинутые верстальщики и фрилансеры

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

Бизнесмены, арбитражники, рекламщики

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

Действующие веб-программисты

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

Практический результат изучения курса

В ходе изучения основной части курса верстаются современные макеты двух наиболее востребованных типов сайтов: Landing Page и главной страницы интернет-магазина.

В нашем курсе макеты верстаются по самым передовым технологиям на рынке – с использованием технологии Flex, препроцессора SasS и сборщика Gulp. Верстка будет кроссбраузерной и адаптивной под любые устройства.

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

Сайты, которые создаются в курсе

Содержание видеокурса

Блок 1. Верстка макета главной страницы интернет-магазина

Количество уроков: 23

Продолжительность: более 5 часов

ЦЕЛИ И ЗАДАЧИ БЛОКА

В первой части курса показано, как сверстать макет главной страницы интернет-магазина.

В блоке показано, как разбить макет на необходимые блоки, как нарезать изображения из Photoshop, как настроить собственную сборку при помощи менеджера Gulp и полностью сверстать данный макет.

Урок 1. Обзор макета главной страницы интернет-магазина

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

Урок 2. Нарезка изображений из PSD-макета

В этом уроке вы узнаете несколько способов нарезки картинок из PSD-макета.

Урок 3. Сборка проекта при помощи Gulp

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

Урок 4. Реализация HTML-структуры для верхнего блока

В этом видео начинается верстка макета и создается HTML-структура для верхнего блока.

Урок 5. Написание CSS-стилей для верхнего блока

В данном видео прописываются необходимые CSS-стили для верхнего блока.

Уроки 6. Адаптация верхнего блока под различные разрешения

В этом видеоуроке реализуется адаптация верхнего блока под различные разрешения.

Уроки 7. Написание HTML-структуры для блока со слайдером

В данном уроке показано, как создать необходимую HTML-структуру для блока со слайдером.

Урок 8. Полная стилизация слайдера

В данном уроке полностью стилизуется слайдер.

Уроки 9. Медиа-запросы для блока со слайдером

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

Урок 10. Настройка и подключения плагина Owlcarousel 2 для слайдера

В этом уроке вы узнаете, как подключить и настроить плагин Owlcarousel 2, который используете для слайдера.

Урок 11. Полная верстка блока категорий

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

Урок 12. Написание HTML-структуры для блока с предложениями

В этом уроке создается HTML-структура для блока с предложениями.

Урок 13. Стилизация блока с предложениями

В данном видео добавляются CSS-свойства для блока с предложениями.

Урок 14. Адаптация блока с предложениями под различные разрешения

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

Урок 15. Полная верстка блока с баннером

В данном видеоуроке полностью верстается блок с баннером.

Урок 16. Полная верстка блока с продуктами

В данном видеоуроке показано, как реализовать верстку блока с продуктами.

Урок 17. Реализация HTML-структуры и написание стилей для блока с рекомендуемыми товарами

В этом видеоуроке показана верстка блока с рекомендуемыми товарами.

Урок 18. Подключение и настройка карусели для блока рекомендуемых товаров

В данном уроке к блоку с рекомендуемыми товарами будет подключена и настроена карусель.

Урок 19. Полная реализация блока с баннером

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

Урок 20. Верстка и адаптация блока с новостями

В этом уроке показана сверстка блока с новостями и адаптация его под различные разрешения.

Урок 21. Верстка и адаптация блока со ссылками

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

Урок 22. Верстка подвала

В данном уроке верстается последний блок футера.

Урок 23. Модернизация блока с поиском при помощи JavaScript

В этом уроке будет модернизирован блок с поиском, при клике на иконку которого будет появляться форма поиска.

Блок 2. Верстка макета Landing Page

Количество уроков: 29

Продолжительность: около 7 часов

ЦЕЛИ И ЗАДАЧИ БЛОКА

Во второй части курса показано, как сверстаете макет Landing Page. В результате, используя сборку Gulp из предыдущего блока, полностью сверстается страница Landing Page.

Урок 1. Обзор макета и подготовка к верстке

В этом видео описана подготовка к верстке, устанавливаются необходимые зависимости при помощи пакетного менеджера NPM.


Урок 2. Написание HTML-структуры для верхнего блока

В этом видео показано создание необходимой HTML-структуры для создания верхнего блока.

Урок 3. Стилизация меню и блока с информацией

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

Урок 4. Завершение стилизации верхнего блока и написание миксина

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

Урок 5. Адаптация верхнего блока под различные разрешения

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

Урок 6. Полная верстка блока с преимуществами

В этом уроке показана верстка блока с преимуществами и адаптация его под различные разрешения.

Урок 7. Полная реализация блока с историей

В данном уроке создается HTML-структура блока с историей, показано, как добавить CSS-стили и адаптировать блок при помощи медиа запросов.

Урок 8. HTML-структура для блока с услугами

В данном уроке вы узнаете, как сделать HTML-структуру для блока с услугами.

Урок 9. Написание стилей и адаптация блока с услугами

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

Урок 10. HTML-структура для блока портфолио

В данном уроке создается HTML-структура для блока портфолио.

Урок 11. Стилизация блока портфолио

В данном уроке стилизуется блок портфолио и добавляется CSS-код для заголовка, текста, разделителя, а также категорий работ.

Урок 12. Завершение стилизации блока портфолио и его адаптация

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

Урок 13. HTML-структура для блока Case Study

В данном видео узнаете, как сделать HTML-структуру для блока Case Study.

Урок 14. Написание стилей и адаптация блока Case Study

В этом уроке вы узнаете, как стилизовать и адаптировать блок Case Study под различные разрешения.

Урок 15. Верстка блока со статистикой

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

Урок 16. Написание HTML-структуры для блока с ценами

В данном видео создается HTML-структура блока с ценами.

Урок 17. Стилизация и адаптация блока с ценами

В этом уроке вы узнаете, как назначить стили CSS и адаптацию блока с ценами.

Урок 18. HTML-структура для блока с командой

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

Урок 19. CSS-стили для блока с командой

В данном видео будет продолжена работа над блоком команды, для которого пишутся все необходимые стили.

Урок 20. Адаптация блока с командой при помощи медиазапросов

В этом видеоуроке реализуется адаптация блока с командой под различные разрешения.

Урок 21. Верстка блока Great Integrations

В данном видеоуроке полностью сверстается блок Great Integrations.

Урок 22. HTML-структура для блока новостей

В этом уроке создается структура для блока новостей.

Урок 23. CSS-стили для блока новостей

В данном видео продолжится реализация блока новостей и создаются необходимые CSS-стили.

Урок 24. Адаптация блока новостей под различные разрешения

В этом видео завершается верстка блога, адаптировав его под различные разрешения.

Урок 25. HTML-структура для блока с формой

В уроке показано, как создать структуру HTML для блока с формой.

Урок 26. Стилизация и адаптация блока с формой

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

Урок 27. Верстка блока с предложением

В этом уроке будет полностью выполнена верстка блока с предложением.

Урок 28. Верстка подвала

Данное видео является последнним по верстке Landing Page. В нем реализуется и адаптируется футер.

Урок 29. Доработка мелочей и заключение

В этом видео дорабатывается верстка Landing Page, устраняются мелкие недочеты и дорабатываются детали.

БОНУСЫ

Бонус 1. Премиум-курс «Редактор NotePad++»

Автор: Бернацкий Андрей

Длительность курса: 0:42:46

Содержание

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

Среди продвинутых возможностей Notepad++ — опция подсветки текста и возможность сворачивания блоков, согласно синтаксису языка программирования. Пользователь может самостоятельно определить синтаксис языка программирования. Есть возможность настроить режим подсветки. Доступно выделение цветом директив и операторов языка программирования.

Notepad++ обеспечивает возможность одновременного просмотра и редактирования нескольких документов. Также Вы можете просматривать и редактировать в двух окнах отображения один и тот же документ в разных местах. Изменение документа в одном окне просмотра будет автоматически перемещено во второе окно просмотра (т. е. вы редактируете один документ, который имеет клона во втором окне просмотра).

В данном курсе изучается наиболее полезные для верстальщика функции Notepad++. Показывается установка и настройка. Узнаете стандартные функции редактора и как расширить его функционал, установив несколько полезных плагинов. Благодаря огромной популярности и бесплатности этого инструмента, для него написано множество плагинов. И если вам понадобится дополнительный функционал, то, скорее всего, плагин с нужным функционалом уже есть и его нужно просто поискать и установить. В курсе показано, как искать и ставить нужные плагины.

Бонус 2. Премиум-курс «Редактор Sublime Text»

Автор: Бернацкий Андрей

Длительность курса: 0:31:41

Содержание

Хороший инструмент в любой работе повышает качество работы и позволяет выполнить ее гораздо быстрее. Верстка в данном случае не исключение. Для верстальщика основной инструмент – это редактор кода. Конечно, к инструментам для верстальщика можно отнести и Photoshop и множество различных сервисов. Но все-таки самым главным, без которого невозможно выполнять основную функцию верстки, – это редактор кода.

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

Текстовый редактор Sublime Text на данный момент является одним из самых популярных текстовых редакторов, используемых для веб-разработки. Используя плагины, можно сколько угодно расширять функционал редактора и сделать его именно таким, как вам нужно. Конечно, как и любой другой редактор, в SublimeText есть и так называемые стандартные функции подсветки синтаксиса, автодополнения, смена кодировки и еще множество других полезных функций, которые упрощают написание кода и помогают экономить время и силы.

В данном курсе изучается наиболее востребованный в работе верстальщика функционал редактора Sublime Text. Показана установка и настройка. Изучаются стандартные функции и показано, как расширить функционал, установив несколько полезных плагинов. Благодаря широкой популярности, для него написано множество плагинов. И если вам понадобится дополнительный функционал, то, скорее всего, плагин с нужным функционалом уже есть и его нужно просто поискать и установить. В курсе узнаете, как искать и ставить нужные под задачу плагины.

Бонус 3. Премиум-курс «Учебник по основам HTML для начинающих»

Автор: Бернацкий Андрей

Длительность курса: 01:57:09

Содержание

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

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

Задания для самостоятельного выполнения дадут возможность лучше изучить HTML и закрепить полученные знания на практике.

В курсе разбирается форматирование текста, работа с изображениями, ссылками, списками, таблицами и формами.

Бонус 4. Премиум-курс «Учебник по основам CSS для начинающих»

Автор: Бернацкий Андрей

Длительность курса: 01:31:17

Содержание

При верстке веб-страниц HTML отвечает за разметку страницы, то есть за ее построение. А за оформление страницы, то есть за ее дизайн и внешний вид, отвечает CSS.

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

В учебнике по основам CSS для начинающих изучаются CSS-свойства и их значения.

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

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

Разделы CSS, которые изучаются в учебнике: способы подключения CSS к странице и назначения классов, оформление текста, свойства фона, размеры и отступы, границы элементов, плавающие блоки, позиционирование и видимость блоков.

Бонус 5. Премиум-курс «Верстка сайта для начинающих»

Автор: Бернацкий Андрей

Длительность курса: 01:24:02

Содержание

Как вы знаете, при создании сайтов этап верстки идет после этапа дизайна. В курсе по верстке сайта для начинающих есть приближение к реальной разработке, и верстается HTML-страница из готовой картинки формата PSD, созданной дизайнерами на предыдущем этапе.

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

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

В курсе пошагово показано, как выполнить верстку на примере конкретного проекта.

Бонус 6. Премиум-курс «Курс по HTML5. Основы»

Автор: Бернацкий Андрей

Длительность курса: 02:23:17

Содержание

HTML5 предоставляет более широкие функциональные возможности и упрощает процесс создания сайтов, нежели более устаревшие спецификации, которые все еще активно «по старинке» используются незадачливыми верстальщиками.

HTML5 — это не полностью новая технология или полностью новый стандарт, а дополненный новыми возможностями HTML4. Поэтому все что работало в HTML4 будет работать и в HTML5. Конечно, есть некоторые конструкции, которые уже устарели и в HTML5 не вошли, но об этом детально поговорится в самом курсе.

В данном премиум-курсе по HTML5 рассматриваются лишь основы, наиболее востребованные и актуальные в процессе верстки.

Рассмотриваются важные новшества, которые появились в HTML5 и которых не было в предыдущих спецификациях стандарта.

Появились новые теги, которые делают разметку страницы более структурированной и семантической: header, footer, article, nav, section.

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

Добавилось очень много полезных возможностей по работе с формами. Используя новые формы HTML5, можно избежать многих проверок вводимых данных на JavaScript. Также можно без использования JavaScript и подключения к сайту дополнительных библиотек вывести удобный календарь для выбора даты.

Теперь стало возможным рисование векторных фигур прямо в браузере. Делается это с помощью тега Canvas. Именно с помощью данного тега можно рисовать векторные фигуры, а с помощью JavaScript можно управлять нарисованными фигурами, тем самым создавая анимации, небольшие мультфильмы, и даже игры!

Так же с приходом HTML5 стало возможно хранить некоторые данные на стороне клиента, используя LocalStorage(локальное хранилище).

Еще одна полезная возможность, которая стала доступна в HTML5 — это геолокация. То есть теперь возможно легко определять местоположение посетителя нашего сайтов.

Бонус 7. Премиум-курс «Курс по CSS3»

Автор: Булыга Денис

Длительность курса: 04:46:02

Содержание

Наиболее прогрессивная и «прокачанная» спецификация CSS3 предоставляет нам множество возможностей и свойств, при помощи которых можно реализовывать различные визуальные эффекты, некоторые из которых ранее применялись только с использованием JavaScript или изображений.

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


Все возможности, которые были описаны выше, а также множество других уже доступны в CSS3.

Основными преимуществами CSS3 являются простота использования, ускорение процесса разработки и оформления web-страниц, уменьшение размера кода, практически 100% кроссбраузерность, при этом множество свойств уже можно использовать без префиксов.

Данный видеокурс от команды WebForMySelf поможем вам в изучении множества новых возможностей и свойств CSS3, которые сделают вашу работу более продуктивной и комфортной!

Бонус 8. Премиум-курс «Курс по Flexbox»

Автор: Булыга Денис

Длительность курса: 02:02:19

Содержание

В данном видеокурсе рассматривается CSS-модуль Flexbox, испольуя который можно верстать гибкие макеты различной сложности, при этом не используя float и inline-block.

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

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

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

После прохождения теории показывается верстка макета с чистого листа, начиная от написания структуры HTML и заканчивая CSS-стилями, где применяются полученные знания на практике.

Бонус 9. Премиум-курс «Курс по Sass»

Автор: Булыга Денис

Длительность курса: 01:58:51

Содержание

CSS-препроцессор — это профессиональный инструмент, который должен освоить каждый web-разработчик.

Написание кода при его использовании становится более простым и понятным, однако это является далеко не основным преимуществом препроцессора.

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

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

Однажды попробовав использовать CSS препроцессор, становится понятно, как давно этого не хватало. Поможет вам в изучении препроцессора SasS данный видеокурс от команды WebForMySelf.

Бонус 10. Курс «Размещение лендинга в интернете. Хостинг. Домен»

Автор: Булыга Денис

Длительность курса: 00:09:18

Содержание

В этом бонусном блоке вы узнаете, что такое домен и хостинг, для чего они нужны, а также купите необходимые услуги на сервисе хостинг-провайдера «Макхост».

В курсе показано, как разместить страницу Landing Page в интернете, используя в качестве файлового менеджера панель управления хостингом.

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

АВТОР ВИДЕОКУРСА
Денис Булыга

  • Автор проекта WebForMySelf
  • Успешный высокооплачиваемый фрилансер-практик, профессиональный верстальщик
  • Специализируется на верстке и дизайне сайтов, а также разработке сайтов с нуля на движке WordPress
  • В общей сложности успешно завершено более 100 проектов
  • Страница профиля на всем известной бирже фриланса, где можно увидеть примеры выполненных работ: freelance.ru/felon20
  • К слову, на одной только этой бирже у Дениса 50 положительных отзывов и ни одного отрицательного, что уже многое говорит о его профессионализме…

Что говорят
о профессионализме автора

Стоимость видеокурса

Мгновенное скачивание

Сразу после успешной оплаты на указанный вами email придет ссылка для мгновенного скачивания курса на ваш жесткий диск

Илон Маск рекомендует:  Что такое код dba_close

100% возврат средств в случае неудачи

Почему видеокурс покупать выгоднее
чем участвовать в тренингах

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

Но при этом – в 3-5, а иногда и 10 раз дешевле!

В отличие от необоснованно дорогостоящих тренингов, «растянутых» на период 6 месяцев и дольше, материалы курса, можно пересматривать многократно, без ограничения по срокам.

Вспомогательные файлы всегда можно загрузить и использовать в своей личной разработке неограниченное количество раз.

Сколько зарабатывают верстальщики

Верстальщик может найти работу не только в веб-студии или компаниях, занимающихся созданием сайтов на заказ. Эти профессионалы также нужны в интернет-СМИ, рекламных агентствах, IT-отделах некоторых организаций и так далее. Зарабатывать верстальщики в подобных областях могут в среднем от 30 до 70 тысяч рублей.

Востребованность на фрилансе

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

Нам можно доверять

WebForMyself вот уже 11 лет известно высочайшим качеством своей продукции и профессиональным уровнем нашей команды. За все это время издательство выпустило более 30 видеокурсов на самые разные темы сайтостроения и веб-дизайна.

Также мы одни из первых в отрасли разработали и запустили революционную платформу предоставления постоянно обновляемых качественных материалов в режиме онлайн для веб-разработчиков с доступом по подписке – Премиум-Клуб.

ГАРАНТИИ

WebForMyself предоставляет на все свои продукты уникальную 4-уровневую гарантитворенности

БЕЗУСЛОВНЫЙ ВОЗВРАТ ДЕНЕЖНЫХ СРЕДСТВ ПО ПЕРВОМУ ТРЕБОВАНИЮ

WebForMyself официально гарантирует вам полный безусловный возврат стоимости курса, если вы по каким-либо причинам посчитаете, что знания и навыки из курса оказались вам бесполезными.

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

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

ВЫСОЧАЙШЕЕ КАЧЕСТВО*

Все уроки — эксклюзивные, актуальные и подробные, тщательно подготовленные лично мной, профессиональным верстальщиком Денисом Булыгой.

Вы на наглядных примерах с полного нуля увидите верстку PSD-макетов для главной страницы интернет-магазина и для посадочной страницы (Landing Page).

ПОЛУЧЕНИЕ КУРСА

Этот видеокурс предоставляется только в электронном виде – это значит, что ссылка на скачивание на ваш компьютер будет доступна сразу же после оплаты.

Объем видеокурса составляет 8,4 Гбайт – скачивание займет от нескольких минут до нескольких десятков минут (в зависимости от скорости вашего Интернет-провайдера).

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

Если вдруг (всякое бывает!) ссылка не работает — просто напишите в службу поддержки. Мы сразу устраним проблему и вы в кратчайшие сроки начнете работать с курсом.

ОТЗЫВЫ КЛИЕНТОВ

(на другие продукты WebForMyself.com)

Понравилось качество курсов, их оформление, профессионализм авторов не вызывает сомнений

Вопрос: Опишите себя в начале пути?

Ответ: В начале пути у меня было огромное желание сменить основную профессию на более интересный и денежный род занятий .

Вопрос: Опишите себя сейчас?

Ответ: Сейчас у меня этой решимости только прибавились. Имея за плечами больше 20 лет педагогического стажа, поняла, что это совсем не то, чем мне хочется заниматься сейчас и в дальнейшем. Совсем уходить из преподавания мне бы не хотелось. Идеальный вариант: остаться работать на 0,25 ставки, а остальное время заниматься разработкой сайтов на заказ. Тем более сейчас, когда уровень знаний значительно вырос по сравнению с началом пути.

Вопрос: Что впервые подумали, когда узнали о нашем проекте? Какие мысли у Вас возникли?

Ответ: Очень крутой проект. Нужно познакомиться с ним поближе. Обязательно воспользоваться материалами вашего проекта.

Вопрос: Что Вам понравилось?

Ответ: Понравилось качество курсов, их оформление, профессионализм авторов не вызывает сомнений .

Вопрос: Какие у Вас были ощущения?

Ответ: Полный восторг от процесса изучения.

Вопрос: Какие перемены к лучшему произошли в жизни?

Ответ: Курсы помогли систематизировать разрозненные знания, и появилась уверенность, что у меня все получится .

Мне вас посоветовал мой хороший знакомый, который уже был на тот момент вашим клиентом

Вопрос: Жизненный опыт?

Ответ: Так уж получилось, что я пошёл учиться по специальности программиста практически случайно (это была вторая специальность по приоритетам). После обучения посчастливилось сразу устроиться программистом 1С, в итоге я задержался в этой сфере на целых 5 лет.

В итоге, когда в этом стало совсем скучно ковыряться, решил кардинально сменить профиль деятельности и стал ассистентом режиссера на региональном ТВ.

В перерывах между монтажом ТВ-программ решил начать самостоятельно изучать PHP, к тому же, в этот момент у меня появился курс по PHP от Webformyself — собственно, это и дало толчок к возвращению в профессию программиста, но уже с уклоном только на веб.

Первым коммерческим опытом веб-разработки был проект, который я разрабатывал на Joomla, это было долгое, трудное, малоденежное занятие, но я выдержал этот период, набрался опыта и начал понимать, как работать на результат, и как общаться непосредственно с заказчиком. Далее был самостоятельный опыт разработки пары магазинов на Joomla+Virtuemart, знания и решения черпались непосредственно с курса «Интернет-магазин на Joomla» (https://webformyself.com/jshop/).

Затем в жизни случился крутой поворот, я заключил первый полноценный контракт с IT-компанией. После налаживания всех внутренних процессов и понимания стратегии компании, у меня появилось время для дальнейшего саморазвития в области веб-разработчика. Остановил свой выбор на PHP-фреймворке Yii2 и, без сомнений, приобрел курс на эту тему у команды webformyself (https://webformyself.com/yii2/).

Вопрос: Что Вы скажете по поводу возражений, с которыми Вы, возможно, сталкивались перед покупкой информационных продуктов, как преодолевали данные возражения (нет денег; у меня не получится; слишком поздно начинать; слишком рано начинать; родственники против; слишком сложно; возможно, какие-либо Ваши возражения)?

Ответ: В этом плане сомнения были минимальными, и только в одном — насколько быстро окупятся потраченные средства. А в том, что они окупятся, была полная уверенность.

Вопрос: Назовите самые значимые для Вас убеждения и ценности в жизни в целом и веб-разработке в частности?

Ответ: Главное в жизни — это любовь. Что касается веб-разработки — постоянное развитие и принятие новых вызовов.

Вопрос: Какую проблему Вы пытались решить, какие проблемы испытывали до приобретения курса?

Ответ: Была основная проблема: так как я был полным новичком в мире веб-разработки — у меня не было четкого структурированного плана о том, с чего начать, и в каком направлении действовать. После приобретения курса по 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 и т.д. и я знаю как с этим работать. Я знаю, как находить свои ошибки или опечатки, как написать движок под свои нужды, как его можно изменить, модернизировать.

Больше всего, помимо качественной подачи материала, мне нравится стиль подачи. Т.к. всё же мы изучаем материалы самостоятельно, то многие моменты приходится пересматривать несколько раз. Мне нравится что в курсе чёткая структура уроков, я сразу знаю какой урок мне необходимо повторить, чтобы уточнить какой-либо вопрос. Я изучаю записи по нескольку часов и не устаю от прослушивания: голос у авторов курса приятный, спокойный, не торопливый. Это очень важно для меня.

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

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

Базовый курс для верстальщиков

Курс: «Базовый курс для верстальщиков» . Материал от профессионалов веб-разработки. Если вы хотите освоить данную профессию — смело можете начинать с этого материала. Вы узнаете про основы, попрактикуетесь и сможете двигаться дальше. Отзывы хорошие. Данный материал рассчитан на новичков. Материал прислал анонимный пользователь без комментариев.

Материал может быть удален по запросу правообладателя!

Описание курса:

Кому полезен этот курс:

  • Новичкам. Хочешь научиться самой востребованной интернет профессии? Обязательно приходи к нам.
  • Бэкендерам. Давно уже работаешь с серверной частью проектов, но хочешь научиться менять визуал сайтов? Тебе к нам!
  • Веб-дизайнерам. Давно рисуешь сайты, но хотел бы сам научиться верстать? Посети курс и на практике узнаешь как создаются сайты.
  • Маркетологам. Не хватает основ веб-разработки для продвижения сайтов? Мы поможем восполнить этот пробел.
  • SMMщикам. Работа SMM, как правило, неразрывна с поддержкой сайтов. Самое время изучить основы веб-разработки.
  • Предпринимателям. Сложно представить современный бизнес без сайта. Освой азы, чтобы общаться с разработчиками на одном языке.

Во время обучения мы верстаем сайт, который так или иначе будет связан с темами курса. Будет интересно!

По окончанию курса у Вас будет две сверстанные странички, которые будут храниться в личном профиле GitHub. Первая страничка — это вёрстка по учебному макету, вторая — по самостоятельно выбранному макету для закрепления всего материала.

Программа обучения:

  • Стартовая лекция:

— Разбор основ программы Adobe Photoshop;

— Работа с изображениями;

— Подготовка проекта к верстке;

— Структура html-документа (html, head, body) ;

— Обзор популярных тегов HTML;

— Обзор семантических тегов HTML.

— Идентификаторы и классы;

— Aтрибуты для input и textarea;

— Отличия между button и a;

— Ссылки для социальных сетей;

— Работа с почтой и скайпом;

  • Подключение CSS, работа с текстом:

— Подключение CSS к документу HTML;

— Способы подключения шрифтов на страницу;

— Форматирование текста при помощи CSS;

— Стили для работы со шрифтами;

— Разные типы записи цвета в CSS документе;

— Селекторы, которые стоит знать и применять;

— Типы позиционирования элементов;

— Установка favicon на страницу.

— Стилизация ссылок и кнопок;

— Работа со списками;

— Работа с after и before;

— Центрирование объектов в документе;

— Отступы padding и margin;

— Загрузка изображения через CSS;

— Создание градиента в CSS;

— Создание рамок CSS;

— Создание радиусов CSS;

— Создание внешних рамок CSS;

— Трансформации в CSS;

— Создание анимаций при помощи CSS3

— Проверка HTML и CSS на валидность;

— Основные правила создания адаптивного сайта;

— Отличия резиновой верстки от адаптивной.

— Сохранение SVG-изображений в Illustrator;

— Создание SVG через теги;

— Cоздание паттернов SVG.

— Правилам верстки email;

— Создание на примере;

— Сервисы, для выгрузки своего шаблона;

— Добавление библиотеки jQuery на страницу;

— Отобразить и спрятать объект с jQuery.

— Обзор плагина jQuery UI;

— События наведения и смещения указателя мыши;

— Распространенные задачи, решаемые с помощью jQuery.

— Подробный обзор SASS;

— Краткий обзор LESS;

— Краткий обзор Stylus;

— Какой препроцессор выбрать для работы?

  • Создание сайта на бесплатном хостинге Github:

— Краткое описание систем контроля версий. Для чего они нужны?

— Регистрация на сайте Github;

— Наполнение репозитория файлами.

— Что такое CSS-фреймворки?

— Какие CSS-фреймворки существуют на сегодняшний день?

— Bootstrap: какую версию выбрать?

— Обзор элементов Bootstrap.

— Как найти свой первый заказ или устроиться на работу, если ты новичок;

— Выясним, что лучше подойдет именно тебе: офис, удаленная работа или фриланс;

— Самоорганизация и работа в команде: рассмотрим популярные сайты и приложения по управлению проектами;

— Список актуальных фриланс-бирж.

Материал предоставлен исключительно для ознакомления!

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL