Svetlana_P

Мне тоже интересно, что посоветуют, потому что с svg работала мало. Но как вариант: из png перевести в svg через экспорт в Фотошопе, тогда сохранится цвет. И вставить через object <object type="image/svg+xml" data="pic.svg"> </object> У меня добавилось http://benedetta.ru/2017/05/31/svg/ , но я не вижу преимуществ. Поясните, почему обязательно svg? Почему хотите именно так, а не через png? Что будете потом с картинкой делать?

Добрый день! Хорошо, покритикую как пользователь. В SEO несильна 1. при заходе на сайт, сразу непонятно, что это. Заголовок "Изучите новое направление" мало о чем говорит. Это учебный центр? Или каталог учебных центров? Что я могу тут узнать или сделать? 2. на главной в списке курсов текст плохо читается, фоновые картинки мешают 3. не совсем понятно, зачем такая организация списка курсов (плиткой с картинками разных размеров). Мне было бы удобней воспринять его таблицей или списком 4. на главной настройте падеж "Еще 222 отзывы в каталоге Recoursia" 5. много лишних слов в текстах. Например, здесь http://recoursia.by/catalog/bazy-dannyh/ . Я бы переписала все описания курсов в инфостиле 6. http://recoursia.by/catalog/obschaja-podgotovka-polzovatelja-kompjutera/ если слева логотип учебного центра — понятно. Но мелкие неинформативные картинки скорее раздражают 7. http://recoursia.by/courses/belsoft/administrirovanie-servera-oracle/ Опишу впечатления на примере одного курса. Мне понравилась таблица, но напрягает вот что: - почему указано "Нулевой уровень начальных знаний", но затем сразу же противоречие "необходимы знания и навыки работы с базами данных"? - не все понимают, что такое "40 ак. ч." - "Формат присутствия слушателей" — очный. Было бы классно, если адрес, куда надо ездить, был бы рядом - "Теоретический курс" — справа стоит плюсик. Я сначала подумала, что это кнопка, нажав на которую, откроются детали. Вводит в заблуждение - при наведении на пункт появляется иконка — восклицательный знак. При наведении на него я вижу подсказку. Но до этого всего надо догадаться. В общем, я бы как-то упростила и сделала более очевидным - я не вижу цены, сроков, когда я могу пройти курс. Непонятно, что делать дальше. Вот мне все понравилось. Куда звонить, как записаться? Со страницы курса нет никаких переходов. 8. оттипографьте тексты (предлоги висят в конце строк везде) 9. страница помощи — на самом деле просто FAQ. Нет формы для моего вопроса, например 10. в помощи сказано, что для записи на курс надо перейти во вкладку "Группы" на странице курса. Но здесь, например, http://recoursia.by/courses/belsoft/administrirovanie-servera-oracle/ , я ее не вижу. Как так? А также, может лучше не сделать запись более очевидной, чтобы человеку не пришлось лезть в помощь за подсказкой? 11. там же "Заполните форму записи на курс, чтобы наши менеджеры могли связаться с вами." Здесь непонятно, менеджеры Recoursia или менеджеры этого учебного центра? Кто со мной свяжется и когда? Может, удобнее и быстрее написать/позвонить в учебный центр напрямую? В общем, здесь не очевидна польза такой записи. 12. "Мы проверяем каждый отзыв, который появляется на сайте" — хорошо бы знать, как именно, а то доверие просто так не появляется ) 13. там же "Вы можете оставить заявку на добавление вашего образовательного учреждения в каталог Recoursia на соответствующей странице." — где эта соответствующая страница? Хорошо бы сразу ссылку 14. Форма подписки "Подпишитесь на рассылку и получайте лучшие предложения и полезные советы" — советы о чем и от кого? 15. Раз у вас есть соцсети, можно добавить ссылки на них в контакты и футер 16. http://recoursia.by/news/ мне не очень понятно, зачем нужны такие большие фото, тем более что большинство — стоковые и не несут никакой информации. Только мешают скролить ) 17. там же кнопка "Подробнее" ближе к следующей статье, вводит в заблуждение. Я бы увеличила отступ после нее. 18. разделу больше подходит название "Блог", чем "Новости" Общее впечатление, погуляв по сайту — задумка хорошая, приятная цветовая палитра (текст нормально воспринимается). Но хотелось бы больше аккуратности и заботы обо мне. PS Я верхнюю полоску с поиском и регистрацией вообще только в конце заметила (

