Noder SS

Согласно рейтингам tiobe и renmonk Java стабильно кувыркается где-то на 4 месте в рейтинге популярных языков разработки. Рейтинг Редмонка собирается из двух рейтов популярности (кажется количество вопросов в стековер и количество проектов на гитхабе. Ну или может как-то сложнее ХЗ).

Первым трем местам в этом анализе я-бы не сильно доверял. Там постоянно идет ротация то JavaScript выскакиевает то C то Swift но ситуация каждый год - новая. Вот сейчас там висит Python... Наверное девопсы подсуетились. И сайентисты.

В чем сила Java сегодня? Ну во первых в большом объеме легаси кода который уже написан и работает. Java сегодня занимает нишу COBOL в банках и финансовых организациях. И если вы хотите средний достаток, (машина дом, vacation) - то идите спокойно в java и будет кусок хлеба.

Во вторых в толстом репозитарии бесплатных библиотек на все случаи жизни.
Например я уже 2 года не пишу на Java ничего ради денег. Но в некоторых скриптах на Scala/Databricks я спокойно подключаю Java-библиотекие (всякие sftp клиенты, json/xml парсеры) и все это нормально интегрируется и работает. И слоган про wrote-once - это не шутка. Это правда работает и в доказательство - целый репозитарий таких либ на mvnrepository.com. Они будут совместимы c Kotlin/Groovy/Scala короче со всеми JVM-based языками.

Лично я считаю Java как язык слишком многословным. Многие вещи можно короче запрограммировать. Но это просто моё ИМХО. При игры - ничего не скажу. Не знаю. Но вот на Kotlin что-то пишут под Андроид.

И вообще программист должен больше выбирать род деятельности (фронт или back или железо и микро-контроллеры) а языки учить всю жизнь. Вот так. Вы всю жизнь - студент.

Можно ли как то его использования совместно с вебом?

Конечно. Java - один из самых популярных языков для бэкенда. Смотри в сторону Spring

И стоит ли вообще его учить?

Это уже тебе решать)

https://caniuse.com/?compare=ie+11&compareCats=all...

https://clientjs.org/
https://github.com/jackspirou/clientjs
https://github.com/fingerprintjs/fingerprintjs

Перечень того, что "можно узнать о пользователе", используя js:
ClientJS Methods
Fingerprint Methods
User Agent Methods
Browser Methods
Engine Methods
OS Methods
Device Methods
CPU Methods
Mobile Methods
iOS Methods
Screen Methods
Plugin Methods
Mime Type Methods
Font Methods
Plugin Methods
Mime Type Methods
Font Methods
Storage Methods
Time Methods
Language Methods
Canvas Methods
Additional Info

Если пользователь не сопротивляется (например специфические настройки и приватный режим браузера, плагины-блокировщики, виртуализация и т.п.) то:
* информация о железе - ос, параметры экрана и от сюда вплоть до конкретной модели мобильного устройства, ну по классам, наличие видеоускорителя, бенчмарки процессора и много чего еще
p.s. кстати webgl это огромная дыра, при должном старании как я понимаю можно даже содержимое экрана получить, буквально чем занимается пользователь вне браузера.
сюда же можно докинуть шрифты и алгоритмы их отрисовки, к примеру при должном старании можно понять, установлен ли тот или иной софт (крупный, какой-нибудь cad) по тому как браузер отрисовывает тексты шрифтами, устанавливаемыми этим софтом.
* fingerprint - набор технологий позволяющих вытянуть из поведения браузера идентификатор пользователя (читай куки) даже если он сопротивляется этому
* наличие плагинов/расширений браузера, по каждому расширению нужно проводить свои проверки но детектировать можно все
* поведенческий анализ, стиль работы с мышкой и клавиатурой, можно оценить реакцию пользователя на раздражители

* если ты - рекламная сеть (точнее куча веб сайтов устанавливают твой аналитический код да просто изображение-пиксел) то ты можешь знать, какие твои сайты посещал пользователь, вплоть до открываемых страниц и даже мониторинг поведения (если баннерная сеть ставит свой javascript код на сайт, то она может собирать буквально всю информацию, например нажимаемые кнопки), это самая вкусная информация, особенно для крупных сетей, ведь видно все интересы пользователя с историей

* банальщина вида - подменять содержимое clipboard, браузер позволяет его устанавливать на реакцию пользователя, типа клик(одно время и читать тоже, но это поменяли), как с этим можно смошенничать догадывайся сам

Не надо путать цену и себестоимость. Себестоимость - это сколько тебе стоит всю работу сделать. Цена - это себестоимость плюс наценка (прибыль). Цену можешь ставить любую, какую клиент согласен платить, НО не ниже себестоимости, иначе будешь работать себе в убыток.
Когда заказов нет и кушать хочется, то ставь цену = себестоимость + 10% (на всякий случай).
Когда заказов много на месяцы вперед, то ставь цену высокую, сколько твоя наглость позволит. А вдруг прокатит. Если не прокатит, то ты и так заказами обеспечен.
Принцип простой. Заказов нет - ценник вниз, заказы есть - ценник вверх.
Только с постоянными клиентами нужно придерживаться одинаковых однажды установленных расценок, во избежание их потери, если они тебе нужны, конечно.

