Постнагуализм
24 ноября 2024, 11:23:33 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.

      Логин             Пароль
 
   Начало   Помощь Правила Поиск Войти Регистрация Чат  
Страниц: [1] 2 3 ... 7  Все
  Ответ  |  Печать  
Автор Тема: HTML - CSS - Javascript (Web Dev Log)  (Прочитано 22341 раз)
0 Пользователей и 2 Гостей смотрят эту тему.
Соня (Bruja)
Сказочник Пня
Старожил
*****
Offline Offline

Пол: Женский
Сообщений: 9271


Соня и чумазый Лис


WWW
« : 23 августа 2023, 14:24:27 »
Цитировать выделенноеЦитировать выделенное ПроцитироватьЦитировать

Демо Игры

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


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

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

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

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

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

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

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



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

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




_________________________________________________________

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

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

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

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

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

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


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

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

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

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

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

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


* Снимок экрана 2023-08-23 в 13.49.04.png (405.39 Кб, 900x482 - просмотрено 156 раз.)

* Снимок экрана 2023-08-23 в 13.49.36.png (702.15 Кб, 900x958 - просмотрено 143 раз.)

* Снимок экрана 2023-08-23 в 13.49.53.png (459.32 Кб, 572x950 - просмотрено 123 раз.)
« Последнее редактирование: 13 ноября 2023, 02:04:14 от Соня (Bruja) » Записан

Соня (Bruja)
Сказочник Пня
Старожил
*****
Offline Offline

Пол: Женский
Сообщений: 9271


Соня и чумазый Лис


WWW
« Ответ #1 : 25 августа 2023, 14:37:45 »
Цитировать выделенноеЦитировать выделенное ПроцитироватьЦитировать

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

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

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

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

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

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

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

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

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


* Снимок экрана 2023-08-25 в 05.31.01.png (1049.26 Кб, 710x1266 - просмотрено 102 раз.)

* Снимок экрана 2023-08-25 в 05.30.03.png (643.12 Кб, 1200x620 - просмотрено 130 раз.)

* Снимок экрана 2023-08-25 в 05.32.16.png (445.8 Кб, 1200x614 - просмотрено 90 раз.)
« Последнее редактирование: 25 августа 2023, 21:41:32 от Соня (Bruja) » Записан

Соня (Bruja)
Сказочник Пня
Старожил
*****
Offline Offline

Пол: Женский
Сообщений: 9271


Соня и чумазый Лис


WWW
« Ответ #2 : 25 августа 2023, 19:12:58 »
Цитировать выделенноеЦитировать выделенное ПроцитироватьЦитировать

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

Соня (Bruja)
Сказочник Пня
Старожил
*****
Offline Offline

Пол: Женский
Сообщений: 9271


Соня и чумазый Лис


WWW
« Ответ #3 : 04 сентября 2023, 13:49:24 »
Цитировать выделенноеЦитировать выделенное ПроцитироватьЦитировать

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

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

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

Соня (Bruja)
Сказочник Пня
Старожил
*****
Offline Offline

Пол: Женский
Сообщений: 9271


Соня и чумазый Лис


WWW
« Ответ #4 : 06 сентября 2023, 20:42:56 »
Цитировать выделенноеЦитировать выделенное ПроцитироватьЦитировать

Yes!! Прошла!

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

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

Pipa
Техник
Старожил
*
Offline Offline

Пол: Женский
Сообщений: 13018



WWW Email
« Ответ #5 : 06 сентября 2023, 21:10:26 »
Цитировать выделенноеЦитировать выделенное ПроцитироватьЦитировать

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

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


Email
« Ответ #6 : 07 сентября 2023, 00:56:29 »
Цитировать выделенноеЦитировать выделенное ПроцитироватьЦитировать

Pipa, А я вот, возьму, и не ляпну ничего! А почему? Да, потому, что я ничего в этом не понимаю.
 Попытайтесь быть похожими на меня. Это вас спасёт.