Если говорить только про одинаковые свойства, я бы так сделала https://jsfiddle.net/Benedetta/d0g7kr5e/2/ Вынесла одинаковые стили в общий класс и добавила специфические для каждого блока отдельными классами. Но в целом, я бы не стала здесь использовать абсолютное позиционирование (зачем?). Тогда margin не пришлось бы писать свой для каждого блока. И еще я бы посоветовала упорядочивать свойства по какому-нибудь правилу. Вот тут хорошие советы по форматированию CSS https://learn.javascript.ru/css-format

Пропишите justify-content: center, будет по центру https://jsfiddle.net/Benedetta/gs5fqxL5/1/

Свойство vertical-align работает только для контейнеров, у которых свойство display имеет значение inline или table-cell. Здесь оно не поможет. Выравнивание сейчас удобно делать через flexbox, советую ознакомиться. Конкретно в этом примере — блок очень мал для такого текста, 35x35px. Если увеличить его и сделать флексбоксом, то например так https://jsfiddle.net/Benedetta/k1ew6kjo/

Спасибо

Тоже не разобралась, как решить. Вот единственная ветка, которую нашла по теме. И то старая. Но предложенное решение у меня не сработало https://github.com/twbs/bootstrap/issues/14839

Здравствуйте! Покажите код или дайте ссылку на страницу. Вообще, это известный баг.

Привет! Посмотрела код страницы, но там в качестве классов стоят какие-то иконки. Тут view-source:https://glenmaddern.com/articles/css-modules Как и зачем это сделано, кто знает?

Здравствуйте! "она не изменяется" имеется ввиду он, фон? Пришлите ссылку на страницу или полный CSS. Потому что с текущим кодом фон задается нормально https://jsfiddle.net/91wjttw4/

Действительно очень интересные штуки, поизучаю. Ну и Ваш посыл понятен: не лепить JS, даже простейший, если можно обойтись без него.

Здравствуйте! Что именно сейчас не так с основным блоком? Ваши пункты 2 и 3 трудно понять, хотя задача, похоже, простая. Предположу: Вам не нравится, что при ширине экрана, меньшей 700px, блок с id rom слишком сильно сжимается. На телефоне совсем плохо. Это можно исправить так: через media queries пропишите для такого случая у id dbox нулевой padding.

Пошла переваривать Ваши рекомендации. Звучат очень разумно. Про prepros вообще не знала, только с gulp экспериментировала. Большое спасибо

Хорошо, буду иметь ввиду. Да, я помню Вы MDL упоминали в другой ветке. С бутстрапом знакома, но только на float. Видимо, пора флексы и css grid осваивать. Только смущает, что со старыми браузерами могут быть проблемы. Инструментами пока не пользуюсь, только редактором. Хочу сперва понять, как "правильно" писать. Есть затык с сеткой и вообще позиционированием элементов, тем более как это совмещать с БЭМ-методологией. Поэтому попросила последнюю вёрстку Спасибо

Многие пункты были скорее придирками, чем критикой Здорово, что прокомментировали. 8. В текущей верстке так: - весь блог обернут в article, - внутри него (не считая оберток) превьюшки статей, размеченные каждая как div. Лучше обернуть весь блог в тег section. Он объединит заголовок и три превьюшки в один логический раздел. Для таких случаев и создан тег section. Вы так и сделали для остальных блоков, например, "What people say". Для каждой из трех превьюшек стоит использовать тег article вместо div. Он свяжет ее заголовок, картинку и блок с цифрами в одну смысловую единицу. При этом блок превью — достаточно изолированный и самодостаточный, поэтому вместо section берем article. Я в этом вопросе недавно только разбиралась. Поэтому поправьте, если заблуждаюсь. PS Можете показать свои новые работы? Не для критики, а так, для себя. Имеются ввиду фреймворки, основанные на флексбоксах? За ссылку спасибо, ознакомлюсь

Endorphin, не знала о таком хаке, спасибо за информацию Как оказалось, чекбоксом можно много чего делать, и JS не понадобится. Но наверняка есть минусы, какие? Кроме того, что тег используется не по назначению.

Хорошо. С ВП достаточно просто, тем более в интернете полно обучалок и инструкций на русском. Успехов

