у меня так получилось на 100%
body {
width: 550px;
margin: 0;
padding: 0 10px;
}
.image-map {
display: flex;
flex-wrap: wrap;
width: 290px;
height: 290px;
margin: auto;
background-color: navy;
border-radius: 20px;
padding: 5px;
}
.pic-1 {
border-color: blueviolet;
}
.pic-2 {
border-color: coral;
}
.pic-3 {
border-color: crimson;
}
.pic-4 {
border-color: deepskyblue;
}
.pic-1 .pic-2 .pic-3 .pic-4, img {
border: 5px solid black;
border-radius: 50%;
margin: 5px;
}
На дворе вторая половина сентября, а ничего не изменилось. Программа обучения рваная из-за архивных глав, при прохождении курса “Знакомство с HTML и CSS” при решении вызовов нет НИКАКАИХ упоминаний про главу “Знакомство с таблицами” курса “Основы HTML”. Совсем не понятно как проходить курсы ПОСЛЕДОВАТЕЛЬНО. Поправьте , пожалуйста.
В программе обучения указан тот порядок прохождения курсов, который мы рекомендуем. Именно ей нужно следовать, чтобы проходить материал последовательно. Уточните, пожалуйста, как именно архивные главы разрывают программу обучения? Если нет желания их проходить, то можно пропустить, как и любую другую главу. При этом мы оставили их в программе, потому что считаем полезными для повторения и отработки знаний.
Они не разрывают программу, но программа из-за них выглядит непоследовательной. Или визуально нужно оформить две ветки (одна - актуальная, другая - архивная), которые сливаются в одну, или добавить в новый курс с котом Кексби главы про таблицы, формы, html5, а архивные скрыть. Правда, не очень понятно в какой последовательности проходить главы, если открываешь курс с главной страницы и последовательно его решаешь, то выходит что не все главы пройдешь для решения дополнительных задач на курсе.
вот программа, что тут непоследовательно?
Немного не понятен этот момент наследования. Поковырявшись понял, что работают 2 способа:
1й способ
2й способ
img { border-radius: 50%; border: 5px solid; margin: 5px; }
.pic-1 { border-color: blueviolet; }
Почему не работает свойство .pic-1 при написании:
.image-map img { border-radius: 50%; border: 5px solid; margin: 5px; }
.pic-1 { border-color: blueviolet; }
Ведь идет прямое обращение к классу .pic-1, почему в данном случае нужна вложенность через .image-map?
Мне тоже непонятно, - т.е. выходит если какой-то класс забит в самом низу каскада, то перебить его свойство можно лишь указав конкретно все этапы выше, а напрямую сослаться на этот класс нельзя? и так всегда? А то не совсем логично, хочется получить уточнение.
Порядок в коде имеет значение, но в данном случае дело в специфичности селекторов. В примере выше селектор .pic-1 менее специфичен, чем .image-map img. Вложенность в .image-map как раз увеличивает специфичность.
Тема подробно разбирается в этой главе.
Давайте я отвечу. Косяк в том, что зайдя в “курсы” человек не видит вкладку “программа обучения”. Я ее нашел только когда начал писать ответ на форуме, а начал писать ответ только после того как увидел ответ от Вас, что, оказывается, есть план обучения и если выбирать из “всех курсов” “Знакомство с HTML и CSS” проходя его последовательно, то оказывается, что знакомство с таблицами и формами выпадает (думаю, временно). Вообще-то я думал, что последовательным будет изучать означенный раздел, потом разделы “Основы HTML”, потом “основы CSS”, но оказалось, что так программа действительно не совсем последовательна. И узнал я это от посетителя форума.
Ну да, про solid вскользь упоминалось в каком-то упражнении. Да, можно было загуглить про этот solid (что я и сделал), да, форум решает большинство проблем. Однако, проблемы с тем, что люди не видят эту маленькую вкладку с планом обучения все таки есть.
Спасибо, мы учтём 
Уберите вы эти архивные главы в отдельную ветку. (я несколько лет назад, проходил этот курс, затем на время забросил. Теперь тут такая каша, что пройден тогда, что пройдено сейчас. Мешанина. Все блин в кучу)
Сделайте рекомендуемую вами последовательность программы более заметной и явной. У вас там хрен разберешься, пока случайно на форуме не наткнешься, в процессе поиска решений, по совсем другим вопросам.
Вам уже неоднократно сказали, что со структурой обучения большая путаница. А вы все “учтем, да учтем” И НИКАКИХ изменений.
Может поправите уже или религия принципов не позволяет?
Не совсем ясно, что вы подразумеваете под более заметной и явной программой обучения. Уточните, пожалуйста. Программа обучения есть, и она доступна на странице курсов:
Архивные главы отмечены, поэтому вы можете при желании их не проходить и идти дальше по программе обучения. В отдельную ветку мы их не выносим сейчас, потому что считаем полезными в основной программе для повторения материала.
Расскажите подробнее, с чем именно у вас возникает путаница.
Да вы уже достали с этой отмазкой про наличие программы обучения в виде одной ссылки мелкого шрифта в неочевидном месте.
Почему она не выделена на странице курсов в стиле отдельного курса? Почему при нажатии на кнопку “Начать учиться” на вашей главной странице переходит к первому уроку главы “Знакомство с HTML и CSS” и нет никакой ссылки на неё с этой главы?
Если вы знаете о наличии этой программы, то вовсе не означает что пользователь, который зашел на ваш сайт сразу её увидит. А увидит он крупные блоки с курсами (которые, кстати, тоже расположены не в порядке их прохождения) в которых при прохождении глав и уроков вдруг натыкается на задание, которое, оказывается, нужно делать после прохождения других глав другого курса. Зачем эта программа обучения вообще нужна, если вы можете выстроить порядок курсов и глав таким образом, чтобы пользователь ваших отличных курсов просто переходя последовательно курсы и главы может пройти их все именно в том порядке, в котором и задумывал автор?
Не нужно валить на пользователей то, что вы создали нелогичный порядок курсов на странице этих самых курсов в котором после главы “Знакомство с HTML и CSS” идет “Основы JavaScript”, затем “Основы PHP”, “Основы SVG”, а затем снова “Основы HTML” и “Основы CSS”?
И при этом, судя по вашей программе обучения, нужно скакать с начального уровня в средний и в продвинутый, а затем снова возвращаться в начальный.
И где здесь логика?
Скриншот, который вы прикрепили — это не программа обучения, а список всех интерактивных курсов, существующих в Академии. Курсы разделены не по признаку последовательного прохождения глав, а по темам, их объединяющим, поэтому они не распределены в порядке возрастания сложности — внутри содержаться главы разного уровня. Для последовательного прохождения глав с нуля (которые все в разных курсах) мы и создали программу обучения. Подводя итог, у каждой из этих страниц с курсами своя цель. У каждого пользователя есть выбор, как именно он хочет проходить курсы в зависимости от того, нужна ему конкретная тема по построению сеток, например, или он хочет изучить все главы последовательно с нуля.
По поводу незаметной ссылки на программу обучения — мы учли это замечание и проанализируем его.
Как обычно. Как всегда. Ничего не меняем. “Отмазываетмся и спорим со своими клиентами”.
Вы для кого обучающий сервис создаете, для себя или для посетителей?! Вам говорят что не устраивает, а вы как деревянные, гривой машете и дальше продолжаете свою нелогичную политику. Молодцы, че сказать.
Скажу по самому курсу, раз уж вы такие упертые. Из личному опыта пользования вашим “сервисом”.
Несколько лет назад, я влез в вашу программу. Сидел около месяца. Старательно и регулярно выполняя ваши задания. Ковыряясь в написанном заранее вами кодом, не имея вообще никаких знаний. И не понимая, зачем и для чего копаться в чужом, уже созданном кем-то коде, что-то там исправляя, для того, чтобы ваш сервер одобрил мои поправки, вплоть до последнего знака, прописанного в вашей компьютерной болванке-заготовке.
НИКАКИХ знаний это не дает. ПУСТАЯ трата денег(но это мелочи), а что важнее - ВРЕМЕНИ! Абсолютно бессмысленные задания и упражнения.
Вся эта якобы развлекательная для обучения, но довольно глупая идея с “котиком-верстальщиком” выглядит, мягко говоря, странно, у Вас большое колличество взрослых людей, а вы им про каких-то котиков и цветочки на подоконнике. Серьезно? Может повзрослеть уже пора?
Не обучение, не практика, а бестолоковое ковыряние в вашем “идеальном” коде, в попытках подогнать кодовые строчки в CSS и HTML под ваши шаблонные картинки проверяющего бота на сервере. Для таких странных извращений есть ресур: https://codepen.io/pen
Спустя два года, решил для интереса зайти к вам снова. За это время, прошел много разных обучений и есть опыт в работе. Думал, что может я был не прав, знаний было недостаточно. По результату, спустя время, все та же бестолковость и чудовищно бессмысленная пустота времени.
Я никому не советую этот курс. Не знаю, про тот, который основной и дороже, возможно что там все гораздо лучше. Но данная программа, просто безжалостно бестолковая трата времени, даже на фоне действия- взять книгу, прочитать и повторить - гораздо больше толку.
Не заметил, что ваш сервис писанул меня на подписку от вас. Уже несколько недель не захожу к вами и абсолютно нет желания. И сегодня автоматом сняли деньги. Поэтому про вас и вспомнил. Сорян за много текста, но это мнение основанное не на коротком промежутке времени.
Есть очень много хороших ресурсов, на которые стоит потратить время, по сравнению с вашим. Не буду здесь спамить ссылками.
P.S. Прикрутите SSL соединение сюда себе, для приличия. Вроде же закос под серьезную контору. Есть сервисы и бесплатных SSL сертификатов, если уж у вас совсем с денюжками плохо.
Видимо это сделано для того, что пользователи покупали и покупали подписку, проходя эти лабиринты ) Кстати, а подскажите, пожалуйста, где я могу найти эту самую незаметную ссылку? 
Подскажите, пожалуйста, как последовательно проходить ваши интерактивные курсы?
UPD: насколько я понял, речь идёт о данной программе обучения:
Если есть что толковое порекомендовать, то скиньте, пожалуйста, на почту ping@mail.ua
@Hierumo Здравствуйте, объясните, пожалуйста, почему в этом задании padding ставится в селекторе image-map? Почему его нельзя отнести к селектору .image-map img? Внутренние отступы задаются для области, содержащей элементы?
к сожалению подписка кончилась, точно подсказать не смогу. скорее всего паддинг на материнском элементе делается для того, чтобы дочерние с помощью маржина от него отталкивались. сейчас точно не скажу уже, т.к. в натуре не вижу html
