#html верстка

[sergio-sergio]

Секрет идеальной верстки сайта: ваш личный чек-лист

Введение

Привет! Сегодня я хочу поделиться с вами секретами идеальной верстки сайта. Мы все знаем, насколько важен первый взгляд на веб-страницу: от того, насколько профессионально и приятно она выглядит, зависит, останется ли посетитель на сайте или уйдет на другой. Поэтому качественная верстка — это не просто красивые картинки, это целый ряд технических и эстетических решений, которые делают сайт удобным и функциональным.

Верстка сайта — это как искусство. Каждый элемент на странице должен находиться на своем месте, каждая строка кода должна выполнять свою задачу без сбоев. И, верите ли вы или нет, для создания идеального сайта необходимо следовать определенным стандартам и требованиям, которые обеспечивают не только красоту, но и функциональность веб-страниц. Первое, с чего всегда начинается работа над сайтом — это понимание того, кто будет его использовать. Это знание помогает создать дизайн, который будет отвечать именно тем потребностям и ожиданиям, которые есть у вашей целевой аудитории. Например, если ваш сайт предназначен для молодежи, стоит сделать акцент на мобильную версию, так как именно с телефонов сегодня заходит большинство пользователей этой возрастной категории. А если вы создаете сайт для крупной юридической компании, то вашим приоритетом будет безупречная работа на настольных компьютерах и максимальная безопасность данных.

Также важно помнить, что идеальная верстка начинается не с кода, а с планирования. Каждый элемент сайта должен быть продуман: от заголовков до футера. Это помогает избежать ошибок в будущем и делает процесс разработки более организованным и менее хаотичным. А качественный финальный продукт – это всегда результат четкой и систем��тизированной работы. И помните, что в наши дни нет места случайностям в дизайне веб-страниц. Каждый шрифт, каждая картинка, каждый блок информации должны быть четко на своих местах. Ведь именно такой подход позволяет создавать сайты, которые не просто нравятся пользователям, но и выполняют свои функции на 100%.

Понимание стандартов и требований

Как только мы определились с тем, для кого мы создаём сайт и что именно от него нужно, наступает момент знакомства с миром стандартов и требований веб-разработки. Понимание и соблюдение стандартов W3C (World Wide Web Consortium) не просто полезно, но и крайне необходимо для любого проекта. Эти стандарты помогают обеспечить, чтобы ваш сайт корректно отображался в различных браузерах и на разных устройствах, что в наше время разнообразия технологий играет ключевую роль.

Давайте разберемся, почему это так важно. Представьте, что ваш сайт — это автомобиль. Стандарты W3C — это правила дорожного движения. Если следовать этим правилам, ваша поездка (или пользовательский опыт посетителя сайта) будет безопасной и комфортной. Если же игнорировать их, то рискуете попасть в аварию или застрять в пробке из-за технических неисправностей. Следующий важный аспект — семантическая верстка. Семантика в HTML — это использование тегов по назначению. Например, теги , , и помогают не только структурировать информацию, но и делают ваш сайт доступным для поисковых систем и программ чтения экрана. Это особенно важно для SEO и доступности сайта, что в свою очередь влияет на ваш рейтинг в поисковой выдаче и делает сайт дружелюбным к пользователям с ограниченными возможностями. Итак, пройдя этап планирования и установки стандартов, мы подготовили прочную основу для дальнейшей работы. Это как строительство дома: если фундамент заложен правильно, то дальше можно смело возводить стены и крышу, зная, что они будут стоять уверенно и надёжно. Точно так же, заложив надёжный базис в виде соблюдения стандартов и правильной семантики, мы можем двигаться дальше — к дизайну и функционалу нашего сайта, уверенные в том, что все будет работать как часы.

Чек-лист перед началом работы

