Pashkes

Могу рассказать свой путь, но это индивидуально наверное. Я начал свое обучение с конца декабря прошлого года. Прошел почти все курсы на html academy, кроме флексов и less, затем записался на базовый интенсив который начался в середине января, длился он 5 недель, после этого практика, было к сожалению 2 месяца перерыва, потом записался на продвинутый интенсив который начался в середине мая, было адски тяжело, словами не передать, чуть не помер от недосыпания, но проект свой сдал почти на максимум. Кратко о программе обучения(работа в git, gulp, препроцесоры (sass, less, precss), БЭМ, флексы, адаптив, адаптивная графика, работа с svg). После этого записался на базовый js который начнется через несколько недель, по слухам будет еще сложнее. Вариант с интенсивами конечно же если есть деньги, но я думаю для обучения денег не должно быть жалко, при том очень эффективного обучения

на github очень удобно через gh-pages, но для начинающего там будет сложно разобраться https://help.github.com/articles/creating-project-pages-manually/ лучше сосредоточится на обучении. Можно пойти простым путем, просто создать репозиторий с именем username.github.io и просто перейти потом по этому адресу чтоб посмотреть работу, но тут минус что имя можно такое назначить только одному репозиторию

верстка - https://pashkes.github.io/pink/ исходники - https://github.com/pashkes/pink макеты - https://drive.google.com/file/d/0B-aDLlVbnLubR2hvV19TRzdGa00/view?usp=sharing Адаптивный проект в 3 страницах (Главная, Фотографии, Конкурс), контрольные точки (320px, 660px, 960px). Использован препроцессор Sass, сетка сделана на флексах, использована адаптивная графика и ретенизация

обновил адрес верстки - https://pashkes.github.io/tour/

header__translucent-bg это тянущийся полупрозрачный темный слой, зачем его изменять на container если он фиксированной ширины А что с блоком social не так, обычный список со ссылками внутри. search-tour__field-wrapper search-tour__field-wrapper--icon-search это обертка поля ввода для иконок <div class="social"> <ul class="social__list"> <li><a class="social__item social__item--fb" href="#">fb</a></li> <li><a class="social__item social__item--tw" href="#">tw</a></li> <li><a class="social__item social__item--insta" href="#">insta</a></li> <li><a class="social__item social__item--youtube" href="#">youtube</a></li> <li><a class="social__item social__item--viber" href="#">viber</a></li> </ul> </div> Так если нету больше других версий макета (мобильной, планшетной), мне что нужно было самому придумать как должны себя вести блоки на других девайсах? Спасибо за уделенное время на меня:) На днях выложу верстку первого адаптивного проекта который делал на продвинутом интенсиве htmlAcademy, 3 страницы, каждая страница в 3 версиях. Мне конечно уже его проверяли, но мне кажется не достаточно тщательно, хоть я и сдал его на 97%

Забыл для body добавить min-width: 1200px

так адаптив и не задумывался, тем более макет только в десктоп версии. А, все, понял косяк, исправлю

Оцените пожалуйста верстку простенького лэндинга, фикс, использован препроцессор Sass, флексы, именование классов выполнено по БЭМ ссылка на работу - https://pashkes.github.io/ ссылка на репозиторий - https://github.com/pashkes/pashkes.github.io ссылка на макет - https://drive.google.com/open?id=0B2WaTCbThw1GR0dmb3d0V2J2S28

text-transform: uppercase нужно было прописать для body, так же как и размер шрифта и высоту строки для абзацев, зачем дублировать код постоянно в каждом блоке. На счет регулировки отступов высотой строки, то это просто не рекомендуют делать, кстати высоту строки рекомендуют задавать не в пикселях, а в относительных единицах, берете высоту строки и делите на размер шрифта, получается относительная единица, обычно это 1.2 или 1.3. h1 может быть больше 1 на странице, это даже в спецификации написано, заголовки используются по важности содержимого. Высоту для контентных блоков вообще нельзя задавать, можно min-height если для блока задан какой то фон картинкой, а обычно фиксированную высоту задают декоративных элементам. Для подключение плагина для jquery не нужно каких то знаний ( по крайнем мере мне). Как вариант можно слайдер делать на чистом css через чекбоксы и лейблы, гуглите. Вот пример http://codepen.io/pashkes/pen/KVXWEP Помимо этих ошибок тут еще очень много, В общем рекомендую на интенсив записаться, точно не пожалеете. На счет адаптива, то я сам еще боюсь начинать. Просто нет смысла за все сразу хвататься как это большинство делают и потом говнокодить, лучше очень хорошо закрепить выученный материал.

По-моему, нормально. Единственно, БЭМ предполагает полный отказ от каскадных стилей. Но тут, вероятно, кому как нравится. Холиварная тема :-) это точно, давать классы ссылкам в элементах списка или заголовкам h, абзацам, как то не совсем правильно, тут я думаю по ситуации

