в сегодня лет узнала, что те самые теги <ol>, <ul>, <li> — это АББРЕВИАТУРЫ 😬

я всё никак не могла запомнить и путалась, а теперь понимаю, что это всего лишь ordered list и unordered list. клянусь, я вообще не осознавала, что это не просто набор букв 🤡

десять классов под этим постом, и я показываю-комментирую своё первое спустя полтора года эйчтиэмэльное детище 👹

ну что, ✨МОЯ ВИЗИТКА✨ в честь сегодняшнего дня программиста! (поздравляю-поздравляю всех причастных от всей души!!)

вот так получилось 😂
написано исключительно на html: вместо стилей использовала атрибуты цветов и расположения элементов по центру + пришлось разобраться с табличками, чтобы расположить текст и картинки рядом, а не друг под другом

все внешние ссылки кликабельны, открываются в новой вкладке

ну вроде красивенько! а вы что скажете? 👀

мои сны с температурой 40 🤝 попытки верстать под лекцию о css box-model

глядите, какую заготовку сделала в качестве эксперимента для своего пет-проекта!
пощупать своими руками можно по ссылке:
https://tinyapetrova.github.io/Palabreo/

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

а я тут пришла с подборкой игр для изучения html + css + js 🔥

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

тренировка на понимание параметров в пикселях:
https://pixact.ly/

тренировки на html + css:
https://eraseallkittens.com/
https://cssbattle.dev/

тренировка на селекторы в css:
https://flukeout.github.io/

тренировки на флексбоксы в css:
https://flexboxfroggy.com/#ru
http://www.flexboxdefense.com/
https://codingfantasy.com/games/flexboxadventure/play
https://flexboxzombies.com/p/flexbox-zombies
(спасибо за последнюю ссылку, @hey_heima 🤍)

тренировки на гриды в css:
https://cssgridgarden.com/#ru
https://codingfantasy.com/games/css-grid-attack/play

тренировки на js:
http://play.elevatorsaga.com/
https://alexnisnevich.github.io/untrusted/
https://lab.reaal.me/jsrobot/#level=1&language=en
https://jsdares.com/
https://screeps.com/

я пропала 😰😰😰😰😰😰😰

но не навсегда, вот она я!

что у меня произошло за это время?

— масштабный переезд:
меньше, чем за месяц, пришлось сменить аж три квартиры. третья, надеюсь, финальный вариант на долгосрок 🤞🏻 потому что больше я этого не выдержу

— масштабный брейкдаун:
откровением будет признаться в паблике про айтишные приколы, что у меня есть определённые приколы ментального характера. иногда они меня подводят с учётом отсутствия медикаментозной терапии и терапии разговорной. неделю я провела в кровати за ленивым просмотром рилсиков и таким же ленивым изучением джаваскрипта. тут сказать нечего: жива и слава богу!

— масштабные планы:
помимо того, что я сейчас активно погружаюсь во фронтенд и прохожу интенсивный курс по гиту и линуксу, я решилась на великое: попытаться найти ✨свою первую работу✨

если хотите — ставьте молнию ⚡️, расскажу подробнее о том, как я это собираюсь делать и что по этому поводу вообще думаю, потому что 1) мне бы хотелось этим поделиться, если вам хотелось бы это почитать и 2) было бы интересно узнать про ваш опыт: как вы переходили в новую для себя сферу, за что хватались в самом начале, как подходили к поиску вакансий и как уличали свои уязвимые места в процессе, чтобы их укрепить 👹

из последних достижений пока вот:

осваиваю API. написали вместе с группой псевдоапишник и научились перетаскивать данные из JSON'а непосредственно на страничку. пока без прикрас, работали только с джаваскриптом

но это всё неважно, зацените лучше персонажа ❤️

пришла с рассказом о поисках работы 🪄✨

на самом деле, план надёжный как швейцарские часы:

1. повторить до конца недели пройденные темы;

2. далее пройти недопройденное самостоятельно: например, нам категорически мало дали на курсах инфы про многопоточность, стримы и лямбды. вот это всё нужно будет мощно подтянуть с уровня «что-то такое слышала» до «счас на примерах поясню, что к чему»;

3. далее взять курс по SQL и освоить хотя бы по верхам. и ещё познакомиться с какой-нибудь технологией типа MySQL. если у вас есть на примете хорошие платные/бесплатные обучалки на тему, молю, поделитесь 🙏🏻

