HTML Practice - разработка сайтов на фрилансе
545 subscribers
38 photos
7 videos
1 file
44 links
Рассказываем про работу на фрилансе, разрабатываем сайты, верстаем много и круто, делимся опытом!
Download Telegram
Записали видео, в котором сверстали простой лендинг с нуля.

Вы увидите как верстать лендинг из макета Figma с использованием базовых знаний HTML и CSS. Узнаете, как структурировать и разметить контент, добавить стили, подключить шрифты, а также адаптировать страницу для отображения на различных устройствах.

💻 Ссылка на видео

💻 Ссылка на макет

🧑‍💻 Ссылка на исходники
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥14
HTML Practice - разработка сайтов на фрилансе
Делимся таблицей - на основе которой можно рассчитать стоимость верстки макета, который вам скинули на оценку. Вы можете скопировать таблицу себе и пользоваться ей. Попозже выйдет видео с подробным пояснением как пользоваться таблицей, но вот основные моменты:…
Вот недавно делились таблицей - на основе которой можно рассчитать стоимость верстки макета.

Вот записал видео на реальном проекте, где посчитал стоимость по этой таблице и в итоге клиент согласился работать 😉

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

А вот и скрины переписки с клиентом - внутренняя кухня)

Вот ссылка на видео еще раз 👌
👍13🔥4👏1
Посты и видео на какую тему вам больше интересны?
Anonymous Poll
62%
Обучение верстке
32%
Обучение Wordpress
36%
"Внутреняя" кухня фриланса
Всем привет! У нас за последние дни в канале много новеньких.
Расскажите в опросе выше посты на какую тему вам больше интересны?
В комментариях можете написать свои предложения😉
4
Начинаем новую серию видео в котором верстаем лендинг, он уже немного сложнее чем предыдущий, будем использовать JS, подключать слайдеры.
Видео будут не длинные, как раз что бы посмотреть, повторить и не очень устать😀
В первом видео верстаем шапку с меню, контактами и логотипом

Вот ссылка на макет

Вот
ссылка на видео

P.S.
После того как до верстаем этот макет еще сделаем видео как его натянуть на WordPress😉

#верстка_лендинга_для_новичков
🔥16👍10
Во втором видео серии "Верстка лендинга для новичков" мы сосредоточимся на верстке первого блока, где будем использовать не только HTML и CSS, но и JavaScript для подключения и настройки слайдера Swiper.

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

Ссылка на макет

Ссылка на видео


#верстка_лендинга_для_новичков
👍23
Сегодня сразу две части видео из серии "Верстка лендинга для новичков"

Верстаем 4 блока "Услуги", "О нас" и "Наши клиенты", "Отзывы", в которых два слайдера.
Отличная возможность закрепить навыки работы со слайдерами😉

Видео Часть 3
Видео Часть 4

Ссылка на макет

#верстка_лендинга_для_новичков
👍11
Всем привет, особый повод! У моего близкого друга и коллеги - Жени, с которым мы ведем этот канал - сегодня свадьба 💒

Давайте накидаем огоньков и поздравлений к этому посту - ему будет очень приятно ☺️
🔥76🎉85
Мы тут немного пропали😔

Держу в курсе - Женя после свадьбы в Турции отдыхает, я пока погряз в рабочих моментах - банк в котором я на ГПХ осуществляю поддержку сайта решили вот срочно летом делать ребрендинг когда все отдыхают, из за этого появилось куча сложностей и добавилось неожиданно работы)

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

Пока выкладываю все серию из 7 видео в которых делаем верстку лендинга, со слайдерами и адаптивом.

Часть 1: https://youtu.be/U63S0Em7qH4
Часть 2: https://youtu.be/EgAZIN9sqU4
Часть 3: https://youtu.be/BPdoFZJqZFY
Часть 4: https://youtu.be/iAFb8YMzz6Y
Часть 5: https://youtu.be/1i-zjpv9B9E
Часть 6: https://youtu.be/EBqBW8-dvKI
Часть 7: https://youtu.be/cI2cPKBUfV4 (Финал)

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

#верстка_лендинга_для_новичков
👍21
Важная мелочь - для тех кто верстает сайты.

Не называйте классы блоков такими именами как .banner , .ads и так далее. Потому что различные плагины браузеров, по типу ads block, которые много у кого стоят - блокируют эти блоки, думая что там реклама.

Вот пример на скринах - захожу на верстку сайта для проверки, а там нет картинки на первом блоке, начинаю разбираться и оказывается у меня плагин заблокировал.
👍25
Сегодня я хочу поделиться с вами информацией о сниппетах в VS Code и объяснить, почему их использование может быть полезным.

