• Можно ли такое сверстать с помощью CSS и может JS?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Может быть какой-нибудь piechart на максималках?)

    Это не труъ. Настоящие верстальщики делают такие штуки на чистом CSS. А если лениво или времени нет - вставляют в страницу большой картинкой. На самом деле в верстке может быть смысл, если нужна адаптивность - не всегда, но часто ее может быть проще сверстать, чем на лету подгружать разные картинки в зависимости от изменяющегося размера экрана.

    Набросал вам примерчик, думаю раскрасить его градиентами вы уже сами сможете:
    Ответ написан
    1 комментарий
  • Как создавать сайты для фриланса в одиночку?

    Zoominger
    @Zoominger Куратор тега Веб-разработка
    System Integrator
    Что нужно знать для того чтобы , хоть как-то зарабатывать на фрилансе версткой сайтов?

    Ничего.
    Никак.
    Никогда.
    Без шансов.

    Но вы ведь не поверите, так что дам совет погуглить хотя бы по Тостеру (обратите пристальное внимание на "хотя бы").
    Ответ написан
    Комментировать
  • Как анимировать этот фон?

    SmthTo
    @SmthTo Куратор тега CSS
    Все перепёлки мира будут оплакивать мою смерть.
    А пользователь, по вашему, должен страдать от вашего желания анимировать этот фон?

    Во-первых, что и как должно анимироваться, трансформироваться и тому подобное? Где ТЗ или пример?

    Во-вторых, вопрос тупой, ибо как вы собрались анимировать статическую картинку?

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

    В-четвёртых, если нужна сложная анимация, то тут уже надо делать на WebGL. Что как бы намекает.

    В-пятых, никакой пользователь не захочет грузить 40 мб ресурсов ради этого. У вас не сайт крутого агентства.

    В-шестых, если уж так надо, то найдите просто видео с разрешение 1080p и поставьте его на фон, грузите его лениво, иначе у вас разбегутся люди, никто не будет ждать. Про 4К-запись с хорошим битрейтом будет весить а-ля 100 мб за 10 секунд, а также будет глючить на слабых устройствах. А с учётом огромного количества мелких деталей на видео, то при хорошем визуальном качестве в 4К-разрешении 10 секунд такого видео спокойно может весить и 150–200 мб из-за битрейта. И ваш равно будет небольшое размытие.

    В-седьмых, я не описал ещё кучи моментов.

    Типичный пример хотелки без понимания всех проблем, что эта хотелка в себе таит.
    Ответ написан
    2 комментария
  • Как стажировать верстальщиков, когда сам немного опытнее джуна?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Как вы прокачивались?

    Много-много экспериментов с целью не "научиться решать типовые задачи", а скорее "поиграть с инструментами и посмотреть, что будет". Такой подход дает более полную картину происходящего. Ну и гугл/документации/статьи по мере необходимости.

    На что стоит сделать упор в обучении именно верстки и малого количества js-а?

    Методы зависят от наличия времени и изначального уровня обучаемых. В целом для развития понимания CSS полезно "рисовать" на нем. Грубо говоря один автопортрет или зверушка, сделанная самостоятельно от начала и до конца, даст опыта как десяток лендингов. В таких песочницах концентрация хитрых задач на верстку в разы выше, чем на обычных сайтах, и обучение идет быстрее. Ну и просто прикольные штуки получаются, можно внести элементы игры с плюшками за успехи. В последние годы эта тема стала очень популярной на CodePen в виде ежедневных разминок для ума.

    Как обучали людей? У меня нет опыта в обучении людей

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

    Коммуникацию нужно наладить в обязательном порядке, чтобы все имели возможность спросить и не боялись это делать. Тут больше про психологию вопрос - нужно не только определить время и способ общения, чтобы и вам не мешали, и могли оперативно получить ответ, но и обязательно следить за своим языком, чтобы не быть "слишком токсичным" (про это все постоянно забывают). И помните - все ошибаются, ваши ошибки должны становиться поучительными примерами, не нужно их скрывать или стыдиться. Полезно в конце недели делать собрание "только для стажеров" и разбирать, что произошло интересного за неделю, чтобы они видели полную картину, учились на ошибках друг друга и распространяли опыт уже между собой - вы объяснили что-то одному, он в конце недели - остальным (а когда объясняешь - сам лучше понимаешь). Как вариант все вопросы от них к вам можно организовать в отдельном таск-трекере, чтобы ничего не терялось (как в бесконечных чатах) и можно было отсылать вновь прибывших к уже готовым ответам.
    Ответ написан
    1 комментарий
  • Что можете сказать о верстке (новичок)?

    PlugIN
    @PlugIN
    A Little Programmer
    Как говорилось выше, много хороших ресурсов по верстке. Экспертом не являюсь, но могу выделить ресурсы: HTML Academy, Hexlet - для активного обучения и практики и Webref как справочник. Потом можно изучать сами спецификации W3C. Действительно, верстку зря иногда считают ерундой, это серьезное и многотрудное дело.
    Ответ написан
    Комментировать
  • Что можете сказать о верстке (новичок)?

    Vlad_IT
    @Vlad_IT Куратор тега Вёрстка
    Front-end разработчик
    1) Не делайте отступы блокам через  , есть же padding/margin
    2) Забудьте о float: left в тех местах, для которых он не предназначен. Для создания сетки используйте flex/css grids
    3) Делайте осмысленные названия классов и идентификаторов у элементов. У вас куча container1, container2 и.т.д.
    4) Не используйте position: absolute, где не нужно явное абсолютное позиционирование (у плавающих блоков например).
    5) Соблюдайте семантику. Заголовки должны быть в h1-h6 тегах.
    6) Не забывайте добавлять атрибут alt для всех картинок img
    7) У вас на сайте везде (вроде везде) используется шрифт "Trebuchet MS", но задаете вы его для элементов каждый раз, хотя можно было задать глобально для body
    8) Блок "ГАЛЕРЕЯ" не по центру.
    9) У вас соц-иконки в футере выровнены очень странно. Иконка insta имеет очень странный отступ от левого края, который видимо предназначается для выравнивания всего блока с иконками. Сделайте контейнер
    .container {
       width: 100%;
       max-width: 1040px;
       padding: 15px;
       margin: 0 auto;
    }

    и в него кладите элементы, которые должны быть внутри сайта. У вас через странный отступ почти все отпозиционировано. Посмотрите чужие работы, как люди делают разметку. Вы пока слабо представляете, как это все происходит.
    10) Вы должны адаптировать не только под маленькие и средние экраны, но и под большие, с шириной 2560px. Не нужно делать под них широкий сайт, просто нужно делать так, чтобы на них сайт тупо не уходил влево, а был по центру.
    11) Куча повторяющегося кода в css
    .footer>.footer_img>.vk{
        margin: 5% 0 0 1%;
    	display: inline-block;
    }
    .footer>.footer_img>.twitter{
        margin: 5% 0 0 1%;
    	display: inline-block;
    }
    .footer>.footer_img>.facebook{
        margin: 5% 0 0 1%;
    	display: inline-block;
    }

    12) Освойте БЭМ (или другую методологию). Код будет чище и проще.
    13) Сайт не адаптивный абсолютно, имеется только один media запрос, и тот только для изменения шрифта у документа. Посмотрите на другие сайты, как они адаптируются.

    Это основное, но список можно продолжать долго. По коду можно судить, что вы учились по старой литературе, выбросите ее. Смотрите как верстают другие, ковыряйте макеты, читайте умные статьи и сайты, тренируйтесь часто, и все будет ок.
    Ответ написан
    3 комментария
  • Что за хитроумные расчеты vw? Как делать офигенный резиновый текст?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Т.е. это все просчитывается заранее. Как?

    Элементарно:
    Ответ написан
    1 комментарий
  • Где смотреть современные интересные сайты?

    sfi0zy
    @sfi0zy Куратор тега Вёрстка
    Creative frontend developer
    Ответ написан
    Комментировать
  • Как отобразить сайт во весь экран на определенных экранах?

    @SpideR-KOSS
    @media (min-width: 577px) {
     Здесь стили для разрешения больше чем 577px но меньше 1088px.
     }
    
    @media (min-width: 1088px) {
     Здесь стили для разрешения больше чем 1088px.
     }


    А вашему главному блоку/контейнеру(body или wrapper, надо код смотреть) пропишите правило width: 1000px;
    Ответ написан
    1 комментарий
  • Как поменять фон через некоторое время?

    Rikazavr
    @Rikazavr
    web design hippie
    На CodePen можно поискать решения по тегам "animate background color "

    Типа такого или такого
    Ответ написан
    2 комментария
  • Вопрос про город?

    DmitriyEntelis
    @DmitriyEntelis
    Думаю за деньги
    Чем раньше Вы уедете в большой город - тем лучше.
    При любой возможности устраивайтесь на стажировку.
    Живой опыт лучше чем формальное образование.
    Ответ написан
    Комментировать
  • Вопрос про город?

    dimonchik2013
    @dimonchik2013
    non progredi est regredi
    крупный, конечно

    нормальный технический ВУЗ в Москве / Питере

    все по другому, даже манеры преподов
    Ответ написан
    Комментировать
  • Хорошая ли верстка моего сайта?

    Get-Web
    @Get-Web
    Front-End Developer
    На самом деле не все так хорошо, если вы придерживались методологии БЭМ. Смотрел только разметку:

    5b8d60812726f740329791.png5b8d608f12afd944411636.png
    Ответ написан
    Комментировать
  • Для чего делать такие размеры?

    Vlatqa
    @Vlatqa Куратор тега CSS
    а потому что px - величина абсолютная, а rem - относительная
    Ответ написан
    Комментировать
  • Для чего делать такие размеры?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Смотрите ситуацию. Я человек с плохим зрением. В моём браузере стоит увеличенный размер шрифта. Я открываю сайт в котором верстальщик шрифты указал как надо, в rem, а на размеры/отступы забил и задал их в пикселях. Получается уродство:

    5b935705491c9619831053.png

    Потом верстальщик стал умнее, и переписал размеры/отступы в rem'ы и сразу всё стало очень хорошо:

    hzhezdpprfkudyrsgnvz0iz1bhs.png

    Понятно?
    Ответ написан
    3 комментария
  • Что изучать для карьеры?

    snap44
    @snap44
    Фыр!
    И вот что реально не изменится через год?

    Когда я решил забить на фронт, говорили что флексы еще сырые. Через четыре месяца я решил вернуться и уже говорили "пора верстать на гридах". Еще что-то там говорили про какой-то Vue, который убьет jQuery. Теперь все знают кто такой Vue, но jQuery все еще жив и здравствует. Вы серьезно рассчитываете получить ответ что будет через год? Ну точно могу сказать что Путин будет президентом.

    Что изучать, для карьеры?

    Yii, React, NodeJS, Python. В зависимости от работы, конечно. Потому что =>
    Но всегда требуют Yii, React, NodeJS, Python


    А с учетом =>
    Понятное, дело знаю и нативное

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

    Что же реально надо чтобы найти работу?

    Попробуйте начать отправлять резюме и откликаться на вакансии.
    Ответ написан
    Комментировать
  • Как сверстать обводку для кнопки?

    snap44
    @snap44
    Фыр!
    Ответ написан
    Комментировать
  • Как сделать чтобы картинка полностью отображалась на сайте?

    Stalker_RED
    @Stalker_RED
    background-size: cover - картинка тянется так, чтобы покрыть весь блок. Лишнее обрезается.
    background-size: contain - картинка тянется так, чтобы целиком уместиться в блок. Могут быть свободные участки по краям.
    Ответ написан
    Комментировать