HTML - CSS - Javascript (Web Dev Log)

[Соня (Bruja)]

Демо Игры

Демо Игры на Phaser 3 и  javascript, здесь, на сервере ПостНагвализма.


Большая часть из них курсовые и учебные проекты Codecademy

Поймай Крота Раскопателя!

Электро-Мышь и Битва с Лысым Психованным Котом!

Раскраска - Перекрась Пегаса!

Охотник за Сокровищами! Откопай три Золотых монеты бастрее чем Пират!

Нравится Музыка? Можно поклацать по клавишам онлайн Пианино!

Бесконечный прыжок Коди! Бесконечная Лестница в Небеса!



А это по официальному уроку от создателей Phaser 3

Звезды с Небес! Платформер




_________________________________________________________

Работаю  над версткой веб страницы (домашнее задание)

Нужно создать с нуля веб страницу для компании или фирмы.
Для фирмы,  настоящей или придуманной используя только css flex.
(Пока без сетки css grid)

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

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

Используется в создании только Css и html.
Требование не использовать css grid,
работать только используя flex для адаптивности ( тянучести).

Готовая работа ложится в портфель ( портфолио),  как в личное ( по желанию), так и в портфель  профиля академии (обязаловка).


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

Скрины в процессе  - "проблемные" места на разных экранах.
Вижу там буква вылезла за контур в заголовке, на самом узком экране (телефон).

Это решается позже, контролем над шрифтами на разных экранах с помощью css - @media

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

А клик по картинкам галлереи - переводит на страницу (не существующую пока) конкретно этого продукта.
Их появление не зависит от меня. Поэтому пока ссылки (картинки с домиками) открывают пустую страницу.

Осталась еще пара блоков и можно сдавать.

[Соня (Bruja)]

Ну вот, работа закончена и сдана.
Ее можно посмотреть в живую, а так же все исходные коды в репозитории GitHub
Ссылки и описания заданий в переводе приложу позже.
https://mtapirina.github.io/flexbox_business_site/

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

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

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

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

Нырять мы ездили по многим побережьям Испании, и за границу ( Коста Рика, Египет  и т.д.).

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

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

Так что веб страница клуба наверняка будет страницей посвященной тому клубу, это решено!

[Соня (Bruja)]

Самое смешное, что мозг так погружантся в работу, что и во сне продолжает корпеть над решением проблемы. И вот такие сны превращаются в построение сложных конструкций, миров или городов, которые населяют  куски кода в образе местных жителей. То образ вполне человечий, но суть и характер, а так же то, чем этот очеловеченный функционал занят - отвечает куску кода и понятию, которое такой житель собой представляет.
И вот решаю проблему например какого то особенного представления например заголовка или баннера для сайта, либо поведения элементов, в подобных снах - это выражается то детективным расследованием и поиском " преступника" либо просто погоней и преследованием непокорного мне персонажа в образе персоны... порой вид у них не вполне человеческий. Ну и сама я даю себе отчет, что именно происходит. То есть идет раздвоение внутренннее - одна я полностью в сцене, занята погоней или поисками или расследованием. Другая, можно сказать не спящая я - все это наблюдает. И видит как и всю картину в целом, так и все повороты мыслей у заигравшейся в сцене части ( типа меня)... это довольно скоро мне дает видеть свои ошибки в работе с проектом. Я ведь еще только учусь, и опыта у меня мало. А все эти коды только с практикой становятся понятными, запоминаются, где что надо написать что бы получить определенный результат на странице веб..
Примечательно, что если сон окончится удачно, то есть схвачу я за хвост нужного персонажа и " припахаю" к определенному делу, то и проснувшись, сев за проект - замечаю, что как то все само сабой начинает раскладываться по полочкам, укладываться в задуманное...
И так до следующего 'затыка'. Конечно, можно залезть в интернет и накопать все ответы. А то и сдуть готовый проект, и только заменить картинки и слова... но сами понимаете, это не интересно..

[Соня (Bruja)]

