Задать вопрос
  • Оцените пожалуйста верстку?

    vilka_2009
    @vilka_2009
    Верстаю
    1) Тег section не в правильном месте используешь. Он означает что-то более глобальное и общее.
    <div class="limpon-is">
            <div class="bg-color"></div>
            <div class="squares-bg"></div>
            <div class="wrapper">
                <div class="brandon-img"></div>
                <section class="limpon-text">
                    <div class="small-button"></div>
                    <h3>Limpon Is Suitable For<br> Anytype LandingPage</h3>
                    <p>Lorem ipsum...</p>
                    <a href="#" class="btn btn230blue">get started now</a>
                </section>
            </div>
        </div>

    Например тут section-ом должен быть блок с классом ".limpon-is", а у тебя просто его текстовая часть. Он должен объединять в себе весь логический блок, пусть в нем даже есть какие-то декоративные блоки.
    2) Так же, я бы не стала делать такие декоративные блоки (.bg-color, .squares-bg) и декорировала псевдо-элементами, потому что они не несут никакой смысловой нагрузки, в отличие от скриншотов и иконок.
    3) .testi-bg - почему картинкой, а не css-ом? если что-то можно верстать, то нужно верстать. Например, радиокнопки в форме - это обычно кружок в кружочке. Это точно не стоит лишних обращений к серверу за картинкой, их отрисовка и хранение. Здесь тоже не вижу никакого смысла делать вместо фона с закруглением - картинку.
    4) .review-block1 - Вот таких классов не должно быть ни в коем случае, .review-block - таких тоже лучше избегать. Это все равно что диву назначить просто класс block. Див - это же итак блок. Или еще круче div с классом div. Будет вообще шикарно.
    5) в blockquote в твоем случае излишне вставлять параграф .
    6) .review-block - фотографию автора обзора нельзя делать псевдо-элементом. Это не просто декоративный элемент, это как имя автора отзыва и относится не к самому блоку, а к его содержимому. Поэтому должен быть тег с классом .author-photo, например.
    Как лучше делатьь:
    <div class="review">
                <blockquote>It is a long established fact that a read her will be distracted by the readable content of a page when looking.</blockquote>
                <div class="review-author">
                    <img class="author-photo" src="image.jpg" alt=""/>
                    <span class="author-name">Rolin B. Mirano</cite>
                    <cite class="author-company">ceo, uihub</cite>
                </div>
        </div>

    Тут мы объединяем смысловые элементы одним родителем .review-author
    7) .plans-header - зачем тут делать ширину блока? Излишне.
    8) Список услуг в тарифах должен быть списком, а не одним параграфом. Жирный минус!
    unexceptable

    hqdefault.jpg
    9) Опять же, список тарифов - это section. А у тебя этим тегом каждый тариф выделен. ".team-list" - это не section. ".our-team" - это section.
    10) .team-plus - мой совет: не парься высчитыванием радиуса в пикселях. когда тебе нужно сделать круг. Просто border-radius: 50%, можно 100%, можно 9999рх. В любом случае, если нужно будет поменять размер круга, то не нужно будет менять размер радиуса.
    11) Такие штуки как .team-position - это не параграф в тексте или статье. Поэтому не используй тег пожалуйста. Используй тег .
    12) При желании в форме обратной связи можно оформить текст авто-заполнения, чтобы не было сильных отличий.
    13) В любом поле формы должен быть padding, как левый, так и правый. У тебя ни в одном поле нет правого падинга. Поэтому при длинном тексте он наедет на иконку. А длинным может быть и фио, и почта. А не только текст в текстареа.
    5d27626ad09e1936454445.png
    5d2764e97c3cb017292066.png
    14) Кнопочка "submit now" - иконка должна быть псевдоэлементом у текста. Иначе если текст поменяется придется и ее двигать.
    15) .foot-so - не делай сокращенные имена классов. Тут невозможно понять что это. Ступня?! footer-social, хотя бы.
    16) Предпочтительнее все таки футеру тоже назначать класс. footer.footer получается
    17) На ссылках хочется эффектов наведения (кроме cursor: pointer), а на кнопках - плавности наведения (transition).
    18) .subscribe button - попробуй border-radius: 9999px. Лайфхак, если радиус в 2 раза меньше высоты кнопки ;)
    19) А что это так? Почему только ко второму заголовку такое правило?
    .text-scroll h4:nth-of-type(2) {
        margin-top: 27px;
    }

    20) Центрируем флексами без подгонки пикселей отступов.
    .burger-areal {
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer
    }
    .burger {
      width: 30px;
      z-index: 333;
    }
    .burger span:last-child {
      margin-bottom: 0;
    }


    Надеюсь ты не примешь критику близко к сердцу, а сделаешь из нее правильные выводы. В основном, честно, мне все очень понравилось. Все замечания чисто на опыте. Удачи тебе в развитии!
    Ответ написан
    4 комментария
  • Требуются ли верстальщики на данный момент?

    Vlad_IT
    @Vlad_IT Куратор тега Вёрстка
    Front-end разработчик
    если верстальщиков пруд пруди?

    Вы можете помочь решить эту проблему, не вкладывайте себя в эту "энтропию". Согласитесь, у вас такая же мотивация верстать, как и у этих людей с курсов - деньги. С одной только такой мотивацией далеко будет сложно продвинуться. И 4 месяца на изучение это дико мало, чтобы пытаться конкурировать с кем-то.
    Либо учитесь серьезно, получайте от этого удовольствие, не ждите быстрого выхлопа на старте, ну, либо ищите другую профессию, где после 4 месяцев обучения можно сразу зарабатывать.
    Ответ написан
    1 комментарий
  • Какие уроки по Vue.JS?

    Vlad_IT
    @Vlad_IT
    Front-end разработчик
    Кроме официальной документации есть официальные видео уроки https://www.vuemastery.com/courses/intro-to-vue-js...
    Ответ написан
    1 комментарий
  • Хорошая ли практика, смешивать js и css анимации?

    @vetail
    Да
    Ответ написан
    Комментировать
  • Не могу взять первый заказ на Upwork?

    Robur
    @Robur
    Знаю больше чем это необходимо
    Заказчик должен понять что вы ему поможете в этом конкретном проекте на втором предложении.
    Иначе до третьего он не дочитает. Сократите текст хотя бы на 70%, каждая буква должна быть по делу и относиться к заказу.

    откуда вы - не нужно, это должно быть в профиле.
    Примеры работ и почему с вами так хорошо - тоже.
    Профиль должен быть открыт.

    То что вы "все сделаете в лучшем виде и вообще отлично подходите" - вообще выкиньте.
    В том числе и то что вы лучше других.
    А так же любые другие слова которые напишут 100% других фрилансеров.
    То что вы в топ - можно оставить в конце в подписи.
    То что вы можете что-то на его сайте починить стоит писать только если заказ именно об этом.

    Если с английским слабо - пишите короткими предложениями в максимально простом формате, будет лучше восприниматься.
    Ответ написан
    1 комментарий
  • Что нужно знать современному Frontend-разработчику?

    Robur
    @Robur
    Знаю больше чем это необходимо
    Развивайте умение искать информацию. Потренируйтесь на тостере и на вашем собственном вопросе.
    Ответ написан
    Комментировать
  • Как сделать такую фичу?

    dicem
    @dicem
    Делаем блок родитель в него два абсолютно-позиционированных блока с overflow: hidden на всю ширину и высоту родительского блока
    Суть в том, что ты будешь управлять этим ползунком шириной блока, который по z-index выше.
    Если не в курсе как ресайзить блок :
    https://medium.com/the-z/making-a-resizable-div-in...

    P.S
    Дочерние блоки должны содержать в себе так же абсолютные блоки в которых будет твой контент.
    Ответ написан
    Комментировать
  • С чего и как начать продажу команды разработчиков с нуля без портфолио?

    @PavelFokeev
    pavl1k.ru
    опыт работы на удаленке стремится к нулю

    Работать "на портфолио", естественно, не буду, за копейки тоже

    Команды пока нет

    Хмм...
    Буду очень рад абсолютно любым советам

    Иди на завод)
    Ответ написан
    9 комментариев
  • Возможно ли как-то сократить код?

    0xD34F
    @0xD34F Куратор тега JavaScript
    let show = 1;
    
    function sh() {
      const [ display, text ] = [ [ 'none', 'Развернуть' ], [ 'block', 'Свернуть' ] ][show ^= 1];
      [...document.querySelectorAll('.list-row')].slice(3).forEach(n => n.style.display = display);
      document.querySelector('#button').textContent = text;
    }
    
    window.addEventListener('load', sh);
    Ответ написан
    1 комментарий
  • Как правильно позиционировать?

    g_hagmt
    @g_hagmt
    Начинающий веб-разработчик
    #div_with_image_background {
    	width: 200px; 
    	height: 200px;
    	background: url(image.jpg);
    	background-repeat: no-repeat;
    	background-size: cover;
    	background-position: center center;
    }
    Ответ написан
    Комментировать
  • Будет ли сайт с данными медиа запросами хорошо адаптироваться?

    @Araya
    Делается всего три или четыре брейкпоинта, зависит от проекта. Зачем каждые 100 пикселей дергать?
    Ответ написан
    6 комментариев
  • Где граница между Джуном и Мидлом?

    sergey-gornostaev
    @sergey-gornostaev
    Седой и строгий
    Эти категории очень условны, соответственно и чёткой границы нет. Сеньор из одной компании может быть едва мидлом в другой, и наоборот. Определить уровень зрелости программиста может только другой программист, существенно превосходящий его опытом.
    Ответ написан
    Комментировать
  • Не показываются изменения на сервере, Vuejs Laravel?

    Ну вообще laravel-mix должен вам генерировать hash. Посмотрите как вы файлы подключаете в blade. Нужно через mix()

    А так можно отключить кеш в браузере
    5d0fa8d52c301608156889.jpeg
    Ответ написан
    Комментировать
  • Предпросмотр изображения из инпута?

    coderisimo
    @coderisimo Куратор тега JavaScript
    Вот простой пример . Можно почитать про FileReader

    Ответ написан
    Комментировать
  • Мутабельность в JavaScript?

    Xuxicheta
    @Xuxicheta
    инженер
    мутация (изменение) массива
    const arr = [1,2];
    arr.push(3);


    работа с иммутабельным массивом
    const arr = [1,2];
    const arr2 = arr.concat(3);


    Нужно для того, чтобы можно было следить за изменениями в сложных структурах.
    В первом случае arr тот же самый, чтобы обнаружить изменения нужно сравнить массив поэлементно.
    Во втором случае сразу arr !== arr2
    Ответ написан
    Комментировать
  • Какой самый распространённый способ отцентрировать блок по вертикали?

    Eridani
    @Eridani
    Мимо проходил
    дисплей флекс, алигн итемс центр
    Ответ написан
    Комментировать
  • Почему не финиширует gulp.watch на gulp 4?

    megafax
    @megafax
    web-программист
    Так он не должен финишировать. Вы ему дали команду наблюдать и при изменениях иницировать какие либо действия.
    Ответ написан
    1 комментарий
  • Как разделить целый GRID-блок на 2 блока с отступом?

    potapchino
    @potapchino


    еще так можно:
    Ответ написан
    Комментировать
  • Объясните, как работает этот код?

    potapchino
    @potapchino
    // Инициализация переменной massiv3, ссылающейся на массив из 7-ми элементов
    let massiv3 = [-3, 100, 2, 0, -89, 34, 67];
    
    // Инициализация переменной sum со значением равным нулю
    let sum = 0;
    
    // Цикл, итерирующий массив massiv3.
    // На каждой итерации цикла, к переменной sum прибавляется значение текущего итерируемого элемента массива
    for (
      i = 0; // инициализация счетчика цикла (в начале цикла равен нулю)
      i < massiv3.length; // условие выполняющееся на каждой итерации. если оно истинно для текущего значения счетчика, текущая итерация выполнится, если ложно - итерация не выполнится и цикл закончит работу
      i++ // выражение, которое будет выполнятся в конце каждой итерации цикла («++» означает увеличение (инкремент) счетчика i на единицу)
    ) {
      sum += massiv3[i]; // прибавляем значение текущего итерируемого элемента массива к текущуму значению переменной sum
    }
    
    // инициализируем переменную result со значением, равным отношению значения переменной sum
    //   к значению длины массива
    let result = sum / massiv3.length;
    
    // вывод значения переменной result в консоль браузера
    console.log(result);
    Ответ написан
    8 комментариев