Записан
Соня (Bruja)
Сказочник Пня
Старожил
*****
Offline Offline

Пол: Женский
Сообщений: 9271


Соня и чумазый Лис


WWW
« Ответ #7 : 07 сентября 2023, 07:55:03 »
Цитировать выделенноеЦитировать выделенное ПроцитироватьЦитировать

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

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

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

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

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

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

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

Соня (Bruja)
Сказочник Пня
Старожил
*****
Offline Offline

Пол: Женский
Сообщений: 9271


Соня и чумазый Лис


WWW
« Ответ #8 : 07 сентября 2023, 07:58:48 »
Цитировать выделенноеЦитировать выделенное ПроцитироватьЦитировать

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


Пипу ? От чего?
Записан

Р!ра
Гость


Email
« Ответ #9 : 07 сентября 2023, 08:06:23 »
Цитировать выделенноеЦитировать выделенное ПроцитироватьЦитировать

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

Пол: Женский
Сообщений: 13018



WWW Email
« Ответ #10 : 07 сентября 2023, 12:16:13 »
Цитировать выделенноеЦитировать выделенное ПроцитироватьЦитировать

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

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

Пол: Мужской
Сообщений: 1592


« Ответ #11 : 07 сентября 2023, 13:02:34 »
Цитировать выделенноеЦитировать выделенное ПроцитироватьЦитировать

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


Email
« Ответ #12 : 07 сентября 2023, 14:18:48 »
Цитировать выделенноеЦитировать выделенное ПроцитироватьЦитировать

Соня (Bruja), Pipa, да этим вонючим программированием только зрение убивать. Ботанички, а оно вам надо?
Пусть развиваются. КК тоже своих теток заставлял програмирование изучать, чтоб учились мыслить логически хоть немного.
Записан
Соня (Bruja)
Сказочник Пня
Старожил
*****
Offline Offline

Пол: Женский
Сообщений: 9271


Соня и чумазый Лис


WWW
« Ответ #13 : 07 сентября 2023, 17:48:04 »
Цитировать выделенноеЦитировать выделенное ПроцитироватьЦитировать

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

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


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

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

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

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

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


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

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

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

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

Upd

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


* 265407888-b92a31ad-782b-49d1-be89-7d1413e3200a.png (911.32 Кб, 800x712 - просмотрено 39 раз.)

* 265407092-7948ae72-7d7b-4588-9cc1-c686955babfe.png (1643.47 Кб, 1494x1046 - просмотрено 39 раз.)
Записан

Pipa
Техник
Старожил
*
Offline Offline

Пол: Женский
Сообщений: 13018



WWW Email
« Ответ #14 : 07 сентября 2023, 17:51:18 »
Цитировать выделенноеЦитировать выделенное ПроцитироватьЦитировать

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

     Мыслить логически программирование едва ли научит, тут скорее обратная зависимость - неумеющие мыслить логически не могут научиться программированию :).
     Но по большому счету логическое мышление не столь обязательно, сколь желательно развивать в себе антиживотные :) понятия и способности. Вот положим, что вы выучили какой-то другой иностранный язык. Слова там другие, но понятия по большей части те же самые - бытовые. И это обстоятельство не изменится, сколько бы иностранных языков вы ни выучили. Другое дело - язык программирования, в котором "животных" понятий нет совсем. Т.е. нет ничего из сфер ощущений и чувств. Чего стоят хотя бы такие термины, как абстрактные классы и виртуальные функции :).
Записан
Страниц: [1] 2 3 ... 7  Все
  Ответ  |  Печать  
 
Перейти в:        Главная

+ Быстрый ответ
Postnagualism © 2010. Все права защищены и охраняются законом.
Материалы, размещенные на сайте, принадлежат их владельцам.
При использовании любого материала с данного сайта в печатных или интернет изданиях, ссылка на оригинал обязательна.
Powered by SMF 1.1.11 | SMF © 2006-2009, Simple Machines LLC