Перед тем как мы начнем погружение в технические детали верстки, стоит подготовить чек-лист, который поможет не забыть о важных моментах и сделает процесс разработки более организованным и продуктивным. Это как составление списка покупок перед походом в магазин: зная точно, что тебе нужно, ты экономишь время и деньги. Так и в веб-разработке — четкий план помогает избежать ненужных трат и ускоряет процесс создания сайта. Определение целевой аудитории и устройств Первый шаг в нашем чек-листе — это анализ целевой аудитории. От кого мы создаем сайт? Какие устройства они используют? Это поможет определить, нужно ли делать акцент на мобильную версию или возможно, ваша аудитория больше склонна пользоваться настольными компьютерами. Например, если ваш сайт направлен на молодежь, которая активно пользуется смартфонами, то без адаптивного дизайна не обойтись. В России сейчас на мобильный интернет приходится около 70% трафика, так что пренебрегать этим нельзя.

Выбор инструментов для разработки Затем следует выбор инструментов и технологий. Не стоит бояться использовать удобные CMS для упрощения работы или специализированные инструменты для дизайна и прототипирования, такие как Figma или Adobe XD. Эти сервисы значительно упрощают процесс разработки, позволяя быстро вносить изменения и адаптироваться под нужды заказчика. Проверка доступных ресурсов Проверьте, какие ресурсы у вас есть в наличии. Это может быть доступ к профессиональным шрифтам, качественным изображениям, лицензии на программное обеспечение. Иногда стоит инвестировать в платные инструменты, чтобы обеспечить высокий уровень работы. Например, профессиональные шрифты стоят около 5000 рублей, но они могут кардинально улучшить восприятие сайта. Разработка временного плана И, конечно, не забудьте составить реалистичный временной план. Это поможет вам организовать рабочий процесс, расставить приоритеты и сделать его предсказуемым для команды и заказчика. Помните, что спешка и нереалистичные сроки могут привести к снижению качества работы. С этим чек-листом вы будете уверены, что подходите к проекту организованно и систематично. Это поможет не только ускорить процесс разработки, но и гарантировать, что конечный продукт будет соответствовать всем ожиданиям и требованиям.

Основы CSS: структура и адаптивность

Теперь, когда у нас есть четкий план и мы ��олны решимости начать работу, пора погрузиться в мир CSS — это та магия, которая превращает скучные текстовые страницы в красочные, динамичные и удобные сайты. Правильное и��пользование CSS может стать ключом к созданию действительно привлекательного и функционального сайта. Использование современных фреймворков Одно из первых решений, которое нам предстоит принять — это выбор фреймворка. Среди популярных решений стоит выделить Bootstrap и Foundation. Эти инструменты предлагают готовые решения для быстрой и эффективной верстки. Используя их, можно значительно сократить время разработки, так как многие элементы, такие как кнопки, формы и модальные окна, уже предварительно стилизованы. Например, Bootstrap в России можно использовать бесплатно, а если вам нужна более специфичная функциональность, которой нет в стандартной пакете, возможно, придется приобрести платные плагины. Создание адаптивного дизайна с помощью медиа-запросов Далее, мы не можем игнорировать мобильных пользователей. С помощью медиа-запросов в CSS мы можем создать адаптивный дизайн, который будет корректно отображаться на любом устройстве. Это означает, что вне зависимости от того, пользуется ли человек смартфоном, планшетом или десктопом, ваш сайт будет выглядеть аккуратно и читаемо. Медиа-запросы позволяют нам задать различные стили для разных размеров экранов, что делает верстку гибкой и универсальной.

Эффективное использование CSS-свойств Не забываем о таких важных вещах, как гибкие контейнеры (flexbox) и сетки (CSS Grid). Эти инструменты делают расположение элементов на странице интуитивно понятным и легко настраиваемым. Flexbox идеально подходит для создания сложных одномерных компоновок, в то время как CSS Grid является мощным инструментом для создания двумерных компоновок. Оба этих инструмента помогают строить современные интерфейсы без использования сторонних библиотек, что делает ваш сайт легче и быстрее. Применяя эти подходы в верстке, мы не только облегчаем себе жизнь, но и повышаем общее качество веб-продукта. Кроме того, чистый и организованный CSS-код облегчает поддержку сайта в будущем и делает его более приятным для других разработчиков, которые могут работать с вашим кодом. Не стоит забывать и о производительности: чем проще и чище ваш CSS, тем быстрее будут загружаться страницы, что особенно важно для пользователей с ограниченной скоростью интернета.

