icon-academyicon-githubicon-mailicon-phoneicon-vk

Базовый HTML и CSS

Базовые критерии

Разметка

  • Б1. Вы­пол­не­на HTML-раз­мет­ка всех стра­ниц и всех эле­мен­тов на стра­ни­цах.
  • Б2. К стра­ни­цам под­клю­чён один сти­ле­вой файл (с учётом normalize.css или reset.css к каж­дой стра­ни­це мо­гут быть под­клю­че­ны два фай­ла).
  • Б3. Сти­ле­вой файл под­клю­чён внут­ри <head>.
  • Б4. Гру­бые ошиб­ки в раз­мет­ке от­сут­ст­ву­ют. На­при­мер: ссыл­ки сде­ла­ны не те­гом <a>, а дру­ги­ми те­га­ми; ис­поль­зо­ва­ние строч­ных эле­мен­тов для со­зда­ния круп­ных (се­точ­ных) бло­ков; аб­за­цы сде­ла­ны не те­га­ми <p>, а <br> <br>.
  • Б5. До­ку­мент про­хо­дит про­вер­ку на ва­лид­ность http://validator.w3.org/nu/.

Стилизация

  • Б6. Вся собст­вен­ная сти­ли­за­ция вы­пол­не­на в од­ном сти­ле­вом фай­ле.
  • Б7. Рас­клад­ка бло­ков на стра­ни­це сде­ла­на не с по­мощью таб­лиц или по­зи­ци­о­ни­ро­ва­ния.
  • Б8. В CSS от­сут­ст­ву­ет !important. До­пус­ка­ет­ся ис­поль­зо­ва­ние !important при об­ос­но­ва­нии его не­об­хо­ди­мос­ти в ком­мен­та­рии.
  • Б9. Под­клю­че­ны пра­виль­ные шриф­ты, их раз­ме­ры и тол­щи­на со­от­вет­ст­ву­ют раз­ме­рам в ма­ке­тах и ТЗ.
  • Б10. Ука­за­ны аль­тер­на­тив­ные ва­ри­ан­ты шриф­та и тип се­мейст­ва в кон­це пе­ре­чис­ле­ния font-family.
  • Б11. При на­пол­не­нии кон­тен­том (как в ма­ке­те) эле­мен­ты каж­дой стра­ни­цы со­от­вет­ст­ву­ют ма­ке­ту, но до­пус­ка­ют­ся: раз­ли­чия в 5 пик­се­лей по вы­со­те (при рас­сто­я­ни­ях бо­лее 30 пик­се­лей) и 2 пик­се­ля по ши­ри­не; от­сут­ст­вие сти­ли­за­ции кас­том­ных эле­мен­тов форм; раз­ли­чия в ото­бра­же­нии шриф­тов, свя­зан­ные со сгла­жи­ва­ни­ем на раз­лич­ных плат­фор­мах.

Тестирование

  • Б12. Вёрст­ка иден­тич­но ото­бра­жа­ет­ся в по­след­них вер­си­ях бра­у­зе­ров Chrome, Opera, Firefox, Safari, а так­же в Internet Explorer 10+.
  • Б13. Сайт нор­маль­но смот­рит­ся на ми­ни­маль­ном для ма­ке­та раз­ре­ше­нии. padding по кра­ям кон­тей­не­ра ука­зы­ва­ет­ся для то­го, что­бы кон­тент не при­жи­мал­ся к кра­ям эк­ра­на на ми­ни­маль­ном раз­ре­ше­нии. При боль­шем раз­ме­ре эк­ра­на ма­кет дол­жен оста­вать­ся по цент­ру и не иметь го­ри­зон­таль­но­го скрол­ла. На раз­ре­ше­ни­ях эк­ра­на мень­ше ши­ри­ны кон­тей­не­ра вёрст­ка не долж­на ме­нять свою струк­ту­ру.

Разное

  • Б14. В кор­не до­ку­мен­та име­ют­ся пап­ки css, img, js или ана­ло­гич­ные. Глав­ная стра­ни­ца име­ет на­зва­ние index.html. В на­зва­ни­ях и рас­ши­ре­ни­ях фай­лов нет за­глав­ных букв и про­бе­лов, ис­поль­зо­ва­ны толь­ко ла­тин­ские сим­во­лы.
  • Б15. Еди­но­об­раз­ное на­пи­са­ние и фор­ма­ти­ро­ва­ние ко­да в HTML, CSS и JavaScript.
  • Б16. Вы­бран под­хо­дя­щий фор­мат изо­бра­же­ний. На­при­мер: JPEG для фо­то­гра­фий; PNG или SVG для всех про­чих.

