Сообщество - Web-технологии

Web-технологии

534 поста 5 790 подписчиков

Популярные теги в сообществе:

Платные курсы по верстке - что выбрать?

В наши дни войти в IT кто только не пытается. И я - один из таких людей. В прошлом году получил инвалидность, из-за чего варианты заработка в и так не богатой провинции сократились до минимума. В принципе, на огромные деньги не претендую, лишь бы на хлеб хватало. Уже почти полгода изучаю html, css, немного js. Теорию учу по классике - сайты http://htmlbook.ru и https://learn.javascript.ru/ очень помогают. Вопрос с практикой - сталкиваюсь с тем, что очень не хватает ментора. В принципе, есть платные курсы, которые по максимальному тарифу предлагают обучение с ментором. Например - html-academy (https://htmlacademy.ru/intensive/htmlcss) или курсы Вадима Прокапчука от 0 до 1 (https://lolz.guru/threads/2022919/). Отзывы восторженные и там, и там (как и у других курсов от других авторов, впрочем). Но вот вопрос - оправдывают ли они себя? Просто набор тем для изучения и там, и там - довольно скудноват. И даже если курс будет освоен на 5+, судя по тенденциям на рынке труда, после этих курсов нужно брать еще как минимум какие-то курсы по js, т.к. простого верстальщика сейчас никто не ищет. Возможно, фрилас нас спасет? (хотя бы на первое время).

Хотелось бы услышать мнения пикабушников - Брал ли кто-нибудь платные курсы - и помогли ли они вам? Можете ли вы что-нибудь сказать про вышеназванные конторы? Получилось ли трудоустроиться?

Спасибо всем заранее за ответы)

15

Простой календарь на JavaScript

Всем привет, новое видео от меня!


Создаем простой календарь на чистом JavaScript HTML/CSS. Полностью рабочее решение для твоего будущего сайта, которое можно адаптировать под себя или изменить. Можно использовать в качестве виджета на любом сайте. При необходимости календарь на чистом JS можно стилизовать под себя.


Важно! Это не уроки! Если ты неделю в вебе, то скорей всего ничего не поймешь! У меня нет цели кого-то учить, так как я считаю, что уроков и курсов и так полно на просторах интернета. Я делаю разнообразные задачки для себя в не скучном формате, чтобы всегда была практика и решил поделиться с другими, чтобы была возможность получить готовый код, адаптировать готовое решение под себя или попробовать реализовать тоже самое для практики (практика главное в разработке!). Критика и советы по поводу того, что убрать, что добавить, приветствуются. Также буду рад разбору кода и комментариям по нему.


CodePen: https://codepen.io/crazycoding21/pen/WNjdMgY

GitHub: https://github.com/CrazyCoding21/CC-JavaScript-39-Simple-Cal...

Показать полностью 1
17

Анимированный прелоадер HTML CSS

Всем привет, новое видео от меня!


Создаем анимированный прелоадер на чистом HTML + CSS. Полностью рабочее решение для твоего будущего сайта, которое можно адаптировать под себя или изменить. Данное решение подойдет под большинство сайтов, где необходим прелоадер. Анимацию можно адаптировать под себя точно также как размер, цвет и форму фигур.


Важно! Это не уроки! Если ты неделю в вебе, то скорей всего ничего не поймешь! У меня нет цели кого-то учить, так как я считаю, что уроков и курсов и так полно на просторах интернета. Я делаю разнообразные задачки для себя в не скучном формате, чтобы всегда была практика и решил поделиться с другими, чтобы была возможность получить готовый код, адаптировать готовое решение под себя или попробовать реализовать тоже самое для практики (практика главное в разработке!). Критика и советы по поводу того, что убрать, что добавить, приветствуются. Также буду рад разбору кода и комментариям по нему.


CodePen: https://codepen.io/crazycoding21/pen/LYyjVWQ

GitHub: https://github.com/CrazyCoding21/CC-HTML-CSS-20-Loading-Anim...

Показать полностью 1
14

Карточки с градиентом HTML CSS

Всем привет, новое видео от меня!


Создаем карточки с градиентом на чистом HTML + CSS. Полностью рабочее решение для твоего будущего сайта, которое можно адаптировать под себя или изменить. Креативное оформление для карточек на вашем сайте. Можно поменять размер, цвета в градиенте и анимацию.


