Ненавижу copy/past,
иду по пути познания себя и мира через написание кода,
я просто геройствую помаленьку,
борясь с внутренним врагом моим - прокрастинацией будь она не ладна,
надеюсь дойти до уровня когда мой код сразу будет - 'совершенный код'.
Контакты

Достижения

Все достижения (1)

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

Все теги (10)

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

Все ответы (13)
  • Html-academy - мусор?

    apospeliri
    @apospeliri
    Начну с конца
    Как же хочется уже начать верстать макеты, боже

    Так бери и верстай, или тебя насильно держат не дают верстать ?

    display: table-cell

    практически не используются, очень популярны были для проблем позиционирования (горизонтального, вертикального), с появление flexов и гридов не актуально.

    По поводу курсов, важно понять а это приходит со временем - не бывает идеальных курсов, книг, документаций. Все люди разные, информацию воспринимают по разному, ну и плюс продавцы курсов хотят заработать денег, так что то вынуждены что то втюхивать.
    Отсюда главный вывод, информацию придется черпать из разных источников, причем постоянно на протяжении всей карьеры.
    Мои рекомендации на старте.
    1. https://www.w3schools.com/ (все css / html св-ва теги смотри здесь, тут же можно пройти обучение бесплатно)
    2. на youtube смотри Джедай Верстки (очень рекомендую его стартовый шаблон на gulp), Лаврик, и посмотри какие нибудь стартовые видео из серии верстаю что то за час (можно глянуть 3-5 видео от разных авторов).
    3. google (старайся, все непонятные вопросы гуглить причем сразу на английском, чем быстрее ты поймешь как сформулировать ту непонятную хрень, что у тебя происходит на мониторе в слова, и забить на английском тем лучше).
    4. курсы смотри на udemy, frontendmasters желательно на английском.
    5. bootstrap, без фреймворка никуда на старте.
    6. https://ru.bem.info/ - обязательно методологию, со старта лучше BEM.
    7. когда 3-6 месяцев поверстаешь, смотри Юрий Артюха как делать анимации для вдохновения.

    Но потрать ты хоть 10 лет на обучение, на первом же реальном макете ты поймешь что ничего не знаешь :) - это нормально :).

    P.S. и практически сразу тебе придется изучать JS, без JS сейчас ни как.
    Ответ написан
  • Как еще ускорить верстку?

    apospeliri
    @apospeliri
    Из того что я прочитал в твоих комментариях, то я думаю что ты примерно делаешь что и я в свое время.
    Рекомендую связку BEM + Atomic css.
    Например у тебя есть несколько блоков и них есть заголовки.
    вместо:
    .block1__main-title
    .block2__main-title
    пишешь
    block1
    h2 class="text text--20 text--uppercase text--gray-lite text--space-05 mb-20
    block1

    block2
    h2 class="text text--14 text--gray-lite text--decorate-red text--space-1 mb-15"
    block2

    И теперь если к тебе прибегает дизайнер и говорит, ой надо срочно поменять в blocke1 размер шрифта с 20 на 24, ну не проблема , быстро в html меняешь один класс и погнали.
    Я когда первый раз услышал мне идея дико не понравилась у меня же есть BEM, НО в чем плюсы.
    первое берешь из bootstrap flex утилиты(d-flex, justify, align-content...), и половина вложенных блоков по BEM пропадает.
    И самая вкусная фишка все это дело можно использовать с брейкпоинтами, например
    pl-20 и pl-md-35. Это так экономит нервы, когда прибегает дизайнер, ой тут короче на вот это страницу в этом блоке тут внизу надо немного текст поменять и да, еще padding слева и вот тут еще давай кнопулечку справа добавим, и да это только на этой странице, на других давай все оставим все как есть.

    P.S. Вообще лучше на живом примере посмотреть твою верстку, и дать какой то совет.
    Ответ написан
  • Оцените пожалуйста вёрстку(2)?

    apospeliri
    @apospeliri
    Правило дизайн не обсуждаю, но тут конечно дизайн просто финиш, очень жаль при оценке верстки тяжело отключить визуальную составляющую, и не понятно где косяки дизайна а где верстки.
    Исхожу из того что это пиксель перфект :)
    Если хочешь чтобы оценили верстку нужны исходники.

    1.Кнопка 'Show me More'
    class='btn get-tools__btn'
    меняем на
    class='btn btn--get-tools', все кнопки в отдельный файл.
    2.Моя рекомендация, если есть container, и есть секции на 100% ширины экрана то лучше сделать для них класс container-fluid (отдаем должное Boostrap).
    3.Тексты, заголовки и.т.д. Можно делать вложенные по БЕМ, или если страниц много и тексты в разных местах повторяются то
    h2 class="collection__title"
    меняй на
    h2 class="text text--50 text--red text--lh-1"
    4.Navbar не хватает ховеров, на флаги и на социальные ссылки.
    5.Про отсут слева и выпадающие меню тебе уже сказали.
    6. Слайдер не работает :(
    7. При клике на элемент слайдера, появляется рамка, а почему у рамки сверху не закруглены края ?
    8. quantity__events ховер срабатывает сразу не две кнопки, плюс и минус как то странно, и кнопки не работают.
    9. CSS медиа лучше сразу писать к нужному элементу.
    10.Скриптов мало, скрипты не сжаты.

    Верстка по БЕМ в целом все хорошо, на медиа не разваливает.
    Классы названы хорошо читаемо, есть контейнеры, ховеры, даже анимацию добавил ;), иконки через классы на бэкграунды, html/css сжат.

    P.S. Ivan Bogachev хорошо расписал, что визуально сразу режет глаз.
    Ответ написан
  • Как правильно организовать vue-router, в случае когда один router-view используется внутри другого router-view?

    apospeliri
    @apospeliri
    В Router.js ты прописываешь роуты, и определяешь по каким роутам какие компоненты будут грузиться.
    например в твоем случае.
    path: '/ - соответствует компоненту (странице) main (Main.vue)
    path: '/about - соответствует странице about (About.vue)
    path: '/news - соответствует странице news (News.vue) -3я страница

    И дальше большое кол-во как это можно сделать, зависит от задачи и макета .
    1. через роуты скажем выбрав что-то в меню внутри блока ты попадешь на определенную 'новость'
    path: '/news/:id'
    2. или у тебя будет приходит с сервера список 'новостей', ты их будешь фильтровать
    в computed и в зависимости от того что выберет пользователь показывать.
    ...

    P.S. Накидай базовый шаблончик со страницами и статическими данными, будет не понятно, скинь посмотрим поправим ;)
    Ответ написан