Сайт самоучитель: Статический сайт, его плюсы и минусы

Справочник CSS | PuzzleWeb.ru

Данный справочник предоставляет подробное описание всех CSS свойств с максимально упрощенными примерами, для более легкого понимания работы свойства.

Свойства CSS по группам:

flexbox Анимация Внешний и внутренний отступы Позиционирование Размер

Рамка и контур Списки Таблицы Текст Тени и прозрачность

Трансформация Фон Шрифт Другое

flexbox

Свойство	Описание	CSS
align-content	Задаёт вертикальное выравнивание flex-элементов для flex-контейнеров с многострочным содержимым.	3
align-items	Вертикальное выравнивание flex-элементов внутри flex-контейнера.	3
align-self	Вертикальное выравнивание flex-элемента.	3
flex	Определяет ширину, сжатие и растяжение для flex-элемента.	3
flex-basis	Указывает ширину для flex-элемента.	3
flex-direction	Направление расположения flex-элементов.	3
flex-flow	Направление расположения и возможность переноса для flex-элементов.	3
flex-grow	Определяет коэффициент растяжения flex-элемента.	3
flex-shrink	Определяет коэффициент сжатия flex-элемента.	3
flex-wrap	Определяет возможность переноса flex-элементов.	3
justify-content	Горизонтальное выравнивание flex-элементов.	3
order	Определяет порядок вывода flex-элементов.	3

Анимация

Свойство	Описание	CSS
@keyframes	Позволяет создавать анимацию.	3
animation	Позволяет установить несколько или все значения свойств animation в одном объявлении.	3
animation-delay	Определяет, когда запустится анимация.	3
animation-direction	Указывает будет ли анимация проигрываться в реверсе на альтернативных циклах.	3
animation-duration	Определяет сколько понадобится времени, чтобы закончить 1 цикл анимации.	3
animation-fill-mode	Задаёт стиль для элемента, когда анимация не проигрывается (до её запуска, во время остановки или после её окончания). По умолчанию CSS анимация не влияет на элемент до тех пор, пока анимация не запуститься, во время паузы и после её завершения. Это и позволяет переопределить свойство animation-fill-mode.	3
animation-iteration-count	Определяет сколько раз анимация должна будет проигрываться.	3
animation-name	Определяет имя для @keyframes.	3
animation-play-state	Указывает будет анимация проигрываться или будет в режиме паузы.	3
animation-timing-function	Определяет кривую скорости для анимации.	3
backface-visibility	Определяет, должна ли быть видна задняя сторона элемента или нет.	3

Внешний и внутренний отступы

Свойство	Описание	CSS
margin	Задает внешние отступы для элемента.	1
margin-bottom	Задает нижний внешний отступ для элемента.	1
margin-left	Задает левый внешний отступ для элемента.	1
margin-right	Задает правый внешний отступ для элемента.	1
margin-top	Задает верхний внешний отступ для элемента.	1
padding	Устанавливает внутренние отступы в элементе.	1
padding-bottom	Задает нижний отступ(внутреннее поле) для элемента.	1
padding-left	Задает левый отступ(внутреннее поле) для элемента.	1
padding-right	Задает правый отступ(внутреннее поле) для элемента.	1
padding-top	Задает верхний отступ(внутреннее поле) для элемента.	1

Позиционирование

Свойство	Описание	CSS
bottom	Указывает направление смещения позиционированного элемента от нижнего края.	2
clear	Указывает с какой стороны элемента не допускаются плавающие элементы.	1
clip	Определяет видимую часть абсолютно позиционированных элементов.	2
display	Указывает, как будет отображаться элемент в браузере.	1
float	Определяет будет ли элемент плавающим.	1
left	Указывает направление смещения позиционированного элемента от левого края.	2
position	Определяет метод позиционирования элементов.	2
right	Указывает направление смещения позиционированного элемента от правого края.	2
top	Указывает направление смещения позиционированного элемента от верхнего края.	2
visibility	Определяет, является ли элемент видимым.	2
z-index	Указывает порядок расположения элементов по оси Z.	2

Размер

Свойство	Описание	CSS
height	Устанавливает фиксированную высоту.	1
max-height	Указывает максимальную фиксированную высоту.	2
max-width	Указывает максимальную фиксированную ширину.	2
min-height	Указывает минимальную фиксированную высоту.	2
min-width	Указывает минимальную фиксированную ширину.	2
overflow	Определяет, что предпринять, если содержимое элемента превосходит размер области элемента.	2
overflow-x	Указывает, обрезать или нет левый/правый край содержимого — если оно переполняет доступную область элемента для его содержания.	3
overflow-y	Указывает, обрезать или нет верхний/нижний край содержимого — если оно переполняет доступную область элемента для его содержания.	3
resize	Указывает, может ли размер элемента изменяться пользователем.	3
width	Устанавливает фиксированную ширину.	1

Рамка и контур