4. далее параллельно с изучением SQL и СУБД подключить ментора, чтобы уже непосредственно предметно начать готовиться к собесам, наполнить линкедин, сделать хорошее портфолио новичка + CV. тут я себе не доверяю, поэтому хочу пройти этот путь с индивидуальной помощью профессионала: будет неприкольно разочароваться при первой же неудаче, хочется иметь поддержку, как ментальную, так и хардскилловую;

5. перед самыми собесами хочу ещё попроходить мок-интервью и полайвкодить с товарищами. пункт последний, но не по значимости 🤞🏻

по поводу эмоций:

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

но дело даже не только в финансах. я просто начала слишком сильно вариться в бесконечной учёбе. конкретизирую: в голове копится ОГРОМНАЯ куча знаний, которые мне уже хочется куда-то девать. потому что есть чувство, будто, если ещё немного с ними пересидеть — я сойду с ума, начну это всё оттачивать, заработаю синдром самозванки и умру от страха. сейчас как будто бы тот самый момент, когда я настолько зелена, что даже отчаянна.

расскажите о своём опыте? 🦁 как вы поняли, что готовы к первой работе? какими были ваши первые действия? сфера неважна: знаю, что читают меня здесь ребята вообще из разных областей. оттого и интереснее!

бегу в ночи отвечать скорее на комменты под предыдущим постом (вы мне их столько оставили, что приятно жуть!!!) и заодно показать вам свой «хэллоу ворлд» в мире фронтенда: ПОГОДНЫЙ ВИДЖЕТ ☀️🌪

не думаю, что есть в мире хотя бы один человек, который занимается фронтендом и НЕ написал хотя бы раз в жизни погодное приложение 😂

НО! я на оригинальность не претендую. во-первых, не моя идея — а задачка с занятия. во-вторых, да, увлеклась, навешала на виджет всяких штучек и смело могу сказать: идея для тренировки — офигенная!

во-первых, это кропотливая работа с API в количестве аж двух штук, где данные из одной (геолокация) помогают вытащить данные из другой (местная погода); а потом надо данные (код погоды) ещё и расшифровать с помощью switch-case. во-вторых, это отличная прокачка css-шных приколов, любимых флексов, грандиентных фонов, подключения шрифтиков и прочих красот. ну и в-третьих, это прекрасный повод в очередной раз помучаться с колёсиком прокрутки (как это принято называть у молодёжи, спиннером). в общем, вечер не был томным и даже им не казался — 6 часов работы, add-commit-push, деплой на git pages — и пожалуйста, дарю 🎊

👉🏻 https://tinyapetrova.github.io/weather_app/ 👈🏻

заходите потестить и делитесь скриншотами в комментах, если захотите — интересно, у кого как данные подтягиваются 👀

ну а кому лень переходить по ссылке, зацените тогда, как красиво на видео прогружаются данные 💔

я пока не сильно дружу с этими колёсиками и в скрипте прописываю их, скорее, по наитию, чем по знанию, как надо. но вроде не совсем криво-косо. а потом ещё получше научусь!

принесла вам ещё один свой сайт, на этот раз совершенно дурацкий и смешной: GENDER PREDICTOR 🤩
ссылка в конце поста!

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

1) всего получилось 8 файлов с разметкой, стилями и джаваскриптом

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

3) задействованы данные с двух API: один интерфейс реальный открытый, там собрана инфа об именах и о том, с какой вероятностью то или иное имя может быть мужским или женским. второй интерфейс — самоделка, написанный вручную JSON с фейковыми данными о клиентах и залитый на гит пейджез

4) стили прописаны как для десктопа, так и для мобилы. тренирую адаптивность!

5) из приколов:
— есть колёсико загрузки при жмакании по кнопке для получения результата
— отображение инфы о клиентах в десктопе и в мобиле отличаются во имя эстетики
— в css впервые применила на практике селекторы посложнее, чем просто тэги, айди или классы: например, поскольку карточки с персонажами генерятся в js, я просто утащила один из элементов в работу через .characterCard p:nth-child(1)
— курсор при наведении на кликабельные объекты превращается в указательный палец!!! это новинка в списке моих умений

