#3 – Как создаются сайты? Смотрим код чужого проекта

#3 – Как создаются сайты? Смотрим код чужого проекта

Перед изучением HTML нам стоит узнать для чего вообще он нужен и какие дополнительно нужны языки программирования для создания веб сайта. За видео мы поговорим на тему разработки веб сайтов и рассмотрим ключевые языки и технологии для разработки сайтов.

Видеоурок

Front-end и Back-end

При создании веб-сайта всегда есть две стороны: Front-end и Back-end. Front-end – это понятие, что описывает разработку внешнего вида сайта. Back-end – это второе понятие, что описывает разработку серверной части сайта. Чем бы вы не хотели заниматься в будущем, но вам в любом случае нужно изучить HTML и CSS. Это – словно таблица умножения в математике. Изучите её, чтобы потом понимать дальнейшие действия.


Вне зависимости от того, хотите ли вы делать функции связанные с сервером (создание комментариев, работа с базой данных, настройка куки...) или же хотите делать внешний вид сайта (создавать дизайн, разметку...) вам в любом случае нужно изучить HTML и CSS.


Что за что отвечает?

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


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


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


И последнее, вам стоит изучить язык, что будет работать с серверной частью сайта. Таких языков много, но наиболее простой язык это PHP. За счет подобного языка вы сможете работать с базой данных, создавать регистрацию, систему комментариев и многое другое.


Базис, что нужен вам для разработки веб сайтов таков: HTML, CSS, JavaScript и PHP. При чем вместо PHP можно выбрать Python, Java, C++ или другой серверный язык.


Помимо базиса есть и много сопутствующих технологий. Сейчас мы рекомендуем вам в них не вдаваться и пока лишь изучить: HTML, CSS и JavaScript.

Онлайн редактор кода

Загрузка...

Задание к уроку

Клиентские и серверные языки

Что такое серверный и что такое клиентский язык программирования?

Посмотреть ответ

Сам по себе JavaScript является клиентским языком, что выполняется лишь на стороне клиента – в браузере. 


Важно: речь не идет о платформе Node JS, что позволяет выполнять скрипты на стороне сервера. 


Серверные языки – это языки программирования, что выполняют обработку функций на стороне сервера. К таковым языкам можно отнести: PHP, Python, Java, Node JS, Ruby и многие другие.

Получить остальные домашние задания можно после подписки на проект

Большое задание по курсу

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

Также стоит посмотреть

Современная вёрстка адаптивного веб-сайта
Изучение ASP.NET Core MVC. Создание сайтов на C#
10 уроков
Изучение HTMX с нуля / Проект на HTMX и Flask
8 уроков
Изучение технологии Bootstrap (верстка сайта)
16 уроков
Создание сайта с нуля | Полноценная верстка сайта
11 уроков
Вёрстка адаптивного сайта на Bootstrap 4
6 уроков
Комментарии (2)
Добавить комментарий

Осман 03 мая 2026 в 20:24

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Моё приложение</title>

<style>
body {
margin: 0;
font-family: Arial;
background: #f2f2f2;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

/* экран телефона */
.phone {
width: 300px;
height: 600px;
background: white;
border-radius: 30px;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
display: flex;
flex-direction: column;
}

/* верхняя панель */
.header {
background: #4CAF50;
color: white;
padding: 15px;
text-align: center;
font-size: 18px;
}

/* контент */
.content {
flex: 1;
padding: 15px;
}

/* кнопки */
.button {
background: #4CAF50;
color: white;
padding: 12px;
margin: 10px 0;
text-align: center;
border-radius: 10px;
cursor: pointer;
}

.button:hover {
background: #45a049;
}
</style>

</head>

<body>

<div class="phone">
<div class="header">Моё приложение
Ответить

SUXROB 06 сентября 2023 в 09:56

WHAT INDEX?
Ответить