Прочитав мои приключения вы поймете почему я начал заниматься фрилансом.
Да. Почему нет? Карьеру тролля я решил оставить. Завести дело. Семью, Друзей.
Короче новую жизнь.
Я смотрел то, что мне доступно.
Выбирал между информационными технологиями. дизайном, анализом данных и, например, защитой добросовестных компаний.
Мне приглянулось it - веб девелопмент. Это не будет историей успеха которые вы начитаетесь на сайтах разных универов.
Почему такое направление? Мне это близко и так можно легко выстроить главное - веб сайт для своей фирмы. Причем любой.
Я начал с редактора кода и так как я олд пришлось покорячиться так как в мои годы это был просто блокнот с сменой расширения на html.
Я жутко начинал это самостоятельно и документ из редактора brackets был ужасен (хороший редактор кода, легкий). Выбор конечно сейчас большой и вы можете выбрать любой, уверяю. Если уж человек из ПТУ тянет, то и вы можете вместо бара посидеть за пк немного и взять материал например с MDN. Причем я заверю вас, что ваши возможности вырастут до создания банального лендинг пейдж без конструкторов за примерно месяц. Это хватит для своего дела, пусть и маленького. Оставьте время на работу для middle IT и выше над более крупными и важными вещами.
Давайте установим его, если вы хотите попробовать? Перед установкой создайте папку на рабочем столе для создания сайтов и выделите в ней директорию для программы. Ярлык запуска поместите на рабочей стол. Установите плагин emmet и посмотрите инструкцию к нему в интернете. Панель установок и показа страницы в вашем любимом браузере в правом углу программы (иконки).
После откройте с лева расположение папки "сайт" и кликните на область содержимого (пустую пока) "создать файл".
назовите index.html (это корень сайта и это обязательно)
Но как же программирование? html, css не являются им, но делать можно все очень круто.
Например такой код:
html
<!DOCTYPE html>
<header class="header">
<div class="logo">
<label for="open" class="open-menu"> Меню </label>
<h1 class="text-logo">You web page</h1>
</div>
</header>
<aside class="collapse">
<nav class="navigation">
<input class="open" id="open" type="checkbox">
<ul class="menu">
<li class="list-item"><a href="" class="list-anchor">EN</a></li>
<li class="list-item">это <a href="" class="list-anchor">аааа</a> страница</li>
<li class="list-item">это <a href="index.html" class="list-anchor">ааа</a> </li>
<li class="list-item">это <a href="" class="list-anchor">аааа</a> </li>
<li class="list-item">это <a href="" class="list-anchor">ааа</a> </li>
<li class="list-item">это <a href="" class="list-anchor">ааа</a></li>
</ul>
</nav>
</aside>
<style>
.menu {
display: none;
}
input {
display: none;
}
input:checked + label {
color: red;
}
input:checked ~ .menu {
display: block;
}
/* Выдвижное меню */
.open-menu {
font-size: 35px;
display: inline-block;
margin: 20px;
border: 1px solid black;
box-shadow: 5px 5px 5px;
}
.open-menu:active {
border-right: none;
border-bottom: none;
box-shadow: -5px -5px 5px darkviolet;
}
.menu {
position: absolute;
min-width: 350px;
padding: 20px;
z-index: 100;
background-color: black;
border: 5px solid darkorange;
}
.list-item {
display: block;
margin: 10px 0;
list-style-type: none;
color: white;
}
.list-anchor {
color: white;
font-size: 35px;
}
.list-item:hover {
position: relative;
left: 10px;
transition: 1s;
}
.list-item:hover {
color: darkseagreen;
font-size: 30px;
}
</style>
конец!
Этот изи код даст вам важную часть - меню!
И это соответствует стандарту w3c
Буквы между тегами, о которых вы узнаете с MDN выше Вы просто измените. Удачи!