Содержание
10 курсов по HTML и CSS для новичков
Нетология
Fructcode
Hexlet
HTML Academy: профессиональная вёрстка сайтов
Яндекс.Практикум
Codecademy
Udacity
Университет Джона Хопкинса на Coursera
Udemy: master of basics HTML5 & CSS3
Udemy: Advanced CSS
Для тех, кто не хочет проходить курсы
По исследованиям Хабра, зарплаты веб-разработчиков уровня Junior стартуют от 50 000 ₽, а Senior-разработчики берут от 185 000 ₽.
Изучение HTML и CSS — один из способов войти в эту профессию. Но не только: языки пригодятся и редактору, и дизайнеру, и email-маркетологу.
В нашей подборке — лучшие курсы по HTML и CSS на русском и английском языке. Большая часть из них — для новичков, но есть и полезные программы для более опытных.
Для начинающих: Нетология, Fructcode, Hexlet, Яндекс.Практикум, Codecademy, Udacity, Университет Джона Хопкинса на Coursera, Udemy: master of basics HTML5 & CSS3
Для продолжающих: HTML Academy: профессиональная вёрстка сайтов, Codecademy, Udemy: Advanced CSS
На русском: Нетология, Fructcode, Hexlet, HTML Academy: профессиональная вёрстка сайтов, Яндекс.Практикум
На английском: Codecademy, Udacity, Университет Джона Хопкинса на Coursera, Udemy: master of basics HTML5 & CSS3, Udemy: Advanced CSS
Бесплатно: Нетология, Udacity, Udemy: master of basics HTML5 & CSS3
Нетология
Сайт. https://netology.ru/programs/html-css-base/
Язык.
Русский
Кому подойдёт. Начинающим разработчикам, которые хотят развиваться в HTML и CSS. Дизайнерам, контент-менеджерам и интернет-маркетологам, которые хотят научиться работать в коде и верстать сайты.
Срок обучения. 3 недели в виде интенсива.
Цена. Бесплатно.
Чему учат:
- работать с HTML и CSS;
- вносить правки в код страницы и верстать текстовые блоки с нуля;
- изменять оформление и стиль блоков сайта;
- готовить контент к публикации на сайте.
В курсе 16 практических заданий, о которых рассказывают за 5 занятий. Каждое занятие — новая тема:
Теги для разметки и атрибуты. Расскажут о тегах для абзацев, цитат, ссылок, картинок. Объяснят, как сделать разметку читабельной.
Списки и таблицы. Научат создавать разметку для многоуровневого списка, оформлять таблицы, делать заголовки и объединять ячейки с помощью атрибутов.
Селекторы и свойства. Объяснят, как описывать CSS-правила, изменять размер шрифта, его начертание и цвет.
Оформление текстовых блоков с помощью CSS. Помогут изменить маркеры в списках и установить вместо стандартного символа оригинальную картинку. Расскажут о форматах указания цвета и покажут, как изменить фон сайта.
Основы клиент-серверного взаимодействия. Введут в понятие DNS и HTTP, объяснят разницу между backend и frontend.
Весь курс — это видеолекции и презентации, которые преподаёт Владимир Языков, веб-разработчик со стажем 13 лет, разработчик проектов для S7, ВТБ, Tele2.
Fructcode
Сайт. https://fructcode.com/ru/courses/html-and-css-advanced/
Язык. Русский
Кому подойдёт. Тем, кто хочет разобраться в основах веб-разработки.
Срок обучения. Видео на 17 часов.
Цена. Доступ по подписке: $7,6 на месяц; $11,6 на полгода; $15,6 на год.
Курс представляет собой видеоуроки, в которых рассказывают об основах HTML и CSS.
Программа онлайн обучения разделена на 19 частей, в каждой — несколько видео по 2–10 минут. Первые 11 частей посвящены теории. Остальные — практические задания.
Темы теоретической части:
Базовые HTML и HTML5. О базовой разметке и тегах.
Базовый CSS. О CSS селекторах и псевдоподклассах. Объяснят CSS-свойства Margin, Padding, Box-sizing и свойства display — block, inline, inline-block, none.
Позиционирование CSS Grid и Flexbox. О свойствах grid-template и различных видах позиционирования.
Подключение шрифтов к сайту. Покажут простой и продвинутый способы.
Адаптивная вёрстка. Объяснят единицы измерения: px, проценты, vw, vh.
В практической части вы научитесь:
- работать в Figma;
- создавать header, footer, блок фильмов и сериалов, блок hero;
- адаптировать вёрстку под ПК и смартфоны;
- создавать страницу для просмотра фильмов и авторизации.
В конце обучения вы создадите собственный сайт для просмотра фильмов и получите сертификат о прохождении курса.
Hexlet
Сайт. https://ru.hexlet.io/categories/html/courses
Язык. Русский
Кому подойдёт. Новичкам, которые приходят в профессию с нуля. Самоучкам, которые не справляются с обучением без преподавателя.
Срок обучения. 105 часов.
Цена. 3900 ₽ в месяц за доступ ко всем курсам.
Такой сертификат получают выпускники после прохождения курса по верстке. Источник
На курсе дают базу по HTML и CSS, учат верстать адаптивные страницы и работать с препроцессорами, рассказывают о Flex, Sass, Bootstrap.
Всего у Hexlet 193 текстовых урока, которые разбиты на 13 модулей и посвящены таким темам:
Основы веб-разработки. Введут в базовую терминологию.
HTML5. Расскажут о разметке веб-страниц и работе со стилями.
CSS. Покажут, как визуально оформлять сайт и сделать анимации интерфейсов.
Адаптивность. Научат создавать страницы, чтобы с ними было одинаково удобно работать на ПК и на смартфонах.
Инфраструктура. Объяснят, как работать с командной строкой, Git, NPM и линтерами.
Инструменты автоматизации Sass, Pug и Gulp. Научат автоматизировать процессы на HTML и CSS.
Доступность. Помогут создать сайт, который удобно использовать людям с ограниченными возможностями. Расскажут о доступе к странице с помощью клавиатуры и скринридера.
За время обучения вы выполните 130 упражнений и сделаете 3 проекта в портфолио на GitHub. Также выполните 11 Open Source проектов и научитесь работать с чужим кодом.
HTML Academy: профессиональная вёрстка сайтов
Сайт. https://htmlacademy.ru/courses/basic-html-css
Язык. Русский.
Кому подойдет. Новичкам, которые прошли тренажёры от HTML Academy.
Срок обучения. Стандартный — 2 месяца по 20 часов в неделю. Расширенный — 5,5 месяцев по 8 часов в неделю.
Цена. Стандартный — 15 400 ₽, в рассрочку 3850 ₽ в месяц. Расширенный — 36 900 ₽ или 9220 ₽ в месяц по рассрочке.
Курс с лайвами, практикой и ревью кода. Перед тем, как его покупать, нужно пройти тренажёры от академии. Тренажёры — это 4 модуля по несколько частей. Они познакомят новичков с веб-разработкой, HTML, CSS, JavaScript и PHP.
Курс состоит из 10 частей, последняя — защита диплома. В остальных рассматривают такие темы:
Разметка. Расскажут о синтаксисе HTML, категории тегов и правила их выкладывания. Познакомят с интерфейсом Figma.
Графика. Объяснят интерфейс Figma подробнее. Научат создавать файловую структуру проектов и выбирать правильный формат файлов.
Базовая стилизация. Обучат CSS с нуля, объяснят шрифты и типографику. Помогут установить контентную и декоративную графику на страницы проекта.
Сетки страниц и компонентов на флексах. Научат анализировать сетки на макетах и расскажут о Flexible box layout — CSS раскладке для создания пользовательских интерфейсов.
Сетки компонентов на гридах. В нём познакомят с Grid Layout — ещё одна CSS раскладка.
Декоративные элементы. Объяснят, как использовать декоративную графику. Научат типографике и визуальному оформлению контента.
Попапы, слайдеры, формы. Покажут, как верстать всплывающие формы и встраивать модальные окна на страницы.
За время обучения вы создадите один проект в портфолио. Есть расширенный формат, за который студенты выполняют три проекта для портфолио.
Те, кто прошёл курс «Профессиональная вёрстка», могут приобрести следующий — «Адаптивная вёрстка». Он рассчитан на опытных верстальщиков. На курсе научат делать разметку по методу БЭМ, писать CSS-код на препроцессорах, формировать адаптивную сетку и автоматизировать сборку проектов.
Обучаться можно по стандартному пакету (23 900 ₽ — 2 месяца по 20 часов в неделю) или расширенному (48 900 ₽ — 5,5 месяцев по 8 часов в неделю).
Яндекс.Практикум
Сайт. https://practicum.
yandex.ru/web/
Язык. Русский
Кому подойдёт. Новичкам, которые хотят стать веб-разработчиками и работать с HTML, CSS, NodeJS, React и другими технологиями. Тем, кто хочет вырасти из верстальщика в веб-программиста.
Срок обучения. 10 месяцев по 20 часов в неделю.
Цена. 140 000 ₽. Можно в кредит — от 7613 ₽/мес. Для тех, кто не уверен в курсе и выборе профессии, есть бесплатная вводная часть об основах разработки на 20 часов.
Здесь рассказывают об основах и возможностях HTML и CSS, учат работать с макетами и адаптивной вёрсткой, а также вводят в JavaScript и React.
Курс разбит на 6 модулей, по несколько недель каждый. О чём рассказывают:
Вводный модуль HTML, CSS, JavaScript. Научат правилам разметки HTML с нуля и работе со стилями: управлять цветом, шрифтами, расположением блоков на странице. Расскажут о базовом синтаксисе HTML и CSS, наборе тегов и стилистических правилах.
Расширенные возможности HTML и CSS.
Расскажут о методологии БЭМ. Научат строить модульные сетки, подключать к проекту систему контроля версий Git и работать с командной строкой.
Адаптивная вёрстка и работа с макетом. Объяснят макеты и их виды. Научат создавать интерфейсы для разных устройств.
Базовый JavaScript и работа с браузером. Научат работать с условиями, циклами и функциями, создавать интерактивные формы с проверкой данных.
Погружение в JavaScript. Введут в объектно-ориентированное программирование, асинхронность и обмен данными с сервером. Научат писать модульный код.
Интерфейсы на React. Познакомят с концепцией React и созданием сложных интерфейсов.
Основы бэкенда для frontend-разработчиков. Научат создавать веб-приложения со взаимодействием с сервером.
В конце курса у вас будет 5 работ в портфолио, которые пригодятся в поиске работы. А сам курс закончится защитой дипломной работы.
Codecademy
Сайт. https://www.
codecademy.com/catalog/language/html-css
Язык. Английский.
Кому подойдёт. Новичкам, которые хотят попробовать веб-разработку. Тем, кто уже знает основы HTML и CSS и хочет прокачать навыки.
Срок обучения. Без ограничений.
Цена. Обучение доступно по подписке: версия Pro Lite стоит $11,99; версия Pro (помогают подготовиться к собеседованию и найти работу) — $15,99.
Если вы студент и хотите изучать веб-разработку, можете получить скидку 35% на подписку. Для этого нужно предъявить студенческий.
На Codeacademy есть 13 текстовых курсов, которые разбиты по уровням сложности: для начинающих и миддлов. Также они делятся на платные и бесплатные.
Бесплатный вводный курс состоит из 6 уроков и рассчитан на 9 часов. Темы курса:
Элементы и структуры HTML. Расскажут об основах кода и стандартах HTML.
Таблицы. Научат представлять информацию в виде таблиц.
Формы. Объяснят, как их создавать и настраивать.
Синтаксис. Расскажут, как писать чистый и понятный код, используя семантические HTML-коды.
В платном курсе для начинающих информации больше. Время прохождения зависит от вас, т.к. курс открыт постоянно. В нём рассказывают о базовом и промежуточном CSS, адаптивном дизайне, CSS flexible и transitions. В конце курса вы напишете проект на GitHub.
Udacity
Сайт. https://www.udacity.com/course/intro-to-html-and-css—ud001
Язык. Английский.
Кому подойдёт. Подходит для изучения новичкам, которые знают английский и хотят определиться, интересна им веб верстка или нет.
Срок обучения. 3 недели, около 5 часов в неделю.
Цена. Бесплатно.
Здесь обучают основам HTML и CSS, рассказывают, как использовать код для создания веб-сайтов и работать в редакторах кода.
Курс разделён на 4 урока по несколько видео или текстовых файлов. Темы обучения:
HTML-синтаксис и HTML-теги. Расскажут о древовидной структуре HTML и текстовых редакторах.
Работа с визуальным контентом. Научат добавлять изображения и списки на сайты. Добавлять заголовки, структурировать страницы и создавать списки элементов.
Синтаксис CSS. Объяснят блочную структуру CSS, наборы правил и инструменты разработчика.
Декоративные элементы. Научат стилизовать изображения и страницы, обучат типографике.
Университет Джона Хопкинса на Coursera
Сайт. https://www.coursera.org/learn/html-css-javascript-for-web-developers
Язык. Английский.
Кому подойдет. Тем, кто хочет создавать сайты с нуля и работать с последними версиями HTML и CSS.
Срок обучения. 5 недель, 40 часов видео.
Цена. $79.
Курс по основам веб-разработки с использованием HTML, CSS и JavaScript. После обучения вы научитесь писать программы на JavaScript, работать с HTML и CSS, делать страницы интерактивными и адаптивными.
Обучение разбито на 5 модулей по несколько видео в каждом.
Длительность одного модуля — одна неделя. В каждом модуле есть материалы для самостоятельного обучения и тесты. Видеоуроки посвящены таким темам:
Основы HTML5. Расскажут, как правильно изучать программирование. Объяснят основы HTML5: структуру документа, основные и семантические теги.
Основы CSS3. Научат визуальному оформлению страниц, блочной структуре. Помогут создать адаптивный дизайн. Познакомят с Twitter Bootstrap с его основной сеточной системой.
Создание статичного сайта. Объяснят основы взаимодействия с клиентом через веб-сайт, помогут создать сайт с нуля.
Основы JavaScript. Расскажут о конструкциях языка и типах Javascript. Объяснят объекты, функции, массивы, замыкания и другие понятия.
Использование JavaScript при создании веб-приложений. Научат управлять компонентами веб-страницы с помощью API. Расскажут об Ajax — способе передачи информации на сайты. Объяснят, что такое HTTP и как работать с JSON — текстовым форматом данных.
В конце обучения вы подключите сайт к серверам, чтобы тот динамически обновлял информацию на странице без ручной перезагрузки.
Udemy: master of basics HTML5 & CSS3
Сайт. https://www.udemy.com/course/master-the-basics-of-html5-css3-beginner-web-development/
Язык. Английский.
Кому подойдет. Новичкам, которые знают английский и хотят узнать базовую информацию о веб-разработке.
Срок обучения. 3 часа.
Цена. Бесплатно.
Небольшой видеокурс, в котором закадровый голос объясняет происходящее на экране и рассказывает об основах HTML и CSS.
Курс состоит из 38 лекций на 3 часа по 5–10 минут каждая. Чему научитесь за это время:
В разделе HTML: создавать веб-страницы, добавлять изображения, изменять цвета и строить списки. Также объяснят про теги и ссылки.
В разделе CSS: стилизовать веб-страницы, изменять цвета и размеры шрифта, добавлять поле содержимого на веб-страницу.
Udemy: Advanced CSS
Сайт. https://www.udemy.com/course/advanced-css-and-sass/
Язык. Английский.
Кому подойдет. Тем, кто уже знаком с HTML и CSS и умеет с ними работать.
Срок обучения. 28 часов.
Цена. $85 (как правило, действует скидка, и будет значительно дешевле).
Курс по продвинутому HTML и Sass. Программа обучения состоит из 10 разделов и 126 лекций.
Чему учат на лекциях:
Продвинутые HTML и CSS. Расскажут об адаптивных изображениях в HTML и CSS, которые ускоряют загрузку страниц. Научат работать с SVG-изображениями и видео — создавать фоновые видеоэффекты.
CSS-анимации. Объяснят, как работать с ключевыми кадрами, анимацией и красивыми переходами. Расскажут об архитектуре CSS: компонентном дизайне, методологии БЭМ, создании повторно используемого кода.
Макеты Flexbox. Помогут создать гибкий макет с использованием этой технологии.
Макеты CSS Grid.
Покажут, как создать проект на грид-раскладке.
Использование Sass в реальных проектах. Расскажут о глобальных переменных, архитектуре CSS и управлении медиа-запросами.
Продвинутый адаптивный дизайн. Научат создавать адаптивные страницы под мобильные устройства и ПК. Расскажут об адаптивных изображениях в HTML и CSS для быстрой загрузки страниц
Экосистема NPM. Объяснят рабочие процессы разработки и процессы построения веб-проектов.
После прохождения курса вы получите сертификат об окончании обучения.
Для тех, кто не хочет проходить курсы
Если не нравятся курсы или проходить их неинтересно, можно изучать HTML и CSS самостоятельно. Есть справочники, в которых собран большой объём информации для обучения.
Webref — полное руководство для тех, кто хочет самостоятельно разобраться в HTML и CSS. Книга рассказывает об основных принципах и этапах веб-разработки: блочных моделях, позиционировании, типографики, фонах и т.
д.
Каждая глава разделена на блоки и содержит примеры с демонстрациями на макетах. В них можно смотреть, как код выглядит в результате, как он описан в HTML и CSS.
HtmlBook — ещё один самоучитель, который предназначен для новичков. Он содержит множество иллюстраций с примерами кода, вопросами для проверки и заданиями для самостоятельной работы. Это поможет выучить код и сразу применять его на практике.
Самоучитель разделён на 13 глав. В них рассказывается о тегах, структуре документов, шрифтах, якорях, таблицах, списках и т.д. Также на сайте есть справочник по различным HTML-тегам с описанием, зачем их используют. Есть статьи по HTML5.
CSSBook — самоучитель на том же сайте, что и HtmlBook. В нём также есть примеры кода, иллюстрации и задания.
Книга состоит из 22 глав, в которых рассказывают о базовых правилах CSS, селекторах тегов, идентификаторах, псевдоклассах и т.д.
Кроме этого, на сайте есть справочник по CSS и рецепты, в которых собраны готовые ответы на задачи по вёрстке, работе с изображениями, списками.
Рецепты построены так: даётся задача — и описывается её решение с примерами.
Но и это не всё — есть полезные статьи по CSS3.
Developer.Mozilla — большое руководство по работе с HTML и CSS для начинающих. Здесь рассказывают о мультимедиа, таблицах, макетах и текстах. Есть информация и по JavaScript.
Минус руководства в том, что с английского на русский его переводило сообщество разработчиков, поэтому некоторые моменты объяснены сложным языком.
W3Schools — библиотека информации по разным языкам программирования, в том числе HTML и CSS. Уроки написаны на английском, но все объяснения подкреплены примерами использования. А в конце объяснения можно поработать с кодом самостоятельно.
В учебнике по HTML собрана информация по тегам, формам, API, графике, ссылкам. Также есть 100 упражнений, которые можно выполнять на сайте и прокачивать навыки.
В справочнике по CSS рассказывают о базовых вещах: шрифты, таблицы, изображения и т.д. Есть материалы для продвинутых разработчиков — о переменных, масках, 2D и 3D графике.
CSS Tricks — это не просто самоучитель, а сборник трюков, фишек и гайдов с подробным описанием всех новых технологий в области HTML/CSS. Книга на английском языке.
На CSS Tricks разные разработчики выкладывают свои методы работы с кодом и рассказывают, как можно сделать красивую форму, список, шрифт и другие элементы. И это не просто текстовые описания — это готовые примеры кода, которые можно копировать и использовать в своих проектах.
Поделиться
СВЕЖИЕ СТАТЬИ
Другие материалы из этой рубрики
Не пропускайте новые статьи
Подписывайтесь на соцсети
Делимся новостями и свежими статьями, рассказываем о новинках сервиса
«Честно» — авторская рассылка от редакции Unisender
Искренние письма о работе и жизни. Свежие статьи из блога. Эксклюзивные кейсы
и интервью с экспертами диджитала.
Оставляя свой email, я принимаю Политику конфиденциальности
Наш юрист будет ругаться, если вы не примете 🙁
Как создать свой первый сайт с нуля | от CodeCircuit | CodeX
Как создать свой первый веб-сайт с нуля | от CodeCircuit | КодX | Medium
Рекомендации по оптимизации и производительности веб-сайта
Опубликовано в
·
Чтение: 4 мин.
·
11 февраля
Фото агентства KOBU на Unsplash
сайт! Это захватывающее время, потому что вы создаете что-то уникальное. Но как начать?
Не беспокойтесь; мы здесь, чтобы помочь вам на каждом шагу. Мы рассмотрим все, что вам нужно знать, чтобы создать…
Автор CodeCircuit
2K Followers
·Писатель для
Технический энтузиаст😊, предлагаю свежий взгляд на программирование и советы по продуктивности для программистов🧑 💻.
https://linktr.ee/codecircuit
Еще от CodeCircuit и CodeX
CodeCircuit
in
10 лучших математических идей, которые должен освоить каждый программист
Полное руководство по математике для программистов: 10 концепций, которые необходимо знать Хитрости Python, которые нужно изучить перед написанием следующего кода
Хитрости, которые облегчат вам жизнь разработчика Python
· чтение за 6 минут · 6 июня
Alex Omeyer
в
Полное руководство инженера по техническому долгу 9000 3
В этом руководстве вы узнаете, как предотвращать, исправлять и управлять техническим долгом. Узнайте о типах технического долга, стоимости технического долга и многом другом. 4 янв Навыки работы с самыми популярными приложениями в 2023 году
· Чтение за 6 мин. ·12 апреля
Посмотреть все на CodeCircuit
Рекомендовано на Medium
Джули Перилла Гарсия
в
Чтобы стать великим разработчиком программного обеспечения — Вам нужна система
Вот как ее создать.
·7 мин чтения·23 июня
Полезная технология
в
9 новых обязательных приложений для повышения производительности macOS для повседневного использования
Как вам удалось все эти дни без этих приложений?
·11 минут чтения·5 дней назад
Списки
Общие знания в области кодирования
20 историй·44 сохранения
Начинать что-то никогда не поздно и не рано
10 историй·17 сохранений
Истории, которые помогут вам расти как разработчику программного обеспечения
19 историй·156 сохранений
Co Дин и развитие
11 историй·28 сохранений
Matteo Possamai
in
Лучшие проекты Идеи для Backend-разработчика
Лучшие сайд-проекты, которые нужно реализовать в 2023 году
9000 4 ·3 минуты чтения·Мар 20
Shalitha Suranga
in
Сокращенный синтаксис JavaScript, который должен знать каждый разработчик ·6 дней назад
Джейкоб Беннетт
в
Используйте Git как старший инженер
Git — это мощный инструмент, которым приятно пользоваться, когда вы знаете, как им пользоваться.
· Чтение через 4 мин·15 ноября 2022 г.
Мохаммад Ясер Ахмади
25 советов и подсказок VSCode
Список важных советов, подсказок и ярлыков для увеличения скорости написания кода
Посмотреть больше рекомендаций
Статус
Карьера
Преобразование текста в речь
Запуск веб-сайта с нуля бесплатно и с использованием Ycode, инструмента без кода | Лаис Лара Вакко
Обзор процесса с некоторыми ссылками
Опубликовано в
·
9 мин чтения
·
30 ноября 2022 г.
В этом году мы с моим партнером Кали решили начать совместный консультационный проект. На самом деле создание веб-сайта было последней частью, о которой мы беспокоились. Ранее мы предприняли несколько шагов, поэтому я поделюсь кратким обзором всего этого процесса, пока не перейду к запуску веб-сайта.
Прежде чем приступить к проектированию
Нам предстояло выполнить следующую основную часть проекта:
- Определить, какие услуги мы будем предлагать
- Каким будет наше позиционирование
- Что/как мы будем сообщать для какой аудитории
- Создать карту сайта
Мы использовали Fibery для организации таких тем, как написание документов с нашими идеями, сбор отзывов , создание задач и т.
д.
Как только мы с этим разобрались, что заняло у нас довольно много времени, мы начали думать о структуре и фактическом содержании страницы. Мы написали все это, думая о нашей основной аудитории, пытаясь ответить на возможные возражения.
Структура, которой я предпочитаю следовать при создании контента для веб-сайтов, основана на книге «Как заставить веб-сайты побеждать». В одну колонку мы добавляем возражения или опасения, которые мы уже слышали от нашей аудитории. С правой стороны мы добавляем столбец встречных возражений, добавляя ответы, которые мы считаем наиболее эффективными для каждого из этих возражений.
Пример столбцов для возражений и встречных возражений
Таким образом, я могу иметь обзор важных тем для рассмотрения на странице.
Для написания главного раздела страницы я использовал руководство Джулиана Шапиро по целевым страницам в качестве справки. Он делится простыми советами и примерами.
Чтобы сохранить экспериментальный настрой и выпустить страницу как можно скорее, мы использовали Notion.
У Notion есть бесплатный план. Его легко повторять и поддерживать. И это делает работу по общению с нашей аудиторией.
Затем мы опубликовали нашу страницу Notion с собственным доменом и поделились ею на нашем LinkedIn. Мы собрали отзывы и после нескольких итераций решили, что это именно то направление, которое мы хотели.
Скриншот страницы Notion, написанной на бразильском португальском языке
Эта первая часть с использованием Notion, без размышлений о дизайне страницы, имела решающее значение для экономии нашего времени. Если бы мы начали прямо с Figma или с любой реальной страницы в производстве, это было бы пустой тратой времени, учитывая все структурные и содержательные изменения на этом этапе.
Теперь приступим к дизайну.
Ну, на самом деле, пока нет. Это могло бы быть. Но как мы собирались развивать эту страницу? Сколько свободы у меня было бы с дизайном? Для меня эти вопросы нуждались в ответе, прежде чем я перейду к дизайну.
Мой партнер когда-то был разработчиком, и, приложив некоторые усилия, он мог его разработать, но мы знали, насколько эффективным может быть простое использование правильного инструмента без кода.
Это могло бы сэкономить нам время, и у меня была бы вся свобода, которую я хотел, чтобы обновить страницу, когда это необходимо.
Здесь мы начали поиск подходящего инструмента без кода.
Итак, какой инструмент без кода использовать для его разработки?
Webflow и Semplice — это инструменты, которые зажигают мои глаза при создании веб-сайтов. Их UI/UX и документация кажутся отличными. Но у обоих инструментов есть большая проблема для нас: у них нет локализованного ценообразования. Это делает его очень дорогим для бразильцев, которые только начинают проект без фиксированного дохода. 🥲️
Я уже пробовал некоторые инструменты без кода для создания сайтов, такие как:
- Bubble для целевой страницы на основе растений — с разделом для загрузки документа и сбора данных от пользователя
- Elementor с sheet2site для веб-сайта доски объявлений Vagas UX
- *Mmm.page для тестирования простой целевой страницы — причудливый и забавный инструмент!
- *Carrd также тестирует простую целевую страницу
- *Softr тестирует создание (фальшивой) торговой площадки, ресурсного каталога ярмарок в Бразилии и другого каталога иллюстраций от визуальных мыслителей. *
*Эти проекты я делал, когда принимал участие в конкурсе без кода в этом году. Цель состояла в том, чтобы узнать больше об инструментах без кода и понять их потенциал для разных проектов, а не сделать окончательный отполированный пользовательский интерфейс.
Обзор некоторых веб-сайтов, которые я создал с помощью упомянутых выше инструментов без кода
Несмотря на это, ни один из этих инструментов не показался нам подходящим либо из-за цены, ограниченности функций, не очень хорошего UI/UX или производительность инструмента.
После поисков и обсуждений мой партнер предложил Ycode. Он пробовал это в прошлом, и, узнав больше об этом, я тоже загорелся желанием попробовать.
Вот причины, по которым мы выбрали Ycode:
- Планы: их бесплатный план включает 10 страниц и до 100 элементов в CMS и пользовательский домен. 😯 Они сохраняют свой логотип в правом нижнем углу страницы, но URL остается нашим.
- Пользовательский интерфейс: он настолько похож на Webflow, что в некоторых случаях я использовал видеоролики Webflow, чтобы найти ответы на некоторые вопросы, которые у меня были.
- Расширенные функции: это позволяет создавать динамические веб-сайты, управляемые базами данных. Я хотел узнать больше об этом долгосрочном мышлении — так как наш сайт пока этого не требует.
- Способ построения: как и Webflow, Ycode также использует основы HTML и CSS. Так что мне не нужно знать, как писать код, но я все равно использую ту же ментальную модель при построении. Я нашел это полезным и достойным изучения.
- Потенциал инструмента: Ycode — это новый инструмент, публично запущенный всего год назад, но уже имеющий хороший пользовательский интерфейс и расширенные функции. Это также от того же создателя Mailerlite, инструмента цифрового маркетинга, который мы также использовали в нашем проекте VagasUX. Это заставило нас поверить в потенциал долгосрочного мышления Ycode. Некоторые говорят, что это жизнеспособная альтернатива Webflow.
Теперь давайте перейдем к дизайну
Теперь я подумал, что сейчас самое время заняться его дизайном, так как у нас уже был инструмент, контент, карта сайта и структура страницы.
Я начал изучать некоторые визуальные ориентиры. Затем я сделал наброски страницы и начал определять визуальное руководство.
Руководство по стилю сайта
После нескольких итераций страница была готова к созданию.
Обзор домашней страницы, сделанной в Figma
Наконец, пришло время создать страницу
Я был взволнован тем чувством расширения прав и возможностей, которое разработчики могут испытывать, получая проект для сборки.
Так как это был мой первый опыт работы с этим инструментом, и мы хотели ускорить доставку, мы решили упростить веб-сайт и начать только с главной страницы.
Я хотел настроить и визуализировать классы для текстовых компонентов, поэтому я начал со страницы руководства по стилю в Ycode. Моя ссылка на статью из Webflow о том, как создать руководство по живому стилю.
Позже я увидел, что в Ycode уже есть цветовая система, которую я могу использовать и добавлять свои собственные цвета, поэтому мое руководство по стилю было предназначено только для стилей шрифтов.
Я не добавлял никаких других компонентов, потому что мне не терпелось приступить к созданию страницы и посмотреть, как она будет работать.
Стили шрифтов, которые я добавил в Ycode
Поскольку инструмент использует структуру HTML и имеет несколько готовых компонентов, я задумался, следует ли мне начать с блоков div, контейнеров или разделов. К счастью, у них есть документация об этом.
Создание аккордеона
Я не знал, как создать компонент аккордеона, поэтому перепроектировал один из их шаблонов целевой страницы. Проверка их компонента часто задаваемых вопросов помогла мне это сделать. Но я заметил, что стрелка по-прежнему не меняет своего состояния. Он остался в закрытом состоянии.
Открытие и закрытие компонента аккордеона на шаблоне страницы
Чтобы заставить стрелку менять направление, это была простая настройка: добавьте еще один значок, скройте его, а затем создайте рабочий процесс, который включает его там.
Рабочий процесс компонента «аккордеон»
Вот как это выглядит:
Открытие и закрытие компонента «аккордеон»
Создание простой контактной формы
У них было отличное видео, объясняющее, как создать простую контактную форму.
Общая реализация работала хорошо, и это было легко сделать. В Ycode вы можете хранить данные в своей собственной базе данных, а также настроить ее для получения электронной почты после получения контакта.
Раздел базы данных создан для контактной формы
Хотя, тестируя его на своей странице, я заметил, что не было сообщения с подтверждением. Когда пользователь отправляет свой контакт, страница загружается до самого верха страницы, удаляя пользователя из этого раздела, и без обратной связи, если его контакт был успешно отправлен. Я нашел это запутанным и не мог найти альтернативу для него.
Кроме того, поле номера телефона принимало буквы, поэтому мы добавили пользовательское регулярное выражение, разрешающее только цифры. Но мы заметили, что проверка регулярного выражения выполняется бэкендом, а не внешним интерфейсом, из-за чего ошибка обратной связи под полем появляется только после отправки данных, а не сразу при вводе информации.
Затем мы решили изменить контактную форму с Ycode на форму от Tally, еще одного замечательного инструмента, имеющего бесплатную версию.
Мы встроили его туда, и он отлично работал. Вот как это показывает подтверждающее сообщение:
Сообщение обратной связи формы Tally, встроенное в страницу
Пересмотр контрольных точек для адаптивной страницы
После того, как настольная версия была готова, я начал пересматривать контрольные точки для малых и средних экранов. Я обновил размер шрифта, поля и отступы.
Мне пришлось переделать два раздела страницы, в которых использовалась сетка, потому что я создал блоки div так, что они отлично смотрелись на компьютере, но на мобильных устройствах получались беспорядок. После некоторых исправлений это выглядит так:
Отображение точек останова страницы: маленький, средний и большой размер
Вот выпущенная страница с нашим пользовательским доменом: skutalab.com 🎉
Проблемы на пути
Как я Я новичок в этом инструменте, и этот инструмент является новым для широкой публики, у нас были некоторые проблемы вместе. Ничего особенного, но я думаю, стоит упомянуть.
При обновлении стилей для меньших версий я столкнулся с низкой производительностью и несколькими ошибками. Бывало, что некоторые стили не сохранялись, либо сохранялись, но не отображались на странице предварительного просмотра. Приходилось переделывать вещи не один раз.
В десктопной версии были и другие моменты, когда я не был уверен, ошибка в инструменте или ошибка во мне. Иногда это разочаровывало новичка, изучающего инструмент.
Когда я думал о внесении некоторых изменений, таких как предоставление пользователю возможности закрывать мобильное меню при нажатии вне его, а не только при нажатии на кнопку X, я еще не мог найти способ сделать это.
И когда я хотел добавить плавную прокрутку, когда пользователь щелкает меню и перенаправляется в раздел страницы, я не мог найти простой способ сделать это. Поэтому мой партнер попытался добавить собственный код CSS — Ycode использует Tailwind — но после нескольких тестов это не сработало.
Потом я написал об этом в их сообществе, и они мне оперативно помогли.