что сайт делает? 😬
если длинно — читайте раздел About service 😂
если коротко — просто пишете имя во вкладке Try our service, и, если имя есть в датабейз, вы получите информацию, какое это имя: мужское или женское, и с какой вероятностью: 0 — вероятность нулевая, 1 — вероятность стопроцентная

какая польза?......
когнитивной пользы точно никакой. но вы можете пожамкать кнопочки и просто посмотреть, чему она там научилась ещё. а для меня польза, как известно, в практике

энжой! ✨✨✨
https://tinyapetrova.github.io/lesson15_task1_GenderPredictor/index.html ⚡️

ну и вот, видик на память 🎥
показываю сначала десктопную версию, потом мобильную

и продублирую, что своими руками потрогать можно тут

ps: бургерное меню пока ещё не освоила, но преподаватель обещал в ближайшее время раскрыть все хитрости, так что stay tuned ❣️

планы на неделю грандиозные:

1. пересмотреть пару пропущенных уроков (во время переездов было очень тяжело учиться, приходилось либо скипать уроки, либо я просто отсыпалась во второй половине занятия 😴)

2. нагнать пятничное вводное занятие по реакту

3. продолжить смотреть и конспектировать лекции по джаве: план – хотя бы лекций 10 успеть

4. попробовать поделать пропущенные домашки по джаве для себя: хочу, чтобы одно полушарие пока оставалось на волне фронтенда, а второе уж как-то не забывало джава-синтаксис. планка – 5-6 домашек

5. sql: просто продолжать вникать в свободном темпе, тут никаких ограничений себе не ставлю. как пойдёт! от этого «как пойдёт» поставлю себе цели на дальнейшее изучение

посмотрим, сколько ✅ из этих пока что ❌ пунктов получится реализовать к пятнице. поддержать можно огоньком (she's s blogger you know)

готовы к прилюдному факапу?? 🥹

ну так вот: 2,5 из 7 пунктов are done ✅🎊

почему так мало? потому что случился самосаботаж — я поставила перед собой заведомо невыполнимые, чересчур пугающе масштабные цели, от вида которых не хотелось выполнить не то что всё, но и даже хотя бы один крохотный пунктик 👀

проще говоря — погорячилась. бывает. хотя бы не проиграла всухую — и на том спасибо 😬

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

не ругаю себя. если от самосаботажа я себя ещё не отучила, то вот винить себя в низкой продуктивности я больше не хочу и не буду. бывает! организм сказал, что в него не лезет — я услышала и отстала. зато много всего мотивационного на ютубе пересмотрела: и роудмапы, и как работать со спрингом (чисто концептуально), и просто всякие видики для начинающих про чужой опыт. а ещё всякие прикольные проектики на гите пошерстила, что тоже не во вред

на выходных собираюсь мощно нагонять реакт, а на следующую неделю план такой: делать хоть что-нибудь. как думаете, справлюсь? 😂

но что я, зря смотрела видики? давайте поделюсь подборкой ютуб-каналов, которые я для себя открыла на этой неделе:

1. Merion Academy: очень классные видео о сложном простым языком. тут и про принципы ООП, и как работает Ethernet, и что вообще делают всяческие IP, API, VPN и прочие прикольные технологии и штучки. про SQL отличное базированное видео тоже, кстати, у них нашла! пошерстите у них плейлисты, очень крутые информативные видео, слушаются супер-легко и оформлены красиво

2. Fireship: крутецкий канал, в котором собрано всё: формат с объяснением сути разных технологий за 100 секунд, новейшие айти-новости, видосы на грани философии и смеха (про стереотипы об айтишниках, про нюансы профессий, про код стайл и многое другое). понравилось! буду смотреть томными вечерами, когда станет совсем тоскливо

3. Vlad Mishustin: а это авторский канал, и тут прям всё в одном — и мотивация в формате видео про свой опыт, и классные интервью с разработчиками и айти-спецами о наболевшем. ладно, знаю я про этот канал уже давно, но распробовала вот только сейчас. из последнего, что я лично посмотрела и заценила — часовое видео с базой по SQL и видео про гит, конфликты, ветки, ревёрты, резеты и иже с ними. легко, информативно и интересно

в общем, от сердца отрываю ❤️ и иду заниматься делами 😂

пожелание в конце при запуске первого реакт-приложения >>> весь мир