Полезное руководство по интерфейсной веб-разработке.
Привет, ребята! В этой статье будут рассмотрены в основном то, что вам нужно знать, чтобы стать современным фронтенд-разработчиком, и то, что вы должны учитывать при написании своего проекта, чтобы вы могли хорошо его реализовать. Я могу просто сказать, что эта статья — дорожная карта того, как стать фронтенд-разработчиком. внимательно следи за мной.
Введение
В основном веб-разработка состоит из фронтенда и бэкенда. В этой статье мы рассмотрим аспекты интерфейса, которые включают использование языка разметки, каскадных таблиц стилей и Js, что означает JavaScript для разработки на стороне клиента. Клиентская сторона означает часть сети, которая видна пользователю. Он включает в себя графику, тексты, анимацию, кнопки и т. д. Короче говоря, внешний интерфейс — это часть сети, с которой взаимодействует пользователь.
Front-end разработчик — это тот, кто отвечает за разработку визуального интерфейса веб-сайта или веб-приложения. И это делается с помощью трех языков, упомянутых ранее, т. е. html, css и JavaScript.
Существует множество веб-технологий, которые вам необходимо знать и понимать, чтобы преуспеть в качестве разработчика интерфейса, поскольку разработка на стороне клиента выходит за рамки html, css и Js. strong> Я считаю, что эта статья поможет вам начать разработку на стороне клиента, также известную как разработка переднего плана.
Что такое веб-разработка?
Веб-разработка — это создание прикладных программ, которые находятся на удаленных серверах и доставляются на устройство пользователя через Интернет. Веб-приложение не нужно загружать, вместо этого доступ к нему осуществляется через Интернет. Конечный пользователь может получить доступ к веб-сайту или веб-приложению через веб-браузер, такой как Chrome, Firefox, Mozilla и т. д.
IDE (интегрированная среда разработки)
Текстовый редактор — это приложение или программное обеспечение, которое предоставляет программисту всесторонние возможности для разработки программного обеспечения. Здесь вы будете писать свой код, отлаживать, запускать и тестировать. Наличие подходящего текстового редактора/IDE может сэкономить ваше время, энергию и улучшить результат. Текстовый редактор повышает эффективность, т. е. более быстрое кодирование с меньшими усилиями, и поощряет управление проектами, т. е. ресурсы программы легко управляются. Хотя это может быть сложно для начинающих программистов и не может автоматически исправлять ошибки, то есть вам все равно нужны знания для эффективного кодирования. Ниже приведены некоторые из многочисленных текстовых редакторов.
- Atom — Atom — редактор кода с открытым исходным кодом для Windows, Linux и MacOs. Он разработан GitHub. Он поддерживает плагины.
- Sublime text — возвышенный текст очень прост в использовании, быстр и гибок, доступен на macOS, Windows и Linux.
- Visual studio code — Visual Studio Code поставляется с отличным расширением, которое делает работу проще и быстрее. Могу сказать, что это лучшая IDE для front-end разработки. Он работает во всех операционных системах, таких как macOS, Windows и Linux.
- Другие: betbeans, eclipse, aptana и т. д.
Некоторые термины в Интернете
Прежде чем приступить к изучению каких-либо технологий, важно понять, как работает Интернет. Вы должны узнать о таких вещах, как:
Веб-сайты: это набор веб-страниц, объединенных одной и той же темой и связанных между собой одними и теми же гиперссылками.
Веб-страницы: это большое количество компьютерных документов, например текст, видео, анимация, аудио и т. д., которые размещены по ссылкам вместе для создания веб-сайта.
Веб-адрес: также называемый URL (унифицированный указатель ресурсов) — это адрес, описывающий, где в Интернете можно найти веб-страницы, например www.fauna.com.
Веб-браузер: используется для изучения содержимого всемирной паутины. Когда пользователь запрашивает веб-страницу с определенного веб-сайта, веб-браузер извлекает необходимый контент с веб-сервера, а затем отображает страницу на устройстве пользователя.
Зная все это, есть также некоторые основы Интернета, которые вы должны изучить и знать, а именно:
Изучайте HTML
HTML (язык гипертекстовой разметки) Это язык разметки для документов, предназначенных для отображения в веб-браузере. Этому могут помочь такие технологии, как css и JavaScript. Его легко освоить, а со знанием html можно создавать простые веб-страницы. Html состоит из множества тегов, но я упомяну лишь некоторые из них. Например, html-таблица ‹table›‹th›, ‹tr› и ‹td›, html-элементы, такие как ‹strong› для жирного текста, ‹u› для подчеркивания текста, html форма для создания формы ‹form›content ‹/form›. Другие Html-теги — такие теги, как ‹p›, ‹h1-h6›, тег привязки ‹a›, ‹select›, тег списка ‹ol›, ‹ul› и т. д. .узнать больше об html здесь
Изучайте CSS
Наш HTML-код похож на скелет без какого-либо дизайна и может не реагировать, или пользователь может не найти наш сайт привлекательным. CSS означает каскадные таблицы стилей. Это то, что вам нужно изучить после HTML. Он используется для стилизации нашего HTML. Например, его можно использовать для создания анимации, плавающего элемента, создания сложных форм, размещения элементов, облака, шрифтов и т. д. Основы CSS, которые вам необходимо изучить: CSS Flexbox CSS box model, CSS позиционирование и CSS сетка
У нас есть три типа CSS:
Встроенный CSS: это уникальный стиль и формат отдельного элемента. Они просто добавляются к элементу, который нужно стилизовать. Это не относится ко всему содержимому документа, кроме прикрепленного к нему элемента.
E.g <h1 style=“color:blue”>this is an heading</h1>.
Внутренний CSS: определяется в элементе стиля внутри раздела заголовка html-документа. Он используется отдельно, когда документ имеет уникальный стиль. Любой стиль, описанный с помощью внутреннего css, влияет только на этот документ.
<head>
<style>
Body {
Background-color: gray;
}
.page {
Color: blue;
Font- size: 30px;
}
</style>
<body>
<p class=“page”>getting started with FAUNA</p>
Внешний css: это код css, который может быть записан в отдельном файле вне html документа с помощью IDE и может быть импортирован в любой html файл. Внешний css всегда сохраняется с расширением файла .css. Html ссылается на внешнюю таблицу стилей в теге ссылки, а элемент тега ссылки обычно находится в разделе заголовка.
E.g
<head> <link ref=“stylesheet” Type=“text/css” href=“style.css”> </head>
Также следует изучить некоторые препроцессоры css, такие как Sass, что означает Syntactically Awesome Stylesheet. Он позволяет использовать переменные, вложенные правила, микширование, функции и многое другое с полностью совместимым с CSS синтаксисом. Согласно документации, Sass — это язык таблиц стилей, компилируемый в CSS. Sass помогает поддерживать порядок в больших таблицах стилей и упрощает совместное использование дизайна внутри и между проектами. также Less what Less означает Leaner Style Sheets — это обратно совместимое языковое расширение для CSS.
CSS-фреймворки, которые вы должны знать:
- Tailwind CSS — Tailwind CSS — это ориентированная на утилиты CSS-инфраструктура для быстрого создания пользовательских интерфейсов. Tailwind позволяет нам использовать встроенные стили и добиваться невероятных результатов без использования единой строки CSS.
- Bootstrap — Bootstrap — это бесплатная среда разработки интерфейса с открытым исходным кодом для создания веб-сайтов и веб-приложений. Фреймворк bootstrap построен на html, css и Js, чтобы упростить разработку адаптивных мобильных сайтов и приложений.
- Другие являются фондом, Bulma и т. д.
узнать больше оcss здесь
Изучайте JavaScript
JavaScript — это язык сценариев, используемый для создания динамического контента в Интернете. Это один из самых популярных языков в мире. Как интерфейсный разработчик, вам необходимо знать JavaScript, хотя его также можно использовать на стороне сервера. Js делает ваш сайт живым. JavaScript добавляет интерактивность к веб-страницам, дает немедленную обратную связь с пользователем и запускает некоторые подпольные процессы на веб-сайте (например, отслеживание того, что сделал пользователь, какую страницу посетил пользователь и т. д.).
Вот некоторые из основ JavaScript, которые вам необходимо изучить: синтаксис JavaScript, манипулирование DOM — подробнее здесь
Фреймворки/библиотеки JavaScript
Изучив основы JavaScript, вы можете выбрать любой фреймворк JavaScript по вашему выбору.
- React — Согласно документации, библиотека JavaScript для создания пользовательских интерфейсов React позволяет создавать повторно используемые компоненты.
- Vue — Vuejs — это доступная, универсальная и производительная среда JavaScript, которая поможет вам создать удобную в обслуживании и тестируемую кодовую базу. Vuejs также удобен для начинающих.
- Angular — Согласно документации, Angular — это среда проектирования приложений и платформа разработки для создания эффективных и сложных одностраничных приложений.
Доступность и производительность
иногда мы закончили создание нашего веб-сайта и думаем, что он единственный в своем роде. Производительность веб-сайта имеет большое значение для оценки вашего веб-сайта. Ниже приведены несколько вещей, которыми должен обладать ваш веб-сайт, прежде чем он станет идеальным:
- легкий и быстро загружается
2. Подходит для всех экранов
3. Выглядит одинаково во всех ваших браузерах
4. Доступность для каждого пользователя, который посещает ваш сайт, т. е. не должно быть ограничений ни для кого. Люди с ограниченными возможностями, медленными сетями, слабовидящими, слабослышащими могут беспрепятственно получить доступ ко всей информации на сайте.
Тестирование ваших приложений
Тестирование веб-сайта — это проверка вашего веб-приложения или веб-сайта на наличие потенциальных ошибок до того, как оно будет запущено и станет доступным для широкой публики. Веб-тестирование проверяет функциональность, удобство использования, безопасность, совместимость, производительность веб-приложения или веб-сайта. Вы можете прочитать больше здесь"
Развертывание веб-сайта
вы можете разместить свой веб-сайт или веб-приложение в Интернете, чтобы люди могли видеть, что вы создали или сделали, и это очень легко сделать с помощью таких инструментов, как Netlify или страницы GitHub. Обладая знаниями, полученными из HTML, CSS и JavaScript, вы можете создавать простые веб-страницы с использованием этих технологий.
Заключение
вы подошли к концу руководства по фронтенд-разработке. Я считаю, что эта статья поможет вам стать фронтенд-разработчиком и создавать собственные веб-сайты или веб-приложения. Вы можете связаться со мной в твиттере. Спасибо за чтение.