Свойство	Описание	CSS
border	Позволяет использовать основные свойства границ в одном объявлении.	1
border-bottom	Позволяет использовать значения основных свойств для нижней границы рамки в одном объявлении.	1
border-bottom-color	Задает цвет для нижней границы рамки.	1
border-bottom-left-radius	Позволяет сделать округлую границу нижнего левого угла.	3
border-bottom-right-radius	Позволяет сделать округлую границу нижнего правого угла.	3
border-bottom-style	Определяет стиль для нижней границы рамки.	1
border-bottom-width	Определяет ширину для нижней границы рамки.	1
border-color	Задает цвет для границ рамки элемента.	1
border-image	Позволяет использовать изображение в качестве рамки.	3
border-left	Позволяет использовать значения основных свойств для левой границы рамки в одном объявлении.	1
border-left-color	Задает цвет для левой границы рамки.	1
border-left-style	Определяет стиль для левой границы рамки.	1
border-left-width	Определяет ширину для левой границы рамки.	1
border-radius	Позволяет изменить форму углов.	3
border-right	Меняет внешний вид правой границы рамки.	1
border-right-color	Задает цвет для правой границы рамки.	1
border-right-style	Определяет стиль для правой границы рамки.	1
border-right-width	Задает ширину для правой границы рамки.	1
border-style	Задает стиль для границ рамки элемента.	1
border-top	Меняет внешний вид верхней границы рамки.	1
border-top-color	Задает цвет для верхней границы рамки.	1
border-top-left-radius	Позволяет сделать округлую границу верхнего левого угла.	3
border-top-right-radius	Позволяет сделать округлую границу верхнего правого угла.	3
border-top-style	Определяет стиль для верхней границы рамки.	1
border-top-width	Определяет ширину для верхней границы рамки.	1
border-width	Задает ширину для границ рамки элемента.	1
outline	Создает внешнюю границу вокруг элемента.	2
outline-color	Определяет цвет внешней границы.	2
outline-offset	Сдвигает внешнюю границу на заданное расстояние от края элемента.	3
outline-style	Указывает стиль для внешней границы.	2
outline-width	Указывает ширину для внешней границы.	2

Списки

Свойство	Описание	CSS
list-style	Управляет маркером в списках.	1
list-style-image	Заменяет маркеры списков на изображения.	1
list-style-position	Определяет расположение маркера относительно пункта списка.	1
list-style-type	Указывает вид маркера в списке.	1

Таблицы

Свойство	Описание	CSS
border-collapse	Определяет будут ли границы рамки объединены в одну.	2
border-spacing	Определяет расстояние между границами смежных ячеек и общей рамкой таблицы.	2
caption-side	Указывает расположение заголовка таблицы.	2
empty-cells	Регулирует видимость пустых ячеек в таблице.	2
table-layout	Задает алгоритм использования макета таблицы.	2

Текст

Свойство	Описание	CSS
color	Изменяет цвет текста.	1
direction	Определяет направление написания текста.	2
letter-spacing	Контролирует расстояние между символами в тексте.	1
line-height	Определяет межстрочный интервал(интерлиньяж).	1
quotes	Определяет тип кавычек для встроенных цитат.	2
text-align	Указывает способ выравнивания содержимого по горизонтали.	1
text-decoration	Добавляет некоторые элементы декорирования к тексту.	1
text-indent	Определяет отступ первой строки в тексте элемента.	1
text-overflow	Указывает, что должно произойти, когда текст переполняет содержащий элемент.	3
text-transform	Контролирует использование строчных и прописных букв в тексте.	1
vertical-align	Определяет вертикальное выравнивание в элементе.	1
white-space	Определяет способ обработки пробелов внутри элемента.	1
word-break	Определяет правила переноса для не-CJK сценариев.	3
word-spacing	Определяет ширину пробелов между словами.	1
word-wrap	Позволяет прерывать длинные слова для переноса на другую строку.	3

Тени и прозрачность

Свойство	Описание	CSS
box-shadow	Добавляет эффект отбрасывания тени к элементу.	3
opacity	Устанавливает уровень прозрачности элемента.	3
text-shadow	Создает тень для текста.	3

Трансформация

Свойство	Описание	CSS
perspective	Определяет, на сколько пикселей удален 3D элемент от точки обзора.	3
perspective-origin	Определяет, где располагается 3D элемент на осях x и y.	3
transform	Применяет 2D или 3D преобразование к элементу.	3
transform-origin	Позволяет изменить позицию преобразованных элементов.	3
transform-style	Определяет, как вложенные элементы будут отображаться в трехмерном пространстве.	3
transition	Управляет эффектом трансформации.	3
transition-delay	Указывает, когда должен начаться эффект трансформации.	3
transition-duration	Указывает продолжительность трансформации.	3
transition-property	Указывает название CSS свойства, для которого будет применен эффект трансформации.	3
transition-timing-function	Задает кривую скорости для эффекта трансформации.	3

Фон

Свойство	Описание	CSS
background	Устанавливает несколько или все значения свойств фона в одном объявлении.	1
background-attachment	Указывает будет ли фоновое изображение фиксированным.	1
background-clip	Определяет область в элементе, для которой задается фон.	3
background-color	Устанавливает цвет фона для элемента.	1
background-image	Устанавливает фоновое изображение в элементе.	1
background-origin	Указывает область позиционирования для фонового изображения.	3
background-position	Устанавливает начальное место для фонового изображения.	1
background-repeat	Задает, как фоновое изображение будет повторяться на экране.	1
background-size	Указывает размер для фонового изображения.	3