Дополнительные критерии

Разметка

  • Д1. У всех изо­бра­же­ний в те­ге <img> про­пи­сан раз­мер.
  • Д2. Ис­поль­зо­ва­но ми­ни­маль­но воз­мож­ное ко­ли­чест­во HTML-эле­мен­тов (нет лиш­них эле­мен­тов).
  • Д3. Все скрип­ты под­клю­че­ны не­по­средст­вен­но пе­ред </body>.
  • Д4. На­зва­ния по­лей форм при­вя­за­ны к сво­им по­лям с по­мощью <label>.

Стилизация

  • Д5. Ис­поль­зо­ва­ны normalize.css или reset.css (но не оба сра­зу).
  • Д6. Для сти­ли­за­ции не ис­поль­зо­ва­ны #id.
  • Д7. Нет вло­жен­нос­ти се­лек­то­ров боль­ше двух.
  • Д8. Яв­но ука­за­но под­хо­дя­щее vertical-align для по­то­ко­вых бло­ков с display: inline-block.
  • Д9. Для CSS-свойств с пре­фик­сом ука­зан его ва­ри­ант без пре­фик­са и это ука­за­ние идёт по­след­ним.
  • Д10. Для бло­ка у ко­то­ро­го есть фо­но­вое изо­бра­же­ние про­пи­сан фо­но­вый цвет, ко­то­рый со­от­вет­ст­ву­ет пре­об­ла­да­ю­ще­му цве­ту изо­бра­же­ния (по­ка изо­бра­же­ние не за­гру­же­но, стра­ни­ца вы­гля­дит по­хо­же на ма­кет).
  • Д11. Все со­сто­я­ния эле­мен­тов (смот­ри­те styleguide.psd) про­пи­са­ны в сти­ле­вом фай­ле.
  • Д12. Файл сти­лей пред­став­лен в двух ва­ри­ан­тах: с фор­ма­ти­ро­ва­ни­ем и ми­ни­ми­зи­ро­ван­ный, к стра­ни­це под­клю­чён ми­ни­ми­зи­ро­ван­ный.

JavaScript

  • Д13. JavaScript-файл пред­став­лен в двух ва­ри­ан­тах: с фор­ма­ти­ро­ва­ни­ем и ми­ни­ми­зи­ро­ван­ный, к стра­ни­це под­клю­чён ми­ни­ми­зи­ро­ван­ный.
  • Д14. С по­мощью JavaScript ре­а­ли­зо­ва­но от­кры­тие/за­кры­тие ок­на с фор­мой (без вспо­мо­га­тель­ных биб­лио­тек).
  • Д15. С по­мощью JavaScript до­бав­ле­на ани­ма­ция фор­мы (без вспо­мо­га­тель­ных биб­лио­тек).
  • Д16. До­бав­ле­на ин­тер­ак­тив­ная кар­та (до­пус­ка­ет­ся под­клю­че­ние с по­мощью iframe).

Тестирование

  • Д17. Вёрст­ка про­хо­дит тест на пе­ре­пол­не­ние кон­тен­том: не ло­ма­ет­ся при до­бав­ле­нии в эле­мен­ты боль­ше­го ко­ли­чест­ва текс­та; не ло­ма­ет­ся при ис­поль­зо­ва­нии кар­ти­нок с не­под­хо­дя­щи­ми раз­ме­ра­ми; не ло­ма­ет­ся при из­ме­не­нии ко­ли­чест­ва по­то­ко­вых бло­ков. Текст не вы­па­да­ет из бло­ков, ни­же­рас­по­ло­жен­ные бло­ки не скры­ва­ют­ся, сме­ще­ние бло­ков в по­то­ке со­хра­ня­ет ло­ги­ку по­то­ка (не при­во­дит к на­ру­ше­нию сет­ки).
  • Д18. Кри­ти­чес­кий функ­ци­о­нал сай­та ра­бо­то­с­по­со­бен без JavaScript (ис­поль­зо­ва­но про­грес­сив­ное улуч­ше­ние). На­при­мер: все фор­мы яв­ля­ют­ся ра­бо­то­с­по­соб­ны­ми без JavaScript; эле­мен­ты, вы­зы­ва­ю­щие по­яв­ле­ние по­па­пов, яв­ля­ют­ся ссыл­ка­ми, ве­ду­щи­ми на от­дель­ные стра­ни­цы; ин­тер­ак­тив­ная кар­та без JavaScript по­ка­зы­ва­ет ста­тич­ную кар­тин­ку с кар­той.

