Почему WordPress правит миром веб-разработки
Другие наши проекты: ad.tproger.ru/sm?utm_source=pikabu
Другие наши проекты: ad.tproger.ru/sm?utm_source=pikabu
Новый сервис помогает создавать интерфейсы по запросу. Просто напишите, какой компонент вам нужен, и сервис сгенерирует его за считанные секунды.
Сгенерированные элементы можно легко изменить. Затем вы можете просто скопировать сгенерированный код React и вставить его в свой проект.
Попробовать сервис — тут.
Источник мой Телеграм паблик: https://t.me/thefutureidol
Вот сайт. На нем я и тренируюсь. Самому смешно, но когда я начинал, я не понимал разницу между CSS и HTML. Сейчас разницу я понимаю, но , как уже ясно, что никаких курсов я не заканчивал. Т. к. работать в этой сфере я не собираюсь из-за низкого уровня :).
Уровень JS у меня такой же, как в начале CSS :)
Как ни странно это будет звучать, но с высоты своего уровня (и этого сайта), я считаю, что изучать эти языки (многие называют HTML, CSS и JS -- языками начального уровня !!! 8) ) надо именно так -- брать чужие коды, лезть в первую строку Google и разбирать каждую строку.
А не идти на курсы, где вам за ваши деньги полгода будут лить в уши про основы: биты, байты , кодировки, сайты, сервера. А через полгода у вас портфолио из 1 сайта, где вы не понимаете половину.
Что по сайту? Кто в теме видит, что сайт размещен на Б/П хостинге от MS (а может от Google). Да, там вроде бы не положен PHP, но Коту Тихомиру он не нужен :).
После многодневных поисков программы адекватной синхронизации по FTP, я случайно наткнулся на возможность хостинга от MS (а может от Google), и забыл этот FTP, как страшный сон. Синхронизация по webdaw гораздо проще и быстрее.
Если разметку я еще могу разобрать, cвойства CSS понятны, почти. То JS , разумеется, все чужое, из открытых источников, большая часть из CODEPEN. Если я там нахожу что-то прикольное, я выбираю, что попроще, и приклеиваю на сайт. У меня уже места свободного там нет.
Моя гордость -- падающее меню, много мне поело нервов. Там @Keyframe от CSS и animation на чужой JS-библиотеке. Сдуру решил сделать случайное число оборотом. Наверное, 2 месяца приклеивал это случайное к CSS. Хотя эта случайность и не заметна вообще. Хотя теперь все кажется простым.
Приятно, что мой пост первый, в этом сообществе "Сайт - руками блудим".
Доброго времени суток. У меня есть сайт, он хостится на bitrix24. Также у меня на Nic.ru куплены dns-сервера. Мне нужно каким-то образом загрузить на мой сайт файл html с js логикой и css.
📖"HTML и CSS: Дизайн и верстка веб-сайтов" автора Джон Дакетт. Эта книга является классикой в области веб-разработки и предназначена для новичков, которые только начинают изучать HTML и CSS. Она покрывает основы верстки веб-страниц, включая работу с изображениями, формами и таблицами.
📖 "JavaScript и jQuery: Интерактивные веб-страницы" автора Джон Дакетт. Эта книга предназначена для тех, кто уже знаком с HTML и CSS и хочет научиться создавать интерактивные веб-страницы с помощью JavaScript и библиотеки jQuery. В книге описываются основы JavaScript, а также способы использования jQuery для создания анимаций, работы с формами и многое другое.
📖"Изучаем PHP и MySQL" автора Линн Бейли. Эта книга предназначена для тех, кто хочет научиться создавать динамические веб-сайты с помощью PHP и баз данных MySQL. Книга покрывает основы PHP, включая работу с переменными, функциями и массивами, а также описывает способы подключения к базе данных MySQL и работу с ней.
Всем пикабушникам и пикабушницам big hi!
Если вы начиннающ(ий,ая) разработчи(к,ца) сайтов, то это вам может пригодиться)
Нужно стараться использовать как меньше JS, чтобы все четко работало на старых устройствах, потому что мой телефон лично встроенный браузер не поддерживает JS. Не всегда можно избежать JS, но в данном случае можно.
И так-а, начинаем...
1. Создаем файл на ПК и называем его (index.html) - можно пользоваться обычным Виндоус блокнотом.
2. Наполняем его самыми базовыми тегами, чтобы небыло никаких акуна-мататных иероглфиов:
<!doctype html>
<html lang="ru">
<head>
<title>название страницы</title>
<meta charset="utf-8"/>
</head>
<body>
<!---- контент ---->
</body>
</html>
<style>
*{margin:0;padding:0;}
</style>
Далее убираем <!---- контент ----> и заменяем его на ето:
<div class="akuna">
<p>Текст 1</p>
</div>
<div class="matata">
<p>Текст 2, появляющийся при наведении (работает на мобильных корректно тоже)</p>
</div>
<style>
*{margin:0;padding:0;color:#000;text-align:center;font-size:32px;}
.akuna{width:cover;padding:+8px;display:block;background:#ccc;}
.matata{width:cover;padding:+8px;display:none;margin-top:+0/-0/0 cover!important;background:#eee;}
.akuna:hover ~ .matata{display:block;width:!important cover;padding:!important cover;}
</style>
В итоге получаем такой код:
<!doctype html>
<html lang="ru">
<head>
<title>название страницы</title>
<meta charset="utf-8"/>
</head>
<body>
<div class="akuna">
<p>Текст 1</p>
</div>
<div class="matata">
<p>Текст 2, появляющийся лишь при наведении</p>
</div>
</body>
</html>
<style>*{margin:0;padding:0;color:#000;text-align:center;font-size:32px;}
.akuna{width:cover;padding:+8px;display:block;background:#ccc;}
.matata{width:cover;padding:+8px;display:none;margin-top:+0/-0/0 cover!important;background:#eee;}
.akuna:hover ~ .matata{display:block;width:!important cover;padding:!important cover;}
</style>
Коротко, без JS и работает на мобилках)
Вот скриншоты получившегося (показано отображение при навдении курсора):
Select
<select> - элемент содержащий меню опций <option> или меню групп опций <optgroup>. Имеет схожие с <input> атрибуты, а также атрибуты multiple и size. Обычно select располагается внутри тега <form> или связывается с ним атрибутом form.
<form action="">
<select name="some_list"></select>
</form>
<option> - тег, который используется для определения пункта списка внутри тега <select>, но также его можно встретить и в тегах. Атрибуты: selected - позволяет пред-выбрать элемент. disabled - работает как всегда. и другие.
<form action="">
<label for="select">Select item</label>
<select name="list" id="select">
<option value="item-1">Item #1</option>
<option value="item-2">Item #2</option>
<option value="item-3">Item #3</option>
<option value="item-4">Item #4</option>
</select>
</form>
<optgroup> - позволяет группировать опции внутри <select>. Имеет атрибуты - name и disabled. name - задает имя группы. disabled - исключает возможность выбора элементов из группы. label - Задает имя группы которое видно пользователю.
<form action="">
<label for="select2">Select item</label>
<select name="list" id="select2">
<optgroup label="Veggie">
<option value="item-1" selected>Mushrooms</option>
<option value="item-2">Carrot</option>
</optgroup>
<optgroup label="Meat" disabled>
<option value="item-3">Pork</option>
<option value="item-4">Chicken</option>
</optgroup>
</select>
</form>
Атрибут multiple тега <select> позволяет выбирать не один, а сразу несколько <option> если зажата клавиша CTRL (для windows или linux) или COMMAND (для macOS)
<form action="">
<label for="select3">Select item</label>
<select name="list" id="select3" multiple>
<optgroup label="Veggie">
<option value="item-1" selected>Mushrooms</option>
<option value="item-2">Carrot</option>
</optgroup>
<optgroup label="Meat" disabled>
<option value="item-3">Pork</option>
<option value="item-4">Chicken</option>
</optgroup>
</select>
</form>
Textarea
<textarea> - позволяет добавить поле для ввода большого количества текста, обычно располагается внутри тега <form>. Имеет атрибуты схожие с <input>, а также cols и rows.
cols - определяет ширину <textarea>
rows - определяет высоту <textarea>
<form action="">
<label for="message">Your massage</label>
<textarea
name="user_message"
id="message"
cols="30"
rows="10"
placeholder="Your message..."
></textarea>
</form>
У тега <textarea> нет атрибута value, а если вы ходите установить ему какое-то значение по-умолчанию, нужно писать его между открывающим и закрывающим тегами.
<form action="">
<label for="message2">Your massage</label>
<textarea
name="user_message"
id="message2"
cols="30"
rows="10"
placeholder="Your message..."
>Some predefined data goes here</textarea>
</form>
Файлы с урока
P.S. Подписывайся на мой youtube и telegram каналы чтобы получать больше контента )