Разработка переднего плана также известна как разработка пользовательского интерфейса (UI) или разработка на стороне клиента. Можно сосредоточиться на элементах видимости для конечного пользователя и их мышлении. Как сделать приложение более простым и надежным для конечного пользователя. внешний вид. Основы пользовательского интерфейса начинаются с HTML, CSS и JavaScript.
Не используйте ярлык — поверьте, это вам не поможет.
Какие языки вам стоит выучить?
- HTML (язык гипертекстовой разметки): используется для создания основного скелета веб-страницы. На данный момент это единственный способ создавать веб-страницы. Даже если вы используете какой-либо фреймворк, в конечном итоге он все преобразует в HTML
- CSS (каскадные таблицы стилей): используется для оформления веб-страницы и придания веб-странице эстетического вида. Опять же, существует множество библиотек, но в конечном итоге все будет преобразовано в CSS.
- JavaScript. Определяет динамические функции вашего веб-приложения. Например: сделать что-то после нажатия кнопки, перейти на следующую страницу после отправки формы и т. д.
Что лучше всего подходит для разработки любого внешнего приложения:
Редактор/IDE: код Visual Studio и его расширение
Браузер: Chrome и его инструменты разработчика (хранилище, сеть, производительность, рабочие пространства и многое другое)https://developers.google.com/web/tools/chrome-devtools
Инструмент тестирования API: Postman, Insomnia
Начнем наше путешествие:
Месяц 1:
День 1 — День 7. Начните изучать и создавать статические HTML-страницы 5 с каждым тегом и атрибутами. Узнайте о высоких стандартах качества на основе W3C и валидаторов. Также включает HTML-формы, графику, мультимедиа, API.
День 8 — День 14. Добавьте тему и цвета с помощью CSS. Все шрифты, цвета, выравнивание и позиционирование. Потратьте некоторое время, чтобы понять блочную модель.
У нас есть несколько макетов в CSS, таких как flex и grid. Также вы можете изучить адаптивный веб-дизайн (RWD), прежде чем приступить к работе с другими CSS-фреймворками. Практикуя RWD, вы будете чувствовать себя комфортно при разработке и сделаете свой шаблон или макет более отзывчивым или совместимым с другими устройствами, такими как мобильные устройства, планшеты, настольные компьютеры и большие экраны.
День 15 — День 21. Теперь пришло время реализовать некоторую библиотеку в CSS. Лучшей структурой CSS является Bootstrap.
Что такое CSS-фреймворк и зачем он нам нужен?
Среда css — это библиотека, позволяющая упростить веб-дизайн в соответствии со стандартами с помощью языка каскадных таблиц стилей. Большинство этих фреймворков содержат как минимум сетку.
Framework создается ведущими разработчиками, чтобы другие разработчики могли легко разрабатывать свои приложения.
Использование фреймворков:
Чтобы быстрее создавать веб-сайт/веб-приложение
Для проверки гипотезы дизайна
Какие CSS-фреймворки самые лучшие?
1) Bootstrap (предпочтительнее) — наиболее широко используемый бесплатный CSS-фреймворк с открытым исходным кодом
2) Фонд
3) Материализоваться
4) Чистый
5) CSS для попутного ветра
Внешние платформы обычно состоят из пакета, состоящего из файлов и папок со стандартизированным кодом (документы HTML, CSS, JS и т. д.)
Обычные компоненты:
- Исходный код CSS для создания сетки: это позволяет разработчику размещать различные элементы, составляющие дизайн сайта, простым и универсальным способом.
- Определения стиля оформления для элементов HTML.
- Решения для случаев несовместимости браузеров, чтобы сайт правильно отображался во всех браузерах.
- Создание стандартных классов CSS, которые можно использовать для стилизации расширенных компонентов пользовательского интерфейса.
Рейтинг CSS Framework 2020
Разработчик может выбирать из перечисленных ниже фреймворков в зависимости от требований своего приложения.
Сравнительная таблица CSS Framework 2020🎮💻
День 22 — День 30. Теперь пришло время реализовать некоторую библиотеку в CSS. Лучший CSS-фреймворк — Bootstrap. Начните внедрять его, и вы обретете уверенность в себе.
Примечание. Также вы можете изучить препроцессор CSS, такой как LESS, SASS, STYLUS… и т. д., для более быстрого рендеринга стилей.
Примечание. Месяца достаточно, чтобы понять, изучить и попрактиковаться в HTML и CSS. Я не прошу вас выполнить 100 %, но охвата 70–80 % достаточно для остальной части пути.
Месяц 2:
День 1 — День 7: я полагаю, что вы завершили предыдущие дни изучения и практики HTML 5 и CSS. Теперь пришло время добавить динамики с помощью JavaScript.
Я люблю JavaScript(короткое название: JS)!!!😀
JavaScript — это язык сценариев или программирования для Интернета.
JavaScript может обновлять и изменять как HTML, так и CSS.
JavaScript может вычислять, манипулировать и проверять данные.
Он определяет функции веб-страницы или приложения.
JavaScript позволяет реализовывать сложные функции на веб-страницах — каждый раз, когда веб-страница делает больше, чем просто сидит и отображает статическую информацию для просмотра — отображение своевременных обновлений содержимого, интерактивные карты, анимированная 2D- и 3D-графика, прокрутка видео-музыкальные автоматы и т. д. — можете поспорить, что JavaScript, вероятно, задействован. Это третий слой слоеного пирога стандартных веб-технологий, два из которых (HTML и CSS) мы рассмотрели более подробно в других частях Области обучения.