Шрифт

Свойство	Описание	CSS
font	Изменяет стандартный вид текста.	1
@font-face	Позволяет использование любого шрифта на странице.	3
font-family	Указывает шрифт или семейство шрифтов для текста.	1
font-size	Указывает размер для шрифта.	1
font-size-adjust	Контролирует размер неосновных шрифтов.	3
font-stretch	Регулирует ширину текста.	3
font-style	Позволяет изменять стиль текста.	1
font-variant	Конвертирует строчные буквы в прописные уменьшенного размера.	1
font-weight	Задает ширину символов текста.	1

Другое

Свойство	Описание	CSS
box-sizing	Позволяет заставить определенные элементы заполнять область определенным способом.	3
column-count	Разделяет элемент на колонки.	3
column-gap	Задает расстояние между колонками элемента.	3
column-rule	Свойство column-rule позволяет указать значения свойств column-rule-* (ширину, стиль и цвет) в одном объявлении.	3
column-rule-color	Определяет цвет границы между колонками.	3
column-rule-style	Определяет стиль границы между колонками.	3
column-rule-width	Указывает ширину границы между колонками.	3
columns	Позволяет использовать значения свойств column-width и column-count в одном объявлении.	3
column-span	Указывает элементу количество колонок для обхвата.	3
column-width	Определяет ширину колонок.	3
content	Определяет содержимое для псевдо-элементов ::before и ::after.	2
counter-increment	Увеличивает значение счетчика.	2
counter-reset	Устанавливает начальное значение счетчика.	2
cursor	Изменяет вид курсора мыши.	2
page-break-after	Определяет наличие или отсутствие разрыва страницы после заданного элемента.	2
page-break-before	Определяет наличие или отсутствие разрыва страницы перед заданным элементом.	2
page-break-inside	Определяет наличие или отсутствие разрыва страницы внутри элемента.	2

JavaScript: Возможности и ограничения

• JavaScript
• Клиентский JavaScript
• Возможности
• Ограничения

JavaScript

JavaScript – это интерпретируемый язык программирования, разработанный для взаимодействия с веб-страницами. JavaScript представляет собой реализацию ECMAScript. ECMAScript – это просто описание языка, который определён в стандарте ECMA-262.

JavaScript состоит из трёх частей:

• Ядро (ECMAScript) – базовая функциональность JavaScript.
• Объектная модель документа (Document Object Model, DOM) – средства для работы с содержимым веб-страниц.
• Объектная модель браузера (Browser Object Model, BOM) – средства для взаимодействия с браузером.

Клиентский JavaScript

В браузерах по умолчанию встроено специальное программное обеспечение, называемое интерпретатором JavaScript, это сделано для того, чтобы браузер мог выполнять написанный на языке JavaScript код. Как правило, JavaScript называют клиентским языком, подчеркивая тем самым, что сценарий исполняется на клиентском компьютере в браузере, а не на веб-сервере.

Возможности

Итак, небольшой список того, что позволяет JavaScript:

• Добавлять различные эффекты анимации
• Реагировать на события — обрабатывать перемещения указателя мыши, нажатие клавиш с клавиатуры
• Осуществлять проверку ввода данных в поля формы до отправки на сервер, что в свою очередь снимает дополнительную нагрузку с сервера
• Создавать и считывать cookie, извлекать данные о компьютере посетителя
• Определять браузер
• Изменять содержимое HTML-элементов, добавлять новые теги, изменять стили

Этим конечно же список не ограничивается, так как помимо перечисленного JavaScript позволяет делать и многое другое.

Ограничения

Существуют так же и некоторые ограничения, распространяемые на данный язык:

• JavaScript не может закрывать окна и вкладки, которые не были открыты с его помощью
• Не может защитить исходный код страницы и запретить копирование текста или изображений со страницы
• Не может осуществлять кроссдоменные запросы, получать доступ к веб-страницам, расположенным на другом домене. Даже когда страницы из разных доменов отображаются в одно и тоже время в разных вкладках браузера, то код JavaScript принадлежащий одному домену не будет иметь доступа к информации о веб-странице из другого домена. Это гарантирует безопасность частной информации, которая может быть известна владельцу домена, страница которого открыта в соседней вкладке
• Не имеет доступа к файлам, расположенным на компьютере пользователя, и доступа за пределы самой веб-страницы, единственным исключением являются файлы cookie, это небольшие текстовые файлы, которые JavaScript может записывать и считывать

В целом, можно сказать, что он разработан таким образом, чтобы затруднить выполнение вредоносного кода.

Введение в веб-разработку (бесплатное руководство)

💬 «Нет ничего лучше, чем ничего не знать, ведь тогда так многому еще предстоит научиться!»

Добро пожаловать в первый день вашего краткого курса веб-разработки, и поздравляем вас с первым шагом на пути к тому, чтобы стать полноценным веб-разработчиком!

Введение

В этом курсе вы узнаете все о том, как стать веб-разработчиком, от обязанностей, которые веб-разработчик выполняет изо дня в день, до набора навыков, которые вам понадобятся для достижения успеха. такая роль. И, конечно же, вы также запачкаете руки кодом: мы познакомим вас с фундаментальными строительными блоками Интернета и убедимся, что вы закончите этот курс, разработав свой самый первый веб-сайт!