⌨️ Что такое сниппеты?
Сниппеты - это мощный инструмент в среде разработки Visual Studio Code, который позволяет вам автоматизировать и ускорить процесс написания кода. Сниппеты представляют собой фрагменты кода, которые можно вызвать с помощью сокращенного синтаксиса или ключевого слова и автоматически расширить до полного блока кода.

💡 Зачем использовать сниппеты?

1️⃣ Увеличение производительности: Сниппеты помогают сэкономить время и усилия при наборе повторяющихся фрагментов кода. Вместо того, чтобы вводить их снова и снова, вы можете просто вызвать сниппет и он будет расширен автоматически.

2️⃣ Улучшение качества кода: Сниппеты также позволяют сохранить стандарты кодирования, поскольку вы можете заранее определить фрагменты кода с правильным форматированием, комментариями или стилем и использовать их повторно.

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

Записал вот видео https://youtu.be/IGI5026Roc0 в котором настраивал их для своей работы - можете посмотреть и настроить тоже под себя.

Если у вас есть какие-либо вопросы или комментарии, не стесняйтесь задавать их в комментариях.

#VSCode #сниппеты #разработка #программирование
🔥11
This media is not supported in your browser
VIEW IN TELEGRAM
Сейчас готовим видео в котором покажем как делать такие анимации без подключения библиотек на чистом js и css. Интересно? 😃
👍18🔥4
💡Появилась такая идея - для вас бесплатно, но много пользы😀

Мы хотим сделать "небольшое реалити" - нам нужно два человека, которые хотят бесплатно поучаствовать в нем.

Подробности:

Наверное мало кто из вас знает - но у нас есть сервис HTML Practice

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

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

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

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

———————

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

Вот что вы получите:

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

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

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

Ну и просто огоньки ставьте если идея нравится😀
🔥35👍1
Спасибо всем за доверие, не ожидали, что будет так много желающих принять участие в реалити👍

Нам нужно немного больше знать о каждом, кто откликнулся.

📄 Вот анкета https://docs.google.com/forms/d/e/1FAIpQLSe3Uo0Z2BhrT8OSB7MuLChKPpcF4MyVpeqL3xeK8R9h5Xm2oA/viewform?usp=sf_link

🕔 Ее нужно заполнить до 4 утра 21 июля по МСК - получается за сегодняшний день.

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

Ну, а дальше уже будем держать в курсе как у них дела и как все проходит.

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

Не упустите свой шанс оказаться в числе счастливчиков, не факт что это будем повторять😉
👍7
HTML Practice - разработка сайтов на фрилансе
Сейчас готовим видео в котором покажем как делать такие анимации без подключения библиотек на чистом js и css. Интересно? 😃
sneaker-shop.zip
2.6 MB
Это как обещали подготовили.
Вот видео - можно посмотреть.

В видео показываем как можно быстро сделать простой parallax эффект и бегущую строку без библиотек чистым кодом используя html, css и js.

Берите на вооружение, делается просто, но как показывает практика - клиенты, особенно на фрилансе такое очень любят😉
И исходники прикладываю - могут пригодиться.
👍131
HTML Practice - разработка сайтов на фрилансе
Спасибо всем за доверие, не ожидали, что будет так много желающих принять участие в реалити👍 Нам нужно немного больше знать о каждом, кто откликнулся. 📄 Вот анкета https://docs.google.com/forms/d/e/1FAIpQLSe3Uo0Z2BhrT8OSB7MuLChKPpcF4MyVpeqL3xeK8R9h5Xm2o…
Касаемо нашего реалити - мы пересмотрели все заявки.

Уже выбрали двух участников - скоро с ними свяжемся.

Кого не выбрали - не обижайтесь, желающие были очень разных уровней, некоторых уже можно брать на работу на должность junior верстальщик, так как работы хорошего уровня, некоторые показали уже коммерческие проекты - это отлично, но там все все советы можно дать за 1-2 видео и мы будем не нужны)

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

Ожидайте новостей..😉
👍9👀2
Держим в курсе👋

Мы выбрали для участия в нашем реалити двух девушек Надежду (@tkachuk_87) и Елену (@lena_pavlovich).

Они уже начали работу.

————————————

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

Скоро выложим видео с разбором ее верстки.

————————————-

Лена вчера начала работу по этому макету

Ждем от Лены успешной верстки хедера и первого блока макета🙂
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥5
И еще момент - я сейчас прохожу собеседования разные на должность верстальщика и программиста php, bitrix, wordpress - что-то с этих областей.

Работу я не ищу, это больше как эксперимент - за много лет на фрилансе стало интересно на сколько я буду востребован на рынке - ну и контента ради конечно😃

Все собеседования я записываю на видео - хотели бы посмотреть какие вопросы задают, что вообще происходит на собеседованиях на удаленную работу?
👍49