Giter VIP home page Giter VIP logo

pmayorov / html-academy-cat-energy Goto Github PK

View Code? Open in Web Editor NEW
2.0 1.0 0.0 27.56 MB

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

Home Page: https://pmayorov.github.io/html-academy-cat-energy/source/index.html

HTML 32.91% JavaScript 14.09% SCSS 49.56% CSS 3.44%
htmlacademy adaptive-layouts flexbox grid-layouts html-css sass-scss gulp

html-academy-cat-energy's Introduction

Проект «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

html-academy-cat-energy's People

Contributors

pmayorov avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.