Что мы будем делать сегодня?

1. Узнайте, какова роль веб-разработчика, и обсудите различные типы веб-разработчиков
2. Взгляните на навыки, необходимые для того, чтобы стать веб-разработчиком
3. Предварительный просмотр того, что мы будем изучать в течение следующих 5 дней
4. Создайте свою первую веб-страницу с помощью текстового редактора и браузера

Готовы погрузиться в волшебный мир веб-разработки? Пойдем!

1.

Кто такой веб-разработчик?

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

Подобно тому, как любознательный ребенок получает удовольствие от создания игрушек, соединяя блоки LEGO, а затем испытывает такую ​​же радость, разбирая вещи, чтобы посмотреть, как они сделаны, работа веб-разработчика заключается в использовании основных строительных блоков сети. (например, HTML, CSS и JavaScript), чтобы создать что-то сложное, например веб-страницу. Не парься! Мы скоро разберемся во всех этих терминах.

В обязанности веб-разработчика также входит диагностировать проблемы в работе веб-сайта, понимать, как что-то работает, читая исходный код, и вносить изменения для устранения любых проблем. По сути, это делает веб-разработчиков врачами всемирной паутины. Когда мы говорим о всемирной паутине, мы в основном имеем в виду веб-сайты и веб-приложения. В этот момент любопытный начинающий разработчик внутри вас может задаться вопросом: «В чем разница между ними?»

Мы рады, что вы спросили! А 9Веб-сайт 0009 обычно представляет собой простую страницу или группу страниц (например, популярный сайт веб-комиксов xkcd). Однако современные веб-сайты — это гораздо больше. Возьмем, к примеру, Google Документы. У него приятный интерфейс, который после открытия очень похож на настольное программное обеспечение, такое как Microsoft Office. Такие сложные веб-сайты часто называют веб-приложениями . Сегодня ожидается, что веб-разработчик знает, как создавать веб-приложения и работать с ними. Сказав это, большинство людей используют термины взаимозаменяемо, так что не слишком зацикливайтесь на терминологии!

Типы веб-разработчиков

Существуют разные типы веб-разработчиков, занимающихся разными областями. К ним относятся:

• Frontend-разработчиков: Frontend-разработчиков реализуют дизайн веб-страниц с использованием HTML и CSS. Они следят за тем, чтобы сайт выглядел красиво на разных устройствах, а формы и кнопки работали.
• Backend-разработчиков: Backend-разработчиков создают основу веб-приложения. Они пишут логику кода, которая обрабатывает ввод пользователя (например, что должно произойти, когда вы нажмете кнопку регистрации после заполнения формы).
• Разработчики с полным стеком: Разработчики с полным стеком занимаются как бэкендом, так и внешним интерфейсом. В зависимости от решаемой задачи они могут менять плащ 🦸‍♀️🦸‍♂️ и перемещать стопки. Вы можете узнать больше о различиях между frontend и backend разработкой в ​​этом руководстве.

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

2. Какие навыки необходимы, чтобы стать веб-разработчиком?

Что нужно, чтобы стать веб-разработчиком? По сути, всего три вещи: HTML, CSS и JavaScript — три столпа Интернета, о которых мы узнаем в течение следующих нескольких дней. Вместе эти три столпа обеспечивают работу каждого веб-сайта, определяя отображаемый контент (HTML), указывая браузеру, как отображать этот контент (CSS), и делая контент интерактивным (JavaScript) соответственно.

Веб-разработчик хорошо разбирается в этих трех технологиях. Они могут читать чужой код и вносить в него изменения. Они могут находить и устранять ошибки (недостатки в существующем коде). Иногда веб-разработчик может работать над новым проектом (новым веб-сайтом) с нуля или, возможно, ему придется работать над существующим веб-сайтом и улучшать его. Типичный день в жизни веб-разработчика включает в себя исправление ошибок, разработку новых функций (то есть усовершенствований) и веб-страниц, а также работу с другими разработчиками для обсуждения способов решения проблем.

Не обращайте внимания на все эти детали. Вскоре вы увидите, что все они очень взаимосвязаны, и изучение одного из них автоматически сделает вас лучше в нескольких других!

Каковы перспективы работы веб-разработчиков?

Короче говоря, очень хорошо. Прогнозируется, что занятость веб-разработчиков вырастет на 13 процентов с 2018 по 2028 год, что намного быстрее, чем в среднем по всем профессиям. Спрос будет обусловлен растущей популярностью мобильных устройств и электронной коммерции (Бюро статистики труда). Это прекрасное время для веб-разработчика, поскольку стартапы процветают, что приводит к тому, что зарплаты веб-разработчиков выше среднего в большинстве частей мира.

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

3. Что мы будем изучать в течение следующих пяти дней

Ни один курс веб-разработки не обходится без практического проекта. В этом курсе мы будем использовать три столпа Интернета (HTML, CSS и JavaScript) для создания вашего первого проекта — персонализированного веб-сайта-портфолио. Если у вас есть эти инструменты, вам будет намного проще освоить другие инструменты и языки. Уделите особое внимание основам, так как шаткий фундамент впоследствии приведет к путанице. Мы также предоставим вам ресурсы, необходимые для размещения вашего веб-сайта в Интернете, чтобы вы могли поделиться им со своими друзьями и семьей.