Как JavaScript может сделать ваш сайт живым: оптимизация и интерактивность

Теперь, когда мы знаем, как сделать сайт красивым и адаптивным с помощью CSS, пришло время добавить немного магии с помощью JavaScript. Этот язык программирования — настоящий двигатель интерактивности на ваших страницах. Он может оживить сайт, сделать его не только информационным, но и интерактивным, что значительно улучшает пользовательский опыт.

Повышение интерактивности без ущерба для производительности JavaScript позволяет добавить на сайт множество функций: от простых анимаций и форм обратной связи до сложных игр и интерактивных приложений. Но здесь важно найти баланс между интерактивностью и производительностью. Не забывайте, что каждый дополнительный скрипт увеличивает время загрузки страницы, что может отпугнуть пользователей, особенно тех, кто использует мобильный интернет. Чтобы этого избежать, стоит использовать асинхронную загрузку скриптов с помощью атрибута async или defer. Это позволяет браузеру загружать и выполнить JavaScript параллельно с загрузкой остального содержимого страницы, что значительно ускоряет первичное отображение контента. Асинхронная загрузка скриптов для ускорения работы страниц Используя асинхронную загрузку, мы также можем разбить большие JavaScript файлы на меньшие части, загружаемые по мере необходимости. Это называется ленивой загрузкой (lazy loading) и особенно эффективно, когда речь идет о мультимедийном контенте или больших библиотеках, которые не нужны пользователю сразу. Не забывайте про минификацию JavaScript кода. Этот процесс удаляет все лишнее из кода — пробелы, переносы строк, комментарии — что делает файлы скриптов компактнее. Например, минификация может уменьшить размер файла на 20-40%, что существенно ускоряет его загрузку. Внедряя эти методики, мы не только делаем сайт интерактивным и живым, но и заботимся о том, чтобы этот интерактив не стал камнем преткновения для тех, кто хочет быстро получить информацию. JavaScript — мощный инструмент в руках веб-разработчика, и правильное его использование может стать решающим фактором успеха вашего сайта на пути к сердцам пользователей.

Мастерство создания форм и элементов управления: ключи к удобству и функциональности

После того как мы обеспечили красоту и интерактивность сайта, наступает время заняться одним из самых важных аспектов любого веб-проекта — формами и элементами управления. Эти компоненты не только собирают информацию от пользователей, но и служат важными точками взаимодействия внутри любого сайта. Техники создания доступных и удобных форм Создание форм — это искусство, в котором важно учесть множество нюансов. Прежде всего, формы должны быть интуитивно понятными. Каждое поле должно иметь четкую метку, а сама форма — логичную структуру. Используйте подсказки (placeholders), которые помогут пользователю понять, какие данные нужно ввести. Например, в форме заказа билетов можно указать, что в поле для телефона нужно ввести номер в международном формате. Доступность — это еще один критический аспект. Убедитесь, что форма доступна для пользователей с ограниченными возможностями: добавьте атрибуты ARIA для слабовидящих пользователей и убедитесь, что форму можно заполнить, используя только клавиатуру. Интеграция с внешними API для расширения функциональности

