Базовый интенсив HTML Academy (17 октября - 23 ноября)
С замечательным ресурсом HTML Academy я познакомился еще в самом начале своего пути (пару-тройку месяцев назад) и был просто в восторге от предоставляемого материала и его подачи. Поначалу, все казалось так просто и легко, но как же я заблуждался))
Испытания заставили так напрягаться, как я не напрягался, наверно, со времен вступительных экзаменов в универ)
Не знаю, что меня останавливало пройти интенсив раньше, но тем не менее, этот момент настал))
Читая статистику с отчетов о прошедших интенсивов, я удивлялся, что количество успешно сдавших и защитивших свои проекты выпускников в целых два раза, а то и больше половины, меньше, чем всего участников интенсива. Для себя поставил задачу - оказаться в числе выпускников, причем - не только по минимальным критериям, а еще и с дополнительными)) Выложусь на все сто, это я гарантирую)
Критерій завершення
Успешно сданы и защищены учебный и личный проекты.
-
Введение
-
Что на самом деле происходит, когда вы вводите в браузере адрес сайта и нажимаете Enter?
-
Инструменты веб-разработчика и рабочий процесс на интенсиве. (Git, GitHub)
-
Выбор наставника и личного проекта
-
-
Разметка
-
Введение в HTML и CSS.
-
Качественная разметка и стили кодирования.
-
Создаём разметку главной страницы учебного проекта.
-
-
Фотошоп для верстальщика
-
Типовые задачи верстальщика в фотошопе.
-
Обзор форматов графики в вебе.
-
Разбор графических макетов проектов.
-
-
Сетки
-
Поток документа и блочная модель документа.
-
Как управлять потоком и строить сетки?
-
Создаём сетку главной страницы учебного проекта
-
Экспериментируем с «карточными» элементами интерфейса на блочно-строчных элементах.
-
-
Декоративные элементы
-
Позиционирование.
-
Другие важные приёмы. (спрайты, псевдоэлементы, подключение шрифтов)
-
Завершаем вёрстку главной страницы учебного проекта.
-
-
Оформление контента
-
Практикуемся в вёрстке элементов содержимого
-
Разбираем типовые случаи переполнения и способы борьбы с ними.
-
Готовим проект к защите. Подробный разбор критериев защиты выпускных проектов.
-
-
Введение в JavaScript
-
Язык программирования JavaScript.
-
Типовые случаи использования JavaScript.
-
Оживляем всплывающее окно.
-
Вставляем интерактивную карту на главной странице учебного проекта.
-
-
Прогрессивное улучшение
-
Знакомство с прогрессивным улучшением и постепенной деградацией.
-
Вносим изменения в вёрстку учебного проекта с учётом прогрессивного улучшения.
-
Немного о минификации стилей и скриптов.
-
-
Финал
Висновок
Щоденник мети
FINAL!
Ну что, вот и завершились эти сумасшедшие пять недель))
Без пререканий с проверяющим не обошлось, так что пришлось отстаивать свою позицию и доказать, что он или она - не прав(а).
Если честно, то очень грустно было смотреть финальный вебинар, жаль, что это все закончилось.
Время пролетело очень быстро.
За это время я подтянул и структурировал все свои базовые теоретические знания по HTML и CSS, теперь я знаю, как применить то, что раньше знал только в теоретическом плане))
Да и Фотошоп оказался не таким страшным))
Теперь только практика,практика и практика! Ведь впереди продвинутый интенсив и интенсивы по JS))
Все только начинается, первый шаг большого пути сделан.)))
Академия - лучшие!)
Готовая сборка репозитория проекта на GH-Pages: https://sokolovag.github.io/275301-sedona/
От Вас тоже готов выслушать код-ревью))
UPD:
ДА, к сожалению, не получилось выжать 100%, итоговая оценка - 97%.
Не справился с переполнением контентом и немного придрались к разметке фильтра, ну и хрен с ним))
Все готово к проверке, но что-то я волнуюсь))
Перед отправкой еще раз пробегусь по макету с наставником.
Кроссбраузерность проверил, через автопрефиксер прогнал, осталось разобраться с минификатором, потому что CSS Compress сжимает код так, что компилируется потом только половина кода. Наверно заюзаю Prepros, препроцессорный компилятор. Там и автопрефиксер встроен.
Затянул, конечно с мелочными правками и отправкой проекта на проверку, но, семейные дела и работа, иногда вносили свои правки))
В общем, в отпускную неделю, делал почти большую часть работы, начиная с правки сеток)
Проверяющие могут оказаться разные, кому-то, например, выставили замечание за количество строк в CSS! о_О?
Количество строк, Карл!
Ну, конечно такие бредни решаются с помощью кураторов, но, надеюсь, что мне попадется более адекватный проверяющий.
Последние причесывания верстки идут по плану, сегодня добиваю js и готовлюсь к отправке на защиту.))
Это было очень непросто и сейчас, не смотря на кашу в голове и строки в CSS овер 1000 +, работа уже радует глаз)
Как-никак, это первый сверстанный макет)) первая практика и я очень рад, что пошел на этот интенсив, наставник дал очень и очень много.
А уж то, как мы сдружились с нашей группой и планируем дальше поддерживать друг друга в прокаче, радует еще больше)
Академия дала мне многое, за эти несколько недель)) итоги, напишу уже после защиты)
AiS, конечно)) здесь мой репозиторий проекта - https://github.com/SokolovAG/275301-sedona, а здесь сборка предпоследнего пулреквеста - https://htmlacademy-htmlcss.github.io/275301-sedona/6/index.html)
На текущий момент дорабатываю pixel perfect и js)
Вот и начался мой учебный отпуск, куча свободного времени и еще большая куча того, что нужно доделать)
Из основного:
- добить стили второй страницы;
- проверить страницы на переполнение контентом;
- стилизовать форму (совсем ее не трогал);
- подключить js - добавить карту и всплывающую форму;
- различные мелочи - использовать спрайты, сжать стилевой и js файлы, проверить pixel perfect..
Сегодня последний технический вебинар о прогрессивном улучшении и остается 9 дней до последней даты, когда можно отправить проект на финальную проверку.
Что-то я сейчас думаю об этом всем и немного волнуюсь, но наставник сказал, что все оставшиеся детали по моему проекту можно добить за два дня... ох и оптимист он, я скажу)))
Медленно, но верно стилизация страниц доводится до финального вида)
На работе, видимо в догонку перед отпуском загрузили так, что второй день подряд, придя домой, только одно желание - лечь и не двигаться)
А тем временем осталось добить вторую страницу почти целиком))
Ничего, отпуск аж неделя, все добью!
С работой же сейчас сил почти никаких.. плывут немного иконки соц-сетей, плюс, начиная с этого интенсива Академия убирает работу с иконочным шрифтом и все кастомные чекбоксы и иконки, приходится резать с фотошопа, а для более высшего балла все запихать в спрайт))
Я попробовал, забыв посмотреть координаты в http://spritegen.website-performance.org/ пытался сам подобрать координаты по пикселю буквально)) сейчас смешно это вспомнить, но тогда думал, что всех убью)))
В четверг уже лекция по JS) ДЗ все копится и копится, с картой проблем не будет, главное оживить форму)
Отличные отпускные дни))
Леха, не знаю, просто сказали, что постепенно отходят от иконочных шрифтов и что на следующих интенсивах их уже не будет, хотя в архиве макета папочка icons есть)
В чем причина, до нас не донесли, к сожалению)
Александр Соколов, вот статья о том, почему не нужно использовать иконочные шрифты https://spark.ru/startup/atom-m-cms/blog/13352/seriyozno-ne-ispolzujte-ikonochnie-shrifti
А со спрайтами я тоже не смогла сегодня разобраться, вроде бы и создала его, но по координатам иконка не посередине получается.
Сетку приняли))
Оказывается, многие из наших просто удаляли контент, подкрашивая блоки различными бэкграундами и так сдавали на проверку, а я запаривался еще и с положением контента... ну вот и нахрена?
Ладно, начинается все самое интересное - декоративные элементы))) начинаем доводить макет до финального вида)
А заботливый наставник скинул нам упражнялки для глаз - http://blimb.su/ чтобы мы не перенапряглись за эти выходные!))))
Deuce, да, просто сдал бы быстрее и не парился так)) даже список меню в инлайн-блок выстраивать не надо было)
Я не ожидал, что будет так тяжко с сеткой, а тем временем в чате, во всю расхваливают флексы)
Ну уж нет, я разделаюсь с этими флоатами))
Как я уже заметил, обычный алгоритм верстки статического макета - следующий:
- нарезка графики;
- HTML-разметка;
- Разметка сетки параллельно с основной стилизацией (за исключением мелких деталей и т. д. )
- Стилизация кастомных элементов;
- ну и еще различные мелочи...
Так вот к чему это я? К тому, что на интенсиве иной алгоритм. Ну это-то и понятно, все темы изучаются постепенно и сама верстка проекта идет в этом же ключе.
Поэтому переверстывать приходится снова и снова и все эти строки уже начинаются сниться)
Наверно сейчас, я в полной мере ощутил, что такое интенсив. Шаг влево-вправо от графика и все, ты отстал..
Впереди три больших выходных и еще через недельку отпуск, так что догоню упущенное)
Марина, стараюсь, хотя иногда хочется сорваться))) как сейчас например, взять и переверстать все с нуля))
Беда-беда, огорчение...
Выходные пролетели мимо, в разруливании семейных дел.
Чуть не сорвалась поездка на Новогодние праздники. Вернее, все-таки пришлось вносить большие правки, в уже железные планы.
Все в итоге разрешили, но полученный нервяк не позволил нормально сосредоточиться на сетке личного проекта и, после часа мучений и попыток нормально расставить блоки, плюнул и закрыл ноутбук.
Сегодня буду общаться с наставником и пошагово разбирать макет.
С теорией все в порядке, она понятна на все 100%, но на практике выходит какая-то хрень!
Да еще и времени столько прошло мимо!
Придется по вечерам после работы нагонять все, чтобы успеть до следующего вебинара.
Переживаю, что не уложусь.
Помню, несколько недель назад, когда я готовился к интенсиву и проходил курсы Академии, я писал "Сетки и блочная модель - оказались одними из самых легких курсов". Надо было, чтобы кто-нибудь мне сказал: "Это ты еще реальный макет не верстал!"..
Сижу вот так: о_О , смотря на макет Седоны.
Ну-с, будем пробовать, что уж там..)
Grey_Fox, конечно!)) следить за прогрессом проектов можно тут - https://github.com/SokolovAG :)))
репозитории sedona и barbershop)