А есть что сказать по именам классов? Впервые использовать БЭМ в именовании классов.

косяк, забыл в body добавить min-width: 900px)

Покажите мне где тут 2h1 заголовка, видимо я слепой. Заголовки должны нести смысловую нагрузку, а какую скажите мне какую нагрузку несут заголовки: "Новостная рассылка", "Скриншоты", "Спросите у поддержки", "Связатся". Единственный заголовок во всех главных блоках можно было обернуть в h2 это "Olivia Blog Post", остальные это span. На счет заголовка в теге section, вот именно что это рекомендация, а не грубая ошибка, поэтому тут на усмотрение каждого, и это мне говорили люди у которых больше 5 лет опыта. В предпоследнем экране стрелочки изначально я так и сделал, но появилась проблема с тем чтоб меня цвет при наведении, поэтому заменил картинками, так как размеры этого блока никогда не должны меняться, то я не думаю что это грубая ошибка. Можете кстати подсказать как менять фон блока в вместе с псевдо элементом. Update. Нужно было блок даты в обычном состоянии для after сделать прозрачным, а при наведении делать нужным цветом странно, у меня все фоны при разрешении 900px не обрезаются, проверял и в инструментах разработчика в режиме девайсов и просто менял разрешение окно мышкой и ничего не обрезается, правда увидел несколько других косяков. В каком браузере вы смотрите?

он просто масштабируется пропорционально

Зачем писать ввесь текст с включенным caps lock если можно было в body прописать text-transform: uppercase Регулировать отступы как в главном меню высотой строки вроде считается дурным тоном. Быстро Круто Дорого не h2. Блок где новости не проходит тест на переполнение контентом. Зачем задавать фиксированную высоту? В картинке фото галереи отсутствует размер изображения, как и в логотипа. Блок "Контактная информация" и "Записаться" тоже не проходит переполнение, опять же, задана фиксированная высота. Название всех 4-х блоков не h2, а обычный span. Почему вы нигде не убирали дополнительные отступы которые присущие инлайн блокам? Почему слайдер не работает, кстати рекомендую для слайдеров плагин под jquery, разбираться минут 20 http://bxslider.com/Только не говорите что вы прошли последний интенсив на htmlAcademy, потому что я тоже его проходил и все ошибки которые вы допустили одни из самых грубых, и это я только пробежался визуально, а если еще в исходный код посмотреть Если понимаешь о чем я, то попробуй сверстать Глейси) Барбершоп тебе покажется блокнотом по сложности)

Резина 1200-900 http://pashkes.github.io/ Исходники: https://github.com/pashkes/pashkes.github.io Скриншот макета в корне репозитория Что делать дальше, начинать изучать новое (Sass, LESS, флексы ) или закреплять еще больше на практике то что знаю? Не хочется просто все подряд изучать не закрепив полностью выученный материал, как некоторые в большинстве случаев делают.

для телефонов наверное вообще анимацию нужно отключать

как по мне трансформацией лучше реализовать

Посмотрите пожалуйста разметку главной страници. А именно, правильно ли я понял суть именования классов по БЭМ. Только я для отделение элемента от блока использовал "_", а модификатор отделял "--" Ссылка на репозиторий: https://github.com/pashkes/olivia.git Скриншот макета в корне репозитория.

зачем так делать? Использовать идентефикатор для стилизации, да еще и задавать фиксированую высоту футеру. Зачем постоянно прописывать article.au-left зачем писать article если это и есть article #footer { font-size: 16px; color: #7cc2d4; background-color: #3c535b; height: 80px;}Я хоть и новичек который прошел базовый интенсив на html academy, но могу вам сказать точно что у вас минимум 50% лишнего css кода. А вот это вообще жесть) .oj-items figure.i2 .text-container h2 span { text-decoration: line-through;}

Неужели больше нет замечаний?

если интересно где научился, то можете посмотреть на логотипчик в футере)

Вы смотрели устаревшую версию, посмотрите пожалуйста еще раз, только на этот раз скачайте репозиторий с гит хаба, там последние изминения, слайдер полностью переделан. Как раз БЭМ и LESS это моя следующая цель. Нормальный прогресс за 2 месяца? На счет поиска, пока что меньше всего хочется забивать себе голову js, хочу сначало закрепить то что знаю, а уже потом двигаться дальше

Вёрстка: http://pashkes.github.io Исходники: https://github.com/pashkes/164879-gllacy Резина 1200-900, главная страница и страница каталога (в меню), форма обратной связи в блоке карты. Скриншоты 2-х страниц: https://screenshot.ru/upload/image/NjiK https://screenshot.ru/upload/image/NjiL

После получения всех данных HTML с сервера удалось отобразить только 68 % от общего объема содержания из верхней части страницы. Почитайте о прогрессивном улучшении