Современные веб-формы часто требуют интеграции с внешними сервисами и API для расширения их функциональности. Например, интеграция с платежными системами для обработки транзакций или с CRM-системами для управления клиентской базой данных. При правильной интеграции форма становится мощным инструментом для бизнеса, позволяя автоматизировать множество процессов. Проектируя формы, также важно подумать о безопасности. Убедитесь, что данные, передаваемые через форму, шифруются, и используйте современные методы защиты от взлома, такие как защита от CSRF (Cross-Site Request Forgery) и SQL-инъекций. Заключительным штрихом в создании форм должно стать тестирование. Проведите тестирование с реальными пользователями, чтобы увидеть, как они взаимодействуют с формой, и устранить возможные проблемы до того, как форма окажется в "боевых" условиях. Это поможет гарантировать, что форма не только красива и функциональна, но и удобна в использовании. Таким образом, умение создавать хорошие формы и элементы управления — это ключевой навык для любого веб-разработчика, стремящегося к созданию качественных и эффективных веб-сайтов.

Тестирование верстки: гарантия качества вашего сайта

После того как дизайн и функционал вашего сайта воплощены в код, наступает один из самых критических этапов разработки — тестирование. Тщательное тестирование верстки не только помогает обнаружить и устранить ошибки, но и гарантирует, что сайт будет корректно работать на всех устройствах и браузерах, обеспечивая таким образом отличный пользовательский опыт. Инструменты и методы для проверки кроссбраузерности Тестирование кроссбраузерности необходимо для проверки, как ваш сайт отображается и функционирует в разных браузерах. Используйте инструменты как BrowserStack или CrossBrowserTesting, чтобы эмулировать работу сайта в различных браузерных условиях. Эти сервисы позволяют вам запускать ваш сайт на множестве браузеров и устройств, не требуя при этом физического наличия каждого из них. В России такие тесты могут стоить от 2000 рублей в месяц за базовый пакет услуг, что является вполне оправданным вложением в качество проекта. Тестирование на различных устройствах для обеспечения удобства использования Важно также провести тестирование верстки на различных устройствах — от настольных компьютеров до смартфонов и планшетов. Это не только покажет, насколько хорошо адаптируется ваш сайт под разные размеры экранов, но и как он функционирует с различными операционными системами. Не забывайте проверять также скорость загрузки сайта, ведь это критический фактор для пользователей с мобильных устройств. Процесс тестирования и устранения найденных проблем По мере обнаружения ошибок важно систематизировать их исправление. Работайте по приоритетам — от самых критичных багов, влияющих на функциональность, до мелких визуальных недочетов. Используйте системы управления задачами типа Jira или Trello для организации рабочего процесса и документации по каждой ошибке.

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

Оптимизация и рефакторинг: ключи к эффективной верстке

После тестирования и устранения основных проблем приходит время для оптимизации и рефакторинга вашего кода. Этот этап не только повышает производительность сайта, но и обеспечивает его масштабируемость и удобство дальнейшей поддержки. Минификация CSS и JavaScript Одним из основных шагов в оптимизации веб-сайта является минификация CSS и JavaScript файлов. Этот процесс удаляет все ненужные символы из вашего кода, такие как пробелы, переводы строк и комментарии, не влияя на его функциональность. Минифицированный код загружается и выполняется быстрее, что существенно улучшает время загрузки страницы. Воспользоваться этим можно через различные онлайн-инструменты или плагины для вашей среды разработки, что позволяет автоматизировать этот процесс и поддерживать производительность на высоком уровне.

Использование CSS-спрайтов и оптимизация изображений Оптимизация изображений также играет важную роль в производительности сайта. Сжатие изображений и использование CSS-спрайтов может значительно уменьшить количество HTTP-запросов к серверу, ускоряя загрузку страниц. CSS-спрайты объединяют множество мелких изображений в одно большое, что уменьшает время загрузки, так как браузеру нужно сделать только один запрос для получения всех изображений, а не множество запросов для каждого изображения отдельно. Read the full article

[easylingoesdotcom]

《布局》新闻调查报道，俄罗斯实际上进口了足够数量的任何受制裁商品，在确保军事生产方面没有出现重大问题。该出版物作者指出，仅在过去六个月中，俄罗斯就从西方公司进口了总计超过 5 亿美元用于制造导弹和其他武器违禁芯片。Санкции против

