{WEB PRO} Школа веб-разработки, создание сайтов 🚀
4.28K subscribers
72 photos
14 videos
1 file
208 links
Основной канал школы WEB PRO. Новости школы, даты выхода новых видео и многое другое.

Чат школы @webproschool_chat
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
С НУЛЯ ДО PRO за 100 дней. День 32.

✨ Представляю вашему вниманию первый экран выпускного проекта по JS в WEB PRO во всей красе) Данный проект даёт пользователю возможность добавлять, ставить оценки, писать рецензию, сортировать и фильтровать просмотренные фильмы, а также отмечать предстоящие премьеры.

Вёрстка будет дана готовая, ученик именно программирует сайт. На первом экране пользователя встречает надпись, которая приветствует его в соответствии со временем суток. Имя пользователя узнаётся и хранится в Local Storage. В процессе его можно изменить.

Самая завораживающая часть первого экрана - слайдер, он показывает предстоящие премьеры. Заметьте, как стрелки навигации добавляются или исчезают в зависимости от номера слайда. Можно переместиться к конкретному слайду. Внизу слайда указана дата премьеры. Если осталось менее 100 дней - включается счётчик. Если премьера состоялась - предлагается оценить фильм.

#снулядоpro #отчёт32
👍5🔥3😍1
С НУЛЯ ДО PRO за 100 дней. День 33.

🤷‍♂️ С утра успел немного поработать над проектом. Остальную половину дня возился с машиной. В прошлый раз отдал машину в сервис и ушёл, попросил позвонить, когда сделают. Только пришел домой - звонок "мы всё сделали" - потопал обратно. В этот раз решил подождать, т.к. на первый взгляд проблема была лёгкой в решении, но в итоге пробыл в сервисе более 3 часов. Очень жалко это время, ушло в никуда(
Вечером провёл занятие с ученицей, продолжили адаптировать Dreamplanner, но уже под мобильные устройства.
Как-то так. Вроде опять же и не поработал, и не отдохнул, но день прошёл.

#снулядоpro #отчёт33
С НУЛЯ ДО PRO за 100 дней. День 34.

Сегодня провёл 2 онлайн занятия: одно групповое (разбирали события клавиатуры на JS), второе индивидуальное (делали дизайн Dreamplanner под планшет).
Заполнил финансовую таблицу за пройденную неделю. Т.к. сейчас идёт капитальный ремонт машины, выделил отдельную страницу под неё, чтобы видеть все расходы и крепить чеки проделанных работ.
К коду проекта не успел ещё сегодня притронуться, но отчёт выкладываю сейчас, пока есть свободная минутка.

#снулядоpro #отчёт34
👍1
С НУЛЯ ДО PRO за 100 дней. День 35.

Провёл онлайн-занятие с учеником, на котором фиксили баги в мобильной адаптации slick слайдера.
В остальном баги в моей голове сегодня меня пошатнули и сбили с настроя, поэтому видимо нужна была разгрузка для понимания дальнейшего плана.

#снулядоpro #отчёт35
👍1
С НУЛЯ ДО PRO за 100 дней. День 36.

✅ Заверстал секцию с кинотекой: фильтрация, сортировка, сами карточки с фильмами. Начал программировать. Пока визуально не покажу, хочу довести до ума и позже продемонстрировать.

#снулядоpro #отчёт36
👍2
С НУЛЯ ДО PRO за 100 дней. День 37.

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

⏳ Также постоянно в чате поднимается тема с тайм-менеджментом. Конкретно планирование мне сейчас не так интересно, но вот найти тайм-трекер очень захотелось. Поэтому сегодня набрёл на крутой, а главное бесплатный тайм-трекер. Он кроссплатформенный. Решил сразу установить его на мак. Он позволяет задать проект в работе, решаемую задачу, прописать теги для удобной сортировки в будущем.
Также он подсчитывает стоимость работы и позволяет поделиться данными по ссылке. То есть по сути вы можете взять заказ, и каждый раз, когда садитесь выполнять его - вы включаете таймер. После чего вы расписываете что вы делали на каждом этапе и делитесь этой ссылкой с заказчиком. Он прекрасно видит, что вы полчаса продумывали дизайн, 5 часов дизайнили и 18 часов верстали заказ. Ну а если вы будете прописывать более подробно каждый промежуток, то он будет видеть что конкретно вы дизайнили и верстали в течение каждого промежутка времени. Это просто бомба)
Также на десктопной версии вы можете дать возможность отслеживать ваши активные приложения в каждый момент времени. Всё это попадает в историю и вы можете видеть когда и на что вы отвлеклись, почему в какой-то момент вы оказались в соц сетях. Ведь данное приложение позволяет вам отслеживать даже посещаемые вкладки в браузере и видеть сколько времени вы провели в каждой активности.
В общем, если учесть, что все эти функции бесплатные и сам сервис русифицирован, что тайм-трекер выдаёт кучу статистики и информации по вашей работе, то я чувствую, это на ближайшие дни будет мой самый верный товарищ в работе. Причём ещё круто, что вы не всегда понимаете что конкретно вы будете делать, но вы точно собираетесь работать. Можно включить таймер и после выполнения задачи расписать что вы делали.
Подойдёт абсолютно всем, будь вы фрилансером, который хочет делиться отчётом с заказчиком о своей работе, или новичком, который не понимаете сколько времени уходит на вёрстку или дизайн той или иной секции и хотел бы это отследить. Рекомендую.

