Skip to content

Учебный проект «Cat Energy». Модуль «HTML и CSS. Адаптивная вёрстка и автоматизация»

Notifications You must be signed in to change notification settings

pmayorov/html-academy-cat-energy

Repository files navigation

Проект «Cat Energy: Функциональное питание для котов»

08-04-2023

Мысли в слух: когда что-то не получается, необходимо все-таки прочитать документацию (в который раз!). Немного помучался с transition-переходом для элемента слайдера, который передвигаю в ячейке при помощи justify-self: start / end. Но как оказалось, на это свойство не распространяется действие transition.

Вообщем – Animatable CSS properties

На этом решил проект закончить. Перехожу к следующему разделу обучения и новому проекту.


07-04-2023 "Завтра продолжить" не получилось, два дня посвятил старому доброму навыку – верстка полиграфии (надо было). После чего и продолжил работу со кото-слайдером.

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


04-04-2023

Решил "оживить" слайдер на главной «котэ-толстый vs котэ худой».

Ессн, легких читай тупокопипастных путей не ищем, но без ознакомления с готовыми решениями ессн не обойдусь. Из разнообразия вариантов на codepen-е нашел себе наиболее подходящий для понимания: div > div + input type="range" + совсем чють-чють JS-та (правда там был еще мне непонятный JQuery), но мой друг и товарищ ChatGPT - рефакторил его в более удобоваримый на данный момент - нативный JS. Теперь хочу не просто вклеить готовое решение в свой проект, а сначала понять как это работает и потом уже пользоваться.

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

Завтра продолжу.


Январь 2023

Мой первый учебный адаптивный проект. Верстал подглядывая в эталонное решение, вспоминая забытое после длительного перерыва и вместе с тем читая много теории. Поэтому делалось очень долго. Начал (о-ужас!) в середине января. Закончил в начале марта. После чего занялся проектом Sedona и по окончании которого автоматизировал оба проекта.


• Профессия «Фронтенд-разработчик #2» HTML и CSS

• Модуль #2 – «Адаптивная вёрстка и автоматизация» от HTML Academy

• Репозиторий онлайн-курса «HTML и CSS. Адаптивная вёрстка и автоматизация» от HTML Academy

About

Учебный проект «Cat Energy». Модуль «HTML и CSS. Адаптивная вёрстка и автоматизация»

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published