https://www.unian.net/world/sankcii-protiv-rossii-ne-deystvuyut-zhurnalisty-raskryli-shemu-obhoda-zapretov-12346326.html Россия в достаточном для себя количестве импортирует практически любые санкционные товары, не имея существенных проблем с обеспечением военного производства. Об этом говорится в журналистском расследовании издания “Верстка”. Авторы публикации отмечают, что только за последние…

[kira5259]

20 советов начинающим верстальщикам

1.   Пиши имя класса на английском

2.   Выносите стили в файл CSS

3.   Используйте строчные элементы внутри блочных

4.   Добавляйnе атрибут alt для <img>

5.   Тестируйте свою верстку

6.   Используйте формат rgba для создания лёгкой прозрачности фона.

7.   Проверяйте как ведет себя блок, если уменьшить высоту браузера

8.   Не центрируйте текст за счет свойства padding

9.   Увеличивайте блок свойством padding и создавайте отступы при помощи margin

10. Сохраняйте пропорции изображения при помощи object-fit:cover

11.  Ограничь использование строгих единиц измерения.

12.  Используй свойство cursor:pointer

13. Добавляйте href для <a>

14. Сбрасывайте дефолтные стили

15. Проверяйте как ведет себя курсор

16. Не используйте кириллицу в псевдоэлементах afer и before

17. Добавляйте background-size для изображений

18. Заверните логический блок в <div>, чтобы управлять им.

19. Проверяй в валидаторе свой HTML и CSS (validator.w3.org; jigsaw.w3.org/css-validator)

20. Не путай <a> и <button>

[itsoftware]

HTML – история создания

Британский ученый Тим Бернес-Лио создал способ для опубликования файлов в Интернете и является его родителем. Язык предназначен для такого функционала называется HTML (HyperText Markup Language). Вебмастеры создают интернет-ресурсы на языке HTML. До 1995 количество версий языка можно было на пальцах посчитать. Тогда как такового стандарты не было. Язык HTML привели к стандартному виду чуть позже (22 сентября 1995). Первый стандартный язык HTML назывался -- HTML 2.0. И в течении четырех следующих лет появлялись новые версии языка. В 1997 г это были версии 3.3, 4.0, а в 1999 -- 4.01. Чуть позже, в 2000-е года, родился язык XHTML. Он был таким же, как и язык о котором идет речь, но функциональное взаимодействие намного строже. И был нужен для подготовки вебмастеров к более точной разметке языка XML. Потому что разные сервисы и программы, написанные под XML, также хорошо могут обработать информацию на вебсайтах, которые создали на XHTML. Позже у разработчиков сайтов появились ресурсы, чтобы внедрять в этот язык функции, такие как CML, SVG, MathML и другие. Было три варианта этого языка. Переходной, строгий и frameset вариант. В первом случае возможность была применять теги, которые устарели. Font или Center -- к примеру. В наше время разрабатывать язык XHTML прекратили. Сейчас все пользуются вариантом языка HTML5. Современная версия намного удобнее и имеет ряд, плюсов. Огромное внимание отведено смысловому значению единиц языка. Уже с появлением HTML4 внести изменения (цвет, шрифт, картинки и др), можно используя язык CSS. Вот почему эти два языка нужно учить параллельно. Как упоминалось ученый из Британии Тимом Бернесом-Ли создатель этого орудия, для общения с Сетью(1991 г). Во время работы в ЦЕРНе, когда вебсайтов просто не было, но уже появилась необходимость в них. Как? А просто-напросто, сотрудникам, корпевшим в CERN, нужно было безопасно и быстро обмениваться рабочими материалами. Для этого выбрали язык SGML. Но трудность этого языка привела к тому, что Бернес-Ли создал на его основе более простой вариант – HTML. Он взял простой текст, вставил рамку, состоящую из ссылок, тег, заголовков, абзацев. После он поместил эту информацию в интернете, и другие ученые смогли тогда прочитать материал. Этот язык изначально создавался для оптимизации рабочих процессов. Чтобы пользоваться функционалом могли все, т.е. и те у кто не является программистом. В языке HTML применяли дескрипторы для облегчения в работе с SGML. Дескрипторы это привычные для нас теги. Структуру упростили, появилась возможность добавлять мультимедийные файлы и гипертекст. Разметка HTML представлена двумя видами .htm и .html, они обрабатываются специальными браузерами, отображают материалы уже в том виде, который привычен для обычного пользователя.