Две контрольные ( практические работы созданные с нуля ) сдала.
Теперь экзамен.. 2 части, каждая по часу.
Проходной балл 75% ..

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

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

[Соня (Bruja)]

Yes!! Прошла!

Переходим к следующему разделу - front-end.
Причем 18% этого раздела уже пройдено, так как контент входил в " основы веб разработки", то есть в предыдущий базовый уровень.
Это отчасти html и css.
Ну а новый раздел открывает принцесса Java Script 

Ох чувствует мое сердечко, намучаюсь я с ней..
Ну а пока  самое начало оч похоже на C # , все те же переменные,  методы, операторы..
Даже коментируется так же...
Хотя есть и различия. В Си шарпе не особо любят кемалКейс из за сложности потом для прочтния программистом, а вот в джава скрипте он кажется в почете.
Покрайней мере пока что это так.
Мне же больше нравится добавлять слова через тире. И вводя переменные не использовать большие буквы. Что бы отличать переменные от методов и функций, встроенных или созданных..

[Pipa]

Мне же больше нравится добавлять слова через тире.

     Может быть не через тире, а через подчеркивание? А то обычно тире/дефис используется в языках программирования, как оператор вычитания.

[Нож для фрау Пипы]

Pipa, А я вот, возьму, и не ляпну ничего! А почему? Да, потому, что я ничего в этом не понимаю.
 Попытайтесь быть похожими на меня. Это вас спасёт.

[Соня (Bruja)]

Мне же больше нравится добавлять слова через тире.

     Может быть не через тире, а через подчеркивание? А то обычно тире/дефис используется в языках программирования, как оператор вычитания.

Да, нижнее тире.. ____  подчеркивание.

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

Пока самые азы. И они очень похожи на С#.
Немного проще в том смысле, что задавая переменные не обязательно скурпулезно указывать ее тип. Достаточно указать, константа или нет..  можно пропустить ; в конце, и код прокатит.. в шарпе сразу ошибку выкинет.

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

Вообще видно, что с юмором ребята...

[Соня (Bruja)]

Попытайтесь быть похожими на меня. Это вас спасёт.

Пипу ? От чего?

[Р!ра]

Соня (Bruja), от зашквара, однако. Она часто пишет глупости пытаясь быть экспертом во всем.

[Pipa]

Она часто пишет глупости пытаясь быть экспертом во всем.

Pipa знает более дюжины языков программирования, так кому же, как не ей, поддержать разговор на эту тему?

[джелави]

Соня (Bruja), Pipa, да этим вонючим программированием только зрение убивать. Ботанички, а оно вам надо?

[семен семеныч]

Соня (Bruja), Pipa, да этим вонючим программированием только зрение убивать. Ботанички, а оно вам надо?

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

[Соня (Bruja)]

Pipa знает более дюжины языков программирования, так кому же, как не ей, поддержать разговор на эту тему?

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

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

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

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

Нырять мы ездили по многим побережьям Испании, и за границу ( Коста Рика, Египет  и т.д.).

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

Ссылка на репозиторий второго задания:
там все документы. index.html   styles.css. , можно просмотреть код.

https://github.com/mtapirina/responsive-club-website

внешний вид - страницы в живую
https://mtapirina.github.io/responsive-club-website/

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

Upd

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

[Pipa]

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

     Мыслить логически программирование едва ли научит, тут скорее обратная зависимость - неумеющие мыслить логически не могут научиться программированию .
     Но по большому счету логическое мышление не столь обязательно, сколь желательно развивать в себе антиживотные понятия и способности. Вот положим, что вы выучили какой-то другой иностранный язык. Слова там другие, но понятия по большей части те же самые - бытовые. И это обстоятельство не изменится, сколько бы иностранных языков вы ни выучили. Другое дело - язык программирования, в котором "животных" понятий нет совсем. Т.е. нет ничего из сфер ощущений и чувств. Чего стоят хотя бы такие термины, как абстрактные классы и виртуальные функции .