Themeforest. Урок 12 — Требования к HTML шаблону (теория) / Envato Market

Автор Denis Lisitsin
Themeforest. Урок 12 — Требования к HTML шаблону (теория) / Envato Market

в этом уроке давать с вами поговорим про требования к HTML шаблона данный урок будет теоретически я вам расскажу разные нюансы моменты и чтобы у вас был такой своеобразный чек-лист.

А мы с вами — это всё практикуем я вам всё уже покажу подробнее пока просто пройдемся вот так теоретически по требованиям к HTML шаблон который я для себя вот отметил. Ну и конечно же — это ваш дизайн HTML шаблон должен быть современным и удобным как бы такие простые. Если вы ни разу не рисовали дизайны и пытаетесь.

Что сделать скорее всего вас не пропускают по дизайну сразу же отошьет и поэтому просто вот.

Возьмите Посмотрите на тему скорости. Какие шаблоны. Посмотрите их дизайн и дайте что-нибудь либо смоделировать что-то похожее либо придерживаться какие-то такие вот моменты в котор у других. Давайте перейдем popular Items. А кстати не смотрите шаблоны котором там три-четыре года потому, что там были требования совсем другие 3-4 года назад. Это могли проходить разные которые. Ну сейчас не пройдут модерацию, а просто вот. Зайдите и посмотрите различные шаблоны. Например если вы делаете лендинг то поищите какой-нибудь лендинг на тему скорости посмотреть разные. Найди какие у них дизайны и пытаетесь сделать. Что такое современное удобное и стильное скажем даже вот я не знаю как ещё объяснить на самом деле просто — это нужно чувствовать как бы дизайн скажем грубо говно либо нет да то есть. Ну я надеюсь многих из вас такое понимание есть. Вот например можем посмотреть вот шаблон так Live preview. Давайте посмотрим, что это. У нас сейчас он загрузится. Ну вот мы видим тут дизайн принципе такой как бы стандартную лендинг с графикой со всякими эффектами при скролле различные счётчик так далее. И как мы видим здесь у нас есть разные виды тоже этих лендингов. А мы можем выбрать например. Нам нужен Windows для фотографий. Давайте перейдём на него. Так сейчас загрузится опять же. Вот такой у них есть лендинг. Увидим в принципе — это даже не лайны от такой многостраничный сайт, а вот такой дизайн просто в принципе вот я вам советую просто по сёрфить. Форест посмотреть разные шаблоны, что они делают, что сделать своё либо если вы уже уметь рисовать или у вас есть кроме дизайнер, что может попробовать вместе всяком случае попробовать стоит так бы не попробовать и не узнаете придёт ли ваш дизайн модерацию на тему поэтому первый момент такой связанные с дизайном если вас дизайн сразу хромает то можете даже не приступать к остальным пунктам поэтому сначала разберитесь дизайном как только в принципе всё хорошо. Вы считаете, что можете пройти модерацию по дизайну то переходим дальше уже в написании кода и такой пункт — это грамотный и структурированных html-код то есть ваш кот должен быть чистым с комментариями только не увлекайтесь совсем комментариями. Вставьте лаконичные такие комментарии которые разделяют большие блоки сайта. Ну вот и старайтесь писать чистый HTML код на без всяких там ненужных пустых. Там и так далее смотрите заложенностью. То есть у вас там должно быть 10 дюймов внутри делов. Ну короче такая большая лесенка то есть следите за тем, что вы делаете показать пример своего 1 HTML шаблона давайте мы откроем Index HTML и вот в принципе — это вот исходник папка. Давайте я вам покажу уже готовые взбешенный html-файл. Вот он в принципе не видишь, что у нас как бы её стопа соблюдаются всё красиво оформлено как я есть комментарий для больших блоков. Вот и также есть закрывающие комментарий для некоторых длинных блоков я как бы такую практику у себя использую какой день закрывает какой блок, но и в принципе вот так вот выглядит кот в таком виде. Мы скоро ли мы видим большие блоки на с комментариями есть небольшие выступы между большими блоками в три строки. Ну и как-то так ну то есть ваша, что мы. Должен быть красивым структурированным и соблюдать также отступ и чтобы всё было грамотно чтобы не было там всяких непонятных таких моментов. Да вот такого бардака чтобы чтобы всё было красиво так дальше семантика то есть. Используйте также html5 теги для семантике такие как хедер для шапки, а также можете использовать section для различных разделов сайта на в тайге Footer Tag и так далее. В общем. Используйте такие семантические теги которые пришли нам sh7055 — это тоже приветствуются и также не забывайте про правильное использование заголовков на вашем на сайте то есть у. Вас должен быть на одной странице один H1 заголовок вот у меня H1 заголовок у вас не должно быть много как бы ну ладно заголовок на сайте должен быть один на странице и дальше уже используете там H2 для заголовков секций ih30 пример для других заголовков например как у меня — это заголовки продуктов я вам могу показать даже. То есть — это у меня оса H1 для заголовков в секцию меня используется H2 здесь — это H3 для заголовков к продуктам опять же H3 здесь H3 H3 — это H2 H2O. Я думаю вы смысл поняли то есть не забывайте про тот semantic-ui также про заголовки это. Они тоже смотрят, а дальше ваше, что мы должен быть валидным. То есть перед тем как заливать на simfor.ru залить тебе на хостинг и проверьте при помощи validator w3 org свой сайт зайти сюда и устраните всякие различные ошибки то есть ваш HTML должен выдавать зелёную этот надпись, что у вас нет никаких ошибок CSS можете не проверять он там ругается на всякий префиксы и так далее — это они в принципе не смотрят, но и CSS VH должен быть тоже без ошибок твоей стороны должна быть неправильных правил свойств не должно быть там всяких потерянных закрывающих скобок кавычек и так далее. Вот теперь перейдем к CSS, что всё 1 до чтобы у вас не было грубых ошибок вообще никаких и также ваш сайт должен быть красиво оформлен чтобы его можно было легко проверить читать и очень важный момент на, что они смотрят всегда — это ваш сайт должен быть документированной.

0 комментариев
0

Читайте также