• Последние ответы
  • Новые темы

Веб-разработка для начинающих. Урок 1.

MRX

Новорег

MRX

Новорег
Статус
Offline
Регистрация
23 Мар 2021
Сообщения
0
Реакции
4
Добро пожаловать в мир веб-разработки. Пишу для новичков и без воды.
Со мной вы поймёте принцип изучения и продолжите учиться сами.
Опытные ребята проходите мимо, ничего нового вы здесь не найдёте.

Разработка сайтов происходит в 4 этапа:
  1. Написание структуры веб-страницы;
  2. Стилизация этой же самой структуры;
  3. Программирование поведения страницы и её отдельных элементов;
  4. Бекенд или работа с отправкой/принятием каких-либо данных.
Первые 2 этапа происходят одновременно. Они самые лёгкие. В коде
вы сообщаете браузеру, что существует какой-то элемент, затем говорите,
как он выглядит. Это происходит с помощью двух языков:
  • HTML или язык гипертекстовой разметки.
  • CSS или каскадные таблицы стилей.


HTML элементы выглядят так:
Код:
<названиеЭлемента>Что-то между тегами</названиеЭлемента>

У них есть открывающий тег <> и закрывающий </>
Между ними содержатся другие элементы или какой-либо текст.

Код:
<div>
    <h1>Привет, HardTM</h1>
    <p>Вы учитесь основам веб-разработки</p>
</div>


Стили выглядят по-другому:
Код:
названиеЭлемента {
    параметр: значение;
}

Сперва ты сообщаешь браузеру, к какому элементу они относятся. Затем передаёшь
параметры и сообщаешь их значение. Давай рассмотрим реальный пример:
Код:
<div>
    <h1>Привет, HardTM</h1>
    <p>Вы учитесь основам веб-разработки</p>
</div>

<style>
div {
    width: 100%;
}
h1 {
    font-size: 18px;
    line-height: 26px;
}
p {
    color: #323232;
}
</style>

Не задумывайся о том, что значат <div>, <h1> и <p>. Мы изучим это позже.
Просто пойми логику — сообщаем о элементе и как он выглядит, на этом
основывается вся веб-разработка.

В примере выше мы сообщили браузеру:
  • <div> занимает всю доступную ширину вокруг себя;
  • <h1> имеет размер текста 18 пикселей и расстояние между строками 26 пикселей;
  • <p> имеет почти чёрный цвет текста.
В следующем уроке поговорим о софте для вёрстки (написания HTML и CSS кода), установим
плагины для ускорения разработки. Создадим базовую структуру любой веб-страницы.

В комментариях принимаю обратную связь, отвечаю на вопросы.
 

Sava

Новорег

Sava

Новорег
Статус
Offline
Регистрация
20 Мар 2021
Сообщения
0
Реакции
1
Круто !
Жду продолжения!
 

batmanxx

Новорег

batmanxx

Новорег
Статус
Offline
Регистрация
22 Мар 2021
Сообщения
3
Реакции
1
А где следующий пост?
 

bbd

Новорег

bbd

Новорег
Статус
Offline
Регистрация
4 Апр 2021
Сообщения
0
Реакции
2
вопрос не решен?
 

Qw1ncky

Новорег

Qw1ncky

Новорег
Статус
Offline
Регистрация
22 Мар 2021
Сообщения
0
Реакции
0
Спасибо, ждём продолжения
 

Rаmpage

Новорег

Rаmpage

Новорег
Статус
Offline
Регистрация
17 Апр 2021
Сообщения
1
Реакции
3
Достаточно интересно, хоть базу более менее знаю. Жду продолжение, думаю на 4-6 урок, будет гораздо интересней!
 

bbd

Новорег

bbd

Новорег
Статус
Offline
Регистрация
4 Апр 2021
Сообщения
0
Реакции
2
Всё ещё жду. Как успехи?
 

Сверху