Текстовый отзыв от пользования в первый день вы получили. А в ближайшее время хочу побольше потестировать данный трекер и записать видео по нему. Если вам интересно это - дайте реакций на пост 🔥

#снулядоpro #отчёт37
🔥2
С НУЛЯ ДО PRO за 100 дней. День 38.

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

#снулядоpro #отчёт38
👍1
С НУЛЯ ДО PRO за 100 дней. День 39.

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

#снулядоpro #отчёт39
С НУЛЯ ДО PRO за 100 дней. День 40.

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

#снулядоpro #отчёт40
С НУЛЯ ДО PRO за 100 дней. День 41.

✅ Провёл групповое занятие, на котором мы создали игру-кликер + анимировали её с помощью anime.js. Провёл индивидуальный доп. урок ученику, который не попал на групповое занятие среди недели. Плюс ещё рутинные дела по работе. К проекту сегодня не притрагивался. Планирую поработать над ним завтра.

#снулядоpro #отчёт41
С НУЛЯ ДО PRO за 100 дней. День 42

✅ Сделал две модалки для кинотеатра. Осталось довести до ума форму и подвал.

🤫 Спойлер: Мне очень нравится проект, который я взял для своего курса. Завтра продемонстрирую вам его идею, промежуточный результат и расскажу чем он хорош. Каждый из вас сможет взять данную идею на вооружению и прокачать вёрстку и программирование на JS (если знаете бэк, то он также замечательно впишется в его концепцию). У самого мозги кипели на некоторых задачах по JS. Поэтому проект подойдёт как для новичков, чтобы попрактиковаться на базовых задачах, так и для продвинутых разработчиков, ведь здесь есть более сложные задачи и тонкости при их решении. Но обо всём завтра.

#снулядоpro #отчёт42
👍1
Media is too big
VIEW IN TELEGRAM
С НУЛЯ ДО PRO за 100 дней. День 43

🥳 Сегодня доделал WebFilms - это финальный проект модуля по JavaScript на курсе WEB PRO. В данном посте прикреплено видео с демонстрацией возможностей сайта, а в следующем посте распишу более подробно о самом проекте и о том, как вы можете попрактиковать навыки JS, запрограммировав данный сайт.

#снулядоpro #отчёт43
🔥3👍1
В этом посте опишу более подробно саму идею создания проекта WebFilms и то, как вы можете притронуться к его программированию.

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

Теперь пройдёмся по каждому пункту и рассмотрим удалось ли мне реализовать это:
а) Проект действительно получился интересным. Тематика, на мой взгляд, пока не заезжана, а сам сайт выглядит стильно. Согласитесь, подобный сайт программировать куда интереснее, чем какую-то обезличенную crm систему для практики ради практики. Здесь уж точно чувствуется душа проекта и его хочется реализовать себе в портфолио.

б) Слайдеры, таймеры, прослушка, сбор информации и отправка формы, множественная фильтрация, сортировка, подгрузка описания отдельного элемента, перебор элементов, работа с JSON и Local Storage. Всё это встречается в большинстве проектов и всё это реализуется в данном проекте на чистом JS.