Сегодня мы начнем с обзора мира веб-разработки с рыбьего глаза. Мы поговорим об инструментах, которые будем использовать в этом курсе, а также напишем немного HTML.

На второй день мы напишем больше HTML и HTML-элементов и создадим примерный макет веб-сайта нашего проекта.

На третий день мы напишем немного CSS, чтобы сделать наш веб-сайт адаптивным для мобильных устройств, что означает, что наш веб-сайт можно будет просматривать на компьютерах, планшетах и ​​мобильных телефонах.

На четвертый день мы углубимся в продвинутый CSS и добавим классные эффекты на нашу страницу.

В пятый и последний день мы научимся писать основы JavaScript. Мы также рассмотрим проверки форм и другие распространенные элементы программирования на JavaScript.

Чтобы дать вам небольшое представление, примерно так будет выглядеть ваш веб-сайт в конце этого курса. Довольно круто, правда?

Готовы начать? Начнем с настройки среды разработки.

Настройка среды разработки

Для этого курса нам понадобятся два инструмента, которыми пользуется каждый веб-разработчик:

1. Текстовый редактор для написания кода
2. Веб-браузер, чтобы увидеть, что мы создаем

Хотя вы можете использовать любой веб-браузер или текстовый редактор, для этого курса мы рекомендуем использовать Google Chrome и Sublime.

• Google Chrome можно загрузить с https://www.google.com/chrome/
• Sublime Text можно загрузить с https://www. sublimetext.com/3.

Как и любому хорошему мастеру, важно знать и понимать свои инструменты. По этой причине давайте кратко рассмотрим то, что у нас есть на данный момент.

Google Chrome

Google Chrome — это веб-браузер. Вы можете или не можете уже использовать Google Chrome для просмотра веб-страниц. Веб-браузер позволяет нам просматривать веб-страницы (похожие на ту, на которой вы читаете этот текст). Мы будем использовать Google Chrome для просмотра результатов после написания и внесения изменений в наш код.

Sublime Text

Sublime Text — популярный текстовый редактор. Текстовый редактор — это программа с очень удачным названием; это помогает нам редактировать текст. Он похож на текстовый редактор по умолчанию, который предустановлен на Mac или Windows, но имеет дополнительные функции, такие как выделение кода, для улучшения нашего кода и отладки.

⚠️ Осторожно! Sublime Text — это платное программное обеспечение с неограниченным пробным периодом. Время от времени вы будете видеть всплывающее диалоговое окно с предложением заплатить за лицензию на программное обеспечение. Вы можете заплатить за него, если хотите, но вам не нужно платить только за этот курс.

Этот курс не зависит от ОС, что означает, что вы можете пройти его в Windows, Mac OS или Linux.

😎Совет профессионала : Если вы застряли при установке Chrome или Sublime или видите какие-либо сообщения об ошибках, лучше всего выполнить поиск в Интернете (попробуйте поиск в Google или DuckDuckGo) для точного сообщения об ошибке. Вполне вероятно, что у других людей была такая же проблема до нас, и решение уже существует.

После загрузки установите его в соответствии с инструкциями, которые вы найдете на этих сайтах. После завершения установки вы готовы перейти к следующему разделу.

4. Ваша очередь: Создание вашей первой веб-страницы

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

HTML означает H yper T ext M arkup L язык. В двух словах:

• Гипертекст просто означает текст, который может переходить из одной точки в другую. Если вы когда-либо нажимали ссылку на странице (попробуйте это: google.com), вы использовали гипертекст.
• Разметка — это просто способ структурировать содержимое, чтобы мы могли различать разные блоки текста.
• Язык означает, ммм, язык. Компьютерные языки похожи на языки реального мира, такие как английский и немецкий, но очень строги в своем синтаксисе.

HTML позволяет нам структурировать нашу страницу и данные на ней. Когда у нас есть структура и данные для работы, мы можем сосредоточиться на стиле и функциональности.

Ладно, хватит теории. Давайте приступим к делу, открыв Sublime Text.

⚠️ Осторожно! Студенты часто застревают на этом шаге, так что не торопитесь.

Щелкните Файл > Открыть папку (или просто Открыть… , если вы используете MacOS). Обратите внимание, что в MacOS панель инструментов находится вверху экрана (как показано на снимке экрана ниже).

После того, как вы выберете Файл > Открыть / Открыть папку, откроется новое окно, которое позволит вам выбрать существующую папку или создать новую папку. Перейдите на «Рабочий стол» и создайте там папку. Создание папки на рабочем столе облегчает поиск в дальнейшем.

Нажмите на маленькую иконку, позволяющую создать новую папку. В разных операционных системах он может выглядеть по-разному.

В MacOS это будет выглядеть так:

В Linux это будет выглядеть так. Если вы нажмете на нее, вы сможете создать папку, дав ей имя.

Мы назовем эту папку портфолио , потому что это наш проект, но вы можете выбрать другое имя.