Здравствуйте! Можете по этому примеру https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_accordion_animate сделать. Вам никто не мешает вместо текста поставить ссылки или какие угодно теги (список и т.п.) https://jsfiddle.net/Benedetta/14fe5t05/

Вам нужен будет доступ к панели администратора того сайта (адрес, логин и пароль). Дальше зависит от того, как должна отображаться новая страница. Если на основе какой-нибудь другой, в стиле того сайта, то достаточно создать на основе шаблона обычной страницы. В качестве контента поставите код теста, но придется править верстку. Как все это делать, думаю разберетесь, как зайдете в админку. Там слева будет меню с пунктами, выберите "Страницы" (не "Записи"!). Если страница должна быть полностью со своим дизайном (как Вы нам показываете), то придется создавать шаблон. И потребуется доступ через FTP (тоже попросите у клиента) и программа — FTP менеджер (например, Total Commander). Советую немного ознакомиться с Wordpress. Почитайте про страницы и шаблоны, как их создают.

Здравствуйте! Не совсем понятно насчет "как мне это залить на сайт ворд пресс другого человека?" Итак, у Вас есть страница, которую нам показываете. И есть чужой сайт, работающий на движке Wordpress (дайте нам ссылку на него, чтобы было понятней). Вы на него хотите добавить такую страницу. Я правильно поняла?

Здравствуйте! Кроме якоря и предложенного варианта выше, есть еще такой на JS http://codepen.io/bryanbraun/full/pyvypv/ Преимущество в том, что, в отличие от scrollTo, здесь нет привязки к размеру контента выше.

Здравствуйте! Пока тоже учусь. Из того, что заметила: 1. При верстке блоков с текстом учитывайте, что его размеры могут меняться. Чтобы так не было, например: 2. Меня смущает горизонтальный скролл, который вылезает на доли секунды при прокрутке. 3. Тут ожидается, что в аккордеоне справа при нажатии на стрелочку пункт будет схлопываться, но этого не происходит 4. Здесь в карусели невозможно курсором выделить текст, чтобы скопировать. Я бы не стала блокировать эту возможность 5. Насколько я понимаю, картинки, содержащие информацию, лучше верстать через тег img, а не свойство background-image. Здесь у Вас фото как фон (кстати, там же и проблема с размером подписи) 6. У меня нет макета, но есть подозрение, что стрелочка в круге должна быть по центру, а не смещена вниз 7. В галерее "some of our work" меня смущают три вещи: 1) фото невозможно увеличить, хотя при этом на сайте много всякой анимации; 2) столбцы имеют класс row, тогда как обычно он используется для названия строк (для столбцов обычно col); 3) картинки снова сверстаны как фоны. 8. Я не вполне согласна с использованием тегов в блоге (основной блок и в футере) с точки зрения семантики. Весь блог я бы обернула в section, а превьюшки сделала через article каждую. И по меньшей мере с фотки должна быть ссылка на статью. 9. При наведении на анимированные элементы курсор ведет себя по-разному, хотя во всех этих случаях при клике ничего не происходит. Например, 10. При прокрутке вниз, на мой взгляд, слишком большая задержка у появления элементов. Я не знаю, какая должна быть, но вот как пользователя напрягает В остальных вопросах не могу оценить. Пока не умею, как Вы. Но есть вопрос: кроме .container, других классов нет, определяющих сетку? Я правильно поняла, что все построено на flexbox?

Покажите код, чтобы вопрос стал понятнее

Здравствуйте! Поддерживаю Klerik. Платформа Wordpress с плагином WooCommerce будет самым простым решением. Почитайте о Wordpress тут https://ru.wordpress.org/ и о плагине здесь https://ru.wordpress.org/plugins/woocommerce/ По сути, что нужно будет сделать: установить Wordpress (он бесплатный), выбрать и настроить тему (есть платные и бесплатные), установить и настроить плагин Woocommerce, загрузить контент на сайт. Я не профи, но в свое время справилась, поэтому там точно ничего сложного. Только перед всем этим заранее спланируйте, узнайте, позволяет ли Вам хостинг всё это проделать. И случайно не затрите то, что уже есть на текущем сайте.

Посмотрела. У дива с классом .container сделайте нулевые паддинги по бокам. Вместо 25px. Тогда белые поля уйдут. Кстати, так не советую писать { width: 600;} Потому что Вы не указываете единицу измерения. 600 чего? Наверное, 600px