Найти тему

О сайтах.

Прочитав мои приключения вы поймете почему я начал заниматься фрилансом.

google pic
google pic

Да. Почему нет? Карьеру тролля я решил оставить. Завести дело. Семью, Друзей.

Короче новую жизнь.

Я смотрел то, что мне доступно.

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

Мне приглянулось 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 выше Вы просто измените. Удачи!