⚠️Осторожно! Хотя строго следовать схеме именования, которую мы используем, не требуется, мы рекомендуем вам придерживаться нашего пути в этом курсе. Это облегчит следование курсу позже, когда мы будем работать с несколькими файлами.

Если все пойдет хорошо, вы должны увидеть экран, подобный следующему.

Отсюда щелкните правой кнопкой мыши портфолио на левой боковой панели и выберите Новый файл . Вы должны увидеть новый файл с надписью « без названия» . Это нормально, так как мы еще не назвали его.

Сохраним файл. Щелкните Файл > Сохранить , и вы должны открыть окно с просьбой ввести имя файла. Здесь введите index.html и нажмите «Сохранить».

Мы называем его «index. html» в соответствии с соглашением. По умолчанию точка входа на веб-сайт называется индексной страницей, отсюда и название.

Также убедитесь, что вы сохранили файл в папке портфолио . Вот что вы должны увидеть сейчас.

Теперь пришло время написать первые несколько строк кода! На сегодня мы просто запустим нашу страницу. Завтра мы углубимся в смысл каждой строки, поговорим подробнее о том, что такое HTML, и поместим дополнительную структуру.

🙋  Обратите внимание: Фрагменты кода в видео могут не совпадать с фрагментами кода в тексте руководства. Ничего страшного — в программировании обычно существует более одного правильного способа достижения одного и того же результата. Будьте уверены, вы изучаете одни и те же концепции!

Итак, давайте приступим к кодированию вашей первой веб-страницы. Введите следующий код как в файл index.html :

Уже готово? Хороший. Вот как это должно выглядеть на вашем экране.

Посмотреть изменения кода на GitHub >

Хорошо, отличная работа! Вы только что написали настоящий HTML-код. Пришло время посмотреть, как это выглядит в браузере. Это называется с кодом , и мы будем делать это все время в этом курсе.

Чтобы запустить HTML, откройте веб-браузер Google Chrome, который мы установили ранее. Оказавшись там, нажмите Ctrl+O в Windows и Linux или Cmd+O на Mac, чтобы открыть диалоговое окно проводника.

Перейдите к папке Desktop , а затем к папке Portugal , и вы должны увидеть файл index.html , в который мы только что написали код. Откройте этот файл, и вы должны увидеть что-то вроде следующего:

Если вы видите страницу выше, похлопайте себя по плечу. Вы только что создали свою первую функциональную веб-страницу. Обратите внимание, где появляются тексты « Первая веб-страница » и « Hello World ».

Вернемся к Sublime Text и попробуем изменить Hello World в строке 7 до Hello World, загляните на мой сайт! Сохраните его и обновите страницу в Chrome. Вы должны увидеть обновленную версию текста.

Посмотреть изменения кода на GitHub >

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

Помимо «URL-адресов фиксации Github»