Разное

  • Д19. От­сут­ст­ву­ет транс­лит в на­зва­ни­ях клас­сов, ат­ри­бу­тах и так да­лее.
  • Д20. При вза­и­мо­дейст­вии с эле­мен­та­ми (на­ве­де­ние, на­жа­тие) ни сам эле­мент, ни окру­жа­ю­щие его бло­ки не ме­ня­ют сво­е­го по­ло­же­ния (если иное не про­пи­са­но в ТЗ или slyleguide.psd).
  • Д21. Про­ве­де­на ба­зо­вая оп­ти­ми­за­ция: ми­ни­фи­ци­ро­ва­ны сти­ли и скрип­ты, ис­поль­зо­ван спрайт или ико­ноч­ный шрифт (мож­но оба).

Продвинутый HTML и CSS

Базовые критерии

Разметка

  • Б1. Вы­пол­не­на HTML-раз­мет­ка всех стра­ниц про­ек­та и всех эле­мен­тов на этих стра­ни­цах.
  • Б2. Гру­бые ошиб­ки в раз­мет­ке от­сут­ст­ву­ют.
  • Б3. До­ку­мент про­хо­дит про­вер­ку на ва­лид­ность http://validator.w3.org/nu/.
  • Б4. В раз­мет­ке от­сут­ст­ву­ет дуб­ли­ро­ва­ние ко­да для од­но­го и то­го же эле­мен­та, с по­мощью ко­то­рых эле­мент ото­бра­жа­ет­ся в раз­ных мес­тах стра­ни­цы на раз­ных вер­си­ях: мо­биль­ной, дес­к­топ­ной, план­шет­ной. Этот кри­те­рий не ка­са­ет­ся эле­мен­тов, ко­то­рые скры­ва­ют­ся или по­ка­зы­ва­ют­ся в раз­ных вер­си­ях.
  • Б5. От­сут­ст­ву­ют ти­по­вые ошиб­ки в раз­мет­ке по ме­то­до­ло­гии БЭМ.

Стилизация

  • Б6. Рас­клад­ка бло­ков на стра­ни­це сде­ла­на не с по­мощью таб­лиц или по­зи­ци­о­ни­ро­ва­ния.
  • Б7. В CSS от­сут­ст­ву­ет !important.
  • Б8. Под­клю­че­ны пра­виль­ные шриф­ты, их раз­ме­ры, цве­та и жир­ность со­от­вет­ст­ву­ют раз­ме­рам, цве­там и жир­нос­ти в ма­ке­тах и тех­ни­чес­ком за­да­нии.
  • Б9. Не­стан­дарт­ные шриф­ты под­клю­че­ны ло­каль­но. Фор­мат шриф­тов дол­жен быть woff и woff2.
  • Б10. Ука­за­ны аль­тер­на­тив­ные ва­ри­ан­ты шриф­та и тип се­мейст­ва в кон­це пе­ре­чис­ле­ния font-family.
  • Б11. При на­пол­не­нии кон­тен­том (как в ма­ке­те) эле­мен­ты каж­дой вер­сии стра­ни­цы (мо­биль­ной, план­шет­ной и дес­к­топ­ной) со­от­вет­ст­ву­ют ма­ке­ту.

CSS-препроцессор

  • Б12. Ис­поль­зо­ван CSS-пре­про­цес­сор.
  • Б13. Код сти­лей дол­жен быть раз­бит на не­сколь­ко час­тей.

Адаптивность

  • Б14. Вы­пол­не­на вёрст­ка трёх со­сто­я­ний каж­дой стра­ни­цы: мо­биль­ной, план­шет­ной и дес­к­топ­ной.
  • Б15. Адап­тив­ность долж­на ра­бо­тать на план­ше­тах и мо­биль­ных устройст­вах.
  • Б16. Ис­поль­зо­ва­ны флек­с­бок­сы.
  • Б17. Вы­пол­не­на ре­ти­ни­за­ция раст­ро­вой гра­фи­ки.
  • Б18. Ис­поль­зо­ва­на век­тор­ная гра­фи­ка.
  • Б19. Ло­го­тип дол­жен адап­ти­ро­вать­ся.
  • Б20. Вы­пол­не­но кад­ри­ро­ва­ние кон­тент­ных изо­бра­же­ний.

Оптимизация

  • Б21. «Неж­ная» ре­ти­ни­за­ция.