Цена складывается из множества параметров, так же из-за количества людей, которые могут быть привлечены к этому. Одно дело, когда вы один, на шаблоне, делаете какой-то сайт, другое дело - когда у нас дизайнеры рисуют дизайн, верстальщики верстают, программирование/натягивание на CMS, кто-то пишет тексты, рисует иллюстрации и т.д.

Можно вывести какую-то минимальную цифру стоимости за типовый сайт и накидывать дальше цену за доп функционал.

Либо переход на почасовую оплату. Выбрать стоимость часа работы и дальше уже считать время потраченное на проект. Либо планировать, сколько времени может понадобится и выводить какую-то цифру на основе этого. Конечно, всё это будет примерно, временами может понадобиться меньше времени, а бывает и намного больше, чем планировалось.

Вот пример реализации.
Родительскому блоку необходимо задать
position: relative;
Дочерним (картинка и текст)
position: absolute;
Положение относительно z оси задается через z-index

Вообще это основы css. Вы сэкономите кучу времени если пройдете какой либо обучающий курс, чем будите методом тыка пытаться получить тот или иной эффект.

С наставником тебе явно не повезло. Хотя бы так сделай для начала что ли

.standart {
  background: rgb(246, 246, 248);
  position: relative;
  top: 195px;
}
.standart .container {
  margin: auto;
  max-width: 980px; 
  width:95%;
}
.in-main{
  display: flex;
}
.main_header{
  font-family:'Montserrat', sans-serif ;
  font-weight: 700;
  font-size: 33px;
  color:rgba(50, 50, 50, 1);
  line-height: 52.66px;    
}
.main_des {
  color: rgba(153, 153, 153, 1);
  line-height: 25.36px;
  font-family:'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 14px;
  width: 431px;
  margin: 26px 0px 20px 0px;
}    
.company_link{
  font-family:'Montserrat', sans-serif ;
  font-weight: 500;
  color: rgba(73, 133, 255, 1);
  font-size: 14px;    
}
.photo_sandart{
  width: 440px;
  height: 340px;
  margin-left: 50px;    
}

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

1. Предоплату.
2. Договариваться - что делаете вы, а что вам даёт заказчик.
3. Писать и согласовывать ТЗ по пожеланиям заказчика (заказчик его вам все равно корректно не напишет поэтому лучше это делать самостоятельно) - по хорошему после предоплаты хотябы за написание ТЗ

Деньги.

А если серьёзно, поищите примеры брифа на разработку сайтов (вот первый попавшийся для примера) и это должно закрыть большинство ваших вопросов, остальное по ходу.

ТЗ, на сколько это возможно (хотя бы подробный творческий рассказ того, что требуется). Если можно скриншотами показать - можно и скриншоты просить.
Предоплата.

смотря что Вы точно делаете. это всё обговаривается

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <div class="page">
    <div class="content-container">
      <div class="header">
        <img src="https://uprostim.com/wp-content/uploads/2021/05/image001-7.jpg" alt="">
        <div class="head-pos">
          <h2 style="text-align: center;">Заголовок<p style="font-size: 12px">Текст</p></h2>
        </div>
      </div>
    </div>
  </div>
</body>
<style>
    @import url(https://fonts.googleapis.com/css?family=Montserrat:100,200,300,regular,500,600,700,800,900,100italic,200italic,300italic,italic,500italic,600italic,700italic,800italic,900italic);
    *{
        margin:0;
        padding:0;
    }
    html{
        font-family: 'Montserrat';
    }
    .head-pos{
        width: 100%;
        height: 100%;
        backdrop-filter: brightness(40%);
    }
    .header{
       color:white;
        width: 100%;
        /* 
        height: 450px;
        background-size: 100%;
        background-repeat: no-repeat;
        background-image: url(photo.jpg); 
        */
    }
    .page{
        width: 100%;
        display: flex;
        justify-content: center;
        background-color: rgb(250, 250, 250);
    }
    .content-container{
        width: 800px;
        height: auto;
        margin: 0px 10px 0px 10px;
        background-color: white;
    }

    /***********/

    img {
      max-width: 100%;
      display: block;
    }
    
    .header {
      position: relative;
    }

    .head-pos {
      position: absolute;
      left: 0;
      top: 0;
    }
</style>
</html>

У вас лёгкий сайт. Я бы не стал дополнительно вешать загрузку, там рендерить нечего. Ну и для сео не очень хорошо, гугл не любит подобного.

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

- const signinbtn = document.queryselector('.signn-btn');
- const signupbtn = document.queryselector('.signup-btn');
- const formbox = document.queryselector('.formbox');
+ const signinbtn = document.querySelector('.signin-btn'); // имя класса
+ const signupbtn = document.querySelector('.signup-btn');
+ const formbox = document.querySelector('.formbox');

Та же проблема потери заглавных букв в addEventListener и classList.
Косяки с именами классов кнопок — проверяйте. В разметке одно имя класса, в querySelector() – чуть другое.

На будущее, пожалуйста, такие простыни кода не пихайте в текст вопроса, а создавайте песочницу с работающим кодом, например, на Codepen.io:

document.addEventListener('DOMContentLoaded', function() {
  const headings = document.querySelectorAll('.heading');

  headings.forEach(heading => heading.classList.toggle('gsap-reveal-hero', window.innerWidth >= 768));
});