в) Уровень задач очень вариативен (от очень простых, решаемых за несколько минут, до трудных заданий со звёздочкой, над которым придётся посидеть не один вечер). А масштабируемость вообще колоссальная. Помимо обычной идеи того, что пользователь может добавлять в свою кинотеку премьерные фильмы и фильмы, которые он уже посмотрел, оценивать их, писать рецензию, фильтровать и сортировать список фильмов есть ещё куча того, что могло бы быть реализовано: больше фильтров и сортировок, возможность редактировать рецензию, поиск по фильмам, пагинация фильмов и разбиение их на несколько страниц с помощью JS, возможность показа карточек в разном виде (с/без описанием, с большой/маленькой картинкой), создание фильтрации по оценке с помощью двойного ползунка range, оценка фильма с помощью множественных звёздочек и ещё множество всего, вплоть до углубления в бэкэнд и построения собственной базы данных под данный проект.

Как вы можете потренироваться и запрограммировать WebFilms?
Есть два пути: 1) Всё сам(а). Идею и функционал я вам расписал, даже наглядно продемонстрировал некоторые моменты. Осталось только сверстать и запрограммировать это себе в портфолио.
2) С наставником. Пойти на обучение в школу WEB PRO, где мы вместе запрограммируем данный проект. Одно из главных преимуществ школы - начать можно с любого доступного модуля. То есть вы можете знать вёрстку, но не знать JS и выбрать модуль именно по JS. Либо проходить обучение постепенно с самого нуля от вёрстки и дизайна до программирования на JS. Второе преимущество - индивидуальный подход к обучению. Наставником для первых учеников буду лично я. Поэтому кому интересны подробности, а также хорошая скидка на обучение - пишите в личные сообщения.
Также первый урок курса по основам HTML можно получить совершенно бесплатно в боте - просто отправьте слово ОБУЧЕНИЕ, в ответ я вышлю вам урок, тест и домашнее задание, а также более подробно расскажу о курсе.
🔥3👍1😢1
С НУЛЯ ДО PRO за 100 дней. День 44

🧖 Сегодня выходной. По планам с утра наклеить накладки на ракетку, далее пойти поиграть в настольный теннис, после пообедать в додо и расслабиться в термах. В общем, день разгрузки 👐

#снулядоpro #отчёт44
👍3😍2
С НУЛЯ ДО PRO за 100 дней. День 45

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

📚 Провёл групповое занятие по мультимедиа на сайте (видео, аудио).

🏎 Практически полностью разобрался с машиной (ибо постоянно отвожу-привожу из сервиса), остались небольшие мелочи.

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

#снулядоpro #отчёт45
This media is not supported in your browser
VIEW IN TELEGRAM
С НУЛЯ ДО PRO за 100 дней. День 46

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

#снулядоpro #отчёт46
С НУЛЯ ДО PRO за 100 дней. День 47

✅ Провёл 2 онлайн занятия: с учеником сверстали шапку данного макета, а закончили адаптацию Dreamplanner.
Также сегодня искал макеты для вёрстки на канал.

#снулядоpro #отчёт47
С НУЛЯ ДО PRO за 100 дней. День 48

✅ Провёл групповое занятие - делали Flappy Bird на JS (реализовали генерацию труб и их движение). Также провёл индивидуальное занятие - делали дизайн под мобильные устройства Dremplanner.

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

#снулядоpro #отчёт48
👍2
С НУЛЯ ДО PRO за 100 дней. День 49

Сегодня приехал к родителям, весь день в дороге, вечером съездили на дачу с родственниками, поели шашлыки. Следующие несколько дней (до среды) от меня родителям будет нужна помощь. Скорее всего, я очень редко смогу что-то делать в ноуте по работе, ибо буду в постоянных разъездах и бытовых делах. Поэтому к сожалению, несколько следующих отчётов выйдут пустыми в плане прохождения марафона :( Но уверен, что всё наверстается в следующие дни 💪

#снулядоpro #отчёт49
👍4
С НУЛЯ ДО PRO за 100 дней. День 50

Сегодня помогал родителям, удивлял их роботом-мойщиком из этого поста. В перерывах изучал вакансии в сфере веба. К сожалению, в ближайшие дни отчёты короткие, почему так - писал в посте выше.

#снулядоpro #отчёт50
С НУЛЯ ДО PRO за 100 дней. День 51

💁🏼‍♂ Сегодня снова короткий отчёт. Весь день с родителями: помогаю, общаюсь и провожу время с ними, потому что завтра с утра уезжаю.

🐕 Также водил сегодня шпица на стрижку: сначала её нужно помыть, окунуть в полотенце и быстренько нести к грумеру. Тот уже сушит феном, расчесывает и стрижёт. Собака рыпается, трясётся, поэтому приходится держать на протяжении полутора часов и помогать специалисту. Фото до стрижки (во время мытья) и после стрижки прикрепил к посту.

#снулядоpro #отчёт51
😁3😍2