[medvedevschool]

Вот так можно упростить работу палачу 🙊 Ещё пунктирчика не хватает. Или: Когда палач бывший верстальщик и без четкого ТЗ ничего делать не будет! Теперь я знаю 100% метод Как Стать Программистом – сделать на лбу татуировку «Эксперт по С++». Попробуй после этого им не стать! Дальнейшая жизнь заставит 🥵 #черныйюмор #html #css #js #верстка #tattoo #blackhumor (at Tattoomoscow - Салон татуировки) https://www.instagram.com/p/CDcFZcNBu6e/?igshid=1wgvj51hhldmf

[andersdeath]

Меня иногда спрашивают с чего нужно начать чтобы стать программистом. Я специалист в направлении веба и поэтому могу советовать только а этом аспекте. Мне дико помогает в повторении теории сайт freecodecamp.org. Это бесплатная платформа, где вы можете пройти действительно толковые курсы по основам веб программирования. В частности там можно изучить основной стек для верстальщика html+css+js. Ну и даже углубиться в создание spa приложений на React. Единственным барьером является то, что сайт на английском языке, но, как показывает практика, придется его постигать для более быстрого профессионального роста. На русском языке все самое интересное очень быстро заканчивается. . . . #freecodecamp #программирование #программист #обучение #верстка #знание #html #css #javascript #react #алгоритмы #вебразработка #веб (at Saint Petersburg, Russia) https://www.instagram.com/p/CCeULPNnJ3v/?igshid=1s7uoeq53oz5

[talleyran]

Про новый сайт

Была у меня мысль, что поддержка не ответит никогда, поэтому я достал из старых проектов свой самописный MVC PHP фреймворк и написал на нем себе новый сайт.

Что уже реализовано

роутинг с человекопонятными url

безопасное обращение к бд

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

управление статическими страницами и меню

мощный редактор markdown/html с подсветкой синтаксиса, сворачиванием блоков, emmet-ом, поиском-заменой, проверкой на закрывание тегов и бьютифаером

прикрепление картинок перетаскиванием

автоматическая сборка адаптивных фотосетов и лайтбоксов

двухфакторная авторизация на основе одноразовых паролей с привязкой ко времени и HMAC

максимально короткий код, никаких лишних библиотек, никакого node-modules

компоненты админки на Vue.js, отдельной админ-панели нет, всё раскидано по сайту и вписано прямо в дизайн: авторизованный я вижу кнопки редактирования, а обычные читатели только чистую верстку

дизайн на сетке bootstrap потому что я его люблю, знаю наизусть и мне лень придумывать что-то другое, плюс я могу в редакторе страниц использовать все его классы и делать всё, что угодно не залезая в CSS. Плюс автоматическая адаптивность под мобильные устройства конечно же.

Что ещё осталось сделать

Переключить тамблер на поддомен blog.talleyran.ru, DNS обновляются ооооочень долго (тут должна быть картинка со ждуном, который не дождался и уснул)

Переписать темы этого блога и photo.talleyran.ru на bootstrap, чтобы везде верстка была одинаковая, потому что сейчас выглядит упорото, как кинопоиск из разных кусков и меню не совпадает, и выпилить весь ненужный теперь кривой javascript.

Доделать некоторые статические страницы

Прикрутить на место тёмную тему

Разобраться с SEO, у тумбы она была чуть более, чем никакая

