Анимация на css
Есть такой замечательный человек — Юлия Миоцен. Она при помощи CSS творит чудеса, выигрывает крутые награды и шарит за дизайн. Анимация сделана ей, на одной вёрстке (HTML; CSS). Юлия пришла в дизайн из программирования, а точнее сочетает в себе дизайн и программирование на высшем уровне. Очень вдохновляет, когда думаешь чем бы заняться и какого уровня можно достичь даже в вёрстке)))
Pixel Perfect, так сказать
Источник: vk.com/wall-119334888_71851
В Питере шаверма и мосты, в Казани эчпочмаки и казан. А что в других городах?
Мы постарались сделать каждый город, с которого начинается еженедельный заед в нашей новой игре, по-настоящему уникальным. Оценить можно на странице совместной игры Torero и Пикабу.
Реклама АО «Кордиант», ИНН 7601001509
А вы согласны?
Некоторое время назад один состоятельный знакомый предположил, что такие программы, как Figma, Adobe Photoshop и многие другие подобные продукты скоро будут никому не интересны, поскольку их заменит Chat GPT, Midjourney или еще что-то подобное.
Услышав его слова, я даже немного расстроился, поскольку он относился к той категории людей, мнение которых для меня является важным. Однако, я не хотел спорить, отстаивая свою точку зрения в надежде оказаться правым. На тот момент у меня не было по-настоящему весомых аргументов, чтобы возразить ему.
Прошло несколько месяцев, я увидел новые возможности Photoshop и был буквально поражен ими. Сомневаюсь, что Midjourney, при всех своих достоинствах, сможет сделать тоже самое.
Уверен, что если в следующий раз он захочет озвучить свою точку зрения относительно недостатков этих программ, то он однозначно должен будет подумать немного получше.
Я думаю, что профессионалы своего дела однозначно не станут так быстро сдавать свои позиции и уж точно сразу не проиграют. Да, у новых продуктов есть свои неоспоримые достоинства, однако и «матерые старички не спешат уходить», поскольку их популярность и профессионализм проверены годами, а молодые – это лишь хайп на новых технологиях. Их популярность неоспорима, но вот настоящий успех нужно доказывать годами проверенной и надежной работы.
Только представьте насколько сильны будут возможности, например, Photoshop или Figma при наличии у них возможностей Chat GPT и Midjourney?
Несомненно, развитие и прогресс в области искусственного интеллекта и генеративных моделей, таких как Chat GPT и Midjourney, вносят значительные изменения во многие сферы деятельности, включая дизайн и редактирование графики.
Однако, несмотря на все возможности и потенциал, которые предлагают эти инновационные технологии, все же важно понимать, что они не являются полной заменой для профессиональных программ и инструментов. Многие воспринимают данный ресурс лишь забавной и развивающей игрушкой.
Новые модели и алгоритмы могут быть полезными дополнениями и помощниками в процессе работы, но они не могут заменить творческий вклад и опыт, который привносит человек в процесс создания и редактирования графики.
Профессионалы в сфере дизайна и редактирования графики обладают не только навыками использования инструментов, но и эстетическим восприятием, творческим мышлением и пониманием контекста. Они способны принять решения на основе своего опыта, визуальной грамотности и специализированных знаний.
Современные технологии могут стать ценными инструментами, помогающими оптимизировать процесс работы, автоматизировать рутинные задачи и предлагать новые идеи и варианты для вдохновения. В конечном счете, эти инструменты могут дополнить и расширить возможности профессионалов, позволяя им сосредоточиться на более творческих и стратегических аспектах своей работы.
Таким образом, взаимодействие между технологиями и профессионалами становится важным аспектом современного творческого процесса. Вместо того, чтобы рассматривать эти инновации как «неминуемую погибель всего другого», лучше рассмотреть их как возможность для сотрудничества и синергии, где технологии поддерживают и расширяют возможности профессионалов, а профессионалы, в свою очередь, применяют свой опыт и креативность для достижения уникальных и качественных результатов.
Sculptor AI - новое поколение frontend разработки и не только...
Казалось бы, что сложного сделать сайт или приложение? В наше время существует огромное количество различных ресурсов: конструкторы сайтов, графические редакторы и многое другое. В конце концов ты можешь просто обратиться к специалисту, озвучить ему свои "хотелки", нарисовать приблизительный вариант сайта, составить техническое задание и т.д. и т.п. Если тебе нужен просто одностраничный сайт-визитка, то специалист сделает его тебе за пару дней в любом стандартном конструкторе... С таким сайтом ты будешь похож на очередного безликого персонажа из массовки, на которого никто и никогда не обратит внимания, если попадет на твою страничку. Однако, работа будет сделана быстро, хоть и бессмысленно.
Но что ты будешь делать, если тебе необходимо изготовить уникальный сайт или приложение с множеством страниц, с расчетными калькуляторами и т.п. Или же тебе нужно многостраничное и многоуровневое приложение, которое не сделать в банальном конструкторе. Тут тебе придется привлекать группу специалистов. Это будут и дизайнеры, и программисты и кого ты только не встретишь на своем пути, пока получишь готовый продукт. А сколько времени они потратят на то, чтобы его сделать? И все это ты будешь оплачивать... Поскольку время специалиста - это твои деньги.
Именно с такой проблемой я столкнулся некоторое время назад. И скажу вам честно, что меня так сильно это огорчило, что мы решили создать свой собственный сервис.
Мы назвали его Sculptor AI.
В целом получился принципиально новый сервис для разработки сайтов и приложений на основе искусственного интеллекта, построенный по принципу конвертации дизайна макета вашего будущего сайта или приложения в корректный код. Однако, это не просто сервис для верстки в HTML и CSS. С его помощью вы сможете осуществлять кросс-браузерную и кросс-платформенную разработки, мобильную разработку, делать адаптивную верстку, редактировать дизайн вашего будущего сайта или приложения, а также осуществлять первичную SEO-оптимизацию, создавать калькуляторы для расчетов, а также размещать свои уже готовые работы на продажу в личной галерее и многое многое другое.
Используя Sculptor AI вам не потребуются знания HTML и CSS (в том числе сетки и CSS-фреймворки, спецификации W3C и WHATWG, HTML5/CSS3 Polyfills), препроцессоров CSS (Sass, Less, Stylus и т. д.), фреймворков и библиотек: jQuery, Angular.JS, React.JS, Vue.JS и т.д., инструментов дебаггинга (Chrome Dev Tools, Firebug и прочие) и многого другого, что необходимо для полноценной разработки.
Теперь каждый пользователь сервиса Sculptor AI может самостоятельно и без специальных знаний в области html и языков программирования произвести конвертацию дизайна, созданного в любом графическом редакторе (Figma, Sketch, Adobe XD и т.п.).
В настоящий момент продукт завершен на стадии прототипа и мы решили сделать небольшую презентацию, чтобы заявить о себе https://youtu.be/G7Xkt0yP7Mc
Уверен, что этот продукт будет набирать обороты, поэтому мы решили создать свое комьюнити, чтобы в дальнейшем все наши друзья и участники стали нашими пользователями.
Сервис Scuiptor AI сможет объединить дизайнеров, frontend разработчиков, SEO специалистов и многих других, кто работает с сфере создания сайтов и приложений.
Наши контакты:
35 лучших бесплатных курсов HTML/CSS верстки в 2023
Подготовили для вас статью с бесплатными курсами по верстке html/css. В некоторых курсах есть тренажеры: можно проходить теории и там же практиковаться.
Покликайте на курсы, выбирайте. Важно, чтобы вам был удобен курс, понятен язык изложения, и ваш уровень знаний подходил для конкретного курса.
HTML и CSS — это языки веб-программирования, использующиеся в паре для верстки сайтов. Функционал пары следующий: HTML представляет собой "каркас", основные компоненты будущей страницы, а CSS, расширяя возможности HTML, помогает разработчику уточнять дизайн сайта.
Тренажеры
Бесплатный тренажер по html/css
Тип: Тренажер состоит из блоков теории, после которого сразу идет практика с задачами прямо внутри тренажера.
Язык: русский.
После завершения курса, вы сможете бесплатно получить сертификат о прохождении.
Тип: обучающий онлайн-тренажер.
Язык: английский.
Тип: обучающая онлайн-игра.
Язык: английский.
Бесплатные курсы от школ
“Как стать frontend-разработчиком с нуля?” от Skillfactory
Простое решение для начинающих программистов — карьерный гид компании Skillfactory. Краткий мануал расскажет об основных задачах работников сферы IT и возможностях обучения. Чтобы получить гид, необходимо указать лишь имя и адрес электронной почты.
“Основы HTML и CSS” от Stepik
Основы программирования на HTML и CSS от Тимура Гудиева на платформе Stepik. Чтобы ввести участников в кодинг, автору потребуется всего 10 видеоуроков, а для активной практики он подготовил 34 теста по каждой из тем.
“Введение в HTML5” от Курсера
Курс — введение в HTML5 от Колин ван Лент и Чарльз Северанс на платформе Coursera. В этой программе при поддержке Мичиганского университета длительность в 3 недели преподаватели расскажут о базовых навыках владения языком, а по окончании всех участников ждет электронный сертификат.
“Создание сайта на HTML” от ItProger
Данный курс по верстке сайта от itProger.com предлагает базовые знания сразу по четырем направлениям: HTML, CSS, JS и jQuery — с реальным продуктом по итогам обучения — собственным сайтом. Вся программа рассчитана на 11 видеоуроков и 108 практических заданий.
“Верстка сайта” от ItProger
"Знакомство с HTML и CSS" от HTML академии
"Курс HTML / CSS" от Beonmax
"Уроки HTML5" от ItProger
"Основы HTML, CSS и веб-дизайна" от Хекслет
"Курс HTML и CSS - верстка сайтов для начинающих" от School PHP
"Уроки CSS" от ItProger
"Введение в веб-разработку" от Hexlet
"Вводный курс по HTML и CSS для начинающих" от ShowSkill
Курсы с Youtube
Создаем сайт на основе CSS3 + HTML5
Краткий курс по созданию сайта на HTML5 и CSS3. За 14 видео автор канала Гоша Дударь расскажет все о верстке своего сайта, а также поделится общей информацией о профессии Frontend-разработчика
Это курс для веб-программистов, поделенный на две части. В первой части объясняет и показывает автор канала loftblog, а во второй инсайтами и важной информацией для HTML-верстальщиков поделится Анастасия Редченкова.
Верстка сайта #7 Создание лендинга для свадебного фотографа
YouTube-курс "Верстка сайта" от FrontCoder. За 17 видео автор канала объяснит и покажет, как создать свой сайт на HTML и CSS всего за несколько часов на реальном примере — сайте свадебного ведущего.
Верстка сайтов || Лендинги, интернет-магазины, портфолио
Курс по верстке сайтов на HTML и CSS от LectorWeb. Плейлист содержит 17 коротких YouTube-видео со всем необходимым для начинающих Frontend-разработчиков.
Видеокурс для начинающих HTML- и CSS-верстальщиков от Андрея Андриевского. За несколько часов хронометража автор проходится по основам кодинга с помощью данных языков, а также дает полезные советы желающим попробовать себя в сфере веб-разработки.
Видеоуроки по HTML-верстке от ВебКадеми для начинающих программистов и учащихся образовательных учреждений. Программа рассчитана на 17 коротких роликов, в рамках которых автор канала Юрий Ключевский расскажет зрителям об основных аспектах веб-разработки.
Бесплатный курс по верстке сайтов (Front End). Уроки HTML CSS JS
БЕСПЛАТНЫЙ курс по верстке сайтов (Front End). Уроки HTML CSS JS // Фрилансер по жизни
Что можно делать с помощью HTML и CSS?
Применяя HTML и CSS в верстке и веб-программировании, разработчики могут:
Применяя HTML и CSS в верстке и веб-программировании, разработчики могут:
Менять стиль и дизайн веб-проектов;
Отлаживать код
Сколько приносит верстка HTML и CSS в 2023 году?
По данным HH.ru, в феврале 2023 года средняя зарплата верстальщика на HTML и CSS составляет 46 000 рублей. Senior-программисты могут получать до 70 000 рублей, а вот Junior — примерно 35 000.
В то же время, рынок труда предлагает около 1 600 вакансий для позиции верстальщиков HTML и CSS каждый месяц.
Почему HTML?
Выступая практически универсальным решением в программировании, Java представляет собой:
Язык с понятной структурой — у Java несложный синтаксис;
Широкий выбор фреймворков — есть готовый набор решений для любых проектов;
Безопасный кодинг — JVM блокирует попытки навредить коду;
Обратно совместимый язык — все коды полностью функционируют вне зависимости от даты написания.
Почему HTML и CSS?
HTML и CSS — наиболее популярные языки во всех формах веб-программирования. Так, они:
Экономно расходуют ресурсы сервера сайта — из-за своей структуры код занимает мало места в системе;
Упрощают разработку сайтов — один файл стилей можно применить сразу на все страницы;
Ускоряют загрузку сайта — браузер кеширует стили, а далее загружает только данные;
Совмещают любые устройства — если они имеют доступ к редакторам HTML- и CSS-файлов.
Веб-студия - производственный ад или благо?
Эх.. Первый пост на данной платформе.
Интересно, получится ли написать что-то интересное?!
Сегодня, хотелось бы создать задаток для будущих постов в данной серии.
Она (серия), повествует, о том, как решил создать свою веб-студию, что из этого вышло на данный момент и выйдет в будущем.
Сразу хочу ответить, что сам по себе - разработчик средней руки.
Имею в стеке HTML5, CCS3, JS, Node.js, PHP, React.js, SQL, PostgreSQL и Kotlin.
Занимаюсь программированием около 3.5 лет и на данный момент, заканчиваю учебное заведение по специальности. С предисловием - всё. Переходим к самому интересному (возможно, что не очень).
Опустим процесс обучения азам и сразу перейдём к моменту получения первого заказа.
Интересно, что успел его выцепить ещё в то время, когда еле-еле освоил азы HTML и CSS.
Как-то гулял по просторам интернета и попал на биржу «Weblancer». Не могу сказать, что она сильно популярная, но в отличие от аналогов в RU сегменте, хотя бы даёт пару бесплатных откликов и возможность получить реальный заказ, а не спамит кучей фейков от ботов.
Тогда, моим максимумом были простенькие landing-page и формочки. Отправив пару откликов на немногочисленные запросы, которые хотя бы в теории мог выполнить, получил один положительный ответ и сразу же упало сообщение в личку от заказчика. Им оказался мужчина из Киева, который занимался перепродажей БУ стиральных машинок. Стоимость работы была мизерная (как и большинство подобных на фрилансе) - около 4000 рублей, но тогда, мне казалось, что это какие-то космические деньги.
Стоит упомянуть, что к моменту сдачи заказа, мы уже успели успешно ретироваться с биржи в Viber и деньги были перечислены напрямую, что в дальнейшем привело к моей блокировке на самой платформе (в целом - не жалею).
Требовался простенький сайт, который должен был включать в себя написанные копирайтером текста и соответствовать заданной стилистике, которая, к слову, была достаточно лёгкой, так как, представляла из себя что-то похожее на сайты прямиком из середины нулевых.
Ох.. Каким же испытанием для меня стала вёрстка этого простенького на данный момент макета и его адаптирование под мобильные устройства. Ушли примерно 2 дня, слёзы, пот, кровь и нервы, но сайт был сделан и функционирует по сей день.
Заказчик был крайне доволен, оставил положительный отзыв и предложил подработать личным репетитором для его сына. Ставку согласовали в размере 500 руб/час (взрыв мозга для меня в 17 лет). Можно ли сказать, что был хорошим репетитором? Думаю, что да, хоть мои знания на тот момент и ограничивались самым базисом, старался подготавливать интересный материал и повторять все необходимые темы к урокам. Потом, парень ушёл на летние каникулы и к сожалению - больше мы не сотрудничали. В этом году, мужчина написал мне в Discord с просьбой помочь разобраться в части кода и мы быстренько разобрали, что там и как. Собственно, больше не контактировали, но опыт оказался интересным и зародил во мне желание найти подобное в будущем.
Долго ждать не пришлось - спустя месяц, упал заказ по вёрстке продающей landing-page под прогнозы на спорт. К слову.. Это был мой первый негативный опыт (кинули), но хочу оставить эту часть истории для отдельного поста. Возможно, что кому-то будет интересно, как избежать подобного и не потерять собственные время, деньги, силы и нервы.
Затем, последовал период проблем в личной жизни и мне пришлось выпасть из всего этого примерно на год. Осознал, что нахожусь в простое и никуда не двигаюсь. Принял волевое решение сутками налегать на документацию и в ускоренном темпе осваивать различные технологии. Так прошло около нескольких месяцев и на меня вышел подрядчик. Мы успели закрыть несколько крупных заказов и несколько landing-page, вошёл во вкус и начал получать удовольствие от профессии - это уже не было таким адом, каким было в момент изучения материала. Сложно передать боль и страдания во время изучения чего-то сложного, когда месяцами не выходишь из дома, смотришь в экран и пытаешься в чём-то разобраться, но предполагаю, что студенты технических ВУЗов смогут понять.
На данный момент, мы до сих пор работаем вместе, да и обрасти новыми связями успел, что не может не радовать, а ручки стали сильными, набитыми (буквально на автомате делаешь то, что требуется).
В какой-то момент, мне надоело просто делать заказы, терять процент с комиссии подрядчиков и играть в сломанный телефон. Из всех возможных идей, самой интересной, оказалась возможность создания собственной студии с командой разработчиков, постоянным потоком клиентов и перспективами масштабирования. Знакомые с набитой рукой, были подняты по единому сигналу сирены, взывающей к общей жажде развития и чего-то нового.
Теперь, я, как и мои соратники по студии, стоим перед бескрайней пропастью возможностей, которая, одновременно пугает и в то же время, побуждает к действию, маня и внушая тот самый энтузиазм, который когда-то, все мы испытывали, взяв первый заказ, впервые открыв документацию, установив WebStorm и написав первую строчку кода.
А вот что же будет дальше, Вы, узнаете из последующих постов, которые, уверяю - будут интересными, объёмными и постараются передать Вам наш опыт.
С Вами был OverCode.
Всех благ и до новых встреч!
Основы веб-верстки
На почту пришло письмо с рекламой курсов по IT специальностям от университета в Иннополисе с господдержкой. В списке была в том числе веб-верстка, дай думаю загляну, программу посмотрю - возможно что-то новое увижу и можно будет почитать на досуге. Перешёл по ссылке со смартфона и упал на страницу с рекламой курса, ниже скрины страницы :)