На протяжении всего курса вы время от времени будете встречать ссылку Github (https://github.com), подобную приведенной выше. Github — это веб-сайт, который разработчики (и даже не разработчики) используют для размещения проектов кода и обмена ими с другими. Каждое изменение (например, изменение нашего заголовка) называется «коммит», и ссылка под изображениями приведет вас к соответствующему коммиту.

Эта ссылка перенесет вас точно в точку истории проекта и покажет, что изменилось. Например, приведенная выше ссылка показывает, что строка красного цвета была удалена и добавлена ​​строка зеленого цвета . Это изменение, которое мы внесли.

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

На этом наш первый урок подходит к концу. Хорошая работа!

Резюме

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

Но подождите, это еще не все! Если вы чувствуете мотивацию и хотите добавить больше типов текста на свою веб-страницу до завтра, почему бы не попробовать ежедневную задачу?

🧐Ежедневное задание

Вы заметили, что текст в строке 4 () и строке 7 (

Hello World

) отображается в названии вкладки и выделен жирным шрифтом на страница соответственно?

title и h2 (заголовок 1) — это то, что мы называем элементами HTML. Таких элементов еще много, вроде р (абзац), х3 , х4 .. х6 (заголовок 2, заголовок 3…заголовок 6) и сильный (жирный текст).

В сегодняшнем задании попробуйте добавить следующие теги на свою страницу с собственным контентом

1. h4
2. сильный
3. р

Когда вы закончите, ваша страница должна выглядеть примерно так. Текст внутри тегов (например, «Я исследователь» ) можно настроить по своему усмотрению.

Ваша задача написать так, как показано на картинке (возможно, с вашим настроенным текстом) и объяснить себе, что сделали элементы h4 , strong и p . Если вам удалось заставить все работать, опубликуйте скриншот и отметьте @careerfoundry в Твиттере.

---

🙋Решение

Вы выяснили, что делает каждый тег?

h4 — заголовок, такой же, как h2 , но менее важный (и выглядит меньше). strong делает текст жирным. p — сокращение от абзаца и используется для текстового содержимого.

📗Ссылки

• Заголовки HTML (

  ,

  …

  )

❓ FAQ

В. Я до сих пор не могу понять, как создать новую папку на рабочем столе. Вы можете помочь мне с этим?

A. Если вы не можете создать новую папку с помощью Sublime, вы можете создать ее с помощью файлового менеджера (например, Finder в MacOS). Важно то, что папка создается, и вы можете открыть ее в редакторе Sublime Text.

В. Могу ли я использовать Atom / Nodepad / Wordpad / Google Docs / «X» для написания кода и Firefox / Safari / Opera в качестве браузера?

A. Хотя вы можете использовать инструмент по своему выбору, мы рекомендуем вам придерживаться инструментов, которые мы используем в этом курсе. Как только вы освоитесь, вы сможете выбрать то, что лучше всего подходит для вас.

В. Я не понял код, который мы написали сегодня. Что такое h4 и сильно? Как это работает?

А. Терпение! Завтра мы узнаем больше об HTML, и на эти вопросы будут даны ответы.

В. Я получаю сообщение « Ваш файл не найден » на темном и тусклом экране

О. Скорее всего, вы открыли не тот файл или ввели неверный путь к файлу. Проверьте это еще раз и попробуйте сделать это точно так же, как мы делали в курсе.

В. Почему мы создаем сайт-портфолио, а не онлайн-игру/анимацию/социальную сеть?

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

🦉Отзыв

У вас есть отзывы об этом уроке? Большой! Мы всегда стремимся улучшить его и сделать его лучшим ресурсом. Присылайте сюда свои мысли.

Учебник по веб-дизайну | Учебник по внешнему интерфейсу

Автор: Авинаш Малхотра

Обновлено 13 ноября 2022 г.

• Вопросы интервью UI
• Учебник по HTML →

Учебники по веб-дизайну ⭑ ⭑ ⭑ ⭑ ⭑ Средняя оценка: 5,0 на основе 3389рейтинги

1. Дом
2. org/ListItem»> Веб-дизайн
3. Учебное пособие по веб-дизайну

Учебное пособие по дизайну веб-сайтов для абсолютных новичков, разработчиков пользовательского интерфейса и разработчиков внешнего интерфейса с живыми примерами кода. Узнайте , как создать веб-сайт , начиная с основ, используя HTML, CSS, HTML5, CSS3, JavaScript, Advance JS ES6 to ES13, JQuery, адаптивный веб-дизайн, SASS, Bootstrap и т. д.

Веб-дизайн — первый шаг к обучению фронтенд-разработке и Полная веб-разработка .

Веб-дизайн — это процесс создания и поддержки веб-сайтов. Веб-дизайн включает в себя различные аспекты, такие как кодирование внешнего интерфейса, каркас веб-сайта, дизайн макета, цветовые комбинации, выбор шрифтов, графический дизайн, взаимодействие с веб-страницей, пользовательский интерфейс и UX, анимацию и т. д.

Все веб-сайты на WWW разработаны веб-дизайнерами. Веб-дизайнер создает интерфейсную/клиентскую часть или часть пользовательского интерфейса веб-сайта. Front End включает в себя разметку, таблицу стилей, изображения, анимацию, взаимодействий , функциональные возможности на стороне клиента и адаптивный веб-дизайн.

Согласно опросу Forbes 2016 , Front End Development занимает 7-е место среди самых высокооплачиваемых должностей в ИТ-секторе, а Fullstack — 5-е место среди самых высокооплачиваемых. Опытный разработчик внешнего интерфейса может заработать до 100 000 долларов в месяц, а разработчик полного стека может заработать до 120 000 долларов.

---

Внешний интерфейс против внутреннего интерфейса

Frontend и Backend — это два разных термина. Оба подпадают под Полная веб-разработка . Вот сравнение между Frontend и Backend с объяснением.

Веб-дизайн против разработки

Полная веб-разработка означает разработку как Frontend , так и Backend . Fullstack-разработчики всегда пользуются наибольшим спросом, и они знают как фронтенд, так и бэкэнд. Fullstack веб-разработчики также входят в топ-5 самых высокооплачиваемых ИТ-секторов .

Веб-дизайн является частью разработки интерфейса. Он включает в себя три веб-технологии: HTML, CSS и JavaScript, а также разработку пользовательского интерфейса.

Веб-разработка включает в себя разработку веб-сервера и базу данных. Мы можем выбрать любой веб-сервер и базу данных в соответствии с требованиями.

Самые популярные серверные технологии или языки

1. филиппинов (77,5%) ↑
2. Asp. net (7,5%) ↓
3. Рубин (5,6%) ↓
4. Ява (4,5%) ↑
5. Скала (2,7%) ↓
6. Узел JS (2,2%)
7. Статические файлы (1,8%) ↑
8. Питон (1,3%) ↓
9. ColdFusion (0,3%) ↓
10. Перл/Эрланг (0,1%) ↓

---

Статические и динамические веб-сайты

Веб-сайт может быть статическим или динамическим в зависимости от типа страниц и используемых технологий. Около 98,5% веб-сайтов в мире являются динамическими, а 1,5% — статическими.

Статические сайты

Статический веб-сайт использует страницы . html для всех веб-страниц веб-сайта. Это один из самых простых и базовых способов создания небольших веб-сайтов с фиксированным количеством страниц. Около 1,5% веб-сайтов в мире статичны.

Динамические веб-сайты

Все динамических веб-сайтов включают статические страницы (.html) для интерфейса, но с внутренней технологией для создания веб-страницы на лету. Как и на веб-сайте покупок, используйте одну страницу .html для страницы продукта, но во время выполнения мы не видим ни одного продукта с одинаковым интерфейсом. Это означает, что 100% веб-сайтов используют HTML, CSS и JavaScript для разработки внешнего интерфейса.

Статические и динамические веб-сайты

Особенности	Статическая	Динамическая
Производительность	Быстро	Не так быстро, как статический
Стоимость	меньше	еще
Содержимое	Предварительная сборка с использованием HTML-файлов	динамический, создание содержимого на лету
Осложнения	Простота сборки	немного сложно
Необходимые языки	HTML	html с php/nodejs/java/python/asp. net и т. д.
подключение к базе данных	Нет связи с db	связаться с дб
Техническое обслуживание	сложный	легкий

Рекомендуется сначала изучить веб-дизайн , а затем бэкэнд.

Бэкенд-веб-разработчик может работать только в определенной области. Например, если веб-сайт создан с использованием php, они будут нанимать только php-разработчика.

Но веб-дизайнер может обратиться в любую компанию, так как всем сайтам нужен сначала фронтенд, а потом бэкэнд. Вот почему веб-дизайнеры или разработчики интерфейсов всегда востребованы.

---

Наш учебник по веб-дизайну включает в себя основные веб-технологии, такие как HTML и CSS, используемые для создания макета веб-сайта. После этого мы рассмотрим передовые веб-технологии, такие как JavaScript с ES13, библиотеку JS JQuery и Javascript Framework Angular JS.

Мы также рассмотрим HTML5, CSS3, SASS и Bootstrap для создания новейших, интерактивных и адаптивных веб-сайтов с улучшенной производительностью как на настольных компьютерах, так и на мобильных устройствах. Этот учебник по веб-дизайну предназначен для начинающих, студентов и профессионалов.

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

Пошаговое руководство по веб-дизайну

1. HTML
2. УСБ
3. HTML5
4. CSS3
5. PhotoShop (для PSD в HTML5)
6. JavaScript с ES6
7. JQuery
8. SASS, препроцессор CSS
9. Адаптивный веб-дизайн
10. Платформа начальной загрузки
11. Веб-хостинг
12. SEO-оптимизация сайта
13. Тестирование пользовательского интерфейса
14. Гит и Гитхаб

Предварительные навыки веб-дизайна

Если у вас есть только базовые знания о компьютерах, вы можете изучить веб-дизайн. Даже основы программирования не требуются для изучения веб-дизайна.

---

Веб-технологии

Для создания веб-страницы мы используем три веб-технологии или языка. W3C — это организация, занимающаяся разработкой веб-стандартов под руководством Тима Бернерса-Ли, изобретателя HTML. В этом уроке мы рассмотрим все аспекты создания веб-сайта.

Веб-технологии

• Структурный слой HTML веб-сайта, используемый для создания контента.
• Уровень представления CSS веб-сайта, используемый для оформления HTML.
• Функциональный слой JavaScript веб-сайта, используемый для добавления функций.

HTML против CSS против JavaScript

HTML

Click

CSS

button{ background: red;}

JavaScript

60 0 Greet

---

---

Мы начнем учиться с основ до продвинутых и будем следовать веб-стандарту HTML5 от W3C и стандартам поисковых систем, чтобы сделать веб-сайт дружественным к SEO.

Курс веб-дизайна

Тема	Подробности	Использование
HTML	Язык гипертекстовой разметки	Язык, используемый для построения структуры веб-страницы. Учебник по HTML
HTML5	Последняя Версия HTML	Для создания семантической веб-страницы с новыми тегами, мультимедийными объектами, географическим местоположением, веб-хранилищем и веб-доступностью. Учебник по HTML5
CSS	Каскадирование Таблица стилей	Для оформления или оформления веб-страницы с помощью HTML. Учебное пособие по CSS
CSS3	Последняя версия CSS	Для оформления веб-страницы с новыми свойствами, новыми селекторами и создания адаптивного веб-сайта. Учебник по CSS3
PSD для PhotoShop	PSD для веб-сайтов	Преобразование PSD в HTML5
JavaScript	Язык программирования общего назначения	Язык программирования на стороне клиента	содержание и добавить функциональные возможности. Учебник по JavaScript
JQUERY	JavaScript Библиотека	библиотека JavaScript для создания интерактивных веб -сайтов с меньшим количеством кода, AJAX, Web -Page Interaction, Animation и Dome Manipulation Etm. Twitter Bootstrap — это адаптивная структура на основе HTML5, используемая для быстрого создания адаптивных веб-сайтов. Учебник по Bootstrap
SASS	Препроцессор CSS	Sass используется для написания css, динамического css с переменной, функцией, вложением, а затем компиляции sass в css. Учебное пособие по SASS
Тестирование пользовательского интерфейса	Тестирование пользовательского интерфейса	Тестирование пользовательского интерфейса на сенсорных и несенсорных устройствах, кросс-браузерные проблемы, проверка W3C и тестирование устройств.

---

Редакторы кода для веб-дизайна

Редактор кода — это программа, используемая для написания кода, а браузер — для просмотра веб-страниц в режиме реального времени.