Важно! Это не уроки! Если ты неделю в вебе, то скорей всего ничего не поймешь! У меня нет цели кого-то учить, так как я считаю, что уроков и курсов и так полно на просторах интернета. Я делаю разнообразные задачки для себя в не скучном формате, чтобы всегда была практика и решил поделиться с другими, чтобы была возможность получить готовый код, адаптировать готовое решение под себя или попробовать реализовать тоже самое для практики (практика главное в разработке!). Критика и советы по поводу того, что убрать, что добавить, приветствуются. Также буду рад разбору кода и комментариям по нему.


CodePen: https://codepen.io/crazycoding21/pen/oNWLNeP

GitHub: https://github.com/CrazyCoding21/CC-HTML-CSS-19-Gradient-Bor...

Показать полностью 1
2

Слайдер изображений HTML CSS

Всем привет, новое видео от меня!

Создаем слайдер изображений на чистом HTML + CSS. Полностью рабочее решение для твоего будущего сайта, которое можно адаптировать под себя или изменить. Можно использовать на любом сайте для реализации слайдера с картинками.

Важно! Это не уроки! Если ты неделю в вебе, то скорей всего ничего не поймешь! У меня нет цели кого-то учить, так как я считаю, что уроков и курсов и так полно на просторах интернета. Я делаю разнообразные задачки для себя в не скучном формате, чтобы всегда была практика и решил поделиться с другими, чтобы была возможность получить готовый код, адаптировать готовое решение под себя или попробовать реализовать тоже самое для практики (практика главное в разработке!). Критика и советы по поводу того, что убрать, что добавить, приветствуются.


CodePen: https://codepen.io/crazycoding21/pen/KKmVKmX

GitHub: https://github.com/CrazyCoding21/CC-HTML-CSS-17-Image-Slider...

Показать полностью 1
7

Эффект при наведении на шестиугольник HTML CSS

Всем привет, новое видео от меня!

Создаем эффект при наведении на шестиугольник с картинкой на чистом HTML + CSS. Полностью рабочее решение для твоего будущего сайта, которое можно адаптировать под себя или изменить. Можно использовать для оригинальной подачи контента на сайте. Добавить в шестиугольник можно любое изображение.

Важно! Это не уроки! Если ты неделю в вебе, то скорей всего ничего не поймешь! У меня нет цели кого-то учить, так как я считаю, что уроков и курсов и так полно на просторах интернета. Я делаю разнообразные задачки для себя в не скучном формате, чтобы всегда была практика и решил поделиться с другими, чтобы была возможность получить готовый код, адаптировать готовое решение под себя или попробовать реализовать тоже самое для практики (практика главное в разработке!). Критика и советы по поводу того, что убрать, что добавить, приветствуются.

CodePen: https://codepen.io/crazycoding21/pen/MWmYoOR
GitHub: https://github.com/CrazyCoding21/CC-HTML-CSS-15-Hexagon-Imag...

https://youtu.be/VA4ZabHQt_M

Показать полностью 1
1

Вопрос к знатокам фронтенда (чисто из любопытства)

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


Если на картинке кликнуть правой кнопкой мыши, пока она еще низкого разрешения, а пункт меню "скопировать картинку" нажать когда картинка уже будет заменена на полноразмерную, какая версия картинки будет скопирована, низкого или высокого разрешения?

Нормальный модуль NodeJS из NPM для GULP, чтобы правильно печатались картинки WEBP с правильными HTML тэгами

Реально задолбался искать нормально расширение для конвертации простых тэгов <img> в <picture><source srcset=...>


Некоторые пакеты NPM, для GULP, банально не обрабатывали HTML тэги, которые заканчивались <img... />.

Другие, тупо вставляли неправильные шаблоны.


И о чудо! Меня спас вот этот пакет https://www.npmjs.com/package/gulp-xv-webp-html


На входе:

<img class="lazyload" src="/images/Image.jpg" width="100" height="100">

На выходе:

<picture>
<source srcset="/images/Image.webp" type="image/webp">
<source srcset="/images/Image.jpg" type="image/jpeg">
<img class="lazyload" src="images/Image.jpg" width="100" height="100">
</picture>

То что доктор прописал!!!


Пакет gulp-xv-webp-html

Показать полностью
Отличная работа, все прочитано!