Сборка проекта

  • Б22. Про­цесс сбор­ки лич­но­го про­ек­та дол­жен быть на­стро­ен с по­мощью ин­ст­ру­мен­тов Грант или Галп.
  • Б23. Все за­ви­си­мос­ти про­ек­та долж­ны быть ука­за­ны в фай­ле package.json. Ко­ман­да npm i долж­на уста­но­вить всё не­об­хо­ди­мое для то­го, что­бы сбор­ка про­ек­та ра­бо­та­ла.
  • Б24. Сбор­ка про­ек­та долж­на за­пус­кать­ся ко­ман­дой npm run build.
  • Б25. В ре­зуль­та­те сбор­ки долж­на по­лу­чать­ся пап­ка build со все­ми не­об­хо­ди­мы­ми фай­ла­ми.
  • Б26. Пап­ка build со всем её со­дер­жи­мым не долж­на по­па­дать в Гит­хаб.

Разное

  • Б27. Вёрст­ка иден­тич­но ото­бра­жа­ет­ся в по­след­них вер­си­ях бра­у­зе­ров Chrome, Opera, Firefox, Safari, Edge, а так­же в Internet Explorer 11.
  • Б28. Еди­но­об­раз­ное на­пи­са­ние и фор­ма­ти­ро­ва­ние ко­да в HTML, фай­лах CSS-пре­про­цес­со­ра и JavaScript (вклю­чая фай­лы ав­то­ма­ти­за­ции).
  • Б29. От­сут­ст­ву­ет транс­лит в на­зва­ни­ях клас­сов, ат­ри­бу­тах, пе­ре­мен­ных CSS-пре­про­цес­со­ра, на­зва­ни­ях при­ме­сей и так да­лее.
  • Б30. Мо­биль­ное ме­ню долж­но быть ра­бо­то­с­по­соб­ным на мо­биль­ной вер­сии при от­клю­чен­ном JavaScript.

Дополнительные критерии

Разметка

  • Д1. У всех век­тор­ных изо­бра­же­ний раз­мер про­пи­сан в те­ге <img>, у встро­ен­ных SVG-изо­бра­же­ний раз­мер про­пи­сан в те­ге <svg>.
  • Д2. Ис­поль­зо­ва­но ми­ни­маль­но воз­мож­ное ко­ли­чест­во HTML-эле­мен­тов (нет лиш­них эле­мен­тов).
  • Д3. На­зва­ния по­лей форм при­вя­за­ны к сво­им по­лям с по­мощью <label>.

Стилизация

  • Д4. Для сти­ли­за­ции не ис­поль­зо­ва­ны #id.
  • Д5. Яв­но ука­за­но под­хо­дя­щее vertical-align для по­то­ко­вых бло­ков с display: inline-block.
  • Д6. Для бло­ка, у ко­то­ро­го есть фо­но­вое изо­бра­же­ние, про­пи­сан фо­но­вый цвет, ко­то­рый со­от­вет­ст­ву­ет пре­об­ла­да­ю­ще­му цве­ту изо­бра­же­ния (по­ка изо­бра­же­ние не за­гру­же­но, стра­ни­ца вы­гля­дит по­хо­же на ма­кет).
  • Д7. Все со­сто­я­ния эле­мен­тов (смот­ри­те styleguide.psd) про­пи­са­ны в сти­ле­вом фай­ле.

CSS-препроцессор

  • Д8. Цве­то­вые функ­ции мо­гут ис­поль­зо­вать­ся толь­ко для из­ме­не­ния аль­фа-ка­на­ла цве­та.
  • Д9. При­ме­си не ис­поль­зу­ют­ся для ге­не­ра­ции пра­вил с вен­дор­ны­ми пре­фик­са­ми.
  • Д10. Нет вло­жен­нос­ти боль­ше двух уров­ней.
  • Д11. Вер­ное ис­поль­зо­ва­ние & в сти­ле­вых фай­лах.
  • Д12. Не ис­поль­зу­ют­ся рас­ши­ре­ния (extend).

Тестирование

  • Д13. Вёрст­ка про­хо­дит тест на пе­ре­пол­не­ние кон­тен­том.
  • Д14. Кри­ти­чес­кая функ­ци­о­наль­ность сай­та ра­бо­то­с­по­соб­на без JavaScript (ис­поль­зо­ва­но про­грес­сив­ное улуч­ше­ние).

Разное

  • Д15. При вза­и­мо­дейст­вии с эле­мен­та­ми (на­ве­де­ние, на­жа­тие) ни сам эле­мент, ни окру­жа­ю­щие его бло­ки не ме­ня­ют сво­е­го по­ло­же­ния (если иное не про­пи­са­но в тех­ни­чес­ком за­да­нии или slyleguide.psd).