• Профессия «Фронтенд-разработчик #2» HTML и CSS
• Модуль #2 – «Адаптивная вёрстка и автоматизация» от HTML Academy
• Репозиторий онлайн-курса «HTML и CSS. Адаптивная вёрстка и автоматизация» от HTML Academy
Пока учусь решил для себя самого писать мысли, переживания и прочее, что накипает в течение учебного дня :) Это, даже, немного помогает мне в освоении новой для себя профессии.
03-04 (ПН) Проект смерджил, запушил. Не шлифовал, вообщем-то.
02-04 (ВС) Забыыыыл! Забыл проверить "Седону" на переполнение! Ну, никак не закончу проект! Так, это еще маленький – учебный. Что и говорить про нормальные – рабочие! Чем сегодня и займусь!.. P.S. Проверкой на переполнение занимался условно и поверхностно. Тут такая ситуация - пока работаю над проектом, а это сейчас около 2+ недель (!), он меня настолько утомляет , что на "шлифовку" сил не остается вообще. Очень надеюсь, что следующие проекты будут даваться легче и соответственно буду их шлифовать и доводить в остальном до стандарта.
01-04 (СБ) Просмотр лайва. Раздел 8. Погружение в автоматизацию. Основы gulp.js. Помогло вникнуть в тему, то что предварительно прошел разделы JS (условия, циклы, массивы, объекты, модули).
30-03 (ЧТ)
Проект закончил.
Перехожу на автоматизацию
Проекты действительно хорошо продуманы для прокачки навыков. Я предполагаю каждый проект по своему.
Очень важно стилизовать в макете всё: каждый блок, каждый элемент и модификатор. Когда все это прорабатываешь и не "срезаешь углы" начинаешь помнимать для чего «вот-это-всё-там-так-сделано» :).
Даже сегодня, когда в "Седоне" расставлял адаптивные иллюстрации для разных разрешений пришлось рефакторить весь промо-блок. И позиционирование фонового растра, и разная высота родительского контейнера на главной и остальных страницах - неспроста. Осознал все ньюансы фонового позиционирования, масштабирования и заполнения контейнера.
Вообщем проработка всех элементов проекта, на которые тратишь уйму времени, которые добавляют головной боли верстальщик вдалбливает понимание теории через такую вот практику.
З.Ы. Срезался на формах. Явно их не доработал - они меня утомили очень сильно. Может вернусь, а может и нет. Боюсь :) их.
28-03 (ВТ) Фото-видео - закончил.
Вывел по PP почти все блоки и элементы, кроме некоторых мелких. С ними решил пока не возиться не тратить нервы и время, в пользу дальнейшей работы с адаптивом фотографий макета.Чем завтра и займусь.
З.Ы. Даже немного рефакторил код в активных состояниях декортативных SVG-шек размещенных через CSS.
27-03 (ПН)
Разметка страницы фото-видео.
Как ни странно, но процесс прошел более менее норм (даже как то расслаблено), без мозговых штурмов. "Нарезал" сетку для разных адаптивов. Основое время уделил верстке контрол-панели видео. Очень возможно, что завтра доделаю.
26-03 (ВС) "Sedona" - внес некторые правки в форме к активному состоянию полей ввода.
Начал разметку фото-видео-раздела. На этом же этапе расписываю БЭМ-блоки-элементы.
Изначально решил не расписывать классы сразу, а по мере продвижения работы над страницами проекта, и не прогадал. Ведь в процессе нарабатывается опыт, навыки, понимание и соответственно на каждой последующей странице БЭМ расписывается уже более осознано.
JS - Базовые структуры данных - раздел закончил, т.о. можно переходить у просмотру скринкаста и дальнейшей автоматизации проекта, но... планирую закончить "Седону", а потом уже автоматизировать оба проекта, ведь на фоне работы с "Седоной" я уже и забыл, что меня все еще ждет "Кэт Энерджи".
А пока буду доверстывать Седону до стадии автоматизации и дабы не забыть пройденное по JS - можно порешать задачки из соответствующего раздела Академии.
25-03 (СБ) Формы – все!
Косо-криво: 3х уровневая вложенность + высокая специфичность, лишние обертки, корявый БЭМ, но так, если начну шлифовать, то запутаюсь еще больше и психану :)
На очереди раздел фото-видео и последние разделы JS - объектов.
24-03 (ПТ) "Кто молодец? Я - молодец!" (с) Тот редкий случай когда я доволен собой :) Сегодня работал с модальными окнами формы. Разметил и оживил с помощью JS. Правда, это не состоялось так быстро без помощи ChatGPT. Сегодня он-она-оно был моим ментором и помощником. На все вопросы был ответ и в итоге я получил тот результат который и планировал. Завтра вероятно возьму отдых, а в понедельник дошлифую форму. Там что-то еще все таки осталось.
23-03 (ЧТ) Планировал сегодня закончить работу над формой, но вынужден отложить сие на завтра. Осталось сделать модальные окна и некоторую декорацию по макету. Сейчас хочу заняться JS - тренажерами (Объекты).
22-03 (СР) Формы! Они мне по ночам уже снятся :))))
Посмотришь на них – ничего сложного. Не исключаю, что для многих так и есть, но не для меня. День "воевал" с сеткой формы Седоны. Какая-то тут она изподвыподвертная :). В мелочах – там отступы разные, сям выравнивание в другую сторону, там гапы различаются, сям - еще какая то несимметричность, ну вообщем все как в жизни. И вся моя выстраданная БЭМ-методология страницы – під три чорти. Вообщем, с трудом, но натянул сову на глобус. В итоге, костыль на костыле и костылем погоняет. Стыдно такое на Гит заливать.
21-03 (ВТ) Ааааааа! Формы, курво!
20-03 (ПН) Подключил шаблонизатор Twig. Сделал тестовый шаблон по мануалу. Прикольно, красиво, но пока что ничего непонятно :). Закомитил сие на отдельную ветку, буду потом разбираться. Тема обширная.
Работал с адаптивной сеткой страницы формы. Опять, все как впервый раз...
Категорически нехочу копипастить предыдущие решения, т.е. в очередной раз запускаю мозг в режим анализа макета и фактически заново пишу тот же код (ну, почти тот же), однако мне мне архиважно тренировать закостенелый мозг (быстро?!) анализировать макет и находить решения, чтобы не тупить, когда не будет похожего или эталонного.
Опять же, когда в который раз размечаешь сие и делаешь ошибки, и находишь решения – это "+" в виртуальную копилку опыта и навыков. А она у меня еще очень маленькая. По времени долго получается. Вообщем, завтра продолжу. А пока что, в JS тренажеры - Функции меня ждут.
19-03 (ВС) Главную закончил :))) в очередной раз - дописал hover-active-focus
Перед работой с остальными страницами хочу почитать про шаблонизаторы, чтобы не копипастить хедера и футеры.
Начну с Twig-а.
18-03 (СБ) Предварительно Главную закончил.
Хотя, остались нерешенные моменты:
- Заголовки - в некоторых вьюпортах переносятся явно принудительно, а это либо
либо ограничение width - но оба варианта какие-то не универсальные что-ли. Вообщем, еще не знаю как подойти к этому. - Надо поменять местами две карточки в планшетно-десктопно вюпорте - вот почему то оставил на потом.
- Копки соцсетей - подровнять.
- Может еще что-то... т.к. из своего газетно-издательского прошлого знаю, сколько материалы не вычитывай, все равно будут находится ошибки.
Все пока оставляю на этап шлифовки. Пора переходить на следующие страницы. Уже неделю топчусь с главной ...
P.S. ХА!!! Непростительно! Смотрю не стилизовал hover-active-focus. За лесом деревьев не увидел. Чем сейчас и займусь!
16-03 (ЧТ) Сегодня день был менее "героическим" нежели вчерашний ибо поглотила рутина :)
Продолжаю "мусолить" главную страницу. Решил проверить верстку на PixelGlass и исправить несовпадения.
Для себя сделал вывод, что не стоит проверку откладывать на последний момент. К примеру, когда выводил блоки, приходилось рефакторить некоторые правила, а не тупо маргины с паддингами менять.
Мдя, не получилось закончить главную, как я вчера планировал. Может завтра? И да, еще не вечер - надо "погрызть" JS.
15-03 (СР) Когда коту нечего делать ...
Сегодня возился с главным навигационным меню :) с чего-то мне захотелось, чтобы оно переполнялось красиво... мда! После чего уделил время его без JS-му поведению и только к вечеру начал работать с остальными блоками главной страницы. Вообщем, уже никто никуда не торопится :)
13-03 (ПН) Спойлер - ну, нельзя столько времени тратить на элементарщину, так я денег в будущем не заработаю!
Весь день работал над адаптивом главной.
Условно говоря, просмотрев лайвы, пройдя тренажеры, написав 100500 конспектов и даже сверстав пару макетов под копирку - это ни о чем!
А вот работать над проектом не имея эталонной верстки, самостоятельно и без подглядываний через плечо коллеги - трохи другое. А если еще "в голове опилки" - это боль...
Вообщем, боролся с гридами в адаптиве, спотыкаясь на элементарных мелочах и тупил на ровном месте, но мелкими шагами продвинулся вперед. Дорогого стоит обучение ибо КПД, как у паровоза!..
Завтра планирую стилизовать заголовки, текст, поработать с сеткой хедера с главным меню (сегодня его и не трогал, вообщем-то).
З.Ы. Еще не вечер (19:00), поэтому сажусь за тренажеры по JS - массивы меня ждут.
12-03 (ВС) Разметку страниц закончил. Начинаю классифицировать макет по БЭМ.
10-03 (ПТ) Дабы наработать навыки верстки и не зацикливаться на одном проекте (изматывает) начал верстать Седону. Этап – разметка крупных блоков.
Written with StackEdit.