Что бы я ещё сделал, если бы меня так и не разблокировали, но теперь уже лень

автоматический постинг постов в канал телеграм через бота

передача реакций и комментариев обратно из телеграма для отображения в веб

какой-то способ отображать комментарии, либо с авторизацией через соцсети, либо виджетом (дискус, вк и т.д.)

[alisablack]

Отчёт о второй неделе марафона "Заверстаю" на htmlacademy.ru

Вторая неделя марафона включала в себя доработку начатой ранее html-разметки, изучение механизмов CSS и стилизацию проекта. Верстка не вызывает серьезных затруднений, однако существует ряд нюансов, нуждающихся в дополнительном изучении. Тренажеры по-прежнему идут легко и интересно. Первый лайв, прошедший 20.08, был просто отличным, второй, к сожалению, значительно уступает ему в информативности и качестве изложения материала. За прошедшее с начала марафона время я успела сделать html-разметку главной страницы интернет-магазина цветов и в данный момент занимаюсь её стилизацией.

[woronokin]

🖥️ Редизайн и доработка персонального сайта nikonorow.ru — это второй пост, посвящённый моему личному сайту, где я делюсь с вами результатами своих трудов и своего творчества. Сайт работает на CMS WordPress. Посмотреть как выглядел сайт ранее вы сможете — на сайте nikonorow.ru в соответствующей статье. Если 2 года назад я создавал сайт на базе визуального редактора Elementor, то сейчас я сначала создал верстку сайта (html, css), затем адаптировал верстку под CMS WordPress (создал шаблон для WP на языке PHP). ❓ Зачем это было нужно и какие преимущества я получил? 🟣 Обновил дизайн каждого компонента сайта, при этом сохранил его стиль — теперь все стало еще лучше, чем было ранее 🟣 Наконец-то перевел сайт с визуального редактора на нормальный код. Elementor хоть и позволяет создавать сайты любой сложности, но код, который он генерирует — оставляет желать лучшего. 🟣 Теперь данная проблема решена и благодаря этому я могу без проблем редактировать любой элемент сайта — получил больше творческой свободы. 🟣 Увеличилась скорость загрузки сайта, что является важным показателем при индексации сайта поисковыми системами (Яндекс, Google и др.) 🟣 Дополнил свои знания в front-end разработке, вспомнил забытое и структурировал всю информацию. Отточил навык создания шаблонов для WordPress и улучшил свои познания в языке PHP. 🟣 Удалил с сайта лишнее, навел порядок не только в коде, но и в UI. 🟣 Провел время с пользой и удовольствием 🙂 🗓️ Дата глобального обновления: 28 октября 2022 Рубрика: Веб разработка, Графический дизайн и веб-дизайн #wordpress #верстка #сайты #frontend #дизайн #webdesign https://www.instagram.com/p/CkQ6vC1o2Iw/?igshid=NGJjMDIxMWI=

[wakeapp-uz]

Освоите последнюю версию WordPress, научитесь разрабатывать свои темы и сможете брать более дорогие и интересные заказы. Курс для тех, кто уже знает HTML и CSS и может выполнять простые проекты. Для того, чтобы такие разработчики смогли освоить новый инструмент, выйти на интересные заказы и зарабатывать больше денег.   Программа курса из трёх модулей: Модуль подготовительный В этом модуле разбираемся с основами, которые нам нужны для курса: верстка, локальный сервер и базовые знания PHP. Без этого багажа дальше двигаться будет сложно. Модуль первый. Создание темы WordPress Начнем разбираться с движком Wordpress: установим его на локальном сервере, настроим и создадим необходимые файлы для нашей темы. Начнем верстку из дизайн макета Figma. Модуль второй. Докрутка темы Расширим функционал темы и подготовим её к публикации на хостинге. Настроим и оптимизируем тему под поисковые системы в Яндекс и Гугл. https://bit.ly/3eRWBDs