Ответы пользователя по тегу HTML
  • Хороший пример структурированного CSS файла?

    vilka_2009
    @vilka_2009
    Верстаю
    Senseich, в принципе, ты на верном пути. Но, как порекомендовал, Алексей используй normalize или ему подобные файлы, и то что ты написал выпадет из основного файла css.

    И начнется у тебя файл с написания стилей для конкретно твоего случая, без обнуления стилей браузера и прочих подобных фич, которые дает тебе normalize.

    Будет так: сначала стили для html, body, потом для общего центровщика - wrapper, потом стили по стайл-гайду - все как у тебя: заголовки, параграфы, списки, ссылки, кнопки, изображения. Порядок тут не особо важен и скорее зависит от дизайна и того, как ты будешь верстать. Но закономерность можешь проследить в моем перечислении:
    1) сначала идут заголовки: всегда и везде в тексте сначала идет заголовок.
    2) потом параграфы: когда ты что-то читаешь после заголовка всегда идет параграф.
    3) потом в обычной статье мы можем что-то перечислить как сложно-сочиненным предложением, так и распределив перечисление в список, поэтому после параграфов идут списки.
    4) потом дополнить статью мы можем ссылками
    5) а ссылки можем сделать в виде кнопок
    6) а может и в виде картинки
    7) а может картинка - это не ссылка, подумаешь ты и поставишь стили для нее раньше ссылок. Но вдруг она когда-нибудь будет ссылкой, поэтому лучше стили для картинок поставить после ссылок, чтобы, если что, переопределить стили ссылки.

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

    vilka_2009
    @vilka_2009
    Верстаю
    По ходу дела позиционирование не нужно. В левой колонке текст, в правой - фотка, которая появляется при разрешении в 1100px
    @media all and (max-width: 1099px) {display: none; visibility: hidden;}

    Родителю overflow: hidden; чтобы он обрезал картинку, если она вылезает за пределы родителя. Картинке определенный размер задать, например: width: 1300px;
    Ответ написан
  • Как лучше делать ретинизацию изображений?

    vilka_2009
    @vilka_2009
    Верстаю
    https://developer.mozilla.org/ru/docs/Learn/HTML/M...
    Очень хорошая и подробная статья. Поймешь что тут написано, сможешь даже опытному фронтендеру утереть нос в каком-нибудь споре =)
    Ответ написан
  • Корректно ли использовать bootstrap3 и flexbox одновременно?

    vilka_2009
    @vilka_2009
    Верстаю
    Корректно ли? Нет. Но почему бы не Да?!
    1) В идеале, если нужен бутстрап и флексы, то берите Bootstrap4 и не парьтесь.
    2) В реальной же жизни, приходится пользоваться тем, что дает нам судьба >< Хе-хе
    Можно делать все что угодно, но нужно оценить трудозатраты, удобства и возможность использования другого стека технологий исходя из собственного опыта и мнения. Решать только Вам.
    Ответ написан
  • Что изучать верстальщику и в каком порядке?

    vilka_2009
    @vilka_2009
    Верстаю
    Не слушай тех, кто говорит, что без JS верстальщик - не верстальщик. Такие люди уже слишком давно работают, чтобы осознавать насколько сложно быстро изучить js попутно получая свой первый опыт в верстке.
    Запомни вообще: мы не можем знать все и сразу. Опыт - это самое важное после стремления и умения учиться и развиваться. Чтобы ты не боялся, что не возьмут в другую компанию: https://habrahabr.ru/post/323188/ Взять к примеру сообщение Тима Дикерса: "Привет, в лид в гугле, и более чем 30 лет программирую. И каждый раз мне надо искать, как узнать длину строки в питоне." А ведь самый первый урок на любом языке начинается с примера, как узнать длину строки ))

    Теперь поделюсь немного своим опытом. Как начинала я: я уволилась с работы и пошла учиться на курсы в htmlacademy База там дается отличная, правда с первого раза мне сложно было заставить себя учиться, поэтому я прошла бесплатно второй такой же интенсив. Перед НГ защитилась на отлично, можно сказать, и в феврале меня уже пригласили на работу примерно как у тебя (тоже java, совдепия, xml, таблицы). Сидела я там и баги всякие поправляла. Ушла через 5 месяцев. Долго не могла устроиться и из-за отсутствия свободных мест, и из-за собственного же страха и неуверенности. Бралась за фриланс, получала опыт, даже бесплатно работала в стартапе)) Мне важно было как можно больше практиковаться и получать опыт. Благо вообще нравится верстать) Весной следующего после увольнения года мне предложили работать в какой-то новой конторке, нас там было всего трое - дизайнер, программист и верстальщик. Всему обещали научить и чему успели научили) И ведь до сих пор люди считают, что верстальщик в компании должен быть! А некоторые компании совмещают приятное с полезным: верстальщика с программистом-фронтендером. Тем самым экономят рабочие места и зарплаты. Удобно же, да?) И вот такие опытные разрабы и говорят, верстальщик без js - не верстальщик. Фигня все это. Сейчас верстка гораздо сложнее и заковырестее, чем работа контент-менеджера, которая заключается в том, чтобы текст писать и вставлять его куда надо. Когда ты умеешь js - ты уже junior фронтендер. Это мое ИМХО. Ты отвечаешь не только за верстку, но и за фронт. Короче, далее)) В этой маленькой конторке я получила норм опыт и через пол года меня уже переманили в другую, одну из топовых организаций нашего небольшого города (тоже 400к). Зп как я когда-то хотела, проекты интересные, полная свобода действий и самостоятельность, даже уважение!) и я не знаю JS. И флексбоксы только начала пробовать. И проекты в моем портфолио за 2 года можно по пальцам пересчитать. Нужно просто успокоить себя и осознать, что верстка - это совсем не сложно. И js тоже совсем не сложно. И быть неопытным - тоже не проблема. Те организации, которые готовы брать неопытных людей, знают на что идут, они могут выделить свое личное время на твое обучение, на допиливание твоего опыта) Мы с коллегами 2 раза в неделю остаемся после работы и учим js. Нам читают учебник learn.javascript (да да), быстренько так зачитывают, все на пальцах и примерах в браузере тут же показывают, объясняют простым языком и потом ты уже спокойно можешь перечитывать учебник и понимать, что там написано и выполнять задачки под статьями. Периодически, для закрепления материала, нам дают домашку. Точнее давали, мы уже закончили js-лекции. И все равно, нельзя сказать, что мы сейчас прям сядем и плагин свой напишем - ни! Мы теперь можем понять практически любой код, написанный другими людьми. И использовать его. Для написания своего нужен просто опыт, больше практики.

    Я думаю, что работая в этой конторке на отстающих технологиях ты просто тратишь время зря. Иди в любую другую, реально. Просто за опытом. И да, в Москве медом не намазано. Там абсолютно так же как и в твоем городке, просто мест больше. Лучше туда наоборот опытным матёрым фронтендером ехать, за деньгами. А опыт в любом месте можно найти.

    Вот мой "блог"-цель по развитию в профессии, может прибавит тебе чего. Я его чисто как чек-лист для себя составляла.

    По поводу адаптива: в бутстрапе тоже используются медиазапросы. И покапавшись в нем, поюзая его, я поняла и осознала, что такое адаптив. Не знаю, что там учить перед его использованием?! Его и создавали как раз для программистов-бэкэндеров, чтобы они не запаривались и не вникали в адаптивную верстку, а просто юзали нужные классы. Так что, начинай использовать бутстрик и норм будет ;)

    Вот те мини-план от меня:
    • отбросить страхи
    • включить уверенность
    • блочная верстка
    • сетка на float || inline-block
    • попробовать бутстрап
    • html5, css3, семантика (она плотно зашита в html5)
    • попробовать расположить все элементы на странице/блоке позиционированием
    • ( так же все это можно попрактиковать на бесплатный курсах html-академии )
    • медиа-запросы
    • устроиться на работу
    • осознать бутстрап (то есть попробовать осознанно сверстать несколько макетов на бутстрапе, с адаптивом, на работе прям и попробуешь, ведь ты же уже знаком с бутстрапом :))
    • флексы - узнать и осознать, что это круче и удобнее бутстрапа в миллион раз
    • Внедрить флексы в рабочий проект, утвердив с ведущими и доказав, что его можно спокойно юзать и что не надо поддерживать ie 9... да даже 10
    • Самое главное: уделять по 1-2 часу в день, чтобы прочитать 0,5-1 главу на learn.javascript и пройти задачки под каждой прочитанной статьей ( у меня примерно столько уходило времени).


    Кстати да, совсем забыла про svg - это само собой ) Выкладывать на гитхаб свои работы прям на ходу разработки - это тема! Проверяющие будут видеть как ты коммитишь и юзаешь гит.
    Ответ написан
  • Как прописать код, чтобы открывалось в приложении Youtube с телефона?

    vilka_2009
    @vilka_2009
    Верстаю
    Насколько я поняла вопрос должна быть ссылка. Но я ее тут не вижу. То есть самого тега "a". На что нажать надо, чтобы открывался ютуб? meta - это мета-тег, он на странице не отображается.
    Ладно, это все демагогия.

    Вот как она должна выглядеть. Ничего больше. Хотя смотря на чем вы разрабатываете, например, на F7 тегу "a" нужно еще класс external прописать.
    Короче говоря, телефон сам распознает в каком приложении открывать ссылку, если в адресе ссылки есть ссылка на видео-ролик с ютуба, то откроется в приложении ютуба.
    Ответ написан
  • Как верстать адаптивно с нуля?

    vilka_2009
    @vilka_2009
    Верстаю
    На базовом интенсиве ты наверняка познакомился с относительными единицами измерения. Попробуй переверстать свой макет используя %. Сразу станет яснее, как работает резина и адаптив. Тот же самый бутстрап для своей сетки использует float:left и процентные ширины колонок. Вот и ты попробуй. Вообще лучше всего для практики адаптива подойдет макет Sedona. Сначала верстаешь так, чтобы сайт был резиновым, потом адаптивным. Попробуй еще переверстать его без флоатов, а на inline-block. И да, тут советовали медиа-запросы - тоже базовая часть адаптива. И познакомься с понятием "область просмотра" - почитай в гугле про мета-тег viewport

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

    Просто смотреть видосы, коих слишком много, так же и со статьями, проходить курсы - все это полезно конечно, но так же и бесполезно, т.к. их уже слишком много и много воды в них. Самостоятельные исследования полезнее для твоего мозга и для понимания.
    Ответ написан
  • Знаю основы HTML CSS, но верстать не получается. Как преодолеть баръер?

    vilka_2009
    @vilka_2009
    Верстаю
    Нужно просто брать и верстать. Не думая ни о чем. Самое главное не думать о том, что что-то не получается и не получится. Это должно быть не про вас. Просто берете и делаете.
    Ответ написан
  • Как сделать сортировку блоков?

    vilka_2009
    @vilka_2009
    Верстаю
    Было подобное "испытание" на htmlacademy . Возможно придется где-нибудь float переопределить (не уверена, уже не помню как делается эта штуковина, давно проходила). Но по большей степени придется менять местами блоки, чтобы все правильно встало )) Курс бесплатный, только зарегаться надо, я ничего не рекламирую, если что )))
    Ответ написан
  • Как растянуть контент по высоте?

    vilka_2009
    @vilka_2009
    Верстаю
    Все гораздо проще. Если флексы не подходят из-за поддержки каких-нибудь старых браузеров, то вот так: https://jsfiddle.net/9z8u92dh/5/
    Ответ написан
  • Как сделать отдельный цвет у * в input?

    vilka_2009
    @vilka_2009
    Верстаю
    Честно говоря, на данный момент этот способ не работает почему-то. Даже в вашем примере. Неужели данную фичу выпилили уже? ;((

    Но к счастью, есть другое прекрасное несложное решение ru.stackoverflow.com/questions/298676/%D0%9A%D0%B0...
    Ответ написан