Пользователь пока ничего не рассказал о себе

Наибольший вклад в теги

Все теги (24)

Лучшие ответы пользователя

Все ответы (69)
  • Что значит символ & перед селектором?

    GoodProject
    @GoodProject
    Верстальщик
    Это фиша препроцессора Sass с синтаксисом SCSS.
    Например ты создаешь кнопку:
    .button {
    
    }

    И тебе нужно задать для этой кнопки свойства при наведении на неё:
    .button {
        &:hover {
    
        }
    }

    Т.е вместо знака & в данном случае подставится .button после компиляции данного кода.

    Удобная штука, попробуй обязон, тем более SCSS мало чем отличается от CSS по синтаксису, сейчас каждый уважающий себя верстальщик должен пользоваться такой штукой. Особенно нравится вложенность, не нужно постоянно в строку перечислять все классы, просто создал один класс header, и уже внутрь него добавляешь нужные классы, типа:

    header {
        h1 {
        //свойство:значение;
        //свойство:значение;
        }
        p {
        //свойство:значение;
        //свойство:значение;
        }
    }


    В CSS будет выглядеть так:

    header {
    }
    header h1 {
    }
    header p {
    }


    Т.е тебе придется 3 раза написать header, это бесит, лично меня.
    Ответ написан
  • Какие название используете для классов в HTML/CSS?

    GoodProject
    @GoodProject
    Верстальщик
    Лови

    Основные
    .wrapper - /*обвертка сайта*/
    .hedader - /*верхняя часть сайта*/
    .sidebar - /*сайдбар (левая или правая часть сайта)*/
    .content - /*тело сайта (центральная часть)*/
    .footer  - /*нижнаяя часть сайта*/


    Название блока (обвертка)
    .bl 
    .block 
    .box
    .wrap
    .inner
    .container
    .main


    Секции блока
    .head, .header - /*верхняя часть блока например заголовок*/
    .cnt, .content, .body - /*тело блока например текс с картинкой*/
    .footer - /*нижняя часть блока к примеру дата добавления, категория и т.д.*/


    Колонки
    .column, .col - /*колонка*/

    Списки
    .list
    .item


    Позиционные классы
    .top /* элемент сверху */
    .left /* элемент слева float:left */
    .right /* элемент справа float:right */
    .bottom /* элемент внизу */
    .center /* элемент отцвентрирован  margin:0 auto; */
    .fixed - /*фиксированный элемент postion:fixed */


    Переходы
    .next  - /*следующий*/
    .prev  - /*предыдущий*/
    .last  - /*последний*/
    .first - /*первый*/
    .back  - /*назад*/
    .ahead - /*вперед*/


    Чисельные
    .one
    .thwo
    .three
    .four
    .five


    Размеры
    .xs, .tiny   - /*очень маленький*/
    .s,  .small  - /*маленький*/
    .md, .medium - /*средний */
    .lg, .large, .big - /*большой */
    .xl, .extra-large - /*очень большой*/


    Цвета
    .danger  - /*цвет опасности*/
    .default - /*стандартный цвет*/
    .warning, .error - /*цве ошибки*/
    .success - /*цвет успеха (к примеру верно введн код подтвержления)*/
    .primary - /*основной цвет */


    Кнопки
    .button, .btn - /*кнопка*/
    .loading - /*загрузка*/
    .close - /*закрыть*/
    .open  - /*открыть*/
    .touch - /*клик*/
    .edit  - /*редактировать*/
    .more  - /*больше*/
    .remove  - /*удалить*/
    .logout  - /*выход*/
    .select  - /*выбрать*/
    .divider - /*выпадающийся список меню*/
    .caret, .arrow - /*стрелочка*/
    .up - /* Вверх */
    .down - /* Вниз */
    .delete - /* удалить */
    .reply    - /*ответить*/


    Персона
    .profile - /*профиль*/
    .person - /*человек*/
    .ava, .avatar - /*аватарка, картинка*/
    .name - /*имя*/
    .description - /*описание*/
    .address  - /*адресс*/
    .nickname - /*ник*/
    .birthday - /*дата рождения*/
    .sex - /*пол*/
    .author - /* автор */

    Заголовки
    .title - /*заголовок*/
    .short-title - /*скороченный заголовок*/
    .full-title  - /*полный заголовок*/


    Ссылки
    .link - /*ссылка*/

    Текст
    .text, .txt, .paragraph  - /*текст*/
    .info, .information - /*информация*/


    Картинки
    .image, .img - /*картинка*/
    .icon, .ic   - /*иконка*/
    .bg - /*фоновая картинки или цвет*/


    Формы
    .search, .form-search - /*поиск по сайту*/
    .input - /*текстовый элемент*/
    .form  - /*форма*/
    .form-group - /*группа элементов формы*/
    .help-block - /*текст подсказки*/
    .label - /*название элемента формы*/


    Катагории
    .type - /*тип*/
    .cat, .category - /*катигория*/
    .subcat, .subcategory - /*подкатегория*/
    .section    - /*раздел*/
    .subsection - /*подраздел*/


    Видео
    .video
    .play  - /*пуск*/
    .stop  - /*стоп*/
    .pause - /*пауза*/


    Социальные сети
    .social - /* социальные сети */
    .vk   - /*вконтакте*/
    .fb   - /*фейсбук*/
    .twit - /*твиттер*/
    .inst - /*инстаграм */


    Активные классы
    .none     - /*скрытый элемент*/
    .disabled - /*заблокированный*/
    .active, .current   - /*активный */
    .selected - /*выбраный*/
    .visible  - /*видный элемент*/
    .focus    - /*нажатый*/


    Временные классы
    .time  - /*время*/
    .date  - /*дата*/
    .day   - /*день*/
    .month - /*месяц*/
    .year  - /*год*/


    Очистка
    .clear, .clearfix, .clr - /*очистка*/

    Разделители
    .separator, .divide - /*разделитель вертикальный для слов */
    .br, .line - /*разделитель горизонтальный для блоков*/


    Остоньлые названия
    .logo    - /*лого сайта*/
    .new    - /*новинка*/
    .sale   - /*распродажа*/
    .feedback - /*обратная связь*/
    .support - /*помощь */
    .group  - /*группа*/
    .module - /*модуль*/
    .posters - /*пост*/
    .form   - /*форма*/
    .tabs   - /*вкладки*/
    .slider - /*слайдер*/
    .news   - /*новости*/
    .table  - /*таблица*/
    .full   - /*полный*/
    .breadcrumbs - /*Хлебные крошки*/
    .pagination, .pager - /*Нумерация страниц*/
    .navbar, .nav, .menu, .navigation - /*Навигация (меню)*/
    .dropdown - /*выпадающейся меню */
    .comment  - /*комментарий*/
    .subscription - /* Подписка */
    .special - /* особенный элемент */
    .standard - /* стандартный элемент */
    .screens - /* Скрины */
    .rate - /* рейтинг */
    .online - /* онлайн */
    .panel - /* панель */
    .popup - /* попап */
    .version - /* версия */
    .page - /* страница */
    .banners - /* баннер */
    .map - /* Карта */
    .more - /*еще, подробнее*/
    .tags - /* тег */
    .price - /* цена */


    Взято с этого видео.
    Ответ написан
  • Где практиковаться?

    GoodProject
    @GoodProject
    Верстальщик
    Зачем тебе задачки, если по факту, как я понял, ты хочешь верстать сайты, так бери макеты и верстай, смотри видео на том же ютубе от WebDesing Master, повторяй за ним как он верстает, так и набьешь руку, HTML и CSS очень мало для работы, если только не повезет, нужно ещё кучу всего учить, jQuery как минимум, потом JS, Gulp, BEM, Sass, кучу всего кароч, можешь посмотреть что требуется от верстальщика/программиста на сайте по работе, а так HTML Academy советую, JavaScript.ru, WDM на ютубе, и NNmclub, там можешь взять скачать по той же верстке/JS, ибо сначала ты не будешь знать как верстать те или иные элементы, поэтому изучай ещё Bootstrap 3, учись адаптивной верстке, семантической, комментируй каждый блок-секцию типа .header, .footer, много моментов в общем тут, но можешь ещё на ютубе посмотреть ошибки начинающих верстальщиков, так же есть курс JavaScript для верстальщика на NNMclub, там по сути сборник jQuery плагинов типа слайдера или как сделать аккордеон, спрятать текст, плавный скролл и прочие штуки которые просят от верстальщика, и важно ещё качество кода, тут поможет плагин Beautify хотя бы выравнивать код, ну и старайся без мусора в HTML, всё оформление в CSS, в HTML лишь блоки-элементы, не нужно допустим ставить подряд
    пару штук. в общем гавнокодить, но это придет только со временем, смотри код на других сайтах, как он устроен, оформление и побольше практики.
    Ответ написан

Лучшие вопросы пользователя

Все вопросы (36)